当前位置:XML > XML市场

百度秘籍如何简单优雅的适配textvie

导读:TextView的行间距在不同设备下的一致性表现不尽如人意,这给视觉review带来了不少麻烦,降低了RDUI的工作效率,本文将探索出了一套低风险高兼容性的解决方案。该方案能够完全统一TextView的行间距,保证了TextView行间距在不同机型上的一致性体验,这极大程度减少了TextView相关的视觉联调时间,提高了大家的工作效率。

背景

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

Android的屏幕碎片化严重,各种屏幕分辨率层出不穷,而在不同分辨率的屏幕上显示出一致的效果,是百度App的研发团队和视觉团队共同追求的目标。在百度App的Android开发中,TextView的行间距屏幕适配问题在研发和视觉之间纠缠已久。

该图为热议页面的图文模板在三款设备上的显示效果。可以看到TextView的行间距在三款设备下的一致性表现不尽如人意,而这已成为日常UI开发以及视觉review过程中的一大痛点,降低了大家的工作效率。

下面将探索一种简单优雅的的TextView行间距适配方案。

分析

先来分析下TextView在不同设备上行间距表现不一致的原因。百度App的UI团队使用Sketch工具来进行UI设计以及UIreview,因此本文接下来字体尺寸的测量都借助Sketch工具完成。

先看下面一个简单的xml布局:

TextViewandroid:id="

+id/title"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="虽然此视图的实际布局取决于其父视图和任何同级视图中的其他属性。虽然。。。"android:textSize="16dp"/

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

从图中可看出,同样的字号大小,在分辨率为设备上,行间距测量结果为5px;在分辨率为设备上,行间距测量结果为9px。

接下来修改下字号,将textSize改成24dp,并且看一下Mate20的效果:

TextViewandroid:id="

+id/title"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="虽然此视图的实际布局取决于其父视图和任何同级视图中的其他属性。虽然。。。"android:textSize="24dp"/

在同一款设备(Mate20)上,不同的字号,行间距的测量结果,如下图所示:

从图中可看到,在同样的设备上,不同的字号,行间距的测量结果也不一样。

具体表现为:字号越大,行间距越大。这就让人非常苦恼了,因为一旦字号发生了变化,行间距就受到影响,行间距必须得跟随字号重新调整,无形之中就增加了额外的工作量。

读到这大家可能会有疑问:XML布局中并没设置lineSpacingExtra/lineSpacingMultiplier属性,那么上面所测量的行间距是哪来的呢?

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

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

那么在没有设置lineSpacingExtra/lineSpacingMultiplier属性的情况下,视觉所测量出来的行间距是什么原因导致的?

下面结合TextView源码详细分析下,首先看下图:

该图展示了一行文字的绘制所需要的关键坐标信息,图中的几根线表示字体的度量信息,在源码中与其相对应的类为FontMetrics.java,代码如下:

/***Classthatdescribesthevariousmetricsforafontatagiventextsize.*Remember,Yvaluesincreasegoingdown,sothosevalueswillbepositive,*andvaluesthatmeasuredistancesgoingupwillbenegative.Thisclass*isreturnedbygetFontMetrics().*/publicstaticclassFontMetrics{/***Themaximumdistanceabovethebaselineforthetallestglyphin*thefontatagiventextsize.*/publicfloattop;/***There


转载请注明:http://www.vviuov.com/jbwh/1062942.html

  • 上一篇文章:
  • 下一篇文章: 没有了