ViewPager一屏显示多个item,及边缘滑动事件优化

关于ViewPager显示两边的item方法,网络上是方法都在ViewPager外包一个Layout,

然后设置ViewPager和外面的Layout的clipChildren="false"。

ViewPager再设置layout_marginLeft,layout_marginRIght,以留出空间来显示两边的item.

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="@+id/viewPagerContainer"
android:layout_height="match_parent"
android:background="#EEEEEE"
android:clipChildren="false"
android:orientation="vertical" > <android.support.v4.view.ViewPager
android:id="@+id/viewpage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="80dp"
android:layout_marginRight="80dp"
android:clipChildren="false" /> </LinearLayout>

这种方法有两个缺点:

1、手指从两边的item滑动时,不能切换page,因为两边的item并不在ViewPager的范围内。

2、在4.2和以下的系统滑动会出现两边的item没有一起滑动(父Layout没有刷新),据说要关闭硬件加速,笔者没试过。

下面介绍另一种方法。

笔者使用的v4包版本是23.3,不保证23.3以下的版本有效

 <android.support.v4.view.ViewPager
android:id="@+id/viewpage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="80dp"
android:paddingRight="80dp"
android:clipToPadding="false"
 

这里只是把marginLeft和marginRight换成了paddingLeft和paddingRight,clipChildren换成了clipToPadding。

就是这么简单,就解决了第一个方法的两个缺点。

至于为什么,看ViewPager的源码就知道了。

下面是ViewPager的onMeasure里的部分代码:

其中,默认情况下,childWidthSize就是页面item的宽度了,等于ViewPager的宽度减去左右Padding。

我们给ViewPager设置了左右Padding,页面item的宽度就变小了,左右的item也就显示出来了,但要设置ViewPager的clipToPadding=false才行。

另外,设置item的间距,viewPager.setPageMargin(10);

两个ViewPager嵌套时

当两个viewPager嵌套时,正好要显示两边item的viewPager是内层View时,当手指在接近屏幕边缘滑动时,比如,在右边缘左滑来显示内层ViewPager右边的内容时,会发现内层的ViewPager没有切换,而是切换了父ViewPager的页面。

解决方法是:

 public static void clearGutterSize(ViewPager viewPager) {
try {
Field field = ViewPager.class.getDeclaredField("mDefaultGutterSize");
field.setAccessible(true);
field.set(viewPager, ); viewPager.requestLayout();
} catch (Exception e) {
Log.d("MyViewPager", "#clearGutterSize:", e);
}
}

内层和外层两个viewPager都要clearGutterSize

 

转自:http://blog.csdn.net/asia_deng/article/details/70176393

上一篇:网页图表Highcharts实践教程之认识Highcharts


下一篇:前端页面报net::ERR_CONNECTION_RESET错误的原因