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

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

 

效果图如下：

 

            

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

1. <font face="Georgia,"><b><?xml version="1.0" encoding="utf-8"?>
   
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:id="@+id/pager_layout"
   
4.     android:layout_width="match_parent"
   
5.     android:layout_height="match_parent"
   
6.     android:clipChildren="false"
   
7.     android:layerType="software" >
   
8. 
   
9.     <android.support.v4.view.ViewPager
   
10.         android:id="@+id/view_pager"
    
11.         android:layout_width="250dp"
    
12.         android:layout_height="450dp"
    
13.         android:layout_gravity="center"
    
14.         android:clipChildren="false" />
    
15. 
    
16. </RelativeLayout></b></font>

复制代码

发现上面的RelativeLayout(可以用其它layout替换)和ViewPager的android:clipChildren都设置为了false。android:clipChildren表示是否限制子View在其范围内，在animations动画以及本文的情况下可以发挥很大的作用。默认为true。 2、Java部分
这里我们主要完成
(1). ViewPager设置
需要setOnPageChangeListener，在onPageScrolled(int position, float positionOffset, int positionOffsetPixels)函数中不断刷新layout。
还可以

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

复制代码

setOffscreenPageLimit表示设置缓存，这样左右拖动即可看见后面的Fragment。setPageMargin表示设置Fragment之间的间距 (2). FrameLayout设置
需要setOnTouchListener函数中将滑动滑动事件传递给viewPager，否则只有viewPager中间的view可以滑动，设置后整个viewPager都可以滑动。
具体代码如下：

1. package com.trinea.android.demo;
   
2. 
   
3. import android.app.ActionBar;
   
4. import android.os.Bundle;
   
5. import android.support.v4.app.FragmentActivity;
   
6. import android.support.v4.view.PagerAdapter;
   
7. import android.support.v4.view.ViewPager;
   
8. import android.support.v4.view.ViewPager.OnPageChangeListener;
   
9. import android.view.MenuItem;
   
10. import android.view.MotionEvent;
    
11. import android.view.View;
    
12. import android.view.View.OnTouchListener;
    
13. import android.view.ViewGroup;
    
14. import android.widget.ImageView;
    
15. import android.widget.RelativeLayout;
    
16. 
    
17. /**
    
18. * ViewPager实现画廊效果
    
19. *
    
20. * @author Trinea 2013-04-03
    
21. */
    
22. public class ViewPagerMulTiFragmentDemo extends FragmentActivity {
    
23. 
    
24.     private static int     TOTAL_COUNT = 3;
    
25. 
    
26.     private RelativeLayout viewPagerContainer;
    
27.     private ViewPager      viewPager;
    
28. 
    
29.     @Override
    
30.     protected void onCreate(Bundle savedInstanceState) {
    
31.         super.onCreate(savedInstanceState);
    
32.         setContentView(R.layout.view_pager_multi_fragment_demo);
    
33. 
    
34.         viewPager = (ViewPager)findViewById(R.id.view_pager);
    
35.         viewPagerContainer = (RelativeLayout)findViewById(R.id.pager_layout);
    
36.         viewPager.setAdapter(new MyPagerAdapter());
    
37.         // to cache all page, or we will see the right item delayed
    
38.         viewPager.setOffscreenPageLimit(TOTAL_COUNT);
    
39.         viewPager.setPageMargin(getResources().getDimensionPixelSize(R.dimen.page_margin));
    
40.         MyOnPageChangeListener myOnPageChangeListener = new MyOnPageChangeListener();
    
41.         viewPager.setOnPageChangeListener(myOnPageChangeListener);
    
42. 
    
43.         viewPagerContainer.setOnTouchListener(new OnTouchListener() {
    
44. 
    
45.             @Override
    
46.             public boolean onTouch(View v, MotionEvent event) {
    
47.                 // dispatch the events to the ViewPager, to solve the problem that we can swipe only the middle view.
    
48.                 return viewPager.dispatchTouchEvent(event);
    
49.             }
    
50.         });
    
51.     }
    
52. 
    
53.     /**
    
54.      * this is a example fragment, just a imageview, u can replace it with your needs
    
55.      *
    
56.      * @author Trinea 2013-04-03
    
57.      */
    
58.     class MyPagerAdapter extends PagerAdapter {
    
59. 
    
60.         @Override
    
61.         public int getCount() {
    
62.             return TOTAL_COUNT;
    
63.         }
    
64. 
    
65.         @Override
    
66.         public boolean isViewFromObject(View view, Object object) {
    
67.             return (view == object);
    
68.         }
    
69. 
    
70.         @Override
    
71.         public Object instantiateItem(ViewGroup container, int position) {
    
72.             ImageView imageView = new ImageView(ViewPagerMulTiFragmentDemo.this);
    
73.             imageView.setImageResource(R.drawable.image1 + position);
    
74.             ((ViewPager)container).addView(imageView, position);
    
75.             return imageView;
    
76. 
    
77.         }
    
78. 
    
79.         @Override
    
80.         public void destroyItem(ViewGroup container, int position, Object object) {
    
81.             ((ViewPager)container).removeView((ImageView)object);
    
82.         }
    
83.     }
    
84. 
    
85.     public class MyOnPageChangeListener implements OnPageChangeListener {
    
86. 
    
87.         @Override
    
88.         public void onPageSelected(int position) {
    
89.         }
    
90. 
    
91.         @Override
    
92.         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
93.             // to refresh frameLayout
    
94.             if (viewPagerContainer != null) {
    
95.                 viewPagerContainer.invalidate();
    
96.             }
    
97.         }
    
98. 
    
99.         @Override
    
100.         public void onPageScrollStateChanged(int arg0) {
     
101.         }
     
102.     }
     
103. }

复制代码

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