android开发还原设计稿,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

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

参考资料

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