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。

viewpager一屏展示多个视图

猜你喜欢