[整理]Android螢幕適配(不同的螢幕解析度和尺寸)
Android螢幕適配
目錄:
在實際開發過程中,會遇到不同的機型,為了讓控制元件和佈局要在不同螢幕上顯示相近的樣子,就得在drawable-ldpi/mdpi/hdpi/xhdpi/xxhdpi不同的資料夾下放置圖片素材或者在xml中用dp作為間距單位,用sp作為文字的單位。因此要搞清楚他們的關係,否則會很糾結,或者浪費大量的時間調整介面。
概念區分
px(pixels)畫素
,螢幕上的點,不同裝置顯示效果相同,例如,HVGA代表320×480畫素。in(英寸)螢幕的物理尺寸
, 每英寸等於2.54釐米。
- 例如我們經常說的手機螢幕大小有,5(英)寸、4(英)寸就是指這個單位。這些尺寸是螢幕的對角線長度。如果手機的螢幕是4英寸,表示手機的螢幕(可視區域)對角線長度是4 X 2.54 = 10.16釐米。
pt(point)標準長度單位
, 1pt=1/72英寸,用於印刷業,UI設計師會用,iOS字型單位,Android開發不涉及。dpi(dots per inch) 列印解析度
,每英寸所能列印的點數,即列印精度; 每英寸點數,即每英寸包含畫素個數。
- 比如320X480解析度的手機,寬2英寸,高3英寸, 每英寸包含的畫素點的數量為320/2=160dpi(橫向)或480/3=160dpi(縱向),160就是這部手機的dpi,橫向和縱向的這個值都是相同的,原因是大部分手機螢幕使用正方形的畫素點。
ppi (pixels per inch)影象解析度
, 畫素密度,在影象中, 每英寸所包含的畫素數目。density(螢幕密度)
dp(也即dip,device independent pixels)裝置獨立畫素
,Android特有的單位,與密度無關的畫素,基於螢幕密度的抽象單位,在320x480解析度,同時每英寸160點(dpi = 160)的顯示器上,1dp = 1px。sp(scaled pixels)放大畫素
,與刻度無關的畫素,字型單位,可以根據使用者的字型大小首選項進行縮放。sp和dp一樣,是android開發裡特有的單位, 檢視TextView的原始碼可知 Android 預設使用 sp 作為字號單位。以160ppi螢幕為標準,當字型大小為 100%時, 1sp=1px。
為什麼要把sp和dp代替px?最簡單的原因是他們不會因為ppi的變化而變化,在相同物理尺寸和不同ppi/dpi下,他們呈現的高度大小是相同。也就是說更接近物理呈現,而px則不行。
換算關係
px = dp * (dpi / 160),原來這裡的dpi是歸一化後的dpi。
則dp = px / (ppi / 160)
ppi = √(長度畫素數² + 寬度畫素數²) / 螢幕對角線英寸數
dp*ppi/160 = px。比如1dp x 320ppi/160 = 2px。
疑問:dpi和ppi是不是數值等同的?為何文件中的計算方式對不上?
劃分標準
Google官方指定的dpi區分標準(第1列和第2列):
名稱 | 畫素密度範圍 | 螢幕密度 | 圖片icon尺寸 |
---|---|---|---|
drawable-ldpi | ppi=120-160 | density=0.75 | 36*36 |
drawable-mdpi | ppi=160-240 | density=1(baseline) | 48*48 |
drawable-hdpi | ppi=240-320 | density=1.5 | 72*72 |
drawable-xhdpi | ppi=320-480 | density=2 | 96*96 |
drawable-xxhdpi | ppi=480-640 | density=3 | 144*144 |
drawable-xxxhdpi | ppi=640-800 | density=4 | 192*192 |
* 小規律:比值(各種螢幕密度的比值)
ldpi:mdpi:hdpi:xhdpi:xxhdpi:xxxdpi = 0.75:1:1.5:2:3:4 = 3:4:6:8:12:16
,
這個比值乘以12就得到對應螢幕密度手機桌面icon圖示大小
Android手機常見尺寸和對應解析度
- 摘自網路,有待驗證。
4:3 | 尺寸 | 對應解析度 |
---|---|---|
VGA | 640*480 (Video Graphics Array) | - |
QVGA | 320*240 (Quarter VGA) | - |
HVGA | 480*320 (Half-size VGA) | mdpi |
SVGA | 800*600 (Super VGA) | - |
5:3 | 尺寸 | 對應解析度 |
WVGA | 800*480 (Wide VGA) | hdpi |
16:9 | 尺寸 | 對應解析度 |
FWVGA | 854*480 (Full Wide VGA) | hdpi |
HD | 1920*1080 High Definition | - |
QHD | 960*540 | hdpi |
720p | 1280*720 | xhdpi |
1080p | 1920*1080 | xxhdpi |
部分Android測試機分析
在專案開發過程中,遇到螢幕很大的手機,結果顯示的圖示卻很小,和預期不一致,例如華為機型MT1-U06。
原因是:真機螢幕的ppi會取和谷歌標準最相近的標準ppi,然後density按照最相近的ppi來定。
以谷歌的標準,按安卓螢幕寬度為例,一般來說480px對應的density是1.5(也就是hdpi)對應320dp,720px對應的density是2.0(也就是xhdpi)對應360dp,1080px對應的density是3.0(也就是xxhdpi)對應360dp;
如果非要拿螢幕ppi說事的話,就是這樣,以160ppi為基準,160ppi對應的density是1.0,240ppi對應的density是1.5,320ppi對應的density是2.0…
部分機型螢幕尺寸、解析度計算:
- 三星Note5 ,主屏尺寸:5.7英寸,2560×1440畫素,測試為xxdpi
- ppi = √(長度畫素數² + 寬度畫素數²) / 螢幕對角線英寸數 = √(2560² + 1440²) / 5.7=√ 6553600 + 2073600 /5.7 = √ 8627200 /5.7 = 2937.2 /5.7 =515.3
- density = dpi/160 = 515.3/160 = 3.22
- 摩托諾拉Nexus6 ,主屏尺寸:5.96英寸,2560×1440畫素,測試為xxdpi
- ppi = √(長度畫素數² + 寬度畫素數²) / 螢幕對角線英寸數 = √(2560² + 1440²) / 5.96 =√ 6553600 + 2073600 /5.96 = √ 8627200 /5.96 = 2937.2 /5.96 =492.8
- density = dpi/160 = 492.8/160 = 3.08
- 一加A1001 ,主屏尺寸:5.5英寸,1920×1080畫素,測試為xxdpi
- ppi = √(長度畫素數² + 寬度畫素數²) / 螢幕對角線英寸數 = √(1920² + 1080²) / 5.5 =√ 3686400 + 1166400 /5.5 = √ 4852800 /5.5 = 2202.9 /5.5 =440.6
- density = dpi/160 = 440.6/160 = 2.75
- 就近原則,對應dpi為xxdpi,與測試結果一致
- Nexus 5,螢幕尺寸是4.95英寸,解析度是1920×1080畫素(FHD),測試為xxdpi
- ppi = √(長度畫素數² + 寬度畫素數²) / 螢幕對角線英寸數 =2202.9 /4.95 =445
- density = dpi/160 = 445/160 = 2.78
- 同理,就近原則,對應dpi為xxdpi,與測試結果一致
- 紅米note2 ,主屏:5.5英寸,1920x1080畫素,但是測試時選擇了xdpi
- ppi同一加A1001,本應選擇xxdpi,測試卻是xdpi
- 所以,有
不確定性
啊
- 華為MT1-U06,螢幕6.1英寸(機身尺寸:64.8*129*7.69mm),畫素1280×720px;對應hdpi
- ppi = √(長度畫素數² + 寬度畫素數²) / 螢幕對角線英寸數 = √(1280² + 720²) / 6.1 =√ 1638400 + 518400 /6.1 = √ 2156800 /6.1 = 1468.6 /6.1 =240.75
- density = dpi/160 = 240.75 /160 = 1.5
- 這個數值,剛剛好是hdpi!
- 三星galaxy s4 ,主屏:5英寸,1920x1080畫素,xxdpi
- ppi = √(長度畫素數² + 寬度畫素數²) / 螢幕對角線英寸數 =2202.9 /5 =440.6
- density = dpi/160 = 440.6/160 = 2.75
- 同理,就近原則,對應dpi為xxdpi,與測試結果一致
回到本節開頭的疑惑
所以,你以為那麼大螢幕怎麼著是xxhdpi,結果呢?人家只是hdpi。。。所以,螢幕大,真心說明不了神馬啊
補充.9圖的使用說明
9.png格式的圖片是Android平臺上新創的一種被拉伸卻不失真的東東。
.9格式的圖片佔用資源很小,一般一個幾KB或者幾十KB的圖片會變成幾百個位元組,有利於節省流量和提高載入速度。 注意圖片尺寸定義: .9格式的圖片四周不普通的png圖片相比多了一個畫素位的白色區域,該區域只有在圖片被還原和製造的時候才能看到,當打包後無法看見,並且圖片的總畫素會增大2個畫素,比如23x23畫素的9.png圖片被打包後會變成25x25畫素。所以我們在製作的時候要注意掌握尺寸。
.9圖上下左右黑邊的含義:
上黑色條位置向下覆蓋的區域表示圖片橫向拉伸時,只拉伸該區域;
左黑色條位置向右覆蓋的區域表示圖片縱向拉伸時,只拉伸該區域;
右黑色條位置向左覆蓋的區域表示圖片縱向顯示內容的區域;
下黑色條位置向上覆蓋的區域表示圖片橫向顯示內容的區域;
四角沒有黑色條的位置覆蓋的區域是圖片拉伸時保持不變(如果圖片的四角為弧形時,四角弧形均不變)。
簡言之,上和左控制拉伸,必須設定;右和下控制內部顯示區域,可選。