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

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

 

示例APK可从这些地址下载：Google Play,  360手机助手,  百度手机助手,  小米应用商店,  豌豆荚(其中的ViewPager Multi Fragment Demo)

示例代码可见ViewPager MultiFragmentDemo

 

效果图如下：

            

在使用Gallery的时候大家会发现有几个问题(1). 无法控制每次滑动只滑动一页, (2). Gallery默认第一个item居中，无法修改它与Gallery的左间距。ViewPager可以方便的解决上面两个问题，但默认却无法在屏幕上显示多个Fragment。

下面介绍如何利用ViewPager及android:clipChildren属性解决这个问题。

1、定义xml

Java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<? xml version = "1.0" encoding = "utf-8" ?> < RelativeLayout xmlns : android = "http://schemas.android.com/apk/res/android"      android : id = "@+id/pager_layout"      android : layout_width = "match_parent"      android : layout_height = "match_parent"      android : clipChildren = "false"      android : layerType = "software" >        < android . support . v4 . view . ViewPager          android : id = "@+id/view_pager"          android : layout_width = "250dp"          android : layout_height = "450dp"          android : layout_gravity = "center"          android : clipChildren = "false" / >   < / RelativeLayout >

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

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

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

Java

1 2	viewPager . setOffscreenPageLimit ( TOTAL_COUNT ) ; viewPager . setPageMargin ( getResources ( ) . getDimensionPixelSize ( R . dimen . page_margin ) ) ;

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

 

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

Java部分实现

Java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103

package cn . trinea . android . demo ;   import android . app . ActionBar ; import android . os . Bundle ; import android . support . v4 . app . FragmentActivity ; import android . support . v4 . view . PagerAdapter ; import android . support . v4 . view . ViewPager ; import android . support . v4 . view . ViewPager . OnPageChangeListener ; import android . view . MenuItem ; import android . view . MotionEvent ; import android . view . View ; import android . view . View . OnTouchListener ; import android . view . ViewGroup ; import android . widget . ImageView ; import android . widget . RelativeLayout ;   /** * ViewPager实现画廊效果 * * @author Trinea 2013-04-03 */ public class ViewPagerMulTiFragmentDemo extends FragmentActivity {        private static int      TOTAL_COUNT = 3 ;        private RelativeLayout viewPagerContainer ;      private ViewPager       viewPager ;        @Override      protected void onCreate ( Bundle savedInstanceState ) {          super . onCreate ( savedInstanceState ) ;          setContentView ( R . layout . view_pager_multi_fragment_demo ) ;            viewPager = ( ViewPager ) findViewById ( R . id . view_pager ) ;          viewPagerContainer = ( RelativeLayout ) findViewById ( R . id . pager_layout ) ;          viewPager . setAdapter ( new MyPagerAdapter ( ) ) ;          // to cache all page, or we will see the right item delayed          viewPager . setOffscreenPageLimit ( TOTAL_COUNT ) ;          viewPager . setPageMargin ( getResources ( ) . getDimensionPixelSize ( R . dimen . page_margin ) ) ;          MyOnPageChangeListener myOnPageChangeListener = new MyOnPageChangeListener ( ) ;          viewPager . setOnPageChangeListener ( myOnPageChangeListener ) ;            viewPagerContainer . setOnTouchListener ( new OnTouchListener ( ) {                @Override              public boolean onTouch ( View v , MotionEvent event ) {                  // dispatch the events to the ViewPager, to solve the problem that we can swipe only the middle view.                  return viewPager . dispatchTouchEvent ( event ) ;              }          } ) ;      }        /**      * this is a example fragment, just a imageview, u can replace it with your needs      *      * @author Trinea 2013-04-03      */      class MyPagerAdapter extends PagerAdapter {            @Override          public int getCount ( ) {              return TOTAL_COUNT ;          }            @Override          public boolean isViewFromObject ( View view , Object object ) {              return ( view == object ) ;          }            @Override          public Object instantiateItem ( ViewGroup container , int position ) {              ImageView imageView = new ImageView ( ViewPagerMulTiFragmentDemo . this ) ;              imageView . setImageResource ( R . drawable . image1 + position ) ;              ( ( ViewPager ) container ) . addView ( imageView , position ) ;              return imageView ;            }            @Override          public void destroyItem ( ViewGroup container , int position , Object object ) {              ( ( ViewPager ) container ) . removeView ( ( ImageView ) object ) ;          }      }        public class MyOnPageChangeListener implements OnPageChangeListener {            @Override          public void onPageSelected ( int position ) {          }            @Override          public void onPageScrolled ( int position , float positionOffset , int positionOffsetPixels ) {              // to refresh frameLayout              if ( viewPagerContainer != null ) {                  viewPagerContainer . invalidate ( ) ;              }          }            @Override          public void onPageScrollStateChanged ( int arg0 ) {          }      } }

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