Android五大布局之表格布局TableLayout使用

TableLayout 又称为表格布局，以行列的方式管理组件。

TableLayout 布局没有边框，可以由多个 TableRow 对象或者其他组件组成，每个 TableRow 可以由多个单元格组成，每个单元格是一个 View。TableRow 不需要设置宽度 layout_width 和高度 layout_height，其宽度一定是 match_parent，即自动填满父容器，高度一定为 wrap_content，即根据内容改变高度。但对于 TableRow 中的其他组件来说，是可以设置宽度和高度的，只是必须是 wrap_content 或者 fill_parent。

实例 TableLayoutDemo 演示了使用 TableLayout 制作 UI 的方法，效果如图 1 所示。

图 1  TableLayout 布局效果

实例 TableLayoutDemo 中 strings.xml 的代码如下：

1. <?xml version="1.0" encoding="UTF-8"?>

3. <resources>

4. <string name="hello">Hello World,TableLayout!</string>

5. <string name="app_name">TableLayoutDemo</string>

6. <string name="column1">第一行第一列</string>

7. <string name="column2">第一行第二列</string>

8. <string name="column3">第一行第三列</string>

9. <string name="empty">最左面的可伸缩TextView</string>

10. <string name="row2column2">第二行第三列</string>

11. <string name="row2column3">End</string>

12. <string name="merger">合并三个单元格</string>

13. </resources>

实例 TableLayoutDemo 中的布局文件 main.xml 的代码如下：

1. <?xml version="1.0" encoding="utf-8"?>

3. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

4. android:layout_width="fill_parent"

5. android:layout_height="fill_parent">

7. <TableRow>

9. <TextView android:text="@string/column1" />

11. <TextView android:text="@string/column2" />

13. <TextView android:text="@string/column3" />

14. </TableRow>

16. <TextView

17. android:layout_height="wrap_content"

18. android:background="#fff000"

19. android:gravity="center"

20. android:text="单独的一个TextView" />

22. <TableRow>

24. <Button

25. android:layout_span="3"

26. android:gravity="center_horizontal"

27. android:text="@string/merger"

28. android:textColor="#f00" />

29. </TableRow>

31. <TextView

32. android:layout_height="wrap_content"

33. android:background="#fa05"

34. android:text="单独的一个TextView" />

36. <TableRow android:layout_height="wrap_content">

38. <TextView android:text="@string/empty" />

40. <Button android:text="@string/row2column2" />

42. <Button android:text="string/row2column3" />

43. </TableRow>

44. </TableLayout>

布局文件 main.xml 在 TableLayout 布局内添加了两个 TableRow 和两个 TextView，形成了如图 6 所示的效果。从运行效果看，第一行和第五行都没能完全显示。

TableLayout 布局提供了几个特殊属性，可以实现以下特殊效果。

• android:shrinkColumns 属性：该属性用于设置可收缩的列。当可收缩的列太宽以至于布局内的其他列不能完全显示时，可收缩列会纵向延伸，压缩自己所占的空间，以便于其他列可以完全显示出来。android:shrinkColumns="1" 表示将第 2 列设置为可收缩列，列数从 0 开始。

• android:stretchColumns 属性：该属性用于设置可伸展的列。可伸展的列会自动扩展长度以填满所有可用空间。android:stretchColumns="1" 表示将第 2 列设置为可伸展的列。

• android:collapseColumns 属性：该属性用于设置隐藏列。android:collapseColumns="1" 表示将第 2 列隐藏不显示。

在 <TableLayout> 标签添加属性 android:shrinkColumns="0"，再次运行，效果如图 2 所示，可以看出第一行和第五行都完全显示出来了。

图 2  完全显示的效果