最近看到一個應用的banner寫的很有意思，在一個viewpager中可以看見左右兩個item的部分檢視，研究了下，發現實現其實很簡單，記述如下。

   先看下效果圖：

  下面來說下實現過程：

    1.viewpager及其父控制元件的佈局加上該屬性clipChildren=“false”，clipChildren屬性表示子view在繪製時不去裁切他們的檢視範圍。這樣childView就不會被父view的寬高所限制。

    2.viewpager左右設定一個margin，以便讓兩邊的item出現在可見區域。

   3.設定一下viewpager的介面卡就完成了。如果想要設定下viewpager的滑動動畫，可以用setpageTransform()方法來定製。

  貼一下xml程式碼：

 <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:clipChildren="false">


        <android.support.v4.view.ViewPager
            android:id="@+id/vp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="40dp"
            android:layout_marginRight="40dp"
            android:clipChildren="false" />

    </FrameLayout>
 

二、若是想要在viewpager的可見區域中，顯示兩個item如何實現呢？

     一頁顯示兩個item，那麼viewpager的margin就只能設定一個，並且需要程式碼中動態設定了。每個item的寬度為螢幕的寬度減去相鄰item的邊距，再除以2即可。

   private void setViewpagerMargin() {

        WindowManager wm = this.getWindowManager();
        int width = wm.getDefaultDisplay().getWidth();
        marginLeft = (width - 20) / 2;

        FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) vp.getLayoutParams();
        layoutParams.leftMargin = marginLeft;
        vp.setLayoutParams(layoutParams);
    }
 

  但是這種情況注意，viewpager的滑動事件只在currentItem上，另一個可見的item不能滑動，如果想要整體滑動還得自定義一個view，重寫觸控事件。

三、說說viewpager的無限迴圈

   輪播圖開發中也用了很多了，對viewpager的迴圈機制順便做下總結。

  1.設定viewpager的介面卡時，getCount設定int型別的最大值，再將當前的item設定為中間值，基本上也算實現了輪播。但是這裡有個大問題，getCount的值是childView的個數，過多的話會導致佔用太多資源，效能低。

 2.在viewpager邊界處設定一箇中間的view，滑到邊界時，呼叫setCurrent(int,false)方法，無感切換到中間位置，這樣雖然不停的滑動實際仍然在當前的幾個item上。

 /**
     * 由於一屏顯示多個頁面，viewpager設定兩遍childView，再包裝邊界頁面
     * 圖片顯示順序：a5,a1,a2...,a5,a1,a2...,a5,a1
     */
    private void initViewPagerChildView() {
        viewList.clear();
        for (int i = 0; i < (imgResources.length * 2) + 2; i++) {
            ImageView view = new ImageView(MainActivity.this);
            view.setScaleType(ImageView.ScaleType.CENTER_CROP);
            if (i == 0) {
                //第一個位置顯示最後一張圖片
                view.setImageResource(imgResources[imgResources.length - 1]);
            } else if (i == (imgResources.length * 2) + 1) {
                //最後一個位置顯示第一張圖片
                view.setImageResource(imgResources[0]);
            } else {
                //儲存兩遍資源檢視
                if (i <= imgResources.length) {
                    view.setImageResource(imgResources[i - 1]);
                } else {
                    view.setImageResource(imgResources[i - imgResources.length - 1]);
                }
            }
            viewList.add(view);
        }
    }

  程式碼地址
  That is all。