【移動(dòng)應(yīng)用開發(fā)技術(shù)】怎么在Android中自適應(yīng)不同大小的屏幕

【移動(dòng)應(yīng)用開發(fā)技術(shù)】怎么在Android中自適應(yīng)不同大小的屏幕

怎么在Android中自適應(yīng)不同大小的屏幕？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面在下將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。使用"wrap_content"和"match_parent"。

為了確保你的布局能夠自適應(yīng)各種不同屏幕大小，你應(yīng)該在布局的視圖中使用"wrap_content"和"match_parent"來確定它的寬和高。如果你使用了"wrap_content"，相應(yīng)視圖的寬和高就會(huì)被設(shè)定成剛好能夠包含視圖中內(nèi)容的最小值。而如果你使用了"match_parent"(在AndroidAPI8之前叫作"fill_parent")，就會(huì)讓視圖的寬和高延伸至充滿整個(gè)父布局。通過使用"wrap_content"和"match_parent"來替代硬編碼的方式定義視圖大小，你的視圖要么僅僅使用了需要的那邊一點(diǎn)空間，要么就會(huì)充滿所有可用的空間。例如：<LinearLayout

xmlns:android="/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"

/>

</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"來給控件定義寬高的，這讓整個(gè)布局可以正確地適應(yīng)不同屏幕的大小，甚至是橫屏。下圖是這個(gè)布局分別在豎屏和橫屏?xí)r顯示的結(jié)果，注意控件的寬和高是根據(jù)屏幕自適應(yīng)的。使用RelativeLayout通過多層嵌套LinearLayout和組合使用"wrap_content"和"match_parent"已經(jīng)可以構(gòu)建出足夠復(fù)雜的布局。但是LinearLayout無法允許你準(zhǔn)確地控制子視圖之前的位置關(guān)系，所有LinearLayout中的子視圖只能簡(jiǎn)單的一個(gè)挨著一個(gè)地排列。如果你需要讓子視圖能夠有更多的排列方式，而不是簡(jiǎn)單地排成一行或一列，使用RelativeLayout將會(huì)是更好的解決方案。RelativeLayout允許布局的子控件之間使用相對(duì)定位的方式控制控件的位置，比如你可以讓一個(gè)子視圖居屏幕左側(cè)對(duì)齊，讓另一個(gè)子視圖居屏幕右側(cè)對(duì)齊。例如：<?xml

version="1.0"

encoding="utf-8"?>

<RelativeLayout

xmlns:android="/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>下圖展示了這個(gè)布局在QVGA屏幕上顯示的結(jié)果。下圖展示了這個(gè)布局在一個(gè)更大的屏幕上顯示的結(jié)果?？梢宰⒁獾剑词蛊聊坏拇笮「淖?，視圖之前的相對(duì)位置都沒有改變。使用Size限定符雖然使用以上幾種方式可以解決屏幕適配性的問題，但是那些通過伸縮控件來適應(yīng)各種不同屏幕大小的布局，未必就是提供了最好的用戶體驗(yàn)。你的應(yīng)用程序應(yīng)該不僅僅實(shí)現(xiàn)了可自適應(yīng)的布局，還應(yīng)該提供一些方案根據(jù)屏幕的配置來加載不同的布局，可以通過配置限定符(configurationqualifiers)來實(shí)現(xiàn)。配置限定符允許程序在運(yùn)行時(shí)根據(jù)當(dāng)前設(shè)備的配置自動(dòng)加載合適的資源(比如為不同尺寸屏幕設(shè)計(jì)不同的布局)?，F(xiàn)在有很多的應(yīng)用程序?yàn)榱酥С执笃猎O(shè)備，都會(huì)實(shí)現(xiàn)“twopane”模式(程序會(huì)在左側(cè)的面板上展示一個(gè)包含子項(xiàng)的List，在右側(cè)面板上展示內(nèi)容)。平板和電視設(shè)備的屏幕都很大，足夠同時(shí)顯示兩個(gè)面板，而手機(jī)屏幕一次只能顯示一個(gè)面板，兩個(gè)面板需要分開顯示。所以，為了實(shí)現(xiàn)這種布局，你可能需要以下文件：res/layout/main.xml，single-pane(默認(rèn))布局：<LinearLayout

xmlns:android="/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="/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>請(qǐng)注意第二個(gè)布局的目錄名中包含了large限定符，那些被定義為大屏的設(shè)備(比如7寸以上的平板)會(huì)自動(dòng)加載此布局，而小屏設(shè)備會(huì)加載另一個(gè)默認(rèn)的布局。使用Smallest-width限定符使用Size限定符有一個(gè)問題會(huì)讓很多程序員感到頭疼，large到底是指多大呢？很多應(yīng)用程序都希望能夠更自由地為不同屏幕設(shè)備加載不同的布局，不管它們是不是被系統(tǒng)認(rèn)定為"large"。這就是Android為什么在3.2以后引入了"Smallest-width"限定符。Smallest-width限定符允許你設(shè)定一個(gè)具體的最小值(以dp為單位)來指定屏幕。例如，7寸的平板最小寬度是600dp，所以如果你想讓你的UI在這種屏幕上顯示twopane，在更小的屏幕上顯示singlepane，你可以使用sw600dp來表示你想在600dp以上寬度的屏幕上使用twopane模式。res/layout/main.xml，single-pane(默認(rèn))布局：<LinearLayout

xmlns:android="/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="/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的設(shè)備會(huì)選擇layout-sw600dp/main.xml(two-pane)布局，而更小屏幕的設(shè)備將會(huì)選擇layout/main.xml(single-pane)布局。然而，使用早于Android3.2系統(tǒng)的設(shè)備將無法識(shí)別sw600dp這個(gè)限定符，所以你還是同時(shí)需要使用large限定符。這樣你就需要在res/layout-large和res/layout-sw600dp目錄下都添加一個(gè)相同的main.xml。下節(jié)你將會(huì)看到如何避免重復(fù)定義這種布局的技巧。使用布局別名Smallest-width限定符僅在Android3.2及之后的系統(tǒng)中有效。因而，你也需要同時(shí)使用Size限定符(small,normal,large和xlarge)來兼容更早的系統(tǒng)。例如，你想手機(jī)上顯示single-pane界面，而在7寸平板和更大屏的設(shè)備上顯示multi-pane界面，你需要提供以下文件：res/layout/main.xml:single-pane布局res/layout-large:multi-pane布局res/layout-sw600dp:multi-pane布局最后的兩個(gè)文件是完全相同的，為了要解決這種重復(fù)，你需要使用別名技巧。例如，你可以定義以下布局：res/layout/main.xml,single-pane布局res/layout/main_twopanes.xml,two-pane布局加入以下兩個(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定義了一個(gè)別名main_twopanes。這樣兩個(gè)layout.xml都只是引用了@layout/main_twopanes，就避免了重復(fù)定義布局文件的情況。使用Orientation限定符

有些布局會(huì)在橫屏和豎屏的情況下都顯示的很好，但是多數(shù)情況下這些布局都可以再調(diào)整的。在NewsReader示例程序中，布局在不同屏幕尺寸和不同屏幕方向中是這樣顯示的：小屏幕,豎屏:單面板,顯示logo；小屏幕,橫屏:單面板,顯示logo；7寸平板,豎屏:單面板,顯示actionbar；7寸平板,橫屏:雙面板,寬,顯示actionbar；10寸平板,豎屏:雙面板,窄,顯示actionbar；10寸平板,橫屏:雙面板,寬,顯示actionbar；電視,橫屏:雙面板,寬,顯示actionbar；所有這些布局都是定義在res/layout/這個(gè)目錄下，為了要讓設(shè)備根據(jù)屏幕配置來加載正確的布局，程序需要使用布局別名來實(shí)現(xiàn)。res/layout/onepane.xml:<LinearLayout

xmlns:android="/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="/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"

/>

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