Android表格布局(Table Layout)

Android表格布局(Table Layout)

先来看布局管理器之间继承关系图：

图1

可知TableLayout继承了LinearLayout，所以表格布局本质上依然是线性管理器。

表格布局采用行、列的形式来管理组件，它并不需要明确地声明包含了多少行、多少列，而是通过添加TableRow、其他组件来控制表格的行数和列数。

每向TableLayout添加一个TableRow，该TableRow就是一个表格行，TableRow也是容器，因此它也可以不断地添加组件，每添加一个子组件该表格就添加一列。

TableLayout一般以下面两种方式实现：

(1)  自己作为最顶层父容器

<!--定义一个TableLayout，有两行
   第1列所有单元格的宽度可以被收缩，以保证该表格能适应父容器的宽度
   第2列所有单元格的宽度可以拉伸，以保证能完全填满表格空余空间-->
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/TableLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:shrinkColumns="1"
    android:stretchColumns="2">

   <!--这是此TableLayout的第1行，没有使用TableRow，直接添加一个Button，那么次Button自己占用整行 -->
   <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="独自一行的按钮1"/>

   <!-- 这是第2行，先添加一个TableRow，并为TableRow添加三个Button，也就是此行包含三列 -->
   <TableRow>
        <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="普通按钮1"/>

        <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被收缩的按钮1"/>

        <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被拉伸的按钮1"/>
   </TableRow>

   <!--这是此TableLayout的第3行，没有使用TableRow，直接添加一个Button，那么次Button自己占用整行 -->
   <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="独自一行的按钮2"/>

   <!-- 这是第4行，先添加一个TableRow，并为TableRow添加三个Button，也就是此行包含三列 -->
   <TableRow>
        <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="普通按钮2"/>

        <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被收缩的按钮2"/>

        <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被拉伸的按钮2"/>
   </TableRow>

</TableLayout>

效果如下：

图2

这里只有一个TableLayout，如果我们想单独控制地4行，比如想把“普通按钮2”隐藏，也就是增加android:collapseColumns="0"，这样会把“普通按钮1”，这一列也隐藏了，如下图：

图3

但如果要实现只“普通按钮2”这列，我们来看下面的实现

(2)  LinearLayout作为TableLayout的容器

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">-->

<!--定义第1个TableLayout，有两行
   第1列所有单元格的宽度可以被收缩，以保证该表格能适应父容器的宽度
   第2列所有单元格的宽度可以拉伸，以保证能完全填满表格空余空间-->
<TableLayout
    android:id="@+id/TableLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:shrinkColumns="1"
    android:stretchColumns="2">

   <!--这是此TableLayout的第1行，没有使用TableRow，直接添加一个Button，那么次Button自己占用整行 -->
   <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="独自一行的按钮1"/>

   <!-- 这是第2行，先添加一个TableRow，并为TableRow添加三个Button，也就是此行包含三列 -->
   <TableRow>
        <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="普通按钮1"/>

        <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被收缩的按钮1"/>

        <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被拉伸的按钮1"/>
   </TableRow>

</TableLayout>
<!--定义第2个TableLayout，有两行
   第1列所有单元格的宽度可以被收缩，以保证该表格能适应父容器的宽度
   第2列所有单元格的宽度可以拉伸，以保证能完全填满表格空余空间-->
<TableLayout
    android:id="@+id/TableLayout2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:collapseColumns="0"
    android:shrinkColumns="1"
    android:stretchColumns="2">

   <!--这是此TableLayout的第3行，没有使用TableRow，直接添加一个Button，那么次Button自己占用整行 -->
   <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="独自一行的按钮2"/>

   <!-- 这是第4行，先添加一个TableRow，并为TableRow添加三个Button，也就是此行包含三列 -->
   <TableRow>
        <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="普通按钮2"/>

        <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被收缩的按钮2"/>

        <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被拉伸的按钮2"/>
   </TableRow>

   </TableLayout>

</LinearLayout>

效果如下：

图4

通过在第2个TableLayout中增加android:collapseColumns="0"实现，这里需要主要的是LinearLayout的android:orientation属性值的设置，如果没有这一项或是其值为horizontal，那么后面两行都看不到，因为是以水平方向排列的，后面两行显示在前两行的右边，看不到。