Android的螢幕適配一直以來都在折磨著我們這些開發者，本篇文章以Google的官方文件為基礎，全面而深入的講解了Android螢幕適配的原因、重要概念、解決方案及最佳實踐，我相信如果你能認真的學習本文，對於Android的螢幕適配，你將有所收穫！

Android螢幕適配出現的原因

在我們學習如何進行螢幕適配之前，我們需要先了解下為什麼Android需要進行螢幕適配。

由於Android系統的開放性，任何使用者、開發者、OEM廠商、運營商都可以對Android進行定製，修改成他們想要的樣子。

但是這種“碎片化”到底到達什麼程度呢？

在2012年，OpenSignalMaps（以下簡稱OSM）釋出了第一份Android碎片化報告，統計資料表明，

• 2012年，支援Android的裝置共有3997種。
• 2013年，支援Android的裝置共有11868種。
• 2014年，支援Android的裝置共有18796種。

下面這張圖片所顯示的內容足以充分說明當今Android系統碎片化問題的嚴重性，因為該圖片中的每一個矩形都代表著一種Android裝置。

而隨著支援Android系統的裝置(手機、平板、電視、手錶)的增多，裝置碎片化、品牌碎片化、系統碎片化、感測器碎片化和螢幕碎片化的程度也在不斷地加深。而我們今天要探討的，則是對我們開發影響比較大的——螢幕的碎片化。

下面這張圖是Android螢幕尺寸的示意圖，在這張圖裡面，藍色矩形的大小代表不同尺寸，顏色深淺則代表所佔百分比的大小。

而與之相對應的，則是下面這張圖。這張圖顯示了IOS裝置所需要進行適配的螢幕尺寸和佔比。

當然，這張圖片只是4,4s,5,5c,5s和平板的尺寸，現在還應該加上新推出的iphone6和plus，但是和Android的螢幕碎片化程度相比而言，還是差的太遠。

詳細的統計資料請到這裡檢視

現在你應該很清楚為什麼要對Android的螢幕進行適配了吧？螢幕尺寸這麼多，為了讓我們開發的程式能夠比較美觀的顯示在不同尺寸、解析度、畫素密度(這些概念我會在下面詳細講解)的裝置上，那就要在開發的過程中進行處理，至於如何去進行處理，這就是我們今天的主題了。

但是在開始進入主題之前，我們再來探討一件事情，那就是Android裝置的螢幕尺寸，從幾寸的智慧手機，到10寸的平板電腦，再到幾十寸的數字電視，我們應該適配哪些裝置呢？

其實這個問題不應該這麼考慮，因為對於具有相同畫素密度的裝置來說，畫素越高，尺寸就越大，所以我們可以換個思路，將問題從單純的尺寸大小轉換到畫素大小和畫素密度的角度來。

下圖是2014年初，友盟統計的佔比5%以上的6個主流解析度，可以看出，佔比最高的是480*800，320*480的裝置竟然也佔據了很大比例，但是和半年前的資料相比較，中低解析度(320*480、480*800)的比例在減少，而中高解析度的比例則在不斷地增加。雖然每個解析度所佔的比例在變化，但是總的趨勢沒變，還是這六種，只是解析度在不斷地提高。

所以說，我們只要儘量適配這幾種解析度，就可以在大部分的手機上正常運行了。

當然了，這只是手機的適配，對於平板裝置(電視也可以看做是平板)，我們還需要一些其他的處理。

好了，到目前為止，我們已經弄清楚了Android開發為什麼要進行適配，以及我們應該適配哪些物件，接下來，終於進入我們的正題了！

首先，我們先要學習幾個重要的概念。

重要概念

什麼是螢幕尺寸、螢幕解析度、螢幕畫素密度？
什麼是dp、dip、dpi、sp、px？他們之間的關係是什麼？
什麼是mdpi、hdpi、xdpi、xxdpi？如何計算和區分？

在下面的內容中我們將介紹這些概念。

螢幕尺寸

螢幕尺寸指螢幕的對角線的長度，單位是英寸，1英寸=2.54釐米

比如常見的螢幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等

螢幕解析度

螢幕解析度是指在橫縱向上的畫素點數，單位是px，1px=1個畫素點。一般以縱向畫素*橫向畫素，如1960*1080。

螢幕畫素密度

螢幕畫素密度是指每英寸上的畫素點數，單位是dpi，即“dot per inch”的縮寫。螢幕畫素密度與螢幕尺寸和螢幕解析度有關，在單一變化條件下，螢幕尺寸越小、解析度越高，畫素密度越大，反之越小。

dp、dip、dpi、sp、px

px我們應該是比較熟悉的，前面的解析度就是用的畫素為單位，大多數情況下，比如UI設計、Android原生API都會以px作為統一的計量單位，像是獲取螢幕寬高等。

dip和dp是一個意思，都是Density Independent Pixels的縮寫，即密度無關畫素，上面我們說過，dpi是螢幕畫素密度，假如一英寸裡面有160個畫素，這個螢幕的畫素密度就是160dpi，那麼在這種情況下，dp和px如何換算呢？在Android中，規定以160dpi為基準，1dip=1px，如果密度是320dpi，則1dip=2px，以此類推。

假如同樣都是畫一條320px的線，在480*800解析度手機上顯示為2/3螢幕寬度，在320*480的手機上則佔滿了全屏，如果使用dp為單位，在這兩種解析度下，160dp都顯示為螢幕一半的長度。這也是為什麼在Android開發中，寫佈局的時候要儘量使用dp而不是px的原因。

而sp，即scale-independent pixels，與dp類似，但是可以根據文字大小首選項進行放縮，是設定字型大小的御用單位。

mdpi、hdpi、xdpi、xxdpi

其實之前還有個ldpi，但是隨著移動裝置配置的不斷升級，這個畫素密度的裝置已經很罕見了，所在現在適配時不需考慮。

mdpi、hdpi、xdpi、xxdpi用來修飾Android中的drawable資料夾及values資料夾，用來區分不同畫素密度下的圖片和dimen值。

那麼如何區分呢？Google官方指定按照下列標準進行區分：

在進行開發的時候，我們需要把合適大小的圖片放在合適的資料夾裡面。下面以圖示設計為例進行介紹。

在設計圖示時，對於五種主流的畫素密度（MDPI、HDPI、XHDPI、XXHDPI 和 XXXHDPI）應按照 2:3:4:6:8 的比例進行縮放。例如，一個啟動圖示的尺寸為48x48 dp，這表示在 MDPI 的螢幕上其實際尺寸應為 48x48 px，在 HDPI 的螢幕上其實際大小是 MDPI 的 1.5 倍 (72x72 px)，在 XDPI 的螢幕上其實際大小是 MDPI 的 2 倍 (96x96 px)，依此類推。

雖然 Android 也支援低畫素密度 (LDPI) 的螢幕，但無需為此費神，系統會自動將 HDPI 尺寸的圖示縮小到 1/2 進行匹配。

下圖為圖示的各個螢幕密度的對應尺寸

解決方案

支援各種螢幕尺寸

使用wrap_content、match_parent、weight

要確保佈局的靈活性並適應各種尺寸的螢幕，應使用 “wrap_content” 和 “match_parent” 控制某些檢視元件的寬度和高度。

使用 “wrap_content”，系統就會將檢視的寬度或高度設定成所需的最小尺寸以適應檢視中的內容，而 “match_parent”（在低於 API 級別 8 的級別中稱為 “fill_parent”）則會展開元件以匹配其父檢視的尺寸。

如果使用 “wrap_content” 和 “match_parent” 尺寸值而不是硬編碼的尺寸，檢視就會相應地僅使用自身所需的空間或展開以填滿可用空間。此方法可讓佈局正確適應各種螢幕尺寸和螢幕方向。

下面是一段示例程式碼

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent">
    <LinearLayoutandroid:layout_width="match_parent"android:id="@+id/linearLayout1"android:gravity="center"android:layout_height="50dp">
        <ImageViewandroid:id="@+id/imageView1"android:layout_height="wrap_content"android:layout_width="wrap_content"android:src="@drawable/logo"android:paddingRight="30dp"android:layout_gravity="left"android:layout_weight="0" />
        <Viewandroid:layout_height="wrap_content"android:id="@+id/view1"android:layout_width="wrap_content"android:layout_weight="1" />
        <Buttonandroid:id="@+id/categorybutton"android:background="@drawable/button_bg"android:layout_height="match_parent"android:layout_weight="0"android:layout_width="120dp"style="@style/CategoryButtonStyle"/>
    </LinearLayout>

    <fragmentandroid:id="@+id/headlines"android:layout_height="fill_parent"android:name="com.example.android.newsreader.HeadlinesFragment"android:layout_width="match_parent" />
</LinearLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32

下圖是在橫縱屏切換的時候的顯示效果，我們可以看到這樣可以很好的適配螢幕尺寸的變化。

weight是線性佈局的一個獨特的屬性，我們可以使用這個屬性來按照比例對介面進行分配，完成一些特殊的需求。

但是，我們對於這個屬性的計算應該如何理解呢？

首先看下面的例子，我們在佈局中這樣設定我們的介面

我們在佈局裡面設定為線性佈局，橫向排列，然後放置兩個寬度為0dp的按鈕，分別設定weight為1和2，在效果圖中，我們可以看到兩個按鈕按照1：2的寬度比例正常排列了，這也是我們經常使用到的場景，這是時候很好理解，Button1的寬度就是1/(1+2) = 1/3，Button2的寬度則是2/(1+2) = 2/3，我們可以很清楚的明白這種情景下的佔比如何計算。

但是假如我們的寬度不是0dp(wrap_content和0dp的效果相同)，則是match_parent呢？

下面是設定為match_parent的效果

我們可以看到，在這種情況下，佔比和上面正好相反，這是怎麼回事呢？說到這裡，我們就不得不提一下weight的計算方法了。

android:layout_weight的真實含義是:如果View設定了該屬性並且有效，那麼該 View的寬度等於原有寬度(android:layout_width)加上剩餘空間的佔比。

從這個角度我們來解釋一下上面的現象。在上面的程式碼中，我們設定每個Button的寬度都是match_parent，假設螢幕寬度為L，那麼每個Button的寬度也應該都為L，剩餘寬度就等於L-（L+L）= -L。

Button1的weight=1，剩餘寬度佔比為1/(1+2)= 1/3，所以最終寬度為L+1/3*(-L)=2/3L，Button2的計算類似，最終寬度為L+2/3(-L)=1/3L。

這是在水平方向上的，那麼在垂直方向上也是這樣嗎？

下面是測試程式碼和效果

如果是垂直方向，那麼我們應該改變的是layout_height的屬性，下面是0dp的顯示效果

下面是match_parent的顯示效果，結論和水平是完全一樣的

雖然說我們演示了match_parent的顯示效果，並說明了原因，但是在真正用的時候，我們都是設定某一個屬性為0dp，然後按照權重計算所佔百分比。

使用相對佈局，禁用絕對佈局

在開發中，我們大部分時候使用的都是線性佈局、相對佈局和幀佈局，絕對佈局由於適配性極差，所以極少使用。

由於各種佈局的特點不一樣，所以不能說哪個佈局好用，到底應該使用什麼佈局只能根據實際需求來確定。我們可以使用 LinearLayout 的巢狀例項並結合 “wrap_content” 和 “match_parent”，以便構建相當複雜的佈局。不過，我們無法通過 LinearLayout 精確控制子檢視的特殊關係；系統會將 LinearLayout 中的檢視直接並排列出。

如果我們需要將子檢視排列出各種效果而不是一條直線，通常更合適的解決方法是使用 RelativeLayout，這樣就可以根據各元件之間的特殊關係指定佈局了。例如，我們可以將某個子檢視對齊到螢幕左側，同時將另一個檢視對齊到螢幕右側。

下面的程式碼以官方Demo為例說明。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent">
    <TextView
android:id="@+id/label"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Type here:"/>
    <EditText
android:id="@+id/entry"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@id/label"/>
    <Button
android:id="@+id/ok"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/entry"android:layout_alignParentRight="true"android:layout_marginLeft="10dp"android:text="OK" />
    <Button
android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_toLeftOf="@id/ok"android:layout_alignTop="@id/ok"android:text="Cancel" />
</RelativeLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29

在上面的程式碼中我們使用了相對佈局，並且使用alignXXX等屬性指定了子控制元件的位置，下面是這種佈局方式在應對螢幕變化時的表現

在小尺寸螢幕的顯示

在平板的大尺寸上的顯示效果

雖然控制元件的大小由於螢幕尺寸的增加而發生了改變，但是我們可以看到，由於使用了相對佈局，所以控制元件之前的位置關係並沒有發生什麼變化，這說明我們的適配成功了。

使用限定符

使用尺寸限定符

上面所提到的靈活佈局或者是相對佈局，可以為我們帶來的優勢就只有這麼多了。雖然這些佈局可以拉伸元件內外的空間以適應各種螢幕，但它們不一定能為每種螢幕都提供最佳的使用者體驗。因此，我們的應用不僅僅只實施靈活佈局，還應該應針對各種螢幕配置提供一些備用佈局。

如何做到這一點呢？我們可以通過使用配置限定符，在執行時根據當前的裝置配置自動選擇合適的資源了，例如根據各種螢幕尺寸選擇不同的佈局。

很多應用會在較大的螢幕上實施“雙面板”模式，即在一個面板上顯示專案列表，而在另一面板上顯示對應內容。平板電腦和電視的螢幕已經大到可以同時容納這兩個面板了，但手機螢幕就需要分別顯示。因此，我們可以使用以下檔案以便實施這些佈局：

res/layout/main.xml，單面板（預設）佈局：

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent">

    <fragmentandroid:id="@+id/headlines"android:layout_height="fill_parent"android:name="com.example.android.newsreader.HeadlinesFragment"android:layout_width="match_parent" />
</LinearLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

res/layout-large/main.xml，雙面板佈局：

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="horizontal">
    <fragmentandroid:id="@+id/headlines"android:layout_height="fill_parent"android:name="com.example.android.newsreader.HeadlinesFragment"android:layout_width="400dp"android:layout_marginRight="10dp"/>
    <fragmentandroid:id="@+id/article"android:layout_height="fill_parent"android:name="com.example.android.newsreader.ArticleFragment"android:layout_width="fill_parent" />
</LinearLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

請注意第二種佈局名稱目錄中的 large 限定符。系統會在屬於較大螢幕（例如 7 英寸或更大的平板電腦）的裝置上選擇此佈局。系統會在較小的螢幕上選擇其他佈局（無限定符）。

使用最小寬度限定符

在版本低於 3.2 的 Android 裝置上，開發人員遇到的問題之一是“較大”螢幕的尺寸範圍，該問題會影響戴爾 Streak、早期的 Galaxy Tab 以及大部分 7 英寸平板電腦。即使這些裝置的螢幕屬於“較大”的尺寸，但很多應用可能會針對此類別中的各種裝置（例如 5 英寸和 7 英寸的裝置）顯示不同的佈局。這就是 Android 3.2 版在引入其他限定符的同時引入“最小寬度”限定符的原因。

最小寬度限定符可讓您通過指定某個最小寬度（以 dp 為單位）來定位螢幕。例如，標準 7 英寸平板電腦的最小寬度為 600 dp，因此如果您要在此類螢幕上的使用者介面中使用雙面板（但在較小的螢幕上只顯示列表），您可以使用上文中所述的單面板和雙面板這兩種佈局，但您應使用 sw600dp 指明雙面板佈局僅適用於最小寬度為 600 dp 的螢幕，而不是使用 large 尺寸限定符。

res/layout/main.xml，單面板（預設）佈局：

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent">

    <fragmentandroid:id="@+id/headlines"android:layout_height="fill_parent"android:name="com.example.android.newsreader.HeadlinesFragment"android:layout_width="match_parent" />
</LinearLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

res/layout-sw600dp/main.xml，雙面板佈局：

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="horizontal">
    <fragmentandroid:id="@+id/headlines"android:layout_height="fill_parent"android:name="com.example.android.newsreader.HeadlinesFragment"android:layout_width="400dp"android:layout_marginRight="10dp"/>
    <fragmentandroid:id="@+id/article"android:layout_height="fill_parent"android:name="com.example.android.newsreader.ArticleFragment"android:layout_width="fill_parent" />
</LinearLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

也就是說，對於最小寬度大於等於 600 dp 的裝置，系統會選擇 layout-sw600dp/main.xml（雙面板）佈局，否則系統就會選擇 layout/main.xml（單面板）佈局。

但 Android 版本低於 3.2 的裝置不支援此技術，原因是這些裝置無法將 sw600dp 識別為尺寸限定符，因此我們仍需使用 large 限定符。這樣一來，就會有一個名稱為 res/layout-large/main.xml 的檔案（與 res/layout-sw600dp/main.xml 一樣）。但是沒有太大關係，我們將馬上學習如何避免此類佈局檔案出現的重複。

使用佈局別名

最小寬度限定符僅適用於 Android 3.2 及更高版本。因此，如果我們仍需使用與較低版本相容的概括尺寸範圍（小、正常、大和特大）。例如，如果要將使用者介面設計成在手機上顯示單面板，但在 7 英寸平板電腦、電視和其他較大的裝置上顯示多面板，那麼我們就需要提供以下檔案：

• res/layout/main.xml: 單面板佈局
• res/layout-large: 多面板佈局
• res/layout-sw600dp: 多面板佈局

後兩個檔案是相同的，因為其中一個用於和 Android 3.2 裝置匹配，而另一個則是為使用較低版本 Android 的平板電腦和電視準備的。

要避免平板電腦和電視的檔案出現重複（以及由此帶來的維護問題），您可以使用別名檔案。例如，您可以定義以下佈局：

• res/layout/main.xml，單面板佈局
• res/layout/main_twopanes.xml，雙面板佈局

然後新增這兩個檔案：

res/values-large/layout.xml:

<resources>
    <itemname="main"type="layout">@layout/main_twopanes</item>
</resources>

• 1
• 2
• 3

res/values-sw600dp/layout.xml:

<resources>
    <itemname="main"type="layout">@layout/main_twopanes</item>
</resources>

• 1
• 2
• 3

後兩個檔案的內容相同，但它們並未實際定義佈局。它們只是將 main 設定成了 main_twopanes 的別名。由於這些檔案包含 large 和 sw600dp 選擇器，因此無論 Android 版本如何，系統都會將這些檔案應用到平板電腦和電視上（版本低於 3.2 的平板電腦和電視會匹配 large，版本高於 3.2 的平板電腦和電視則會匹配 sw600dp）。

使用螢幕方向限定符

某些佈局會同時支援橫向模式和縱向模式，但我們可以通過調整優化其中大部分佈局的效果。在新聞閱讀器示例應用中，每種螢幕尺寸和螢幕方向下的佈局行為方式如下所示：

• 小螢幕，縱向：單面板，帶徽標
• 小螢幕，橫向：單面板，帶徽標
• 7 英寸平板電腦，縱向：單面板，帶操作欄
• 7 英寸平板電腦，橫向：雙面板，寬，帶操作欄
• 10 英寸平板電腦，縱向：雙面板，窄，帶操作欄
• 10 英寸平板電腦，橫向：雙面板，寬，帶操作欄
• 電視，橫向：雙面板，寬，帶操作欄

因此，這些佈局中的每一種都定義在了 res/layout/ 目錄下的某個 XML 檔案中。為了繼續將每個佈局分配給各種螢幕配置，該應用會使用佈局別名將兩者相匹配：

res/layout/onepane.xml:(單面板)

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent">

    <fragmentandroid:id="@+id/headlines"android:layout_height="fill_parent"android:name="com.example.android.newsreader.HeadlinesFragment"android:layout_width="match_parent" />
</LinearLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

res/layout/onepane_with_bar.xml:(單面板帶操作欄)

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent">
    <LinearLayoutandroid:layout_width="match_parent"android:id="@+id/linearLayout1"android:gravity="center"android:layout_height="50dp">
        <ImageViewandroid:id="@+id/imageView1"android:layout_height="wrap_content"android:layout_width="wrap_content"android:src="@drawable/logo"android:paddingRight="30dp"android:layout_gravity="left"android:layout_weight="0" />
        <Viewandroid:layout_height="wrap_content"android:id="@+id/view1"<