按照国际惯例,先上效果图
其实这跟普通的ViewPager原理都一样,需要改变的地方就是:
1.增加滑进和滑出的动画效果
2.缩小ViewPager的大小,给屏幕上留出上一张和下一张视图的空间
布局文件:
xmlns:android="http://schemas.android.com/apk/res/android"
android:clipChildren="false"
android:layout_width="match_parent"
android:layout_height="match_parent">
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"
/>
这里只贴出了需要用到的部分
注意viewpager自身和父布局都需要加上 android:clipChildren="false" 属性
网上大神解释为:在子View进行绘制时不裁切它们的显示范围
接下来是动画部分:
这里需要写个继承自ViewPager.PageTransformer的类,并重写transformPage方法
public class ScaleAlphaPageTransformerimplements 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);
完成