Android自定义View之时钟

最新推荐文章于 2025-06-23 18:20:41 发布

Hello__code

最新推荐文章于 2025-06-23 18:20:41 发布

阅读量3.6k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：自定义view 文章标签：自定义View 时钟

本文链接：https://blog.youkuaiyun.com/z_Xiaozuo/article/details/82560260

本文介绍如何在Android中创建一个自定义View，实现一个动态时钟。从绘制表盘、刻度、数字到绘制时针、分针、秒针，并通过计算角度让指针随时间转动。同时，探讨了手动设置时间的解决方案，通过实例学习自定义View的技巧。

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

效果（gif效果不是很好）

GitHub地址

https://github.com/zuohp/My_Clock.git

绘制思路

1. 绘制表盘和长短刻度

2. 绘制各个时间点的数字

3. 绘制时针，分针，秒针

4. 让各个指针转起来，根据时间计算角度

开始绘制

1. 定义参数（attrs文件）

    <declare-styleable name="Clock">
        <!--数值-->
        <attr name="mClockRingWidth" format="dimension"/>
        <attr name="mDefaultWidth" format="dimension"/>
        <attr name="mDefaultLength" format="dimension"/>
        <attr name="mSpecialWidth" format="dimension"/>
        <attr name="mSpecialLength" format="dimension"/>
        <attr name="mHWidth" format="dimension"/>
        <attr name="mMWidth" format="dimension"/>
        <attr name="mSWidth" format="dimension"/>
        <!--颜色-->
        <attr name="mCircleColor" format="color"/>
        <attr name="mHColor" format="color"/>
        <attr name="mMColor" format="color"/>
        <attr name="mSColor" format="color"/>
        <attr name="mNumColor" format="color"/>

    </declare-styleable>

2. 继承View，定义参数

//    圆形和刻度的画笔、指针的画笔、数字的画笔
    private Paint mCirclePaint,mPointerPaint,mNumPaint;

//    时钟的外环宽度、时钟的半径、默认刻度的宽度、默认刻度的长度
//    特殊刻度的宽度、特殊刻度的长度、时针的宽度、分针的宽度、秒针的宽度
    private float mClockRingWidth,mClockRadius,mDefaultWidth,mDefaultLength,
                mSpecialWidth,mSpecialLength,mHWidth,mMWidth,mSWidth;

//    圆形和刻度的颜色，时针的颜色，分针的颜色，秒针的颜色，数字的颜色
    private int mCircleColor,mHColor,mMColor,mSColor,mNumColor;

3. 初始化参数以及画笔

    public Clock(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context,attrs);
        initPaint();
        Calendar mCalendar= Calendar.getInstance();
        //获取当前小时数
        int hours = mCalendar.get(Calendar.HOUR);
        //获取当前分钟数
        int minutes = mCalendar.get(Calendar.MINUTE);
        //获取当前秒数
        int seconds=mCalendar.get(Calendar.SECOND);
        setTime(hours,minutes,seconds);
        //开启定时
        start();
    }

    /**
     * 初始化自定义参数
     */
    private void init(Context context,AttributeSet attributeSet){
        TypedArray ta = context.obtainStyledAttributes(attributeSet, R.styleable.Clock);
        mClockRingWidth=ta.getDimension(R.styleable.Clock_mClockRingWidth,Siz