自定义ViewPager指示器动效从分析到实现

最新推荐文章于 2024-04-28 17:19:13 发布

Super鸣

最新推荐文章于 2024-04-28 17:19:13 发布

阅读量911

点赞数 2

分类专栏： Android 文章标签： viewpager android 指示器

本文链接：https://blog.csdn.net/wanmeilang123/article/details/78915664

版权

本文详细介绍了如何实现一个自定义的ViewPager指示器，包括动效的拆解分析和具体实现步骤。通过监听ViewPager滑动，计算并绘制RoundRect的大小和颜色过渡，实现了指示器的平滑切换效果。

摘要由CSDN通过智能技术生成

准备工作

最近接到需求，要实现一个ViewPager的指示器。拿到视觉稿，就三个小点感觉分分钟的事。然而，仔细一看发现不简单啊，要实现顺滑切换，两种颜色自然过渡还需要体力。
这里写图片描述
* 对动效进行拆解分析

第一个点切换到第二个点时，第一个点往右缩短，第二个点往右增长；同时第一个点由红色平滑过渡到蓝色，第二个点反之。注：点的消长随手势方向，但消长的边有所不同

大体思路

实现原理很简单，就是画图、动效细节需要花时间调。三个点用RoundRect画，监听ViewPager的滑动；传入滑动距离，根据滑动距离计算RoundRect的left/right值实现消长；同时根据滑动距离比例计算过渡颜色值，给画笔赋值过渡颜色。

动手开撸

监听ViewPager

这些动效的动作来源当然是ViewPager了。我们需要监听到ViewPager的滑动比例positionOffset及切换position，position决定圆点的切换方向，positionOffset*圆点间距mDistance就是圆点的消长距离了；然后重新绘图，形成动效。

viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    //记录上一次滑动的positionOffsetPixels值
    private int lastValue = -1;

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        boolean isLeft = mIsLeft;
        if (lastValue / 10 > positionOffsetPixels / 10) {
            //右滑
            isLeft = false;
        } else if