1. 程式人生 > >Android開發之詳解五大布局

Android開發之詳解五大布局

為了適應各式各樣的介面風格,Android系統提供了5種佈局,這5種佈局分別是:

LinearLayout(線性佈局)

TableLayout(表格佈局)

RelativeLayout(相對佈局)

AbsoluteLayout(絕對佈局)

FrameLayout(框架佈局)

利用這五種佈局,可以在螢幕上將控制元件隨心所欲的擺放,而且控制元件的大小和位置會隨著螢幕大小的變化作出相應的調整。下面是這五個佈局在View的繼承體系中的關係:

一,LinearLayout(線性佈局)

在一個方向上(垂直或水平)對齊所有子元素 一個垂直列表每行將只有一個子元素(無論它們有多寬) 一個水平列表只是一列的高度(最高子元素的高度來填充)

下面是一個簡單的線性佈局的例子:

View Code
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout
 3 xmlns:android="http://schemas.android.com/apk/res/android" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent" android:orientation="vertical">
 6 <EditText android:text="EditText"
7 8 android:id="@+id/editText1" 9 10 android:layout_height="wrap_content"11 12 android:layout_width="fill_parent"> 13 14 </EditText> 15 <LinearLayout android:id="@+id/linearLayout1"16 17 android:layout_height="fill_parent"18 19 android:layout_width="fill_parent"20 21 android:gravity="right"
> 22 <Button android:id="@+id/button2"23 24 android:text="Button"25 26 android:layout_width="wrap_content"27 28 android:layout_height="wrap_content"></Button> 29 <Button android:text="Button"30 31 android:id="@+id/button1"32 33 android:layout_width="wrap_content"34 35 android:layout_height="wrap_content"></Button> 36 </LinearLayout> 37 </LinearLayout>

最外層佈局為垂直線性佈局,寬度為整個螢幕(fill_parent),高度為剛好適合子控制元件(wrap_content)。然後依次新增一個EditText,一個水平佈局的LinearLayout,在這個線性佈局裡面,擺放兩個Button,該線性佈局的gravity屬性設定為”right”,所以裡面的兩個Button靠右顯示。

二,TableLayout(表格佈局)

把子元素放入到行與列中 不顯示行、列或是單元格邊界線 單元格不能橫跨行,如HTML中一樣 表格佈局模型以行列的形式管理子控制元件,每一行為一個TableRow的物件,當然也可以是一個View的物件。TableRow可以新增子控制元件,每新增一個為一列。

android:layout_colum官方解釋:The index of the column in which this child should be,也即是設定該控制元件在TableRow中所處的列。

android:layout_span官方解釋:Defines how many columns this child should span,也即是設定該控制元件所跨越的列數。

android:collapseColumns官方解釋:The 0 based index of the columns to collapse. The column indices must be separated by a comma: 1, 2, 5.也即是將TableLayout裡面指定的列隱藏,若有多列需要隱藏,請用逗號將需要隱藏的列序號隔開。

android:stretchColumns官方解釋:The 0 based index of the columns to stretch. The column indices must be separated by a comma: 1, 2, 5. You can stretch all columns by using the value “*” instead. Note that a column can be marked stretchable and shrinkable at the same time.也即是設定指定的列為可伸展的列,可伸展的列會盡量伸展以填滿所有可用的空間,若有多列需要設定為可伸展,請用逗號將需要伸展的列序號隔開。

android:shrinkColumns官方解釋:The 0 based index of the columns to shrink. The column indices must be separated by a comma: 1, 2, 5. You can shrink all columns by using the value “*” instead. 設定指定的列為可收縮的列。當可收縮的列太寬以至於讓其他列顯示不全時,會縱向延伸空間。當需要設定多列為可收縮時,將列序號用逗號隔開。

下面用一個例子簡單說明TableLayout的用法:

View Code
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent" 5 android:stretchColumns="1">
 6 <TableRow>
 7 <TextView
 8 android:layout_column="1" 9 android:padding="3dip" android:text="Row1"/>
10 <TextView
11 android:text="1"12 android:gravity="right"13 android:padding="3dip" />
14 </TableRow>
15 <View
16 android:layout_height="2dip"17 android:background="#FF909090" />
18 <TableRow>
19 <TextView
20 android:text="*"21 android:padding="3dip" />
22 <TextView
23 android:text="Row12"24 android:padding="3dip" />
25 <TextView
26 android:text="2"27 android:gravity="right"28 android:padding="3dip" />
29 </TableRow>
30 <View
31 android:layout_height="2dip"32 android:background="#FF909090" />
33 <TableRow>
34 <TextView
35 android:layout_column="1"36 android:text="Row13"37 android:padding="3dip" />
38 </TableRow>
39 </TableLayout>

三、RelativeLayout(相對佈局)

相對佈局的子控制元件會根據它們所設定的參照控制元件和引數進行相對佈局。參照控制元件可以是父控制元件,也可以是其它子控制元件,但是被參照的控制元件必須要在參照它的控制元件之前定義。下面是一個簡單的例子:

View Code
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <?xml version="1.0" encoding="utf-8"?>
 3 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 4 android:layout_width="fill_parent" 5 android:layout_height="fill_parent" 6 >
 7 <AnalogClock
 8 android:id="@+id/aclock" 9 android:layout_width="wrap_content"10 android:layout_height="wrap_content"11 android:layout_centerInParent="true" />
12 <DigitalClock
13 android:id="@+id/dclock"14 android:layout_width="wrap_content"15 android:layout_height="wrap_content"16 android:layout_below="@id/aclock"17 android:layout_alignLeft="@id/aclock"18 android:layout_marginLeft="40px" />
19 <TextView
20 android:layout_width="wrap_content"21 android:layout_height="wrap_content"22 android:text="當前時間:"23 android:layout_toLeftOf="@id/dclock"24 android:layout_alignTop="@id/aclock"/>
25 </RelativeLayout>

四、AbsoluteLayout(絕對佈局)

絕對佈局的子控制元件需要指定相對於此座標佈局的橫縱座標值,否則將會像框架佈局那樣被排在左上角。手機應用需要適應不同的螢幕大小,而這種佈局模型不能自適應螢幕尺寸大小,所以應用的相對較少。下面以一個例子簡單說明絕對佈局:

View Code
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent" 5 >
 6 <TextView
 7 android:layout_width="wrap_content" 8 android:layout_height="wrap_content" 9 android:layout_x="10px"10 android:layout_y="10px" android:text="Textview"/>
11 <TextView
12 android:layout_width="wrap_content"13 android:layout_height="wrap_content"14 android:layout_x="30px"15 android:layout_y="30px" android:text="Textview"/>
16 <TextView
17 android:layout_width="wrap_content"18 android:layout_height="wrap_content"19 android:layout_x="50px"20 android:layout_y="50px" android:text="Textview"/>
21 </AbsoluteLayout>

五、FrameLayout(框架佈局)

框架佈局是最簡單的佈局形式。所有新增到這個佈局中的檢視都以層疊的方式顯示。第一個新增的控制元件被放在最底層,最後一個新增到框架佈局中的檢視顯示在最頂層,上一層的控制元件會覆蓋下一層的控制元件。這種顯示方式有些類似於堆疊。下面舉一個簡單的例子

View Code
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" android:layout_height="fill_parent">
 4 <LinearLayout android:id="@+id/linearLayout1" 5 android:layout_height="match_parent" 6 android:layout_width="match_parent">
 7 <Button android:text="Button" 8 android:id="@+id/button1" 9 android:layout_width="wrap_content"10 android:layout_height="wrap_content"></Button>
11 </LinearLayout>
12 <LinearLayout android:layout_width="match_parent"13 android:id="@+id/linearLayout3"14 android:layout_height="match_parent"15 android:gravity="bottom|right">
16 <Button android:text="Button"17 android:id="@+id/button3"18 android:layout_width="wrap_content"19 android:layout_height="wrap_content"></Button>
20 </LinearLayout>
21 <LinearLayout android:layout_height="match_parent"22 android:id="@+id/linearLayout2"23 android:layout_width="match_parent"24 android:gravity="right">
25 <Button android:text="Button"26 android:id="@+id/button2"27 android:layout_width="wrap_content"28 android:layout_height="wrap_content"></Button>
29 </LinearLayout>
30 <LinearLayout android:layout_width="match_parent"31 android:id="@+id/LinearLayout01"32 android:layout_height="match_parent"33 android:gravity="bottom|left">
34 <Button android:id="@+id/Button01"35 android:text="Button"36 android:layout_width="wrap_content"37 android:layout_height="wrap_content"></Button>
38 </LinearLayout>
39 </FrameLayout>

下面介紹一下RelativeLayout用到的一些重要的屬性:

第一類:屬性值為true或false android:layout_centerHrizontal                                           水平居中 android:layout_centerVertical                                            垂直居中 android:layout_centerInparent                                           相對於父元素完全居中 android:layout_alignParentBottom                     貼緊父元素的下邊緣 android:layout_alignParentLeft                        貼緊父元素的左邊緣 android:layout_alignParentRight                       貼緊父元素的右邊緣 android:layout_alignParentTop                        貼緊父元素的上邊緣 android:layout_alignWithParentIfMissing               如果對應的兄弟元素找不到的話就以父元素做參照物

第二類:屬性值必須為id的引用名“@id/id-name” android:layout_below                          在某元素的下方 android:layout_above                          在某元素的的上方 android:layout_toLeftOf                       在某元素的左邊 android:layout_toRightOf                     在某元素的右邊

android:layout_alignTop                      本元素的上邊緣和某元素的的上邊緣對齊 android:layout_alignLeft                      本元素的左邊緣和某元素的的左邊緣對齊 android:layout_alignBottom                 本元素的下邊緣和某元素的的下邊緣對齊 android:layout_alignRight                    本元素的右邊緣和某元素的的右邊緣對齊

第三類:屬性值為具體的畫素值,如30dip,40px android:layout_marginBottom              離某元素底邊緣的距離 android:layout_marginLeft                   離某元素左邊緣的距離 android:layout_marginRight                 離某元素右邊緣的距離 android:layout_marginTop                   離某元素上邊緣的距離