04/07
2013

viewpager实现画廊(一屏多个Fragment)效果

本文主要介绍如何利用ViewPager实现Gallery的画廊效果,即一屏显示多个Fragment

 

Demo APK 可以方便的查看效果,在各大应用商店搜索 trinea android 下载即可,如:Google Play

示例代码可见ViewPager MultiFragmentDemo

 

效果图如下:

android viewpager            android viewpager half

在使用Gallery的时候大家会发现有几个问题(1). 无法控制每次滑动只滑动一页, (2). Gallery默认第一个item居中,无法修改它与Gallery的左间距。ViewPager可以方便的解决上面两个问题,但默认却无法在屏幕上显示多个Fragment。
下面介绍如何利用ViewPager及android:clipChildren属性解决这个问题。
1、定义xml

发现上面的RelativeLayout(可以用其它layout替换)和ViewPager的android:clipChildren都设置为了false。

android:clipChildren表示是否限制子View在其范围内,在animations动画以及本文的情况下可以发挥很大的作用。默认为true。

 

2、Java部分
这里我们主要完成
(1). ViewPager设置
需要setOnPageChangeListener,在onPageScrolled(int position, float positionOffset, int positionOffsetPixels)函数中不断刷新layout。
还可以

setOffscreenPageLimit表示设置缓存,这样左右拖动即可看见后面的Fragment。setPageMargin表示设置Fragment之间的间距

 

(2). FrameLayout设置
需要setOnTouchListener函数中将滑动滑动事件传递给viewPager,否则只有viewPager中间的view可以滑动,设置后整个viewPager都可以滑动。
具体代码如下:

可能运行后出现viewpager的部分Fragment无法看见或是突然消失的问题,请确保RelativeLayout和ViewPager的android:clipChildren都设置为了false并且viewPager.setOffscreenPageLimit(TOTAL_COUNT);其中TOTAL_COUNT大于0. 当然子Fragment本身不能是match_parent的。viewpager设置了paddingTop也会导致无法实现画廊而只是显示一屏。

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

50 thoughts on “viewpager实现画廊(一屏多个Fragment)效果

  1. 你好,请问给viewpager父view设置onTouchListener设置整个viewpager可以滑动,我换成TouchDelgate后就无法实现想要的效果,这是为什么呢?

  2. 今天算是倒霉透了,老婆自己生气,没有机会发泄,于是让我穿上情侣衫,然后打了我一顿,理由是我和她撞衫了…尼玛!打人就不能找个好点的理由吗?