1.分辨率/屏幕大小/密度的區別

(1)分辨率。分辨率就是手機屏幕的像素點數,一般描述成屏幕的“寬×高”,安卓手機屏幕常見的分辨率有480×800、720×1280、1080×1920、1440x2560的2K屏等。720×1280表示此屏幕在寬度方向有720個像素,在高度方向有1280個像素。

(2)屏幕大小。屏幕大小是手機對角線的物理尺寸,以英寸(inch)爲單位。比如某某手機爲“5寸大屏手機”,就是指對角線的尺寸,5寸×2.54釐米/寸=12.7釐米。

(3)密度(dpi,dots per inch;或PPI,pixels per inch)。從英文顧名思義,就是每英寸的像素點數,數值越高當然顯示越細膩。假如我們知道一部手機的分辨率是1080×1920,屏幕大小是5英寸,你能否算出此屏幕的密度呢?中學的勾股定理派上用場啦!通過寬1080和高1920,根據勾股定理,我們得出對角線的像素數大約是2203,那麼用2203除以5就是此屏幕的密度了,計算結果是440。440dpi的屏幕已經相當細膩了。

2.實際密度與系統密度的區別

“實際密度”就是我們自己算出來的密度,這個密度代表了屏幕真實的細膩程度,如上述例子中的440dpi就是實際密度,說明這塊屏幕每寸有440個像素。5英寸1080×1920的屏幕密度是440,而相同分辨率的4.5英寸屏幕密度是490。如此看來,屏幕密度將會出現很多數值,呈現嚴重的碎片化。而密度又是安卓屏幕將界面進行縮放顯示的依據,那麼安卓是如何適配這麼多屏幕的呢?

其實,每部安卓手機屏幕都有一個初始的固定密度,這些數值是120、160、240、320、480,我們權且稱爲“系統密度”也稱爲“廣義密度”。大家發現規律沒有?相隔數值之間是2倍的關係。一般情況下,240×320的屏幕是低密度120dpi,即ldpi;320×480的屏幕是中密度160dpi,即mdpi;480×800的屏幕是高密度240dpi,即hdpi;720×1280的屏幕是超高密度320dpi,即xhdpi;1080×1920的屏幕是超超高密度480dpi,即xxhdpi。

安卓對界面元素進行縮放的比例依據正是系統密度,而不是實際密度。

將一定範圍的屏幕密度的設備視爲一個特定的密度,比如屏幕密度在240左右的設備視爲高密度(hdpi),在320左右的視爲超高密度(xhdpi)等。

3.dp、sp、px的區別

px:即像素,1px代表屏幕上一個物理的像素點;px單位不被建議使用,因爲同樣100px的圖片,在不同手機上顯示的實際大小可能不同,偶爾用到px的情況,是需要畫1像素表格線或陰影線的時候,用其他單位如dp會顯得模糊。

dp也可寫爲dip,即density-independent pixel。你可以想象dp更類似一個物理尺寸,比如一張寬和高均爲100dp的圖片在320×480和480×800的手機上“看起來”一樣大。而實際上,它們的像素值並不一樣。dp正是這樣一個尺寸,不管這個屏幕的密度是多少,屏幕上相同dp大小的元素看起來始終差不多大。

sp:sp和dp很類似但唯一的區別是,Android系統允許用戶自定義文字尺寸大小(小、正常、大、超大等等),所以目前主流應用字體大小已經改用dp,不用sp,省去用戶手動調整字體適配的麻煩。

4.dp與px的轉換

dp與px的換算要以系統密度爲準

在安卓中,系統密度爲160dpi的中密度手機屏幕爲基準屏幕,即320×480的手機屏幕。在這個屏幕中,1dp=1px。

100dp在320×480(mdpi,160dpi)中是100px。那麼100dp在480×800(hdpi,240dpi)的手機上是多少px呢?我們知道100dp在兩個手機上看起來差不多大,根據160與240的比例關係,我們可以知道,在480×800中,100dp實際覆蓋了150px。

中密度和高密度的縮放比例,720×1280的系統密度爲320,320×480的系統密度爲160,320/160=2,那麼在720×1280中,1dp=2px。同理,在1080×1920中,1dp=3px。

ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12,我們發現,相隔數字之間還是2倍的關係。計算的時候,以mdpi爲基準。比如在720×1280(xhdpi)中,1dp等於多少px呢?mdpi是4,xhdpi是8,2倍的關係,即1dp=2px。反着計算更重要,比如你用PhotoShop在720×1280的畫布中製作了界面效果圖,兩個元素的間距是20px,那開發是多少dp呢?2倍的關係,那就是10dp!

實際程序中根據不同機型,可以用代碼計算相應的轉換。

當安卓系統字號設爲“普通”時,sp與px的尺寸換算和dp與px是一樣的。比如某個文字大小在720×1280的PS畫布中是24px,那麼告訴工程師,這個文字大小是12sp。

5.建議在xdhpi中作圖

安卓手機有這麼多屏幕,我到底依據哪種屏幕作圖呢?沒有必要爲不同密度的手機都提供一套素材,大部分情況下,一套就夠了。

現在手機比較高的分辨率是1080×1920,你可以選擇這個尺寸作圖,但是圖片素材將會增大應用安裝包的大小。並且尺寸越大的圖片佔用的內存也就越高。如果你不是設計ROM,而是做一款應用,我建議大家用PS在720×1280的畫布中作圖。這個尺寸兼顧了美觀性、經濟性和計算的簡單。美觀性是指,以這個尺寸做出來的應用,在720×1280中顯示完美,在1080×1920中看起來也比較清晰;經濟性是指,這個分辨率下導出的圖片尺寸適中,內存消耗不會過高,並且圖片文件大小適中,安裝包也不會過大;計算的簡單,就是1dp=2px啊,多好計算啊!

做出來的圖片,記着讓界面工程師放進drawable-xhdpi的資源文件夾中。

xhdpi (320dpi, 2x) 同iOS @2x 750x1334

xxdpi (480dpi, 3x) 同iOS @3x 1242x2208(除以1.15,則等比縮放到android的1080*1920)

淘寶選擇2x標註,3x切圖,具體講解如下:

http://blog.csdn.net/zx_android/article/details/51150156

6.屏幕的寬高差異

在720×1280中作圖,要考慮向下兼容不同的屏幕。通過計算我們可以知道,320×480和480×800的屏幕寬度都是320dp,而720×1280和1080×1920的屏幕寬度都是360dp。它們之間有40dp的差距,這40dp在設計中影響還是很大的。如下圖蝴蝶圖片距離屏幕的左右邊距在320dp寬的屏幕和360dp寬的屏幕中就不一樣。

如果想消除這些比例差異,可以通過添加布局文件來實現。一般情況下,佈局文件放在layout文件夾中,如果要單獨對360dp的屏幕進行調整,你可以單做做一個佈局文件放在layout-w360dp中;不過,最好是默認針對360dp的屏幕布局(較爲主流),然後對320dp的屏幕單獨佈局,將佈局文件放到layout-w320dp中;如果你想對某個特殊的分辨率進行調整,那麼你可以將佈局文件放在標有分辨率的文件夾中,如layout-854×480。

7.幾個資源的文件夾

在720×1280中做了圖片,要讓開發人員放到drawable-xhdpi的資源文件夾中,這樣纔可以顯示正確。個人認爲僅提供一套素材就可以了,可以測試一下應用在低端手機上運行是否流暢,如果比較卡頓,可以根據需要提供部分mdpi的圖片素材,因爲xhdpi中的圖片運行在mdpi的手機上會比較佔內存。

以應用圖標爲例,xhdpi中的圖標大小是96px,如果要單獨給mdpi提供圖標,那麼這個圖標大小是48px,放到drawable-mdpi的資源文件夾中。各個資源文件夾中的圖片尺寸同樣符合ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12的規律。

如果你把一個高2px的分割線素材做成了9.png圖片,你想讓細線在不同密度中都是2px,而不被安卓根據密度進行縮放,怎麼辦?你可以把這個分割線素材放到drawable-nodpi中,這個資源文件夾中的圖片,將按照實際像素大小進行顯示,而不會被安卓根據密度進行縮放。即在mdpi中細線是2px(2dp),在xhdpi中細線是2px(1dp)。

8.資源加載優先級

Google官方文檔顯示如下:

如果有最匹配的資源(e.g. 設備是HDPI,存在hdpi的資源),則刪除其他的資源

如果沒有最佳匹配資源,優先匹配更高dpi的資源,縮小合適的比例以後使用(e.g. 設備是HDPI,未能找到hdpi的資源,但是有xhdpi的資源,則把XHDPI的資源縮小的3/4以後使用),並排除其他的資源(Google解釋說,因爲執行縮小操作比執行放大操作更加方便,所以高dpi資源優先與低dpi資源,不過,個人認爲對於大部分圖片來說,大圖縮小造成的失真應該是小於小圖放大造成的失真)

如果沒最佳匹配的資源,也不存在更高dpi的資源,則使用dpi更低的資源,並放大合適的比例以後使用(e.g. 設備爲HDPI,未能找到hdpi以及更高的資源,單存在mdpi的資源,則把mdpi的資源放大到3/2以後使用),並刪排除其他資源

原則上來說,dalvik優先使用符合設備dpi的資源,其次是dpi較低的高dpi資源,再次是dpi較高的高dpi資源,最後採用nodpi的資源,由此,根據設備自身的dpi的不同,不同dpi資源的優先級是有差異的(忽略mdpi&hdpi):

設備dpi優先級順序(由高到低)

tvdpi:

tvdpi>hdpi>xhdpi>xxhdpi>mdpi>default>ldpi>nodpi

hdpi:

hdpi>xhdpi>xxhdpi>tvdpi>mdpi>default>ldpi>nodpi

xhdpi:

xhdpi>xxhdpi>hdpi>tvdpi>mdpi>default>ldpi>nodpi

xxhdpi:

xxhdpi>xhdpi>hdpi>tvdpi>mdpi>default>ldpi>nodpi

另外,除了nodpi以外,使用其他dpi資源前,還需要根據縮放比進行縮小/放大操作。

9.項目實戰

1)類似上圖是美工標註後的高保真圖,分辨率爲640*1136,對應到安卓爲720p(會有細微偏差),ios爲2@,安卓開發同學拿到圖,下面的工作就比較簡單了。

1.單位換算:只需要將上面的px/2,則得到代碼中距離需要的dp,字體大小需要的sp。

2.切圖處理:美工的切圖一律放入xhdpi文件即可。

這裏我舉兩個適配的例子幫助大家更好的理解。

1.【 代碼適配

上圖大家覺得怎麼佈局比較好?
解答:【我加入的圈子】左邊空出固定距離,右邊【>】空出固定距離,中間鋪滿屏幕,這樣可以讓360dp甚至更大的手機,不至於讓頁面內容縮在中間一小塊。再看下下面的佈局:

2.【 動態佈局適配

上圖又怎麼佈局呢?做到各種機型適配。

我在項目中的做法是,用(屏幕的寬度(像素)-兩邊的間距-中間間距)/3,這樣得到每個圖片的寬度,然後圖片的高度設置成高圖片的寬度相等(當然也可以重寫view,自動設置寬等於高)

代碼如下:

<span><span style="letter-spacing: 1px;">LinearLayout.LayoutParams linearParams = (LinearLayout.LayoutParams)pic.getLayoutParams();</span></span>

<span><span style="letter-spacing: 1px;">linearParams.width =(context.getResources().getDisplayMetrics().widthPixels-DisplayUtil.dip2px(context, 44)) / 3;</span></span>

<span><span style="letter-spacing: 1px;">linearParams.height = linearParams.width;</span></span>

<span><span style="letter-spacing: 1px;">pic.setLayoutParams(linearParams); //使設置好的佈局參數應用到控件</span></span>

3. 【比重適配】

weight也可以搞定了!的確,可以用比重去做,三個圖片各佔比爲1,再調整下邊距,但是高度怎麼辦,前面說過上,可以重寫view,讓這個view的高跟寬度相等,這種方式也可以。

4. 【另類適配】

應該大家有看到有人提到過純代碼適配,就在在java代碼中動態設置每個view的寬跟高,寬跟高是通過計算得出的。比如設計圖是640*1136,這個view的寬在640的設計圖上是20px。所以有同學會通過DisplayMetrics metrics = res.getDisplayMetrics();screenWidth = metrics.widthPixels screenHeight = metrics.heightPixels;拿到當前屏幕的寬跟高,如果當前手機屏幕是7201280,及screenWidth =720,screenHeight =1280,那麼當前的view的寬度等於screenWidth /640*view的寬度,這樣的確非常完美,每部手機都可以等比的縮放。但是代碼維護跟開發難度就是成倍的增加,不建議使用。

5. 【不同的layout適配】

在res目錄下創建不同的layout文件夾,比如:layout-640x360、layout-800x480……所有的layout文件在編譯之後都會寫入R.java裏,而系統會根據屏幕的大小自己選擇合適的layout進行使用。這種現在基本不會有人這麼適配,不展開討論。

6. dimen尺寸資源文件的使用

dimen.xml在values文件夾下面

<span><span style="letter-spacing: 1px;">&lt;resources&gt;</span></span>

<span> <span style="letter-spacing: 1px;">&lt;!-- Default screen margins, per the Android Design guidelines. --&gt;</span></span>

<span> <span style="letter-spacing: 1px;">&lt;dimen name=&quot;btn_width&quot;&gt;16dp&lt;/dimen&gt;</span></span>

<span> <span style="letter-spacing: 1px;">&lt;dimen name=&quot;btn_height&quot;&gt;16dp&lt;/dimen&gt;</span></span>

<span><span style="letter-spacing: 1px;">&lt;/resources&gt;</span></span>

佈局中的使用:

<span><span style="letter-spacing: 1px;">&lt;Button </span></span>

<span><span style="letter-spacing: 1px;">android:text=&quot;@string/test_dimen1&quot; </span></span>

<span><span style="letter-spacing: 1px;">android:id=&quot;@+id/Button01&quot; </span></span>

<span><span style="letter-spacing: 1px;">android:layout_width=&quot;@dimen/btn_width&quot; </span></span>

<span><span style="letter-spacing: 1px;">android:layout_height=&quot;@dimen/btn_height&quot;/&gt;</span></span>

文件夾含義:

values-v11 -------API 11+代表android 3.0 +,意思是在API11設備上,該目錄下的dimens.xml代替res/values/dimens.xml

values-480x320、values-800x480等 ------------意思是在不同分辨率下,該目錄下的dimens.xml代替res/values/dimens.xml

反編譯某主流電商APP後的截圖如下所示:

相關閱讀

Android 升級適配爬坑歷程

Android Q 適配

安卓 9.0 適配方案和踩坑

Android今日頭條UI適配完善版

全方面分析 Hilt 和 Koin 性能

如果你有寫博客的好習慣

歡迎投稿

點個在看,小生感恩 :heart:

相關文章