API DEMO LabelView分析

LabelView是Android API DEMO中的一个例子，演示了如何写一个简单的自定义View。

先看一下效果

布局文件是这样的：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res/com.example.labelview"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <com.example.labelview.LabelView
            android:background="@android:color/holo_blue_light"
            android:layout_width="match_parent"
            android:layout_height="match_parent" 
            app:text="Red"/>
    
    <com.example.labelview.LabelView
            android:background="@android:color/holo_red_light"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            app:text="Blue" 
            app:textSize="20dp"/>
    
    <com.example.labelview.LabelView
            android:background="@android:color/holo_purple"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            app:text="Green" 
            app:textColor="#ffffffff" />

</LinearLayout>

xml元素名com.example.labelview.LabelView，对于自定义的控件，要写上它完整的包路径

LabelVIew的路径如图所示：

注意到标签中的app:text，app:textColor，app:textSize属性都是控件的自定义属性，app:前缀是labelview专属的，定义它的步骤如下：

1.在布局文件中声明命名空间

LinearLayout元素下的xmlns:app="http://schemas.android.com/apk/res/com.example.labelview" 属性，声明了app：这个自定义View属性，格式为：

xmlns:命名空间  /res/应用程序包名。

2,在attrs.xml中定义属性类型

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="LabelView">
        <attr name="text" format="string" />
        <attr name="textColor" format="color" />
        <attr name="textSize" format="dimension" />
    </declare-styleable>   
</resources>

3.在布局文件xml中使用这个属性

app:text="Red"

app:textSize="20dp"

app:textColor="#ffffffff"

4.在代码中实现初始化。

LabelView的代码：

public class LabelView extends View {
    private Paint mTextPaint;
    private String mText;
    private int mAscent;
    
    /**
     * Constructor.  This version is only needed if you will be instantiating
     * the object manually (not from a layout XML file).
     * @param context
     */
    public LabelView(Context context) {
        super(context);
        initLabelView();
    }

    /**
     * Construct object, initializing with any attributes we understand from a
     * layout file. These attributes are defined in
     * SDK/assets/res/any/classes.xml.
     * 
     * @see android.view.View#View(android.content.Context, android.util.AttributeSet)
     */
    public LabelView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initLabelView();

        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.LabelView);

        CharSequence s = a.getString(R.styleable.LabelView_text);
        if (s != null) {
            setText(s.toString());
        }

        // Retrieve the color(s) to be used for this view and apply them.
        // Note, if you only care about supporting a single color, that you
        // can instead call a.getColor() and pass that to setTextColor().
        setTextColor(a.getColor(R.styleable.LabelView_textColor, 0xFF000000));

        int textSize = a.getDimensionPixelOffset(R.styleable.LabelView_textSize, 0);
        if (textSize > 0) {
            setTextSize(textSize);
        }

        a.recycle();
    }

    private final void initLabelView() {
        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        // Must manually scale the desired text size to match screen density
        mTextPaint.setTextSize(16 * getResources().getDisplayMetrics().density);
        mTextPaint.setColor(0xFF000000);
        setPadding(20, 3, 3, 3);
    }

    /**
     * Sets the text to display in this label
     * @param text The text to display. This will be drawn as one line.
     */
    public void setText(String text) {
        mText = text;
        requestLayout();
        invalidate();
    }

    /**
     * Sets the text size for this label
     * @param size Font size
     */
    public void setTextSize(int size) {
        // This text size has been pre-scaled by the getDimensionPixelOffset method
        mTextPaint.setTextSize(size);
        requestLayout();
        invalidate();
    }

    /**
     * Sets the text color for this label.
     * @param color ARGB value for the text
     */
    public void setTextColor(int color) {
        mTextPaint.setColor(color);
        invalidate();
    }

    /**
     * @see android.view.View#measure(int, int)
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    	Log.v("test", "onMeasure");
        setMeasuredDimension(measureWidth(widthMeasureSpec),
                measureHeight(heightMeasureSpec));
    }

    /**
     * Determines the width of this view
     * @param measureSpec A measureSpec packed into an int
     * @return The width of the view, honoring constraints from measureSpec
     */
    private int measureWidth(int measureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if (specMode == MeasureSpec.EXACTLY) {
            // We were told how big to be
            result = specSize;
        } else {
            // Measure the text
            result = (int) mTextPaint.measureText(mText) + getPaddingLeft()
                    + getPaddingRight();
            if (specMode == MeasureSpec.AT_MOST) {
                // Respect AT_MOST value if that was what is called for by measureSpec
                result = Math.min(result, specSize);
            }
        }

        return result;
    }

    /**
     * Determines the height of this view
     * @param measureSpec A measureSpec packed into an int
     * @return The height of the view, honoring constraints from measureSpec
     */
    private int measureHeight(int measureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        mAscent = (int) mTextPaint.ascent();
        if (specMode == MeasureSpec.EXACTLY) {
            // We were told how big to be
            result = specSize;
        } else {
            // Measure the text (beware: ascent is a negative number)
        	//-asent+desent = 字符的高度，再加上山下的padding等于这个view的总高度
            result = (int) (-mAscent + mTextPaint.descent()) + getPaddingTop()
                    + getPaddingBottom();
            if (specMode == MeasureSpec.AT_MOST) {
                // Respect AT_MOST value if that was what is called for by measureSpec
                result = Math.min(result, specSize);
            }
          
        }
        return result;
    }

    /**
     * Render the text
     * 
     * @see android.view.View#onDraw(android.graphics.Canvas)
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.v("test", "onDraw");
        //y是指定这个字符baseline在屏幕上的位置        
        canvas.drawText(mText, getPaddingLeft(),  
			((int) (-mAscent  + getPaddingTop())), 
		mTextPaint);
    }
    
}

先看构造方法

    public LabelView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initLabelView();

        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.LabelView);

        CharSequence s = a.getString(R.styleable.LabelView_text);
        if (s != null) {
            setText(s.toString());
        }

        // Retrieve the color(s) to be used for this view and apply them.
        // Note, if you only care about supporting a single color, that you
        // can instead call a.getColor() and pass that to setTextColor().
        setTextColor(a.getColor(R.styleable.LabelView_textColor, 0xFF000000));

        int textSize = a.getDimensionPixelOffset(R.styleable.LabelView_textSize, 0);
        if (textSize > 0) {
            setTextSize(textSize);
        }

        a.recycle();
    }

intiLavbelVIew方法设置了Paint对象绘制时的一些初始值。

        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.LabelView);

获得了attrs.xml中定义的属性类型，然后用TypedArray对象中的方法获得具体的值，因为attr文件中，text是string类型的，所以用getString，textSize和textColor分别对应getColor和getDimensionPixelOffset。最后要调用a.recycle();回收TypedArray对象。

注意到 setTextSize方法：

  public void setTextSize(int size) {
        // This text size has been pre-scaled by the getDimensionPixelOffset method
        mTextPaint.setTextSize(size);
        requestLayout();
        invalidate();
    }

requestLayout的调用会触发View的onMeasure过程，invalidate的调用会触发View的onDraw过程。

View的绘制流程中，onMeasure用来测量控件的尺寸，onDraw用来绘制图形

其他2个设置text的方法，

    public void setText(String text) {
        mText = text;
        requestLayout();
        invalidate();
    }

    public void setTextColor(int color) {
        mTextPaint.setColor(color);
        invalidate();
    }

可以看到setTextColor并没有调用requestLayout方法，因为设置字体的颜色并不需要变化字体的大小形状，所以不用测量，就不需要走onMeasure的流程，自然不需调用requestLayout方法。

LabelView重写了onMeasure方法

        setMeasuredDimension(measureWidth(widthMeasureSpec),
                measureHeight(heightMeasureSpec));

用来设置测量完毕的尺寸，宽度和高的测量是通过measureWidth和measureHeight进行的。

measureWidth：

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

        if (specMode == MeasureSpec.EXACTLY) {
            // We were told how big to be
            result = specSize;
        } else {
            // Measure the text
            result = (int) mTextPaint.measureText(mText) + getPaddingLeft()
                    + getPaddingRight();
            if (specMode == MeasureSpec.AT_MOST) {
                // Respect AT_MOST value if that was what is called for by measureSpec
                result = Math.min(result, specSize);
            }
        }

        return result;
    }

onMeasure传入的widthMeasureSpec和heightMeasureSpec不是一般的尺寸数值，而是将模式和尺寸组合在一起的数值，需要用静态方法getMode和getSize分别取出

MeasureSpec.getMode获取MeasureSpec的Mode，MeasureSpec的Mode有三种类型：

MeasureSpec.AT_MOST

MeasureSpec.EXACTLY
MeasureSpec.UNSPECIFIED

调试代码时，发现MeasureSpec.getSize会返回屏幕的真实宽度，mode和布局xml中宽度属性值的对应关系为：

xx dp：specMode == MeasureSpec.EXACTLY

wrap_content：specMode == MeasureSpec.AT_MOST

match_parent：specMode ==MeasureSpec.EXACTLY

所以，如果布局中是具体的dp的话，result返回dp换算后的实际px。而如果是match_parent的话，会返回MeasureSpec.getSize的值，即屏幕的实际宽度。如果是wrap_content的话，会先调用Paint的measureText方法算出text的具体宽度然后返回。

再来看measureHeight方法：

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

        mAscent = (int) mTextPaint.ascent();
        if (specMode == MeasureSpec.EXACTLY) {
            // We were told how big to be
            result = specSize;
        } else {
            // Measure the text (beware: ascent is a negative number)
        	//-asent+desent = 字符的高度，再加上山下的padding等于这个view的总高度
            result = (int) (-mAscent + mTextPaint.descent()) + getPaddingTop()
                    + getPaddingBottom();
            if (specMode == MeasureSpec.AT_MOST) {
                // Respect AT_MOST value if that was what is called for by measureSpec
                result = Math.min(result, specSize);
            }
          
        }
        return result;
    }

大体上和measureWidth差不多。计算字体高度的方式很有意思，涉及到baseLine的问题，

以下图片来自网络，说明baseLine和各个属性的关系

ascent：是baseline之上至字符最高处的距离
descent：是baseline之下至字符最低处的距离

所以用如下代码计算字体高度

            result = (int) (-mAscent + mTextPaint.descent()) + getPaddingTop()
                    + getPaddingBottom();

最后来看onDraw方法，它负责具体的绘制

    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);        
        canvas.drawText(mText, getPaddingLeft(),  
			((int) (-mAscent  + getPaddingTop())), 
		mTextPaint);
    }

使用画布对象canvas绘制字体，参数是：显示的字体内容，x坐标，y坐标，paint对象