Viewpager实现中间大两边小画廊效果
程序员文章站
2022-05-15 17:13:12
...
其实实现起来非常的简单:先上效果图,是不是你需要的
因为实现太简单了,就不多做解释了。先上核心类。
public class BigMidleTwoSmallSideTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.8f;
private static final float MAX_SCALE = 1.0f;
@Override
public void transformPage(@NonNull View page, float position) {
TextView viewById = page.findViewById(R.id.textView5);
viewById.setText("" + position);
//3个公式
if (position <= 0) {
page.setScaleY(MIN_SCALE);
} else if (position <= 0.33f) {
float scale = MIN_SCALE + (MAX_SCALE - MIN_SCALE) * (position / 0.333f);
page.setScaleY(scale);
} else if (position <= 0.66f) {
float scale = MAX_SCALE - (MAX_SCALE - MIN_SCALE) * ((position - 0.333f) / 0.333f);
page.setScaleY(scale);
} else {
page.setScaleY(MIN_SCALE);
}
}
然后再说下一个细节,因为是展示3个,所以需要再PagerAdapter类里面设置宽度
@Override
public float getPageWidth(int position) {
return 0.333333f;
}
用法:
//划重点-----
mViewPager.setPageTransformer(false, new BigMidleTwoSmallSideTransformer());
//-----
SmPagerAdapter smPagerAdapter = new SmPagerAdapter(this, datalist);
mViewPager.setAdapter(smPagerAdapter);
然后?没了,就是这么简单,如果你要4个那么宽度就是0.25,以此对应,对应的PageTransformer的计算公式就需要改变。如果有不太懂的,可以看这一篇有介绍的。
最后源码地址:https://github.com/MasterSumCloud/SimilarCardPageTransformer
PageTransformer介绍请看https://blog.csdn.net/SummerCloudXT/article/details/101108862
有用记得点个赞,有问题可以留言!!!