仿时钟表盘自定义view

前言：又到了周六好像不写点东西对不起自己~~ 所以呢，又写了一个自定义view，之前也有看过类似时钟表盘的view,所以呢就试着取写了一个，并对其中部分的api加以分析，希望对初学者能对初学者又所帮助，同时也希望如果发现有错误的地方，或者有更好的解决方法我们能一起讨论。

github：点击打开链接

微博:点击打开链接

邮箱:icuihai@gmail.com

有图有真相：

我

概述：自定义view大概分为三种，我们今天用到的是继承view实现绘制控件，那么具体怎么实现呢？

1，在res/values文件夹下新建attrs文件，然后写具体的属性，比如颜色，长度等等；

2，在xml布局文件中引用这些属性，我们可以看到谷歌源码自带的控件命名空间是这样  xmlns:android="http://schemas.android.com/apk/res/android

我们只需复制过来然后把"android"换成app或者其他就行，在我们的自定义空间中引用即可：

3，新建一个类继承view，重写构造方法，onDraw方法，如果有需要重写onLayout,onMeasure等方法，这三个方法分别什么意思呢？

onDraw主要是绘制控件。onLayout控制控件所处于的位置，onMeasure控制该控件的大小

4，没了......

基本使用：

好了废话不多说，那么我们先来分析一下这个控件应该怎么写？

1，先绘制圆圈，刻度，然后这样就可以确定该控件的位置，

2，绘制表盘外围的数字，

3，绘制时针，分针，秒针，Logo等

一，构造方法

自定义属性这里呢，我采用的是另外一种方式在代码中设置，当然在xml文件中更好不过了。

public MyView(Context context) {
        this(context, null);
    }

    public MyView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MyView, defStyleAttr, 0);
        //获取到xml属性
        color = typedArray.getColor(R.styleable.MyView_MyView_color, CIRCLE_COLOR);//表圈颜色
        radius = typedArray.getFloat(R.styleable.MyView_MyView_radius, CIRCLE_RADIUS);//半径
        typedArray.recycle();
    }

二，onDraw()方法

protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        BiaoPan(canvas);//画表盘
        Logo(canvas);//画logo
        Time(canvas);//画数字时间
        Degree(canvas);//画刻度
        HourText(canvas);//画表盘外围的数字

	Handler.sendEmptyMessage(HANDLER_MSG);
        /**
         * 在画指针的时候要使用save()方法河restore()方法保存当前的状态，因为如果不这样做的话，
         * 比如当秒针运动的时候分针也会运动，因为他们在同一块画布上，所以这里要使用这两种方法保证互不干扰，
         * */
        canvas.save();
        hour(canvas);//画时针
        canvas.restore();

        canvas.save();
        minutes(canvas);//画分针
        canvas.restore();

        canvas.save();
        second(canvas);//画秒针
        canvas.restore();

        Point(canvas);//画中间小点

    }

我这里呢为了简洁把绘制的每一个模块都封装了成了方法，是不是感觉瞬间清晰了许多呢。在这里呢，注意看的话会看出来在绘制时针等的时候用到了save(),和restoe（）方法，这是因为他们三个的位置是游走的，不是说i想多固定的，所以不能在一块画布上绘制，

三，画刻度

private void Degree(Canvas canvas) {
        //画刻度
        mDegreePaint = new Paint();
        mDegreePaint.setAntiAlias(true);
        mDegreePaint.setStrokeWidth(2);
        int counts = 60;
        for (int i = 0; i < counts; i++) {
            if (i % 5 == 0) {
                String hour = String.valueOf(i / 5);//小时刻度
                canvas.drawLine(0, radius, 0, radius - 20, mDegreePaint);
             /* if (i%5==0&&i!=0){
                  canvas.drawText(hour,-5,-120, mDegreePaint);
              }else if (i==0){
                  canvas.drawText("12",-10,-120, mDegreePaint);
              }*/
            } else {
                canvas.drawLine(0, radius - 10, 0, radius, mDegreePaint);
            }
            canvas.rotate(360 / counts, 0f, 0f);
        }
    }

我们通过分析得知，表盘上总共有60个刻度，并且每个5个短刻度有一个长刻度，所以判断是否是5的余数，是则长，不是则短，最后旋转相应的角度。上面的120是一个大概的位置，因为我设置的表盘的半径是200

四，画表盘外围的数字

private void HourText(Canvas canvas) {
        mHourTextPaint = new Paint();
        mHourTextPaint.setStrokeWidth(2);
        mHourTextPaint.setAntiAlias(true);
        mHourTextPaint.setTextSize(16);
        mHourTextPaint.setColor(Color.DKGRAY);
        mHourTextPaint.setTextAlign(Paint.Align.CENTER);//中心
        float textSize = (mHourTextPaint.getFontMetrics().bottom - mHourTextPaint.getFontMetrics().top);//文字高度
        float distance = radius - 30;
        float a, b;//坐标
        for (int i = 0; i < 12; i++) {
            a = (float) (distance * Math.sin(i * 30 * Math.PI / 180));
            b = (float) (distance * Math.cos(i * 30 * Math.PI / 180));
            if (i == 0) {
                canvas.drawText("12", a, -b + textSize / 3, mHourTextPaint);
            } else {
                canvas.drawText(String.valueOf(i), a, -b + textSize / 3, mHourTextPaint);
            }
        }

    }

首先我们取文字的高度，通过三角函数得出每个点的x,y坐标，然后每格30度绘制，
五，画秒针（其他两个省略）

 private void second(Canvas canvas) {
        //画秒针
        mSecondPaint = new Paint();
        mSecondPaint.setStrokeWidth(2);
        mSecondPaint.setAntiAlias(true);//设置抗锯齿
        mSecondPaint.setColor(Color.GREEN);
        mSecondPaint.setStyle(Paint.Style.FILL);
        canvas.rotate(mSecond * 6, 0, 0);
        canvas.drawLine(0, 30, 0, -(radius - 40), mSecondPaint);

    }

还有个关于时间的换算

Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {
                case HANDLER_MSG:
                    invalidate();
                    long time = System.currentTimeMillis();
                    mSecond = time / 1000 % 60;
                    mMinutes = (time / 1000 / 60 % 60);
                    mHour = ((time / 1000 / 60 / 60 + 8) % 12);
                    break;
            }
        }
    };

六，onMeasure()方法

首先声明一下，这个方法可写可不写，要看具体情况，具体的我在代码中都做了详细的注释。

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(measureWidth(widthMeasureSpec), measureHeight(heightMeasureSpec));
    }

    //设置控件的宽
    private int measureWidth(int widthMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        if (widthMode == MeasureSpec.EXACTLY) {
            widthResult = widthSize;//当我们在xml文件中对宽做了具体的数值时，即EXACTLY模式下，宽度直接取值我们所规定的大小
        } else {
            widthResult = 400;//默认的宽度
            if (widthMode == MeasureSpec.AT_MOST) {
                widthResult = Math.min(widthResult, widthSize);
                /** 如果指定AT_MOST模式下，，则需要取我们设定的值和测得的值的的最小值，比如这里我们可以设置widthResult的值为2000，
                 如果不写这句的话，我们在屏幕中肯定的就看不到我们写的控件了，*/
            }
        }
        return widthResult;
    }

    private int measureHeight(int heightMeasureSpec) {
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        if (heightMode == MeasureSpec.EXACTLY) {
            heightResult = heightSize;
        } else {
            heightResult = 600;
            if (heightMode == MeasureSpec.AT_MOST) {
                heightResult = Math.min(heightResult, heightSize);
            }
        }
        return heightResult;
    }

如果你觉得这篇文章对你有所帮助，请点个赞，完整代码我放在了github上，希望给个star，谢谢

点击打开链接