你是否也曾被Android」慘不忍睹」的實現界面搞得焦頭爛額,一度懷疑安卓開發小哥的能力是否不及格,幾乎都快要對安卓無望了。
從現在開始無須擔心,這篇文章一定會讓你對安卓重拾信心,配合開發做到安卓界面完美還原。
一、起因
每一次接過安卓測試機驗收安卓的實現界面,都懷著無比忐忑的心情。不出意外每次都被「隨性」的界面所折服,然後花上N次的加班時間來一點點的調整。在近期項目結束後打算找到每個「隨性」界面的問題所在。終於在旁觀了開發搭界面的過程中,發現了問題的關鍵:安卓文本框上下空白間隙。
經過測量發現,界面實現出來的文本框高度佔比要比設計圖中文字高度高出一大截。文本框在顯示文字的基礎上,上下留有相當距離的空白間隙。這個間隙就成了安卓界面還原問題的關鍵所在。
通過網際網路查找解決問題的答案,試圖通過去除開發時文本框控制項上下間隙的辦法來解決這一問題。最終找到的辦法有兩種:
方法一:自定義文本控制項
不使用系統默認文本框控制項,自定義每個文本框的寬高。雖然自定義控制項的辦法可以消除控制項中的上下間隙,但這個辦法又產生了新問題,因為每一個文本框都需要單獨寫一層自定義寬高,這無疑是增加了一層布局深度,如果整個APP都使用這種方式來顯示文本,會很大程度的影響產品的性能。所以這個方法不可取。
方法二:增加一條去間隙的代碼
這是一個在很多論壇都提及過得的一條代碼,作用是可以消除文本框的上下間隙:android:includeFontPadding="false"
當加入這條代碼之後,文本框高度雖然有所改變,但並不是完全消除,並且也無法保證消除後的高度與設計圖中文本框高度一致。所以這個辦法也沒有完全的解決這一問題。
當消除文本框間隙方法行不通時,那就只能換一種思考方式來解決問題。那就是增加設計圖中的文本行高,使得設計和實現界面文本框所佔高度保持一致。
這種辦法在網際網路中有很多文章都曾提到,那就是在使用sketch進行界面設計時,文字的行高設置。但是大部分的文章都只提到一個大概的行高與字號比例,如1.2倍、1.4倍等。沒有準確的對應數值和驗證過程。
但前段時間由@Gis1on和@Youngxkk 兩人分享的《自動修復ios文字行高》的文章中https://mp.weixin.qq.com/s/al93CHBP3z8HQkuDuBW7yQ 詳細的列舉了在iOS平臺上,文本控制項的高度與字號的對應關係,並找到其中規律,開發了sketch插件,自動修復設計圖中不同字號的行高,使得修復後的行高與ios開發平臺中的文本框高度一致。高效的解決了ios平臺界面實現與設計圖因文本所帶來的差異。
這篇文章對我有很大的啟發。可惜的是,他們只解決了ios的問題,但實際工作中安卓界面的還原情況更令人擔憂,只有解決了文本框間隙高度這一問題,才會有安卓完美還原設計的可能。
幸運的是,團隊新來了一位安卓開發工程師@zz379。和他簡單的溝通後,他也意識到這個問題的關鍵性。我也感覺到了他追求完美還原的態度。和他探討之後,我們決定在ios自動修復插件的基礎上,通過實際的測量,製作一個針對安卓文字行高優化的插件,來高效的解決這一棘手的問題。
二、測量
先放測量結果,見下圖:
1.測量大小範圍10-70,測量單位:PX
為什麼選擇測量範圍為10-70?
常用安卓設計稿尺寸有兩種一種是360*640;另一種就是720*1280。而在720*1280的尺寸中常用到的文字的大小,包含了360*640尺寸設計圖中常用到的文字大小。
行動裝置中最小文字為20px,常用漢字文字在720尺寸設計圖中也基本不會超過70px,所以我們選取了10px-70px的文字大小來進行測量,所以我們測量了10px-70px字號大小對應的textview的高度。
為什麼選擇選擇測量px而不是sp?
測量px是因為px在設計圖中是可獲取的單位,如果選擇測量sp,則在sketch中無法獲得sp數值。
2.不同機型和倍率測量
開發使用安卓默認字體,但考慮到不同品牌機型運行字體不同,我們進行了4款機型的測量,分別是:三星s7(可換解析度720*1280/1080*1920/1440*2560)、小米4(1080*1920)、華為mate9(1080*1920)堅果pro2(1080*1920)經過測量,同倍率下得到結果幾乎一致。所以得到結論:行高測量結果不受品牌安卓機型默認字體影響。
隨後又測量了不同倍率下的行高是否也遵循倍率變化。測量發現不論是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修復行高插件。