Android自定义View

经过几天对View的学习，对View的绘制流程有了一定的了解，自己也照着大神们的代码写了一份自己的自定义View，打算将其分享出来供大家一起学习。

自定义View的步骤一般分为四步：

1）、自定义View的属性

2）、在实现的自定义view类的构造方法中获取自定义的属性

3）、重写onMeasure，这一步不是必须的，但以match_parent或者特定的宽高来设定布局时，不需要重写，调用 父类的onMeasure即可，但当以warp_parent来设定布局时，则必须要重写onMeasure方法

4）、重写onDraw方法

我们跟随这个步骤一步一步来实现

1、在res/values下新建一个attr.xml，在其中定义我们所需要的属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="Text" format="string"/>
    <attr name="TextColor" format="color"/>
    <attr name="TextSize" format="dimension"/>
    <declare-styleable name="MyView">
        <attr name="Text"/>
        <attr name="TextColor"/>
        <attr name="TextSize"/>
    </declare-styleable>
</resources>

可以看到这里自定义了三个属性，Text文本内容、TextColor文本颜色、TextSize文本字体大小，其中的format表示的是格式，可以定义为 string,color,demension,integer,enum,reference,float,boolean,fraction,flag这些格式

2、接着在自定义view的构造方法中获取到我们定义的属性

public class MyView extends View {

    /**
     *  文本内容
     */
    private String mText;
    /**
     * 文本颜色
     */
    private int mColor;
    /**
     * 文本字体大小
     */
    private int mSize;
    /**
     * 绘制的范围
     */
    private Rect mBound;
    private Paint mPaint;

    public MyView(Context context) {
        this(context, null);
    }

    public MyView(Context context, AttributeSet attrs) {
        this(context,attrs,0);
    }

    /**
     * Description:获得自定义样式属性
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        /**
         * 解析attrs，获取到我们定义的属性
         */
        TypedArray td = context.obtainStyledAttributes(attrs,R.styleable.MyView,defStyleAttr,0);
        int count = td.getIndexCount();
        for (int i=0; i<count;i++) {
            int attr = td.getIndex(i);
            switch (attr) {
                case R.styleable.MyView_Text:
                    mText = td.getString(attr);
                    break;
                case R.styleable.MyView_TextColor:
                    mColor = td.getColor(attr, Color.RED);
                    break;
                case R.styleable.MyView_TextSize:
                    mSize = td.getDimensionPixelSize(attr,(int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_SP,18,getResources().getDisplayMetrics()
                    ));
                    break;
            }
        }
        td.recycle();
        mPaint = new Paint();
        mPaint.setTextSize(mSize);
        mBound = new Rect();
        mPaint.getTextBounds(mText,0,mText.length(),mBound);
        /**
         * 设置监听，被点击时文本内容发生改变
         */
        this.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                mText = randText();
                /**
                 * 文本发生改变，重绘View
                 */
                postInvalidate();
            }
        });
    }

    private String randText() {
        Random r = new Random();
        StringBuffer sb = new StringBuffer();
        for (int i=0;i<4;i++) {
            int randNumber = r.nextInt(10);
            sb.append(""+randNumber);
        }
        return sb.toString();
    }

添加类的构造方法,通常是三个构造方法,不过从 Android5.0 开始构造方法已经添加到 4 个了。 这里重写了三个构造方法，系统默认调用的是两个参数的构造方法，而我们的实现主要在三个参数的构造方法中，因此让两个参数的构造方法调用三个参数的构造方法。

在其中设置了一个点击监听事件，当发生点击事件时，调用randText获取一个随机文本，并调用postInvalidate来重绘View，实现点击切换文本的效果。

3、重写onMeasure方法，虽然可以直接调用系统提供的onMeasure方法，但是在将布局设置为warp_parent时将得不到我们想要的效果，因此这里最好重写一下onMeasure方法

   @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int width;
        int height;
        if(widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        } else {
            mPaint.setTextSize(mSize);
            mPaint.getTextBounds(mText,0,mText.length(),mBound);
            float textWidth = mBound.width();
            int expWidth = (int) (getPaddingLeft() + textWidth + getPaddingRight());
            width = expWidth;
        }
        if(heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        } else {
            mPaint.setTextSize(mSize);
            mPaint.getTextBounds(mText,0,mText.length(),mBound);
            float textHeight = mBound.height();
            int expHeight = (int) (getPaddingTop() + textHeight + getPaddingBottom());
            height = expHeight;
        }
        setMeasuredDimension(width,height);
    }

这里传入了两个参数widthMeasureSpec和heightMeasureSpec， 都是由父视图经过计算后传给子视图的，最外层的视图由getRootMeasureSpec(desiredWindowWidth, lp.width)和getRootMeasureSpec(desiredWindowHeight, lp.height)获得，lp.width和lp.height已被赋初值：MATCH_PARENT

widthMeasureSpec和heightMeasureSpec均由specSize和specMode组成，期中specMode有三种类型：

EXACTLY:一般是设置了明确的值（100dp）或者是MATCH_PARENT

AT_MOST:子布局限制在一个最大值内，一般为WARP_CONTENT

UNSPECIFIED:子布局想要多大就多大，不常用

最后通过调用setMeasureDimension()来设定视图大小。

4、重写onDraw方法

    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setColor(Color.BLUE);
        canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);
        mPaint.setColor(mColor);
        canvas.drawText(mText,getWidth()/2 - mBound.width()/2,getHeight()/2 + mBound.height()/2,mPaint);
    }

此时，自定义View基本已经完成了，接下来我们在布局中调用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

    <viewtest.example.com.viewtest.MyView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:Text="1588"
        app:TextColor="#000000"
        app:TextSize="100dp"
        android:layout_centerInParent="true"
        />

</RelativeLayout>

这里我们设定的是wrap_parent，如果我们没有重写onMeasure方法，那么这里显示效果将和match_parent一致，这是因为系统帮我们测量的都是match_parent，当我们明确的设置宽高时，系统测量的结果就是我们设置的值，当设置match_parent或者是wrap_parent时，系统测量的均是match_parent。

最后显示效果如下，点击View即可变换文本：

文章中可能会存在些许错误，若发现请帮忙指出一下呗，谢谢~

GitHub传送门