自定义控件--时钟

先上效果图

效果图

先继承View,然后再写构造方法,构造方法里初始化画笔

public ClockView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);


        bigCiclePaint = new Paint();
        bigCiclePaint.setColor(Color.BLUE);
        bigCiclePaint.setStyle(Paint.Style.STROKE);
        bigCiclePaint.setStrokeWidth(34);

        smallCiclePaint = new Paint();
        smallCiclePaint.setColor(Color.RED);
        smallCiclePaint.setStyle(Paint.Style.FILL);

        calibrationPaint = new Paint();
        calibrationPaint.setColor(Color.BLUE);
        calibrationPaint.setStyle(Paint.Style.FILL);
        calibrationPaint.setStrokeWidth(20);

        numPaint = new Paint();
        numPaint.setColor(Color.RED);
        numPaint.setAntiAlias(true);
        numPaint.setTextAlign(Paint.Align.CENTER);
        numPaint.setTextSize(40);

        hourPaint = new Paint();
        hourPaint.setColor(Color.parseColor("#3F51B5"));
        hourPaint.setStrokeWidth(25);

        minutePaint = new Paint();
        minutePaint.setColor(Color.DKGRAY);
        minutePaint.setStrokeWidth(18);

        secondPaint = new Paint();
        secondPaint.setColor(Color.parseColor("#FF4081"));
        secondPaint.setStrokeWidth(11);
    }

解释：

• bigCiclePaint：画大表盘的画笔
• smallCiclePaint:画小圆心的画笔
• calibrationPaint:画12个刻度的画笔
• numPaint：画刻度下的数字的画笔
• hourPaint：小时的画笔
• minutePaint：分钟的画笔
• secondPaint：秒针的画笔

---

在onDraw方法里面画

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        calendar = Calendar.getInstance();
        int clockWidth = getWidth();
        cX=clockWidth/2;
        cY=clockWidth/2;
        bigRadius=(float) clockWidth/2-75;

        canvas.drawCircle(cX,cY,bigRadius,bigCiclePaint);//画大表盘
        canvas.drawCircle(cX,cY,30,smallCiclePaint);//画小圆心

//        canvas.save()方法和canvas.restore()方法都是成对出现的，这一点要注意。
        for (int i = 1; i <13 ; i++) {
            //在旋转之前保存画布状态
            canvas.save();
            canvas.rotate(i*30,cX,cY);//先画1点，从1到12
            canvas.drawLine(cX,cY-bigRadius+34/2,cX,cY-bigRadius+34/2+18,calibrationPaint);//画刻度
            //画刻度上数字,第三个参数表示文字的基准线
            canvas.drawText(i+"",cX,cY-bigRadius+34/2+18+50,numPaint);
            //恢复画布状态
            canvas.restore();
        }
        //获得当前小时
        int hour = calendar.get(Calendar.HOUR);
        int minute  = calendar.get(Calendar.MINUTE);
        int second  = calendar.get(Calendar.SECOND);
//        Log.d("alan","hour----->"+hour);
//        Log.d("alan","minute--->"+minute);
        Log.d("alan","second--->"+second);
        float hourDegree=((float)minute/60+hour)*30;//画时针时画布应该旋转的度数
//        Log.d("alan","(float)minute/60---->"+(float)minute/60);
//        Log.d("alan","hourDegree--->"+hourDegree);
        canvas.save();
        canvas.rotate(hourDegree,cX,cY);//旋转画布准备画时针
        canvas.drawLine(cX,cY-200,cX,cY,hourPaint);//画时针
        canvas.restore();//重置画布

//        canvas.save();
        float minuteDegree=((float)minute)/60*360;//画分针时画布应该旋转的度数
//        Log.d("alan","minuteDegree--->"+minuteDegree);
        canvas.rotate(minuteDegree,cX,cY);
        canvas.drawLine(cX,cY-250,cX,cY,minutePaint);
        canvas.restore();

        float secondDegree=((float)second)/60*360;//画秒针时画布应该旋转的度数
//        Log.d("alan","secondDegree--->"+secondDegree);
        canvas.rotate(secondDegree,cX,cY);//这里是顺时针旋转
        canvas.drawLine(cX,cY-300,cX,cY,secondPaint);
        canvas.restore();

        postInvalidateDelayed(1000);//每1秒钟重绘一次
    }

这样就完成了自定义控件的制作，然后在布局中引用就行了

代码已经上传到我的GitHub上，如果喜欢的话，不妨Star一下，我GitHub上别的项目也可以关注下。
代码地址
我的GitHub地址