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传送门