viewpager一屏展示多个视图

   最近看到一个应用的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。