兼容不同的屏幕大小 · Android Training官方培訓課程中文版

> 編寫:[riverfeng](https://github.com/riverfeng) - 原文:[http://developer.android.com/training/multiscreen/screensizes.html](http://developer.android.com/training/multiscreen/screensizes.html) 這節課教你如何通過以下幾種方式支持多屏幕： 1、確保你的布局能自適應屏幕 2、根據你的屏幕配置提供合適的UI布局 3、確保正確的布局適合正確的屏幕。 4、提供縮放正確的位圖（bitmap） ### 使用“wrap_content”和“match_parent” 為了確保你的布局能靈活的適應不同的屏幕尺寸，針對一些view組件，你應該使用wrap_content和match_parent來設置他們的寬和高。如果你使用了wrap_content，view的寬和高會被設置為該view所包含的內容的大小值。如果是match_parent（在API 8之前是fill_parent）則會匹配該組件的父控件的大小。通過使用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來指定組件尺寸而不是使用固定的尺寸。這樣就能使你的布局正確的適配不同的屏幕尺寸和屏幕方向（這里的配置主要是指屏幕的橫豎屏切換）。例如，下圖演示的就是該布局在豎屏和橫屏模式下的效果，注意組件的尺寸是自動適應寬和高的。 ![](https://box.kancloud.cn/2015-07-28_55b7247739aff.png) 圖1：News Reader示例app（左邊豎屏，右邊橫屏）。 ### 使用相對布局（RelativeLayout）你可以使用LinearLayout以及wrap_content和match_parent組合來構建復雜的布局，但是LinearLayout卻不允許你精準的控制它子view的關系，子view在LinearLayout中只能簡單一個接一個的排成行。如果你需要你的子view不只是簡簡單單的排成行的排列，更好的方法是使用RelativeLayout，它允許你指定你布局中控件與控件之間的關系，比如，你可以指定一個子view在左邊，另一個則在屏幕的右邊。 ~~~ <?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> ~~~ ![](https://box.kancloud.cn/2015-07-28_55b724777fffd.png) 圖2：QVGA（小尺寸屏幕）屏幕下截圖 ![](https://box.kancloud.cn/2015-07-28_55b7247788669.png) 圖3：WSVGA（大尺寸屏幕）屏幕下截圖 > 注意：盡管組件的尺寸發生了變化，但是它的子view之間的空間關系還是通過RelativeLayout.LayoutParams已經指定好了。 ### 使用尺寸限定詞（譯者注：這里的限定詞主要是指在編寫布局文件時，將布局文件放在加上類似large，sw600dp等這樣限定詞的文件夾中，以此來告訴系統根據屏幕選擇對應的布局文件，比如下面例子的layout-large文件夾）從上一節的學習里程中，我們知道如何編寫靈活的布局或者相對布局，它們都能通過拉伸或者填充控件來適應不同的屏幕，但是它們卻不能為每個不同屏幕尺寸提供最好的用戶體驗。因此，你的應用不應該只是實現靈活的布局，同時也應該為不同的屏幕配置提供幾種不同的布局方式。你可以通過配置限定（configuration qualifiers）來做這件事情，它能在運行時根據你當前設備的配置（比如不同的屏幕尺寸設計了不同的布局）來選擇合適的布局資源。比如，很多應用都為大屏幕實現了“兩個窗格”模式（應用可能在一個窗格中實現一個list的item，另外一個則實現list的content），平板和電視都是大到能在一個屏幕上適應兩個窗格，但是手機屏幕卻只能分別顯示。所以，如果你想實現這些布局，你就需要以下文件： 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> ~~~ res/layout-large/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> ~~~ 注意第二個布局文件的目錄名字“large qualifier”，在大尺寸的設備屏幕時（比如7寸平板或者其他大屏幕的設備）就會選擇該布局文件，而其他比較小的設備則會選擇沒有限定詞的另一個布局（也就是第一個布局文件）。 ### 使用最小寬度限定詞在Android 3.2之前，開發者還有一個困難，那就是Android設備的“large”屏幕尺寸，其中包括Dell Streak（設備名稱），老版Galaxy Tab和一般的7寸平板，有很多的應用都想針對這些不同的設備（比如5和7寸的設備）定義不同的布局，但是這些設備都被定義為了large尺寸屏幕。也是因為這個，所以Android在3.2的時候開始使用最小寬度限定詞。最小寬度限定詞允許你根據設備的最小寬度（dp單位）來指定不同布局。比如，傳統的7寸平板最小寬度為600dp，如果你希望你的UI能夠在這樣的屏幕上顯示兩個窗格（不是一個窗格顯示在小屏幕上），你可以使用上節中提到的使用同樣的兩個布局文件。不同的是，使用sw600來指定兩個方框的布局使用在最小寬度為600dp的設備上。 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> ~~~ 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> ~~~ 這樣意味著當你的設備的最小寬度等于600dp或者更大時，系統選擇layout-sw600dp/main.xml（兩個窗格）的布局，而小一點的屏幕則會選擇layout/main.xml（單個窗格）的布局。然而，在3.2之前的設備上，這樣做并不是很好的選擇。因為3.2之前還沒有將sw600dp作為一個限定詞出現，所以，你還是需要使用large限定詞來做。因此，你還是應該要有一個布局文件名為res/layout-large/main.xml，和res/layout-sw600dp/main.xml一樣。在下一節中，你將學到如何避免像這樣出現重復的布局文件。 ### 使用布局別名最小寬度限定詞只能在android3.2或者更高的版本上使用。因此，你還是需要使用抽象尺寸（small，normal，large，xlarge）來兼容以前的版本。比如，你想要將你的UI設計為在手機上只顯示一個方框的布局，而在7寸平板或電視，或者其他大屏幕設備上顯示多個方框的布局，你可能得提供這些文件： - res/layout/main.xml：單個窗格布局 - res/layout-large：多個窗格布局 - res/layout-sw600dp：多個窗格布局最后兩個文件都是一樣的，因為其中一個將會適配Android3.2的設備，而另外一個則會適配其他Android低版本的平板或者電視。為了避免這些重復的文件（維護讓人感覺頭痛就是因為這個），你可以使用別名文件。比如，你可以定義如下布局： - res/layout/main.xml，單個方框布局 - res/layout/main_twopans.xml，兩個方框布局然后添加這兩個文件： - 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> ~~~ 最后兩個文件擁有相同的內容，但它們并沒有真正意義上的定義布局。它們只是將main_twopanes設置成為了別名main，它們分別處在large和sw600dp選擇器中，所以它們能適配Android任何版本的平板和電視（在3.2之前平板和電視可以直接匹配large，而3.2或者以上的則匹配sw600dp）。 ### 使用方向限定詞有一些布局不管是在橫向還是縱向的屏幕配置中都能顯示的非常好，但是更多的時候，適當的調整一下會更好。在News Reader應用例子中，以下是布局在不同屏幕尺寸和方向的行為： - 小屏幕，縱向：一個窗格加logo - 小屏幕，橫向：一個窗格加logo - 7寸平板，縱向：一個窗格加action bar - 7寸平板，橫向：兩個寬窗格加action bar - 10寸平板，縱向：兩個窄窗格加action bar - 10寸平板，橫向：兩個寬窗格加action bar - 電視，橫向：兩個寬窗格加action bar 這些每個布局都會在res/layout目錄下定義一個xml文件，如此，應用就能根據屏幕配置的變化根據別名匹配到對應的布局來適應屏幕。 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> ~~~ 現在所有可能的布局我們都已經定義了，唯一剩下的問題是使用方向限定詞來匹配對應的布局給屏幕。這時候，你就可以使用布局別名的功能了： 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圖片支持不同的屏幕尺寸同時也意味著你的圖片資源也必須能兼容不同的屏幕尺寸。比如，一個button的背景圖片就必須要適應該button的各種形狀。如果你在使用組件時可以改變圖片的大小，你很快就會發現這是一個不明確的選擇。因為運行的時候，圖片會被拉伸或者壓縮（這樣容易造成圖片失真）。避免這種情況的解決方案就是使用點9圖片，這是一種能夠指定哪些區域能夠或者不能夠拉伸的特殊png文件。因此，在設計的圖片需要與組件一起變大變小時，一定要使用點9.若要將位圖轉換為點9，你可以用一個普通的圖片開始（下圖，是在4倍變焦情況下的圖片顯示）。![](https://box.kancloud.cn/2015-07-28_55b7247791f47.png) 你可以通過sdk中的draw9patch程序（位于tools/directory目錄下）來畫點9圖片。通過沿左側和頂部邊框繪制像素來標記應該被拉伸的區域。也可以通過沿右側和底部邊界繪制像素來標記。就像下圖所示一樣： ![](https://box.kancloud.cn/2015-07-28_55b724779b6e1.png) 請注意，上圖沿邊界的黑色像素。在頂部邊框和左邊框的那些表明圖像的可拉伸區域，右邊和底部邊框則表示內容應該放置的地方。此外，注意.9.png這個格式，你也必須用這個格式，因為系統會檢測這是一個點9圖片而不是一個普通PNG圖片。當你將這個應用到組件的背景的時候（通過設置android:background="@drawable/button"），android框架會自動正確的拉伸圖像以適應按鈕的大小，下圖就是各種尺寸中的顯示效果： ![](https://box.kancloud.cn/2015-07-28_55b72477a3ab9.png)