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