TextView設計稿完美還原思考

在開發(fā)工程師與設計師配合過程中,經(jīng)常會遇到的問題就是設計師提供設計圖陆爽,開發(fā)工程師嚴格按照設計圖開發(fā)完成扳缕,但結果就是無法做到設計稿完美還原,需要在后期進行視覺走查的過程中進行微調躯舔,占用開發(fā)時間,本著效率優(yōu)先丧失,尋找解決方案惜互,過程中也帶來了一些個人思考琳拭,在這里和大家分享一下描验。

原因探討

原因很簡單,其實用一張圖就可以解答清楚絮缅,但目前網(wǎng)上流傳的很多圖片本身就存在問題呼股,或者說沒有問題,原因我之后會說吸奴。
我們先來看一下Android Developer Document里對FontMetrics的介紹:

name description
ascent The recommended distance above the baseline for singled spaced text.(在單行文字里距離baseline之上推薦的距離)
bottom The maximum distance below the baseline for the lowest glyph in the font at a given text size.(距離baseline之下最大的距離)
descent The recommended distance below the baseline for singled spaced text. (在單行文字里距離baseline之下推薦的距離)
leading The recommended additional space to add between lines of text.(在行間距推薦的額外空間)
top The maximum distance above the baseline for the tallest glyph in the font at a given text size.(距離baseline之上最大的距離)

然后看下目前關于FontMetrics使用比較廣的圖:

可能存在問題的圖片.png

這張圖其實已經(jīng)很形象的展示了ascent奄抽、descent甩鳄、leading和hight的關系,貌似沒看到bottom和top妙啃,別急,接下來我們在Android里面把這5個參數(shù)畫出來馆匿,看圖:


Android示意圖.png

從上往下分別是:top燥滑、ascent铭拧、baseline赃蛛、descent和bottom搀菩,leading一般都為0,我們可以看到歧蒋,ascent并沒有完全貼合在Apple上面,和設想中的并不一樣萝映,主要原因是Android里面的字體為了兼容更多的語言阐虚,留有特殊符號的空間,例如"??ü",所以圖一其實誤導了開發(fā)者敌呈,但說圖一大錯特錯其實也不對磕洪,我們可以在Typeface Wiki里面找到答案:

The ascent and descent may or may not include distance added by accents or diacritical marks.

這句話的意思就是ascent和descent有诫龙、或者沒有包含變音符。
關于FontMetrics的使用签赃,可以看下博文自定義控件其實很簡單1/4,寫的非常棒歹嘹,在這里我就不復述了孔庭,推薦大家去看下。

方案思考

OK怎抛,我們其實已經(jīng)找到原因了芽淡,但并沒有找到完美的解決方案,雖然Android心懷好意給我們考慮了變音符的空間挣菲,但對我們而言并沒有什么卵用,因為在平時開發(fā)中并用不到唉窃,而且這距離還無法準確計算纹笼,只給出了ascent和top,可以通過top-ascent(因為top和ascent都是負數(shù)蔓涧,計算是應該是ascent-top)來估算出上邊距,而通過bottom-descent來估算出下邊距元暴,如果還想要進一步精確茉盏,只能通過工具去測量得出了,風險是有些沒有考慮到的字體會出現(xiàn)不準確的情況鸠姨,這就要視具體情況而定了。

工具

了解情況之后连茧,我就開發(fā)了一個工具給設計師巍糯,讓她可以查看不同字體大小出現(xiàn)的上下邊距,如圖:

工具.png
字體大小對應表.png
測量字體大小.png
字體演示.png

如果大家有更好的方法,歡迎交流討論惰聂,留下高見咱筛,謝謝!

參考資料

自定義控件其實很簡單1/4
Typeface Wiki
FontMetrics
Meaning of top, ascent, baseline, descent, bottom, and leading in Android's FontMetrics

可以隨意轉發(fā)迅箩,也歡迎關注我的簡書,我會堅持給大家?guī)矸窒怼?/p>

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末拐揭,一起剝皮案震驚了整個濱河市堂污,隨后出現(xiàn)的幾起案子龄砰,更是在濱河造成了極大的恐慌讨衣,老刑警劉巖式镐,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異歹茶,居然都是意外死亡你弦,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門扮叨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來领迈,“玉大人碍沐,你說我怎么就攤上這事±厶幔” “怎么了斋陪?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長无虚。 經(jīng)常有香客問我,道長友题,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任踢匣,我火速辦了婚禮戈抄,結果婚禮上,老公的妹妹穿的比我還像新娘输莺。我一直安慰自己,他們只是感情好模闲,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布尸折。 她就那樣靜靜地躺著,像睡著了一般实夹。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上荸实,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天缴淋,我揣著相機與錄音,去河邊找鬼露氮。 笑死钟沛,一個胖子當著我的面吹牛,可吹牛的內容都是我干的恨统。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼莫绣,長吁一口氣:“原來是場噩夢啊……” “哼悠鞍!你這毒婦竟也來了?” 一聲冷哼從身側響起软驰,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤锭亏,失蹤者是張志新(化名)和其女友劉穎硬鞍,沒想到半個月后戴已,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡糖儡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年握联,在試婚紗的時候發(fā)現(xiàn)自己被綠了每瞒。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡代芜,死狀恐怖浓利,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情贷掖,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站屠升,受9級特大地震影響狭郑,放射性物質發(fā)生泄漏。R本人自食惡果不足惜翰萨,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一亩鬼、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧雳锋,春花似錦、人聲如沸爽丹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽初澎。三九已至,卻和暖如春谤狡,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背墓懂。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工捕仔, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人榜跌。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓钓葫,卻偏偏與公主長得像,于是被迫代替她去往敵國和親础浮。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內容