Android使用ViewPager實現畫廊效果

按照國際慣例，先上效果圖

 

其實這跟普通的ViewPager原理都一樣，需要改變的地方就是：

1.增加滑進和滑出的動畫效果

2.縮小ViewPager的大小，給屏幕上留出上一張和下一張視圖的空間

 

布局文件：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipChildren="false"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/shareImg"
        android:layout_width="match_parent"
        android:layout_marginHorizontal="60dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:clipChildren="false"
        android:layout_above="@+id/shareOptions"
        />

</RelativeLayout>

這里只貼出了需要用到的部分

 

注意viewpager自身和父布局都需要加上 android:clipChildren="false" 屬性

網上大神解釋為：在子View進行繪制時不裁切它們的顯示范圍

 

接下來是動畫部分：

這里需要寫個繼承自ViewPager.PageTransformer的類，並重寫transformPage方法

public class ScaleAlphaPageTransformer implements ViewPager.PageTransformer{
    public static final float MAX_SCALE = 1.0f;
    public static final float MIN_SCALE = 0.8f;
    public static final float MAX_ALPHA = 1.0f;
    public static final float MIN_ALPHA = 0.7f;

    private boolean alpha = true;
    private boolean scale = true;

    @Override
    public void transformPage(View page, float position) {

        if (position < -1) {
            position = -1;
        } else if (position > 1) {
            position = 1;
        }

        float tempScale = position < 0 ? 1 + position : 1 - position;

        if(scale){
            float slope = (MAX_SCALE - MIN_SCALE) / 1;
            //一個公式
            float scaleValue = MIN_SCALE + tempScale * slope;
            page.setScaleX(scaleValue);
            page.setScaleY(scaleValue);
        }
        if(alpha){
            //模糊
            float alope = (MAX_ALPHA - MIN_ALPHA) / 1;
            float alphaValue = MIN_ALPHA + tempScale * alope;
            page.setAlpha(alphaValue);
        }
    }

    /***
     * 設置是否模糊和改變大小
     * @param alpha
     * @param scale
     */
    public void setType(boolean alpha, boolean scale){
        this.alpha = alpha;
        this.scale = scale;
    }
}

最后就是調用了

　　　　　ScaleAlphaPageTransformer scaleAlphaPageTransformer = new ScaleAlphaPageTransformer();
        scaleAlphaPageTransformer.setType(true,true);
        viewPager.setPageTransformer(true,scaleAlphaPageTransformer);
        viewPager.setPageMargin(2); //設置頁卡之間的距離
        viewPager.setOffscreenPageLimit(3); //設置頁面緩存數量
        ShareImgAdapter shareImgAdapter = new ShareImgAdapter(listOfImg);
        viewPager.setAdapter(shareImgAdapter);

完成