你是否也曾被Android”慘不忍睹”的實現介面搞得焦頭爛額，一度懷疑安卓開發小哥的能力是否不及格，幾乎都快要對安卓無望了。從現在開始無須擔心，這篇文章一定會讓你對安卓重拾信心，配合開發做到安卓介面完美還原。（外掛下載，見文章最底部。）
一、起因
每一次接過安卓測試機驗收安卓的實現介面，都懷著無比忐忑的心情。不出意外每次都被“隨性”的介面所折服，然後花上N次的加班時間來一點點的調整。在近期專案結束後打算找到每個“隨性”介面的問題所在。終於在旁觀了開發搭介面的過程中，發現了問題的關鍵：安卓文字框上下空白間隙。
經過測量發現，介面實現出來的文字框高度佔比要比設計圖中文字高度高出一大截。文字框在顯示文字的基礎上，上下留有相當距離的空白間隙。這個間隙就成了安卓介面還原問題的關鍵所在。
通過網際網路查詢解決問題的答案，試圖通過 去除開發時文字框控制元件上下間隙 的辦法來解決這一問題。最終找到的辦法有兩種：
方法一：自定義文字控制元件
不使用系統預設文字框控制元件，自定義每個文字框的寬高。雖然自定義控制元件的辦法可以消除控制元件中的上下間隙，但這個辦法又產生了新問題，因為每一個文字框都需要單獨寫一層自定義寬高，這無疑是增加了一層佈局深度，如果整個APP都使用這種方式來顯示文字，會很大程度的影響產品的效能。所以這個方法不可取。
方法二：增加一條去間隙的程式碼
這是一個在很多論壇都提及過得的一條程式碼，作用是可以消除文字框的上下間隙：
android:includeFontPadding="false"
複製程式碼
當消除文字框間隙方法行不通時，那就只能換一種思考方式來解決問題。那就是增加設計圖中的文字行高，使得設計和實現介面文字框所佔高度保持一致。
這種辦法在網際網路中有很多文章都曾提到，那就是在使用sketch進行介面設計時，文字的行高設定。但是大部分的文章都只提到一個大概的行高與字號比例，如1.2倍、1.4倍等。沒有準確的對應數值和驗證過程。
但前段時間由@Gis1on和@Youngxkk 兩人分享的《自動修復ios文字行高》的文章中 詳細的列舉了在iOS平臺上，文字控制元件的高度與字號的對應關係，並找到其中規律，開發了sketch外掛，自動修復設計圖中不同字號的行高，使得修復後的行高與ios開發平臺中的文字框高度一致。高效的解決了ios平臺介面實現與設計圖因文字所帶來的差異。
這篇文章對我有很大的啟發。可惜的是，他們只解決了ios的問題，但實際工作中安卓介面的還原情況更令人擔憂，只有解決了文字框間隙高度這一問題，才會有安卓完美還原設計的可能。
幸運的是，團隊新來了一位安卓開發工程師@zz379。和他簡單的溝通後，他也意識到這個問題的關鍵性。我也感覺到了他追求完美還原的態度。和他探討之後，我們決定在ios自動修復外掛的基礎上，通過實際的測量，製作一個針對安卓文字行高優化的外掛，來高效的解決這一棘手的問題。
二、測量
先放測量結果，見下圖：
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的外掛中，測量的數值是有一定的規律的，他們運用了演算法來計算字型大小所對應行高。但是安卓則不同，通過觀察測量對比資料，沒有發現可用規律，於是就把所有對應數值全部放入程式碼中，不同文字大小直接呼叫對應行高數值。
三、外掛使用注意事項
注意一：
因安卓開發時漢字預設字型為思源黑體，所以設計圖字型最好為思源黑體，但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外掛）。
四、修復效果對比
通過上面的一系列對比圖我們可以看到，修復前後的介面還原效果差距非常明顯，外掛修復後的行高在實際工作中可以完美匹配介面還原，並且字元框高度的問題是安卓介面完美還原最為棘手的問題。只有把這個問題解決了，才能有完美還原的可能。而解決這一問題的利器就是這款sketch修復行高外掛。
最後再次對@Gis1on和@Youngxkk 兩位表達敬意，也感謝團隊中的安卓開發@zz379，感謝他為測試介面實現、和外掛程式碼的修改付出的努力。
本文由York01 原創釋出於公眾號：約克想說，轉載請註明出處。
