UI屏幕適配必備的知識點

爲什麼要適配

---

Android手機的屏幕尺寸大小、分辨率大小各有不同，如果只是一套佈局在不同的設備上所顯示的效果會有不同。可以根據產品用戶的對象進行有針對性的適配。

重要概念

---

• 屏幕尺寸

手機平板等設備對角線的長度，單位爲inch（英寸）

• 屏幕分辨率

橫縱方向的像素點數

• 屏幕像素密度

每英寸上的像素點數，單位dpi (dot per inch)

• 舉例

尺寸：4.95 inch 屏幕分辨率：1920x1080 DPI=445

計算：(√(1920^2+1080^2))/4.95=445dpi

• dp 當屏幕像素密度爲160dpi 的時候 1dp=1px

480x320 160dpi 1dp=1px

800x480 240dpi 1dp=1.5px

也就是說 一個dp實際鋪滿屏幕的長度隨着分辨率的增大成比例增大

• sp 字體大小

根據谷歌的設計，最好使用的字體大小爲：12sp、14sp、18sp、22sp

字體sp不要使用奇數或者小數，會引起精度的丟失

• mdpi res資源文件

mdpi 120dpi ~ 160dpi 1x

hdpi 160dpi ~ 240dpi 1.5x

xhdpi 240dpi ~ 320dpi 2x

xxhdpi 320dpi ~ 480dpi 3x

xxxdpi 480dpi ~ 640dpi 4x

屏幕適配方案

• weight詳解

組件寬度=原來寬度+剩餘空間所佔百分比寬度

屏幕寬度：L

btn_1的寬度爲：2/3L =L+(L-2L)*1/3

   <Button 
    android:id="@+id/btn_1"
    android:layout_width="match_content"
    android:layout_height="wrap_content"
    android:weight="1"
    />

    <Button 
    android:id="@+id/btn_2"
    android:layout_width="match_content"
    android:layout_height="wrap_content"
    android:weight="1"
    />

    ——————————————————————————————
    |       btn_1      |  btn_2   |
    ——————————————————————————————

• 使用限定符

1、使用尺寸限定符 larger ,適用於3.2之前的版本

res/layout/main.xml 手機

res/layout-large/main.xml 平板

2、最小寬度限定符 sw-xxx (Small Width),適用於3.2之後的版本

res/layout/main.xml 手機使用

res/layout-sw600dp/main.xml 最小寬度 如果大於600dp (橫屏或者豎屏) 則使用這個layout

3、使用佈局別名
setContentView（R.layout.main)

res/values/layout.xml:

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

Android3.2之後的平板佈局

res/values-sw600dp/layout.xml:

@layout/main_twopanes

4、方向限定符

res/values-sw600-land 橫屏（land)
res/values-sw600-port 豎屏 (port)

1.res/values/layouts.xml:

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

2.res/values-sw600dp-land/layouts.xml:

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

注意：程序可以根據標誌位的Boolean值來獲取到當期的適配layout的狀態，進一步判斷並作出相應的響應

• 解決屏幕寬度不一致的問題

原因：即使使用dp爲單位，不同分辨率尺寸的設備的值也不一定相同

方案：
將屏幕進行等分,定義自己的“單位”

默認：res/vaules/lay_x.xml

    <dimen name="x1">1dp</dimen>
                      ...
    <dimen name="x320">320dp</dimen>

480x320分辨率：res/vaules-480x320/lay_x.xml

    <dimen name="x1">1px</dimen>
                    ...
    <dimen name="x320">320px</dimen>

800x480分辨率：res/vaules-800x480/lay_x.xml

    <dimen name="x1">1.5px</dimen>
                        ...
    <dimen name="x320">480px</dimen>

• 不同資源文件夾下圖片的佔用內容的問題

測試機器：爲xxhdpi

drawble 74.97M 71.1M

drawble-mdpi 74.95M 71.1M

drawble-hdpi 35.38M

drawble-xxhdpi 11.65M 7.8M

解析：若放在drawble-mdpi，而當前機器爲xxhdpi，圖片需要拉昇，長度爲3倍關係，平面就是9倍關係，11.65x9=70.2,根據測試結果，成立。drawble與drawble-mdpi的大約相同的原因，是因爲我們已drawble-mdpi爲基準來進行確定。

自適應用戶界面

---

• 確定當前佈局

方法：判斷當前界面是否存在該佈局（是否顯示,View.VISABLE),根據某佈局的標誌位的Boolean值

舉例

佈局1：res/values/layouts.xml:

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

佈局2：res/values-sw600dp-land/layouts.xml:

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

分析：根據R.layouts.has_two_panes的Boolean值來進行確定，若爲false則當前是佈局1，若爲true則當前佈局爲佈局2。

• 根據當前佈局做出響應

• 重複使用不同佈局中的相同片段

  使用Fragment

• 處理屏幕配置變化

• 動態設置

  在代碼中進行佈局的設計，非常靈活，可以通過計算當前設備的屏幕寬度來設計尺寸。