Android使用ViewPager实现画廊效果

按照国际惯例，先上效果图

其实这跟普通的ViewPager原理都一样，需要改变的地方就是：

1.增加滑进和滑出的动画效果

2.缩小ViewPager的大小，给屏幕上留出上一张和下一张视图的空间

布局文件：

 1 <RelativeLayout
 2     xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:clipChildren="false"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent">
 6 
 7     <androidx.viewpager.widget.ViewPager
 8         android:id="@+id/shareImg"
 9         android:layout_width="match_parent"
10         android:layout_marginHorizontal="60dp"
11         android:layout_height="wrap_content"
12         android:layout_centerInParent="true"
13         android:clipChildren="false"
14         android:layout_above="@+id/shareOptions"
15         />
16 
17 </RelativeLayout>

这里只贴出了需要用到的部分

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

网上大神解释为：在子View进行绘制时不裁切它们的显示范围

接下来是动画部分：

这里需要写个继承自ViewPager.PageTransformer的类，并重写transformPage方法

 1 public class ScaleAlphaPageTransformer implements ViewPager.PageTransformer{
 2     public static final float MAX_SCALE = 1.0f;
 3     public static final float MIN_SCALE = 0.8f;
 4     public static final float MAX_ALPHA = 1.0f;
 5     public static final float MIN_ALPHA = 0.7f;
 6 
 7     private boolean alpha = true;
 8     private boolean scale = true;
 9 
10     @Override
11     public void transformPage(View page, float position) {
12 
13         if (position < -1) {
14             position = -1;
15         } else if (position > 1) {
16             position = 1;
17         }
18 
19         float tempScale = position < 0 ? 1 + position : 1 - position;
20 
21         if(scale){
22             float slope = (MAX_SCALE - MIN_SCALE) / 1;
23             //一个公式
24             float scaleValue = MIN_SCALE + tempScale * slope;
25             page.setScaleX(scaleValue);
26             page.setScaleY(scaleValue);
27         }
28         if(alpha){
29             //模糊
30             float alope = (MAX_ALPHA - MIN_ALPHA) / 1;
31             float alphaValue = MIN_ALPHA + tempScale * alope;
32             page.setAlpha(alphaValue);
33         }
34     }
35 
36     /***
37      * 设置是否模糊和改变大小
38      * @param alpha
39      * @param scale
40      */
41     public void setType(boolean alpha, boolean scale){
42         this.alpha = alpha;
43         this.scale = scale;
44     }
45 }

最后就是调用了

1 　　　　　ScaleAlphaPageTransformer scaleAlphaPageTransformer = new ScaleAlphaPageTransformer();
2         scaleAlphaPageTransformer.setType(true,true);
3         viewPager.setPageTransformer(true,scaleAlphaPageTransformer);
4         viewPager.setPageMargin(2); //设置页卡之间的距离
5         viewPager.setOffscreenPageLimit(3); //设置页面缓存数量
6         ShareImgAdapter shareImgAdapter = new ShareImgAdapter(listOfImg);
7         viewPager.setAdapter(shareImgAdapter);

完成