最新消息:欢迎访问Android开发中文站!商务联系微信:loading_in

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

热点资讯 loading 357浏览 0评论

前言

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


前期准备:

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

    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(…, …) 方法。关于具体的配置细节可以参照:点击查看 blog.csdn.net/qq_43377749… 这里以为是自定义时钟控件,所以内容很简单,在三种模式下分别放回三种值即可:

    @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>

开始搭建之旅

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

  • 获得当前系统时间
  • 绘制时针
  • 绘制分针
  • 绘制秒针

获取当前时间

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

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

  • milliSecond (毫秒,保证秒针滚动平滑不是一跳一跳)
  • second
  • minute
  • 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();
    }

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

  • 首先绘制画笔的 Style 设为 FILL 填充
  • 定义一个 Path 对象由于绘制
  • 调用 Path 对象的 moveTo 方法设定绘制起点
  • 调用 lineTo 方法,绘制线条
  • 调用 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执行的操作对后续的绘制有影响。
    }

绘制分针

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

  • 一个用于绘制分针的 Path 对象
  • 一个用于绘制中心轴圆圈的 RectF 对象
  • 一个用于画笔对象
    /* 分针路径 */
    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();
    }
  • 首先我们根据之前计算获得的角度旋转画笔到当前要绘制的时间
  • 然后我们绘制分针,绘制方法很简单,首先我们将画笔移到 View 中心篇左的地方
  • 然后用 lineTo 绘制一条直线
  • 接着用 quadTo 绘制一条曲线到右边对称点
  • 再接着 用 lineTo 绘制一条直线到中心篇右
  • 最后调用 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();
    }
}

最后运行效果


让我们优化下界面


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

作者:_yuanhao
链接:https://juejin.im/post/5d00f09c6fb9a07ef06f8d03
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

转载请注明:Android开发中文站 » Android 自定义时钟控件 时针、分针、秒针的绘制这一篇就够了

您必须 登录 才能发表评论!