Android深入浅出自定义控件（一）

Android自定义主要有3种，自定义View、自定义ViewGroup、继承重写系统控件

本文主要讲解Android中如何自定义View

Android打造自定义控件，大体的思路主要有以下五点：

1.创建自定义属性，在res/values目录下创建attrs.xml文件，声明自定义控件的属性

2.创建自定义View类，继承于View类，重写View的三个构造方法

3.通过TypeArray获得各个自定义属性，并将Paint设置为这些属性的内容

4.重写onMeasure方法，设置好视图在界面上所显示的大小

5.重写onDraw方法，通过paint和canvas渲染出自定义控件

1.创建自定义属性，在res/values目录下创建attrs.xml文件，声明自定义控件的属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    
    <declare-styleable name="myTextView">
        <attr name="mytextContent" format="string" type="string"></attr>
	<attr name="mytextColor" format="color" type="color"></attr>
	<attr name="mytextSize" format="dimension" type="dimension"></attr>
    </declare-styleable>
      
</resources>

声明自定义属性有两个作用，一方面可以让我们在布局文件中直接使用这些属性，另一方面，在xml中声明属性之后会在R类中生成对应的资源ID，方便到时候TypeArray的使用（关于TypeArray见下文）
每个attr标签表示声明一个属性，name是属性的名字，format是属性的格式，比如string表示这个属性必须为字符串，color表示这个属性必须为颜色类型，dimension表示这个属性必须为像素即dp、sp之类的

2.创建自定义View类，继承于View类，重写View的三个构造方法

public class MyTextView extends View implements View.OnClickListener{
	
	private String mytextContent;
	
	private int mytextColor;
	
	private int mytextSize;
	//画笔，用于绘制图形时使用
	private Paint paint;
	//矩形对象，用于计算文字位置时使用
	private Rect rect;
	
	public MyTextView(Context context) {
		// TODO Auto-generated constructor stub
		this(context,null);
	}
	
	public MyTextView(Context context, AttributeSet attrs) {
		// TODO Auto-generated constructor stub
		this(context,attrs,0);
		
	}

	public MyTextView(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		// TODO Auto-generated constructor stub
	}	

}

可以看到三个构造方法的区别在于参数
public MyTextView(Context context)   【通过传入上下文对象来创建view】

public MyTextView(Context context, AttributeSet attrs)   【AttributeSet类型是用来获得我们声明的各个属性，当我们在xml布局文件中声明自定义View时，就会调用此构造方法】

public MyTextView(Context context, AttributeSet attrs, int defStyleAttr)   【多了一个defStyleAttr属性，当我们需要为view设定style时才会用到】 

另外，我们对前两个构造方法都调用了this()，学过java的都知道，this表示调用本类的构造方法，在第一个构造方法中，我们调用了 this(context,null);其实是调用了第二个构造方法，在第二个构造方法中调用了this(context,attrs,0);其实是调用了第三个构造方法，所以这样写的好处是无论我们使用哪个构造方法，最终都会进到第三个构造方法，所以接下来我们要做的便是在第三个构造方法中获得我们的属性。

3.通过TypeArray获得各个自定义属性，并将Paint设置为这些属性的内容

public MyTextView(Context context, AttributeSet attrs, int defStyleAttr) {
	super(context, attrs, defStyleAttr);
	// TODO Auto-generated constructor stub
	TypedArray array = getContext().getTheme().obtainStyledAttributes(attrs, R.styleable.myTextView, defStyleAttr, 0);
	//获得属性，并设置默认值
	mytextContent = array.getString(R.styleable.myTextView_mytextContent);
	mytextColor = array.getColor(R.styleable.myTextView_mytextColor,Color.WHITE);
	mytextSize = array.getDimensionPixelSize(R.styleable.myTextView_mytextSize, 30);
	
	array.recycle();
		
	paint = new Paint();
	//将画笔的文字大小设置为我们定义的大小
	paint.setTextSize(mytextSize);
	rect = new Rect();
	/**
	* 此方法可以获得文字所在的矩形区域，并赋给rect
	* 参数1：传入文字的内容
	* 参数2：传入文字起始的长度，一般为0
	* 参数3：传入文字结束的长度，一般为text.length
	* 参数4：传入一个Rect矩形对象
	*/
	paint.getTextBounds(mytextContent, 0, mytextContent.length(), rect);
}

刚才在上文中已说过，此构造方法的AttributeSet参数可以得到我们在attr中声明的属性，那为什么此处还要通过TypeArray来获得呢？TypeArray有什么用？其实如果我们是直接通过AttributeSet获得属性的话，还需要解析才能获得我们需要的各个属性的值以及格式，而TypeArray帮我们把这些操作都封装好了，所以通过TypeArray可以很方便的获取到我们的属性。

4.重写onMeasure方法，设置好视图在界面上所显示的大小

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
	// TODO Auto-generated method stub
	super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	//setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
}

对这个方法的使用见下文

5.重写onDraw方法，通过paint和canvas渲染出自定义控件

@Override
protected void onDraw(Canvas canvas) {
	// TODO Auto-generated method stub
	paint.setColor(Color.BLACK);
	//canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint);
	/**
	* 参数1：圆心的横坐标
	* 参数2：圆心的纵坐标
	* 参数3：圆的半径
	* 参数4：用来绘制的画笔
	*/
	canvas.drawCircle(getMeasuredWidth()/2, getMeasuredHeight()/2, getMeasuredWidth()/2, paint);
	paint.setColor(Color.RED);
	canvas.drawCircle(getMeasuredWidth()/2, getMeasuredHeight()/2, getMeasuredWidth()/3, paint);
		
	paint.setColor(mytextColor);
	canvas.drawText(mytextContent, getWidth() / 2 - rect.width() / 2, getHeight() / 2 + rect.height() / 2, paint);		
}

我们在这里通过canvas调用了两次drawCircle,即绘制了两个圆形，注意到第二个圆形的半径为getMeasuredWidth()/3，比第一个圆的半径小了，而圆心又与第一个圆一致，所以待会儿绘制出来的效果就是一个小圆叠在一个大圆前面，在每次绘制圆之前都调用了paint设置颜色，是为了两个圆形的颜色不一样。
最后再次设置paint颜色为mytextColor，即我们的文字内容的颜色，然后通过canvas.drawText进行文字的绘制，这里之所以getWidth() / 2 - rect.width() / 2是因为将View的宽度的一半减去文字内容的宽度的一半，得到的就是文字内容的左上角的横坐标（可以自行画图理解），纵坐标也是同理。

至此，我们完成了基本的定义，接下来就是在布局文件中使用它了：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:mytext="http://schemas.android.com/apk/res/com.example.myview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <com.example.view.MyTextView 
        android:layout_width="200dp"
        android:layout_height="200dp"
        mytext:mytextContent="1"
        mytext:mytextColor="#FFF"
        mytext:mytextSize="20sp"    
        />

</RelativeLayout>

xmlns:mytext="http://schemas.android.com/apk/res/com.example.myview"是命名空间的声明，等下我们声明自定义属性的时候需要用到，这里的路径是http://scheam.....res/+项目包名

运行

运行之后，发现在屏幕成功出现了一个圆形背景中间带有文字内容，这里我们设置的宽和高都是200dp，如果将layout_width和layout_height都设置为wrap_content，会发现它并不像我们平时那样会自动有一个默认大小，而是像fill_parent一样的填充屏幕，很明显这不是我们愿意看到的，这个时候就需要用到onMeasure方法了：

首先为我们的自定义类加上两个私有成员标量：

//wrap_content时默认的宽度
private final int DEFAULT_WIDTH = 200;
//wrap_content时默认的高度
private final int DEFAULT_HEIGHT = 200;

重写onMeasure方法：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
	// TODO Auto-generated method stub
	//super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		
	int width;  //最终的宽度
	int height;   //最终的高度
		
	int wspecMode = MeasureSpec.getMode(widthMeasureSpec);
	int wspecSize = MeasureSpec.getSize(widthMeasureSpec);
	int hspecMode = MeasureSpec.getMode(heightMeasureSpec);
	int hspecSize = MeasureSpec.getSize(heightMeasureSpec);
		
	if(wspecMode==MeasureSpec.EXACTLY){
		width = wspecSize;
	}
	else{
		width = DEFAULT_WIDTH;
	}
	if(hspecMode==MeasureSpec.EXACTLY){
		height = hspecSize;
	}
	else{
		height = DEFAULT_HEIGHT;
	}
	setMeasuredDimension(width, height);
}

其中，有两个关键的方法，getMode和getSize，getSize是获得用户所设定的view的宽高，getMode是获得这个属性的模式，Mode有三种：
MeasureSpec.EXACTLY【设置了明确的值或者是MATCH_PARENT】

MeasureSpec.AT_MOST【表示子布局限制在一个最大值内，一般为WARP_CONTENT】

MeasureSpec.UNSPECIFIED【表示子布局想要多大就多大，很少使用】

对模式进行判断，如果模式是EXACTLY，说明用户在布局文件中对宽高设定了具体数值或者match_parent，如果是具体数值，那么就将这个具体数值作为最终宽高，如果是match_parent，就将其填充父布局。如果是AT_MOST，说明用户在布局文件中设定为了wrap_content，那么就应该将我们的默认宽度或者高度作为最终的宽高
通过以上测量，就能够在设定为wrap_content时依然能够限定在一定的大小中。

另外，如果想为自定义控件加上一些点击事件之类的效果，我们还可以：

1.让自定义类实现OnClickListener

2.在构造方法中注册监听事件

3.实现onClick方法

运行并点击，就会发现文字内容每点击一次就+1

希望本文能够帮助你解决自定义View的困惑，关于ViewGroup和重写系统控件的见解会在以后的博文进行整理