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可以设置合并几个单元格:
Java代码
[html]
01.<?xml version="1.0" encoding="utf-8"?>
02.
03.<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
04.
05.android:layout_width="fill_parent"
06.
07.android:layout_height="fill_parent">
08.
09.<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>
<?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">
<TableRow>
<TextView
android:text="column1"
android:padding="3dip"/>
<TextView
android:text="column2"
android:padding="3dip"/>
<TextView
android:text="column3"
android:padding="3dip"/>
</TableRow>
<TableRow>
<TextView
android:text="column11"
android:visibility="invisible"/> //cell不见了
<TextView
android:text="左边的invisible"
android:gravity="right"
android:padding="3dip" />
<Button
android:id="@+id/go"
android:text="go"
android:padding="3dip" />
<Button
android:text="cancel"
android:padding="3dip" />
</TableRow>
<View//间隔线
android:layout_height="2dip"
android:background="#F00" />
<TableRow>
<TextView
android:text="右边的cell empty" />
<TextView
android:layout_column="2"
android:text="跳开empty cell"
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:text="合并3个单元格"
android:layout_span="3"
android:gravity="center_horizontal"
android:background="#FFC0C0C0"
android:textColor="#f00"
android:padding="3dip" />
</TableRow>
</TableLayout>
没有设置收缩/伸展效果
注意,原来没有添加 android:padding="3dip" 的,发现那些column会凑在一起的,没有空白间隔!明显看到,那个cancel按钮被挤到几乎看不见了!这时候需要使用
1)android:shrinkColumns="可收缩的column",
2)android:stretchColumns="可伸展的column"。
android:shrinkColumns和android:stretchColumns的值都是以0开始的index,但必须是string值,即用"1,2,5"来表示。可以用"*"来表示all columns。而且同一column可以同时设置为shrinkable和stretchable。
如果使用TableLayout类的setColumnShrinkable/setColumnStretchable (int columnIndex, boolean isShrinkable)就麻烦些了,需要一个一个column来设置。也可以使用TableLayout的setShrinkAllColumns/setStretchAllColumns来设置all columns。
判断这些column是否shrinkable或stretchable,可以调用isColumnShrinkable/isColumnStretchable(int columnIndex),isShrinkAllColumns()/isStretchAllColumns()。
Java代码
[html]
01.<?xml version="1.0" encoding="utf-8"?>
02.
03.<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
04.
05.android:layout_width="fill_parent"
06.
07.android:layout_height="fill_parent"
08.
09.android:shrinkColumns="0" > // 设置第一个column可收缩
10.
11.<TableRow>
12.
13.<TextView
14.
15.android:text="column1"
16.
17.android:padding="3dip"/>
18.
19.<TextView
20.
21.android:text="column2"
22.
23.android:padding="3dip"/>
24.
25.<TextView
26.
27.android:text="column3"
28.
29.android:padding="3dip"/>
30.
31.</TableRow>
32.
33.<TableRow>
34.
35.<TextView
36.
37.android:text="column11"
38.
39.android:visibility="invisible"/>
40.
41.<TextView
42.
43.android:text="左边的invisible"
44.
45.android:gravity="right"
46.
47.android:padding="3dip" />
48.
49.<Button
50.
51.android:id="@+id/go2"
52.
53.android:text="go2"
54.
55.android:padding="3dip" />
56.
57.<Button
58.
59.android:text="cancel"
60.
61.android:padding="3dip" />
62.
63.</TableRow>
64.
65.<View
66.
67.android:layout_height="2dip"
68.
69.android:background="#F00" />
70.
71.<TableRow>
72.
73.<TextView
74.
75.android:text="右边的cell empty" />
76.
77.<TextView
78.
79.android:layout_column="2"
80.
81.android:text="跳开empty cell"
82.
83.android:padding="3dip" />
84.
85.<TextView
86.
87.android:text="123456789"
88.
89.android:padding="3dip" />
90.
91.</TableRow>
92.
93.</TableLayout>
<?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:shrinkColumns="0" > // 设置第一个column可收缩
<TableRow>
<TextView
android:text="column1"
android:padding="3dip"/>
<TextView
android:text="column2"
android:padding="3dip"/>
<TextView
android:text="column3"
android:padding="3dip"/>
</TableRow>
<TableRow>
<TextView
android:text="column11"
android:visibility="invisible"/>
<TextView
android:text="左边的invisible"
android:gravity="right"
android:padding="3dip" />
<Button
android:id="@+id/go2"
android:text="go2"
android:padding="3dip" />
<Button
android:text="cancel"
android:padding="3dip" />
</TableRow>
<View
android:layout_height="2dip"
android:background="#F00" />
<TableRow>
<TextView
android:text="右边的cell empty" />
<TextView
android:layout_column="2"
android:text="跳开empty cell"
android:padding="3dip" />
<TextView
android:text="123456789"
android:padding="3dip" />
</TableRow>
</TableLayout>
可收缩column效果
现在可以看到第一个column为了让第4个column完整显示,而收缩得内容分为几行显示!
而可伸展column的效果就是在其他column可以完整显示时,该column就会伸展,占最多空间:
[html]
01.<?xml version="1.0" encoding="utf-8"?>
02.
03.<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
04.
05.android:layout_width="fill_parent"
06.
07.android:layout_height="fill_parent"
08.
09.android:stretchColumns="1"> // 设置第二个column可伸展
10.
11.
12.
13.<TableRow>
14.
15.<TextView
16.
17.android:text="column1"
18.
19.android:padding="3dip" />
20.
21.<TextView
22.
23.android:text="column2"
24.
25.android:gravity="right"
26.
27.android:padding="3dip" />
28.
29.<TextView
30.
31.android:text="column3"
32.
33.android:padding="3dip"/>
34.
35.</TableRow>
36.
37.
38.
39.<TableRow>
40.
41.<TextView
42.
43.android:text="column1"
44.
45.android:padding="3dip" />
46.
47.<TextView
48.
49.android:text="column2"
50.
51.android:gravity="right"
52.
53.android:padding="3dip" />
54.
55.<TextView
56.
57.android:text="column3"
58.
59.android:padding="3dip"/>
60.
61.</TableRow>
62.
63.</TableLayout>
<?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:
[html]
01.<?xml version="1.0" encoding="utf-8"?>
02.
03.<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
04.
05.android:layout_width="fill_parent"
06.
07.android:layout_height="fill_parent"
08.
09.android:stretchColumns="1">
10.
11.
12.
13.<TableRow>
14.
15.<TextView
16.
17.android:text="@string/table_layout_10_user"
18.
19.android:textStyle="bold"
20.
21.android:gravity="right"
22.
23.android:padding="3dip" />
24.
25.
26.
27.<EditText android:id="@+id/username"
28.
29.android:text="@string/table_layout_10_username_text"
30.
31.android:padding="3dip"
32.
33.android:scrollHorizontally="true" />
34.
35.</TableRow>
36.
37.
38.
39.<TableRow>
40.
41.<TextView
42.
43.android:text="@string/table_layout_10_password"
44.
45.android:textStyle="bold"
46.
47.android:gravity="right"
48.
49.android:padding="3dip" />
50.
51.
52.
53.<EditText android:id="@+id/password"
54.
55.android:text="@string/table_layout_10_password_text"
56.
57.android:password="true"
58.
59.android:padding="3dip"
60.
61.android:scrollHorizontally="true" />
62.
63.</TableRow>
64.
65.
66.
67.<TableRow
68.
69.android:gravity="right">
70.
71.
72.
73.<Button android:id="@+id/cancel"
74.
75.android:text="@string/table_layout_10_cancel" />
76.
77.
78.
79.<Button android:id="@+id/login"
80.
81.android:text="@string/table_layout_10_login" />
82.
83.</TableRow>
84.
85.</TableLayout>