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

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

<? 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都可以滑动。
具体代码如下：

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也会导致无法实现画廊而只是显示一屏。