你是否也曾被 Android「慘不忍睹」的實現(xiàn)界面搞得焦頭爛額，一度懷疑安卓開發(fā)小哥的能力是否不及格，幾乎都快要對安卓無望了。從現(xiàn)在開始無須擔(dān)心，這篇文章一定會讓你對安卓重拾信心，配合開發(fā)做到安卓界面***還原。

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

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

一、起因

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

經(jīng)過測量發(fā)現(xiàn)，界面實現(xiàn)出來的文本框高度占比要比設(shè)計圖中文字高度高出一大截。文本框在顯示文字的基礎(chǔ)上，上下留有相當(dāng)距離的空白間隙。這個間隙就成了安卓界面還原問題的關(guān)鍵所在。

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

方法一：自定義文本控件

不使用系統(tǒng)默認(rèn)文本框控件，自定義每個文本框的寬高。雖然自定義控件的辦法可以消除控件中的上下間隙，但這個辦法又產(chǎn)生了新問題，因為每一個文本框都需要單獨寫一層自定義寬高，這無疑是增加了一層布局深度，如果整個 APP 都使用這種方式來顯示文本，會很大程度的影響產(chǎn)品的性能。所以這個方法不可取。

方法二：增加一條去間隙的代碼

這是一個在很多論壇都提及過的一條代碼，作用是可以消除文本框的上下間隙：android:includeFontPadding=”false”

當(dāng)加入這條代碼之后，文本框高度雖然有所改變，但并不是完全消除，并且也無法保證消除后的高度與設(shè)計圖中文本框高度一致。所以這個辦法也沒有完全的解決這一問題。

當(dāng)消除文本框間隙方法行不通時，那就只能換一種思考方式來解決問題。那就是增加設(shè)計圖中的文本行高，使得設(shè)計和實現(xiàn)界面文本框所占高度保持一致。

這種辦法在互聯(lián)網(wǎng)中有很多文章都曾提到，那就是在使用 sketch 進(jìn)行界面設(shè)計時，文字的行高設(shè)置。但是大部分的文章都只提到一個大概的行高與字號比例，如1.2倍、1.4倍等。沒有準(zhǔn)確的對應(yīng)數(shù)值和驗證過程。

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

這篇文章對我有很大的啟發(fā)。可惜的是，他們只解決了 iOS 的問題，但實際工作中安卓界面的還原情況更令人擔(dān)憂，只有解決了文本框間隙高度這一問題，才會有安卓***還原設(shè)計的可能。

幸運(yùn)的是，團(tuán)隊新來了一位安卓開發(fā)工程師@zz379。和他簡單的溝通后，他也意識到這個問題的關(guān)鍵性。我也感覺到了他追求***還原的態(tài)度。和他探討之后，我們決定在 iOS 自動修復(fù)插件的基礎(chǔ)上，通過實際的測量，制作一個針對安卓文字行高優(yōu)化的插件，來高效的解決這一棘手的問題。

二、測量

先放測量結(jié)果，見下圖：

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

為什么選擇測量范圍為10-70?

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

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

為什么選擇選擇測量 px 而不是 sp?

測量 px 是因為 px 在設(shè)計圖中是可獲取的單位，如果選擇測量 sp，則在 sketch 中無法獲得 sp 數(shù)值。

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

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

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

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

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

三、插件使用注意事項

注意一：

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

所以在設(shè)計圖中不必再轉(zhuǎn)換字體為思源黑體，直接使用蘋方字體代替，因兩款字體均為黑體，并且漢字高度字型接近，視覺效果不受影響。(注意：兩款字體數(shù)字部分差異較大，思源黑體數(shù)字部分高于蘋方字體的數(shù)字部分，開發(fā)中如遇到，請參照漢字調(diào)節(jié)數(shù)字位置)。

注意二：

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

注意三：

使用時，選中單個 artboard 或者多個文字圖層，選擇 plugins => Auto Fix Android Text Line Height => Fix

快捷鍵： shift + option + command + o

(目前不支持同時選中多個 artboard 進(jìn)行修復(fù))

注意四：

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

四、修復(fù)效果對比

通過上面的一系列對比圖我們可以看到，修復(fù)前后的界面還原效果差距非常明顯，插件修復(fù)后的行高在實際工作中可以***匹配界面還原，并且字符框高度的問題是安卓界面***還原最為棘手的問題。只有把這個問題解決了，才能有***還原的可能。而解決這一問題的利器就是這款 sketch 修復(fù)行高插件。