android 自定义view之文本绘制解析

大家好，我是萌萌哒的milk,这是我的第一篇博客，决定和大家讨论一些自定义View中几乎都会碰到的问题，如何让我的自定义的文本出现在我想要的位置，或者进一步讲，让文本在某个控件中居于中间位置。当然，如果你的自定义view中不涉及文本的话，关注一下本篇blog又不会怀孕。
解决文本绘制最关键的因素就是——测量。

• 测量文本的宽度，高度
• 测量文本在父容器中的位置

首先让我们来看一下获取文本宽高的两种常用的方法。

1. 根据Paint类中的getTextBounds方法
2. 从文字的绘制原理入手，获取宽高。

让我们来看第一种方法

        //初始化画笔
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        String text = "hello";
        //初始rect
        Rect bound = new Rect();
        //调用画笔自带api,将字符串的测量后的值塞给bound
        paint.getTextBounds("hello",0,text.length(),bound);
        //字符串高度
        int textHeight = bound.height();
        //字符串宽度
        int textWidth = bound.width();

上面的代码已经注释很详细了，当然，字符串宽度的获取方法还有另外一种

        //字符串宽度第二种获得方法
        float textWidth2 = mPaint.measureText(text);

哪一种更为精确了?通过源码我们发现它们分别调用了

//getTextBounds()方法调用
private static native void nGetStringBounds(long nativePaint, long typefacePtr,
                                String text, int start, int end, int bidiFlags, Rect bounds);
//measureText()方法调用                              
private static native float nGetTextAdvances(long paintPtr, long typefacePtr,
            String text, int start, int end, int contextStart, int contextEnd,
            int bidiFlags, float[] advances, int advancesIndex);

这就比较抓瞎了，笔者对jni的机制并不是很清楚，但是通过第二种方法返回结果为float的精度来看，初步估计第二种测量文本的宽度更加精确。

接下来我们看第二种方法，从文字绘制原理入手（以下内容摘自网络，重点部分加黑）

解释一下这张图片。
Baseline是基线，在Android中，文字的绘制都是从Baseline处开始的，Baseline往上至字符“最高处”的距离我们称之为ascent（上坡度），Baseline往下至字符“最低处”的距离我们称之为descent（下坡度）；

　leading（行间距）则表示上一行字符的descent到该行字符的ascent之间的距离；
　
　top和bottom文档描述地很模糊，其实这里我们可以借鉴一下TextView对文本的绘制，TextView在绘制文本的时候总会在文本的最外层留出一些内边距，为什么要这样做？因为TextView在绘制文本的时候考虑到了类似读音符号，下图中的A上面的符号就是一个拉丁文的类似读音符号的东西：

Baseline是基线，Baseline以上是负值，以下是正值，因此 ascent，top是负值， descent和bottom是正值。

以上信息需要注意的是两个地方，文字是从Baseline开始绘制，并且Baseline以上是正值 以下是负值。

通过以上原理，我们似乎找到第二种计算高度的方法

        Paint.FontMetricsInt fm = mPaint.getFontMetricsInt();
        int textHeight2 = Math.abs(fm.bottom-fm.top);

这样通过上面的铺垫，我们有两种计算文本高度，两种计算文本文本宽度的方法:

        //字符串宽度
        int textWidth = bound.width();
        float textWidth2 = mPaint.measureText(text);
        //---------------高度----------------
        //字符串高度
        int textHeight = bound.height();
        int textHeight2 =Math.abs(fm.bottom-fm.top);

然而我们应该如何进行取舍了。让我们通过让文字居中的样例来进行测试，我们以系统自带的TextView作为对比样例进行测试。

让文本居中的核心无非是确定其起始点左下角的坐标（X,Y），一般情况下：X=控件宽度/2 - 文本宽度/2；Y=控件高度/2 + 文本宽度/2

我们先自定义一个CustomTextView继承view,先测量

    /**
     * 继承View的话，wrap_content测量方法需要重写，否则其效果等同于match_parent
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int width = measureAgain(MEASURE_WIDTH,widthMeasureSpec);
        int height = measureAgain(MEASURE_HEIGHT,heightMeasureSpec);
        setMeasuredDimension(width,height);
    }

    private int  measureAgain(int attr, int measureSpec) {

        int newSize = 0;
        int mode = MeasureSpec.getMode(measureSpec);
        int oldSize = MeasureSpec.getSize(measureSpec);
        switch (mode){
            case MeasureSpec.EXACTLY:
                //精准测量,相信系统
                newSize = oldSize;
                break;
            case MeasureSpec.AT_MOST:
            case MeasureSpec.UNSPECIFIED:
                //需要自己测量
                if (attr == MEASURE_WIDTH){
                    newSize = getPaddingLeft()+getPaddingRight()+mBound.width();
                }else {
                    newSize = getPaddingTop()+getPaddingBottom()+mBound.height();
                }

                break;
        }

        return newSize;
    }

再画出来

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //控件宽度
        int width = getMeasuredWidth();
        //控件高度
        int height = getMeasuredHeight();
        //起始点X坐标
        int startX = width/2 - mBound.width()/2;
        //起始点Y坐标
        int startY= height/2 -mBound.height()/2;
        canvas.drawText(mText,startX,startY,mPaint);
        //画一条中线进行区分
        mLinePaint.setColor(Color.RED);
        mLinePaint.setStrokeWidth(3);
        canvas.drawLine(0,height/2,width,height/2,mLinePaint);

    }

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:milk="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_marginLeft="5dp"
        android:background="#ADD597"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25sp"
        android:textColor="#000000"
        android:text="gg milk 123"
        android:id="@+id/textView"/>

    <com.example.customtextview.CustomTextVeiw
        android:layout_marginLeft="5dp"
        android:layout_marginTop="3dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ADD597"
        milk:text="gg milk 123"
        milk:textColor="#000000"
        milk:textSize="25sp"/>


</LinearLayout>

最后得到的效果如下图所示

可以很明显感觉到 高度测量的并不准确 ，于是我们采取第二种高度方案，测量高度时

 newSize = getPaddingTop()+getPaddingBottom()+Math.abs(mFm.bottom- mFm.top);

重新绘画时候，坐标再次计算

        //起始点X坐标
        int startX = width/2 - mBound.width()/2;
        //起始点Y坐标
        int startY= height/2- mFm.descent +Math.abs(mFm.bottom- mFm.top)/2;

然后我们再看下效果

看第三个图的效果，这样就算是比较正常了~~
至于起始点Y的坐标，可能有的同学不理解，让我来分解下你们就知道了

int startY= height/2；

效果：

int startY= height/2-mFm.descent；

效果：

然后再下沉整个字体的一半，整个居中就完成了。如果还不理解的话，请把上面文字绘制原理多读几遍。

最后总结：

• 字体宽度：mBound.width()或者 mPaint.measureText(text)均可以 。
• 字体高度：Math.abs(mFm.bottom- mFm.top)更为准确。
• 如果居中的话 startY = height/2- mFm.descent +Math.abs(mFm.bottom- mFm.top)/2；这种算法更加精确。

好了，我的第一篇blog就这么完成了，如果有什么错误遗漏的地方，欢迎大家留言一起讨论讨论。

最后附上源码下载链接

源码下载