Android官方开发文档Training系列课程中文版：多样屏幕之支持不同的屏幕尺寸
原文地址：http://android.xsoftlab.net/training/multiscreen/index.html
引言
Android運(yùn)行于數(shù)以百計(jì)不同尺寸的設(shè)備上。范圍小到手持移動(dòng)電話，大到電視設(shè)備。因此，在設(shè)計(jì)APP時(shí)應(yīng)當(dāng)兼顧到盡可能多的屏幕尺寸。這樣才能照顧到較多的潛在用戶。
但是僅僅考慮不同的設(shè)備類型還不夠。每一種尺寸為用戶提供了不同的可能性與挑戰(zhàn)，所以為了使用戶感到滿意，應(yīng)用程序需要做的不單單是支持多樣的屏幕：它還必須對(duì)每種屏幕結(jié)構(gòu)將用戶體驗(yàn)優(yōu)化到最佳。
這節(jié)課將會(huì)學(xué)習(xí)如何實(shí)現(xiàn)針對(duì)屏幕結(jié)構(gòu)優(yōu)化的用戶界面。
Note: 這節(jié)課與相關(guān)示例程序均使用的是support library。
支持不同的屏幕尺寸
這節(jié)課將會(huì)學(xué)習(xí)通過以下方式來支持不同的屏幕尺寸：
- 確保布局可以靈活的調(diào)整尺寸。
- 對(duì)不同的屏幕結(jié)構(gòu)提供適當(dāng)?shù)腢I布局。
- 確保在正確的屏幕中使用了正確的布局。
- 提供可以正常縮放的位圖。
使用”wrap_content”及”match_parent”
為了使布局可以靈活的適配不同的屏幕尺寸，應(yīng)當(dāng)對(duì)某些View組件的width，height屬性使用”wrap_content”或”match_parent”。如果使用了”wrap_content”，那么View的高寬會(huì)被設(shè)置為View內(nèi)容所需的最小尺寸。然而”match_parent”會(huì)使View的高寬擴(kuò)展到父布局的尺寸大小。
通過使用”wrap_content”或”match_parent”可以使View高寬擴(kuò)展到View所需要的大小或者擴(kuò)展到父布局的可用空間：
<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”的。這可以使布局正確的適配不同的屏幕尺寸及方向。
下圖是布局在垂直及水平方向的示例。注意View的尺寸會(huì)自動(dòng)適配屏幕的高寬:
使用RelativeLayout
你可以使用LinearLayout結(jié)合”wrap_content”或”match_parent”構(gòu)造相對(duì)復(fù)雜的布局。然而，LinearLayout不能夠精確的控制子View的相對(duì)關(guān)系。在LinearLayout中View只能簡(jiǎn)單的被線性排列。如果需要調(diào)整View間的相對(duì)關(guān)系，一種較好的解決方式就是使用RelativeLayout，它允許指定View間的相對(duì)關(guān)系。下面的示例中，你可以指定一個(gè)View靠著另一個(gè)View的左邊，而另一個(gè)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>下圖是該布局在QVGA屏幕中的顯示效果：
下圖是該布局在大屏幕中的顯示效果：
要注意雖然這些View的尺寸發(fā)生了改變，但是其它之間的相對(duì)關(guān)系還是保留了下來。
使用尺寸限定符
上面我們學(xué)習(xí)了如何利用靈活布局或者相對(duì)布局來匹配不同的屏幕，然而這對(duì)于匹配任何屏幕來說還不夠好。因此，應(yīng)用程序不單單只是實(shí)現(xiàn)靈活的布局，還應(yīng)該對(duì)不同的屏幕配置提供相應(yīng)的布局。可以通過configuration qualifiers中所描述的內(nèi)容學(xué)習(xí)具體細(xì)節(jié)，它可以使程序在運(yùn)行時(shí)根據(jù)當(dāng)前的屏幕配置來自動(dòng)選擇對(duì)應(yīng)的資源。
比如說，很多應(yīng)用程序針對(duì)于大屏幕實(shí)現(xiàn)了”two pane”的模式。平板與電視大到足以同時(shí)顯示兩個(gè)面板，但是移動(dòng)電話只能同時(shí)顯示其中一個(gè)。所以，要實(shí)現(xiàn)這種布局，項(xiàng)目中應(yīng)當(dāng)含有以下文件：
- res/layout/main.xml，單面板布局(默認(rèn))：
- res/layout-large/main.xml,雙面板布局：
要注意第二個(gè)布局的目錄路徑的large標(biāo)識(shí)符。這個(gè)布局會(huì)在屏幕類型為large時(shí)被采用(比如，7英寸的平板或者更大的設(shè)備)。其它布局則會(huì)被小型設(shè)備所采用。
使用最小寬度標(biāo)識(shí)符
開發(fā)者會(huì)遇到的困難之一就是在3.2之前Android的設(shè)備只有”large”屏幕尺寸，這包括了Dell Streak、Galaxy Tab以及常規(guī)的7英寸平板。然而，很多應(yīng)用程序希望可以在這個(gè)范圍下不同尺寸的設(shè)備中展示不同的布局，比如5英寸的設(shè)備或者7英寸的設(shè)備，甚至是所有的”large”設(shè)備都想考慮在內(nèi)。這就是為什么Android會(huì)3.2的版本中引入”最小寬度(Smallest-width)”標(biāo)識(shí)符的原因。
最小寬度限定符允許將最小寬度為給定的dp寬度的設(shè)備作為目標(biāo)。比如說，經(jīng)典的7英寸平板的最小寬度為600dp，如果希望可以在這塊屏幕上同時(shí)放置兩個(gè)面板的話，可以直接使用上面部分中所介紹的雙面板布局。不過這里則不是large尺寸標(biāo)識(shí)符，而是使用sw600dp尺寸標(biāo)識(shí)符，用于指明該布局運(yùn)行于最小寬度為600dp的設(shè)備上。
- res/layout/main.xml，默認(rèn)的單面板布局：
- res/layout-sw600dp/main.xml，雙面板布局：
這意味著只有設(shè)備的最小寬度大于或等于600dp時(shí)才會(huì)選擇layout-sw600dp/main.xml，再稍微小點(diǎn)的布局則會(huì)選擇layout/main.xml。
然而，以上部分在3.2之前并不會(huì)有什么效果，因?yàn)?.2之前的系統(tǒng)識(shí)別不出sw600dp這種尺寸標(biāo)識(shí)符，所以最好還是保留large標(biāo)識(shí)符，所以會(huì)有一個(gè)名為res/layout-large/main.xml的布局文件，其中的內(nèi)容與res/layout-sw600dp/main.xml保持一致。下面的部分將會(huì)介紹一種技術(shù)來避免重復(fù)的布局文件。
使用布局別稱
最小寬度限定符只在Android 3.2上開始可用。因此，開發(fā)者還應(yīng)當(dāng)繼續(xù)使用抽象尺寸標(biāo)志(small, normal, large及xlarge)來兼容較早的版本。所以，如果希望在移動(dòng)電話中顯示單面板UI，在其它較大的屏幕中采用多面板UI，那么項(xiàng)目中應(yīng)該含有以下文件：
- res/layout/main.xml：單面板布局
- res/layout-large：多面板布局
- res/layout-sw600dp：多面板布局
這后面兩個(gè)文件是完全相同的，因?yàn)槠渲幸粋€(gè)是用來匹配Android 3.2的設(shè)備的，而另一個(gè)是用來匹配較早版本的設(shè)備的。
為了避免存在這種重復(fù)的文件，可以使用別名文件技術(shù)。比如，你可以定義如下布局文件：
- res/layout/main.xml，單面板布局
- res/layout/main_twopanes.xml，雙面板布局
然后添加兩個(gè)文件：
- res/values-large/layout.xml:
- res/values-sw600dp/layout.xml:
后面這兩個(gè)文件含有相同的內(nèi)容，但是它們實(shí)際上并沒有定義布局。它們只是將main_twopanes的別名設(shè)置為了main而已。一旦這些文件包含了large 或sw600dp，那么所有的系統(tǒng)則不會(huì)再專門區(qū)分版本。
使用方向標(biāo)識(shí)符
有些布局在垂直及水平方向上均表現(xiàn)良好。但在新聞閱讀示例APP中，針對(duì)每一種屏幕尺寸與方向均專門定義了布局：
- small screen, portrait： 單面板，帶Logo
- small screen, landscape : 單面板，帶Logo
- 7” tablet, portrait ： 單面板，帶ActionBar
- 7” tablet, landscape : 多面板，帶ActionBar
- 10” tablet, portrait : 多窄面板，帶ActionBar
- 10” tablet, landscape ： 多面板，帶ActionBar
- TV, landscape ： 多面板，帶ActionBar
上面所有的布局文件都被放置在res/layout/目錄下。為了使每一種布局與相關(guān)的屏幕配置產(chǎn)生關(guān)聯(lián)，App使用布局別名的方式來匹配每一項(xià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>以上對(duì)所有可能的布局均作了定義，它們會(huì)與相關(guān)的屏幕配置產(chǎn)生映射關(guān)系：
res/values/layouts.xml:
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>使用九宮格位圖
支持不同的屏幕尺寸同樣意味著圖片資源同樣也需要自動(dòng)適配不同的尺寸。比如，一張按鈕的背景圖必須匹配按鈕的形狀。
如果要將一張簡(jiǎn)圖片應(yīng)用在組件中，必須敏銳的意識(shí)到結(jié)果可能不是想象中那樣，因?yàn)樵谶\(yùn)行時(shí)將會(huì)拉伸或者壓縮圖片。解決辦法就是使用九宮格位圖，它是一種特殊的PNG格式的文件，它內(nèi)部指明了哪部分區(qū)域可以被拉伸，哪部分不可以。
因此，在設(shè)計(jì)位圖時(shí)應(yīng)當(dāng)首先選用九宮格。為了將位圖轉(zhuǎn)化為九宮格位圖，你可以從一張有規(guī)律的圖片開始(下圖被放大了4倍)。
然后通過draw9patch工具將該圖片打開，該工具位于tools/目錄下，它可以用來標(biāo)記哪塊區(qū)域可以被拉伸。拉伸標(biāo)記位于圖片的左邊和頂部。你也可以通過在右邊及底部繪點(diǎn)的方式來定義內(nèi)容區(qū)域，如下圖所示：
注意邊上那些黑色的像素點(diǎn)。左邊和頂部的點(diǎn)指明了圖像可以被拉伸的區(qū)域，右邊和頂部的點(diǎn)指明了內(nèi)容區(qū)域。
最后還要注意.9.png的擴(kuò)展名。必須使用該擴(kuò)展名，因?yàn)檫@是框架將其與普通圖片區(qū)分的一種方式。
當(dāng)在使用這張圖片作為背景時(shí)，框架會(huì)將圖片拉伸以適應(yīng)按鈕的尺寸，如下圖所示：
總結(jié)
以上是生活随笔為你收集整理的Android官方开发文档Training系列课程中文版：多样屏幕之支持不同的屏幕尺寸的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Tensorflow2.0模型构建与训练
- 下一篇： Android官方开发文档Trainin