Android自訂View繪製鬧鐘

標籤：自訂view   鬧鐘   canvas   

Android自訂View繪製鬧鐘

本文簡單實現了一個鬧鐘，擴充View，Canvas繪製
效果如下：

代碼如下：

package com.gaofeng.mobile.clock_demo;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.util.AttributeSet;import android.util.Log;import android.view.View;import java.util.Calendar;/** * Created by gaofeng on 15-8-29. */public class ClockView extends View {    public ClockView(Context context) {        super(context);        ringHourBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.ring);        ringMinBitmap  = BitmapFactory.decodeResource(getResources(),R.drawable.ring_min);        syncTime();        setSchedualTime(0);    }    public ClockView(Context context, AttributeSet attrs) {        super(context, attrs);    }    public ClockView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    //半徑和圓中心    private static final float Radius = 200;    private static final float CenterX = 250;    private static final float CenterY = 250;    private float secondsDegree = 0;    private float minDegree = 0;    private float hourDegree = 0;    //定時    private float setHourDegree;    private float setMinDegree;    private boolean setSchedual;    private Bitmap ringHourBitmap;    private Bitmap ringMinBitmap;    private int bitmapWidth = 30,bitmapHeight = 30;    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        try {// 秒錶進度            Thread.sleep(1000);        } catch (InterruptedException e) {            e.printStackTrace();        }        setBackgroundColor(Color.GREEN);        drawCircle(canvas);        drawClockPoint(canvas);        drawIndicator(canvas);        calc();        drawSchedual(canvas);        invalidate();    }    private void drawSchedual(Canvas canvas) {        if (setSchedual) {            Paint p = new Paint();            //找到小時的座標            float rad = (float )Math.toRadians(setHourDegree);            float x = (float) (Radius * Math.sin(rad)) ;            float y = (float) (Radius * Math.cos(rad));            float vx = CenterX + x;            float vy = CenterY - y;            //比較笨的方法解決 圖片繪製在圓內。繪製都是從手機左上方開始的            if (setHourDegree > 0 && setHourDegree <= 90) {                vx = vx - bitmapWidth;            }            if (setHourDegree > 90 && setHourDegree < 180) {                vx = vx - bitmapWidth;                vy = vy - bitmapWidth;            }            if (setHourDegree > 180 && setHourDegree < 270) {                vy = vy - bitmapWidth;            }            Log.d("","Range x:" + vx + " y:" + vy);            canvas.drawBitmap(ringHourBitmap,vx ,vy ,p);            //找到分鐘的座標            rad = (float )Math.toRadians(setMinDegree);            x = (float) (Radius * Math.sin(rad)) ;            y = (float) (Radius * Math.cos(rad))  ;             vx = CenterX + x;             vy = CenterY - y;            if (setMinDegree > 0 && setMinDegree <= 90) {                vx = vx - bitmapWidth;            }            if (setMinDegree > 90 && setMinDegree < 180) {                vx = vx - bitmapWidth;                vy = vy - bitmapWidth;            }            if (setMinDegree > 180 && setMinDegree < 270) {                vy = vy - bitmapWidth;            }            canvas.drawBitmap(ringMinBitmap,vx,vy ,p);            p = null;        }    }    private void calc() {        secondsDegree = secondsDegree + 6;        if (secondsDegree >=360) { //一圈為一分鐘            secondsDegree = 0;            minDegree = minDegree + 6;        }        if (minDegree >= 360) { //一圈為一個小時            minDegree = 0;            hourDegree = hourDegree + 6;        }        if (hourDegree >= 360) { //一圈還是從0度開始            hourDegree = 0;        }    }    //畫圓    private void drawCircle(Canvas canvas) {        Paint paint = new Paint();        paint.setColor(Color.RED);        paint.setStrokeWidth(2);        canvas.drawCircle(CenterX,CenterY,Radius,paint);        Paint paint2 = new Paint();        paint2.setColor(Color.YELLOW);        paint2.setStrokeWidth(15f);        canvas.drawPoint(CenterX,CenterY,paint2);    }    private void drawClockPoint(Canvas canvas) {        Paint paint = new Paint();        paint.setColor(Color.YELLOW);        paint.setStrokeWidth(10f);        //畫出鬧鐘上面的刻度值，一圈一共12個點, 360度        for (float degree = 0; degree <= 330;degree = degree + 30) {            //數學公式 找圓上面的點座標            float rad = (float )Math.toRadians(degree);//轉換為度            float x = (float) (Radius * Math.sin(rad));            float y = (float) (Radius * Math.cos(rad));            canvas.drawPoint(x + CenterX, CenterY - y,paint);        }    }    //畫指標,轉的慢的指標越厚，預設都從0開始轉    private void drawIndicator(Canvas canvas) {        Paint paint = new Paint();        paint.setColor(Color.BLACK);        paint.setStrokeWidth(3f);        //秒針        _drawLine(canvas,secondsDegree,paint);        //分針        paint.setColor(Color.DKGRAY);        paint.setStrokeWidth(6f);        _drawLine(canvas,minDegree,paint);        //時針        paint.setColor(Color.WHITE);        paint.setStrokeWidth(12f);        _drawLine(canvas,hourDegree,paint);    }    private void _drawLine(Canvas canvas,float degree,Paint paint) {        float rad = (float )Math.toRadians(degree);//轉換為度        float x = (float) (Radius * Math.sin(rad));        float y = (float) (Radius * Math.cos(rad));        canvas.drawLine(CenterX, CenterY, x + CenterX, CenterY - y, paint);    }    public void setSchedualTime(long time) {        Calendar cal = Calendar.getInstance();        cal.setTimeInMillis(time);        //示範一下        int hour     = 14;        int min      = 35;        if (hour > 12) { //是24小時類型的            hour = hour - 12;        }        //計算和前面一樣        setHourDegree = hour * 30;        setMinDegree  = min * 6;        setSchedual = true;    }    //和手機時間同步一下    public void syncTime() {        Calendar cal = Calendar.getInstance();        int hour     = cal.get(Calendar.HOUR_OF_DAY);        int min      = cal.get(Calendar.MINUTE);        int second   = cal.get(Calendar.SECOND);        Log.d("","Time Now Hour:" + hour + " Min:" + min + " second:" + second);        if (hour > 12) { //是24小時類型的            hour = hour - 12;        }        //計算弧度 每個步伐都是 60/360 = 6度,Hour 12/360 度        hourDegree = hour * 30;        minDegree  = min * 6;        secondsDegree = second * 6;    }}

總結
- 沒有給鐘錶繪製數字，這個只是畫文本比較簡單
- 判斷定時圖片是否在圓內，做的比較簡單沒有花太多時間去找方法
- 如果要實現能拖分時指標的 需要擴充ViewGroup

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

Android自訂View繪製鬧鐘