Viewpager 实现画廊Gallery效果，左右两侧随着滑动一定比例缩放

画廊效果系列一：

• 左侧和右侧的页面显示30%，且随着页面滑动，左侧右侧和中间的页面有着不同的变化效果。页面切换很平滑。

效果图如下：

实现原理：

• ViewPager 无限轮播，设置了Integer.MAX_VALUE ; 其实也可以设置为前一张后一张，不过麻烦点儿
• ViewPager 的PageTransformer监听，用于设置ViewPager的页面切换时的动画效果
• clipChildren 属性，用于设定是否约束子控件

遇到的问题

1. 设定clipChildren不起作用

   解决办法： 应该把此属性设置给ViewPager的父控件，因为约束是父控件约束子控件，而非平级

2. 加载新页面时，需要手动触动一下，左侧/右侧加载的页面才会变成70%

   解决办法：页面初始化的时候就设置大小为70%

核心代码

1. ViewPager 布局设定

"http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    tools:context="ha.houviewpagergallery.MainActivity">

    .support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_marginTop="100dp"
        android:layout_marginLeft="100dp"
        android:layout_marginRight="100dp"
        android:layout_width="match_parent"
        android:layout_height="500dp">.support.v4.view.ViewPager>

2 . 代码中ViewPager的PageTransformer的监听

 pager.setPageTransformer(true, new ViewPager.PageTransformer() {
            @Override
            public void transformPage(View page, float position) {
                    page.setScaleY(1f - ((float) (0.3 * Math.abs(position))));
                    page.setScaleX(1f - ((float) (0.3 * Math.abs(position))));
          }
        });

3 . 预设ViewPager加载的页面的大小

view.setScaleY(0.7f);
view.setScaleX(0.7f);

实现源码

欢迎访问我的github，有帮助的话就star/fork一个吧，^3^
https://github.com/liuda555/HouViewPagerGallery