Android ViewPager使用方法小結

時間  2019-11-14
標籤 android viewpager 使用方法 小結 欄目 Android 简体版
原文   原文鏈接

android-support-v4.jar 是谷歌提供給咱們的一個兼容低版本安卓設備的軟件包，裏面包囊了只有在 Android 3.0 以上可用的API。而 ViewPager 就是其中之一。利用它，咱們能夠作不少事情，從最簡單的導航，到頁面菜單等等。android

準備

在使用ViewPager以前，須要在 build.gradle 中加入以下語句：git

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

其中第一行是 android-support-v4 軟件包，ViewPager 就在裏面；第二行是一個開源的導航器，經過它，咱們能夠實現各類導航效果。github

ViewPager -- 基本用法

ViewPager 的基本用法能夠分爲如下步驟：瀏覽器

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

其中最後兩步是可選的，但若是沒有最後兩步，那咱們的 ViewPager 就僅僅是一個普普統統的 ViewPager 了。

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

<?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));
    }
}

嗯，如今咱們就完成了一個「圖片瀏覽器」，效果和下圖相似：gradle

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


好了，如今咱們已經基本熟悉了 ViewPager 的基本使用方法，可是！ViewPager 的效果還遠遠不止於此，咱們接着往下面看。ui

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`（部分可見），具體看下圖：this


當`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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程