Android -- 自定義View小Demo，繪制鍾表時間（一）

　　1，昨天剛看了hongyang大神推薦的自定義時鍾效果（傳動門：http://www.jianshu.com/users/a45d19d680af/），效果還是不錯的，自己又在github上找了找，發現了修復了bug的源碼，然后就分析分析，先看一下效果：

　　思路分析一波，由於界面是在不停的繪制的，說以在View和SurfaceView之間我們要比較比較：

　　View一般用於繪制靜態頁面或者界面元素跟隨用戶的操作(點擊、拖拽等)而被動的改變位置、大小等

　　SurfaceView一般用於無需用戶操作，界面元素就需要不斷的刷新的情況（例如打飛機游戲不斷移動的背景）

　　通過以上兩條可以確定SurfaceView正好符合我們的需求，再來回憶一下surfaceView的使用場景和使用方法吧

　　使用SurfaceView的簡單介紹surface這個單詞是“表面、表層”的意思。。它的特性是：可以在主線程之外的線程中向屏幕繪圖上。這樣可以避免畫圖任務繁重的時候造成主線程阻塞，從而提高了程序的反應速度。在游戲開發中多用到SurfaceView，游戲中的背景人物、動畫等等盡量在畫布canvas中畫出。

 　　1，寫一個類繼承SurfaceView

 　　2，實現SurfaceHolder.Callback的接口，需要重寫的方法一共有三個

　　surfaceCreated-->表示SurfaceView的創建，一般在這個方法調用畫圖的子線程
　　surfaceChanged-->表示SurfaceView發生改變，
　　surfaceDestroyed-->表示SurfaceView的銷毀，一般在這里釋放線程

知道了SurfaceView的基本用法的話看一下我們這次的效果中有哪些東西吧，從表面上來看有：圓圈、圓圈上的刻度、刻度上的數字、三個指針、表示上下午的AM|PM，貌似只有這么些了，那么我們開始把大致的代碼框架搭建起來吧

public class MyView extends SurfaceView implements SurfaceHolder.Callback,Runnable {

    private SurfaceHolder mHolder;

    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);

        mHolder = getHolder();
        mHolder.addCallback(this);
    }

    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        new Thread(this).start();
    }

    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {

    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {

    }

    @Override
    public void run() {
        while (true) {
            logic();
            draw();
        }
    }

    /**
     * 邏輯操作
     */
    private void logic() {

    }

    /**
     * 繪制操作
     */
    private void draw() {

    }
}

然后就是一頓的邏輯和繪制的代碼了，就不分析了，直接貼代碼吧

package com.wangjitao.myview.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Handler;
import android.os.Message;
import android.provider.Settings;
import android.util.AttributeSet;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;

import java.util.Calendar;

/**
 * Created by wangjitao on 2016/10/11 0011.
 * 使用自定義view繼承SurfaceView繪制時鍾效果
 */
public class MyClockView extends SurfaceView implements SurfaceHolder.Callback, Runnable {
    /**
     * 使用SurfaceView的簡單介紹surface這個單詞是“表面、表層”的意思。。它的特性是：可以在主線程之外的線程中向屏幕繪圖上。
     * 這樣可以避免畫圖任務繁重的時候造成主線程阻塞，從而提高了程序的反應速度。在游戲開發中多用到SurfaceView，游戲中的背景
     * 、人物、動畫等等盡量在畫布canvas中畫出。下面來介紹一下它的簡單的使用吧
     * 1，寫一個類繼承SurfaceView
     * 2，實現SurfaceHolder.Callback的接口，需要重寫的方法一共有三個
     * surfaceCreated-->表示SurfaceView的創建，一般在這個方法調用畫圖的子線程
     * surfaceChanged-->表示SurfaceView發生改變，
     * surfaceDestroyed-->表示SurfaceView的銷毀，一般在這里釋放線程
     */

    private static final int DEFAULT_RADIUS = 200;

    private SurfaceHolder mHolder;
    private Thread mThread;
    private boolean flag; //用於標識surface銷毀，停止繪制操作

    //添加揮之所需要的畫筆、時間等
    private Canvas mCanvas; //畫布
    private Paint mPaint; //繪制圓和刻度的畫筆
    private Paint mPointerPaint; //繪制指針的畫筆
    private int mCanvasWidth, mCanvasHeight; //畫布的寬高
    private int mRadius = DEFAULT_RADIUS;//時鍾的半徑
    // 秒針長度
    private int mSecondPointerLength;
    // 分針長度
    private int mMinutePointerLength;
    // 時針長度
    private int mHourPointerLength;
    // 時刻度長度
    private int mHourDegreeLength;
    // 秒刻度
    private int mSecondDegreeLength;
    // 時鍾顯示的時、分、秒
    private int mHour, mMinute, mSecond;

    private OnTimeChangeListener onTimeChangeListener;

    public void setOnTimeChangeListener(OnTimeChangeListener onTimeChangeListener) {
        this.onTimeChangeListener = onTimeChangeListener;
    }

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

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

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

        //初始化當前顯示的時間
        mHour = Calendar.getInstance().get(Calendar.HOUR_OF_DAY);
        mMinute = Calendar.getInstance().get(Calendar.MINUTE);
        mSecond = Calendar.getInstance().get(Calendar.SECOND);

        mHolder = getHolder();
        mHolder.addCallback(this);
        mThread = new Thread(this);

        mPaint = new Paint();
        mPointerPaint = new Paint();

        mPaint.setColor(Color.BLACK);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);

        mPointerPaint.setColor(Color.BLACK);
        mPointerPaint.setAntiAlias(true);
        mPointerPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPointerPaint.setTextSize(22);
        mPointerPaint.setTextAlign(Paint.Align.CENTER); //屬性待研究

        //下面這兩句沒懂
        setFocusable(true);
        setFocusableInTouchMode(true);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        int desiredWidth, desiredHeight;
        if (widthMode == MeasureSpec.EXACTLY) {
            desiredWidth = widthSize;
        } else {
            desiredWidth = mRadius * 2 + getPaddingLeft() + getPaddingRight();
            if (widthMode == MeasureSpec.AT_MOST) {
                desiredWidth = Math.min(widthSize, desiredWidth);
            }
        }

        if (heightMode == MeasureSpec.EXACTLY) {
            desiredHeight = heightSize;
        } else {
            desiredHeight = mRadius * 2 + getPaddingTop() + getPaddingBottom();
            if (heightMode == MeasureSpec.AT_MOST) {
                desiredHeight = Math.min(heightSize, desiredHeight);
            }
        }

        // +4是為了設置默認的2px的內邊距，因為繪制時鍾的圓的畫筆設置的寬度是2px
        setMeasuredDimension(mCanvasWidth = desiredWidth + 4, mCanvasHeight = desiredHeight + 4);
        mRadius = (int) (Math.min(desiredWidth - getPaddingLeft() - getPaddingRight(),
                desiredHeight - getPaddingTop() - getPaddingBottom()) * 1.0f / 2);

        calculateLengths();
    }

    /**
     * 計算時針和刻度的長度
     */
    private void calculateLengths() {
        //設置時針長度為半徑的1/7
        mHourDegreeLength = (int) (mRadius * 1.0f / 7);
        // 秒分刻度長度為時刻度長度的一半
        mSecondDegreeLength = (int) (mHourDegreeLength * 1.0f / 2);

        //設置指針的長度
        mHourPointerLength = (int) (mRadius * 1.0 / 2);
        mMinutePointerLength = (int) (mHourPointerLength * 1.25f);
        mSecondPointerLength = (int) (mHourPointerLength * 1.5f);
    }

    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        //開啟繪制的子線程
        flag = true;
        mThread.start();
    }

    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {

    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
        flag = false;
    }

    @Override
    public void run() {
        //放置無時無刻的繪制，這里我們做的是秒鍾的行走，則需要限制一下，讓其每隔1秒才繪制一次
        long start, end;
        while (flag) {
            start = System.currentTimeMillis();
            handler.sendEmptyMessage(0);
            draw();
            logic();
            end = System.currentTimeMillis();

            try {
                if (end - start < 1000) {
                    Thread.sleep(1000 - (end - start));
                }
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }
    }

    //操作邏輯
    private void logic() {
        mSecond++;
        if (mSecond == 60) {
            mSecond = 0;
            mMinute++;
            if (mMinute == 60) {
                mMinute = 0;
                mHour++;
                if (mHour == 24) {
                    mHour = 0;
                }
            }
        }
    }

    private Handler handler = new Handler(new Handler.Callback() {
        @Override
        public boolean handleMessage(Message msg) {
            if (onTimeChangeListener != null) {
                onTimeChangeListener.onTimeChange(MyClockView.this, mHour, mMinute, mSecond);
            }
            return false;
        }
    });


    //繪制操作
    private void draw() {
        try {
            mCanvas = mHolder.lockCanvas(); // 得到畫布
            if (mCanvas != null) {
                // 在這里繪制內容
                //刷屏
                mCanvas.drawColor(Color.WHITE);
                drawSomthing();
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (mCanvas != null) {
                mHolder.unlockCanvasAndPost(mCanvas);
            }
        }
    }

    private void drawSomthing() {
        //        現在開始具體的繪制內容（畫什么由畫布決定，怎么畫由畫筆決定，這也就是我們上面給畫筆設置一系列屬性的原因）：
        mPointerPaint.setColor(Color.BLACK);
        // 1.將坐標系原點移至去除內邊距后的畫布中心
        // 默認在畫布左上角，這樣做是為了更方便的繪制
        mCanvas.translate(mCanvasWidth * 1.0f / 2 + getPaddingLeft() - getPaddingRight(), mCanvasHeight * 1.0f / 2 + getPaddingTop() - getPaddingBottom());
        // 2.繪制圓盤
        mPaint.setStrokeWidth(2f); // 畫筆設置2個像素的寬度
        mCanvas.drawCircle(0, 0, mRadius, mPaint); // 到這一步就能知道第一步的好處了，否則害的去計算園的中心點坐標
        // 3.繪制時刻度
        for (int i = 0; i < 12; i++) {
            mCanvas.drawLine(0, mRadius, 0, mRadius - mHourDegreeLength, mPaint);
            mCanvas.rotate(30); // 360°平均分成12份，每份30°
        }
        // 4.繪制秒刻度
        mPaint.setStrokeWidth(1.5f);
        for (int i = 0; i < 60; i++) {
            //時刻度繪制過的區域不在繪制
            if (i % 5 != 0) {
                mCanvas.drawLine(0, mRadius, 0, mRadius - mSecondDegreeLength, mPaint);
            }
            mCanvas.rotate(6); // 360°平均分成60份，每份6°
        }
        // 5.繪制數字
//        mPointerPaint.setColor(Color.BLACK);
//        for (int i = 0; i < 12; i++) {
//            String number = 6 + i < 12 ? String.valueOf(6 + i) : (6 + i) > 12
//                    ? String.valueOf(i - 6) : "12";
//            mCanvas.drawText(number, 0, mRadius * 5.5f / 7, mPointerPaint);
//            mCanvas.rotate(30);
//        }
        for (int i = 0; i < 12; i++) {
            String number = 6 + i < 12 ? String.valueOf(6 + i) : (6 + i) > 12
                    ? String.valueOf(i - 6) : "12";
            mCanvas.save();
            mCanvas.translate(0, mRadius * 5.5f / 7);
            mCanvas.rotate(-i * 30);
            mCanvas.drawText(number, 0, 0, mPointerPaint);
            mCanvas.restore();
            mCanvas.rotate(30);
        }
        // 6.繪制上下午
        mCanvas.drawText(mHour < 12 ? "AM" : "PM", 0, mRadius * 1.5f / 4, mPointerPaint);
        // 7.繪制時針
        Path path = new Path();
        path.moveTo(0, 0);
        int[] hourPointerCoordinates = getPointerCoordinates(mHourPointerLength);
        path.lineTo(hourPointerCoordinates[0], hourPointerCoordinates[1]);
        path.lineTo(hourPointerCoordinates[2], hourPointerCoordinates[3]);
        path.lineTo(hourPointerCoordinates[4], hourPointerCoordinates[5]);
        path.close();
        mCanvas.save();
        mCanvas.rotate(180 + mHour % 12 * 30 + mMinute * 1.0f / 60 * 30);
        mCanvas.drawPath(path, mPointerPaint);
        mCanvas.restore();
        // 8.繪制分針
        path.reset();
        path.moveTo(0, 0);
        int[] minutePointerCoordinates = getPointerCoordinates(mMinutePointerLength);
        path.lineTo(minutePointerCoordinates[0], minutePointerCoordinates[1]);
        path.lineTo(minutePointerCoordinates[2], minutePointerCoordinates[3]);
        path.lineTo(minutePointerCoordinates[4], minutePointerCoordinates[5]);
        path.close();
        mCanvas.save();
        mCanvas.rotate(180 + mMinute * 6);
        mCanvas.drawPath(path, mPointerPaint);
        mCanvas.restore();
        // 9.繪制秒針
        mPointerPaint.setColor(Color.RED);
        path.reset();
        path.moveTo(0, 0);
        int[] secondPointerCoordinates = getPointerCoordinates(mSecondPointerLength);
        path.lineTo(secondPointerCoordinates[0], secondPointerCoordinates[1]);
        path.lineTo(secondPointerCoordinates[2], secondPointerCoordinates[3]);
        path.lineTo(secondPointerCoordinates[4], secondPointerCoordinates[5]);
        path.close();
        mCanvas.save();
        mCanvas.rotate(180 + mSecond * 6);
        mCanvas.drawPath(path, mPointerPaint);
        mCanvas.restore();


    }

    //        這里比較難的可能就是指針的繪制，因為我們的指針是個規則形狀，其中getPointerCoordinates便是得到這個不規則形狀的3個定點坐標，
    // 有興趣的同學可以去研究一下我的邏輯，也可以定義你自己的邏輯。我的邏輯如下（三角函數學的號的同學應該一眼就能看懂）：

    /**
     * 獲取指針坐標
     *
     * @param pointerLength 指針長度
     * @return int[]{x1,y1,x2,y2,x3,y3}
     */
    private int[] getPointerCoordinates(int pointerLength) {
        int y = (int) (pointerLength * 3.0f / 4);
        int x = (int) (y * Math.tan(Math.PI / 180 * 5));
        return new int[]{-x, y, 0, pointerLength, x, y};
    }

    //-----------------Setter and Getter start-----------------//
    public int getHour() {
        return mHour;
    }

    public void setHour(int hour) {
        mHour = Math.abs(hour) % 24;
        if (onTimeChangeListener != null) {
            onTimeChangeListener.onTimeChange(this, mHour, mMinute, mSecond);
        }
    }

    public int getMinute() {
        return mMinute;
    }

    public void setMinute(int minute) {
        mMinute = Math.abs(minute) % 60;
        if (onTimeChangeListener != null) {
            onTimeChangeListener.onTimeChange(this, mHour, mMinute, mSecond);
        }
    }

    public int getSecond() {
        return mSecond;
    }

    public void setSecond(int second) {
        mSecond = Math.abs(second) % 60;
        if (onTimeChangeListener != null) {
            onTimeChangeListener.onTimeChange(this, mHour, mMinute, mSecond);
        }
    }

    public void setTime(Integer... time) {
        if (time.length > 3) {
            throw new IllegalArgumentException("the length of argument should bo less than 3");
        }
        if (time.length > 2)
            setSecond(time[2]);
        if (time.length > 1)
            setMinute(time[1]);
        if (time.length > 0)
            setHour(time[0]);
    }
    //-----------------Setter and Getter end-------------------//

    /**
     * 當時間改變的時候提供回調的接口
     */
    public interface OnTimeChangeListener {
        /**
         * 時間發生改變時調用
         *
         * @param view   時間正在改變的view
         * @param hour   改變后的小時時刻
         * @param minute 改變后的分鍾時刻
         * @param second 改變后的秒時刻
         */
        void onTimeChange(View view, int hour, int minute, int second);
    }
}