欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Viewpager实现中间大两边小画廊效果

程序员文章站 2022-05-15 17:13:12
...

其实实现起来非常的简单:先上效果图,是不是你需要的

Viewpager实现中间大两边小画廊效果
因为实现太简单了,就不多做解释了。先上核心类。

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

有用记得点个赞,有问题可以留言!!!