自定义View（三），仿小米运动计步

最新推荐文章于 2025-01-14 09:38:45 发布

原创

最新推荐文章于 2025-01-14 09:38:45 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#andro #自定义view #小米

本文介绍了如何使用自定义View创建一个仿小米运动计步功能的控件，涵盖了自定义属性、获取属性值、初始化画笔、测量尺寸、绘制以及实现动画的全过程。详细讲解了每个步骤，包括画背景、圆、小圆点、竖线、圆环、文字及动画的实现。提供了完整的代码实现和效果展示。

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

前面主要说了自定义View的一些知识，这篇文章主要是利用自定义View做一个仿小米运动计步功能的控件，如下图所示：

分析一下思路：
1.画背景
2.画一个最外部的圆
3.画圆上的小圆点
4.画竖线，环绕一周
5.画圆环
6.画文字
7.添加动画
为了可以自定义各个控件的显示效果，自定义View的属性还是必要的。

自定义属性

自定义属性主要是自定义了各个部件的颜色，format是该属性的取值类型。
这里要注意的是，自定义属性的name定义成了XiaoMiStep，那么自定义View的名字也要是XiaoMiStep，保持一致。

<declare-styleable name="XiaoMiStep">
        <!--背景-->
        <attr name="backGroundColor" format="color"></attr>
        <!--最外层圆-->
        <attr name="outerCircleColor" format="color"></attr>
        <!--外层圆上的小圆点颜色-->
        <attr name="outerDotColor" format="color"></attr>
        <!--竖线的颜色-->
        <attr name="lineColor" format="color"></attr>
        <!--圆环的颜色-->
        <attr name="ringColor" format="color"></attr>
        <!--步数颜色-->
        <attr name="stepNumColor" format="color"></attr>
        <!--其他字的颜色-->
        <attr name="othetTextColor" format="color"></attr>
    </declare-styleable>

然后就是在布局文件中申明我们的自定义view。
这样，自定义View XiaoMiStep在xml布局文件里引用的时候，代码如下:

<com.example.ahuang.viewandgroup.view.XiaoMiStep
        android:id="@+id/xiaoMiStep"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        custom:backGroundColor="#0FA9C1"
        custom:lineColor="#8ED8E5"
        custom:othetTextColor="#8ED8E5"
        custom:outerCircleColor="#8ED8E5"
        custom:outerDotColor="#ffffff"
        custom:ringColor="#8ED8E5"
        custom:stepNumColor="#ffffff"/>