android繪製一個動態時鐘的view

android繪製一個動態時鐘的view。

項目中需要在240x240分辨率的設備上，開發一個時鐘。

注意幾點：

1、canvas.save();和canvas.restore(); 成對出現。

2、鐘錶的心，最後畫，樣子好看。

代碼中的註釋寫的很詳細，直接上代碼。

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;
import androidx.annotation.RequiresApi;

import java.util.Calendar;
 
public class ClockView extends View {
 
    private Paint hourPaint;//繪製時針的畫筆
    private Paint minPaint;//繪製分針的畫筆
    private Paint secPaint;//繪製秒針的畫筆
 
    public ClockView(Context context) {
        super(context);
    }
 
    public ClockView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }
 
    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint();
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(3);
        paint.setColor(Color.BLACK);
 
        int width = 120;//鐘錶的圓心X軸座標
        int heigth = 120;//鐘錶的圓心Y軸座標
        int radius = 110;//鐘錶的半徑
 
//        canvas.drawCircle(width, heigth, radius, paint);


//        //畫小刻度
//        for (int i = 0; i < 60; i++) {
//            canvas.save();//保存當前的狀態
//            //1:旋轉的角度 2.旋轉中心的X軸座標 3.旋轉中心的Y軸座標
//            canvas.rotate(i * 6, width, heigth);
//            //畫刻度線 相當於250,50,250,55
//            canvas.drawLine(width, heigth - radius, width, heigth - radius + 5, paint);
//            canvas.restore();//返回初始保存的狀態
//        }


        //畫大刻度
        for (int i = 1; i < 13; i++) {
            canvas.save();//保存當前的狀態
            //1:旋轉的角度 2.旋轉中心的X軸座標 3.旋轉中心的Y軸座標
            canvas.rotate(i * 30, width, heigth);
            //畫刻度線 相當於250,50,250,65
            if(i==3||i==6||i==9||i==12){
                paint.setColor(Color.RED);
            }else {
                paint.setColor(Color.BLACK);
            }
            canvas.drawLine(width, heigth - radius, width, heigth - radius + 15, paint);
            canvas.restore();//返回初始保存的狀態
        }
        paint.setColor(Color.BLACK);


        paint.setColor(Color.BLACK);
        paint.setTextSize(25);
        paint.setStrokeWidth(3);
 
        //寫數字
//        for (int i = 3; i < 13; i= i+3) {
//            canvas.save();//保存當前的狀態
//            //1:旋轉的角度 2.旋轉中心的X軸座標 3.旋轉中心的Y軸座標
//            canvas.rotate(i * 30, width, heigth);
//            //寫數字 相當於250,50,250,65
//            canvas.drawText(i + "", width - 5, heigth - radius + 50, paint);
//            canvas.restore();//返回初始保存的狀態
//        }
 
 
        //時針畫筆樣式
        hourPaint = new Paint();
        hourPaint.setColor(Color.BLACK);
        hourPaint.setStyle(Paint.Style.FILL);
        hourPaint.setStrokeWidth(6);
 
        //分針畫筆樣式
        minPaint = new Paint();
        minPaint.setColor(Color.GRAY);
        minPaint.setStyle(Paint.Style.FILL);
        minPaint.setStrokeWidth(5);
 
        //秒針畫筆樣式
        secPaint = new Paint();
        secPaint.setColor(Color.RED);
        secPaint.setStyle(Paint.Style.FILL);
        secPaint.setStrokeWidth(3);
 
        //獲取系統時間
        Calendar calendar = Calendar.getInstance();
        int hour = calendar.get(Calendar.HOUR);
        int minute = calendar.get(Calendar.MINUTE);
        int second = calendar.get(Calendar.SECOND);
 
        //畫時針
        canvas.save();
        //畫布的旋轉,參數1:旋轉的角度 2:圍繞着旋轉的點進行旋轉的X軸座標 3:Y軸座標
        //第一個參數:就比如4:30 時針的偏移角度
        // 4*30=120表示四點的時候時針在鐘錶的這個角度的位置
        // 30分/60表示佔據的百分比 然後再*30 就是三十分鐘佔一刻(30度)的多少角度
        canvas.rotate(hour * 30 + minute / 60 * 30, width, heigth);
        canvas.drawLine(width, heigth + 40, width, heigth - 60, hourPaint);
        canvas.restore();
 
        //畫分針
        canvas.save();
        //分針每走一分都走6度
        canvas.rotate(minute * 6, width, heigth);
        canvas.drawLine(width, heigth + 30, width, heigth - 80, minPaint);
        canvas.restore();
 
        //畫秒針
        canvas.save();
        //時針每走一分都走6度
        canvas.rotate(second * 6, width, heigth);
        canvas.drawLine(width, heigth + 20, width, heigth - 110, secPaint);
        canvas.restore();

        //畫鐘錶的心
        Paint centerPaint = new Paint();
        centerPaint.setColor(Color.BLACK);
        centerPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(width, heigth, 5, centerPaint);


        invalidate();//重複調用ondraw的方法,不斷的繪製,使用時鐘呈現出走動的效果
    }
}

效果圖：

更多工具，見公衆號。