機頂盒專案有個需求，在TV選項下，要求第一頁顯示節目時，能看到第二頁部分內容（也就是圖中最右邊有黑色遮罩層的那些是第二頁的內容）：

當向右翻頁時，第二頁的內容滑到最左邊，且第三頁的部分內容顯示在最右邊。

這個專案我是用ViewPager實現滑頁的，現在來針對上面的需求進行講解如何實現。

1.準備工作

為此我新建了個簡單的專案，用一個ViewPager包裹4個View，每個View給它一個不一樣的背景色，並給ViewPager加上介面卡（Adapter）。

準備工作就做好了（以下基礎程式碼可跳過）

public void init() {
        ViewPager viewPager = (ViewPager) findViewById(R.id
 
.viewpager);
        View v1 = new View(this);
        View v2 = new View(this);
        View v3 = new View(this);
        View v4 = new View(this);
        v1.setBackgroundColor(Color.parseColor("#aaabcdef"));
        v2.setBackgroundColor(Color.parseColor("#aa000a00"));
        v3.setBackgroundColor(Color.parseColor
 
("#aaabc000"));
        v4.setBackgroundColor(Color.parseColor("#aa000000"));

        List<View> views = new ArrayList<View>();
        views.add(v1);
        views.add(v2);
        views.add(v3);
        views.add(v4);

        viewPager.setAdapter(new AZPagerAdapter(views));
}

AZPagerAdapter的實現是比較常規的優化方法：“顯示”就把View載入到父控制元件，“不顯示”就從父控制元件中移除。

注：這裡用“顯示”和“不顯示”表述不太確切，因為ViewPager預設會多載入前一頁（-1頁）和後一頁（1頁）作為快取頁，快取頁沒有顯示時也會載入到父控制元件且不會被移除，當快取頁移到-2頁或2頁時才會被移除。

public class AZPagerAdapter extends PagerAdapter {

    protected List<View> views;

    public AZPagerAdapter(List<View> viewList) {
        views = viewList;
    }
    @Override
    public int getCount() {
        return views.size();
    }

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

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(views.get(position));
        return views.get(position);
    }
}

現在的效果：

2.用PageTransformer來改變ViewPager的切換動畫

ViewPager有個方法叫做：

setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) 用於設定ViewPager切換時的動畫效果。

官方實現圖例：

這裡我們只要自定義一個PageTransformer來實現我們需要的動畫偏移效果就好了！

public class ScrollOffsetTransformer implements PageTransformer {
    /**
     * position引數指明給定頁面相對於螢幕中心的位置。它是一個動態屬性，會隨著頁面的滾動而改變。
     * 當一個頁面（page)填充整個螢幕時，positoin值為0；
     * 當一個頁面（page)剛剛離開螢幕右(左）側時，position值為1（-1）；
     * 當兩個頁面分別滾動到一半時，其中一個頁面是-0.5，另一個頁面是0.5。
     * 基於螢幕上頁面的位置，通過諸如setAlpha()、setTranslationX()或setScaleY()方法來設定頁面的屬性，建立自定義的滑動動畫。
     */
    @Override
    public void transformPage(View page, float position) {
        if (position > 0) {
            //右側的快取頁往左偏移100
            page.setTranslationX(-100 * position);
        }
    }
}

然後在init()方法中最後加上

    viewPager.setPageTransformer(true, new ScrollOffsetTransformer());

看下效果：

已經可以看到後面一頁內容的會偏移到前面一頁來（背景色都用了半透明可以看到有疊加部分）！

不過有個問題，就是翻頁（1頁到0位置）過程中，原本處於2頁的view要等到1頁完全到0位置後才會突然顯示（載入）出來（不是逐漸增加偏移量出來的）。這個原因其實就是剛剛講Adapter的時候說的，ViewPager預設快取3頁（前頁【-1頁】，當前頁【0頁】，後頁【1頁】），而2頁要等到1頁到0位置後才會開始載入，（1頁到0位置後變為0頁，原來的0頁變為-1頁，原來的-1頁被銷燬）。

3.通過setOffscreenPageLimit(int limit)來改變快取頁數

解決上面遺留的問題也非常簡單，就是改變ViewPager的預設快取頁數，使得它多快取一頁（2頁）。

ViewPager有個方法叫做：

setOffscreenPageLimit(int limit) 用於設定ViewPager兩邊（左邊和右邊）各快取的頁數，預設是1，即左邊和右邊各快取1頁。

在init()方法最後再加上一句：

    //左右各多載入2頁（預設1頁）
    viewPager.setOffscreenPageLimit(2);

看下最後效果：


大功告成！現在就平滑多了！

4.彩蛋

把ScrollOffsetTransformer裡面稍微改一下，去掉條件判斷後

public class ScrollOffsetTransformer implements PageTransformer {
    @Override
    public void transformPage(View page, float position) {
       // if (position > 0) {
            page.setTranslationX(-100 * position);
       // }
    }
}

前後都偏移啦！可以開發腦洞想一下用在有趣的地方！

如果你有任何問題，歡迎留言告訴我！~