介绍如何利用利用ViewPager及android:clipChildren实现Gallery的画廊效果，即一屏显示多个Fragment

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

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

效果图如下：

android viewpager android viewpager half

在使用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>

<?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。
还可以

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

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) {
        }
    }
}

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

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

eko

2013 年 7 月 18 日 at 下午 3:37

博主，我想问问你给的那个连接是怎么下载源码的？

回复
- Trinea
  
  2013 年 7 月 18 日 at 下午 7:57
  
  添加Android Common Lib
  
  回复
Stevin

2013 年 5 月 29 日 at 上午 11:03

博主，如果是改gallery，使他只滑动一页麻烦吗

回复
- Trinea
  
  2013 年 5 月 29 日 at 下午 2:05
  
  集成Gallery，修改onFling函数可以做到的，后面会博客介绍
  
  回复
匿名

2013 年 5 月 23 日 at 上午 10:00

博主：我想实现的是三个view页面转换，每个设计了xml,问题：我要初始化每个xml里的UI控件，我应该在何处通过findViewById取得这些控件，设置这些控件的响应代码？是在 public Object instantiateItem(View collection, int position) 里吗？

回复
- Trinea
  
  2013 年 5 月 23 日 at 上午 10:09
  
  在instantiateItem初始化代码太乱了，每个页面在Fragment中初始化，你可以参考我之前写过的文章利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果
  
  回复
xingchen

2013 年 5 月 22 日 at 下午 12:32

你好请问，这个画廊滑动到最左边时候左边空白区消失掉滑动到最右边是右边空白区消失掉可以做到吗？

回复
- Trinea
  
  2013 年 5 月 22 日 at 下午 12:46
  
  应该可以做到，不过这个需求太变态了吧，有必要吗。需要的话试试在OnPageChangeListener的onPageSelected函数中根据position特殊处理，修改fragment的左右间距
  
  回复
yan jiali

2013 年 5 月 21 日 at 下午 12:12

你好，能否将ViewPager当前显示的图片突出放大并且高亮，两边的稍微小一些并且弱化呢，求解

回复
- Trinea
  
  2013 年 5 月 21 日 at 下午 1:14
  
  试试在OnPageChangeListener中根据需要修改各个fragment的长宽
  
  回复
yan jiali

2013 年 5 月 14 日 at 上午 11:29

能否将实例Demo打包可以下载呢？

回复
- Trinea
  
  2013 年 5 月 14 日 at 上午 11:40
  
  TrineaAndroidDemo
  
  回复
- Trinea
  
  2013 年 5 月 14 日 at 上午 11:41
  
  https://code.google.com/p/trinea-android-demo/downloads/list
  
  回复
yan jiali

2013 年 5 月 9 日 at 下午 1:25

你好，能给demo源码看看吗，我是新手，多谢啊

回复
- Trinea
  
  2013 年 5 月 9 日 at 下午 6:05
  
  晚上晚些时候换到google code上
  
  回复
- Trinea
  
  2013 年 5 月 9 日 at 下午 9:17
  
  代码已上传可见MultiFragment@Google Code
  
  回复
匿名

2013 年 5 月 3 日 at 下午 10:13

我是结合看了如下链接才找出关键点，博主有空讲讲啊，呵呵。
http://commonsware.com/blog/2012/08/20/multiple-view-viewpager-options.html
https://gist.github.com/devunwired/8cbe094bb7a783e37ad1

回复
- Trinea
  
  2013 年 5 月 4 日 at 下午 5:37
  
  不好意思，我只是英文稍微注释了下，viewPagerContainer.invalidate();这句话的意思是在viewpager滑动的时候刷新外面的layout，要不然页面更新不及时
  
  回复
匿名

2013 年 5 月 3 日 at 下午 10:13

我知道了，关键在OnPageChangeListener 中的代码
但是还没有看明白是啥意思。

回复
匿名

2013 年 5 月 3 日 at 下午 2:33

楼主写的挺好的，但是如何在显示多页并让选中页居中，这个怎么实现啊，我尝试了，很多方法都不行啊？

回复
- Trinea
  
  2013 年 5 月 3 日 at 下午 3:51
  
  示例图中的第二张图就是显示多页的例子(把每个fragment的宽度调小)，viewpager居中即可实现选中页居中
  
  回复
  - 匿名
    
    2013 年 5 月 3 日 at 下午 10:11
    
    我知道了，关键在
    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) {
    }
    }
    
    但是还没有看明白是啥意思。
    
    我是结合看了如下链接才找出关键点，博主有空讲讲啊，呵呵。
    http://commonsware.com/blog/2012/08/20/multiple-view-viewpager-options.html
    https://gist.github.com/devunwired/8cbe094bb7a783e37ad1
    
    回复
  - 匿名
    
    2013 年 5 月 3 日 at 下午 10:12
    
    我知道了，关键在OnPageChangeListener 中的代码
    
    但是还没有看明白是啥意思。
    
    我是结合看了如下链接才找出关键点，博主有空讲讲啊，呵呵。
    http://commonsware.com/blog/2012/08/20/multiple-view-viewpager-options.html
    https://gist.github.com/devunwired/8cbe094bb7a783e37ad1
    
    回复