关于自定义View，是Android学习的必经之路，个人觉得自定义View更重要的是关于绘图的计算算法，利用Android提供的API结合算法，才能绘制出比较复杂的图形。这次做的是一个时钟的自定义View Demo，熟悉下自定义View的各个步骤。先看下基本效果：
image
一、实现自定义View流程
onMeasure() -> onSizeChange() -> onLayout() -> onDraw()
其中，onLayout()是父View布局子View的时候需要，也就是自定义ViewGroup的时候，这次我们没有使用到。
onMeasure()
测量View的大小，在Android系统加载布局的时候，系统先测量各个子View的大小，然后通知父View需要多大的空间，父View再根据自身的大小来决定分配多少空间给子View。有三种测量模式：
MeasureSpec.EXACTLY：一般是设置了明确的值或者是match_parent
MeasureSpec.AT_MOST：子视图存在最大值，一般为warp_content
MeasureSpec.UNSPECIFIED：子视图可以是任意想要的大小，ScrollView这种
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getSize(heightMeasureSpec);
int circleRadius = Math.min(width, height);
if(widthMode == MeasureSpec.UNSPECIFIED) {
circleRadius = height;
} else if(heightMode == MeasureSpec.UNSPECIFIED) {
circleRadius = width;
}
setMeasuredDimension(circleRadius, circleRadius);
}
onSizeChange()
这个方法可以知道布局的大小，并且是在View的大小发生改变的时候，也会调用这个方法，也就是通过这个方法，绘制的大小也能够动态发生改变。
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
if(mRadius <= 0) {
mRadius = w / 2F;
}
mSecondLineX = mMinuteLineX = mHourLineX = mRadius;
mSecondLineY = mMinuteLineY = mHourLineY = 0;
}
onLayout()
也可以获取布局的大小，但通常实现自定义ViewGroup的时候需要。
onDraw()
测量方法，也就是自定义View中最重要的方法，调用频率高，不应该在该方法初始化变量、申请内存、耗时操作。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
postInvalidateDelayed(1000);
calculateTime();
// 表盘
mPaint.setColor(mContext.getResources().getColor(R.color.black));
canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);
mPaint.setColor(mContext.getResources().getColor(R.color.white));
canvas.drawCircle(mRadius, mRadius, mRadius * 14F / 15F, mPaint);
drawNumber(canvas);
// 时分秒针
canvas.drawLine(mRadius, mRadius, mSecondLineX, mSecondLineY, mSecondPaint);
canvas.drawLine(mRadius, mRadius, mMinuteLineX, mMinuteLineY, mMinutePaint);
canvas.drawLine(mRadius, mRadius, mHourLineX, mHourLineY, mHourPaint);
// 中点
canvas.drawCircle(mRadius, mRadius, 20, mMinutePaint);
// 时间
drawTime(canvas);
}
二、用户交互，响应触摸事件
onTouchEvent()
上面几个方法是将自定义View绘制出来，想要与用户发生交互，还要通过onTouchEvent()实现。
通过对ACTION_DOWN、ACTION_MOVE、ACTION_UP三个事件进行处理，处理用户的触摸事件，达到与用户交互的需求。这里demo对时间数字的区域进行判断，如果在数字区域，那么允许拖拽，并且拖拽的过程中需要判断数字的四个角，不能超出表盘的半径（这里面并非有实际的意义，只是为了实现demo的算法需求）
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mClickX = event.getX();
mClickY = event.getY();
if(mRect.contains((int) (mClickX - mTextX), (int) (mClickY - mTextY))) {
mIsDrag = true;
}
break;
case MotionEvent.ACTION_MOVE:
if(mIsDrag) {
float x = event.getX() - mClickX;
float y = event.getY() - mClickY;
mClickX = event.getX();
mClickY = event.getY();
float tempX1 = mTextX + x;
float tempX2 = tempX1 + mRect.width();
float tempY1 = mTextY + y;
float tempY2 = tempY1 - mRect.height();
// 左上角
float lenX1 = tempX1 - mRadius;
float lenY1 = tempY1 - mRadius;
float len1 = (float) Math.sqrt(lenX1 * lenX1 + lenY1 * lenY1);
// 左下角
float lenX2 = tempX1 - mRadius;
float lenY2 = tempY2 - mRadius;
float len2 = (float) Math.sqrt(lenX2 * lenX2 + lenY2 * lenY2);
// 右上角
float lenX3 = tempX2 - mRadius;
float lenY3 = tempY1 - mRadius;
float len3 = (float) Math.sqrt(lenX3 * lenX3 + lenY3 * lenY3);
// 右下角
float lenX4 = tempX2 - mRadius;
float lenY4 = tempY2 - mRadius;
float len4 = (float) Math.sqrt(lenX4 * lenX4 + lenY4 * lenY4);
if(len1 > mRadius || len2 > mRadius || len3 > mRadius || len4 > mRadius) {
return false;
}
mTextX = tempX1;
mTextY = tempY1;
invalidate();
}
break;
case MotionEvent.ACTION_UP:
if(mIsDrag) {
mIsDrag = false;
}
break;
default:break;
}
return true;
}
三、实现动画
自定义View有要求动画的，可以调用自身的invilidate()，或者非UI线程的postInvalidate()刷新自身，这时候自定义View会重新调用onDraw()方法，以达到View的动画效果。
postInvalidateDelay()还可以实现延迟发送刷新消息，将该方法写在onDraw()方法里面，延迟1000毫秒刷新一次，从而实现了时钟每一秒对时分秒针、时间数字的刷新需求。
四、算法
在自定义View中，绘图算法是挺重要的，这直接影响到能不能按照设计绘制出来，这里demo是对时分秒针的位置的算法，以及拖拽的过程中，判断不可以越界的算法。结合源码参考calculateTime()、onTouchEvent()
五、自定义属性
可以设置自定义的属性，比如设置时钟的半径大小
定义
在/values/attrs.xml里面定义
<declare-styleable name="CircleView">
<attr name="radius" format="dimension"/>
</declare-styleable>
获取
然后在代码里面使用，可以在构造方法里面取出来
TypedArray typedArray = context.getTheme().obtainStyledAttributes(attributeSet, R.styleable.CircleView, defStyleAttr, 0);
if(typedArray != null && typedArray.getIndexCount() > 0) {
for(int i = 0; i < typedArray.getIndexCount(); i++) {
switch (typedArray.getIndex(i)) {
case R.styleable.CircleView_radius:
mRadius = typedArray.getDimension(i, 400F);
break;
}
}
typedArray.recycle();
}
使用
<com.lextime2013.view.widget.TimeView
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:id="@+id/circle_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
custom:radius="160dp"
/>
六、注意事项
- 字体起点(x, y)是指左下角
- onDraw()不要进行初始化工作，不可以进行申请内存、耗时操作
- 没特殊情况，注意使用float类型处理坐标
源码已上传github
https://github.com/lextime2013/view/
网友评论