Android自定义控件（二）

上篇文章通过继承view定义了一个圆形控件，在界面上绘制一个圆形，并且根据不同的测量模式设置了不同的大小：自定义控件（一） 。但是我们定义的圆形在界面设计时半径、颜色都已经固定了，本文主要总结如何像原生控件一样，通过在xml文件中设置属性来控制圆形的半径以及颜色，并在圆形中心显示一段文字

首先要定义控件的属性名称，在values文件夹中新建attrs.xml文件，声明属性的名称和类型：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="myView">
        <attr name="Text" format="string"/>
        <attr name="TextColor" format="color"/>
        <attr name="CircleColor" format="color"/>
        <attr name="Radius" format="dimension"/>
        <attr name="TextSize" format="dimension"/>
    </declare-styleable>
</resources>

这里定义了文字、文字颜色、半径、圆形颜色、文字大小等属性， format用来指定属性的类型。

      系统提供了TypedArray数据结构来获取自定义属性值，通过TypedArray对象的getString()、getColor()等方法就可以获得xml中设置的属性值,需要注意的是获取完属性值后需要调用TypedArray的recycle方法来完成资源的回收：

TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.myView);
        mCircleText = ta.getString(R.styleable.myView_Text);
        mCircleColor = ta.getColor(R.styleable.myView_CircleColor,0);
        mTextColor = ta.getColor(R.styleable.myView_TextColor,0);
        radius = ta.getDimension(R.styleable.myView_Radius,50);
        mTextSize = ta.getDimension(R.styleable.myView_TextSize,15);
        ta.recycle();

获取到属性之后，通过Paint 的setcolor、setTextSize等函数定义画笔，就可以在屏幕上进行绘制了，我们要实现在圆形绘制一段文字，所以在onDraw中绘制完圆形后，通过调用drawText方法绘制文字，使用这个方法时需要注意参数的含义：

canvas.drawText(text,x,y,paint)

（1）text： 表示要绘制的文字内容

（2）x：表示对齐位置，通过调用paint的setTextAlign（Align align）方法，设置文字的对齐标准，Paint.Align.Center：以中心对齐，Paint.Align.LEFT以左边界对齐，Paint.Align.RIGHT以右边界对齐。

（3）y：表示字符baseline 的位置，这里需要特别注意，y不表示文字中心的高度，而表示文字基线的高度，基线是位于文字下方的，就像在直线上写英文字母一样，那条横线叫做基线。

（2）paint：是绘制的画笔

我们在以圆心位置对齐，绘制文字，所以x以中心对齐，设置宽对齐位置为圆心的位置，若要使文字的中心和圆心重合，需要使文字的基线在圆心下方Text.height（）/2的高度才能保证，通过获取问题的外接矩形就可以方便的知道文字的高，从而设置y的大小：

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getWidth();
        int height = getHeight();
        Rect bounds = new Rect();
        mTextPaint.getTextBounds(mCircleText,0,mCircleText.length(),bounds);
        canvas.drawCircle(width/2,height/2,radius,mPaint);
        canvas.drawText(mCircleText,width/2,height/2+bounds.height()/2,mTextPaint);
    }

这样就可以通过xml设置属性，来改变控件的大小、颜色以及文字，但是在设置前，一定要记得引用第三方空间的名字空间，在布局文件中可以看到：

xmlns:android="http://schemas.android.com/apk/res/android

xmlns即xml namespace，指定命名空间为android，所以在使用系统属性的时候可以使用android：来引用系统的属性，自定义的属性就需要创建自己的命名空间，AS中使用如下代码引入命名空间：

xmlns:custom="http://schemas.android.com/apk/res-auto"

将第三方名字空间取名为custom，然后使用自定义属性：

<my.project.ViewTest.myView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        custom:Text="my circle"
        custom:TextColor="#33ff00"
        custom:Radius="50dp"
        custom:CircleColor="#993300"
        custom:TextSize="20sp"
        />

效果图如下：

myView源码：

public class myView extends View {
    private int mCircleColor;
    private String mCircleText = "defuat";
    private int mTextColor;
    private float mTextSize;
    private TypedArray ta ;
    private float radius = 50;
    private Paint mPaint,mTextPaint;
    public myView(Context context) {
        super(context);

        init(context);
    }

    public myView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        ta = context.obtainStyledAttributes(attrs,R.styleable.myView);
        init(context);
    }

    public myView(Context context, AttributeSet attrs) {
        super(context, attrs);
        ta = context.obtainStyledAttributes(attrs,R.styleable.myView);
        init(context);
    }

    private void init(Context context){
        mCircleText = ta.getString(R.styleable.myView_Text);
        mCircleColor = ta.getColor(R.styleable.myView_CircleColor,0);
        mTextColor = ta.getColor(R.styleable.myView_TextColor,0);
        radius = ta.getDimension(R.styleable.myView_Radius,50);
        mTextSize = ta.getDimension(R.styleable.myView_TextSize,15);

        mPaint = new Paint();
        mTextPaint = new Paint();
        mTextPaint.setTextAlign(Paint.Align.CENTER);
        mTextPaint.setTextSize(mTextSize);
        mPaint.setColor(mCircleColor);
        mTextPaint.setColor(mTextColor);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getWidth();
        int height = getHeight();
        Rect bounds = new Rect();
        mTextPaint.getTextBounds(mCircleText,0,mCircleText.length(),bounds);
        canvas.drawCircle(width/2,height/2,radius,mPaint);
        canvas.drawText(mCircleText,width/2,height/2+bounds.height()/2,mTextPaint);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMeasured,heightMeasured;
        widthMeasured = measureWidth(widthMeasureSpec);
        heightMeasured = measureHeight(heightMeasureSpec);
        setMeasuredDimension(widthMeasured,heightMeasured);
    }
    private int measureHeight(int measureSpec){
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if(specMode == MeasureSpec.EXACTLY){
            result = specSize;
        }else{
            result = 200;
            if(specMode == MeasureSpec.AT_MOST){
                result = Math.min(result,specSize);
            }
        }
        return result;
    }

    private int measureWidth(int measureSpec){
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if(specMode == MeasureSpec.EXACTLY){
            result = specSize;
        }else{
            result = 200;
            if(specMode == MeasureSpec.AT_MOST){
                result = Math.min(result,specSize);
            }
        }
        return result;
    }


}