螢幕適配問題的本質

• 使得“佈局”、“佈局元件”、“圖片資源”、“使用者介面流程”匹配不同的螢幕尺寸
• 使得“圖片資源”匹配不同的螢幕密度

佈局匹配

本質1：使得佈局元素自適應螢幕尺寸

• 佈局的子控制元件之間使用相對位置的方式排列，因為RelativeLayout講究的是相對位置，即使螢幕的大小改變，檢視之前的相對位置都不會變化，與螢幕大小無關，靈活性很強
• LinearLayout無法準確地控制子檢視之間的位置關係，只能簡單的一個挨著一個地排列
  所以，對於螢幕適配來說，使用相對佈局（RelativeLayout）將會是更好的解決方案

本質2：根據螢幕的配置來載入相應的UI佈局

應用場景：需要為不同螢幕尺寸的裝置設計不同的佈局

• 做法：使用限定符
• 作用：通過配置限定符使得程式在執行時根據當前裝置的配置（螢幕尺寸）自動載入合適的佈局資源

限定符型別

• 尺寸（size）限定符
• 最小寬度（Smallest-width）限定符
• 佈局別名
• 螢幕方向（Orientation）限定符

尺寸（size）限定符

使用場景：當一款應用顯示的內容較多
1.在平板電腦和電視的螢幕（>7英寸）上：實施“雙面板”模式以同時顯示更多內容
2.在手機較小的螢幕上：使用單面板分別顯示內容

因此，我們可以使用尺寸限定符（layout-large）通過建立一個檔案來完成上述設定：

res/layout-large/main.xml

這種方式只適合Android 3.2版本之前。因為限定符large 沒有一個定量的指標，這便意味著可能沒辦法準確地根據當前裝置的配置（螢幕尺寸）自動載入合適的佈局資源（3.2後不建議使用）

最小寬度（Smallest-width）限定符

在Android 3.2及之後版本，引入了最小寬度（Smallest-width）限定符

• 定義：通過指定某個最小寬度（以 dp 為單位）來精確定位螢幕，從而載入不同的UI資源
• 使用場景：

你需要為標準 7 英寸平板電腦匹配雙面板佈局（其最小寬度為 600 dp），在手機（較小的螢幕上）匹配單面板佈局

• layout-sw xxxdp 即small width的縮寫，其不區分方向，即無論是寬度還是高度，只要大於 xxxdp，就採用次此佈局

解決方案：您可以使用上文中所述的單面板和雙面板這兩種佈局，但您應使用 sw600dp 指明雙面板佈局僅適用於最小寬度為 600 dp 的螢幕。
例子:
適配手機的單面板（預設）佈局： 適用於最小寬度為 600 dp 的螢幕。res/layout/main.xml

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

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

適用於寬度 ≥ 600 dp 的(雙面板佈局)裝置佈局：res/layout-sw600dp/main.xml

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

使用佈局別名

設想這麼一個場景，當你需要同時為Android 3.2版本前和Android 3.2版本後的手機進行螢幕尺寸適配的時候，由於尺寸限定符僅用於Android 3.2版本前，最小寬度限定符僅用於Android 3.2版本後，所以這會帶來一個問題，為了很好地進行螢幕尺寸的適配，你需要同時維護layout-sw600dp和layout-large的兩套main.xml平板佈局，如下

• 適配手機的單面板（預設）佈局：res/layout/main.xml
• 適配尺寸>7寸平板的雙面板佈局（Android 3.2前）：res/layout-large/main.xml
• 適配尺寸>7寸平板的雙面板佈局（Android 3.2後）res/layout-sw600dp/main.xml

最後的兩個檔案的xml內容是完全相同的，這會帶來：檔名的重複從而帶來一些列後期維護的問題，於是為了要解決這種重複問題，我們引入了佈局別名

還是上面的例子，你可以定義以下佈局：

• 適配手機的單面板（預設）佈局：res/layout/main.xml
• 適配尺寸>7寸平板的雙面板佈局：res/layout/main_twopanes.xml

然後加入以下兩個檔案，以便進行Android 3.2前和Android 3.2後的版本雙面板佈局適配：

1.res/values-large/layout.xml（Android 3.2之前的雙面板佈局）

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

2.res/values-sw600dp/layout.xml（Android 3.2及之後的雙面板佈局）

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

這樣兩個layout.xml都只是引用了@layout/main_twopanes，就避免了重複定義佈局檔案的情況

螢幕方向（Orientation）限定符

使用場景：根據螢幕方向進行佈局的調整

取以下為例子：

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

方法是：

• 先定義類別：單/雙面板、是否帶操作欄、寬/窄

定義在 res/layout/ 目錄下的某個 XML 檔案中

• 再進行相應的匹配：螢幕尺寸（小屏、7寸、10寸）、方向（橫、縱）

使用佈局別名進行匹配

1.在 res/layout/ 目錄下的 檔案中定義所需要的佈局類別（單/雙面板、是否帶操作欄、寬/窄）

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

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

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

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:orientation="vertical"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent">  
    <LinearLayout android:layout_width="match_parent"   
                  android:id="@+id/linearLayout1"    
                  android:gravity="center"  
                  android:layout_height="50dp">  
        <ImageView android: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" />  
        <View android:layout_height="wrap_content"   
              android:id="@+id/view1"  
              android:layout_width="wrap_content"  
              android:layout_weight="1" />  
        <Button android: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>  

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

res/layout/twopanes.xml:(雙面板，寬佈局)

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

res/layout/twopanes_narrow.xml:(雙面板，窄佈局)

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

2.使用佈局別名進行相應的匹配(螢幕尺寸（小屏、7寸、10寸）、方向（橫、縱）)
res/values/layouts.xml:（預設佈局）

<resources>  
    <item name="main_layout" type="layout">@layout/onepane_with_bar</item>  
    <bool name="has_two_panes">false</bool>  
</resources>

可為resources設定bool，通過獲取其值來動態判斷目前已處在哪個適配佈局

res/values-sw600dp-land/layouts.xml（大屏、橫向、雙面板、寬-Andorid 3.2版本後）

<resources>
    <item name="main_layout" type="layout">@layout/twopanes</item>
    <bool name="has_two_panes">true</bool>
</resources>

res/values-sw600dp-port/layouts.xml（大屏、縱向、單面板帶操作欄-Andorid 3.2版本後）

<resources>
    <item name="main_layout" type="layout">@layout/onepane</item>
    <bool name="has_two_panes">false</bool>
</resources>

res/values-large-land/layouts.xml（大屏、橫向、雙面板、寬-Andorid 3.2版本前）

<resources>
    <item name="main_layout" type="layout">@layout/twopanes</item>
    <bool name="has_two_panes">true</bool>
</resources>

res/values-large-port/layouts.xml（大屏、縱向、單面板帶操作欄-Andorid 3.2版本前）

<resources>
    <item name="main_layout" type="layout">@layout/onepane</item>
    <bool name="has_two_panes">false</bool>
</resources>

佈局元件匹配

本質：使得佈局元件自適應螢幕尺寸

• 做法 使用”wrap_content”、”match_parent”和”weight“來控制檢視元件的寬度和高度

圖片資源匹配

• 本質：使得圖片資源在不同螢幕密度上顯示相同的畫素效果
• 提供備用點陣圖（符合螢幕尺寸的圖片資源）

• 步驟1：根據以下尺寸範圍針對各密度生成相應的圖片。

比如說，如果我們為 xhdpi 裝置生成了 200x200 px尺寸的圖片，就應該按照相應比例地為 hdpi、mdpi 和 ldpi 裝置分別生成 150x150、100x100 和 75x75

• 步驟2：將生成的圖片檔案放在 res/ 下的相應子目錄中(mdpi、hdpi、xhdpi、xxhdpi)，系統就會根據執行您應用的裝置的螢幕密度自動選擇合適的圖片

那麼，有沒有一種方法能更好地解決圖片資源適配問題：

• 保證螢幕密度適配
• 可以最小佔用設計資源
• 使得apk包不變大（只使用一套解析度的圖片資源）

1. 先來理解下Android 載入資源過程
Android SDK會根據螢幕密度自動選擇對應的資原始檔進行渲染載入（自動渲染）

比如說，SDK檢測到你手機的解析度是320x480（dpi=160），會優先到drawable-mdpi資料夾下找對應的圖片資源；但假設你只在xhpdi資料夾下有對應的圖片資原始檔（mdpi資料夾是空的），那麼SDK會去xhpdi資料夾找到相應的圖片資原始檔，然後將原有大畫素的圖片自動縮放成小畫素的圖片，於是大畫素的圖片照樣可以在小畫素解析度的手機上正常顯示。

所以需要提供一套你需要支援的最大dpi解析度規格的圖片資源，這樣即使使用者的手機解析度很小，這樣圖片縮小依然很清晰。那麼這一套最大dpi解析度規格應該是哪種呢？是現在市面手機解析度最大可達到1080X1920的解析度（dpi=xxdpi=480）嗎？

2. xhdpi應該是首選

• xhdpi解析度以內的手機需求量最旺盛
• 節省設計資源&工作量

在現在的App開發中（iOS和Android版本），有些設計師為了保持App不同版本的體驗互動一致，可能會以iPhone手機為基礎進行設計，包括後期的切圖之類的。
設計師們一般都會用最新的iPhone6和iPhone5s（5s和5的尺寸以及解析度都一樣）來做原型設計，所有引數請看下圖

iPhone主流的螢幕dpi約等於320, 剛好屬於xhdpi，所以選擇xhdpi作為唯一一套dpi圖片資源，可以讓設計師不用專門為Android端切圖，直接把iPhone的那一套切好的圖片資源放入drawable-xhdpi資料夾裡就好，這樣大大減少的設計師的工作量！

其他

1. ImageView的ScaleType屬性
   設定不同的ScaleType會得到不同的顯示效果，一般情況下，設定 為centerCrop能獲得較好的適配效果

2. 有些情況下，我們需要動態的設定控制元件大小或者是位置，比如說popwindow的顯示位置和偏移量等。這時我們可以動態獲取當前的螢幕屬性，然後設定合適的數值

螢幕密度匹配方案

• 本質：使得佈局元件在不同螢幕密度上顯示相同的畫素效果
• 做法1：使用密度無關畫素 dp

百分比適配方法

1. 以某一解析度為基準，生成所有解析度對應畫素數列表
2. 將生成畫素數列表存放在res目錄下對應的values檔案下
3. 根據UI設計師給出設計圖上的尺寸，找到對應畫素數的單位，然後設定給控制元件即可