美文网首页Android开发感悟Android技术 | 实践
ViewPager如何做到一屏显示多个页面

ViewPager如何做到一屏显示多个页面

作者: 骑着海去看蜗牛 | 来源:发表于2017-01-19 18:15 被阅读8095次
如图所示

如上图所示,中间完全显示,两边只显示一部分,那么用Viewpager我们怎么做到呢?

设置clipChildren属性

要实现这个效果,我们要用到clipChildren这个属性,对于这个属性,你可能还很陌生,当clipChildren为true时(默认显示为true),系统会将超出当前View的子页面切掉,就是仍然会显示这个View。
当clipChildren为false时,超出View的子页面,不会被切掉,仍然可以显示。
简单来说,如果你将clipChildren设置为true,那么不管你的子View设置为多大(后面会讲到如何设置左右间距),子View左右的View都不会显示,会用空白代替。
需要注意的是,需要把ViewPgaer和他的父布局都设置clipChildren为false,否则不会生效。

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:layout_alignParentBottom="true">

        <ViewPager
            android:layout_width="match_parent"
            android:layout_height="92dp"
            android:layout_gravity="bottom|center_horizontal"
            android:layout_marginBottom="20dp"
            android:background="@color/transparent"
            android:clipChildren="false" />
</FrameLayout>

设置ViewPager的LayoutParams

ViewGroup.LayoutParams layoutParams = mViewPager.getLayoutParams();
layoutParams.width = PhoneUtil.getScreenWidth(mContext) - PhoneUtil.dip2px(mContext, 80);
mViewPager.setLayoutParams(layoutParams);

这里的80dp/2就是你希望Viewpager的子页面左右的间距,可以自己调整。

设置左右页面缓存

mViewPager.setOffscreenPageLimit(2);

设置后可以优化滑动效果,左右两个页面足够了,太多会加大内存消耗,不建议。

补充

TopicPager.setPageMargin(PhoneUtil.dip2px(mContext, **));

这个方法可以结合上面的第二步使用,但其实不用也行,这个方法会给Viewpager的子View设置margin值,如果设置,会继续拉大Viewpager子View的间距。

相关文章

网友评论

  • 冰冰的冻结:我设置了clipChildren 属性刚开始有效,滑动后页面没有该效果了怎么办
  • darkengine:刚在StackOverFlow上找到了一种方法,代码照搬如下:
    // Disable clip to padding
    viewPager.setClipToPadding(false);
    // set padding manually, the more you set the padding the more you see of prev & next page
    viewPager.setPadding(40, 0, 40, 0);
    // sets a margin b/w individual pages to ensure that there is a gap b/w them
    viewPager.setPageMargin(20);

    这个方案的好处是,两边的页面都能响应滑动事件,因为设置的只是view pager的padding,大小并没有变化。
    逸云天:好使:+1:
  • 睡着的时光:ViewGroup.LayoutParams layoutParams = mViewPager.getLayoutParams();
    layoutParams.width = PhoneUtil.getScreenWidth(mContext) - PhoneUtil.dip2px(mContext, 80);
    mViewPager.setLayoutParams(layoutParams);

    不能控制view之间的间距吧,只能控制view自己的width
  • c8494c4a6554:请问下一页要显示5个怎么设置,新手不懂,谢谢
    f4d5a031ea5b:同问 显示3个完整的 左右2边的部分显示
  • 翰墨小生:弱弱的问一下,应用的场景是?
    骑着海去看蜗牛:@翰墨小生 一种界面展示方式
  • 9711922c6b29:我的做法是设置viewpager的左右padding值,然后设置cliptopadding为false,最后在viewpageradapter中重写返回item大小[0.8-1.0]的值
  • Clendy:这种设置clipChildren=false在某些不支持硬件加速的机子上无法生效,不晓得大神遇到没?
    jsjbduus12:开启软件加速:android:layerType="software"
  • 梦想编织者灬小楠:我也用过这个方法,但遇到一个坑,后来没找到解决办法,最后自定义ViewGroup解决的。
    想问下作者有没有遇到过这个问题:
    中间部分触摸是可以滑动的,但是左右两边触摸时不能滑动。:persevere:
    梦想编织者灬小楠:@刻舟求剑KJ 有空试下,3Q
    刻舟求剑KJ: viewPagerParent = (LinearLayout) findViewById(R.id.viewpager_parent);
    viewPagerParent.setOnTouchListener(new View.OnTouchListener() {
    @Override public boolean onTouch(View v, MotionEvent event) {
    return viewPager.dispatchTouchEvent(event);
    }
    });

    给 ViewPager 设置一个 父布局,将父布局的 touch 事件分发就可以了
    骑着海去看蜗牛:@梦想编制者灬小楠 的确存在这个问题,左右两边的touch事件无法接收,推测是因为设置Layoutparams的关系,界面上可见,实际却过滤掉了触摸事件。
  • 24K纯帅豆:可以使用Recyclerview来实现
    骑着海去看蜗牛:@mozzieH 做肯定可以做:sweat:
    mozzieH:@骑着海去看蜗牛 可以重写滚动逻辑
    骑着海去看蜗牛:界面可以做到,滑动体验不太好

本文标题:ViewPager如何做到一屏显示多个页面

本文链接:https://www.haomeiwen.com/subject/tliibttx.html