你是否也曾被Android”慘不忍睹”的實(shí)現(xiàn)界面搞得焦頭爛額居凶，一度懷疑安卓開發(fā)小哥的能力是否不及格，幾乎都快要對(duì)安卓無望了藤抡。從現(xiàn)在開始無須擔(dān)心侠碧，這篇文章一定會(huì)讓你對(duì)安卓重拾信心，配合開發(fā)做到安卓界面完美還原缠黍。（插件下載弄兜，見文章最底部。）
一瓷式、起因
每一次接過安卓測(cè)試機(jī)驗(yàn)收安卓的實(shí)現(xiàn)界面替饿，都懷著無比忐忑的心情。不出意外每次都被“隨性”的界面所折服贸典，然后花上N次的加班時(shí)間來一點(diǎn)點(diǎn)的調(diào)整视卢。在近期項(xiàng)目結(jié)束后打算找到每個(gè)“隨性”界面的問題所在。終于在旁觀了開發(fā)搭界面的過程中瓤漏，發(fā)現(xiàn)了問題的關(guān)鍵：安卓文本框上下空白間隙腾夯。
經(jīng)過測(cè)量發(fā)現(xiàn)，界面實(shí)現(xiàn)出來的文本框高度占比要比設(shè)計(jì)圖中文字高度高出一大截蔬充。文本框在顯示文字的基礎(chǔ)上蝶俱，上下留有相當(dāng)距離的空白間隙走芋。這個(gè)間隙就成了安卓界面還原問題的關(guān)鍵所在歹撒。
通過互聯(lián)網(wǎng)查找解決問題的答案，試圖通過 去除開發(fā)時(shí)文本框控件上下間隙 的辦法來解決這一問題秋柄。最終找到的辦法有兩種：
方法一：自定義文本控件
不使用系統(tǒng)默認(rèn)文本框控件庸队，自定義每個(gè)文本框的寬高积蜻。雖然自定義控件的辦法可以消除控件中的上下間隙，但這個(gè)辦法又產(chǎn)生了新問題彻消，因?yàn)槊恳粋€(gè)文本框都需要單獨(dú)寫一層自定義寬高竿拆，這無疑是增加了一層布局深度，如果整個(gè)APP都使用這種方式來顯示文本宾尚，會(huì)很大程度的影響產(chǎn)品的性能丙笋。所以這個(gè)方法不可取谢澈。
方法二：增加一條去間隙的代碼
這是一個(gè)在很多論壇都提及過得的一條代碼，作用是可以消除文本框的上下間隙：
android:includeFontPadding="false"
當(dāng)加入這條代碼之后御板，文本框高度雖然有所改變锥忿，但并不是完全消除，并且也無法保證消除后的高度與設(shè)計(jì)圖中文本框高度一致怠肋。所以這個(gè)辦法也沒有完全的解決這一問題敬鬓。
當(dāng)消除文本框間隙方法行不通時(shí)，那就只能換一種思考方式來解決問題笙各。那就是增加設(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倍等。沒有準(zhǔn)確的對(duì)應(yīng)數(shù)值和驗(yàn)證過程鲫懒。
但前段時(shí)間由@Gis1on和@Youngxkk 兩人分享的《自動(dòng)修復(fù)ios文字行高》的文章中https://mp.weixin.qq.com/s/al93CHBP3z8HQkuDuBW7yQ 詳細(xì)的列舉了在iOS平臺(tái)上嫩实，文本控件的高度與字號(hào)的對(duì)應(yīng)關(guān)系，并找到其中規(guī)律窥岩，開發(fā)了sketch插件甲献，自動(dòng)修復(fù)設(shè)計(jì)圖中不同字號(hào)的行高，使得修復(fù)后的行高與ios開發(fā)平臺(tái)中的文本框高度一致颂翼。高效的解決了ios平臺(tái)界面實(shí)現(xiàn)與設(shè)計(jì)圖因文本所帶來的差異晃洒。
這篇文章對(duì)我有很大的啟發(fā)‰Γ可惜的是球及，他們只解決了ios的問題，但實(shí)際工作中安卓界面的還原情況更令人擔(dān)憂呻疹，只有解決了文本框間隙高度這一問題吃引，才會(huì)有安卓完美還原設(shè)計(jì)的可能。
幸運(yùn)的是刽锤，團(tuán)隊(duì)新來了一位安卓開發(fā)工程師@zz379镊尺。和他簡(jiǎn)單的溝通后，他也意識(shí)到這個(gè)問題的關(guān)鍵性并思。我也感覺到了他追求完美還原的態(tài)度庐氮。和他探討之后，我們決定在ios自動(dòng)修復(fù)插件的基礎(chǔ)上宋彼，通過實(shí)際的測(cè)量弄砍，制作一個(gè)針對(duì)安卓文字行高優(yōu)化的插件颅筋，來高效的解決這一棘手的問題。
二输枯、測(cè)量
先放測(cè)量結(jié)果，見下圖：
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ì)超過70px厢汹，所以我們選取了10px-70px的文字大小來進(jìn)行測(cè)量螟深，所以我們測(cè)量了10px-70px字號(hào)大小對(duì)應(yīng)的textview的高度。
為什么選擇選擇測(cè)量px而不是sp烫葬？
測(cè)量px是因?yàn)閜x在設(shè)計(jì)圖中是可獲取的單位界弧，如果選擇測(cè)量sp，則在sketch中無法獲得sp數(shù)值搭综。
2.不同機(jī)型和倍率測(cè)量
開發(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)過測(cè)量蒋歌，同倍率下得到結(jié)果幾乎一致帅掘。所以得到結(jié)論：行高測(cè)量結(jié)果不受品牌安卓機(jī)型默認(rèn)字體影響。
隨后又測(cè)量了不同倍率下的行高是否也遵循倍率變化堂油。測(cè)量發(fā)現(xiàn)不論是2倍圖修档、3倍圖還是4倍圖，通過倍率換算為像素值是幾乎一樣的称诗。僅在33sp以上的部分4倍圖中會(huì)出現(xiàn)2-3像素的減少萍悴。所以得到結(jié)論：在UI常用的文字大小范圍內(nèi)行高測(cè)量結(jié)果不受倍率影響。
接著又進(jìn)行了不同字重下行高的測(cè)量寓免，結(jié)果是：行高不受字重影響癣诱。
在ios的插件中，測(cè)量的數(shù)值是有一定的規(guī)律的袜香，他們運(yùn)用了算法來計(jì)算字體大小所對(duì)應(yīng)行高撕予。但是安卓則不同，通過觀察測(cè)量對(duì)比數(shù)據(jù)蜈首，沒有發(fā)現(xiàn)可用規(guī)律实抡，于是就把所有對(duì)應(yīng)數(shù)值全部放入代碼中欠母，不同文字大小直接調(diào)用對(duì)應(yīng)行高數(shù)值。
三吆寨、插件使用注意事項(xiàng)
注意一：
因安卓開發(fā)時(shí)漢字默認(rèn)字體為思源黑體赏淌，所以設(shè)計(jì)圖字體最好為思源黑體，但sketch對(duì)于思源黑體的支持有bug啄清，修改行高后六水，會(huì)出現(xiàn)錯(cuò)位，如圖
所以在設(shè)計(jì)圖中不必再轉(zhuǎn)換字體為思源黑體辣卒，直接使用蘋方字體代替掷贾，因兩款字體均為黑體，并且漢字高度字型接近荣茫，視覺效果不受影響想帅。（注意：兩款字體數(shù)字部分差異較大，思源黑體數(shù)字部分高于蘋方字體的數(shù)字部分啡莉，開發(fā)中如遇到港准，請(qǐng)參照漢字調(diào)節(jié)數(shù)字位置）。
注意二：
插件使用后咧欣，因調(diào)整了行高叉趣，文字會(huì)發(fā)生輕微上下位移。建議先修復(fù)行高再調(diào)整文字距上下元素的間距该押。但在實(shí)際工作中疗杉，安卓設(shè)計(jì)圖基本由ios設(shè)計(jì)圖轉(zhuǎn)換而來，文字都已輸入完畢蚕礼，那只能在修復(fù)行高之后烟具，手動(dòng)微調(diào)各文字上下間距，以保證各元素間距為偶數(shù)或設(shè)計(jì)規(guī)范中的間距數(shù)值奠蹬。
注意三：
使用時(shí)朝聋，選中單個(gè)artboard或者多個(gè)文字圖層，選擇plugins => Auto Fix Android Text Line Height => Fix
快捷鍵： shift + option + command + o
（目前不支持同時(shí)選中多個(gè)artboard進(jìn)行修復(fù)）
注意四：
插件不支持OSX系統(tǒng)囤躁，親測(cè)mac系統(tǒng) 10.11.6版本以下不支持冀痕，10.11.6以上能否可用暫不明確。macOS High Sierra均可使用狸演。（因android插件基于ios插件制作言蛇，所以這一問題也存在于ios插件）。
四宵距、修復(fù)效果對(duì)比
通過上面的一系列對(duì)比圖我們可以看到腊尚，修復(fù)前后的界面還原效果差距非常明顯，插件修復(fù)后的行高在實(shí)際工作中可以完美匹配界面還原满哪，并且字符框高度的問題是安卓界面完美還原最為棘手的問題婿斥。只有把這個(gè)問題解決了劝篷，才能有完美還原的可能。而解決這一問題的利器就是這款sketch修復(fù)行高插件民宿。
最后再次對(duì)@Gis1on和@Youngxkk 兩位表達(dá)敬意娇妓，也感謝團(tuán)隊(duì)中的安卓開發(fā)@zz379，感謝他為測(cè)試界面實(shí)現(xiàn)活鹰、和插件代碼的修改付出的努力峡蟋。
本文由York01 原創(chuàng)發(fā)布于公眾號(hào)：約克想說，轉(zhuǎn)載請(qǐng)注明出處华望。
