Android屏幕適配方案匯總介紹

目前開發(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屏幕適配總結終極方案

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末着倾,一起剝皮案震驚了整個濱河市拾酝,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌卡者,老刑警劉巖蒿囤,帶你破解...
    沈念sama閱讀 219,427評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異崇决,居然都是意外死亡材诽,警方通過查閱死者的電腦和手機底挫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來脸侥,“玉大人建邓,你說我怎么就攤上這事∈。” “怎么了涝缝?”我有些...
    開封第一講書人閱讀 165,747評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長譬重。 經常有香客問我拒逮,道長,這世上最難降的妖魔是什么臀规? 我笑而不...
    開封第一講書人閱讀 58,939評論 1 295
  • 正文 為了忘掉前任滩援,我火速辦了婚禮,結果婚禮上塔嬉,老公的妹妹穿的比我還像新娘玩徊。我一直安慰自己,他們只是感情好谨究,可當我...
    茶點故事閱讀 67,955評論 6 392
  • 文/花漫 我一把揭開白布恩袱。 她就那樣靜靜地躺著,像睡著了一般胶哲。 火紅的嫁衣襯著肌膚如雪畔塔。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,737評論 1 305
  • 那天鸯屿,我揣著相機與錄音澈吨,去河邊找鬼。 笑死寄摆,一個胖子當著我的面吹牛谅辣,可吹牛的內容都是我干的。 我是一名探鬼主播婶恼,決...
    沈念sama閱讀 40,448評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼桑阶,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了勾邦?” 一聲冷哼從身側響起联逻,我...
    開封第一講書人閱讀 39,352評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎检痰,沒想到半個月后包归,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,834評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡铅歼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,992評論 3 338
  • 正文 我和宋清朗相戀三年公壤,在試婚紗的時候發(fā)現(xiàn)自己被綠了换可。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,133評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡厦幅,死狀恐怖沾鳄,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情确憨,我是刑警寧澤译荞,帶...
    沈念sama閱讀 35,815評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站休弃,受9級特大地震影響吞歼,放射性物質發(fā)生泄漏。R本人自食惡果不足惜塔猾,卻給世界環(huán)境...
    茶點故事閱讀 41,477評論 3 331
  • 文/蒙蒙 一篙骡、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧丈甸,春花似錦糯俗、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至顿仇,卻和暖如春淘正,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背夺欲。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評論 1 272
  • 我被黑心中介騙來泰國打工跪帝, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留今膊,地道東北人些阅。 一個月前我還...
    沈念sama閱讀 48,398評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像斑唬,于是被迫代替她去往敵國和親市埋。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,077評論 2 355