简单实现带节点的进度条

最新推荐文章于 2025-05-22 14:17:23 发布

NanBox9

最新推荐文章于 2025-05-22 14:17:23 发布

阅读量9.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：教程自定义控件文章标签： android 进度条节点阶段 progress

本文链接：https://blog.youkuaiyun.com/a49220824/article/details/54882183

教程同时被 2 个专栏收录

22 篇文章

订阅专栏

自定义控件

11 篇文章

订阅专栏

本文介绍了一种使用三张图片叠加实现复杂进度条的方法，并提供了关键代码。通过改变图片的平移距离来展示进度变化，同时介绍了如何精确控制到每一个节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

带节点进度条的实现方法不止一个，但是如果要实现图中这种效果的，初步看好像还不简单。进度条的形状不规则、背景是渐变颜色、节点上面还有个勾。这里提供一个很简单的思路，简单的都不好意思说了……

为了实现这个效果，我们需要三张图片，就是下面这三张。

看到这里可能你已经知道要怎么做了，三张图片分别是：

1.进度条填充部分的背景，带渐变颜色带节点小勾
2.进度条未填充部分的背景，纯色
3.进度条外框背景，是一张镂空图，颜色和进度条外的颜色一致

注意这三张图片的大小必须一致，将这三张图片叠加到一起就是我们的进度条了。至于进度条的动画，我们只要对第二层的那张图片实现一个属性动画就可以了：


public void setProgress(float stage) {
    int progressWidth = ivProgress.getWidth();
    ObjectAnimator animator = ObjectAnimator.ofFloat(ivProgress, "translationX", stage * progressWidth);
    animator.setDuration((int) (Math.abs(stage - currentStage) * 1000));
    animator.start();
    currentStage = stage;
}

至于如何控制到哪一个节点，这个可以自己拿尺子量一下，多试几次，上面代码中的stage就是这个作用，它从这里取值：


//不同阶段进度条所在位置
public static final float STAGE0 = 0f;
public static final float STAGE1 = 0.046f;
public static final float STAGE2 = 0.285f;
public static final float STAGE3 = 0.523f;
public static final float STAGE4 = 0.761f;
public static final float STAGE5 = 1f;