自定义View

自定义View

---

本文转载自 Android 自定义View (一),Android 自定义View (二) 进阶并且进行了整理

自定义View的一般步骤：

• 自定义View的属性
• 在View的构造方法中获得我们的自定义属性
• [重写onMeasure方法]
• 重写onDraw()

第3步并不是必须的

• 自定义View的属性

首先在res/values/下创建一个attrs.xml文件，在里面定义自定义的属性和声明样式：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="titleText" format="string" />
    <attr name="titleTextColor" format="color" />
    <attr name="titleTextSize" format="dimension" />
    <declare-styleable name="CustomTitleView">
        <attr name="titleText" />
        <attr name="titleTextColor" />
        <attr name="titleTextSize" />
    </declare-styleable>
</resources>

上面的format的具体取值请参考自定义View的declare-styleable中format详解

然后在layout文件中声明我们自定义的View：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://schemas.android.com/apk/res/com.example.customview01"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <com.example.customview01.view.CustomTitleView
        android:layout_width="200dp"
        android:layout_height="100dp"
        custom:titleText="3712"
        custom:titleTextColor="#ff0000"
        custom:titleTextSize="40sp" />
</RelativeLayout>

RelativeLayout中的xmls:custome命名空间的名字可以是任何合法的标识符，命名空间的最后是程序的包名，为了适应不同的包名，我们一般使用下面的字符串替换命名空间的内容:http://schemas.android.com/apk/res-auto

• 在View的构造方法中获得我们的自定义属性

/**
 * 文本
 */
private String mTitleText;
/**
 * 文本的颜色
 */
private int mTitleTextColor;
/**
 * 文本的大小
 */
private int mTitleTextSize;
/**
 * 绘制时控制文本绘制的范围
 */
private Rect mBound;
private Paint mPaint;
public CustomTitleView(Context context, AttributeSet attrs){
    this(context, attrs, 0);
}
public CustomTitleView(Context context){
    this(context, null);
}
/**
 * 获得我自定义的样式属性
 * 
 * @param context
 * @param attrs
 * @param defStyle
 */
public CustomTitleView(Context context, AttributeSet attrs, int defStyle){
    super(context, attrs, defStyle);
    /**
     * 获得我们所定义的自定义样式属性
     */
    TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomTitleView, defStyle, 0);
    int n = a.getIndexCount();
    for (int i = 0; i < n; i++){
        int attr = a.getIndex(i);
        switch (attr){
        case R.styleable.CustomTitleView_titleText:
            mTitleText = a.getString(attr);
            break;
        case R.styleable.CustomTitleView_titleTextColor:
            // 默认颜色设置为黑色
            mTitleTextColor = a.getColor(attr, Color.BLACK);
            break;
        case R.styleable.CustomTitleView_titleTextSize:
            // 默认设置为16sp，TypeValue也可以把sp转化为px
            mTitleTextSize = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                    TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
            break;
        }
    }
    a.recycle();
    /**
     * 获得绘制文本的宽和高
     */
    mPaint = new Paint();
    mPaint.setTextSize(mTitleTextSize);
    // mPaint.setColor(mTitleTextColor);
    mBound = new Rect();
    mPaint.getTextBounds(mTitleText, 0, mTitleText.length(), mBound);
}

注意，TypeArray在使用完成之后一定要调用它的recycle()方法

• 重写onMeasure和onDraw方法

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas){
    mPaint.setColor(Color.YELLOW);
    canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);
    mPaint.setColor(mTitleTextColor);
    canvas.drawText(mTitleText, getWidth() / 2 - mBound.width() / 2, getHeight() / 2 + mBound.height() / 2, mPaint);
}

此时运行程序，可以看到如下效果：

但是当我们把View的属性从一个具体的大小设置为wrap_content之后，效果图变成下面这个样子了:

系统帮我们测量的高度和宽度都是MATCH_PARNET，当我们设置明确的宽度和高度时，系统帮我们测量的结果就是我们设置的结果，当我们设置为WRAP_CONTENT,或者MATCH_PARENT系统帮我们测量的结果就是MATCH_PARENT的长度。

所以，当设置了WRAP_CONTENT时，我们需要自己进行测量，即重写onMesure方法：

重写之前先了解MeasureSpec的specMode,一共三种类型：

EXACTLY：一般是设置了明确的值或者是MATCH_PARENT

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

UNSPECIFIED：表示子布局想要多大就多大，很少使用

下面是我们重写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(mTitleTextSize);
        mPaint.getTextBounds(mTitle, 0, mTitle.length(), mBounds);
        float textWidth = mBounds.width();
        int desired = (int) (getPaddingLeft() + textWidth + getPaddingRight());
        width = desired;
    }
    if (heightMode == MeasureSpec.EXACTLY){
        height = heightSize;
    } else{
        mPaint.setTextSize(mTitleTextSize);
        mPaint.getTextBounds(mTitle, 0, mTitle.length(), mBounds);
        float textHeight = mBounds.height();
        int desired = (int) (getPaddingTop() + textHeight + getPaddingBottom());
        height = desired;
    }
    setMeasuredDimension(width, height);
}

现在我们修改下布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://schemas.android.com/apk/res/com.example.customview01"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <com.example.customview01.view.CustomTitleView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        custom:titleText="3712"
        android:padding="10dp"
        custom:titleTextColor="#ff0000"
        android:layout_centerInParent="true"
        custom:titleTextSize="40sp" />
</RelativeLayout>

现在的效果是：