ViewPager页面滑动效果，自定义PageTransformer实现想要的变换效果

PageTransformer是ViewPager内部定义的一个接口，用于控制ViewPager中页面（item view）的滑动效果。PageTransformer可以在页面滑动过程中自定义页面的变换效果，如透明度渐变、缩放、旋转等。fUU28资讯网——每日最新资讯28at.com

接口定义

PageTransformer接口定义了一个方法transformPage(View page, float position)fUU28资讯网——每日最新资讯28at.com

• page：表示当前正在滑动的页面视图。
• position：表示页面相对于当前中心页面的位置，值是一个浮点数，范围根据滑动方向有所不同。例如，当向左滑动时，当前页面的position值变化为[0~-1]，右边页面的position值变化为[1~0]；向右滑动时，当前页面的position值变化为[0~1]，左边页面的position值变化为[-1~0]。

常见使用场景

• 「透明度渐变」：在页面滑动过程中改变页面的透明度，实现淡入淡出效果。
• 「缩放」：在页面滑动过程中改变页面的大小，实现缩放效果。
• 「旋转」：在页面滑动过程中改变页面的旋转角度，实现旋转效果。

实现方式

创建一个类并实现PageTransformer接口，重写transformPage(View page, float position)方法。根据position参数的值来更改page视图的属性，如透明度、大小、旋转角度等，以达到自定义的滑动效果。fUU28资讯网——每日最新资讯28at.com

示例代码

透明渐变效果

public class AlphaPageTransformer implements ViewPager.PageTransformer {    @Override    public void transformPage(@NonNull View page, float position) {        page.setAlpha(1 - Math.abs(position));    }}

在transformPage方法中，根据position的绝对值来设置页面的透明度，使页面在滑动过程中透明度发生变化。fUU28资讯网——每日最新资讯28at.com

透明旋转翻页效果

public class RotatePageTransformer implements ViewPager.PageTransformer {    @Override    public void transformPage(@NonNull View page, float position) {        int pagerWidth = mViewPager.getWidth();        float horizontalOffsetBase = (pagerWidth - pagerWidth * 1.2f) / 2 / offscreenPageLimit + 45;        if (position >= offscreenPageLimit || position <= -1) {            page.setVisibility(View.GONE);        } else {            page.setVisibility(View.VISIBLE);        }        if (position >= 0) {            float translationX = (horizontalOffsetBase - page.getWidth()) * position;            page.setTranslationX(translationX);        }        if (position > -1 && position < 0) {            float rotation = position * 30;            page.setRotation(rotation);            page.setAlpha((position * position * position + 1));        } else if (position > offscreenPageLimit - 1) {            page.setAlpha((float) (1 - position + Math.floor(position)));        } else {            page.setRotation(0);            page.setAlpha(1);        }        if (position == 0) {            page.setScaleX(1.2f);            page.setScaleY(1.2f);        } else {            float scaleFactor = Math.min(1.2f - position * 0.1f, 1.2f);            page.setScaleX(scaleFactor);            page.setScaleY(scaleFactor);        }        ViewCompat.setElevation(page, (offscreenPageLimit - position) * 5);    }}

调用ViewPager的setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer)方法，设置实现的PageTransformer效果。fUU28资讯网——每日最新资讯28at.com

ViewPager viewPager = findViewById(R.id.view_pager);viewPager.setPageTransformer(true, new RotatePageTransformer());

图片fUU28资讯网——每日最新资讯28at.com

fUU28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-91682-0.htmlViewPager页面滑动效果，自定义PageTransformer实现想要的变换效果

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Spring Boot中的六种API请求参数读取方式

下一篇： 聊聊什么是微服务，你看明白了吗？