Android自定义View——实现时钟效果

时间：2023-02-09 08:15:44

看《Android群英传》这本书籍中讲到了自定义View出于对自定义的喜欢，也就自己动手画了个时钟，废话不多说直接看效果图

1.效果图

Android自定义View——实现时钟效果

2.实现思路

  1. 创建一个类继承View，并添加构造方法
  2. 定义画笔，并设置相应参数，确定圆的半径
  3. 计算各个关键点的坐标
  4. 什么都弄好了直接干

3.首先介绍几个这里重点使用的方法

//将之前所绘制的图形保存起来，然后后续的操作就好像在一个新的图层上操作一样，与ps的图层基本一致
canvas.save();

//将x y轴坐标绕着(x,y)坐标点顺时针旋转angle°。angle为负数则逆时针旋转
canvas.rotate(angle, x, y);

//可以理解为PhotoShop中的合并图层操作，将save之前的图像与save之后的合并
canvas.restore();

4.这里我定义了5个画笔,并初始化(初始化代码太多了就不贴了直接看我源码就知道了)

    //外圆画笔
private Paint paint;
//文字画笔
private Paint paintNum;
//时钟画笔
private Paint paintHour;
//分钟画笔
private Paint paintMinute;
//秒钟画笔
private Paint paintSecond;
//外圆圆心
private float x, y;
//外圆半径
private int r;

5.重写onMeasure函数来得到我们view所在布局中的大小

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int height = getMeasuredHeight();
int width = getMeasuredWidth();
        x = width / 2;
        y = height / 2;
//圆的半径即为view宽度的一半，在减5会使得边缘好看些
        r = (int) x - 5;
    }

6.准备工作做好了，我们就可以重写onDraw函数来进行绘制了

  1. 先来绘制外圆和圆心，也就是最简单的部分
//绘制外圆
canvas.drawCircle(x, y, r, paint);
//绘制圆心
canvas.drawCircle(x, y, 15, paintMinute);
  1. 现在我们就来绘制刻度了，观察效果图我们知道，每个整点的刻度都是比其它的粗一些。这里最重要的就是canvas.rotate();将x，y轴旋转，不然我们很难计算每一个刻度的坐标点
    /**
 * 绘制时钟刻度和分钟刻度
 *
 * @param canvas 画布
 */
private void drawLines(Canvas canvas) {
for (int i = 0; i < 60; i++) {
if (i % 5 == 0) {
//绘制整点刻度
                paint.setStrokeWidth(8);
                canvas.drawLine(x, y - r, x, y - r + 40, paint);    
            } else {
//绘制分钟刻度
                paint.setStrokeWidth(3);
                canvas.drawLine(x, y - r, x, y - r + 30, paint);
            }
//绕着(x,y)旋转6°
            canvas.rotate(6, x, y);
        }
    }
  1. 先来绘制整点刻度，这里使用三角函数进行坐标计算
    /**
 * 绘制整点数字
 *
 * @param canvas 画布
 */
private void drawText(Canvas canvas) {
// 获取文字高度用于设置文本垂直居中
float textSize = (paintNum.getFontMetrics().bottom - paintNum.getFontMetrics().top);
// 数字离圆心的距离,40为刻度的长度,20文字大小
int distance = r - 40 - 20;
// 数字的坐标(a,b)
float a, b;
// 每30°写一个数字
for (int i = 0; i < 12; i++) {
            a = (float) (distance * Math.sin(i * 30 * Math.PI / 180) + x);
            b = (float) (y - distance * Math.cos(i * 30 * Math.PI / 180));
if (i == 0) {
                canvas.drawText("12", a, b + textSize / 3, paintNum);
            } else {
                canvas.drawText(String.valueOf(i), a, b + textSize / 3, paintNum);
            }
        }
    }

7. 接下来就是绘制 时/分/秒 的指针了，这里同样我们也用旋转画布的方式来做，首先我们来分析一下：每个刻度的角度是6°，所以秒针走的角度=second * 6；分针走的角度=minute * 6+second/10(秒针走了半圈，分针也要走一半)；时针走过的角度=hour * 30 + minute / 2,这里为什么要这样写呢？原因就是分针每走30分钟，时针就应该在两个整点之间！理清了逻辑就好动手了

8.一顿猛干，直接看注释就清楚了

    /**
 * 获取当前系统时间
 *
 * @param canvas 画布
 */
    private void initCurrentTime(Canvas canvas) {
//获取系统当前时间
        SimpleDateFormat format = new SimpleDateFormat("HH-mm-ss");
        String time = format.format(new Date(System.currentTimeMillis()));
        String[] split = time.split("-");
int hour = Integer.parseInt(split[0]);
int minute = Integer.parseInt(split[1]);
int second = Integer.parseInt(split[2]);
//时针走过的角度
int hourAngle = hour * 30 + minute / 2;
//分针走过的角度
int minuteAngle = minute * 6 + second / 10;
//秒针走过的角度
int secondAngle = second * 6;

//绘制时钟,以12整点为0°参照点
canvas.rotate(hourAngle, x, y);
canvas.drawLine(x, y, x, y - r + 150, paintHour);
canvas.save();
canvas.restore();
//这里画好了时钟，我们需要再将画布转回来,继续以12整点为0°参照点
canvas.rotate(-hourAngle, x, y);

//绘制分钟
canvas.rotate(minuteAngle, x, y);
canvas.drawLine(x, y, x, y - r + 60, paintMinute);
canvas.save();
canvas.restore();
//这里同上
canvas.rotate(-minuteAngle, x, y);

//绘制秒钟
canvas.rotate(secondAngle, x, y);
canvas.drawLine(x, y, x, y - r + 20, paintSecond);
    }

9.然后就是在onDraw函数中每隔1spostInvalidateDelayed(1000);刷新界面，这样时钟效果也就出来了，最后送上传送门

标签：

相关文章