【百度架构师】技术公众号上线啦！！！
< 最过硬的技术干货、最前沿的行业资讯 >
< 还有线上沙龙、行业大会、招聘信息皆会出现于此 >
快来争做超强粉丝！
前期奖品丰盛、福利多多哦～
【扫描下方二维码，助你踏上技术强人之路！】

导读：TextView 的行间距在不同设施下的一致性体现不尽如人意，这给视觉 review 带来了不少麻烦，升高了 RD&UI 的工作效率，本文将摸索出了一套低危险高兼容性的解决方案。该计划可能齐全对立 TextView 的行间距，保障了 TextView 行间距在不同机型上的一致性体验，这极大水平缩小了 TextView 相干的视觉联调工夫，进步了大家的工作效率。

背景

视觉体验也是各种手机 APP 产品质量不能漠视的一环。目前市场上手机型号多种多样，各自屏幕的分辨率层出不穷，如何能在不同分辨率的屏幕上呈现出始终如一的显示成果，也是每一位同学想要理解的。

Android 的屏幕碎片化重大，各种屏幕分辨率层出不穷，而在不同分辨率的屏幕上显示出统一的成果，是百度 App 的研发团队和视觉团队独特谋求的指标。在百度 App 的 Android 开发中，TextView 的行间距屏幕适配问题在研发和视觉之间纠缠已久。

该图为热议页面的图文模板在三款设施上的显示成果。能够看到 TextView 的行间距在三款设施下的一致性体现不尽如人意，而这已成为日常 UI 开发以及视觉 review 过程中的一大痛点，升高了大家的工作效率。
上面将摸索一种简略优雅的的 TextView 行间距适配计划。

剖析

先来剖析下 TextView 在不同设施上行间距体现不统一的起因。百度 App 的 UI 团队应用 Sketch 工具来进行 UI 设计以及 UI review，因而本文接下来字体尺寸的测量都借助 Sketch 工具实现。

先看上面一个简略的 xml 布局:

<TextView` `android:id="@+id/title"` `android:layout_width="match_parent"` `android:layout_height="wrap_content"` `android:text="尽管此视图的理论布局取决于其父视图和任何同级视图中的其余属性。尽管。。。"` `android:textSize="16dp"/>`

将这段代码运行在不同分辨率的机型上，借助 Sketch 工具测量出各机型的行间距如下：

从图中可看出，同样的字号大小，在分辨率为 720 设施上，行间距测量后果为 5px；在分辨率为 1080 设施上，行间距测量后果为 9px。
接下来批改下字号，将 textSize 改成 24dp，并且看一下 Mate20 的成果:

<TextView
 android:id="@+id/title"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="尽管此视图的理论布局取决于其父视图和任何同级视图中的其余属性。尽管。。。"
 android:textSize="24dp"/>

在同一款设施（Mate 20）上，不同的字号，行间距的测量后果，如下图所示：

从图中可看到，在同样的设施上，不同的字号，行间距的测量后果也不一样。
具体表现为：字号越大，行间距越大。这就让人十分苦恼了，因为一旦字号产生了变动，行间距就受到影响，行间距必须得追随字号从新调整，无形之中就减少了额定的工作量。

读到这大家可能会有疑难：XML 布局中并没设置 lineSpacingExtra / lineSpacingMultiplier 属性，那么下面所测量的行间距是哪来的呢？

这是因为视觉对行间距的定义和 Android 系统对行间距的定义不统一导致的。视觉层面定义行间距非常简单：即应用 Sketch 工具在高低相邻的两行文字中输出大小雷同的文字，同时画出文字的矩形框，矩形框的高度为文字的大小，比方在 1080P，density= 3 的设计图中，文字大小为 16dp，那么矩形框的高度就设为 48px。高低两个矩形框的间距就为文字的行间距，这从下面的测量效果图也可看出。

也就是说，即便没有设置 lineSpacingExtra / lineSpacingMultiplier 属性，但从视觉的角度来讲，仍存在肯定的行间距。

那么在没有设置 lineSpacingExtra / lineSpacingMultiplier 属性的状况下，视觉所测量进去的行间距是什么起因导致的？

上面联合 TextView 源码详细分析下，首先看下图：

该图展现了一行文字的绘制所须要的要害坐标信息，图中的几根线示意字体的度量信息，在源码中与其绝对应的类为 FontMetrics.java，代码如下:

/**
 * Class that describes the various metrics for a font at a given text size.
 * Remember, Y values increase going down, so those values will be positive,
 * and values that measure distances going up will be negative. This class
 * is returned by getFontMetrics().
 */
public static class FontMetrics {
 /**
 * The maximum distance above the baseline for the tallest glyph in
 * the font at a given text size.
 */
 public float   top;
 /**
 * The recommended distance above the baseline for singled spaced text.
 */
 public float   ascent;
 /**
 * The recommended distance below the baseline for singled spaced text.
 */
 public float   descent;
 /**
 * The maximum distance below the baseline for the lowest glyph in
 * the font at a given text size.
 */
 public float   bottom;
 /**
 * The recommended additional space to add between lines of text.
 */
 public float   leading;
}

代码中对字体度量信息的每个字段含意的解释十分具体，大家看正文即可，就不再过多解释。
TextView 对每行文字坐标信息的计算细节是在 StaticLayout.java 类中的 out() 办法实现的，代码如下：

private int out(final CharSequence text, final int start, final int end, int above, int below,
 int top, int bottom, int v, final float spacingmult, final float spacingadd,
 final LineHeightSpan[] chooseHt, final int[] chooseHtv, final Paint.FontMetricsInt fm,
 final boolean hasTab, final int hyphenEdit, final boolean needMultiply,
 @NonNull final MeasuredParagraph measured,
 final int bufEnd, final boolean includePad, final boolean trackPad,
 final boolean addLastLineLineSpacing, final char[] chs,
 final int widthStart, final TextUtils.TruncateAt ellipsize, final float ellipsisWidth,
 final float textWidth, final TextPaint paint, final boolean moreChars) {
 final int j = mLineCount;
 // 偏移量，标识以后的行号
 final int off = j * mColumns;
 final int want = off + mColumns + TOP;
 // 一维数组，保留了 TextView 各行文字的计算出来的坐标信息。int[] lines = mLines;
 final int dir = measured.getParagraphDir();
 
 // 将所有的字体的度量信息存入 fm 变量中，而后通过 LineHeightSpan 接口将 fm 变量传递进来.
 // 这就给内部提供了一个接口去批改字体的度量信息。if (chooseHt != null) {
 fm.ascent = above;
 fm.descent = below;
 fm.top = top;
 fm.bottom = bottom;
 for (int i = 0; i < chooseHt.length; i++) {if (chooseHt[i] instanceof LineHeightSpan.WithDensity) {((LineHeightSpan.WithDensity) chooseHt[i])
 .chooseHeight(text, start, end, chooseHtv[i], v, fm, paint);
 } else {chooseHt[i].chooseHeight(text, start, end, chooseHtv[i], v, fm);
 }
 }
 // 获取批改后的字体度量属性
 above = fm.ascent;
 below = fm.descent;
 top = fm.top;
 bottom = fm.bottom;
 }
 
 if (firstLine) {if (trackPad) {mTopPadding = top - above;}
 if (includePad) {// 如果以后行是 TextView 的第一行文字，above(ascent) 值应用 top 代替。above = top;
 }
 }
 int extra;
 if (lastLine) {if (trackPad) {mBottomPadding = bottom - below;}
 if (includePad) {// 如果以后行是 TextView 的最初一行文字，below(descent) 值应用 bottom 代替。below = bottom;
 }
 }
 if (needMultiply && (addLastLineLineSpacing || !lastLine)) {
 // 计算行间距
 // spacingmult 变量对应 lineSpacingMultiplier 属性配置的值
 // spacingadd 变量对应 lineSpacingExtra 属性配置的值。double ex = (below - above) * (spacingmult - 1) + spacingadd;
 if (ex >= 0) {extra = (int)(ex + EXTRA_ROUNDING);
 } else {extra = -(int)(-ex + EXTRA_ROUNDING);
 }
 } else {extra = 0;}
 // 将以后行的坐标信息存入 mLines[] 数组中
 lines[off + START] = start;
 lines[off + TOP] = v;
 lines[off + DESCENT] = below + extra;
 lines[off + EXTRA] = extra;
 // 计算下一行的的 top 值
 v += (below - above) + extra;
 
 mLineCount++;
 return v;
}

因为篇幅起因，省略了一些无关代码。上面对要害代码都给出了具体的正文，这里就不过多解释。通过第 87 行，可得出如下两个公式：

• top 坐标计算：下一行 Top 值 = 本行 Top 值 + 行高
• 行高计算（排除第一行和最初一行）：行高 = descent – ascent + 行间距 (descent 值为正，ascent 值为负)

为了不便大家了解行高，我把每行文字的 baseline 和 top 这两根线画了进去，红色的线是 baseline 基线，绿色的线是 top 线，相邻两条绿线之间的间隔即为行高，如下图所示：

到这里，根本可能解释，在没有设置 lineSpacingExtra / lineSpacingMultiplier 属性的状况下，Sketch 工具量出的行间距起因：咱们晓得每行文字以 baseline 作为基线来绘制，在 ascent 范畴内绘制基线以上的局部，在 descent 范畴内绘制基线以下局部。

因为汉字不会像英文那样高下不一，是十分参差的方块字。

而汉字在 descent 范畴内绘制基线以下局部时，并没有占满 descent 所有空间，会空出一部分间隔，在 ascent 范畴内绘制基线以上局部时，也是同样的情理。所以，Sketch 测量进去的行间距就是上一行汉字占据的 descent 范畴后的残余空间加上下一行汉字占据的 ascent 范畴后的残余空间。

适配计划

通过下面剖析，理解到 TextView 的自带行间距是因为绘制的汉字没有占满 descent 和 ascent 的空间引起的，且该行间距在不同的字号以及分辨率下体现不一。

若可能去除掉这部分行间距，就能达到适配目标。怎么去除呢？咱们再看一下零碎 TextView 和视觉对一行文字行高的定义：

• TextView：行高 = descent – ascent (descent 值为正，ascent 值为负)
• 视觉：行高 = 字体大小 (比方 16dp 的文字，行高 =48px

只有可能批改 TextView 的默认行高，让其和视觉定义的行高放弃对立，就能去除掉这部分行间距。

怎么批改 TextView 的默认行高呢？
其实 TextView 在设计的时候，提供了一个接口去批改 TextView 的行高。
回到上面对 TextView 的源码剖析，第 20 行 - 第 39 行，将字体的度量信息存入 fm 变量中，而后通过 LineHeightSpan 接口将 fm 变量传递进来，咱们借助这个 LineHeightSpan 就能够批改 TextView 的行高。
最终适配计划如下：

public class ExcludeInnerLineSpaceSpan implements LineHeightSpan {
 // TextView 行高
 private final  int mHeight;
 public ExcludeInnerPaddingSpan(int height) {mHeight = height;}

 @Override
 public void chooseHeight(CharSequence text, int start, int end,
 int spanstartv, int lineHeight,
 Paint.FontMetricsInt fm) {

 // 原始行高
 final int originHeight = fm.descent - fm.ascent;
 if (originHeight <= 0) {return;}
 // 计算比例值
 final float ratio = mHeight * 1.0f / originHeight;
 // 依据最新行高，批改 descent
 fm.descent = Math.round(fm.descent * ratio);
 // 依据最新行高，批改 ascent
 fm.ascent = fm.descent - mHeight;
}
}

类 ExcludeInnerLineSpaceSpan 实现 LineHeightSpan 接口，这个类用于去除 TextView 的自带行间距。
第 5 行，构造函数，以最新的行高作为参数传入。
第 14 行，计算出原始行高。
第 19 行，计算出新行高和原始行高的比例值。
第 21 行 - 第 23 行，依据比例值批改字体度量的 ascent 参数和 descent 参数。

接下来自定义个 TextView 进去，提供一个 setCustomText() 办法进去，供应用方调用。代码如下：

public class ETextView extends TextView {
 /**
 * 排除每行文字间的 padding
 *
 * @param text
 */
 public void setCustomText(CharSequence text) {if (text == null) {return;}
 // 取得视觉定义的每行文字的行高
 int lineHeight = (int) getTextSize();
 SpannableStringBuilder ssb ;
 if (text instanceof SpannableStringBuilder) {ssb = (SpannableStringBuilder) text;
 // 设置 LineHeightSpan
 ssb.setSpan(new ExcludeInnerLineSpaceSpan(lineHeight),
 0, text.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
 } else {ssb = new SpannableStringBuilder(text);
 // 设置 LineHeightSpan
 ssb.setSpan(new ExcludeInnerLineSpaceSpan(lineHeight),
 0, text.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
 }
 // 调用零碎 setText() 办法
 setText(ssb);
 }
}

ShowCase

该计划应用零碎公开 API，简略，侵入性低。并已在百度 App 热议页面上线，适配成果前后比照，如下图所示：

带给用户优雅简略的视觉体验，也是同学们不懈谋求产品质量的体现。看完文章后，你是不是对手机 TextView 行间距适配计划有了新的启发？欢送大家到关注公众号留言，与作者探讨心得～