安卓界面完美還原sketch插件,自動調整文字行高教程

2021-01-10 hi人工智慧

你是否也曾被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修復行高插件。

相關焦點

  • 資源:11款超好用的sketch插件打包給你
    以前給大家推薦的插件下載網站也變更域名了,現在是 oursketch.com ,推薦的插件都可以在這兒下載到,建議收藏不迷路哦!使用這個插件能快速的完成與前端的交接工作,我一般是用sketch默認的切圖(製作導出項)完成切圖後,選中所有要交接的界面(畫板),然後點開Sketch Measure-導出規範(都是默認設置)就完成啦。
  • Sketch插件Angle(智能對象工具) v1.1.5免激活版
    與大家分享一款Sketch插件智能對象工具——Sketch插件Angle,並且附帶了安裝教程和使用方法,希望能對大家以後的sketch應用能有所幫助。使用方法1、新建或選擇一個(多個)作為轉換源的畫板(放置 UI 界面)2、繪製或選擇一個(多個)作為轉換目標的形狀圖層3、選中目標形狀圖層,執行 Plugins > Angle > Apply Mockup 或使用快捷鍵 command + 對源畫板進行轉換,多源畫板或多轉換目標將彈出選擇對話框4、執行 Plugins
  • Sketch、Ps、Ai快捷鍵,三鍵合一
    Sketch、Ps、Ai快捷鍵,三鍵合一兩個問題1.隨著sketch使用的頻率越來越高,同時要記住Sketch、Ps、Ai的快捷鍵實在太麻煩了。2.用過Sketch,再用Ps和Ai的都有同樣的感受,Ps和Ai太難用了。
  • 如何快速記住好用的sketch插件?
    其實原因很簡單,那就是我根本沒有真正理解這些插件!很長一段時間內,我連插件和腳本的區別都不清楚,還指望有什麼質的突破?做夢吧!最近又在研究sketch的插件,為了不再浪費那麼多時間,所以我需要快速的記住並理解這些對我有用的插件,有沒有什麼好方法呢?
  • 以及順便推薦 3 個 Sketch 插件……
    像設置 CSS 的 padding 一樣設置文字到外邊框的距離。不管之後文字改長改短,都會自動適應。在做按鈕、Tag、Label 之類的東西的時候就特別省事!下載地址:https://github.com/DWilliames/paddy-sketch-plugin整頁拼寫檢查 + 查找替換我做 UI 的時候經常一不小心寫錯單詞拼寫,而且還沒有用 Symbol 的習慣,於是就一處錯,處處錯!
  • Excel中如何快速調整合適的行高和列寬
    本篇教程配套視頻示範和圖文解釋,希望大家觀看之後有所收穫。;同理,將滑鼠置於行的表格線上,變為雙箭頭後雙金,自動調整行高;兩次雙擊後,結果就是這樣,是不是就好了。或者選中表格後,點擊開始選項卡,點擊格式;點擊自動調整列寬;再點擊自動調整行高;兩次點擊後,結果是這樣;是不是和上面一樣美觀
  • Word表格行高列寬為什麼調整不了以及調整統一行高的方法
    有時,發現表格的行高太高、列寬太寬想調小一些,或者表格超過一頁但超出的內容不多,想通過把行高調低的方法將表格縮成一頁以節省紙張,然而問題來了,不管怎麼調,就是調整不了,線條像被膠水粘住一般怎麼也拖不動。行高列寬究竟為什麼調不動呢?在介紹之前,我先看如何調整行高和列寬,以及把它們統一的方法。
  • 一篇文章教你看懂Photoshop和Sketch
    圖片為Photoshop2018版本啟動界面先來說一下我們設計界的老大哥,photoshop即吃瓜群眾眼中的psAdobe Photoshop作為一款標準工業化的圖像處理軟體和最先應用PSD文檔格式的圖像處理軟體
  • 福利|IOS系統越獄後的自用插件分享
    眾所周知,IOS系統的封閉性要遠遠高於安卓,雖然現在安卓的很多衍生系統都已經不支持Root了。正因為IOS的封閉性,所以IOS比起安卓來講要安全很多,不會因為在滑動APP界面時點到廣告就開始下載軟體(以前我在用安卓時,那個年代流量還只有不到1G/月時,點到貼吧上面的廣告瞬間開始下載軟體,花掉不少流量...這個故事告訴我們,4G的速度還是挺快的)。
  • 妖精的尾巴:無盡冒險電腦版測試 安卓模擬器教程
    妖精的尾巴:無盡冒險電腦版測試 安卓模擬器教程 來源:www.18183.com作者:阿姆斯特朗雷時間:2020-05-07 分享到:由講談社正版授權的《妖精的尾巴:無盡冒險》,通過收錄人氣角色,完美還原原作動畫劇情,再現原作動畫場景,創新戰鬥玩法,讓玩家在流暢的遊戲體驗中重溫原作動畫劇情,感受熱血情懷。不僅如此,遊戲內還加入了詮釋魔法奧義的諸多技能,高還原度的公會元素,高自由度的連招打鬥和強策略性的角色搭配玩法,匠心製作,旨在完美呈現妖尾IP的遊戲改編。 冒險不息,來藍疊安卓模擬器體驗吧!
  • 安卓手機上能裝pc版谷歌瀏覽器插件的安卓手機瀏覽器yandex
    瀏覽器界面yandex瀏覽器是俄羅斯簡單的說Chromeium內核是谷歌開源瀏覽器內核之一,其安卓版更是幾呼所自知名的安卓瀏覽器都使用谷歌的內核,那麼多谷歌內核的安卓手機瀏覽器為何偏愛yandex瀏覽器呢?因為它可以在手機上裝pc版谷歌瀏覽器的插件實現和pc版插件一的功能。
  • 10個HTML字體排版jQuery插件推薦
    ,這將有利於你在網頁中設計和創造流暢的文字排版、響應式標題和清爽的文字動畫等等。SquishySquishy 是一個jQuery插件,它能自動調整文字,準確地對其各容器。slabText一個jQuery插件,用於創建大的,大膽的和敏感的頭條新聞。
  • Sketch插件新利器——使用Mockplus DS製作設計規範
    Sketch,作為一款專為圖標和界面設計而打造的優質矢量繪圖工具,也是設計師們製作和完善公司企業內部設計規範系統不可或缺的設計工具。然而,逐個導出和上傳Sketch編輯優化的設計系統資源費時而費力。究竟如何才能實現Sketch和設計系統的完美對接,實時同步更新設計系統的同時,提高工作效率呢?不用擔心!
  • 設計神器 Sketch 70 進階指南(漢化版,支持Big Sur)| Mac軟體天堂
    尤其是在移動應用設計方面,Sketch 的優點在於使用簡單,學習曲線低,並且功能更加強大易用,支持自動切圖,並且具有移動設計模板,能夠大大節省設計師的時間和工作量,非常適合進行網站設計、移動應用設計、圖標設計等,功能非常強大👍!
  • 摹客iDoc Sketch插件全新改版!
    告訴大家一個好消息,摹客iDoc針對Sketch插件進行了全新改版!本次更新了哪些內容呢?一起來看看吧!關鍵信息:Sketch插件全新改版智能檢測不對應畫板重置邀請連結上期彩蛋揭曉一、Sketch插件全新改版Sketch是UI設計師在平時工作中會頻繁用到的設計工具,利用插件可將設計稿一鍵上傳至iDoc中進行智能標註、原型分享等多種操作。摹客團隊本次將Sketch插件進行了全新地設計和改版,界面更加簡潔清爽。
  • 安卓Chrome不支持插件?這些瀏覽器分分鐘教谷歌做瀏覽器
    Chrome在桌面平臺流行很好理解,簡潔易用的界面,可觀的瀏覽速度,沒有各種推廣的幹擾,最關鍵是更有海量的擴展插件讓瀏覽器變得更加強大,儘管Chrome一直有吃內存的問題,但依舊不妨礙其成為全球市場份額最大的瀏覽器。
  • Word文檔中的表格行高和列寬大小無法調整,原因終於找到了
    在Word文檔編輯的過程中,表格的編輯一直是令人頭疼的事情,今天就幫大家來解決一個行高和列寬無法調整的問題吧。列寬還好一點,比較難調整的是行高,因為經常情況通過拖動無法進行調整,到底是什麼原因呢?那麼能不能在不縮小字體的情況下縮小行高呢?當然是可以的,需要在表格屬性中進行設置,打開「行」的選項,裡面的「最小值」表示能夠確保字體完全顯示的最小行高,假如這裡把數值縮小發現表格無變化。我們應該將行高值選擇固定值,這時縮小一下數值發現行高就縮小了,但是如果按照原來的字號輸入文字,就不能完全顯示了,這一點需要注意哦。
  • 藍疊安卓模擬器《曙光破曉》手遊電腦版教程
    原標題:藍疊安卓模擬器《曙光破曉》手遊電腦版教程   藍疊安卓模擬器與《曙光破曉》官方深度合作電腦版,在電腦上完美呈現《曙光破曉》的遊戲場景,小編特別為大家帶來素有安卓模擬器第一引擎的BlueStacks藍疊安卓模擬器《曙光破曉》電腦版下載安裝及使用教程。
  • 抖音幾十萬點讚的文字排版製作,一個插件解決難題!
    AE插件Typemonkey,用它可以快速文字排版,從而簡單的做出不斷無序變化的字幕特效;像酷酷的滕字幕,最近抖音看見很多視頻字幕都是用這個插件完成的,所以給大家推薦一下。平臺兼容:AE: CC2018,CC 2017, CC 2015, CC 2014, CC, CS6, CS5.5Typemonkey安裝教程:1、將TypeMonkey.jsxbin這個插件拷貝到AE目錄Support Files\Scripts\ScriptUI Panels下面
  • Pokemon go安卓破解版安裝教程
    有很多安卓手機是無法一鍵ROOT的,在這之前很多教程都需要手機ROOT才能玩上Pokemon go,今天小編就給大家介紹一下如何繞過ROOT來玩精靈寶可夢GO。此方法適用部分手機,不用root。比如華為,酷派等大品牌手機。