Android 自定义时钟控件 时针、分针、秒针的绘制这一篇就够了

于 2019-06-12 21:19:49 发布
阅读量2.2k 收藏 32
点赞数 7
文章标签： 时钟 自定义控件
欢迎大家转载，转载请务必注明出处：https://space.bilibili.com/262075972
本文链接：https://blog.csdn.net/qq_43377749/article/details/91474208
版权
本文详细介绍如何在Android中创建自定义时钟View，包括获取当前时间、计算时钟角度、绘制时针、分针和秒针的具体步骤。通过重写onMeasure()和onDraw()方法，以及使用Paint和Path类实现时钟的动态显示。
摘要由CSDN通过智能技术生成

前言

对于 Android 开发者来说，自定义 View 是绕不开的一个坎。二对一自定义 View 自定义时钟必然是首选，那么我们该如何绘制自定义时钟呢？本篇我结合 github 上一个有趣的三方库，来给大家讲讲如何作出我们的第一个时钟

现在开始：

目录

前言

现在开始：

前期准备：

重写 onMessure() 方法

配置 xml 文件

开始搭建之旅

获取当前时间

绘制秒针

定义画笔和颜色

定义长度值和 Path

绘制秒针

绘制分针

绘制时针

最后运行效果

前期准备：

对于所有的自定义 View 来说，构造方法、onMeasure()，onDraw() 这几个方法都是必不可少的。，所以哦你们先打出这套模版

public class ClockView extends View {

    public ClockView(Context context) {
        super(context);
    }

    public ClockView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }
}

重写 onMessure() 方法

重写 onMeasure() 方法的本质在于配置控件大小，而配置控件大小的重点就在于配置 setMeasuredDimension(..., ...) 方法。关于具体的配置细节可以参照：点击查看 https://blog.csdn.net/qq_43377749/article/details/91045764 这里以为是自定义时钟控件，所以内容很简单，在三种模式下分别放回三种值即可：

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(measureDimension(widthMeasureSpec), measureDimension(heightMeasureSpec));
    }

    private int measureDimension(int measureSpec) {
        int defaultSize = 800;
        int model = MeasureSpec.getMode(measureSpec);
        int size = MeasureSpec.getSize(measureSpec);
        switch (model) {
            case MeasureSpec.EXACTLY:
                return size;
            case MeasureSpec.AT_MOST:
                return Math.min(size, defaultSize);
            case MeasureSpec.UNSPECIFIED:
                return defaultSize;
            default:
                return defaultSize;
        }
    }

配置 xml 文件

因为是自定义控件，所以逼着在这里自定义了一个控件属性文件，位于 /res/values/attr.xml 具体内容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ClockView">
        <attr name="clock_backgroundColor" format="color" />
        <attr name="clock_lightColor" format="color" />
        <attr name="clock_darkColor" format="color" />
        <attr name="clock_textSize" format="dimension" />
    </declare-styleable>

</resources>

开始搭建之旅

现在让我们开始搭建时钟，由于是时钟的搭建，所以我们基本可以分为一下三个步骤：

  1. 获得当前系统时间
  2. 绘制时针
  3. 绘制分针
  4. 绘制秒针

获取当前时间

首先，要绘制时钟，必然要获得当前的时间，要不三根指针非重合在一起不可，所以让我们先来研究下如何获得当前系统时间，这里我们就需要使用到一个叫做 Calendar 的工具类，Calendar 是 Android 开发中需要获取时间时必不可少的一个工具类。

所需要的信息基本可以分为 

  1. milliSecond （毫秒，保证秒针滚动平滑不是一跳一跳）
  2. second
  3. minute
  4. hour
    private void getCurrentTime() {
        Calendar calendar = Calendar.getInstance();
        float milliSecond = calendar.get(Calendar.MILLISECOND);
        float second = calendar.get(Calendar.SECOND) + milliSecond / 1000;// 精确到小数点后 保证圆滑
        float minute = calendar.get(Calendar.MINUTE) + second / 60;
        float hour = calendar.get(Calendar.HOUR) + minute / 60;
    }

但是这里有个问题，自定义 View 中，绘制时是根据某个倾斜角度进行绘制的，而非给系统一个浮点型的时间，他就会自动取绘制。所以这里我们还需要知道 每个时间（分秒时，占总时间的比重所代表的偏转角），在这里我们这三个全局私有变量：

    /* 时针角度 */
    private float mHourDegree;
    /* 分针角度 */
    private float mMinuteDegree;
    /* 秒针角度 */
    private float mSecondDegree;    
    private void getCurrentTime(){
        Calendar calendar = Calendar.getInstance();
        float milliSecond = calendar.get(Calendar.MILLISECOND);
        float second = calendar.get(Calendar.SECOND) + milliSecond / 1000;
        float minute = calendar.get(Calendar.MINUTE) + second / 60;
        float hour   = calendar.get(Calendar.HOUR)   + minute / 60;
        mSecondDegree = second / 60 * 360;
        mMinuteDegree = minute / 60 * 360;
        mHourDegree   = hour   / 60 * 360;

    }

最后别忘了在 onDraw() 中调用 

绘制秒针

为了区别于时针分针单一的矩形，这里的秒针我们用一个三角尖代替：

  • 既然是绘制图像，自定义画笔就是必不可少的
  • 然后，画笔是用于上色的，所以我们还需要一个 Path 类对象将这个小三角的边界画出来
  • 由于绘制是在成员方法中进行，所以我们需要定一个 Canvas 对象，来保存 onDraw() 中由于绘制视图的 Canvas
  • 除此之外，秒针是有长度的，所以我们需要一个整型长度变量
  • 最后，我们还需要一个整型变量来存储颜色值，颜色值应该从我们先前定义的 xml 文件的属性中获取。

定义画笔和颜色

由于时间是需要反复更新的，所以 onDraw() 方法也是要被反复调用的。这就使得 Paint 等变量不能再其中定义，而需要在构造方法中定义，否则难免有内存溢出的风险。

    /* 亮色，用于分针、秒针、渐变终止色 */
    private int mLightColor;
    /* 秒针画笔 */
    private Paint mSecondHandPaint;
    public ClockView(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ClockView, 0, 0);
        mLightColor = ta.getColor(R.styleable.ClockView_clock_lightColor, Color.parseColor("#ffffff"));
        ta.recycle();

        mSecondHandPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mSecondHandPaint.setStyle(Paint.Style.FILL);
        mSecondHandPaint.setColor(mLightColor);
    }

定义长度值和 Path

长度值和 Path 的定义和 Paint 一样，不适合在 onDraw() 中，建议大家在 onSizeChanged 中定义，这个方法的提供了测量长度的各个形参。

    /* 加一个默认的padding值，为了防止用camera旋转时钟时造成四周超出view大小 */
    private float mDefaultPadding;
    private float mPaddingTop;
    /* 时钟半径，不包括padding值 */
    private float mRadius;
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mRadius = Math.min(w - getPaddingLeft() - getPaddingRight(),
                h - getPaddingTop() - getPaddingBottom()) / 2;// 各个指针长度
        mDefaultPadding = 0.12f * mRadius;
        mPaddingTop = mDefaultPadding + h / 2 - mRadius + getPaddingTop();// 钟离上边界距离
    }

绘制秒针

这里把绘制方法命名为：drawSecondNeedle() 首先我们需要获得 Canvas 参数

    /* 秒针路径 */
    private Path mSecondHandPath = new Path();
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mCanvas = canvas;
        getCurrentTime();
        drawSecondNeedle();
        invalidate();
    }

根据这个参数我们开始绘制秒针：

  1. 首先绘制画笔的 Style 设为 FILL 填充
  2. 定义一个 Path 对象由于绘制
  3. 调用 Path 对象的 moveTo 方法设定绘制起点
  4. 调用 lineTo 方法，绘制线条
  5. 调用 Canvas 的 close 方法将终点与起点连线形成封闭图形
    private void drawSecondNeedle() {
        mCanvas.save();// ❑ save：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。
        mCanvas.rotate(mSecondDegree, getWidth() / 2, getHeight() / 2);// 设置指针位置
        mSecondHandPath.reset();
        float offset = mPaddingTop;

        mSecondHandPath.moveTo(getWidth() / 2, offset + 0.26f * mRadius);// 这三行绘制三角尖
        mSecondHandPath.lineTo(getWidth() / 2 - 0.05f * mRadius, offset + 0.34f * mRadius);
        mSecondHandPath.lineTo(getWidth() / 2 + 0.05f * mRadius, offset + 0.34f * mRadius);
        mSecondHandPath.close();
        mSecondHandPaint.setColor(mLightColor);
        mCanvas.drawPath(mSecondHandPath, mSecondHandPaint);
        mCanvas.restore();// ❑ restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。
    }

绘制分针

要绘制分针首先得有以下准备

  1. 一个用于绘制分针的 Path 对象
  2. 一个用于绘制中心轴圆圈的 RectF 对象
  3. 一个用于画笔对象
    /* 分针路径 */
    private Path mMinuteHandPath = new Path();
    /* 分针画笔 */
    private Paint mMinuteHandPaint;
    /* 小时圆圈的外接矩形 */
    private RectF mCircleRectF = new RectF();
    /**
     * 绘制分针
     */
    private void drawMinuteNeedle() {
        mCanvas.save();
        mCanvas.rotate(mMinuteDegree, getWidth() / 2, getHeight() / 2);
        mMinuteHandPath.reset();

        float offset = mPaddingTop ;
        mMinuteHandPath.moveTo(getWidth() / 2 - 0.01f * mRadius, getHeight() / 2 - 0.03f * mRadius);
        mMinuteHandPath.lineTo(getWidth() / 2 - 0.008f * mRadius, offset + 0.365f * mRadius);
        mMinuteHandPath.quadTo(getWidth() / 2, offset + 0.345f * mRadius,
                getWidth() / 2 + 0.008f * mRadius, offset + 0.365f * mRadius);
        mMinuteHandPath.lineTo(getWidth() / 2 + 0.01f * mRadius, getHeight() / 2 - 0.03f * mRadius);
        mMinuteHandPath.close();
        mMinuteHandPaint.setStyle(Paint.Style.FILL);
        mCanvas.drawPath(mMinuteHandPath, mMinuteHandPaint);

        mCircleRectF.set(getWidth() / 2 - 0.03f * mRadius, getHeight() / 2 - 0.03f * mRadius,//绘制指针轴的小圆圈
                getWidth() / 2 + 0.03f * mRadius, getHeight() / 2 + 0.03f * mRadius);
        mMinuteHandPaint.setStyle(Paint.Style.STROKE);
        mMinuteHandPaint.setStrokeWidth(0.02f * mRadius);
        mCanvas.drawArc(mCircleRectF, 0, 360, false, mMinuteHandPaint);
        mCanvas.restore();
    }
  1. 首先我们根据之前计算获得的角度旋转画笔到当前要绘制的时间
  2. 然后我们绘制分针，绘制方法很简单，首先我们将画笔移到 View 中心篇左的地方
  3. 然后用 lineTo 绘制一条直线
  4. 接着用 quadTo 绘制一条曲线到右边对称点
  5. 再接着 用 lineTo 绘制一条直线到中心篇右
  6. 最后调用 close 方法闭合图形即可

 至于绘制圆心轴的方法就不说了 就是最基本的绘制圆的方法，先设定 RectF 对象，在调用 fraeArc 方法绘制即可

绘制时针

绘制是真的过程与绘制分针一模一样，由于轴心圆的 RectF 可以直接调用之前绘制分针用到的，所以甚至是更简单些

    /* 时针路径 */
    private Path mHourHandPath = new Path();
    /* 时针画笔 */
    private Paint mHourHandPaint;
    /**
     * 绘制时针
     */
    private void drawHourHand() {
        mCanvas.save();
        mCanvas.rotate(mHourDegree, getWidth() / 2, getHeight() / 2);
        mHourHandPath.reset();
        float offset = mPaddingTop;
        mHourHandPath.moveTo(getWidth() / 2 - 0.018f * mRadius, getHeight() / 2 - 0.03f * mRadius);
        mHourHandPath.lineTo(getWidth() / 2 - 0.009f * mRadius, offset + 0.48f * mRadius);
        mHourHandPath.quadTo(getWidth() / 2, offset + 0.46f * mRadius,
                getWidth() / 2 + 0.009f * mRadius, offset + 0.48f * mRadius);
        mHourHandPath.lineTo(getWidth() / 2 + 0.018f * mRadius, getHeight() / 2 - 0.03f * mRadius);
        mHourHandPath.close();
        mHourHandPaint.setStyle(Paint.Style.FILL);
        mCanvas.drawPath(mHourHandPath, mHourHandPaint);

        mCircleRectF.set(getWidth() / 2 - 0.03f * mRadius, getHeight() / 2 - 0.03f * mRadius,
                getWidth() / 2 + 0.03f * mRadius, getHeight() / 2 + 0.03f * mRadius);
        mHourHandPaint.setStyle(Paint.Style.STROKE);
        mHourHandPaint.setStrokeWidth(0.01f * mRadius);
        mCanvas.drawArc(mCircleRectF, 0, 360, false, mHourHandPaint);
        mCanvas.restore();
    }
}

最后运行效果

让我们优化下界面

到此为止我们的小时钟就定义完啦，如果大家阅读过程中发现错误，欢迎评论区中指出呦～～

圆号本昊
关注
安卓Android自定义控件：200行代码实现一个简约时钟
DonMoses的专栏
09-25 4931
一个简约而不无乐趣的时钟控件
Android时钟控件
06-15
Android时钟控件
android自定义时钟安卓APP开发源代码
09-29
android自定义时钟源代码介绍：android自定义时钟（三种方法实现，秒针效果，详细注解）,提供给初学者研究使用，希望大家喜欢。
自定义控件中一个时钟控件
02-29
自己写的一个自定义时钟，是那种传统的时钟，会根据系统时间而改变时针，分针，秒针，适合初学者使用，用Android studio来写的
Android 自定义View之： 时钟控件
ifadai的博客
08-18 746
学习自定义View，遂动手写了一个时钟控件，欢迎批评指正。 首先上效果图： GitHub地址 代码下载 首先，按需求分析思路： 绘制步骤 绘制大圆圈、刻度、 绘制数字 绘制指针 其他操作 自动开启计时 适配wrap_content和固定width、height值； 自定义属性：时钟颜色、各个刻度颜色、三种指针颜色等 接下来按步骤绘制： 我们先看o
《Android自定义控件》时钟、钟表AlarmClockView，仿华为手机世界时钟控件效果
陈少华的博客
01-04 2849
转载请标明出处：https://blog.csdn.net/m0_38074457/article/details/85790550，本文出自【陈少华的博客】 一、效果图 二、控件结构  三、代码实现 1、attrs.xml中添加自定义控件的属性 &lt;declare-styleable name="AlarmClockView"&gt; &lt;!--...
android 时钟控件
u014649337的专栏
03-04 826
时钟控件包括AnalogClock和DigitalClock，它们都负责显示时钟，所不同的是AnalogClock控件显示模拟时钟，且只显示时针和分针，而DigitalClock显示数字时钟，可精确到秒 控件代码如下：   <!-- AnalogClock与DigitalClock这两个时钟控件都不需要Java代码， 只要在layout的xml里插入以下代码即可自动显示时间--> <Linea
Android Clock控件
假装你是大灰狼的专栏
11-12 2253
1. AnalogClock模拟时钟 属性配置 dial，表盘背景 hand_hour，时针图片 hand_minute，秒针图片 效果如下， AnalogClock添加了对时间事件的监听 @Override protected void onAttachedToWindow() { super.onAttachedToWindow(); if (!mAttached) {...
Android-自定义时钟控件
08-13
自定义时钟控件
android 自定义时钟控件
09-02
android 自定义时钟控件
自定义时钟控件
03-24
总结来说，这个“自定义时钟控件”项目涵盖了C#中控件的自定义、图形绘制、时间处理和事件响应等多个核心知识点。通过这个项目，开发者不仅可以学习到如何创建视觉吸引人的界面，还能深入理解.NET Framework中的图形...
Android 自定义时钟.rar
12-03
在Android平台上，自定义时钟是一项常见的需求，可以用于创建独特的用户界面或者提供特定功能。这份"Android 自定义时钟.rar"压缩包包含了用于学习和参考的Android应用开发源码，帮助开发者掌握如何在Android系统上...
Android-ClockView——简单的Android时钟控件
08-13
ClockView —— 简单的Android时钟控件
Android自定义时钟控件
爱哭的毛毛虫
07-19 1070
项目要求访问网络是等待状态要做时钟的样子，经过不懈努力，终于写出来了，现分享出来，功能比较全，直接拷贝代码就可以用，仅供有这种需求的码农们参考，如果采纳，请点个赞，谢谢支持。 效果图 主Activity,主要是在访问接口的时候开启时钟，接口访问结束关闭时钟。 package com.example.myapplication; import android.gr
Android 时钟控件类
lanyu96
06-02 2905
新建一个 AlarmClockView类，代码如下 import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import...
Android 自定义时钟控件
du591310450的博客
01-23 519
1.创建ClockView     public class ClockView extends View { public ClockView(Context context) { super(context); init(); } public ClockView(Context context, @Nullable Attribut
android自定义时钟控件
12-22
这是一个简单的android的自定义时间控件，用来模拟时钟的指针运行
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值