自定义View基础篇——表盘

自定义控件——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