Android 自定义View之：时钟控件

2017-08-18 本文已影响0人 ifadai

学习自定义View，遂动手写了一个时钟控件，欢迎批评指正。

首先上效果图：

image

GitHub地址代码下载

首先，按需求分析思路：

绘制步骤

绘制大圆圈、刻度、
绘制数字
绘制指针

其他操作

自动开启计时
适配wrap_content和固定width、height值；
自定义属性：时钟颜色、各个刻度颜色、三种指针颜色等

接下来按步骤绘制：

我们先看onDraw方法中我们的操作，这里对应我们上面说的步骤：

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 坐标原点移动到View 中心
        canvas.translate(mCenterX, mCenterY);
        drawCircle(canvas);
        drawText(canvas);
        drawPointer(canvas);
    }

绘制圆圈和刻度

/**
     * 绘制时钟的圆形和刻度
     */
    private void drawCircle(Canvas canvas) {

        mDefaultPaint.setStrokeWidth(mDefaultScaleWidth);
        mDefaultPaint.setColor(mClockColor);

        canvas.drawCircle(0, 0, mRadius, mDefaultPaint);

        for (int i = 0; i < 60; i++) {
            if (i % 5 == 0) { // 特殊时刻

                mDefaultPaint.setStrokeWidth(mParticularlyScaleWidth);
                mDefaultPaint.setColor(mColorParticularyScale);

                canvas.drawLine(0, -mRadius, 0, -mRadius + mParticularlyScaleLength, mDefaultPaint);

            } else {          // 一般时刻

                mDefaultPaint.setStrokeWidth(mDefaultScaleWidth);
                mDefaultPaint.setColor(mColorDefaultScale);

                canvas.drawLine(0, -mRadius, 0, -mRadius + mDefaultScaleLength, mDefaultPaint);

            }
            canvas.rotate(6);
        }
    }

这里主要有两点：

1、表示小时的刻度，我们作为特殊刻度，其线的长度、宽度、颜色，与普通刻度做区别；

2、每次绘制完一个刻度，我们调用canvas.rotate(6)方法，让其旋转6度（360度/60)，这样绘制起来比较方便，避免了计算每一个刻度的坐标值。

绘制文字：

 /**
     * 绘制特殊时刻（12点、3点、6点、9点)的文字
     */
    private void drawText(Canvas canvas) {

        setTextPaint();

        Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();

        // 文字顶部与基线距离
        float ascent=Math.abs(fontMetrics.ascent);
        // 文字底部与基线距离
        float descent=Math.abs(fontMetrics.descent);
        // 文字高度
        float fontHeight = ascent+descent;
        // 文字竖直中心点距离基线的距离；
        float offsetY = fontHeight / 2 - Math.abs(fontMetrics.descent);
        // 文字宽度
        float fontWidth;

        // drawText(@NonNull String text, float x, float y, @NonNull Paint paint) 参数：y，为基线的y坐标，并非文字左下角的坐标
        // 文字距离圆圈的距离为 特殊刻度长度+宽度

        String h = "12";
        // y轴坐标为: -（半径-特殊刻度长度-特殊刻度宽度（作为间距）-文字顶部距离基线的距离）
        float y=-(mRadius-mParticularlyScaleLength-mParticularlyScaleWidth-ascent);
        canvas.drawText(h, 0,y, mTextPaint);

        h = "3";
        fontWidth = mTextPaint.measureText(h);
        // y轴坐标为: 半径-特殊刻度长度-特殊刻度宽度（作为间距）-文字长度/2（绘制原点在文字横向中心）
        y=mRadius - mParticularlyScaleLength-mParticularlyScaleWidth - (fontWidth / 2);
        canvas.drawText(h,y, 0 + offsetY, mTextPaint);

        h = "6";
        // y轴坐标为: 半径-特殊刻度长度-特殊刻度宽度（作为间距）-文字底部与基线的距离
        y=mRadius - mParticularlyScaleLength -mParticularlyScaleWidth-descent;
        canvas.drawText(h, 0,y, mTextPaint);

        h = "9";
        fontWidth = mTextPaint.measureText(h);
        // y轴坐标为: -（半径-特殊刻度长度-特殊刻度宽度（作为间距）-文字长度/2（绘制原点在文字横向中心））
        y= -(mRadius - mParticularlyScaleLength -mParticularlyScaleWidth -(fontWidth/2));
        canvas.drawText(h,y, 0 + offsetY, mTextPaint);
    }

    private void setTextPaint(){
        mTextPaint.setStrokeWidth(mDefaultScaleWidth / 2);
        mTextPaint.setTextSize(mParticularlyScaleWidth * 4);
        // 文字绘制中心点移动到横向中心
        mTextPaint.setTextAlign(Paint.Align.CENTER);
    }

这里只绘制了四个时间的文字，但是这四个数字坐标规则都不相同，我们需要分开绘制;

首先，我们了解一下文字绘制方法：

canvas. drawText(String text, float x, float y,Paint paint)

这里的x和y就是文字绘制的坐标，如图：（图片来自http://www.gcssloop.com/customview/Canvas_PictureText）

image

这里看上去，x和y像是文字左下角的坐标，可是，这里其实是文字的基线（BaseLine ）起点的的坐标，什么是基线呢？

我们先了解Paint.FontMetrics 类，他是用来描述文字的上下高度的类，包含属性如下：

FontMetrics类

图解（来源见水印）：

FontMetrics
对照着这两个图，再看代码的时候，应该就懂了。

绘制指针：

/**
     * 绘制指针
     */
    private void drawPointer(Canvas canvas) {

        drawHourPointer(canvas);
        drawMinutePointer(canvas);
        drawSecondPointer(canvas);

        mPointerPaint.setColor(mClockColor);
        // 绘制中心原点，需要在指针绘制完成后才能绘制
        canvas.drawCircle(0, 0, mPointRadius, mPointerPaint);
    }

首先绘制时针，我们可以联想一下，当现在时间是3:30的时候，时针应该在那个位置呢？指在3上吗？不是的，因为现在已经是45分了，时针应该在3到4之间，在二分之一的位置，更精确一点的话，我们还要考虑秒针的状态。那么，我们就可以通过当前时间，算出指针与x轴的角度，从而通过三角函数，计算出指针的目标坐标值：

/**
     * 绘制时针
     */
    private void drawHourPointer(Canvas canvas) {

        mPointerPaint.setStrokeWidth(mHourPointerWidth);
        mPointerPaint.setColor(mColorHourPointer);

        // 当前时间的总秒数
        float s = mH * 60 * 60 + mM * 60 + mS;
        // 百分比
        float percentage = s / (12 * 60 * 60);
        // 通过角度计算弧度值，因为时钟的角度起线是y轴负方向，而View角度的起线是x轴正方向，所以要加270度
        float angle = 270 + 360 * percentage;

        float x = (float) (mHourPointerLength * Math.cos(Math.PI * 2 / 360 * angle));
        float y = (float) (mHourPointerLength * Math.sin(Math.PI * 2 / 360 * angle));

        canvas.drawLine(0, 0, x, y, mPointerPaint);
    }

    /**
     * 绘制分针
     */
    private void drawMinutePointer(Canvas canvas) {

        mPointerPaint.setStrokeWidth(mMinutePointerWidth);
        mPointerPaint.setColor(mColorMinutePointer);

        float s = mM * 60 + mS;
        float percentage = s / (60 * 60);
        float angle = 270 + 360 * percentage;

        float x = (float) (mMinutePointerLength * Math.cos(Math.PI * 2 / 360 * angle));
        float y = (float) (mMinutePointerLength * Math.sin(Math.PI * 2 / 360 * angle));

        canvas.drawLine(0, 0, x, y, mPointerPaint);
    }

    /**
     * 绘制秒针
     */
    private void drawSecondPointer(Canvas canvas) {

        mPointerPaint.setStrokeWidth(mSecondPointerWidth);
        mPointerPaint.setColor(mColorSecondPointer);

        float s = mS;
        float percentage = s / 60;
        float angle = 270 + 360 * percentage;

        float x = (float) (mSecondPointerLength * Math.cos(Math.PI * 2 / 360 * angle));
        float y = (float) (mSecondPointerLength * Math.sin(Math.PI * 2 / 360 * angle));

        canvas.drawLine(0, 0, x, y, mPointerPaint);
    }

到这里，自定义View的绘制部分已完成，下面就是属于一些自定义View中经常用到的操作；

其他操作

开启计时

当然，时钟是动态的，每一秒都在变化，我们需要在线程中不断刷新当前View：

/**
     * 开始计时
     */
    private void startTime() {
        new Thread(new Runnable() {
            @Override
            public void run() {
                while (true) {
                    getTime();
                }
            }
        }).start();
    }

    /**
     * 获取当前系统时间
     */
    private void getTime() {
        Calendar calendar = Calendar.getInstance();
        int hour = calendar.get(Calendar.HOUR);
        hour = hour % 12;
        int minute = calendar.get(Calendar.MINUTE);
        int second = calendar.get(Calendar.SECOND);

        if (hour != mH || minute != mM || second != mS) {
            setTime(hour, minute, second);
            postInvalidate();
        }
    }

    /**
     * 设置时间
     */
    private void setTime(int h, int m, int s) {
        mH = h;
        mM = m;
        mS = s;
    }

startTime()方法需要在构造方法中调用；

适配不同大小：

我们首先在onMeasure(int widthMeasureSpec, int heightMeasureSpec)中，对尺寸进行测量，并当wrap_content模式下，默认尺寸为48dp。

这部分代码基本每个自定义View中都会用到，比较通用，也比较常见，代码就不贴了，可以clone源码看一下。

而对于时钟的尺寸属性，我们可以通过与半径的比例计算，这样就比较好的适配了不同尺寸下的时钟大小：

 @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
        mCenterX = w / 2;
        mCenterY = h / 2;
        mRadius = (float) (w / 2 * 0.8);

        initClockPointerLength();
    }

    /**
     * 根据控件的大小，初始化时钟刻度的长度和宽度、指针的长度和宽度、时钟中心点的半径
     */
    private void initClockPointerLength() {

        /*
        * 默认时钟刻度长=半径/10;
        * 默认时钟刻度宽=长/6;
        *
        * */
        mDefaultScaleLength = mRadius / 10;
        mDefaultScaleWidth = mDefaultScaleLength / 6;

        /*
        * 特殊时钟刻度长=半径/5;
        * 特殊时钟刻度宽=长/6;
        *
        * */
        mParticularlyScaleLength = mRadius / 5;
        mParticularlyScaleWidth = mParticularlyScaleLength / 6;

        /*
        * 时针长=半径/3;
        * 时针宽=特殊时钟刻度宽;
        *
        * */
        mHourPointerLength = mRadius / 3;
        mHourPointerWidth = mParticularlyScaleWidth;

         /*
        * 分针长=半径/2;
        * 分针宽=特殊时钟刻度宽;
        *
        * */
        mMinutePointerLength = mRadius / 2;
        mMinutePointerWidth = mParticularlyScaleWidth;

        /*
        * 秒针长=半径/3*2;
        * 秒针宽=默认时钟刻度宽;
        *
        * */
        mSecondPointerLength = mRadius / 3 * 2;
        mSecondPointerWidth = mDefaultScaleWidth;

        // 中心点半径=（默认刻度宽+特殊刻度宽）/2
        mPointRadius = (mDefaultScaleWidth + mParticularlyScaleWidth) / 2;
    }

自定义属性值

attr.xml:

<declare-styleable name="ClockView">
        <attr name="clockColor" format="color"/>
        <attr name="defaultScaleColor" format="color"/>
        <attr name="particularlyScaleColor" format="color"/>
        <attr name="hourPointerColor" format="color"/>
        <attr name="minutePointerColor" format="color"/>
        <attr name="secondPointerColor" format="color"/>
    </declare-styleable>

对应：

// 时钟颜色、默认刻度颜色、时刻度颜色、时针颜色、分针颜色、秒针颜色
    private int mClockColor,mColorDefaultScale,mColorParticularyScale,mColorHourPointer,
            mColorMinutePointer, mColorSecondPointer;

GitHub地址代码下载

好了，这是自定义View系列的第一篇博文，后面会继续这方面的博文，共勉！

Android 自定义View之：时钟控件

首先，按需求分析思路：

绘制步骤

其他操作

接下来按步骤绘制：

我们先看onDraw方法中我们的操作，这里对应我们上面说的步骤：

绘制圆圈和刻度

绘制文字：

绘制指针：

其他操作

开启计时

适配不同大小：

自定义属性值

猜你喜欢

热点阅读

Android 自定义View之： 时钟控件

首先，按需求分析思路：

绘制步骤

其他操作

接下来按步骤绘制：

我们先看onDraw方法中我们的操作，这里对应我们上面说的步骤：

绘制圆圈和刻度

绘制文字：

绘制指针：

其他操作

开启计时

适配不同大小：

自定义属性值

猜你喜欢

热点阅读

Android 自定义View之：时钟控件