畫廊效果系列一：

• 左側和右側的頁面顯示30%，且隨著頁面滑動，左側右側和中間的頁面有著不同的變化效果。頁面切換很平滑。

效果圖如下：

實現原理：

• ViewPager 無限輪播，設定了Integer.MAX_VALUE ; 其實也可以設定為前一張後一張，不過麻煩點兒
• ViewPager 的PageTransformer監聽，用於設定ViewPager的頁面切換時的動畫效果
• clipChildren 屬性，用於設定是否約束子控制元件

遇到的問題

1. 設定clipChildren不起作用

   解決辦法： 應該把此屬性設定給ViewPager的父控制元件，因為約束是父控制元件約束子控制元件，而非平級

2. 載入新頁面時，需要手動觸動一下，左側/右側載入的頁面才會變成70%

   解決辦法：頁面初始化的時候就設定大小為70%

核心程式碼

1. ViewPager 佈局設定

<RelativeLayout xmlns:android="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">

    <android.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"></android.support.v4.view.ViewPager>
</RelativeLayout>

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);

實現原始碼