Android ViewPager使用方法小結

来源:http://www.cnblogs.com/jzyhywxz/archive/2017/05/27/6914307.html
-Advertisement-
Play Games

android-support-v4.jar 是谷歌提供給我們的一個相容低版本安卓設備的軟體包，裡面包囊了只有在 Android 3.0 以上可用的API。而 ViewPager 就是其中之一。利用它，我們可以做很多事情，從最簡單的導航，到頁面菜單等等。 準備 在使用ViewPager之前，需要在 ...


android-support-v4.jar 是谷歌提供給我們的一個相容低版本安卓設備的軟體包，裡面包囊了只有在 Android 3.0 以上可用的API。而 ViewPager 就是其中之一。利用它，我們可以做很多事情，從最簡單的導航，到頁面菜單等等。

準備

在使用ViewPager之前，需要在 build.gradle 中加入如下語句：

compile 'com.android.support:support-v4:25.3.0'
compile 'com.github.hackware1993:MagicIndicator:1.5.0'

其中第一行是 android-support-v4 軟體包，ViewPager 就在裡面；第二行是一個開源的導航器，通過它，我們可以實現各種導航效果。

ViewPager -- 基本用法

ViewPager 的基本用法可以分為以下步驟：

  1. 在 layout 文件中定義一個 ViewPager 組件；
  2. 在 Activity（或Fragment等）中取得 ViewPager 的引用；
  3. 為 ViewPager 設置適配器；
  4. [為 ViewPager 設置滑動特效]；
  5. [為 ViewPager 設置監聽器]。

其中最後兩步是可選的，但如果沒有最後兩步，那我們的 ViewPager 就僅僅是一個普普通通的 ViewPager 了。

下麵我們來寫一個最簡單的例子，這裡事先在drawable文件夾中放入了一些圖片，並且這些圖片都以 `page` 開頭：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zzw.activity.PageActivity">

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/view_pager"
        android:background="@android:color/black" />
</RelativeLayout>

我們在佈局文件里定義了一個 ViewPager 組件，然後需要在 Activity 中對它進行設置：

pager=(ViewPager) findViewById(R.id.view_pager);
PagerAdapter adapter=new ViewAdapter(pages);
pager.setAdapter(adapter);

class ViewAdapter extends PagerAdapter {
    private List<View> datas;

    public ViewAdapter(List<View> list) {
        datas=list;
    }

    @Override
    public int getCount() {
        return datas.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view=datas.get(position);
        container.addView(view);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(datas.get(position));
    }
}

嗯，現在我們就完成了一個“圖片瀏覽器”，效果和下圖類似：

PS：你可能註意到，我們的效果圖底部有一個導航器，這是因為這個效果圖是加上導航器之後的效果（實在懶得回頭再改一遍了）。
那你可能會問，這個導航器怎麼實現的，為啥上面的代碼里沒有？別急，因為這個開源的導航器實在太牛B了，所以我想專門用一節來介紹，如果你等不及的話，也可以先去看導航器的介紹。


好了，現在我們已經基本熟悉了 ViewPager 的基本使用方法，但是！ViewPager 的效果還遠遠不止於此，我們接著往下麵看。

ViewPager -- 浮現特效

嗯，現在我們要在上面的“圖片瀏覽器”基礎上加點特效了（要不然用戶肯定審美疲勞了）。試想，當我們滑動圖片時，如果下一張圖片能從後面“浮現”出來，是不是很棒！好了，那我們就來嘗試添加這一個特效。

但是，要從哪裡入手呢？哈哈，其實Google早就為我們提供了相應的API，就是 android.support.v4.view.ViewPager.PageTransformer 這個介面，任何實現了這個介面的類都可以為 ViewPager 提供一種特效哦。

我們發現，這個介面里只有一個方法 public void transformPage(View page, float position) ，看看它的兩個參數，`page`表示 ViewPager 中的一頁，`position`表示`page`當前的位置，[-1, 0)表示屏幕左邊的`page`（部分可見），[0, 0]表示屏幕上的`page`（完全可見），(0, 1]表示屏幕右邊的`page`（部分可見），具體看下圖：


當`page`向左邊滑動時，`position`從0向-1變化，當`position==-1`時完全不可見；當`page`向右滑動時，`position`從0向1變化，當`position==1`時完全不可見。

如果你想更加深入的瞭解`position`的規律（可能是我沒表達清楚），可以參考鴻洋大神的文章《Android 實現個性的ViewPager切換動畫 實戰PageTransformer（相容Android3.0以下）》。

好了，經過上面的說明，我們發現只需要處理[-1, 1]範圍的`position`就行了：

public class ScalePageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE=0.75f;

    @Override
    public void transformPage(View page, float position) {
        //Log.d("TAG", "<"+page.hashCode()+", "+position+">");
        // out of left screen
        if(position<-1.0f) {
            page.setScaleX(MIN_SCALE);
            page.setScaleY(MIN_SCALE);
        }
        // slide left
        else if(position<=0.0f) {
            page.setAlpha(1.0f);
            page.setTranslationX(0.0f);
            page.setScaleX(1.0f);
            page.setScaleY(1.0f);
        }
        // slide right
        else if(position<=1.0f) {
            page.setAlpha(1.0f-position);
            page.setTranslationX(-page.getWidth()*position);
            float scale=MIN_SCALE+(1.0f-MIN_SCALE)*(1.0f-position);
            page.setScaleX(scale);
            page.setScaleY(scale);
        }
        // out of right screen
        else {
            page.setScaleX(MIN_SCALE);
            page.setScaleY(MIN_SCALE);
        }
    }
}

然後還要為 ViewPager 添加這個特效：

pager.setPageTransformer(true, new ScalePageTransformer());

現在的效果如下：


哈哈，我們的“圖片瀏覽器”是不是好看了一大截。但是，別急著走，我們還可以實現更多的特效。

ViewPager -- 旋轉特效

有了上面的基礎，下麵我們再來做一個旋轉特效吧：

public class RotatePageTransformer implements ViewPager.PageTransformer {
    private static final float MAX_ROTATION=20.0f;

    @Override
    public void transformPage(View page, float position) {
        if(position<-1)
            rotate(page, -MAX_ROTATION);
        else if(position<=1)
            rotate(page, MAX_ROTATION*position);
        else
            rotate(page, MAX_ROTATION);
    }

    private void rotate(View view, float rotation) {
        view.setPivotX(view.getWidth()*0.5f);
        view.setPivotY(view.getHeight());
        view.setRotation(rotation);
    }

}

這個更簡單，只需要根據`position`來決定旋轉的角度即可。效果如下：

ViewPager -- 3D畫廊

下麵我們再實現一個特效，不過這個特效稍微複雜，但是效果真的挺炫！我們先來看下效果：

是不是就像自己身處3D畫廊一樣。好了，下麵我們就來實現這個特效。

首先還是 PageTransformer：

public class GalleryPageTransformer implements ViewPager.PageTransformer {
    private static final float MAX_ROTATION=20.0f;
    private static final float MIN_SCALE=0.75f;
    private static final float MAX_TRANSLATE=20.0f;

    @Override
    public void transformPage(View page, float position) {
        if(position<-1) {
            page.setTranslationX(MAX_TRANSLATE);
            page.setScaleX(MIN_SCALE);
            page.setScaleY(MIN_SCALE);
            page.setRotationY(-MAX_ROTATION);
        }
        else if(position<=0) {
            page.setTranslationX(-MAX_TRANSLATE*position);
            float scale=MIN_SCALE+(1-MIN_SCALE)*(1.0f+position);
            page.setScaleX(scale);
            page.setScaleY(scale);
            page.setRotationY(MAX_ROTATION*position);
        }
        else if(position<=1) {
            page.setTranslationX(-MAX_TRANSLATE*position);
            float scale=MIN_SCALE+(1-MIN_SCALE)*(1.0f-position);
            page.setScaleX(scale);
            page.setScaleY(scale);
            page.setRotationY(MAX_ROTATION*position);
        }
        else {
            page.setTranslationX(-MAX_TRANSLATE);
            page.setScaleX(MIN_SCALE);
            page.setScaleY(MIN_SCALE);
            page.setRotationY(MAX_ROTATION);
        }
    }
}

這裡的“3D”特效主要是靠 View.setRotationY(float rotation) 方法實現的，此方法的作用是讓 View 繞著Y軸旋轉一定角度（關於Android的三維坐標系請大家自己查詢）。

看到這，可能你會問，倒影去哪了？別急，我們並不是在 PageTransformer 里實現倒影的，而是一開始就有的。沒錯，我們在為 ViewPager 設置適配器時，就直接把有倒影的圖片封裝到適配器中了。

下麵的方法負責生成有倒影的圖片：

public static Bitmap getReverseBitmapById(Context context, int resId, float percent) {
    // get the source bitmap
    Bitmap srcBitmap=BitmapFactory.decodeResource(context.getResources(), resId);
    // get the tow third segment of the reverse bitmap
    Matrix matrix=new Matrix();
    matrix.setScale(1, -1);
    Bitmap rvsBitmap=Bitmap.createBitmap(srcBitmap, 0, (int) (srcBitmap.getHeight()*(1-percent)),
            srcBitmap.getWidth(), (int) (srcBitmap.getHeight()*percent), matrix, false);
    // combine the source bitmap and the reverse bitmap
    Bitmap comBitmap=Bitmap.createBitmap(srcBitmap.getWidth(),
            srcBitmap.getHeight()+rvsBitmap.getHeight()+20, srcBitmap.getConfig());
    Canvas gCanvas=new Canvas(comBitmap);
    gCanvas.drawBitmap(srcBitmap, 0, 0, null);
    gCanvas.drawBitmap(rvsBitmap, 0, srcBitmap.getHeight()+20, null);
    Paint paint=new Paint();
    LinearGradient shader=new LinearGradient(0, srcBitmap.getHeight()+20, 0, comBitmap.getHeight(),
            Color.BLACK, Color.TRANSPARENT, Shader.TileMode.CLAMP);
    paint.setShader(shader);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
    gCanvas.drawRect(0, srcBitmap.getHeight()+20, srcBitmap.getWidth(), comBitmap.getHeight(), paint);
    return comBitmap;
}

其中的`percent`參數指定倒影占原圖的比例。

然後對原圖進行處理：

private List<View> getPages() {
    List<View> pages=new ArrayList<>();
    Field[] fields=R.drawable.class.getDeclaredFields();
    try {
        for (Field field : fields) {
            if (field.getName().startsWith("page")) {
                ImageView view = new ImageView(this);
                view.setImageBitmap(ImageUtils.getReverseBitmapById(this, field.getInt(null), 0.5f));
                pages.add(view);
            }
        }
    } catch (IllegalAccessException e) {
        e.printStackTrace();
    }
    return pages;
}

現在我們就有了一個絢麗的“3D畫廊”了：

MagicIndicator -- MAGIC！！！

到此為止，對 ViewPager 的介紹也告一段落了。但是，你有沒有發現，當我們滑動圖片時，不知道當前是第幾張圖（我們的圖片還很少，如果多的話就會有這個問題）！！！

為瞭解決這個問題，我們還需要一個指示器/導航器來指定當前的位置。但是，一想到要從頭實現一個指示器就感到頭大（當然一個簡單的指示器還是很容易的）。幸好，還有 MagicIndicator 來幫你。

MagicIndicator，“人”如其名，它的特點就是“MAGIC”！！！不多說，先來看下它的效果圖：


看到這效果我直接給跪了！關於 MagicIndicator 的詳細介紹可以看這幾篇文章：

  1. 系列之一 —— 使用MagicIndicator打造千變萬化的ViewPager指示器》
  2. 系列之二 —— MagicIndicator使用指南》
  3. 《MagicIndicator系列之三 —— MagicIndicator原理淺析及擴展MagicIndicator的4種方式》

MagicIndicator 的GitHub地址是：https://github.com/hackware1993/MagicIndicator，關於它的具體用法也在上面，這裡我們就不多說了。

 

ViewPager與Fragment

ViewPager 經常與 Fragment 結合來實現各種頁面切換，比如我們開頭提到的頁面菜單。由於在 ViewPager 中使用 Fragment 和上面介紹的方式稍有不同，因此我們在這裡單獨介紹一下。

仔細想想，我們之前的 ViewPager 的頁面都是 View，而現在要換成 Fragment，是不是需要替換適配器？沒錯，的確如此，不過我們沒必要從頭寫一個適配器，Google為我們提供了兩個抽象類：FragmentPagerAdapter 和 FragmentStatePagerAdapter。

不論是繼承 FragmentPagerAdapter 還是 FragmentStatePagerAdapter，都需要實現構造器、 int getCount() 和 Fragment getItem(int position) 方法。下麵是我們的例子：

public class FragmentAdapter extends FragmentPagerAdapter {
    private List<Fragment> datas;

    public FragmentAdapter(FragmentManager fm, List<Fragment> list) {
        super(fm);
        datas=list;
    }

    @Override
    public int getCount() {
        return datas.size();
    }

    @Override
    public Fragment getItem(int position) {
        return datas.get(position);
    }
}

FragmentPagerAdapter 中的每一個 Fragment 都將保存在記憶體之中，因此適用於那些相對靜態、數量較少的情況；如果需要處理有很多頁，並且數據動態性較大、占用記憶體較多的情況，應該使用FragmentStatePagerAdapter。

FragmentStatePagerAdapter 和 FragmentPagerAdapter 一樣，繼承自 PagerAdapter。但和 FragmentPagerAdapter 不同的是，正如其類名中的“State”所表明的含義一樣，它只保留當前頁面。當頁面離開視線後，就會被回收，釋放其資源；而在頁面需要顯示時，將生成新的頁面。這樣的好處就是當擁有大量的頁面時，不會在記憶體中占用大量的記憶體。

有了 Fragment 的適配器後，還需要為 ViewPager 設置適配器：

FragmentAdapter adapter=new FragmentAdapter(getSupportFragmentManager(), frags);
pager.setAdapter(adapter);

最後的效果如下：

 

源代碼

上述所有源代碼都已上傳到GitHub：
https://github.com/jzyhywxz/ViewPager


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 關於前端規範
    一個規範性強的代碼便於修改和理解，所以做出如下總結，希望少走彎路； 基礎內容，大神請繞道...................... 1.命名規範 命名一定要有意義，畢竟代碼寫下來不是給你一個人看的，在css中，在前面寫上父元素進行規範，不要偷懶 2.請不要一會寫原生，一會寫jquery 這個問題好 ...
  • Bootstrap（一）
    Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目。 使用感覺簡約大氣便捷，扁平化設計。好多好多CSS、JS....總有你心儀的那一款！喜歡就上官網找，那裡更豐富呦！ ...
  • vue-動手做個選擇城市
    查看完整的代碼請到 我的github地址 https://github.com/qianyinghuanmie/vue2.0-demos 一、結果展示 二、前期準備： 1.引入漢字轉拼音的插件，利用NPM安裝 代碼指令為 npm install pinyin --save ，詳細步驟請到pinyin ...
  • js數組與字元串
    數組 數組的概念 當我們需要表示一組數據，或者叫做一次性定義很多相似的數字或變數時，就需要使用數組，數組的字面意思就是一組數據，一組(一般情況下相同類型)的數據（不一定都是數字），數組的作用是：使用單獨的變數名來存儲一系列的值。 遍曆數組： 普通for迴圈 for(var i=0; i<5; i++ ...
  • 在vue-cli搭建的項目中增加後臺mock介面
    用vue-cli搭建一個前端開發環境確實是極其方便，在寫前端代碼肯定也是少不了需要調用後臺提供的業務介面進行前後端交互，特別在敏捷開發中，前後端都要提前確定業務介面併進行打樁，在開發過程中基本是沒有現成的後臺可以調用，基本上都是自己寫mock進行模擬。 在vue-cli搭建的項目中，框架上用的是ex ...
  • css基礎
    css基礎 1、 Css新建格式 Css語法： 選擇符{屬性名稱：屬性值；} 1、內部樣式表（嵌套到頁面中） 語法： <style type="text/css"> css語句 </style> 註：使用style標記創建樣式時，最好將該標記寫在<head></head>; 2、內聯樣式（行間樣式， ...
  • 1.Node.js 接入微信公眾平臺開發
    一、寫在前面的話   Node.js是一個開放源代碼、跨平臺的JavaScript語言運行環境，採用Google開發的V8運行代碼,使用事件驅動、非阻塞和非同步輸入輸出模型等技術來提高性能，可優化應用程式的傳輸量和規模。這些技術通常用於數據密集的事實應用程式。—— "來自維基百科" ...
  • 2B課程筆記分享_StudyJams_2017
    課程2B的內容主要包括：使用變數來更新欲顯示在屏幕上的內容，為按鈕添加事件響應(聯繫XML屬性與Java方法)邏輯等。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類