关于自定义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里面定义

获取

然后在代码里面使用，可以在构造方法里面取出来

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

}

使用

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类型处理坐标