自定义View（二）

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

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

自定义View的步骤：

自定义View的属性
在View的构造方法中获得我们的自定义属性
重写onMesure（）

重写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

好文