Android ViewPager用法小結

阿新 • • 發佈：2017-08-11

ext.get try mob too word shc 由於 tool 谷歌

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

好了。如今我們已經有了特效和圖片倒影。還須要一屏顯示多個“page”。

首先改動layout文件：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    android:clipChildren="false"
    tools:context="com.zzw.activity.GalleryActivity"
    android:background="@android:color/black"
    android:id="@+id/frame_layout">

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="320dp"
        android:layout_gravity="center"
        android:id="@+id/gallery"
        android:clipChildren="false"
        android:layout_marginLeft="100dp"
        android:layout_marginRight="100dp" />
</FrameLayout>

註意這裏須要在 ViewPager 及其父組件中加入android:clipChildren="false"。

然後在Activity中配置ViewPager：

pager=(ViewPager) findViewById(R.id.gallery);
        PagerAdapter adapter=new ViewAdapter(pages);
        pager.setAdapter(adapter);
        pager.setPageMargin(20);
        pager.setOffscreenPageLimit(3);
        pager.setPageTransformer(true, new GalleryPageTransformer());

        layout=(FrameLayout) findViewById(R.id.frame_layout);
        layout.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                return pager.dispatchTouchEvent(event);
            }
        });

這裏設置了 ViewPager 的pageMargin和offScreenPageLimit屬性。前者是“page”間的間隔，後者是 ViewPager 一屏顯示的頁面數。

另外，這裏我們把 ViewPager 的父組件的觸摸事件交給 ViewPager 處理。這種話。當觸摸左右兩個“多”出來的頁面時才會有反應。

如今我們就有了一個絢麗的“3D畫廊”了：
技術分享

MagicIndicator – MAGIC！
！
！

到此為止。對 ViewPager 的介紹也告一段落了。

可是。你有沒有發現，當我們滑動圖片時，不知道當前是第幾張圖（我們的圖片還非常少，假設多的話就會有這個問題）！！

！

為了解決問題。我們還須要一個指示器/導航器來指定當前的位置。可是。一想到要從頭實現一個指示器就感到頭大（當然一個簡單的指示器還是非常easy的）。幸好，還有 MagicIndicator 來幫你。

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

看到這效果我直接給跪了！關於 MagicIndicator 的詳細介紹能夠看這幾篇文章：
1. 《MagicIndicator系列之中的一個 —— 使用MagicIndicator打造千變萬化的ViewPager指示器》
2. 《MagicIndicator系列之二 —— 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

Android ViewPager用法小結

ext.get try mob too word shc 由於 tool 谷歌 android-support-v4.jar 是谷歌提供給我們的一個兼容低版本號安卓設備的軟件包。裏面包囊了僅僅有在 Android 3.0 以上可用的API。而 ViewP

Android ViewPager用法小結

準備

ViewPager – 基本使用方法

ViewPager – 浮現特效

ViewPager – 旋轉特效

ViewPager – 3D畫廊

MagicIndicator – MAGIC！
！
！

ViewPager與Fragment

源碼

Android ViewPager用法小結

Android EditView用法小結

Android ViewPager使用方法小結

Android ViewPager 屬性clipToPadding的巧妙用法

Android ViewPager組件

Android TabActivity用法

關於expdp 中query用法小結

Android-ViewPager+Fragment數據更新問題

Java String.split()用法小結

Android ViewPager實現多個圖片水平滾動

[轉載]dbms_lob用法小結

C++ const用法小結（歡迎大家拍磚）

Android ViewPager+HorizontalScrollView實現標題欄滑動(騰訊新聞)

js中document的用法小結(一）

P1382 樓房 set用法小結

fgets和fputs，fread和fwrite，fscanf，和fprintf用法小結

Android Viewpager加Fragment做界面切換時數據消失的解決方式

Android Service用法知識點的講解

關於處理數組的用法小結

js處理字符串的用法小結

Android ViewPager用法小結

準備

ViewPager – 基本使用方法

ViewPager – 浮現特效

ViewPager – 旋轉特效

ViewPager – 3D畫廊

MagicIndicator – MAGIC！！！

ViewPager與Fragment

源碼

相關推薦

MagicIndicator – MAGIC！
！
！