Android项目杰尼杰尼（极简番茄工作法）的学习准备之Android时钟

这是一篇学习笔记，因为期末项目的杰尼杰尼（极简番茄工作法），为了实现其中的番茄钟功能，学习了如何实现Android时钟。

Android时钟

先来看看实现效果的动图。

需求分析

首先，来看一张我家里的时钟的照片，以此确定好需求分析，我们需要：
1.一个圆形的表盘；
2.有大的12个刻度，每个大刻度下有五个小刻度；
3.有三根长短不一的针，最短的

绘制过程

1.绘制出大圆盘作为时钟的表盘
2.绘制出四个重要刻度点的数字
3.绘制三根指针

其他步骤

1.做自适应
2.自定义时钟属性
3.开启计时

实现过程

那么开始具体的实现过程，使用**ondraw（）**方法来实现绘制过程。

    @Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);// 坐标原点移动到View 中心canvas.translate(mCenterX, mCenterY);// 绘制时钟的圆形和刻度drawCircle(canvas);// 绘制特殊时刻（12点、3点、6点、9点)的数字drawText(canvas);// 绘制指针drawPointer(canvas);}

1.绘制时钟的圆形和刻度

/*** 绘制时钟的圆形和刻度*/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.画刻度线时，分为两种，一种的普通刻度线，也就是每分钟的刻度线；另一种就是每小时的刻度线，也就是每隔5歌绘制一个特俗刻度线。
2.采用canvas.drawCircle(0, 0, mRadius, mDefaultPaint);来画圆。
3.因为一圈是360度，一共有60分钟，所以每个刻度线就是6度；则采用canvas.rotate(6)旋转6度来绘制刻度线。

2.绘制特殊时刻（12点、3点、6点、9点)的数字

    /*** 绘制特殊时刻（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);}

总结：

1.因为屏幕显示的大小问题，为了美观所以就只选取了12点，3点，6点，9点这四个特殊刻度来绘制数字。
2.使用anvas. drawText(String text, float x, float y,Paint paint)来绘制数字

绘制指针

绘制指针有三个部分，时针，分针，秒针；
在 drawPointer(Canvas canvas)里调用drawHourPointer(canvas); drawMinutePointer(canvas)； drawSecondPointer(canvas);来分别绘制时针，分针，秒针。

指针

    /*** 绘制指针*/private void drawPointer(Canvas canvas) {drawHourPointer(canvas);drawMinutePointer(canvas);drawSecondPointer(canvas);mPointerPaint.setColor(mClockColor);// 绘制中心原点，需要在指针绘制完成后才能绘制canvas.drawCircle(0, 0, mPointRadius, mPointerPaint);}

时针

    /*** 绘制时针*/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);}

总结：

1.绘制时针时，应该绘制出时针的具体位置，而不是例如5点30分时，时针指在5的刻度线上，而是要让时针跟着秒针的移动而移动。
2.所以，通过当前时间来计算出指针与x轴的角度，从而计算出具体的坐标值。
3.使用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);}

总结：

同理与时针的绘制，就不阐述了。

时针的自适应

    @Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int width = getMeasureSize(true, widthMeasureSpec);int height = getMeasureSize(false, heightMeasureSpec);setMeasuredDimension(width, height);}/*** 获取View尺寸* 基本上算是标准写法** @param isWidth 是否是width，不是的话，是height*/private int getMeasureSize(boolean isWidth, int measureSpec) {int result = 0;int specSize = MeasureSpec.getSize(measureSpec);int specMode = MeasureSpec.getMode(measureSpec);switch (specMode) {case MeasureSpec.UNSPECIFIED:if (isWidth) {result = getSuggestedMinimumWidth();} else {result = getSuggestedMinimumHeight();}break;case MeasureSpec.AT_MOST:if (isWidth)result = Math.min(specSize, mWidth);elseresult = Math.min(specSize, mHeight);break;case MeasureSpec.EXACTLY:result = specSize;break;}return result;}

    @Overrideprotected 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;// 中心点半径=（默认刻度宽+特殊刻度宽）/2mPointRadius = (mDefaultScaleWidth + mParticularlyScaleWidth) / 2;}

总结：

1.使用onMeasure(int widthMeasureSpec, int heightMeasureSpec)，来测量出尺寸。
2.时针的尺寸，默认时钟刻度长=半径/10，默认时钟刻度宽=长/6;
3.特殊时刻，特殊时钟刻度长=半径/5，特殊时钟刻度宽=长/6;
4.时针，时针长=半径/3，时针宽=特殊时钟刻度宽;
5.分针，分针长=半径/2，分针宽=特殊时钟刻度宽;
6.秒针，秒针长=半径/3*2，秒针宽=默认时钟刻度宽;
7.中心点半径，中心点半径=（默认刻度宽+特殊刻度宽）/2；

自定义时钟属性

通过attr.xml来自定义时钟属性

<?xml version="1.0" encoding="utf-8"?>
<resources><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>
</resources>

    private void getAttrs(Context context, AttributeSet attrs) {TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ClockView);mClockColor = a.getColor(R.styleable.ClockView_clockColor, Color.GRAY);mColorDefaultScale = a.getColor(R.styleable.ClockView_defaultScaleColor, mClockColor);mColorParticularyScale = a.getColor(R.styleable.ClockView_particularlyScaleColor, mClockColor);mColorHourPointer = a.getColor(R.styleable.ClockView_hourPointerColor, Color.BLACK);mColorMinutePointer = a.getColor(R.styleable.ClockView_minutePointerColor, Color.BLACK);mColorSecondPointer = a.getColor(R.styleable.ClockView_secondPointerColor, mClockColor);}

通过background设置时钟的背景

android:background="#FFFAF0"

总结：

1.使用mClockColor = a.getColor(R.styleable.ClockView_clockColor, Color.GRAY);来设置时钟的画笔颜色为灰色。
2. mColorHourPointer = a.getColor(R.styleable.ClockView_hourPointerColor, Color.BLACK)； mColorMinutePointer = a.getColor(R.styleable.ClockView_minutePointerColor, Color.BLACK);设置时针和分针的颜色为黑色

开启计时

    /*** 开始计时*/private void startTime() {new Thread(new Runnable() {@Overridepublic 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;}

总结：

1.因为时钟是动态的，每秒都在变化，所以使用线程来不断的刷新当前的view。
2.通过int hour = calendar.get(Calendar.HOUR);int minute = calendar.get(Calendar.MINUTE);int second = calendar.get(Calendar.SECOND);来获取当前的系统时间，其中hour要转换成12进制的。
3.在构造方法中调用startTime()方法。

整体总结

通过这次Android时钟的学习，让我为期末大实验的项目杰尼杰尼（极简番茄工作法）的完成有了更大的信心。随着之后的深入学习，我觉得我的项目会圆满实现的。

作者：庄超 原文地址