ViewPager实现简单的画廊效果

效果图如下：

实现思路如下：
1、将ViewPager的宽度设置为屏幕宽度的一半，并将ViewPager置于屏幕的中央；
2、通过clipChildren属性将ViewPager控件范围外的View显示出来；
3、通过设置ViewPager的PagerTransformer来实现当前展示图片的放大。
4、通过将外部容器的触摸事件委托给ViewPager处理，达到即时是滑动ViewPager外部也可以滑动ViewPager的目的。

先贴布局代码。通过将clipChildren属性设置为false，使得控件内视图的显示不受控件大小边界的限制。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/relative"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    tools:context="com.example.dong.gallery.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="30dp"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:clipChildren="false" />

</RelativeLayout>

往ViewPager里添入5个视图，布局如下，通过设置TextView的左右边距，得到不同图片之间的距离的感觉：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.dong.gallery.MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_centerInParent="true"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:background="@android:color/holo_blue_bright"
        android:gravity="center"
        android:text="1"
        android:textSize="30sp" />

</RelativeLayout>

主体代码：

public class MainActivity extends Activity {
    /**
     * 展示图片的ViewPager
     */
    ViewPager viewPager;
    /**
     * 界面总容器
     */
    RelativeLayout rl;
    /**
     * 待往ViewPager里添加的视图
     */
    List<View> views = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        rl = (RelativeLayout) findViewById(R.id.relative);

        //拿取屏幕的宽和高
        WindowManager wn = getWindowManager();
        DisplayMetrics dm = new DisplayMetrics();
        wn.getDefaultDisplay().getMetrics(dm);
        int width = dm.widthPixels;
        int height = dm.heightPixels;

        //设置ViewPager的LayoutParams
        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(width / 2, height);
        layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);
        viewPager.setLayoutParams(layoutParams);

        //初始化5个View
        LayoutInflater inflater = LayoutInflater.from(this);
        views.add(inflater.inflate(R.layout.layout1, null));
        views.add(inflater.inflate(R.layout.layout2, null));
        views.add(inflater.inflate(R.layout.layout3, null));
        views.add(inflater.inflate(R.layout.layout4, null));
        views.add(inflater.inflate(R.layout.layout5, null));

        //设置ViewPager的PagerAdapter
        PagerAdapter adapter = new PagerAdapter() {
            @Override
            public int getCount() {
                return views.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(views.get(position));
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(views.get(position));
                return views.get(position);
            }
        };
        viewPager.setAdapter(adapter);

        //设置ViewPager的PageTransformer
        viewPager.setPageTransformer(true, new DepthPageTransformer());

        //将外部大容器的触摸事件委托给ViewPager处理
        rl.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                return viewPager.dispatchTouchEvent(motionEvent);
            }
        });
    }


    class DepthPageTransformer implements ViewPager.PageTransformer {

        @Override
        public void transformPage(View page, float position) {
            //将置于显示中心的View放大，其他的维持原比例
            if (position == 0) {
                page.setScaleX(1.0f);
                page.setScaleY(1.5f);
            } else {
                page.setScaleX(1.0f);
                page.setScaleY(1.0f);
            }

        }
    }


}