Android用戶界面設(shè)計(jì)：線性布局
理解布局對于良好的Android程序設(shè)計(jì)來說很重要。在這個(gè)教程中，你將學(xué)習(xí)到所有關(guān)于線性布局的東西，它在屏幕上垂直地或水平地組織用戶界面控件或者小工具。使用得當(dāng)，線性布局可以作為基本的布局，基于這個(gè)布局來可以設(shè)計(jì)出許多有趣的Android程序用戶界面。
什么是線性布局
線性布局是最簡單，Android開發(fā)者使用得最多的布局類型之一，開發(fā)者用它來組織你們的用戶界面上的控件。線性布局的作用就像它的名字一樣：它將控件組織在一個(gè)垂直或水平的形式。當(dāng)布局方向設(shè)置為垂直時(shí)，它里面的所有子控件被組織在同一列中；當(dāng)布局方向設(shè)置為水平時(shí)，所有子控件被組織在一行中。
線性布局可以在XML布局資源文件中定義，也可以用Java代碼在程序中動(dòng)態(tài)的定義。
下圖展示了一個(gè)包含7個(gè)TextView控件的線性布局。這個(gè)線性布局方向被設(shè)置為垂直，導(dǎo)致每個(gè)TextView控件被顯示在一列當(dāng)中。每一個(gè)TextView控件的文本屬性都是一個(gè)顏色值，背景色就是這個(gè)顏色；通過將控件的layout_width屬性設(shè)置為fill_parent，每個(gè)控件都拉伸到屏幕寬度。
用XML布局資源定義線性布局
設(shè)計(jì)程序用戶界面最方便和可維護(hù)的方法是創(chuàng)建XML布局資源。這個(gè)方法極大地簡化了UI設(shè)計(jì)過程，它將很多靜態(tài)創(chuàng)建和用戶界面控件的布局以及控件屬性的定義移到了XML中，而不是寫代碼。
XML布局資源必須被存儲(chǔ)在項(xiàng)目目錄的/res/layout下。讓我們看看前一節(jié)介紹的彩虹線性布局。這個(gè)屏幕基本上就是一個(gè)設(shè)置為鋪滿整個(gè)屏幕的垂直線性布局，這通過設(shè)置它的layout_width和layout_height屬性為fill_parent來實(shí)現(xiàn)。適當(dāng)?shù)貙⑵涿麨?res/layout/rainbow.xml，XML定義如下：
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent" android:layout_height="fill_parent"
- android:orientation="vertical">
- <TextView android:text="RED" android:id="@+id/TextView01"
- android:layout_height="wrap_content" android:background="#f00"
- android:layout_width="fill_parent" android:layout_weight=".14"
- android:gravity="center" android:textColor="#000"></TextView>
- <TextView android:text="ORANGE" android:id="@+id/TextView02"
- android:layout_height="wrap_content" android:layout_width="fill_parent"
- android:layout_weight=".15" android:background="#ffa500"
- android:gravity="center" android:textColor="#000"></TextView>
- <TextView android:text="YELLOW" android:id="@+id/TextView03"
- android:layout_height="wrap_content" android:layout_width="fill_parent"
- android:layout_weight=".14" android:background="#ffff00"
- android:gravity="center" android:textColor="#000"></TextView>
- <TextView android:text="GREEN" android:id="@+id/TextView04"
- android:layout_height="wrap_content" android:layout_width="fill_parent"
- android:layout_weight=".15" android:background="#0f0" android:gravity="center"
- android:textColor="#000"></TextView>
- <TextView android:text="BLUE" android:id="@+id/TextView05"
- android:layout_height="wrap_content" android:layout_width="fill_parent"
- android:layout_weight=".14" android:background="#00f" android:gravity="center"
- android:textColor="#fff"></TextView>
- <TextView android:text="INDIGO" android:id="@+id/TextView06"
- android:layout_height="wrap_content" android:layout_width="fill_parent"
- android:layout_weight=".14" android:background="#4b0082"
- android:gravity="center" android:textColor="#fff"></TextView>
- <TextView android:text="VIOLET" android:id="@+id/TextView07"
- android:layout_height="wrap_content" android:layout_width="fill_parent"
- android:layout_weight=".14" android:background="#ee82ee"
- android:gravity="center" android:textColor="#000"></TextView>
- </LinearLayout>
可能你會(huì)注意到這個(gè)線性布局的每一個(gè)子控件都有很多有趣的屬性，包括一個(gè)叫做layout_weight的屬性。一會(huì)我們會(huì)講到更多關(guān)于它的內(nèi)容。
下面兩張圖片展示了這個(gè)布局在設(shè)備的豎屏和橫屏模式下的樣子：
回憶一下，在Activity中，只需要一行有onCreate()方法的代碼來在屏幕上加載和顯示一個(gè)布局資源。如果這個(gè)布局資源被存儲(chǔ)在/res/layout/rainbow.xml文件中，這行代碼應(yīng)該是：
- setContentView(R.layout.rainbow);
#p#
用程序動(dòng)態(tài)定義線性布局
你也可以通過程序來創(chuàng)建和配置線性布局。這通過LinearLayout（android.widget.LinearLayout）類來實(shí)現(xiàn)。你能在LinearLayout.LayoutParams類中找到子級細(xì)節(jié)。同樣地，典型的布局參數(shù)（android.view.ViewGroup.LayoutParams），如layout_height和layout_width, 以及邊距參數(shù)（ViewGroup.MarginLayoutParams）也能用在LinearLayout對象上。
使用以前介紹過的setContentView()方法代替直接加載布局資源，你需要用Java創(chuàng)建屏幕內(nèi)容，然后向setContentView()方法提供一個(gè)父級布局對象，這個(gè)對象包括了所有要作為它的子視圖展示的控件內(nèi)容。在這種情況下，你的父級布局對象是線性布局。
例如，下面的代碼示例了如何用程序在Activity中實(shí)例化一個(gè)線性布局并在它的onCreate()方法中將三個(gè)TextView對象放入其中：
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- // setContentView(R.layout.rainbow);
- TextView tv1 = new TextView(this);
- tv1.setText("FIRST");
- tv1.setTextSize(100);
- tv1.setGravity(Gravity.CENTER);
- TextView tv2 = new TextView(this);
- tv2.setTextSize(100);
- tv2.setGravity(Gravity.CENTER);
- tv2.setText("MIDDLE");
- TextView tv3 = new TextView(this);
- tv3.setTextSize(100);
- tv3.setGravity(Gravity.CENTER);
- tv3.setText("LAST");
- LinearLayout ll = new LinearLayout(this);
- ll.setOrientation(LinearLayout.VERTICAL);
- ll.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
- ll.setGravity(Gravity.CENTER);
- ll.addView(tv1);
- ll.addView(tv2);
- ll.addView(tv3);
- setContentView(ll);
- }
下面兩張圖片展示了這個(gè)布局在設(shè)備豎屏和橫屏下的樣子：
讓我們更近一步地研究一下上面的Java代碼。首先，創(chuàng)建并配置三個(gè)TextView控件。每個(gè)控件都有文本大小（字體大?。?，文本對齊，以及文本值本身。然后，創(chuàng)建一個(gè)垂直方向的線性布局。它的布局參數(shù)允許它填充整個(gè)父級對象（在這里就是整個(gè)屏幕），并且它的對齊導(dǎo)致所有子控件都排列在屏幕中間，而不是從左上角開始。每個(gè)TextView控件通過addView方法作為子控件添加到線性布局中。最后，當(dāng)父級控件要在屏幕上顯示時(shí)，線性布局被傳到setContentView()方法中。
如你所見，當(dāng)越來越多的控件要添加到屏幕時(shí)，代碼量會(huì)很快地增長。為了易組織和可維護(hù)性，用程序定義并使用布局最好是用在特殊情況而不是一般情況。#p#
探討線性布局的重要特性和屬性
現(xiàn)在讓我們來看看有助于配置線性布局和它的子控件的一些重要屬性。
一些特別的屬性應(yīng)用到線性布局。你會(huì)使用到線性布局最重要的屬性包括：
◆方向?qū)傩裕ū仨殻?，取值可以是vertical或horizontal（類：LinearLayout）
◆對齊屬性（可選），控制子控件在線性布局中如何排列和顯示（類：LinearLayout）
◆layout_weight屬性（可選，應(yīng)用到每個(gè)子控件）指定每個(gè)子控件在父級線性布局中的相對重要性（類：LinearLayout.LayoutParams）
此外，通用的ViewGroup-style屬性也應(yīng)用到線性布局。這些屬性包括：
◆通用布局參數(shù)如layout_height (必須)和layout_width (必須) (類：ViewGroup.LayoutParams)
◆邊距布局參數(shù)如margin_top，margin_left，margin_right和margin_bottom (類：ViewGroup. MarginLayoutParams)
◆布局參數(shù)如layout_height和layout_width (類：ViewGroup.LayoutParams)
給子控件賦權(quán)
絕大部分線性布局的屬性都是自明性的。然而layout_weight屬性需要一些額外的討論。與其它線性布局屬性不同，其它屬性應(yīng)用在線性布局視圖本身，而這個(gè)屬性是應(yīng)用在它的子控件上的。權(quán)值本身應(yīng)該是一個(gè)數(shù)字（比如0.5，0.25，0.10，0.10，0.05），如果你把所有子控件的權(quán)值加起來等于1（100%）。
子控件的權(quán)值控件它在父線性布局中有多“重要”或者留給其多少“空間”。這一點(diǎn)最好通過例子來說明。讓我們回到我們前面用的彩虹線性布局。為了允許所有子控件相同地“拉伸”填充線性布局，不管屏幕的大小，我們使用layout_weight來對每個(gè)TextView賦予相對權(quán)值。因?yàn)橛?種我們想賦相同權(quán)值的顏色，我們將1除以7大約得到0.143.然而，既然我們想要權(quán)值之和最后為1，因此5個(gè)控件權(quán)值設(shè)為0.14，另外兩個(gè)為0.15——一個(gè)微小的區(qū)別使得總和剛剛好為1，但是這對于第一個(gè)和最后一個(gè)控件來說還是很明顯的。
當(dāng)屏幕上有足夠空間來正確的展示所有控件的時(shí)候，這個(gè)權(quán)值技巧很有效。那就是說，當(dāng)空間很緊的時(shí)候，權(quán)值屬性可能會(huì)被其它因素覆蓋，比如視圖裁剪或者在TextView下試圖不環(huán)繞文本。當(dāng)我們改變r(jià)ainbow.xml布局文件以包含相似水平布局（layout_height 還是設(shè)置為 fill_parent）的時(shí)候，這變得很明顯。
下面的兩張圖片展示這個(gè)相同的布局（只是改變到水平方向）在設(shè)備豎屏和橫屏模式下可能的樣子：
我們期望的是紅色和紫色區(qū)域（權(quán)值0.15）比其它顏色（權(quán)值為0.14）會(huì)略大一些，但是顯示出來卻不是這樣。如果你仔細(xì)看紅色TextView，它應(yīng)該比它邊上橙色的TextView占用更多空間。然而，因?yàn)?ldquo;Red”是一個(gè)短單詞，而“Orange”不是，因此系統(tǒng)自動(dòng)的作了一些沖撞調(diào)整，為了使得每個(gè)單詞不會(huì)折行。這樣的結(jié)果更令人高興，但是這可能會(huì)有一些煩惱，如果這不是想要的效果的話。
總結(jié)
Android程序用戶界面使用布局來定義，而線性布局是最基本的布局類型之一。線性布局允許子控件被組織在一行或一行（水平）或一列（豎直）上。子控件的位置可以使用對齊和權(quán)值屬性進(jìn)一步設(shè)置。
【編輯推薦】
