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

完成