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