目前開發(fā)中宙刘,Android和IOS開發(fā)工程師常共用一套UI設計鸥跟,這就需要一套方案來解決布局適配的問題汗茄。
基本概念
像素密度:每英寸長度的像素點數(shù)量。像素密度越大顯示則越清晰四康。iOS單位為PPI搪搏,安卓單位為DPI。
一般用邏輯像素闪金,也稱抽象像素來解決一定物理尺寸屏幕內不斷提高像素密度帶來的問題疯溺。技術的進步,即時同是4-5寸的手機屏幕哎垦,但是分辨率卻成倍增加喝检。如果用傳統(tǒng)的像素px來進行適配會出現(xiàn)下圖的問題。Android引入的概念是dp撼泛,IOS則是pt;雖平臺單位名稱不同澡谭,但原理是一樣愿题。
邏輯像素的理解基于物理尺寸,以安卓為例蛙奖。在1倍(160dpi)情況下潘酗,1dp=1px,1英寸=160dp=160px雁仲;但是在倍率為2(320dpi)情況下仔夺,1dp=2px;1英寸=160dp=320px攒砖。在任何像素密度屏幕上缸兔,邏輯像素160dp的物理尺寸都是1英寸。目標效果如下:
dp是在系統(tǒng)軟件上指定的單位尺寸的像素數(shù)量吹艇,往往是寫在系統(tǒng)出廠配置文件里的一個固定值惰蜜。這個值是參考物理像素密度人為設定的,便于我們UI的適配受神。
當前常見的屏幕像素密度(倍率)
目前常見的ui設計尺寸是 375x667 px抛猖;或者750*1334px。IOS因設備有限幾乎完美適配鼻听,但是Android由于廠商眾多财著,分辨率的情況也很多,沒有辦法進行完美的適配撑碴。
iOS:
1倍(163 ppi撑教、1~3gs)
2倍(326 ppi、4~6s)
3倍(401 ppi醉拓、plus系列)
題外話:可以看出驮履,401 ppi 不是 163 ppi 的3倍(實際2.4倍)鱼辙。為啥要假裝是3倍呢?這是因為 Apple 為了避免@x1 @x2@2.4這樣不規(guī)則的倍率導致設計玫镐、開發(fā)適配麻煩倒戏,所以才把2.4倍說成3倍,但系統(tǒng)在實現(xiàn)時候會自動縮小至2.4倍恐似。所以我們一起假裝它是3倍的ppi就好了杜跷。
Android:
mdpi (160 dpi、1倍)
hdpi (240 dpi矫夷、1.5倍)
xhdpi (320 dpi葛闷、2倍 )
xxhdpi (480 dpi、3倍)
xxxhdpi (640 dpi双藕、4倍)
由于安卓開源特性淑趾,導致多機型、多分辨率忧陪。所以安卓的像素密度劃分只能是一個大約數(shù)的范疇扣泊,例如160dpi 左右的都歸納在 hdpi 。
傳統(tǒng)的適配方式
android中的dp在渲染前會將dp轉為px嘶摊,計算公式:
- px = density * dp;
- density = dpi / 160;
- px = dp * (dpi / 160);
目前Android設備dpi由分辨率(寬延蟹、高)和屏幕大小三者共同確定;如果設計的圖是以375dp作為屏幕寬度設計的叶堆,在屏幕尺度小于375的手機上會顯示不全阱飘;在屏幕尺度大于375的手機上,顯示效果也不同于設計圖虱颗。且安卓設備dpi的取值分布太廣沥匈。
鴻洋的AndroidAutoLayout
鴻洋提出的屏幕適配方案AndroidAutoLayout,目前已經停止維護忘渔,故不建議使用咐熙。
該方案以寬和高兩個維度來做基準,在常見分辨率的手機上可能適配效果良好辨萍。但是很多設備的寬高比例可能和設計圖差別很大棋恼,這種情況布局會出現(xiàn)嚴重的變形。
今日頭條的屏幕適配方案
該方案的要點有:
1锈玉、支持以一個維度去適配爪飘,保持在該維度上和設計圖一致。
如果以兩個維度分別適配拉背,在寬高比懸殊的情況下师崎,最終ui展示效果會變形。故該方案考慮以一個維度來適配椅棺。比如說在可滑動的頁面犁罩,以寬度為適配的維度齐蔽。
2、支持dp和sp單位床估,減小遷移成本含滴。
我們都知道dp和px的轉換公式:px=dp*density。如果參考設計圖的375dp丐巫,如果要保證所有設備計算的px正好是屏幕寬度谈况,就要動態(tài)的修改density的值。
因目標是:設備真實寬度px = 375*targetDensity递胧。適配后的targetDensity=設備真實寬度px/375碑韵,下一步的重點是查找源碼來修改系統(tǒng)中的density。
根據源碼可知缎脾,density是DisplayMetrics 中的成員變量祝闻,而 DisplayMetrics 實例通過 Resources#getDisplayMetrics 可以獲得,而Resouces通過Activity或者Application的Context獲得遗菠。同時需要處理DisplayMetrics對象的density联喘、densityDpi、scaledDensity幾個變量舷蒲,以及字體切換的情況。
但是對老項目的移植成本較高友多,因為該方案修改了系統(tǒng)的density值牲平。
smallestWidth適配
該方案識別屏幕可用高度和寬度上的最小尺寸的dp值,然后根據識別的結果在資源文件中尋找對應限定符的文件夾下的資源域滥。該方案是利用系統(tǒng)的機制來保證ui適配纵柿,開發(fā)者只需要生成多套寬高的資源文件。不會影響已有的代碼启绰,且有較好的兼容性昂儒。缺點就是資源文件相對增加了。
個人因需要兼容老項目委可,更傾向于smallestWidth方案渊跋。
參考文檔:
如何一稿適配 iOS、Android
一種極低成本的Android屏幕適配方式
Android AutoLayout全新的適配方式 堪稱適配終結者
Android 屏幕適配從未如斯簡單(8月10日最終更新版)
Android 目前穩(wěn)定高效的UI適配方案
今日頭條屏幕適配方案終極版正式發(fā)布!
Android屏幕適配總結終極方案