Android自定义View绘制时钟（一）

缺乏、安全感 2022-01-17 03:09 581阅读 0赞

# [GitHub地址][GitHub] #

### 练手第一版，实现效果： ###

> 1.  实现表盘刻度以及数字显示
> 2.  实现时分秒针的联动
> 3.  实现时分秒定位

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70]

# 实现步骤 #

1.  初始化刷子
2.  设置定时器，每秒刷新一次时分秒针的角度
3.  绘制表盘
4.  绘制时分秒针
5.  绘制表盘刻度
6.  绘制表盘数字
7.  手动设置时间

### 1. 初始化刷子 ###

private Paint mPaint;//通用的刷子
    private void setInit(){ 
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mPaint.setStyle(Paint.Style.STROKE); // 设置空心
            mPaint.setStrokeCap(Paint.Cap.ROUND);//作用于圆环结尾（圆润）
            mPaint.setColor(getContext().getResources().getColor(android.R.color.black));
            mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度
            mPaint.setAntiAlias(true); // 消除锯齿
            mPaint.setTextSize(100);//设置字体
            mPaint.setTextAlign(Paint.Align.CENTER);//设置居中
            ...
    }

### 2. 设置定时器，每秒刷新一次时分秒针的角度 ###

private int mProgressSecond = 0;//秒进度
    private int mProgressMin = 0;//分进度
    private int mProgressHour = 0;//时进度
    private void setInit(){ 
    		...
    		// 绘图线程
            new Thread() { 
                public void run() { 
                    while (true) { 
                        mProgressSecond +=6;//秒针每秒跳动6度
                        if (mProgressSecond == 360) { 
                            mProgressSecond = 0;
                            mProgressMin +=6;//秒针每转一圈分针跳动6度
                            if(mProgressMin == 360){ 
                                mProgressMin = 0;
                                mProgressHour += 30;//分针每转一圈，时针跳30度
                            }
                        }
                        postInvalidate();//刷新view
                        try { 
                            Thread.sleep(1000);//每秒循环一次
                        } catch (InterruptedException e) { 
                            e.printStackTrace();
                        }
                    }
                }
            }.start();
    }

### 3. 绘制表盘 ###

private int mCircleWidth = 50;//圆环的宽度
    @Override
    protected void onDraw(Canvas canvas) { 
            int centre = getWidth() / 2; // 获取圆心的x坐标
            int radius = centre - mCircleWidth / 2;// 半径减去圆环宽度的一半
            //圆心的xy坐标
            float xCenter = centre;
            float yCenter = centre;
            mPaint.setStyle(Paint.Style.STROKE);// 共用一个刷子，需要每次都先设置实心
            /** * 画表框 * */
            mPaint.setColor(getResources().getColor(R.color.back_ground)); // 设置圆环的颜色
            canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环（空心圆）
    }

### 4.绘制时分秒针 ###

/** * 计算指针的真实角度（默认0度不在正上方） * */
    private int getProgress(int progress){ 
        return progress<0?progress+270:progress-90;
    }
     		/** * 画时针 * */
            mPaint.setColor(getResources().getColor(R.color.hour_color)); // 设置时针的颜色
            int progressHour = getProgress(mProgressHour);//计算出来时针的真实角度
            int lengthHour = radius/4;//时针长度
            //时针的终点坐标
            float xHour   = (float) (xCenter + lengthHour * cos(progressHour * 3.14 /180));
            float yHour   = (float) (yCenter + lengthHour * sin(progressHour * 3.14 /180));
            canvas.drawLine(xCenter,yCenter, xHour,yHour, mPaint);
            /** * 画分针 * */
            mPaint.setColor(getResources().getColor(R.color.min_color)); // 设置分针的颜色
            int progressMin = getProgress(mProgressMin);//计算出来分针的真实角度
            int lengthMin = radius/3;//分针长度
            //分针的终点坐标
            float xMin   = (float) (xCenter + lengthMin * cos(progressMin * 3.14 /180));
            float yMin   = (float) (yCenter + lengthMin * sin(progressMin * 3.14 /180));
            canvas.drawLine(xCenter,yCenter, xMin,yMin, mPaint);
            /** * 画秒针 * */
            mPaint.setColor(getResources().getColor(R.color.second_color)); // 设置秒针的颜色
            int progressSecond = getProgress(mProgressSecond);//计算出来秒针的真实角度
            int lengthSecond = radius/2;//秒针长度
            //秒针的终点坐标
            float xSecond   = (float) (xCenter + lengthSecond * cos(progressSecond * 3.14 /180));
            float ySecond   = (float) (yCenter + lengthSecond * sin(progressSecond * 3.14 /180));
            canvas.drawLine(xCenter,yCenter, xSecond,ySecond, mPaint);

### 5. 绘制表盘刻度 ###

mPaint.setColor(getResources().getColor(R.color.back_ground)); // 设置刻度的颜色
            //十二个刻度
            for(int i = 0;i<12;i++){ 
                int start;//刻度开始的位置，0、3、6、9比较长，需要单独计算
                int end = radius;//刻度结束的位置为圆弧的终点
                if(i%3 == 0){ //0、3、6、9
                    start = radius/6*5;
                }else{ 
                    start = radius/10*9;
                }
                int a = i*30;//每个刻度的实际角度
                //开始结束点的XY坐标点
                float xStart   = (float) (xCenter + start * cos(a * 3.14 /180 ));
                float yStart   = (float) (yCenter + start * sin(a * 3.14 /180 ));
                float xEnd   = (float) (xCenter + end * cos(a * 3.14 /180 ));
                float yEnd   = (float) (yCenter + end * sin(a * 3.14 /180 ));
                canvas.drawLine(xStart,yStart, xEnd,yEnd, mPaint);
                ...
    		}

### 6. 绘制表盘数字 ###

/** * 绘制数字 * */
                int radiusNum = radius/3*2;//数字所占的圆弧的半径
                float xNum = (float) (xCenter + radiusNum * cos(a * 3.14 /180 ));
                //todo 实际位置偏上30个像素单位左右
                float yNum = 30+(float) (yCenter + radiusNum * sin(a * 3.14 /180 ));
                int num;//计算显示的数字
                if(i<10){ 
                    num = i+3;
                }else{ 
                    num = i-9;
                }
                mPaint.setStyle(Paint.Style.FILL);// 设置实心
                canvas.drawText(String.valueOf(num),xNum,yNum, mPaint);

### 7. 手动设置时间 ###

//根据传过来的时分秒，来确定时分秒针的角度
    public void setTime(int hour,int min,int second){ 
          if(hour>12) hour -=12;
          this.mProgressHour = 30*hour;
          this.mProgressMin = 6*min;
          this.mProgressSecond = 6*second;
    }

### 遗留问题： ###

> 1.  表盘数字不居中
> 2.  时分秒联动不平滑

### 解决问题：[Android自定义View绘制时钟（二）][Android_View] ###

[GitHub]: https://github.com/yangshuaionline/YsAndroid
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70]: /images/20220117/c35a55e1ba054376b2cb7aaca4d99c51.png
[Android_View]: https://blog.csdn.net/yangshuaionline/article/details/91865949