自定义View基础篇——表盘

2023-01-09 11:36:15

自定义控件——Watch

纯手工制作,咱们不靠UI吃饭,靠的是软实力,吃的是软饭大笑,一言不合,就贴效果图,智能手表出定义:

我一直都认为,一个程序员最宝贵的是他的编程思想,工具类都是一样的,不一样的是你的思维;
很多程序员可能工作两三年,但是对自定义View都会有种不敢触摸的恐惧,其实看着简单的东西,实现起来依然简单,我今天要说的还是思路:
看着这个表,没有用任何图片,那么该去怎么实现它,首先上工具(用到的方法):
<span style="white-space:pre">	</span>/**
         * 1、绘制圆形(圆心的位置,半径,画笔)
         */
        canvas.drawCircle(0,0,100,paint);
        /**
         * 2、绘制矩形
         */
        RectF rect = new RectF(50, 50, 200, 200);
        canvas.drawRect(rect, paint);
        /**
         * 3、绘制文字,矩形区域,横坐标偏移量,纵坐标偏移量
         */
        canvas.translate(100,100);
        Paint textPaint = new Paint(paint);
        textPaint.setTextSize(25);
        textPaint.setStrokeWidth(1);
        textPaint.setColor(Color.RED);
        //这里的path指的是绘制的路径
        Path path = new Path();
        path.addArc(new RectF(0,0,200,200),-180,180);
        //hOffset 距离路径开始的距离
        //vOffset 离路径线的上下高度
        canvas.drawTextOnPath("http://www.pdm888.com",path,0,0,textPaint);
        //4、旋转坐标轴,顺时针,相当于画布逆时针旋转
        canvas.rotate(360);

四个工具类,分分钟实现:

第一步:初始化画笔:

private void initPaint() {
        paint = new Paint();
        paint.setColor(Color.rgb(30, 144, 255));
        paint.setStrokeCap(Paint.Cap.ROUND);//设置笔触风格为圆角
        paint.setStrokeJoin(Paint.Join.ROUND);//设置接洽处的风格为圆角
        paint.setStrokeWidth(3);
    }

第二步:画Watch:

private void drawWatch(Canvas canvas) {
        //设置抗锯齿
        paint.setAntiAlias(true);
        //设置画笔类型,这里是普通画笔
        paint.setStyle(Paint.Style.STROKE);
        //注意这一步之后我们的坐标原点处在最中心位置
        canvas.translate(canvas.getWidth() / 2, canvas.getHeight() / 2); //将位置移动画纸的坐标点
        canvas.drawCircle(0, 0, 200, paint); //画圆

        //使用path绘制路径文字
        canvas.save();//此刻原点在屏幕中心位置
        //canvas平移x轴-90,y轴160,绘制文字部分
        canvas.translate(-90, -160);
        Path path = new Path();
        path.addArc(new RectF(0, 0, 180, 180), -145, 145);
        Paint textPaint = new Paint(paint);
        textPaint.setTextSize(25);
        textPaint.setStrokeWidth(1);
        String text = "TWE-7300.com";
        canvas.drawTextOnPath(text, path, 0, 0, textPaint);
        canvas.restore();

        float y_Line = 200;
        int count = 60;
        for (int i = 60; i > 0; i--) {
            if (i % 5 == 0) {
                //在底部的位置绘制
                canvas.drawLine(0f, -y_Line, 0f, -(y_Line + 12f), paint);
                if (i == 30) {
                    //这里是为了避免6倒过来,变成了9,因为canvas有旋转
                    canvas.drawText(String.valueOf(9), -6f, -(y_Line + 25f), textPaint);
                } else {
                    canvas.drawText(String.valueOf(i / 5), -6f, -(y_Line + 25f), textPaint);
                }
            } else {
                canvas.drawLine(0f, -y_Line, 0f, -(y_Line + 5f), paint);
            }
            canvas.rotate(-(360 / count), 0f, 0f);//每一次绘制后,旋转坐标轴,再绘制,每次旋转都是相对上一次的位置
        }
        //绘制中心的三层圆形
        paint.setColor(Color.rgb(135, 206, 255));
        paint.setStrokeWidth(12);
//        canvas.drawArc(new RectF(-20, -20, 20, 20), 0, 360, true , paint);
        canvas.drawCircle(0, 0, 20, paint);
        paint.setStrokeWidth(5);
        paint.setColor(Color.rgb(30, 144, 255));
        //设置为实心,画圆
        paint.setStyle(Paint.Style.FILL);

        canvas.drawCircle(0, 0, 15, paint);
        paint.setColor(Color.BLUE);
        canvas.drawCircle(0, 0, 5, paint);
    }

第三步:画指针(指针里的小算法就不需要我解释了吧):

private void drawTime(Canvas canvas) {
        //时针,这里需要保存旋转前位置,绘制完,再恢复到原来位置
        canvas.save();
        //这里旋转的是坐标轴
        canvas.rotate((hour * 30 + minute / 60f * 30), 0f, 0f);
        canvas.drawLine(0, 0, 0, -140, paint);
        canvas.restore();
        //分针
        canvas.save();
        canvas.rotate((minute * 6 + sec /60f * 6), 0f, 0f);
        canvas.drawLine(0, 0, 0, -190, paint);
        canvas.restore();
        //秒针
        paint.setStrokeWidth(3);
        paint.setColor(Color.rgb(30, 144, 255));
        paint.setAntiAlias(true);
        canvas.save();
        canvas.rotate((sec * 6), 0f, 0f);
        canvas.drawLine(0, 30, 0, -190, paint);
        canvas.restore();
    }
三步搞定,工具是死的,人是活的,心动不如行动,你也来试试吧!
源码:CircleView
  • 作者:aiyh0202
  • 原文链接:https://blog.csdn.net/aiyh0202/article/details/52748216
    更新时间:2023-01-09 11:36:15