Android用戶界面設計:線性​​佈局

理解佈局對於良好的Andr​​oid程序設計來說很重要。在這個教程中,你將學習到所有關於線性佈局的東西,它在屏幕上垂直地或水平地組織用戶界面控件或者小工具。使用得當,線性佈局可以作為基本的佈局,基於這個佈局來可以設計出許多有趣的Andr​​oid程序用戶界面。

什麼是線性佈局

線性佈局是最簡單,Android開發者使用得最多的佈局類型之一,開發者用它來組織你們的用戶界面上的控件。線性佈局的作用就像它的名字一樣:它將控件組織在一個垂直或水平的形式。當佈局方向設置為垂直時,它裡面的所有子控件被組織在同一列中;當佈局方向設置為水平時,所有子控件被組織在一行中。

線性佈局可以在XML佈局資源文件中定義,也可以用Java代碼在程序中動態的定義。

下圖展示了一個包含7個TextView控件的線性佈局。這個線性佈局方向被設置為垂直,導致每個TextView控件被顯示在一列當中。每一個TextView控件的文本屬性都是一個顏色值,背景色就是這個顏色;通過將控件的layout_width屬性設置為fill_parent,每個控件都拉伸到屏幕寬度。



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

設計程序用戶界面最方便和可維護的方法是創建XML佈局資源。這個方法極大地簡化了UI設計過程,它將很多靜態創建和用戶界面控件的佈局以及控件屬性的定義移到了XML中,而不是寫代碼。

XML佈局資源必須被存儲在項目目錄的/res/layout下。讓我們看看前一節介紹的彩虹線性佈局。這個屏幕基本上就是一個設置為鋪滿整個屏幕的垂直線性佈局,這通過設置它的layout_width和layout_height屬性為fill_parent來實現。適當地將其命名為/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>

可能你會注意到這個線性佈局的每一個子控件都有很多有趣的屬性,包括一個叫做layout_weight的屬性。一會我們會講到更多關於它的內容。

下面兩張圖片展示了這個佈局在設備的豎屏和橫屏模式下的樣子:

回憶一下,在Activity中,只需要一行有onCreate()方法的代碼來在屏幕上加載和顯示一個佈局資源。如果這個佈局資源被存儲在/res/layout/rainbow.xml文件中,這行代碼應該是:

setContentView(R. layout.rainbow);

用程序動態定義線性佈局

你也可以通過程序來創建和配置線性佈局。這通過LinearLayout(android.widget.LinearLayout)類來實現。你能在LinearLayout.LayoutParams類中找到子級細節。同樣地,典型的佈局參數(android.view.ViewGroup.LayoutParams),如layout_height和layout_width, 以及邊距參數(ViewGroup.MarginLayoutParams)也能用在LinearLayout對像上。

使用以前介紹過的setContentView()方法代替直接加載佈局資源,你需要用Java創建屏幕內容,然後向setContentView()方法提供一個父級佈局對象,這個對象包括了所有要作為它的子視圖展示的控件內容。在這種情況下,你的父級佈局對像是線性佈局。

例如,下面的代碼示例瞭如何用程序在Activity中實例化一個線性佈局並在它的onCreate()方法中將三個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);

}

下面兩張圖片展示了這個佈局在設備豎屏和橫屏下的樣子:

讓我們更近一步地研究一下上面的Java代碼。首先,創建並配置三個TextView控件。每個控件都有文本大小(字體大小),文本對齊,以及文本值本身。然後,創建一個垂直方向的線性佈局。它的佈局參數允許它填充整個父級對象(在這裡就是整個屏幕),並且它的對齊導致所有子控件都排列在屏幕中間,而不是從左上角開始。每個TextView控件通過addView方法作為子控件添加到線性佈局中。最後,當父級控件要在屏幕上顯示時,線性佈局被傳到setContentView()方法中。

如你所見,當越來越多的控件要添加到屏幕時,代碼量會很快地增長。為了易組織和可維護性,用程序定義並使用佈局最好是用在特殊情況而不是一般情況。

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

現在讓我們來看看有助於配置線性佈局和它的子控件的一些重要屬性。

一些特別的屬性應用到線性佈局。你會使用到線性佈局最重要的屬性包括:

  • 方向屬性(必須),取值可以是vertical或horizo​​ntal(類:LinearLayout)
  • 對齊屬性(可選),控制子控件在線性佈局中如何排列和顯示(類:LinearLayout)
  • layout_weight屬性(可選,應用到每個子控件)指定每個子控件在父級線性佈局中的相對重要性(類:LinearLayout.LayoutParams)

此外,通用的ViewGroup-style屬性也應用到線性佈局。這些屬性包括:

  • 通用佈局參數如layout_height (必須)和layout_width (必須) (類:ViewGroup.LayoutParams)
  • 邊距佈局參數如margin_top,margin_left,margin_right和margin_bottom (類:ViewGroup. MarginLayoutParams)
  • 佈局參數如layout_height和layout_width (類:ViewGroup.LayoutParams)

給子控件賦權

絕大部分線性佈局的屬性都是自明性的。然而layout_weight屬性需要一些額外的討論。與其它線性佈局屬性不同,其它屬性應用在線性佈局視圖本身,而這個屬性是應用在它的子控件上的。權值本身應該是一個數字(比如0.5,0.25,0.10,0.10,0.05),如果你把所有子控件的權值加起來等於1(100%)。

子控件的權值控件它在父線性佈局中有多“重要”或者留給其多少“空間”。這一點最好通過例子來說明。讓我們回到我們前面用的彩虹線性佈局。為了允許所有子控件相同地“拉伸”填充線性佈局,不管屏幕的大小,我們使用layout_weight來對每個TextView賦予相對權值。因為有7種我們想賦相同權值的顏色,我們將1除以7大約得到0.143.然而,既然我們想要權值之和最後為1,因此5個控件權值設為0.14,另外兩個為0.15——一個微小的區別使得總和剛剛好為1,但是這對於第一個和最後一個控件來說還是很明顯的。

當屏幕上有足夠空間來正確的展示所有控件的時候,這個權值技巧很有效。那就是說,當空間很緊的時候,權值屬性可能會被其它因素覆蓋,比如視圖裁剪或者在TextView下試圖不環繞文本。當我們改變rainbow.xml佈局文件以包含相似水平佈局(layout_height 還是設置為fill_parent)的時候,這變得很明顯。

下面的兩張圖片展示這個相同的佈局(只是改變到水平方向)在設備豎屏和橫屏模式下可能的樣子:

我們期望的是紅色和紫色區域(權值0.15)比其它顏色(權值為0.14)會略大一些,但是顯示出來卻不是這樣。如果你仔細看紅色TextView,它應該比它邊上橙色的TextView佔用更多空間。然而,因為“Red”是一個短單詞,而“Orange”不是,因此系統自動的作了一些衝撞調整,為了使得每個單詞不會折行。這樣的結果更令人高興,但是這可能會有一些煩惱,如果這不是想要的效果的話。

總結

Android程序用戶界面使用佈局來定義,而線性佈局是最基本​​的佈局類型之一。線性佈局允許子控件被組織在一行或一行(水平)或一列(豎直)上。子控件的位置可以使用對齊和權值屬性進一步設置。 [English]

轉載請註明:

作者:RockUX–WEB前端

出自:Android用戶界面設計:線性佈局

原創辛苦,請多多支持!

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.