Android初级进阶之自定义时钟(一) 有更新!

  aohanyao

前言

一直以为仪表盘,时钟之类的非常的难,不敢去触摸这个领域。真正接触了才发现不过如此。

技术要点

  1. cancvas
    1. Cancvas.save() 保存画布
    2. Cancvas.restore() 合并画布
    3. Cancvas.translate() 切换x,y坐标点
    4. Cancvas.rotate() 旋转画布
    1. 自定义View相关的知识
      1. Measure

目标

实现静态的时钟UI

效果图

1.测量

测量View的宽度与高度,因为是画一个圆形的时钟,所以View取得是高度与宽度的最小值,一下是测量方法


    private int measureSize(int spec) {
        int result;
        int size = MeasureSpec.getSize(spec);//获取大小
        int mode = MeasureSpec.getMode(spec);//获取模式
        if (mode == MeasureSpec.EXACTLY) {
            result = size;
        } else {
            result = 100;
            if (mode == MeasureSpec.AT_MOST) {
                result = Math.min(result, size);
            }
        }
        return result;
    }

	@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        mCircleWidth = Math.min(measureSize(heightMeasureSpec), measureSize(widthMeasureSpec));
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

2.绘制最外层的圆

	//外部圆
    Paint paintCircle = new Paint();
    paintCircle.setStyle(Paint.Style.STROKE);//圆环
    paintCircle.setAntiAlias(true);//抗锯齿
    paintCircle.setStrokeWidth(5);//圆环宽度
    canvas.drawCircle(mCircleWidth / 2, mCircleWidth / 2, mCircleWidth / 2 - 20/*减去20的原因是中心点留白*/, paintCircle);

3.绘制刻度线与刻度值

绘制刻度线与刻度值是最大的难点,在这里就是利用了Canvas为我们提供的rotate方法,顾名思义,就是旋转画布。我们以视图坐标系 x y 进行绘制,没绘制完成一次,旋转相应的角度就完成了刻度线的绘制。玩过PS的人应该好理解。


    //刻度线
    Paint paintDegree = new Paint();
    paintDegree.setStrokeWidth(3);
    for (int i = 0; i < 60; i++) {
        if (i % 5 == 0) {
            paintDegree.setStrokeWidth(5);// 小时
            paintDegree.setTextSize(30);
            canvas.drawLine(mCircleWidth / 2, 20/*绘制外圆减去的值*/, mCircleWidth / 2, 60/*刻度线的长度*/, paintDegree);
            String degree = "12";
            if (i != 0)
                degree = String.valueOf(i / 5);
            canvas.drawText(degree, mCircleWidth / 2 - paintDegree.measureText(degree) / 2, 90/*字体的高度*/, paintDegree);
        } else {
            paintDegree.setStrokeWidth(3);//秒
            paintDegree.setTextSize(15);
            canvas.drawLine(mCircleWidth / 2, 20/*绘制外圆减去的值*/, mCircleWidth / 2, 30/*刻度线的长度*/, paintDegree);
            String degree = String.valueOf(i);
            canvas.drawText(degree, mCircleWidth / 2 - paintDegree.measureText(degree) / 2, 60/*字体的高度*/, paintDegree);
        }
        // 旋转六度,360度/60秒  以时钟的中心点进行旋转
        canvas.rotate(6, mCircleWidth / 2, mCircleWidth / 2);
    }

4. 绘制时分秒指针

    //画针
    Paint paintHour = new Paint();
    paintHour.setStrokeWidth(20);
    Paint paintMinute = new Paint();
    paintMinute.setStrokeWidth(10);
    Paint paintSecond = new Paint();
    paintSecond.setStrokeWidth(7);
    canvas.save();
    // 将 x y 点移到 中心
    canvas.translate(mCircleWidth / 2, mCircleWidth / 2);
    //float startX, float startY, float stopX, float stopY
    canvas.drawLine(0, 0, 100, 100/*暂时写死*/, paintHour);
    canvas.drawLine(0, 0, 100, 280, paintSecond);
    canvas.drawLine(0, 0, 100, 200, paintMinute);
    //合并 画布
    canvas.restore();

PS

Android初级进阶之自定义时钟(一)就到这里结束,原谅我的文学水平,没有过多的文字修饰。

Android初级进阶之自定义时钟(二):

  1. 完成时分秒指针的计算。
    1. 与系统时间进行同步,完成真正的时钟。

软广

来都来了,就给个关注吧,时不时会悄悄的推送一些小技巧的文章~~!
FullScreenDeveloper