【Android】利用ViewPager实现画廊效果

我们在使用Gallery的时候大家会发现有几个问题，并不不能满足我们的需求：
(1). 无法控制每次滑动只滑动一页,
(2). Gallery默认第一个item居中，无法修改它与Gallery的左间距。

但是ViewPager可以方便的解决上面两个问题，接下来就为大家介绍如何利用ViewPager及android:clipChildren属性解决这个问题。

先来张图看一下效果吧：

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="300dp"        android:layout_height="550dp"        android:layout_gravity="center"        android:clipChildren="false" /></RelativeLayout>

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

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

代码设置

(1) ViewPager设置

需要setOnPageChangeListener，在onPageScrolled(int position, float positionOffset, int positionOffsetPixels)函数中不断刷新layout。

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

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

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

(2) FrameLayout设置

在这里我们需要处理事件的传递，我们需要在setOnTouchListener函数中将滑动滑动事件传递给viewPager，否则只有viewPager中间的view可以滑动，设置后整个viewPager都可以滑动。
具体代码如下

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

是不是很简单啊！！！

---

END～
我是大圣代，希望你能喜欢我的文章