用這個(gè)免費(fèi)的 Sketch 插件，幫你完善還原安卓界面！

你是否也曾被 Android「慘不忍睹」的實(shí)現(xiàn)界面搞得焦頭爛額，一度嫌疑安卓開(kāi)發(fā)小哥的能力是否不及格，幾乎都快要對(duì)安卓無(wú)望了。從如今開(kāi)始無(wú)須憂慮，這篇文章肯定會(huì)讓你對(duì)安卓重拾信念，配合開(kāi)發(fā)做到安卓界面完善還原。

插件地址：https://github.com/zz379/AutoFixAndroidTextLineHeight.git

插件下載：https://pan.baidu.com/s/1Oh_Y0nxOFV8LBdxxhdVPag

一、原由

每一次接過(guò)安卓測(cè)試機(jī)驗(yàn)收安卓的實(shí)現(xiàn)界面，都懷著無(wú)比忐忑的心情。不出不測(cè)每次都被「隨性」的界面所折服，然后花上N次的加班時(shí)間來(lái)一點(diǎn)點(diǎn)的調(diào)整。在近期項(xiàng)目結(jié)束后打算找到每個(gè)「隨性」界面的題目所在。終于在旁觀了開(kāi)發(fā)搭界面的過(guò)程中，發(fā)現(xiàn)了題目的關(guān)鍵：安卓文本框上下空白間隙。

經(jīng)過(guò)測(cè)量發(fā)現(xiàn)，界面實(shí)現(xiàn)出來(lái)的文本框高度占比要比設(shè)計(jì)圖中筆墨高度高出一大截。文本框在表現(xiàn)筆墨的基礎(chǔ)上，上下留有相稱距離的空白間隙。這個(gè)間隙就成了安卓界面還原題目的關(guān)鍵所在。

通過(guò)互聯(lián)網(wǎng)查找解決題目的答案，試圖通曩昔除開(kāi)發(fā)時(shí)文本框控件上下間隙的辦法來(lái)解決這一題目。最終找到的辦法有兩種：

方法一：自定義文本控件

不使用體系默認(rèn)文本框控件，自定義每個(gè)文本框的寬高。雖然自定義控件的辦法可以消弭控件中的上下間隙，但這個(gè)辦法又產(chǎn)生了新題目，由于每一個(gè)文本框都必要單獨(dú)寫(xiě)一層自定義寬高，這無(wú)疑是增長(zhǎng)了一層布局深度，假如整個(gè) APP 都使用這種體例來(lái)表現(xiàn)文本，會(huì)很大程度的影響產(chǎn)品的性能。所以這個(gè)方法不可取。

方法二：增長(zhǎng)一條去間隙的代碼

這是一個(gè)在許多論壇都提及過(guò)的一條代碼，作用是可以消弭文本框的上下間隙：android:includeFontPadding=”false”

當(dāng)加入這條代碼之后，文本框高度雖然有所改變，但并不是完全消弭，并且也無(wú)法保證消弭后的高度與設(shè)計(jì)圖中文本框高度同等。所以這個(gè)辦法也沒(méi)有完全的解決這一題目。

當(dāng)消弭文本框間隙方法行不通時(shí)，那就只能換一種思考體例來(lái)解決題目。那就是增長(zhǎng)設(shè)計(jì)圖中的文本行高，使得設(shè)計(jì)和實(shí)現(xiàn)界面文本框所占高度保持同等。

這種辦法在互聯(lián)網(wǎng)中有許多文章都曾提到，那就是在使用 sketch 進(jìn)行界面設(shè)計(jì)時(shí)，筆墨的行高設(shè)置。但是大部分的文章都只提到一個(gè)也許的行高與字號(hào)比例，如1.2倍、1.4倍等。沒(méi)有正確的對(duì)應(yīng)數(shù)值和驗(yàn)證過(guò)程。

但前段時(shí)間由@Gis1on 和@Youngxkk 兩人分享的《主動(dòng)修復(fù)iOS筆墨行高》的文章中細(xì)致的列舉了在 iOS 平臺(tái)上，文本控件的高度與字號(hào)的對(duì)應(yīng)關(guān)系，并找到其中規(guī)律，開(kāi)發(fā)了 sketch 插件，主動(dòng)修復(fù)設(shè)計(jì)圖中不同字號(hào)的行高，使得修復(fù)后的行高與 iOS 開(kāi)發(fā)平臺(tái)中的文本框高度同等。高效的解決了 iOS 平臺(tái)界面實(shí)現(xiàn)與設(shè)計(jì)圖因文本所帶來(lái)的差異。

這篇文章對(duì)我有很大的啟發(fā)?？上У氖?，他們只解決了 iOS 的題目，但現(xiàn)實(shí)工作中安卓界面的還原情況更令人擔(dān)憂，只有解決了文本框間隙高度這一題目，才會(huì)有安卓完善還原設(shè)計(jì)的可能。

榮幸的是，團(tuán)隊(duì)新來(lái)了一位安卓開(kāi)發(fā)工程師@zz379。和他簡(jiǎn)單的溝通后，他也意識(shí)到這個(gè)題目的關(guān)鍵性。我也感覺(jué)到了他尋求完善還原的態(tài)度。和他探究之后，我們決定在 iOS 主動(dòng)修復(fù)插件的基礎(chǔ)上，通過(guò)現(xiàn)實(shí)的測(cè)量，制作一個(gè)針對(duì)安卓筆墨行高優(yōu)化的插件，來(lái)高效的解決這一棘手的題目。

二、測(cè)量

先放測(cè)量效果，見(jiàn)下圖：

1. 測(cè)量大小范圍10-70，測(cè)量單位：PX

為什么選擇測(cè)量范圍為10-70？

常用安卓設(shè)計(jì)稿尺寸有兩種一種是360*640；另一種就是720*1280。而在720*1280的尺寸中常用到的筆墨的大小，包含了360*640尺寸設(shè)計(jì)圖中常用到的筆墨大小。

移動(dòng)設(shè)備中最小筆墨為20px，常用漢字筆墨在720尺寸設(shè)計(jì)圖中也基本不會(huì)超過(guò)70px，所以我們選取了10px-70px的筆墨大小來(lái)進(jìn)行測(cè)量，所以我們測(cè)量了10px-70px字號(hào)大小對(duì)應(yīng)的 textview 的高度。

為什么選擇選擇測(cè)量 px 而不是 sp？

測(cè)量 px 是由于 px 在設(shè)計(jì)圖中是可獲取的單位，假如選擇測(cè)量 sp，則在 sketch 中無(wú)法獲得 sp 數(shù)值。

2. 不同機(jī)型和倍率測(cè)量

開(kāi)發(fā)使用安卓默認(rèn)字體，但考慮到不同品牌機(jī)型運(yùn)行字體不同，我們進(jìn)行了4款機(jī)型的測(cè)量，分別是：三星s7（可換分辨率720*1280/1080*1920/1440*2560）、小米4（1080*1920）、華為mate9（1080*1920）堅(jiān)果pro2（1080*1920）經(jīng)過(guò)測(cè)量，同倍率下得到效果幾乎同等。所以得到結(jié)論：行高測(cè)量效果不受品牌安卓機(jī)型默認(rèn)字體影響。

隨后又測(cè)量了不同倍率下的行高是否也遵循倍率轉(zhuǎn)變。測(cè)量發(fā)現(xiàn)不論是2倍圖、3倍圖照舊4倍圖，通過(guò)倍率換算為像素值是幾乎一樣的。僅在33sp以上的部分4倍圖中會(huì)出現(xiàn)2-3像素的削減。所以得到結(jié)論：在 UI 常用的筆墨大小范圍內(nèi)行高測(cè)量效果不受倍率影響。

接著又進(jìn)行了不同字重下行高的測(cè)量，效果是：行高不受字重影響。

在 iOS 的插件中，測(cè)量的數(shù)值是有肯定的規(guī)律的，他們運(yùn)用了算法來(lái)計(jì)算字體大小所對(duì)應(yīng)行高。但是安卓則不同，通過(guò)觀察測(cè)量對(duì)比數(shù)據(jù)，沒(méi)有發(fā)現(xiàn)可用規(guī)律，于是就把所有對(duì)應(yīng)數(shù)值悉數(shù)放入代碼中，不同筆墨大小直接調(diào)用對(duì)應(yīng)行高數(shù)值。

三、插件使用細(xì)致事項(xiàng)

細(xì)致一：

因安卓開(kāi)發(fā)時(shí)漢字默認(rèn)字體為思源黑體，所以設(shè)計(jì)圖字體最好為思源黑體，但 sketch 對(duì)于思源黑體的支持有 bug，修改行高后，會(huì)出現(xiàn)錯(cuò)位，如圖：

所以在設(shè)計(jì)圖中不必再轉(zhuǎn)換字體為思源黑體，直接使用蘋(píng)方字體代替，因兩款字體均為黑體，并且漢字高度字型接近，視覺(jué)結(jié)果不受影響。（細(xì)致：兩款字體數(shù)字部分差異較大，思源黑體數(shù)字部分高于蘋(píng)方字體的數(shù)字部分，開(kāi)發(fā)中如碰到，請(qǐng)參照漢字調(diào)節(jié)數(shù)字位置）。

細(xì)致二：

插件使用后，因調(diào)整了行高，筆墨會(huì)發(fā)生輕微上下位移。建議先修復(fù)行高再調(diào)整筆墨距上下元素的間距。但在現(xiàn)實(shí)工作中，安卓設(shè)計(jì)圖基本由 iOS 設(shè)計(jì)圖轉(zhuǎn)換而來(lái)，筆墨都已輸入完畢，那只能在修復(fù)行高之后，手動(dòng)微調(diào)各筆墨上下間距，以保證各元素間距為偶數(shù)或設(shè)計(jì)規(guī)范中的間距數(shù)值。

細(xì)致三：

使用時(shí)，選中單個(gè) artboard 或者多個(gè)筆墨圖層，選擇 plugins => Auto Fix Android Text Line Height => Fix

快捷鍵： shift + option + command + o

（目前不支持同時(shí)選中多個(gè) artboard 進(jìn)行修復(fù)）

細(xì)致四：

插件不支持 OSX 體系，親測(cè) mac 體系 10.11.6 版本以下不支持，10.11.6 以上能否可用暫不明確。macOS High Sierra 均可使用。（因 android 插件基于 iOS 插件制作，所以這一題目也存在于 iOS 插件）。

四、修復(fù)結(jié)果對(duì)比

通過(guò)上面的一系列對(duì)比圖我們可以看到，修復(fù)前后的界面還原結(jié)果差距特別很是顯明，插件修復(fù)后的行高在現(xiàn)實(shí)工作中可以完善匹配界面還原，并且字符框高度的題目是安卓界面完善還原最為棘手的題目。只有把這個(gè)題目解決了，才能有完善還原的可能。而解決這一題目的利器就是這款 sketch 修復(fù)行高插件。

最后再次對(duì)@Gis1on 和@Youngxkk 兩位表達(dá)敬意，也感謝團(tuán)隊(duì)中的安卓開(kāi)發(fā)@zz379，感謝他為測(cè)試界面實(shí)現(xiàn)、和插件代碼的修改支出的努力。

插件下載：https://pan.baidu.com/s/1Oh_Y0nxOFV8LBdxxhdVPag

迎接關(guān)注作者微信公眾號(hào)：「約克想說(shuō)」

圖片素材作者：Timo Kuilder