表格布局
表格布局由TableLayout所代表,TableLayout继承了LinearLayout,因此它的本质依然是线性布局管理器。表格布局采用行、列的形式来管理UI组件,TableLayout并不需要明确地声明包含多少行、多少列,而是通过添加TableRow、其他组件来控制表格的行数和列数。
每次向TableLayout中添加一个TableRow,该TableRow就是一个表格行,TableRow也是容器,因此它也可以不断地添加其他组件,每添加一个子组件该表格就增加一列。
如果直接向TableLayout中添加组件,那么这个组件将直接占用一行。
在表格布局中,列的宽度由该列中最宽的那个单元格决定,整个表格布局的宽度则取决于父容器的宽度(默认总是占满父容器本身)。
在表格布局中,列的宽度由该列中最宽的那个单元格决定,整个表格布局的宽度则取决于父容器的宽度(默认总是占满容器本身)。
在表格布局管理器中,可以为单元格设置如下三种行为方式。
- Shrinkable:如果某个列被设为Shrinkable,那么该列的所有单元格的宽度可以被收缩,以保证该表格能适应父容器的宽度。
- Stretchable:如果某个列被设为Stretchable,那么该列的所有单元格的宽度可以被拉伸,以保证组件能完全填满表格空余空间。
- Collapsed:如果某个列被设为Collapsed,那么该列的所有单元格会被隐藏。
TableLayout继承了LinearLayout,因此它完全可以支持LinearLayout所支持的全部XML属性,除此之外,TableLayout还支持如表2.6所示的XML属性。
表2.6 TableLayout的常用XML属性及相关方法
XML属性 | 相关方法 | 说 明 |
android:collapseColumns | setColumnCollapsed(int,boolean) | 设置需要被隐藏的列的序列号。多个列序号之间用逗号隔开 |
android:shrinkColumns | setShrinkAllColumns(boolean) | 设置允许被收缩的列的序列号。多个列序号之间用逗号隔开 |
android:stretchColumns | setStretchAllColumns(boolean) | 设置允许被拉伸的列的序列号,多个列序号之间用逗号隔开 |
实例:丰富的表格布局
下面的程序示范了如何使用TableLayout来管理组件的布局。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <!-- 定义第1个表格布局,指定第2列允许收缩,第3列允许拉伸 --> <TableLayout android:id="@+id/TableLayout01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:shrinkColumns="1" android:stretchColumns="2"> <!-- 直接添加按钮,它自己会占一行 --> <Button android:id="@+id/ok1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="独自一行的按钮" /> <!-- 添加一个表格行 --> <TableRow > <!-- 为该表格行添加三个按钮 --> <Button android:id="@+id/ok2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮" /> <Button android:id="@+id/ok3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="收缩的按钮" /> <Button android:id="@+id/ok4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="拉伸的按钮" /> </TableRow> </TableLayout> <!-- 定义第2个表格布局,指定第2列隐藏 --> <TableLayout android:id="@+id/TableLayout02" android:layout_width="fill_parent" android:layout_height="wrap_content" android:collapseColumns="1" > <Button android:id="@+id/ok5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮2" /> <!-- 添加一个表格行 --> <TableRow > <!-- 为该表格行添加三个按钮 --> <Button android:id="@+id/ok6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮3" /> <Button android:id="@+id/ok7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮4" /> <Button android:id="@+id/ok8" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮5" /> </TableRow> </TableLayout> <!-- 定义第3个表格布局,指定第2列和第三列可以被拉伸--> <TableLayout android:id="@+id/TableLayout03" android:layout_width="fill_parent" android:layout_height="wrap_content" android:stretchColumns="1,2" > <Button android:id="@+id/ok9" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="独自一行的按钮" /> <!-- 添加一个表格行 --> <TableRow > <!-- 为该表格行添加三个按钮 --> <Button android:id="@+id/ok10" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮" /> <Button android:id="@+id/ok11" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="拉伸的按钮" /> <Button android:id="@+id/ok12" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="拉伸的按钮" /> </TableRow> <TableRow > <!-- 为该表格行添加两个按钮 --> <Button android:id="@+id/ok13" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮" /> <Button android:id="@+id/ok14" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="拉伸的按钮" /> </TableRow> </TableLayout> </LinearLayout>
使用Activity来显示上面的界面布局将会看到如图2.11所示界面。