第七讲：用户界面 View（三）

墨蓝 2022-08-04 08:36 155阅读 0赞

5、表格布局 TableLayout

表格布局TableLayout以行列的形式管理子元素，每一行是一个TableRow布局对象，当然也可以是普通的View对象，TableRow离每放一个元素就是一列，总列数由列数最多的那一行决定。

我们看一个例子：

1.  <?xml version=”1.0″ encoding=”utf-8″?>  
    
2.  <TableLayout android:id=”@+id/TableLayout01″  
    
3.  android:layout\_width=”fill\_parent” android:layout\_height=”fill\_parent”  
    
4.  android:stretchColumns=”0″ xmlns:android=”http://schemas.android.com/apk/res/android”><TableRow android:layout\_width=”fill\_parent”  
    
5.  android:layout\_height=”20dip”>  
    
6.  <TextView android:text=”色彩透明度测试” android:textSize=”18dip”  
    
7.  android:layout\_span=”2″ 合并两列  
    
8.  android:layout\_gravity=”center”  
    
9.  android:layout\_width=”fill\_parent” android:layout\_height=”fill\_parent”>  
    
10. </TextView>

复制代码

再看一下显示效果：

[![132901cg0mwc8r2w2goco8.png][]][132901cg0mwc8r2w2goco8.png 1]

其中 android:stretchColumns=”0″ 作用是让第一列可以扩展到所有可用空间；下面我们讲一下TableLayout几个重要的属性：

collapseColumns – 设置隐藏那些列，列ID从0开始，多个列的话用”,”分隔  
stretchColumns – 设置自动伸展那些列，列ID从0开始，多个列的话用”,”分隔  
shrinkColumns -设置自动收缩那些列，列ID从0开始，多个列的话用”,”分隔

可以用”\*”来表示所有列，同一列可以同时设置为shrinkable和stretchable。

我们再举一个例子来看一下：

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″>   第二列自动伸展<TableRow>  
    
6.  <TextView  
    
7.  android:layout\_column=”1″     我是第二列  
    
8.  android:text=”打开…”  
    
9.  android:padding=”3dip” /> 元素内容与边界之间保留3dip的距离  
    
10. <TextView  
    
11. android:text=”Ctrl-O”  
    
12. android:gravity=”right”  
    
13. android:padding=”3dip” />  
    
14. </TableRow><TableRow>  
    
15. <TextView  
    
16. android:layout\_column=”1″  
    
17. android:text=”保存…”  
    
18. android:padding=”3dip” />  
    
19. <TextView  
    
20. android:text=”Ctrl-S”  
    
21. android:gravity=”right” 元素本身的内容向右对齐  
    
22. android:padding=”3dip” />  
    
23. </TableRow><TableRow>  
    
24. <TextView  
    
25. android:layout\_column=”1″  
    
26. android:text=”另存为…”  
    
27. android:padding=”3dip” />  
    
28. <TextView  
    
29. android:text=”Ctrl-Shift-S”  
    
30. android:gravity=”right”  
    
31. android:padding=”3dip” />  
    
32. </TableRow><View  
    
33. android:layout\_height=”2dip”  
    
34. android:background=”\#FF909090″ /><TableRow>  
    
35. <TextView  
    
36. android:text=”X”  
    
37. android:padding=”3dip” />  
    
38. <TextView  
    
39. android:text=”导入…”  
    
40. android:padding=”3dip” />  
    
41. </TableRow><TableRow>  
    
42. <TextView  
    
43. android:text=”X”  
    
44. android:padding=”3dip” />  
    
45. <TextView  
    
46. android:text=”导出…”  
    
47. android:padding=”3dip” />  
    
48. <TextView  
    
49. android:text=”Ctrl-E”  
    
50. android:gravity=”right”  
    
51. android:padding=”3dip” />  
    
52. </TableRow><View  
    
53. android:layout\_height=”2dip”  
    
54. android:background=”\#FF909090″ /><TableRow>  
    
55. <TextView  
    
56. android:layout\_column=”1″  
    
57. android:text=”退出”  
    
58. android:padding=”3dip” />  
    
59. </TableRow>  
    
60. </TableLayout>

复制代码

下面是显示效果：

[![132836kaholhvhsl6nv16o.png][]][132836kaholhvhsl6nv16o.png 1]

我加粗显示的地方都有解释，大家可以留意一下。

Tip：TableRow也是一个Layout，里面的元素会水平排列，如果TableRow的父元素不是TableLayout的话，那么他会表现的像一个LinearLayout。

[132901cg0mwc8r2w2goco8.png]: http://www.apkbus.com/data/attachment/forum/201104/23/132901cg0mwc8r2w2goco8.png
[132901cg0mwc8r2w2goco8.png 1]: http://android.yaohuiji.com/wp-content/uploads/2010/07/image44.png
[132836kaholhvhsl6nv16o.png]: http://www.apkbus.com/data/attachment/forum/201104/23/132836kaholhvhsl6nv16o.png
[132836kaholhvhsl6nv16o.png 1]: http://android.yaohuiji.com/wp-content/uploads/2010/07/image45.png