Android 用戶(hù)界面設(shè)計(jì)：線性​​布局

理解布局對(duì)于良好的Android程序設(shè)計(jì)來(lái)說(shuō)很重要。在這個(gè)教程中，你將學(xué)習(xí)到所有關(guān)于線性布局的東西，它在屏幕上垂直地或水平地組織用戶(hù)界面控件或者小工具。使用得當(dāng)，線性布局可以作為基本的布局，基于這個(gè)布局來(lái)可以設(shè)計(jì)出許多有趣的Android程序用戶(hù)界面。

什么是線性布局

線性布局是最簡(jiǎn)單，Android開(kāi)發(fā)者使用得最多的布局類(lèi)型之一，開(kāi)發(fā)者用它來(lái)組織你們的用戶(hù)界面上的控件。線性布局的作用就像它的名字一樣：它將控件組織在一個(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è)顏色；通過(guò)將控件的layout_width屬性設(shè)置為fill_parent，每個(gè)控件都拉伸到屏幕寬度。

用XML布局資源定義線性布局

設(shè)計(jì)程序用戶(hù)界面最方便和可維護(hù)的方法是創(chuàng)建XML布局資源。這個(gè)方法極大地簡(jiǎn)化了UI設(shè)計(jì)過(guò)程，它將很多靜態(tài)創(chuàng)建和用戶(hù)界面控件的布局以及控件屬性的定義移到了XML中，而不是寫(xiě)代碼。

XML布局資源必須被存儲(chǔ)在項(xiàng)目目錄的/res/layout下。讓我們看看前一節(jié)介紹的彩虹線性布局。這個(gè)屏幕基本上就是一個(gè)設(shè)置為鋪滿(mǎn)整個(gè)屏幕的垂直線性布局，這通過(guò)設(shè)置它的layout_width和layout_height屬性為fill_parent來(lái)實(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()方法的代碼來(lái)在屏幕上加載和顯示一個(gè)布局資源。如果這個(gè)布局資源被存儲(chǔ)在/res/layout/rainbow.xml文件中，這行代碼應(yīng)該是：

setContentView(R.layout.rainbow);

用程序動(dòng)態(tài)定義線性布局

你也可以通過(guò)程序來(lái)創(chuàng)建和配置線性布局。這通過(guò)LinearLayout（android.widget.LinearLayout）類(lèi)來(lái)實(shí)現(xiàn)。你能在LinearLayout.LayoutParams類(lèi)中找到子級(jí)細(xì)節(jié)。同樣地，典型的布局參數(shù)（android.view.ViewGroup.LayoutParams），如layout_height和layout_width, 以及邊距參數(shù)（ViewGroup.MarginLayoutParams）也能用在LinearLayout對(duì)象上。

使用以前介紹過(guò)的setContentView()方法代替直接加載布局資源，你需要用Java創(chuàng)建屏幕內(nèi)容，然后向setContentView()方法提供一個(gè)父級(jí)布局對(duì)象，這個(gè)對(duì)象包括了所有要作為它的子視圖展示的控件內(nèi)容。在這種情況下，你的父級(jí)布局對(duì)象是線性布局。

例如，下面的代碼示例了如何用程序在Activity中實(shí)例化一個(gè)線性布局并在它的onCreate()方法中將三個(gè)TextView對(duì)象放入其中：

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è)控件都有文本大�。ㄗ煮w大�。�，文本對(duì)齊，以及文本值本身。然后，創(chuàng)建一個(gè)垂直方向的線性布局。它的布局參數(shù)允許它填充整個(gè)父級(jí)對(duì)象（在這里就是整個(gè)屏幕），并且它的對(duì)齊導(dǎo)致所有子控件都排列在屏幕中間，而不是從左上角開(kāi)始。每個(gè)TextView控件通過(guò)addView方法作為子控件添加到線性布局中。最后，當(dāng)父級(jí)控件要在屏幕上顯示時(shí)，線性布局被傳到setContentView()方法中。

如你所見(jiàn)，當(dāng)越來(lái)越多的控件要添加到屏幕時(shí)，代碼量會(huì)很快地增長(zhǎng)。為了易組織和可維護(hù)性，用程序定義并使用布局最好是用在特殊情況而不是一般情況。

探討線性布局的重要特性和屬性

現(xiàn)在讓我們來(lái)看看有助于配置線性布局和它的子控件的一些重要屬性。

一些特別的屬性應(yīng)用到線性布局。你會(huì)使用到線性布局最重要的屬性包括：

方向?qū)傩裕ū仨殻�，取值可以是vertical或horizontal（類(lèi)：LinearLayout）

對(duì)齊屬性（可選），控制子控件在線性布局中如何排列和顯示（類(lèi)：LinearLayout）

layout_weight屬性（可選，應(yīng)用到每個(gè)子控件）指定每個(gè)子控件在父級(jí)線性布局中的相對(duì)重要性（類(lèi)：LinearLayout.LayoutParams）

此外，通用的ViewGroup-style屬性也應(yīng)用到線性布局。這些屬性包括：

通用布局參數(shù)如layout_height (必須)和layout_width (必須) (類(lèi)：ViewGroup.LayoutParams)

邊距布局參數(shù)如margin_top，margin_left，margin_right和margin_bottom (類(lèi)：ViewGroup. MarginLayoutParams)

布局參數(shù)如layout_height和layout_width (類(lèi)：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)值加起來(lái)等于1（100%）。

子控件的權(quán)值控件它在父線性布局中有多“重要”或者留給其多少“空間”。這一點(diǎn)最好通過(guò)例子來(lái)說(shuō)明。讓我們回到我們前面用的彩虹線性布局。為了允許所有子控件相同地“拉伸”填充線性布局，不管屏幕的大小，我們使用layout_weight來(lái)對(duì)每個(gè)TextView賦予相對(duì)權(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，但是這對(duì)于第一個(gè)和最后一個(gè)控件來(lái)說(shuō)還是很明顯的。

當(dāng)屏幕上有足夠空間來(lái)正確的展示所有控件的時(shí)候，這個(gè)權(quán)值技巧很有效。那就是說(shuō)，當(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ì)略大一些，但是顯示出來(lái)卻不是這樣。如果你仔細(xì)看紅色TextView，它應(yīng)該比它邊上橙色的TextView占用更多空間。然而，因?yàn)椤癛ed”是一個(gè)短單詞，而“Orange”不是，因此系統(tǒng)自動(dòng)的作了一些沖撞調(diào)整，為了使得每個(gè)單詞不會(huì)折行。這樣的結(jié)果更令人高興，但是這可能會(huì)有一些煩惱，如果這不是想要的效果的話。

總結(jié)

Android程序用戶(hù)界面使用布局來(lái)定義，而線性布局是最基本的布局類(lèi)型之一。線性布局允許子控件被組織在一行或一行（水平）或一列（豎直）上。子控件的位置可以使用對(duì)齊和權(quán)值屬性進(jìn)一步設(shè)置。[English]

 作者：RockUX–WEB前端
出自：Android用戶(hù)界面設(shè)計(jì)：線性布局