支持不同的屏幕大小

編寫:riverfeng - 原文:http://developer.android.com/training/multiscreen/screensizes.html

這節(jié)課教你如何通過以下幾種方式支持多屏幕：

1、確保你的布局能自適應(yīng)屏幕

2、根據(jù)你的屏幕配置提供合適的UI布局

3、確保正確的布局適合正確的屏幕。

4、提供縮放正確的位圖（bitmap）

使用“wrap_content”和“match_parent”

為了確保你的布局能靈活的適應(yīng)不同的屏幕尺寸，針對(duì)一些view組件，你應(yīng)該使用wrap_content和match_parent來設(shè)置他們的寬和高。如果你使用了wrap_content，view的寬和高會(huì)被設(shè)置為該view所包含的內(nèi)容的大小值。如果是match_parent（在API 8之前是fill_parent）則會(huì)匹配該組件的父控件的大小。

通過使用wrap_content和match_parent尺寸值代替硬編碼的尺寸，你的視圖將分別只使用控件所需要的空間或者被拓展以填充所有有效的空間。比如：

<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>

注意上面的例子使用wrap_content和match_parent來指定組件尺寸而不是使用固定的尺寸。這樣就能使你的布局正確的適配不同的屏幕尺寸和屏幕方向（這里的配置主要是指屏幕的橫豎屏切換）。

例如，下圖演示的就是該布局在豎屏和橫屏模式下的效果，注意組件的尺寸是自動(dòng)適應(yīng)寬和高的。

http://wiki.jikexueyuan.com/project/android-training-geek/images/layout-hvga.png" alt="" />

圖1：News Reader示例app（左邊豎屏，右邊橫屏）。

使用相對(duì)布局（RelativeLayout）

你可以使用LinearLayout以及wrap_content和match_parent組合來構(gòu)建復(fù)雜的布局，但是LinearLayout卻不允許你精準(zhǔn)的控制它子view的關(guān)系，子view在LinearLayout中只能簡(jiǎn)單一個(gè)接一個(gè)的排成行。如果你需要你的子view不只是簡(jiǎn)簡(jiǎn)單單的排成行的排列，更好的方法是使用RelativeLayout，它允許你指定你布局中控件與控件之間的關(guān)系，比如，你可以指定一個(gè)子view在左邊，另一個(gè)則在屏幕的右邊。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns: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>

http://wiki.jikexueyuan.com/project/android-training-geek/images/relativelayout1.png" alt="" />

圖2：QVGA（小尺寸屏幕）屏幕下截圖

http://wiki.jikexueyuan.com/project/android-training-geek/images/relativelayout2.png" alt="" />

圖3：WSVGA（大尺寸屏幕）屏幕下截圖

注意：盡管組件的尺寸發(fā)生了變化，但是它的子view之間的空間關(guān)系還是通過RelativeLayout.LayoutParams已經(jīng)指定好了。

使用尺寸限定詞

（譯者注：這里的限定詞主要是指在編寫布局文件時(shí)，將布局文件放在加上類似large，sw600dp等這樣限定詞的文件夾中，以此來告訴系統(tǒng)根據(jù)屏幕選擇對(duì)應(yīng)的布局文件，比如下面例子的layout-large文件夾）

從上一節(jié)的學(xué)習(xí)里程中，我們知道如何編寫靈活的布局或者相對(duì)布局，它們都能通過拉伸或者填充控件來適應(yīng)不同的屏幕，但是它們卻不能為每個(gè)不同屏幕尺寸提供最好的用戶體驗(yàn)。因此，你的應(yīng)用不應(yīng)該只是實(shí)現(xiàn)靈活的布局，同時(shí)也應(yīng)該為不同的屏幕配置提供幾種不同的布局方式。你可以通過配置限定（configuration qualifiers）來做這件事情，它能在運(yùn)行時(shí)根據(jù)你當(dāng)前設(shè)備的配置（比如不同的屏幕尺寸設(shè)計(jì)了不同的布局）來選擇合適的布局資源。

比如，很多應(yīng)用都為大屏幕實(shí)現(xiàn)了“兩個(gè)窗格”模式（應(yīng)用可能在一個(gè)窗格中實(shí)現(xiàn)一個(gè)list的item，另外一個(gè)則實(shí)現(xiàn)list的content），平板和電視都是大到能在一個(gè)屏幕上適應(yīng)兩個(gè)窗格，但是手機(jī)屏幕卻只能分別顯示。所以，如果你想實(shí)現(xiàn)這些布局，你就需要以下文件：

res/layout/main.xml.單個(gè)窗格（默認(rèn)）布局：

<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-large/main.xml,兩個(gè)窗格布局：

<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>

注意第二個(gè)布局文件的目錄名字“l(fā)arge qualifier”，在大尺寸的設(shè)備屏幕時(shí)（比如7寸平板或者其他大屏幕的設(shè)備）就會(huì)選擇該布局文件，而其他比較小的設(shè)備則會(huì)選擇沒有限定詞的另一個(gè)布局（也就是第一個(gè)布局文件）。

使用最小寬度限定詞

在Android 3.2之前，開發(fā)者還有一個(gè)困難，那就是Android設(shè)備的“l(fā)arge”屏幕尺寸，其中包括Dell Streak（設(shè)備名稱），老版Galaxy Tab和一般的7寸平板，有很多的應(yīng)用都想針對(duì)這些不同的設(shè)備（比如5和7寸的設(shè)備）定義不同的布局，但是這些設(shè)備都被定義為了large尺寸屏幕。也是因?yàn)檫@個(gè)，所以Android在3.2的時(shí)候開始使用最小寬度限定詞。

最小寬度限定詞允許你根據(jù)設(shè)備的最小寬度（dp單位）來指定不同布局。比如，傳統(tǒng)的7寸平板最小寬度為600dp，如果你希望你的UI能夠在這樣的屏幕上顯示兩個(gè)窗格（不是一個(gè)窗格顯示在小屏幕上），你可以使用上節(jié)中提到的使用同樣的兩個(gè)布局文件。不同的是，使用sw600來指定兩個(gè)方框的布局使用在最小寬度為600dp的設(shè)備上。

res/layout/main.xml,單個(gè)窗格（默認(rèn)）布局：

<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-sw600dp/main.xml,兩個(gè)方框布局：

<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>

這樣意味著當(dāng)你的設(shè)備的最小寬度等于600dp或者更大時(shí)，系統(tǒng)選擇layout-sw600dp/main.xml（兩個(gè)窗格）的布局，而小一點(diǎn)的屏幕則會(huì)選擇layout/main.xml（單個(gè)窗格）的布局。 然而，在3.2之前的設(shè)備上，這樣做并不是很好的選擇。因?yàn)?.2之前還沒有將sw600dp作為一個(gè)限定詞出現(xiàn)，所以，你還是需要使用large限定詞來做。因此，你還是應(yīng)該要有一個(gè)布局文件名為res/layout-large/main.xml，和res/layout-sw600dp/main.xml一樣。在下一節(jié)中，你將學(xué)到如何避免像這樣出現(xiàn)重復(fù)的布局文件。

使用布局別名

最小寬度限定詞只能在android3.2或者更高的版本上使用。因此，你還是需要使用抽象尺寸（small，normal，large，xlarge）來兼容以前的版本。比如，你想要將你的UI設(shè)計(jì)為在手機(jī)上只顯示一個(gè)方框的布局，而在7寸平板或電視，或者其他大屏幕設(shè)備上顯示多個(gè)方框的布局，你可能得提供這些文件：

• res/layout/main.xml：?jiǎn)蝹€(gè)窗格布局

• res/layout-large：多個(gè)窗格布局

• res/layout-sw600dp：多個(gè)窗格布局

最后兩個(gè)文件都是一樣的，因?yàn)槠渲幸粋€(gè)將會(huì)適配Android3.2的設(shè)備，而另外一個(gè)則會(huì)適配其他Android低版本的平板或者電視。 為了避免這些重復(fù)的文件（維護(hù)讓人感覺頭痛就是因?yàn)檫@個(gè)），你可以使用別名文件。比如，你可以定義如下布局：

• res/layout/main.xml，單個(gè)方框布局
• res/layout/main_twopans.xml，兩個(gè)方框布局

然后添加這兩個(gè)文件：

• res/values-large/layout.xml：

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

• res/values-sw600dp/layout.xml：

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

  最后兩個(gè)文件擁有相同的內(nèi)容，但它們并沒有真正意義上的定義布局。它們只是將main_twopanes設(shè)置成為了別名main，它們分別處在large和sw600dp選擇器中，所以它們能適配Android任何版本的平板和電視（在3.2之前平板和電視可以直接匹配large，而3.2或者以上的則匹配sw600dp）。

使用方向限定詞

有一些布局不管是在橫向還是縱向的屏幕配置中都能顯示的非常好，但是更多的時(shí)候，適當(dāng)?shù)恼{(diào)整一下會(huì)更好。在News Reader應(yīng)用例子中，以下是布局在不同屏幕尺寸和方向的行為：

• 小屏幕，縱向：一個(gè)窗格加logo
• 小屏幕，橫向：一個(gè)窗格加logo
• 7寸平板，縱向：一個(gè)窗格加action bar
• 7寸平板，橫向：兩個(gè)寬窗格加action bar
• 10寸平板，縱向：兩個(gè)窄窗格加action bar
• 10寸平板，橫向：兩個(gè)寬窗格加action bar
• 電視，橫向：兩個(gè)寬窗格加action bar

這些每個(gè)布局都會(huì)在res/layout目錄下定義一個(gè)xml文件，如此，應(yīng)用就能根據(jù)屏幕配置的變化根據(jù)別名匹配到對(duì)應(yīng)的布局來適應(yīng)屏幕。

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>

現(xiàn)在所有可能的布局我們都已經(jīng)定義了，唯一剩下的問題是使用方向限定詞來匹配對(duì)應(yīng)的布局給屏幕。這時(shí)候，你就可以使用布局別名的功能了：

res/values/layouts.xml：

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

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

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

res/values-sw600dp-port/layouts.xml:

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

res/values-large-land/layouts.xml:

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

res/values-large-port/layouts.xml:

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

使用.9.png圖片

支持不同的屏幕尺寸同時(shí)也意味著你的圖片資源也必須能兼容不同的屏幕尺寸。比如，一個(gè)button的背景圖片就必須要適應(yīng)該button的各種形狀。

如果你在使用組件時(shí)可以改變圖片的大小，你很快就會(huì)發(fā)現(xiàn)這是一個(gè)不明確的選擇。因?yàn)檫\(yùn)行的時(shí)候，圖片會(huì)被拉伸或者壓縮（這樣容易造成圖片失真）。避免這種情況的解決方案就是使用點(diǎn)9圖片，這是一種能夠指定哪些區(qū)域能夠或者不能夠拉伸的特殊png文件。

因此，在設(shè)計(jì)的圖片需要與組件一起變大變小時(shí)，一定要使用點(diǎn)9.若要將位圖轉(zhuǎn)換為點(diǎn)9，你可以用一個(gè)普通的圖片開始（下圖，是在4倍變焦情況下的圖片顯示）。 http://wiki.jikexueyuan.com/project/android-training-geek/images/button.png" alt="" />

你可以通過sdk中的draw9patch程序（位于tools/directory目錄下）來畫點(diǎn)9圖片。通過沿左側(cè)和頂部邊框繪制像素來標(biāo)記應(yīng)該被拉伸的區(qū)域。也可以通過沿右側(cè)和底部邊界繪制像素來標(biāo)記。就像下圖所示一樣：

http://wiki.jikexueyuan.com/project/android-training-geek/images/button_with_marks.png" alt="" />

請(qǐng)注意，上圖沿邊界的黑色像素。在頂部邊框和左邊框的那些表明圖像的可拉伸區(qū)域，右邊和底部邊框則表示內(nèi)容應(yīng)該放置的地方。

此外，注意.9.png這個(gè)格式，你也必須用這個(gè)格式，因?yàn)橄到y(tǒng)會(huì)檢測(cè)這是一個(gè)點(diǎn)9圖片而不是一個(gè)普通PNG圖片。

當(dāng)你將這個(gè)應(yīng)用到組件的背景的時(shí)候（通過設(shè)置android:background="@drawable/button"），android框架會(huì)自動(dòng)正確的拉伸圖像以適應(yīng)按鈕的大小，下圖就是各種尺寸中的顯示效果：

http://wiki.jikexueyuan.com/project/android-training-geek/images/buttons_stretched.png" alt="" />