Android自定义View(一)-2016-06-05

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