自定义View（二）

先贴一下自定义View（一）的链接，里面讲了一些自定义View基础的内容。

这篇我将实现一个继承View的例子。点击TxetView的内容将随机产生四位随机数。

自定义View的步骤：

1. 自定义View的属性
2. 在View的构造方法中获得我们的自定义属性
3. 重写onMesure（）
   
4. 重写onDraw（）

但是第3步不一定是必须的，当然大部分情况下还是需要重写的。

1、自定义View的属性

在res/values文件夹下，建立attrs.xml，其实这个文件名称可以是任意的，写在这里更规范一点，表示里面放的全是view的属性。

<span style="font-size:14px;"><resources>
    <declare-styleable name="CustomView">
        <attr name="text" format="string"/>
        <attr name="textColor" format="color"/>
        <attr name="textSize" format="dimension"/>
    </declare-styleable>
</resources></span>

在这里，我们定义了文本、文本颜色、文本大小3个属性，format是该属性的取值类型。

一共有：string,color,demension,integer,enum,reference,float,boolean,fraction,flag。

然后在布局中声明我们自定义的View。

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

    <com.example.administrator.customviewtest.CustomView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        custom:text="2513"
        custom:textColor="#ff0000"
        custom:textSize="40sp"
        android:layout_centerInParent="true"/>

</RelativeLayout>

一定要引入xmlns :custom="http://schemas.android.com/apk/res-auto"我们的命名空间。res-auto表示会自动匹配。

2、在View的构造方法中，获得我们的自定义的样式

    private String mText;//文本
    private int mTextColor;//文本颜色
    private int mTextSize;//文本大小
    private Rect mBound;
    private Paint mPaint;

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

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

    //必要的初始化，获得一些自定义的值
    public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //获得我们所定义的自定义样式属性
        TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomView, defStyleAttr, 0);
        int n = array.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = array.getIndex(i);
            switch (attr) {
                case R.styleable.CustomView_text:
                    mText = array.getString(attr);
                    break;
                case R.styleable.CustomView_textColor:
                    mTextColor = array.getColor(attr, Color.BLACK);// 默认颜色设置为黑色
                    break;
                case R.styleable.CustomView_textSize:
                    // 默认设置为16sp，TypeValue也可以把sp转化为px
                    mTextSize = array.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
                    break;
            }
        }
        array.recycle();

        mPaint = new Paint();
        mPaint.setTextSize(mTextSize);
        mBound = new Rect();
        mPaint.getTextBounds(mText, 0, mText.length(), mBound);//获得绘制文本的宽和高

我们重写了3个构造方法，默认的布局文件调用的是两个参数的构造方法，所以记得让所有的构造调用我们的三个参数的构造，我们在三个参数的构造中获得自定义属性。

这里介绍下三个方法会被调用的场景。

• 第一个方法，一般我们这样使用时会被调用，View view = new View(context);
• 第二个方法，当我们在xml布局文件中使用View时，会在inflate布局时被调用，
  <View layout_width="match_parent" layout_height="match_parent"/>。
• 第三个方法，跟第二种类似，但是增加style属性设置，这时inflater布局时会调用第三个构造方法。
  <View style="@styles/MyCustomStyle"layout_width="match_parent" layout_height="match_parent"/>。

3、重写onMeasure（）

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int width = 0;
        int height = 0;

        //设置宽度
        int specMode = MeasureSpec.getMode(widthMeasureSpec);
        int specSize = MeasureSpec.getSize(widthMeasureSpec);
        switch (specMode) {
            case MeasureSpec.EXACTLY://一般是设置了明确的值或者是MATCH_PARENT
                width = getPaddingLeft() + getPaddingRight() + specSize;
                break;
            case MeasureSpec.AT_MOST:// 一般为WARP_CONTENT
                width = getPaddingLeft() + getPaddingRight() + mBound.width();
                break;
        }

        //设置高度
        specMode = MeasureSpec.getMode(heightMeasureSpec);
        specSize = MeasureSpec.getSize(heightMeasureSpec);
        switch (specMode) {
            case MeasureSpec.EXACTLY:
                height = getPaddingTop() + getPaddingBottom() + specSize;
                break;
            case MeasureSpec.AT_MOST:
                height = getPaddingTop() + getPaddingBottom() + mBound.height();
                break;
        }
        setMeasuredDimension(width, height);
    }

4、重写onDraw（）

    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setColor(Color.YELLOW);
        canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);

        mPaint.setColor(mTextColor);
        canvas.drawText(mText, getWidth() / 2 - mBound.width() / 2, getHeight() / 2 + mBound.height() / 2, mPaint);
    }

5、添加点击事件

 this.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
              mText = randomText();
              postInvalidate();
        }
});

private String randomText() {
        Random random = new Random();
        Set<Integer> set = new HashSet<Integer>();
        while (set.size() < 4) {
            int randomInt = random.nextInt(10);
            set.add(randomInt);
        }
        StringBuffer sb = new StringBuffer();
        for (Integer i : set) {
            sb.append("" + i);
        }
        return sb.toString();
    }

效果图：

源码下载

参考自：http://blog.csdn.net/lmj623565791/article/details/24252901