UI系列二 一种简单优雅的TextView行间距适配方案

原创 zhanghao 百度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。上下两个矩形框的间距就为文字的行间距，这从上面的测量效果图也可看出。

也就是说，即使没有设置lineSpacin