自定义View实现 “手机淘宝”物流进程模块进度告知UI横向版

最新推荐文章于 2021-05-30 21:25:25 发布

原创

最新推荐文章于 2021-05-30 21:25:25 发布 · 1.1w 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#ui #android #git

本文展示了如何利用自定义View实现类似“手机淘宝”物流进程的UI，参照设计师LeslyPyram的设计。提供了项目的目录结构，详细介绍了如何在布局文件中设置进程数、自定义颜色、大小等，并解析了实现的关键步骤，包括初始化参数、位置计算和绘制。源码已上传至GitHub，读者可进一步了解或交流。

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

转载请注明出处：王亟亟的大牛之路

话不多说，先洗脑，安利！！！https://github.com/ddwhan0123/Useful-Open-Source-Android 旅游都在更啊！！

这些天都在浪几乎没撸代码，然后今天下午找了个下午茶时间捯饬了个自定义View来实现很多APP都有却没怎么公开的一个“进度通知的View”
实现power by:https://dribbble.com/LeslyPyram

先上下原设计：

这里写图片描述

用圆+线条+颜色的变化来告知用户你现在的物件到哪了(这是我自己买的东西的截图，看实现就好)

再贴下，今天实现的效果：

这里写图片描述

颜色不管，别的大致就差不多“翻版了”（间距和球体空心实心只是个人爱好问题，这不是模仿难点）

来看下项目目录

这里写图片描述
东西很简单，就一个控件就能搞定，先来看看如何使用

  <stepperindicator.com.stepperindicatordemo.MyStepperIndicator
        android:id="@+id/mySI"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/button"
        android:layout_marginLeft="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginTop="32dp"
        app:stpi_stepCount="5" />

在布局文件里设置下总的“进程数”就可以了。

如果你要设置球的颜色，大小，边框粗细，如下：

 app:stpi_circleColor

 app:stpi_circleRadius

 app:stpi_circleStrokeWidth

当然，你也有其他的自定义选项，这里不做全部介绍了，你可以看 attrs.xml文件内的标签，命名很规范，一看就懂

看完怎么用，来看下怎么实现的

public class MyStepperIndicator extends View {
   
   
    private static final float EXPAND_MARK = 1.3f;
    private static final int DEFAULT_ANIMATION_DURATION = 250;
    private Resources resources;
    private Paint circlePaint;
    private Paint linePaint, lineDonePaint, lineDoneAnimatedPaint;
    private Paint indicatorPaint;
    private float circleRadius;
    private float animProgress;
    private float checkRadius;
    private float animIndicatorRadius;
    private float indicatorRadius;
    private float lineLength;
    private float lineMargin;
    private float animCheckRadius;
    private int animDuration;
    private int stepCount;
    private int currentStep;
    private Bitmap doneIcon;
    private float[] indicators;
    private List<Path> linePathList = new ArrayList<>();
    private AnimatorSet animatorSet;
    private ObjectAnimator lineAnimator, indicatorAnimator, checkAnimator;
    private int previousStep;

    //构造函数
    public MyStepperIndicator(Context context) {
        this(context, null);
    }

    public MyStepperIndicator(Context