android 自定義 view 實現錶盤效果

第一步：畫一個簡單的圓

第二步：繪製刻度

第三步：繪製時,分,表指針

第四步：繪製當前時間文字

第五步：實現時間動態顯示

第一步畫一個圓是很簡單的,

package com.example.clockview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.ImageView;
/**
 * Created by Adminis on 2016/11/6.
 */
public class ClockView extends ImageView {
    private static final String TAG = "ClockView";
    private Paint mPaint;
    private int widhth = 200;//控件的寬度
    private int height = 200;//控件的高度
    private int padding = 5;
    public ClockView(Context context) {
        this(context, null);
    }
    public ClockView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public ClockView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(widhth, height);
    }
    private void initPaint() {
        mPaint = new Paint();
        mPaint.setStrokeWidth(3);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.parseColor("#666666"));
        mPaint.setAntiAlias(true);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        drawCircle(canvas);
    }
    /**
     * 繪製圓
     * @param canvas
     */
    private void drawCircle(Canvas canvas) {
         mPaint.setStyle(Paint.Style.STROKE);
         canvas.drawCircle(widhth/2,height/2,widhth/2-padding,mPaint);
    }
}

效果圖：

第二步：繪製刻度

/**
 * 繪製刻度
 * @param canvas
 */
private void drawScale(Canvas canvas) {
    mPaint.setStyle(Paint.Style.FILL);
    canvas.drawLine(widhth / 2 - padding, padding, widhth / 2 - padding, padding + 4 + 8, mPaint);
}

效果圖：

但是我們要畫類似這種圖：

一起要畫12個這個線,那就相當於每二根線之間的角度就是360/12=30度

分析如圖：

每換完一根線後畫布就旋轉30度

/**
 * 繪製刻度
 * @param canvas
 */
private void drawScale(Canvas canvas) {
    mPaint.setStyle(Paint.Style.FILL);
    for(int i=0;i<12;i++){
        if(i%3==0){//  12  3  6  9對應的線長點
            canvas.drawLine(widhth / 2 - padding, padding, widhth / 2 - padding, padding + 4 + 15, mPaint);
        }else{
            canvas.drawLine(widhth / 2 - padding, padding, widhth / 2 - padding, padding + 4 + 8, mPaint);
        }
        canvas.rotate(30, widhth / 2, widhth / 2);
    }
}

效果：

刻度就是利用了canvas的rotate()旋轉方法繪製上去的,但是得以圓的中心點爲旋轉點

第三步繪製時分表錶針

這個繪製是根據當前的時間來指向的，

/**
 * 繪製時  分 表 指針
 * @param canvas
 */
private void drawPointer(Canvas canvas) {
    mCalendar = Calendar.getInstance();
    mHour = mCalendar.get(Calendar.HOUR);
    mMinuate = mCalendar.get(Calendar.MINUTE);
    mSecond = mCalendar.get(Calendar.SECOND);
    //小時的旋轉度
    mDegrees = mHour*30+mMinuate/2;
    mPaint.setColor(Color.BLACK);
    canvas.save();
    canvas.rotate(mDegrees, widhth / 2, widhth / 2);
    canvas.drawLine(widhth / 2, height / 2, widhth / 2, widhth / 2 - mHourLineLen, mPaint);
    canvas.restore();
    //分鐘
    mPaint.setColor(Color.RED);
    mDegrees = mMinuate*6+mSecond/10;
    canvas.save();
    canvas.rotate(mDegrees, widhth / 2, widhth / 2);
    canvas.drawLine(widhth / 2, height / 2, widhth / 2, widhth / 2 - mHourLineLen, mPaint);
    canvas.restore();
    //繪製錶針
    mPaint.setColor(Color.BLUE);
    mDegrees = mSecond*6;
    canvas.save();
    canvas.rotate(mDegrees, widhth / 2, widhth / 2);
    canvas.drawLine(widhth / 2, height / 2, widhth / 2, widhth / 2 - mHourLineLen, mPaint);
    canvas.restore();
}

效果圖：

在這解釋下這個mDegrees這個值比如現在是21:20 但是分爲12小時制的話就是9:20 時就是9*30度=270度但是這個時針指向9肯定是不對的,因爲還有20分鐘呢?時針線肯定是在9和10之間指向,這麼這1小時之間是30度,就拿21:30這個時間來算,這個時候時針角度應該是30*9+30/2=285度這就說明60分鐘1小時而1小時是30度，也就是說每2分鐘時針角度應該動一下,根據這個原理分鐘和表之間的計算也是類似的,

還有一點要特別的注意2就是繪製完時針它是根據當前的時針數比如9然後旋轉30*9的但是canvas使用了動畫完以後一定要恢復到原來的，不然你繪製分鐘就會出問題,我就遇到了這個問題,在這特別提醒下

特別改動下了：類全部代碼複製下看下效果：

package com.example.clockview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.ImageView;

import java.util.Calendar;

/**
 * Created by Adminis on 2016/11/6.
 */
public class ClockView extends ImageView {
    private static final String TAG = "ClockView";
    private Paint mPaint;
    private int widhth = 200;//控件的寬度
    private int height = 200;//控件的高度
    private int padding = 5;
    private Calendar mCalendar;
    private int mHour;//小時
    private int mMinuate;//分鐘
    private int mSecond;//秒
    private float mDegrees ;//因爲圓是360度 我們有12個刻度 所以就是360/12
    private int mHourLineLen;//時指針 線
    private int mMinuateLine;//分鐘 線
    private int mSecondLine ;//表鍾線
    public ClockView(Context context) {
        this(context, null);
    }
    public ClockView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public ClockView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(widhth, height);
        mHourLineLen = (int) (widhth/2*0.6);
        mMinuateLine = (int) (widhth/2*0.7);
        mSecondLine = (int) (widhth/2*0.8);
    }
    private void initPaint() {
        mPaint = new Paint();
        mPaint.setStrokeWidth(3);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.parseColor("#666666"));
        mPaint.setAntiAlias(true);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        drawCircle(canvas);
        drawScale(canvas);
        canvasCenterCircle(canvas);
        drawPointer(canvas);
    }

    /**
     * 在 圓中心繪製一個點
     * @param canvas
     */
    private void canvasCenterCircle(Canvas canvas) {
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(widhth / 2, height / 2, 5, mPaint);
    }


    /**
     * 繪製圓
     * @param canvas
     */
    private void drawCircle(Canvas canvas) {
         mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(widhth / 2, height / 2, widhth / 2 - padding, mPaint);
    }
    /**
     * 繪製刻度
     * @param canvas
     */
    private void drawScale(Canvas canvas) {
        mPaint.setStyle(Paint.Style.FILL);
        for(int i=0;i<12;i++){
            if(i%3==0){//  12  3  6  9對應的線長點
                canvas.drawLine(widhth / 2 - padding, padding, widhth / 2 - padding, padding + 4 + 15, mPaint);
            }else{
                canvas.drawLine(widhth / 2 - padding, padding, widhth / 2 - padding, padding + 4 + 8, mPaint);
            }
            canvas.rotate(30, widhth / 2, widhth / 2);
        }
    }
    /**
     * 繪製時  分 表 指針
     * @param canvas
     */
    private void drawPointer(Canvas canvas) {
        mCalendar = Calendar.getInstance();
        mHour = mCalendar.get(Calendar.HOUR);
        mMinuate = mCalendar.get(Calendar.MINUTE);
        mSecond = mCalendar.get(Calendar.SECOND);
        //小時的旋轉度
        mDegrees = mHour*30+mMinuate/2;
        mPaint.setColor(Color.BLACK);
        canvas.save();
        canvas.rotate(mDegrees, widhth / 2, widhth / 2);
        canvas.drawLine(widhth / 2, height / 2, widhth / 2, widhth / 2 - mHourLineLen, mPaint);
        canvas.restore();
        //分鐘
        mPaint.setColor(Color.parseColor("#666666"));
        mPaint.setStrokeWidth(5);
        mDegrees = mMinuate*6+mSecond/10;
        canvas.save();
        canvas.rotate(mDegrees, widhth / 2, widhth / 2);
        canvas.drawLine(widhth / 2, height / 2, widhth / 2, widhth / 2 - mMinuateLine, mPaint);
        canvas.restore();
        //繪製錶針
        mPaint.setStrokeWidth(2);
        mPaint.setColor(Color.parseColor("#666666"));
        mDegrees = mSecond*6;
        canvas.save();
        canvas.rotate(mDegrees, widhth / 2, widhth / 2);
        canvas.drawLine(widhth / 2, height / 2, widhth / 2, widhth / 2 - mSecondLine, mPaint);
        canvas.restore();
    }
}

效果：

第四步就是繪製當前時間文字顯示在中心點下面：

/**
 * 繪製文字
 * @param canvas
 */
private void drawStr(Canvas canvas) {
    mPaint.setTextSize(24);
    StringBuffer sb =  new StringBuffer();
    if(mHour<10){
        sb.append("0").append(String.valueOf(mHour)).append(":");
    }else{
        sb.append(String.valueOf(mHour)).append(":");
    }
    if(mMinuate<10){
        sb.append("0").append(String.valueOf(mMinuate)).append(":");
    }else{
        sb.append(String.valueOf(mMinuate)).append(":");
    }
    if(mSecond<10){
        sb.append("0").append(String.valueOf(mSecond));
    }else{
        sb.append(String.valueOf(mSecond));
    }
    String str = sb.toString();
    int strW = (int) mPaint.measureText(str);
    canvas.drawText(str, widhth / 2 - strW / 2, widhth / 2 + 30,mPaint);
}

效果：

最後一步就是利用Handler每秒去刷新界面就能做到動態的顯示時間了：

最後完整的代碼：

package com.example.clockview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.widget.ImageView;
import java.util.Calendar;
/**
 * Created by Adminis on 2016/11/6.
 */
public class ClockView extends ImageView {
    private static final String TAG = "ClockView";
    private Paint mPaint;
    private int widhth = 200;//控件的寬度
    private int height = 200;//控件的高度
    private int padding = 5;
    private Calendar mCalendar;
    private int mHour;//小時
    private int mMinuate;//分鐘
    private int mSecond;//秒
    private float mDegrees ;//因爲圓是360度 我們有12個刻度 所以就是360/12
    private int mHourLineLen;//時指針 線
    private int mMinuateLine;//分鐘 線
    private int mSecondLine ;//表鍾線
    private Handler mHandler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            invalidate();
        }
    };
    public ClockView(Context context) {
        this(context, null);
    }
    public ClockView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public ClockView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(widhth, height);
        mHourLineLen = (int) (widhth/2*0.6);
        mMinuateLine = (int) (widhth/2*0.7);
        mSecondLine = (int) (widhth/2*0.8);
    }
    private void initPaint() {
        mPaint = new Paint();
        mPaint.setStrokeWidth(3);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.parseColor("#666666"));
        mPaint.setAntiAlias(true);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        drawCircle(canvas);
        drawScale(canvas);
        canvasCenterCircle(canvas);
        drawPointer(canvas);
        drawStr(canvas);
        mHandler.sendEmptyMessage(1);
    }
    /**
     * 繪製文字
     * @param canvas
     */
    private void drawStr(Canvas canvas) {
        mPaint.setTextSize(24);
        StringBuffer sb =  new StringBuffer();
        if(mHour<10){
            sb.append("0").append(String.valueOf(mHour)).append(":");
        }else{
            sb.append(String.valueOf(mHour)).append(":");
        }
        if(mMinuate<10){
            sb.append("0").append(String.valueOf(mMinuate)).append(":");
        }else{
            sb.append(String.valueOf(mMinuate)).append(":");
        }
        if(mSecond<10){
            sb.append("0").append(String.valueOf(mSecond));
        }else{
            sb.append(String.valueOf(mSecond));
        }
        String str = sb.toString();
        int strW = (int) mPaint.measureText(str);
        canvas.drawText(str, widhth / 2 - strW / 2, widhth / 2 + 30,mPaint);
    }
    /**
     * 在 圓中心繪製一個點
     * @param canvas
     */
    private void canvasCenterCircle(Canvas canvas) {
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(widhth / 2, height / 2, 5, mPaint);
    }


    /**
     * 繪製圓
     * @param canvas
     */
    private void drawCircle(Canvas canvas) {
         mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(widhth / 2, height / 2, widhth / 2 - padding, mPaint);
    }
    /**
     * 繪製刻度
     * @param canvas
     */
    private void drawScale(Canvas canvas) {
        mPaint.setStyle(Paint.Style.FILL);
        for(int i=0;i<12;i++) {
            if (i % 3 == 0) {//  12  3  6  9對應的線長點
                canvas.drawLine(widhth / 2 - padding, padding, widhth / 2 - padding, padding + 4 + 15, mPaint);
            }else{
                canvas.drawLine(widhth / 2 - padding, padding, widhth / 2 - padding, padding + 4 + 8, mPaint);
            }
            canvas.rotate(30, widhth / 2, widhth / 2);
        }
    }

    /**
     * 繪製時  分 表 指針
     * @param canvas
     */
    private void drawPointer(Canvas canvas) {
        mCalendar = Calendar.getInstance();
        mHour = mCalendar.get(Calendar.HOUR);
        mMinuate = mCalendar.get(Calendar.MINUTE);
        mSecond = mCalendar.get(Calendar.SECOND);
        //小時的旋轉度
        mDegrees = mHour*30+mMinuate/2;
        mPaint.setColor(Color.BLACK);
        canvas.save();
        canvas.rotate(mDegrees, widhth / 2, widhth / 2);
        canvas.drawLine(widhth / 2, height / 2, widhth / 2, widhth / 2 - mHourLineLen, mPaint);
        canvas.restore();
        //分鐘
        mPaint.setColor(Color.parseColor("#666666"));
        mPaint.setStrokeWidth(5);
        mDegrees = mMinuate*6+mSecond/10;
        canvas.save();
        canvas.rotate(mDegrees, widhth / 2, widhth / 2);
        canvas.drawLine(widhth / 2, height / 2, widhth / 2, widhth / 2 - mMinuateLine, mPaint);
        canvas.restore();
        //繪製錶針
        mPaint.setStrokeWidth(2);
        mPaint.setColor(Color.parseColor("#666666"));
        mDegrees = mSecond*6;
        canvas.save();
        canvas.rotate(mDegrees, widhth / 2, widhth / 2);
        canvas.drawLine(widhth / 2, height / 2, widhth / 2, widhth / 2 - mSecondLine, mPaint);
        canvas.restore();
    }
}

動態效果：

終於寫完了!

剛羣裏有人反映說3時和15秒時時針和錶針線不重合的問題,於是我自己寫死了一個數據測試了下發現真的是有這個bug 導致這個bug造成的原因是

/**
 * 繪製刻度
 * @param canvas
 */
private void drawScale(Canvas canvas) {
    mPaint.setStyle(Paint.Style.FILL);
    for(int i=0;i<12;i++) {
        if (i % 3 == 0) {//  12  3  6  9對應的線長點
            canvas.drawLine(widhth / 2-padding , padding, widhth / 2 -padding, padding + 4 + 15, mPaint);
        }else{
            canvas.drawLine(widhth / 2-padding , padding, widhth / 2-padding, padding + 4 + 8, mPaint);
        }
        canvas.rotate(30, widhth / 2, widhth / 2);
    }
}

是這個x軸開始和結束點的座標不對,應該把-padding去掉就正常了

改成後：

/**
 * 繪製刻度
 * @param canvas
 */
private void drawScale(Canvas canvas) {
    mPaint.setStyle(Paint.Style.FILL);
    for(int i=0;i<12;i++) {
        if (i % 3 == 0) {//  12  3  6  9對應的線長點
            canvas.drawLine(widhth / 2-padding , padding, widhth / 2 -padding, padding + 4 + 15, mPaint);
        }else{
            canvas.drawLine(widhth / 2-padding , padding, widhth / 2-padding, padding + 4 + 8, mPaint);
        }
        canvas.rotate(30, widhth / 2, widhth / 2);
    }
}

我現在把時針寫死在3點秒數定在15秒後效果：

android 自定義 view 實現錶盤效果

AI 畫圖真刺激，手把手教你如何用 ComfyUI 來畫出刺激的圖

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

數據展示動態（跑分）顯示

公衆號5月C#/.NET熱文一覽

git 下載大陸鏡像地址

一天掌握Android JNI開發

AsyncTask的源碼解析及遇到的一些問題

LinearLayout遇到的那些坑

RecyclerView 局部刷新爬坑之路

android7.0多窗口適配方案,你值得擁有

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結