用這款sketch插件，幫你完美還原安卓界面

你是否也曾被Android」慘不忍睹」的實現界面搞得焦頭爛額，一度懷疑安卓開發小哥的能力是否不及格，幾乎都快要對安卓無望了。從如今開始無須擔憂，這篇文章必定會讓你對安卓重拾信心，配合開發作到安卓界面完美還原。（插件下載，見文章最底部。）

1、原由

每一次接過安卓測試機驗收安卓的實現界面，都懷着無比忐忑的心情。不出意外每次都被「隨性」的界面所折服，而後花上N次的加班時間來一點點的調整。在近期項目結束後打算找到每一個「隨性」界面的問題所在。終於在旁觀了開發搭界面的過程當中，發現了問題的關鍵：安卓文本框上下空白間隙。

通過測量發現，界面實現出來的文本框高度佔比要比設計圖中文字高度高出一大截。文本框在顯示文字的基礎上，上下留有至關距離的空白間隙。這個間隙就成了安卓界面還原問題的關鍵所在。

經過互聯網查找解決問題的答案，試圖經過 去除開發時文本框控件上下間隙 的辦法來解決這一問題。最終找到的辦法有兩種：

方法一：自定義文本控件

不使用系統默認文本框控件，自定義每一個文本框的寬高。雖然自定義控件的辦法能夠消除控件中的上下間隙，但這個辦法又產生了新問題，由於每個文本框都須要單獨寫一層自定義寬高，這無疑是增長了一層佈局深度，若是整個APP都使用這種方式來顯示文本，會很大程度的影響產品的性能。因此這個方法不可取。

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

這是一個在不少論壇都說起過得的一條代碼，做用是能夠消除文本框的上下間隙：

android:includeFontPadding="false"
複製代碼

當加入這條代碼以後，文本框高度雖然有所改變，但並非徹底消除，而且也沒法保證消除後的高度與設計圖中文本框高度一致。因此這個辦法也沒有徹底的解決這一問題。

當消除文本框間隙方法行不通時，那就只能換一種思考方式來解決問題。那就是增長設計圖中的文本行高，使得設計和實現界面文本框所佔高度保持一致。

這種辦法在互聯網中有不少文章都曾提到，那就是在使用sketch進行界面設計時，文字的行高設置。可是大部分的文章都只提到一個大概的行高與字號比例，如1.2倍、1.4倍等。沒有準確的對應數值和驗證過程。

但前段時間由@Gis1on和@Youngxkk 兩人分享的《自動修復ios文字行高》的文章中 詳細的列舉了在iOS平臺上，文本控件的高度與字號的對應關係，並找到其中規律，開發了sketch插件，自動修復設計圖中不一樣字號的行高，使得修復後的行高與ios開發平臺中的文本框高度一致。高效的解決了ios平臺界面實現與設計圖因文本所帶來的差別。

這篇文章對我有很大的啓發。惋惜的是，他們只解決了ios的問題，但實際工做中安卓界面的還原狀況更使人擔心，只有解決了文本框間隙高度這一問題，纔會有安卓完美還原設計的可能。

幸運的是，團隊新來了一位安卓開發工程師@zz379。和他簡單的溝通後，他也意識到這個問題的關鍵性。我也感受到了他追求完美還原的態度。和他探討以後，咱們決定在ios自動修復插件的基礎上，經過實際的測量，製做一個針對安卓文字行高優化的插件，來高效的解決這一棘手的問題。

2、測量

先放測量結果，見下圖：

1.測量大小範圍10-70,測量單位：PX

爲何選擇測量範圍爲10-70？

經常使用安卓設計稿尺寸有兩種一種是360640；另外一種就是7201280。而在7201280的尺寸中經常使用到的文字的大小，包含了360640尺寸設計圖中經常使用到的文字大小。

移動設備中最小文字爲20px，經常使用漢字文字在720尺寸設計圖中也基本不會超過70px，因此咱們選取了10px-70px的文字大小來進行測量，因此咱們測量了10px-70px字號大小對應的textview的高度。

爲何選擇選擇測量px而不是sp？

測量px是由於px在設計圖中是可獲取的單位，若是選擇測量sp，則在sketch中沒法得到sp數值。

2.不一樣機型和倍率測量

開發使用安卓默認字體，但考慮到不一樣品牌機型運行字體不一樣，咱們進行了4款機型的測量，分別是：三星s7（可換分辨率720x1280/1080x1920/1440x2560）、小米4（1080x1920）、華爲mate9（1080x1920）堅果pro2（1080x1920）通過測量，同倍率下獲得結果幾乎一致。因此獲得結論：行高測量結果不受品牌安卓機型默認字體影響。

隨後又測量了不一樣倍率下的行高是否也遵循倍率變化。測量發現不管是2倍圖、3倍圖仍是4倍圖，經過倍率換算爲像素值是幾乎同樣的。僅在33sp以上的部分4倍圖中會出現2-3像素的減小。因此獲得結論：在UI經常使用的文字大小範圍內行高測量結果不受倍率影響。

接着又進行了不一樣字重下行高的測量，結果是：行高不受字重影響。

在ios的插件中，測量的數值是有必定的規律的，他們運用了算法來計算字體大小所對應行高。可是安卓則不一樣，經過觀察測量對比數據，沒有發現可用規律，因而就把全部對應數值所有放入代碼中，不一樣文字大小直接調用對應行高數值。

3、插件使用注意事項

注意一：

因安卓開發時漢字默認字體爲思源黑體，因此設計圖字體最好爲思源黑體，但sketch對於思源黑體的支持有bug，修改行高後，會出現錯位，如圖

因此在設計圖中沒必要再轉換字體爲思源黑體，直接使用蘋方字體代替，因兩款字體均爲黑體，而且漢字高度字型接近，視覺效果不受影響。（注意：兩款字體數字部分差別較大，思源黑體數字部分高於蘋方字體的數字部分，開發中如遇到，請參照漢字調節數字位置）。

注意二：

插件使用後，因調整了行高，文字會發生輕微上下位移。建議先修復行高再調整文字距上下元素的間距。但在實際工做中，安卓設計圖基本由ios設計圖轉換而來，文字都已輸入完畢，那隻能在修復行高以後，手動微調各文字上下間距，以保證各元素間距爲偶數或設計規範中的間距數值。

注意三：

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

快捷鍵： shift + option + command + o

（目前不支持同時選中多個artboard進行修復）

注意四：

插件不支持OSX系統，親測mac系統 10.11.6版本如下不支持，10.11.6以上可否可用暫不明確。macOS High Sierra都可使用。（因android插件基於ios插件製做，因此這一問題也存在於ios插件）。

4、修復效果對比

經過上面的一系列對比圖咱們能夠看到，修復先後的界面還原效果差距很是明顯，插件修復後的行高在實際工做中能夠完美匹配界面還原，而且字符框高度的問題是安卓界面完美還原最爲棘手的問題。只有把這個問題解決了，纔能有完美還原的可能。而解決這一問題的利器就是這款sketch修復行高插件。

最後再次對@Gis1on和@Youngxkk 兩位表達敬意，也感謝團隊中的安卓開發@zz379，感謝他爲測試界面實現、和插件代碼的修改付出的努力。

本文由York01 原創發佈於公衆號：約克想說，轉載請註明出處。