今天要說的是屏幕適配字體這塊,為什么要選這么個(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,問題搞定,洗洗睡覺~葵姥。