Android多屏幕適配之字體大小悴晰、行間距和字間距

今天要說的是屏幕適配字體這塊,為什么要選這么個(gè)主題呢疲恢,大家都知道Android機(jī)型眾多,不同的手機(jī)屏幕分辨率也是千差萬別瓷胧,屏幕適配這塊一直是個(gè)令人頭疼的問題显拳,不像iOS就只有一家。而字體適配又是這其中重要的一環(huán)搓萧,為什么要挑字體單獨(dú)拿出來說呢杂数,是因?yàn)楸救私裉煸诤凸綰I對(duì)設(shè)計(jì)效果圖的時(shí)候,發(fā)現(xiàn)怎么都難以溝通瘸洛,索性寫出來做個(gè)總結(jié)揍移,讓別人理解你之前,首先得自己整明白反肋。

首先我遇到的第一個(gè)問題就是:UI始終堅(jiān)持認(rèn)為app字體大小應(yīng)該是固定的那伐,即不同大小屏幕的手機(jī),看到的字體是一樣一樣的石蔗。

這乍看起來似乎沒毛病罕邀,就像iPhone那樣,不同iPhone型號(hào)手機(jī)里面的APP字體大小顯示是一樣的养距。為什么會(huì)這樣呢诉探,iOS App開發(fā)中字體以磅(pt)為單位的,它們的轉(zhuǎn)換關(guān)系為:pt = (px / 96) * 72铃在,按照這樣的一個(gè)公式阵具,比如給定字體大小7.5磅(pt)?碍遍,按照公式得到?(7.5/72)96=10px(像素),這樣不論是什么樣分辨率的iPhone最終顯示的都是一個(gè)固定的10px(像素)值阳液。

而Android呢怕敬,按照上面iPhone的方式咱能不能直接拿來用呢,我們先去看一下谷歌官方文檔怎么寫的帘皿。

咦东跪,瞧這谷歌文檔寫的,看來咱想直接生搬硬套iPhone是沒指望了鹰溜。官方文檔可說了指定尺寸時(shí)虽填,使用dp或sp單位,這里我們暫時(shí)不深究dp與sp之間的具體區(qū)別曹动,咱先去瞧瞧市面上大廠的APP都是怎么處理的斋日。

首先我們就去看下常用的qq,打開應(yīng)用市場(chǎng)墓陈,搜索qq,

下載最新版的qq

下載完成后得到qq安裝包恶守,接著開始進(jìn)行反編譯,這里我們使用的是apktool贡必,

之后打開qq安裝包目錄兔港,會(huì)發(fā)現(xiàn)此時(shí)安裝包目錄下存在一個(gè)和qq同名的目錄文件夾,點(diǎn)擊進(jìn)去發(fā)現(xiàn)里面有個(gè)res目錄的文件夾仔拟,這個(gè)就是我們想要的資源文件衫樊。

這時(shí)我們打開Android studio 新建個(gè)工程,我們將反編譯得到的res文件夾全部拷貝進(jìn)新建的工程中利花,打開其中的一個(gè)布局文件科侈,

可以看到里面的字體大小用的是sp,我們以同樣的方式再去看看微信


發(fā)現(xiàn)字體大小用的是dp,接著再去看下簡(jiǎn)書


可以看到也是sp,最后我們?cè)偃タ聪滦吕宋⒉?/p>


同樣還是sp,總結(jié)下就是微信字體大小用的是dp,qq晋被、新浪微博和簡(jiǎn)書用的都是sp,說到這那么問題來了兑徘,這個(gè)sp 和dp到底有啥區(qū)別呢?

由于過去通常以像素為單位設(shè)計(jì)計(jì)算機(jī)用戶界面。當(dāng)一個(gè)像素在80x80的時(shí)候羡洛,在高分辨率顯示器上運(yùn)行該程序挂脑,則用戶界面會(huì)顯得很小。所以采用與分辨率無關(guān)的度量單位來開發(fā)程序就能夠解決這個(gè)問題欲侮。而Android應(yīng)用開發(fā)支持不同的度量單位崭闲。dp:?device independent pixels(設(shè)備獨(dú)立像素). 不同設(shè)備有不同的顯示效果,這個(gè)和設(shè)備硬件有關(guān),一般我們?yōu)榱酥С?WVGA威蕉、HVGA和QVGA 推薦使用這個(gè)刁俭,不依賴像素。dp與px之間的換算公式:px = dp * (dpi / 160),?dpi是Dots Per Inch(每英寸所打印的點(diǎn)數(shù)),對(duì)于Android手機(jī)來說韧涨,常見的dpi有如下幾種:

ldpi:對(duì)應(yīng)的dpi范圍為0 ~ 120牍戚,也就是說每英寸有0到120個(gè)像素點(diǎn)的屏幕的屏幕密度都屬于ldpi

mdpi:dpi范圍為120 ~ 160

hdpi:dpi范圍為160 ~ 240

xhdpi:dpi范圍為240~320

xxhdpi:dpi范圍為320~480

在實(shí)際開發(fā)中侮繁,通常以dpi值120、160如孝、240宪哩、320、480分別指代ldpi第晰、mdpi锁孟、hdpi、xhdpi茁瘦、xxhdpi品抽。

也就是說,當(dāng)我們?cè)O(shè)置字體大小為10dp,dpi為320的xhdpi的Android機(jī)甜熔,通過換算公式:px=10*(320/160),最終得到20px(像素)大小圆恤,如果是dpi為480的xxhdpi的Android機(jī),通過公式得到30px(像素)大小腔稀。

sp:?scaled pixels(放大像素). 主要用于字體顯示best for textsize.?這兩個(gè)單位作用于字體大小本質(zhì)上沒啥區(qū)別哑了,唯一的區(qū)別就是:當(dāng)修改系統(tǒng)字體大小時(shí),字體大小以dp為單位時(shí)烧颖,大小不變;而字體大小以sp為單位時(shí)窄陡,大小會(huì)跟隨變化炕淮;


也就是說只有當(dāng)我們進(jìn)入到手機(jī)設(shè)置界面,手動(dòng)去設(shè)置系統(tǒng)字體大小時(shí)跳夭,以sp為單位的字體會(huì)跟隨系統(tǒng)設(shè)置而做出變化涂圆,而dp則不會(huì),其他情況下是一樣的币叹∪笄福總結(jié)下就是,無論是用dp還是sp作為字體大小的單位颈抚,最終都是根據(jù)手機(jī)dpi來決定最終顯示到屏幕上的像素大小踩衩。

第二個(gè)遇到的問題就是:字體行間距和字間距很難調(diào)合適

Android中設(shè)置行間距有兩個(gè)方法,其中android:lineSpacingExtra表示額外的行間距數(shù)值贩汉,單位通常為dp驱富。如android:lineSpacingExtra=”1dp”。?

android:lineSpacingExtra的值可以為負(fù)數(shù)匹舞,小數(shù)和0褐鸥。如果值為正數(shù)表示增加行間距,如果值為負(fù)數(shù)表示減少行間距赐稽,如果值為0叫榕,則沒有變化浑侥。

另一個(gè)android:lineSpacingMultiplier表示行間距的倍數(shù),沒有單位晰绎。如android:lineSpacingMultiplier=”1.2”寓落。?

android:lineSpacingMultiplier的值可以為任意浮點(diǎn)數(shù)。如果值大于1.0表示增加行間距寒匙,如果值小于1.0表示減少行間距零如。

設(shè)置字間距的方法為setLetterSpacing,?


這里我們直接跟進(jìn)源碼,看注釋的內(nèi)容簡(jiǎn)單的翻譯過來就是:正值擴(kuò)大锄弱,負(fù)值將會(huì)使文本壓縮考蕾,這里我們看一下微博的文本是怎么設(shè)置的


我們可以看到微博這里只設(shè)置了一個(gè)行間距3dp。接著我們?cè)偃タ戳硪患液?jiǎn)書


發(fā)現(xiàn)只有個(gè)行間距2dp会宪,其他的微信肖卧,qq基本顯示的都是單行文本,行間距字間距都是默認(rèn)的掸鹅∪剩總結(jié)下就是兩派要么參照qq,微信采用默認(rèn),要么參照微博或簡(jiǎn)書設(shè)置個(gè)行間距2或3dp巍沙。OK,問題搞定,洗洗睡覺~葵姥。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市句携,隨后出現(xiàn)的幾起案子榔幸,更是在濱河造成了極大的恐慌,老刑警劉巖矮嫉,帶你破解...
    沈念sama閱讀 212,884評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件削咆,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡蠢笋,警方通過查閱死者的電腦和手機(jī)拨齐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來昨寞,“玉大人瞻惋,你說我怎么就攤上這事”喾” “怎么了熟史?”我有些...
    開封第一講書人閱讀 158,369評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)窄俏。 經(jīng)常有香客問我蹂匹,道長(zhǎng),這世上最難降的妖魔是什么凹蜈? 我笑而不...
    開封第一講書人閱讀 56,799評(píng)論 1 285
  • 正文 為了忘掉前任限寞,我火速辦了婚禮忍啸,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘履植。我一直安慰自己计雌,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,910評(píng)論 6 386
  • 文/花漫 我一把揭開白布玫霎。 她就那樣靜靜地躺著凿滤,像睡著了一般。 火紅的嫁衣襯著肌膚如雪庶近。 梳的紋絲不亂的頭發(fā)上翁脆,一...
    開封第一講書人閱讀 50,096評(píng)論 1 291
  • 那天,我揣著相機(jī)與錄音鼻种,去河邊找鬼反番。 笑死,一個(gè)胖子當(dāng)著我的面吹牛叉钥,可吹牛的內(nèi)容都是我干的罢缸。 我是一名探鬼主播,決...
    沈念sama閱讀 39,159評(píng)論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼投队,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼枫疆!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起敷鸦,我...
    開封第一講書人閱讀 37,917評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤养铸,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后轧膘,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,360評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡兔甘,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,673評(píng)論 2 327
  • 正文 我和宋清朗相戀三年谎碍,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片洞焙。...
    茶點(diǎn)故事閱讀 38,814評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蟆淀,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出澡匪,到底是詐尸還是另有隱情熔任,我是刑警寧澤,帶...
    沈念sama閱讀 34,509評(píng)論 4 334
  • 正文 年R本政府宣布唁情,位于F島的核電站疑苔,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏甸鸟。R本人自食惡果不足惜惦费,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,156評(píng)論 3 317
  • 文/蒙蒙 一兵迅、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧薪贫,春花似錦恍箭、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至鞍匾,卻和暖如春交洗,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背候学。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評(píng)論 1 267
  • 我被黑心中介騙來泰國(guó)打工藕筋, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人梳码。 一個(gè)月前我還...
    沈念sama閱讀 46,641評(píng)論 2 362
  • 正文 我出身青樓隐圾,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親掰茶。 傳聞我的和親對(duì)象是個(gè)殘疾皇子暇藏,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,728評(píng)論 2 351

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,871評(píng)論 25 707
  • 本文參考自: Google的官方權(quán)威適配文檔 郭霖:Android官方提供的支持不同屏幕大小的全部方法 Storm...
    M悇芐冋憶閱讀 12,799評(píng)論 5 56
  • 1、基礎(chǔ)概念 屏幕尺寸 含義:指的屏幕對(duì)角線的物理長(zhǎng)度濒蒋,單位一般采用英寸(1英寸≈2.53cm) 目前市面常見的有...
    古都舊城閱讀 2,694評(píng)論 0 1
  • 沮喪的人簡(jiǎn)介 因?yàn)槲也?4歲盐碱,沒有寫作經(jīng)驗(yàn)因此就根據(jù)自己性格把自己叫為沮喪的人。也在不開心時(shí)或才思全涌時(shí)寫下一...
    林長(zhǎng)得真俊杰閱讀 153評(píng)論 0 0
  • 翻微博沪伙,每個(gè)人都很喪瓮顽。 從需要擁抱,到醉酒懷念围橡,到空門尋道暖混,再到?jīng)]有安全感的需要現(xiàn)世安穩(wěn)。每個(gè)人翁授,都繞在自己的圈子...
    與張白水閱讀 166評(píng)論 0 0