1、TableLayout簡介
2、TableLayout行列數的確定
3、TableLayout可設置的屬性詳解
4、一個包含4個TableLayout佈局的實例及效果圖
一、Tablelayout簡介
Tablelayout類以行和列的形式對控件進行管理,每一行爲一個TableRow對象,或一個View控件。
當爲TableRow對象時,可在TableRow下添加子控件,默認情況下,每個子控件佔據一列。
當爲View時,該View將獨佔一行。
二、TableLayout行列數的確定
TableLayout的行數由開發人員直接指定,即有多少個TableRow對象(或View控件),就有多少行。
TableLayout的列數等於含有最多子控件的TableRow的列數。如第一TableRow含2個子控件,第二個TableRow含3個,第三個TableRow含4個,那麼該TableLayout的列數爲4.
三、TableLayout可設置的屬性詳解
TableLayout可設置的屬性包括全局屬性及單元格屬性。
1、全局屬性也即列屬性,有以下3個參數:
android:stretchColumns 設置可伸展的列。該列可以向行方向伸展,最多可佔據一整行。
android:shrinkColumns 設置可收縮的列。當該列子控件的內容太多,已經擠滿所在行,那麼該子控件的內容將往列方向顯示。
android:collapseColumns 設置要隱藏的列。
示例:
android:stretchColumns="0" 第0列可伸展
android:shrinkColumns="1,2" 第1,2列皆可收縮
android:collapseColumns="*" 隱藏所有行
說明:列可以同時具備stretchColumns及shrinkColumns屬性,若此,那麼當該列的內容N多時,將“多行”顯示其內容。(這裏不是真正的多行,而是系統根據需要自動調節該行的layout_height)
2、單元格屬性,有以下2個參數:
android:layout_column 指定該單元格在第幾列顯示
android:layout_span 指定該單元格佔據的列數(未指定時,爲1)
示例:
android:layout_column="1" 該控件顯示在第1列
android:layout_span="2" 該控件佔據2列
說明:一個控件也可以同時具備這兩個特性。
四、一個包含4個TableLayout佈局的實例及效果圖
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="3dip"
>
<!-- 第1個TableLayout,用於描述表中的列屬性。第0列可伸展,第1列可收縮,第2列被隱藏-->
<TextView
android:text="表1:全局設置:列屬性設置"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="15sp"
android:background="#7f00ffff"/>
<TableLayout
android:id="@+id/table1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="0"
android:shrinkColumns="1"
android:collapseColumns="2"
android:padding="3dip">
<TableRow>
<Button android:text="該列可伸展"/>
<Button android:text="該列可收縮"/>
<Button android:text="我被隱藏了"/>
</TableRow>
<TableRow>
<TextView android:text="我向行方向伸展,我可以很長 "/>
<TextView android:text="我向列方向收縮,我可以很深"/>
</TableRow>
</TableLayout>
<!-- 第2個TableLayout,用於描述表中單元格的屬性,包括:android:layout_column 及android:layout_span-->
<TextView
android:text="表2:單元格設置:指定單元格屬性設置"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="15sp"
android:background="#7f00ffff"/>
<TableLayout
android:id="@+id/table2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="3dip">
<TableRow>
<Button android:text="第0列"/>
<Button android:text="第1列"/>
<Button android:text="第2列"/>
</TableRow>
<TableRow>
<TextView android:text="我被指定在第1列" android:layout_column="1"/>
</TableRow>
<TableRow>
<TextView
android:text="我跨1到2列,不信你看!"
android:layout_column="1"
android:layout_span="2"
/>
</TableRow>
</TableLayout>
<!-- 第3個TableLayout,使用可伸展特性佈局-->
<TextView
android:text="表3:應用一,非均勻佈局"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="15sp"
android:background="#7f00ffff"/>
<TableLayout
android:id="@+id/table3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="*"
android:padding="3dip"
>
<TableRow>
<Button android:text="一" ></Button>
<Button android:text="兩字"></Button>
<Button android:text="三個字" ></Button>
</TableRow>
</TableLayout>
<!-- 第4個TableLayout,使用可伸展特性,並指定每個控件寬度一致,如1dip-->
<TextView
android:text="表4:應用二,均勻佈局"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="15sp"
android:background="#7f00ffff"/>
<TableLayout
android:id="@+id/table4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="*"
android:padding="3dip"
>
<TableRow>
<Button android:text="一" android:layout_width="1dip"></Button>
<Button android:text="兩字" android:layout_width="1dip"></Button>
<Button android:text="三個字" android:layout_width="1dip"></Button>
</TableRow>
</TableLayout>
</LinearLayout>
說明:第4個TableLayout裏的均勻佈局的均勻效果是有限的。其有限性體現在,當該行有N列,則每列的控件內容不能多於1/N。
TableLayout特點:
1)TableLayout和我們平時在網頁上見到的Table有所不同,TableLayout沒有邊框的
2)它是由多個TableRow對象組成,每個TableRow可以有0個或多個單元格,每個單元格就是一個View。這些TableRow,單元格不能 設置layout_width,寬度默認是fill_parent的,只有高度layout_height可以自定義,默認是 wrap_content。
3)單元格可以爲empty,並且通過android:layout_column可以設置index值實現跳開某些單元格。在TableRow之間
4)添加View,設置layout_height以及背景色,就可以實現一條間隔線。android:layout_span可以設置合併幾個單元格:
1 <?xml version="1.0" encoding="utf-8"?>
2
3 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
4
5 android:layout_width="fill_parent"
6
7 android:layout_height="fill_parent">
8
9 <TableRow>
10
11 <TextView
12
13 android:text="column1"
14
15 android:padding="3dip" />
16
17 <TextView
18
19 android:text="column2"
20
21 android:padding="3dip" />
22
23 <TextView
24
25 android:text="column3"
26
27 android:padding="3dip" />
28
29 </TableRow>
30
31 <TableRow>
32
33 <TextView
34
35 android:text="column11"
36
37 android:visibility="invisible"/> //cell不見了
38
39 <TextView
40
41 android:text="左邊的invisible"
42
43 android:gravity="right"
44
45 android:padding="3dip" />
46
47 <Button
48
49 android:id="@+id/go"
50
51 android:text="go"
52
53 android:padding="3dip" />
54
55 <Button
56
57 android:text="cancel"
58
59 android:padding="3dip" />
60
61 </TableRow>
62
63 <View //間隔線
64
65 android:layout_height="2dip"
66
67 android:background="#F00" />
68
69 <TableRow>
70
71 <TextView
72
73 android:text="右邊的cell empty" />
74
75 <TextView
76
77 android:layout_column="2"
78
79 android:text="跳開empty cell"
80
81 android:padding="3dip" />
82
83 </TableRow>
84
85 <TableRow>
86
87 <TextView
88
89 android:text="合併3個單元格"
90
91 android:layout_span="3"
92
93 android:gravity="center_horizontal"
94
95 android:background="#FFC0C0C0"
96
97 android:textColor="#f00"
98
99 android:padding="3dip" />
100
101 </TableRow>
102
103 </TableLayout>
可收縮column效果
現在可以看到第一個column爲了讓第4個column完整顯示,而收縮得內容分爲幾行顯示!
而可伸展column的效果就是在其他column可以完整顯示時,該column就會伸展,佔最多空間:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1"> // 設置第二個column可伸展
<TableRow>
<TextView
android:text="column1"
android:padding="3dip" />
<TextView
android:text="column2"
android:gravity="right"
android:padding="3dip" />
<TextView
android:text="column3"
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:text="column1"
android:padding="3dip" />
<TextView
android:text="column2"
android:gravity="right"
android:padding="3dip" />
<TextView
android:text="column3"
android:padding="3dip" />
</TableRow>
</TableLayout>
可伸展column效果
而動態隱藏column,可以調用TableLayout.setColumnCollapsed (int columnIndex, boolean isCollapsed)來指定相應的column。另外TableLayout類的boolean isColumnCollapsed (int columnIndex)能夠判斷指定的column是否隱藏。
TableLayout可以用來做網頁上的Form顯示效果,看看官方的sample:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:text="@string/table_layout_10_user"
android:textStyle="bold"
android:gravity="right"
android:padding="3dip" />
<EditText android:id="@+id/username"
android:text="@string/table_layout_10_username_text"
android:padding="3dip"
android:scrollHorizontally="true" />
</TableRow>
<TableRow>
<TextView
android:text="@string/table_layout_10_password"
android:textStyle="bold"
android:gravity="right"
android:padding="3dip" />
<EditText android:id="@+id/password"
android:text="@string/table_layout_10_password_text"
android:password="true"
android:padding="3dip"
android:scrollHorizontally="true" />
</TableRow>
<TableRow
android:gravity="right">
<Button android:id="@+id/cancel"
android:text="@string/table_layout_10_cancel" />
<Button android:id="@+id/login"
android:text="@string/table_layout_10_login" />
</TableRow>
</TableLayout>
轉載於:http://wangyang191.iteye.com/blog/1582658