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

导读：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行间距适配计划有了新的启发？欢送大家到关注公众号留言，与作者探讨心得～