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

本文展示了如何利用自定义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 
评论 33
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值