TextView设计稿完美还原思考

在开发工程师与设计师配合过程中,经常会遇到的问题就是设计师提供设计图,开发工程师严格按照设计图开发完成,但结果就是无法做到设计稿完美还原,需要在后期进行视觉走查的过程中进行微调,占用开发时间,本着效率优先,寻找解决方案,过程中也带来了一些个人思考,在这里和大家分享一下。

原因探讨

原因很简单,其实用一张图就可以解答清楚,但目前网上流传的很多图片本身就存在问题,或者说没有问题,原因我之后会说。
我们先来看一下Android Developer Document里对FontMetrics的介绍:

name description
ascent The recommended distance above the baseline for singled spaced text.(在单行文字里距离baseline之上推荐的距离)
bottom The maximum distance below the baseline for the lowest glyph in the font at a given text size.(距离baseline之下最大的距离)
descent The recommended distance below the baseline for singled spaced text. (在单行文字里距离baseline之下推荐的距离)
leading The recommended additional space to add between lines of text.(在行间距推荐的额外空间)
top The maximum distance above the baseline for the tallest glyph in the font at a given text size.(距离baseline之上最大的距离)

然后看下目前关于FontMetrics使用比较广的图:

可能存在问题的图片.png

这张图其实已经很形象的展示了ascent、descent、leading和hight的关系,貌似没看到bottom和top,别急,接下来我们在Android里面把这5个参数画出来,看图:


Android示意图.png

从上往下分别是:top、ascent、baseline、descent和bottom,leading一般都为0,我们可以看到,ascent并没有完全贴合在Apple上面,和设想中的并不一样,主要原因是Android里面的字体为了兼容更多的语言,留有特殊符号的空间,例如"ÄÖÜ",所以图一其实误导了开发者,但说图一大错特错其实也不对,我们可以在Typeface Wiki里面找到答案:

The ascent and descent may or may not include distance added by accents or diacritical marks.

这句话的意思就是ascent和descent有、或者没有包含变音符。
关于FontMetrics的使用,可以看下博文自定义控件其实很简单1/4,写的非常棒,在这里我就不复述了,推荐大家去看下。

方案思考

OK,我们其实已经找到原因了,但并没有找到完美的解决方案,虽然Android心怀好意给我们考虑了变音符的空间,但对我们而言并没有什么卵用,因为在平时开发中并用不到,而且这距离还无法准确计算,只给出了ascent和top,可以通过top-ascent(因为top和ascent都是负数,计算是应该是ascent-top)来估算出上边距,而通过bottom-descent来估算出下边距,如果还想要进一步精确,只能通过工具去测量得出了,风险是有些没有考虑到的字体会出现不准确的情况,这就要视具体情况而定了。

工具

了解情况之后,我就开发了一个工具给设计师,让她可以查看不同字体大小出现的上下边距,如图:

工具.png
字体大小对应表.png
测量字体大小.png
字体演示.png

如果大家有更好的方法,欢迎交流讨论,留下高见,谢谢!

参考资料

自定义控件其实很简单1/4
Typeface Wiki
FontMetrics
Meaning of top, ascent, baseline, descent, bottom, and leading in Android's FontMetrics

可以随意转发,也欢迎关注我的简书,我会坚持给大家带来分享。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,951评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,606评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,601评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,478评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,565评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,587评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,590评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,337评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,785评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,096评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,273评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,935评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,578评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,199评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,440评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,163评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,133评论 2 352

推荐阅读更多精彩内容