Android自適應不同屏幕大小的全部方法

更新時間：2018年05月11日 11:01:41 作者：guolin

這篇文章主要介紹了Android自適應不同屏幕大小的全部方法，具有很好的參考價值，希望對大家有所幫助，一起跟隨小編過來看看吧

本文講述了Android自適應不同屏幕大小的全部方法。分享給大家供大家參考，具體如下：

本文將告訴你如何讓你的應用程序支持各種不同屏幕大小，主要通過以下幾種辦法：

讓你的布局能充分的自適應屏幕；

根據(jù)屏幕的配置來加載合適的UI布局；

確保正確的布局應用在正確的設備屏幕上；

提供可以根據(jù)屏幕大小自動伸縮的圖片；

使用 "wrap_content" 和 "match_parent"。

為了確保你的布局能夠自適應各種不同屏幕大小，你應該在布局的視圖中使用"wrap_content"和"match_parent"來確定它的寬和高。如果你使用了"wrap_content"，相應視圖的寬和高就會被設定成剛好能夠包含視圖中內(nèi)容的最小值。而如果你使用了"match_parent"(在Android 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"來給控件定義寬高的，這讓整個布局可以正確地適應不同屏幕的大小，甚至是橫屏。

下圖是這個布局分別在豎屏和橫屏時顯示的結果，注意控件的寬和高是根據(jù)屏幕自適應的。

使用RelativeLayout

通過多層嵌套LinearLayout和組合使用"wrap_content"和"match_parent"已經(jīng)可以構建出足夠復雜的布局。但是LinearLayout無法允許你準確地控制子視圖之前的位置關系，所有LinearLayout中的子視圖只能簡單的一個挨著一個地排列。如果你需要讓子視圖能夠有更多的排列方式，而不是簡單地排成一行或一列，使用RelativeLayout將會是更好的解決方案。RelativeLayout允許布局的子控件之間使用相對定位的方式控制控件的位置，比如你可以讓一個子視圖居屏幕左側對齊，讓另一個子視圖居屏幕右側對齊。

例如：

<?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屏幕上顯示的結果。

下圖展示了這個布局在一個更大的屏幕上顯示的結果。

可以注意到，即使屏幕的大小改變，視圖之前的相對位置都沒有改變。

使用Size限定符

雖然使用以上幾種方式可以解決屏幕適配性的問題，但是那些通過伸縮控件來適應各種不同屏幕大小的布局，未必就是提供了最好的用戶體驗。你的應用程序應該不僅僅實現(xiàn)了可自適應的布局，還應該提供一些方案根據(jù)屏幕的配置來加載不同的布局，可以通過配置限定符(configuration qualifiers)來實現(xiàn)。配置限定符允許程序在運行時根據(jù)當前設備的配置自動加載合適的資源(比如為不同尺寸屏幕設計不同的布局)。

現(xiàn)在有很多的應用程序為了支持大屏設備，都會實現(xiàn)“two pane”模式(程序會在左側的面板上展示一個包含子項的List，在右側面板上展示內(nèi)容)。平板和電視設備的屏幕都很大，足夠同時顯示兩個面板，而手機屏幕一次只能顯示一個面板，兩個面板需要分開顯示。所以，為了實現(xiàn)這種布局，你可能需要以下文件：

res/layout/main.xml，single-pane(默認)布局：

<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，two-pane布局：

<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限定符，那些被定義為大屏的設備(比如7寸以上的平板)會自動加載此布局，而小屏設備會加載另一個默認的布局。

使用Smallest-width限定符

使用Size限定符有一個問題會讓很多程序員感到頭疼，large到底是指多大呢？很多應用程序都希望能夠更自由地為不同屏幕設備加載不同的布局，不管它們是不是被系統(tǒng)認定為"large"。這就是Android為什么在3.2以后引入了"Smallest-width"限定符。

Smallest-width限定符允許你設定一個具體的最小值(以dp為單位)來指定屏幕。例如，7寸的平板最小寬度是600dp，所以如果你想讓你的UI在這種屏幕上顯示two pane，在更小的屏幕上顯示single pane，你可以使用sw600dp來表示你想在600dp以上寬度的屏幕上使用two pane模式。

res/layout/main.xml，single-pane(默認)布局：

<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，two-pane布局：

<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(two-pane)布局，而更小屏幕的設備將會選擇layout/main.xml(single-pane)布局。

然而，使用早于Android 3.2系統(tǒng)的設備將無法識別sw600dp這個限定符，所以你還是同時需要使用large限定符。這樣你就需要在res/layout-large和res/layout-sw600dp目錄下都添加一個相同的main.xml。下節(jié)你將會看到如何避免重復定義這種布局的技巧。

使用布局別名

Smallest-width限定符僅在Android 3.2及之后的系統(tǒng)中有效。因而，你也需要同時使用Size限定符(small, normal, large和xlarge)來兼容更早的系統(tǒng)。例如，你想手機上顯示single-pane界面，而在7寸平板和更大屏的設備上顯示multi-pane界面，你需要提供以下文件：

res/layout/main.xml: single-pane布局

res/layout-large: multi-pane布局

res/layout-sw600dp: multi-pane布局

最后的兩個文件是完全相同的，為了要解決這種重復，你需要使用別名技巧。例如，你可以定義以下布局：

res/layout/main.xml, single-pane布局
res/layout/main_twopanes.xml, two-pane布局

加入以下兩個文件：

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>

最后兩個文件有著相同的內(nèi)容，但是它們并沒有真正去定義布局，它們僅僅只是給main定義了一個別名main_twopanes。這樣兩個layout.xml都只是引用了@layout/main_twopanes，就避免了重復定義布局文件的情況。

使用Orientation限定符

有些布局會在橫屏和豎屏的情況下都顯示的很好，但是多數(shù)情況下這些布局都可以再調(diào)整的。在News Reader示例程序中，布局在不同屏幕尺寸和不同屏幕方向中是這樣顯示的：

小屏幕, 豎屏: 單面板, 顯示logo；

小屏幕, 橫屏: 單面板, 顯示logo；

7寸平板, 豎屏: 單面板, 顯示action bar；

7寸平板, 橫屏: 雙面板, 寬, 顯示action bar；

10寸平板, 豎屏: 雙面板, 窄, 顯示action bar；

10寸平板, 橫屏: 雙面板, 寬, 顯示action bar；

電視, 橫屏: 雙面板, 寬, 顯示action bar；

所有這些布局都是定義在 res/layout/ 這個目錄下，為了要讓設備根據(jù)屏幕配置來加載正確的布局，程序需要使用布局別名來實現(xiàn)。

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)定義好了，剩下的只要使用限定符來讓各個設備根據(jù)屏幕配置加載正確的布局了。你現(xiàn)在就可以使用布局別名技術：

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>

使用Nine-Patch圖片

支持不同屏幕大小通常情況下也意味著，你的圖片資源也需要有自適應的能力。例如，一個按鈕的背景圖片必須能夠隨著按鈕大小的改變而改變。

如果你想使用普通的圖片來實現(xiàn)上述功能，你很快就會發(fā)現(xiàn)結果是令人失望的，因為運行時會均勻地拉伸或壓縮你的圖片。解決方案是使用nine-patch圖片，它是一種被特殊處理過的PNG圖片，你可以指定哪些區(qū)域可以拉伸而哪些區(qū)域不可以。

因而，當你設計需要在不同大小的控件中使用的圖片時，最好的方法就是用nine-patch圖片。為了將圖片轉(zhuǎn)換成nine-patch圖片，你可以從一張普通的圖片開始：

然后通過SDK中帶有的draw9patch工具打開這張圖片(工具位置在SDK的tools目錄下)，你可以在圖片的左邊框和上邊框繪制來標記哪些區(qū)域可以被拉伸。你也可以在圖片的右邊框和下邊框繪制來標記內(nèi)容需要放置在哪個區(qū)域。結果如下圖所示：

注意圖片邊框上的黑色像素，在上邊框和左邊框的部分表示當圖片需要拉伸時就拉伸黑點標記的位置。在下邊框和右邊框的部分表示內(nèi)容將會被放置的區(qū)域。

同時需要注意，這張圖片的后綴名是 .9.png。你必須要使用這個后綴名，因為系統(tǒng)就是根據(jù)這個來區(qū)別nine-patch圖片和普通的PNG圖片的。

當你需要在一個控件中使用nine-patch圖片時(如android:background="@drawable/button")，系統(tǒng)就會根據(jù)控件的大小自動地拉伸你想要拉伸的部分，效果如下圖所示：

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Android編程實現(xiàn)TCP客戶端的方法
這篇文章主要介紹了Android編程實現(xiàn)TCP客戶端的方法,結合實例形式分析了Android實現(xiàn)TCP客戶端的原理及數(shù)據(jù)通信的相關技巧,需要的朋友可以參考下
2016-04-04
Android圖片壓縮幾種方式總結
這篇文章主要介紹了Android圖片壓縮幾種方式總結的相關資料,需要的朋友可以參考下
2017-06-06
Android實現(xiàn)頂部懸浮效果
這篇文章主要為大家詳細介紹了Android實現(xiàn)頂部懸浮效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
Android學習教程之2D繪圖基礎及繪制太極圖
這篇文章主要給大家介紹了Android中2D繪圖基礎的相關資料，文中介紹了繪圖的基礎內(nèi)容，以及通過Canvas和Paint實現(xiàn)繪制太極圖的詳細過程，對各位Android新手開發(fā)者們具有一定的參考價值，需要的朋友下面來一起看看吧。
2017-04-04
Flutter使用socketIo實現(xiàn)實時通訊
本文主要介紹了Flutter使用socketIo實現(xiàn)實時通訊,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2024-07-07
Retrofit 源碼分析初探
這篇文章主要介紹了Retrofit 源碼分析初探,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
獲取微信uin的方法
本篇文章給大家講述了如何最快速的獲取微信uin的方法，對此有需要的朋友可以學習下。
2018-05-05
android中圖片的三級緩存cache策略(內(nèi)存/文件/網(wǎng)絡)
實現(xiàn)圖片緩存也不難，需要有相應的cache策略。這里我采用內(nèi)存-文件-網(wǎng)絡三層cache機制，其中內(nèi)存緩存包括強引用緩存和軟引用緩存（SoftReference），其實網(wǎng)絡不算cache，這里姑且也把它劃到緩存的層次結構中
2013-06-06
Android開發(fā)實現(xiàn)TextView顯示豐富的文本
這篇文章主要介紹了Android開發(fā)實現(xiàn)TextView顯示豐富的文本,涉及Android中TextView的使用技巧,需要的朋友可以參考下
2015-12-12
詳解Android進程和線程
這篇文章主要為大家詳細介紹了Android進程和Android線程兩個概念
2016-06-06