前言
最近我跟自定义View杠上了，甚至说有点上瘾到走火入魔了。身为菜鸟的我自然要查阅大量的资料，学习大神们的代码，这不，前两天正好在郭神在微信公众号里推送一片自定义控件的文章——一步步实现精美的钟表界面。正适合我这种菜鸟来学习，闲着没事，我就差不多依葫芦画瓢也写了一个自定义表盘View，现在纯粹最为笔记记录下来。先展示下效果图：
下面进入正题
自定义表盘属性
老规矩，先在attrs文件里添加表盘自定义属性
//表盘半径 //表盘相对控件边框距离 //刻度相对表盘距离 //常规刻度颜色 //常规刻度长度 //整点刻度颜色 //整点刻度长度 //时针颜色 //时针长度 //分针颜色 //分针长度 //秒针颜色 //秒针长度 //表盘字体大小 //表盘字体颜色
在自定义View的构造方法种获取自定义属性
先将属性变量声明如下：
/**表盘边距*/
private float mWatchPadding = 5;
/**表盘与刻度边距*/
private float mWatchScalePadding = 5;
/**表盘半径*/
private float mWatchRadius = 250;
/**表盘刻度长度*/
private float mWatchScaleLength;
/**表盘刻度颜色*/
private int mWatchScaleColor = Color.BLACK;
/**表盘整点刻度长度*/
private float mHourScaleLength = 8;
/**表盘整点刻度颜色*/
private int mHourScaleColor = Color.BLUE;
/**表盘时针颜色*/
private int mHourPointColor = Color.BLACK;
/**表盘时针长度*/
private float mHourPointLength = 100;
/**表盘分针颜色*/
private int mMinutePointColor = Color.BLACK;
/**表盘分针长度*/
private float mMinutePointLength = 130;
/**表盘秒针颜色*/
private int mSecondPointColor = Color.RED;
/**表盘秒针长度*/
private float mSecondPointLength = 160;
/**表盘尾部指针长度*/
private float mEndPointLength;
/**表盘数字颜色*/
private int mTimeTextColor = Color.BLACK;
/**表盘数字大小*/
private int mTimeTextSize = 15;
在构造方法种获取自定义属性
public WatchView(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray array = context.obtainStyledAttributes(attrs,R.styleable.WatchView);
int n = array.getIndexCount();
for (int i = 0;i
设置控件大小
这里当然就是重写onMeasure方法啦，这里我们处理的简单点，如下面代码所示，当我们将控件的宽高都设定为wrap_content（即MeasureSpec.UNSPECIFED）时，我们将宽高设定为默认值（wrapContentSize）和圆盘半径+圆盘边距（mWatchRadius+mWatchPadding）之间取最大值，其他情况下就取系统自取值。当然作为一个严谨的控件，仅仅这样处理肯定是不行的。项目中，我们要根据我们的需求自行修改里面的代码以适配。
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int wrapContentSize = 1000;
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
if (widthMode == MeasureSpec.UNSPECIFIED && heightMode == MeasureSpec.UNSPECIFIED){
wrapContentSize = (int) Math.max(wrapContentSize,mWatchRadius+mWatchPadding);
setMeasuredDimension(wrapContentSize,wrapContentSize);
}else {
setMeasuredDimension(widthSize,heightSize);
}
}
重写onDraw方法
来到最关键真正画表盘时刻了。一步一步来，首先初始化我们的画笔（我的习惯，写一个initPaint方法）
private void initPaint(){
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(Color.WHITE);
mPaint.setStyle(Paint.Style.FILL);
}
为了不显赘述，方便理解，我直接展示代码，在代码中解释
开画之前我们先将画笔移动到控件中心点位置，如下：
@Override
protected void onDraw(Canvas canvas) {
canvas.translate(getWidth()/2,getHeight()/2);
}
第一步，画表盘
/**
* 画表盘
* @param canvas
*/
private void paintWatchBoard(Canvas canvas){
initPaint();
canvas.save();
canvas.drawCircle(0,0,mWatchRadius,mPaint); //画圆盘
canvas.restore();
}
注：每次画图之前都要先调用canvas.save()方法，保存画笔属性，画完之后要调用canvas.restore()方法，重置画笔属性
这里就不一一展示每次画完之后的效果图了。
第二步，画刻度+整点时间数字（刻度从12点方向开始画）
/**
* 画刻度及整点数字
* @param canvas
*/
private void paintScale(Canvas canvas){
int lineLength; //刻度线长度
canvas.save();
for (int i = 0;i<60;i++){
if (i%5 == 0){//整点刻度下画笔相关属性
mPaint.setStrokeWidth(MyUtil.dip2px(getContext(),1.5f));
mPaint.setColor(mHourScaleColor);
lineLength = MyUtil.dip2px(getContext(),8);
canvas.drawLine(0,-mWatchRadius+mWatchScalePadding,0,-mWatchRadius+mWatchScalePadding+lineLength,mPaint);
mPaint.setColor(mTimeTextColor);
mPaint.setTextSize(mTimeTextSize);
canvas.drawText(mTimes[i/5],-mTimeTextSize/2,-mWatchRadius+mWatchScalePadding + lineLength+mTimeTextSize,mPaint);//整点的位置标上整点时间数字
}else {//非整点刻度下画笔相关属性
mPaint.setStrokeWidth(MyUtil.dip2px(getContext(),0.8f));
mPaint.setColor(mWatchScaleColor);
lineLength = MyUtil.dip2px(getContext(),5);
canvas.drawLine(0,-mWatchRadius+mWatchScalePadding,0,-mWatchRadius+mWatchScalePadding+lineLength,mPaint);
}
canvas.rotate(6);//每次画完一个刻度线，画笔顺时针旋转6度（360/60，相邻两刻度之间的角度差为6度）
}
canvas.restore();
}
其中，整点数字我用了罗马数字来表示
private String[] mTimes = {"XII","Ⅰ","Ⅱ","Ⅲ","Ⅳ","Ⅴ","Ⅵ","Ⅶ","Ⅷ","Ⅸ","Ⅹ","XI"};
第三步，画时针、分针、秒针以及其它修饰图
考虑到时针、分针和秒针大小长度各不一样，我这里特意定义了三支画笔来分别画时针、分针和秒针。
同样的，先初始化指针画笔：
/**
* 初始化指针
*/
private void initPointPaint(){
mHourPaint = new Paint();
mHourPaint.setAntiAlias(true);
mHourPaint.setStyle(Paint.Style.FILL);
mHourPaint.setStrokeWidth(16);
mHourPaint.setColor(mHourPointColor);
mMinutePaint = new Paint();
mMinutePaint.set(mHourPaint);
mMinutePaint.setStrokeWidth(12);
mMinutePaint.setColor(mMinutePointColor);
mSecondPaint = new Paint();
mSecondPaint.set(mHourPaint);
mSecondPaint.setStrokeWidth(7);
mSecondPaint.setColor(mSecondPointColor);
mEndPointLength = mWatchRadius/6; //（修饰部分）指针尾部长度，定义为表盘半径的六分之一
}
画指针
/**
* 画指针
* @param canvas
*/
private void paintPoint(Canvas canvas){
initPointPaint();
Calendar c = Calendar.getInstance(); //取当前时间
int hour = c.get(Calendar.HOUR_OF_DAY);
int minute = c.get(Calendar.MINUTE);
int second = c.get(Calendar.SECOND);
//绘制时针
canvas.save();
canvas.rotate(hour*30);
canvas.drawLine(0,0,0,-mHourPointLength,mHourPaint);
canvas.drawLine(0,0,0,mEndPointLength,mHourPaint);
canvas.restore();
//绘制分针
canvas.save();
canvas.rotate(minute*6);
canvas.drawLine(0,0,0,-mMinutePointLength,mMinutePaint);
canvas.drawLine(0,0,0,mEndPointLength,mMinutePaint);
canvas.restore();
//绘制秒针
canvas.save();
canvas.rotate(second*6);
canvas.drawLine(0,0,0,-mSecondPointLength,mSecondPaint);
canvas.drawLine(0,0,0,mEndPointLength,mSecondPaint);
canvas.restore();
}
OK，该有的差不多都有了，直接在onDraw中调用吧
@Override
protected void onDraw(Canvas canvas) {
canvas.translate(getWidth()/2,getHeight()/2);
paintWatchBoard(canvas); //画表盘
paintScale(canvas); //画刻度
paintPoint(canvas); //画指针
canvas.drawCircle(0,0,15,mSecondPaint); //为了美观，也让表盘更接近我们显示生活中的样子，我在圆盘中心画了一个大红圆点装饰秒针
postInvalidateDelayed(1000); //每隔一秒钟画一次
}
(⊙v⊙)嗯，自定义View大功告成，我们在布局文件里调用看下效果吧
<?xml version="1.0" encoding="utf-8"?>
最后我这里的静态效果是这样的：
京公网安备 11010802040832号 | 京ICP备19059560号-6 