TableLayout的基本使用方式

1、TableLayout(表格布局)的样式，就像是一张表格。每个TableLayout，都由多个TableRow组成，每个TableRow就是一行，有几个TableRow就有几行。TableLayout不会显示行号和列号，也没有分割线，其行数和列数都可以进行操作。
下面是 3 (行) x 3(列) 的TableLayout，其xml布局文件table_relative01.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TableRow >
        <Button
            android:id="@+id/button01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮1"      
        ></Button>
        <Button
            android:id="@+id/button02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮2"      
        ></Button>
        <Button
            android:id="@+id/button03"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮3"      
        ></Button>
    </TableRow>

    <TableRow >
        <Button
            android:id="@+id/button04"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮4"      
        ></Button>
        <Button
            android:id="@+id/button05"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮5"      
        ></Button>
        <Button
            android:id="@+id/button06"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮6"      
        ></Button>
    </TableRow>

    <TableRow >
        <Button
            android:id="@+id/button07"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮7"      
        ></Button>
        <Button
            android:id="@+id/button08"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮8"      
        ></Button>
        <Button
            android:id="@+id/button09"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮9"      
        ></Button>
    </TableRow>    
</TableLayout>

实际效果图如下：

该布局xml文件，有三行，每一行有3个Button按钮，是3 x 3的TableLayout。

2、TableLayout的android:shrinkColumns属性，当TableRow里边的空间布满布局的时候，指定列自动延伸以填充可用部分。当TableRow里边的控件还没有布满布局时，android:shrinkColumns不起作用。
下面的布局文件table_relative02_1.xml，演示了android:shrinkColumns属性的使用：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:shrinkColumns="2"
    >
    <TableRow >
        <Button
            android:id="@+id/button01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮1" 
        ></Button>
       <!-- android:text="按钮1AAAAAAAAAAAAAAA" --> 
        <Button
            android:id="@+id/button02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮2"      
        ></Button>
        <!-- android:text="按钮2AAAAAAAAAAAAAAA" --> 
        <Button
            android:id="@+id/button03"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮3AAAAAAAAAAAAAAA"      
        ></Button>
    </TableRow>

    <TableRow >
        <Button
            android:id="@+id/button04"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮4"      
        ></Button>
        <Button
            android:id="@+id/button05"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮5"      
        ></Button>
        <Button
            android:id="@+id/button06"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮6"      
        ></Button>
    </TableRow>

    <TableRow >
        <Button
            android:id="@+id/button07"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮7"      
        ></Button>
        <Button
            android:id="@+id/button08"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮8"      
        ></Button>
        <Button
            android:id="@+id/button09"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮9"      
        ></Button>
    </TableRow>    
</TableLayout>

实际效果图如下：

从上面的实际效果图片可以看到，当TableLayout设置了android:shrinkColumns属性，则在TableRow中的控件如果超长的话，设置指定的列为可收缩的列。当可收缩的列太宽(内容过多)不会被挤出屏幕。当需要设置多列为可收缩时，将列序号用逗号隔开。

下面的布局文件table_relative02_2.xml，演示了没有设置android:shrinkColumns属性，则在TableRow中的控件超长，也不会自动延伸以填充可用部分。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <TableRow >
        <Button
            android:id="@+id/button01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮1" 
        ></Button>
       <!-- android:text="按钮1AAAAAAAAAAAAAAA" --> 
        <Button
            android:id="@+id/button02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮2AAAAAAAAAAAAAAA"      
        ></Button>
        <!-- android:text="按钮2" --> 
        <Button
            android:id="@+id/button03"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮3AAAAAAAAAAAAAAA"      
        ></Button>
    </TableRow>

    <TableRow >
        <Button
            android:id="@+id/button04"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮4"      
        ></Button>
        <Button
            android:id="@+id/button05"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮5"      
        ></Button>
        <Button
            android:id="@+id/button06"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮6"      
        ></Button>
    </TableRow>

    <TableRow >
        <Button
            android:id="@+id/button07"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮7"      
        ></Button>
        <Button
            android:id="@+id/button08"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮8"      
        ></Button>
        <Button
            android:id="@+id/button09"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮9"      
        ></Button>
    </TableRow>    
</TableLayout>

实际效果图如下：

3-1、TableLayout的android:stretchColumns属性，用于指定列对空白部分进行填充。
下面的布局文件table_relative03_1.xml，演示了android:stretchColumns属性的使用：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1"
    >
    <TableRow >
        <Button
            android:id="@+id/button01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮1" 
        ></Button>
        <Button
            android:id="@+id/button02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮2"      
        ></Button>
        <!-- android:text="按钮2" --> 
        <Button
            android:id="@+id/button03"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮3"      
        ></Button>
    </TableRow>

    <TableRow >
        <Button
            android:id="@+id/button04"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮4"      
        ></Button>
        <Button
            android:id="@+id/button05"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮5"      
        ></Button>
        <Button
            android:id="@+id/button06"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮6"      
        ></Button>
    </TableRow>

    <TableRow >
        <Button
            android:id="@+id/button07"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮7"      
        ></Button>
        <Button
            android:id="@+id/button08"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮8"      
        ></Button>
        <Button
            android:id="@+id/button09"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮9"      
        ></Button>
    </TableRow>    
</TableLayout>

实际效果图如下：

3-2、android:stretchColumns属性，若有多列需要设置为可伸展，请用逗号将需要伸展的列序号隔开。
下面的布局文件table_relative03_2.xml，演示了多行android:stretchColumns属性的使用：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="0,2"
    >
    <TableRow >
        <Button
            android:id="@+id/button01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮1" 
        ></Button>
        <Button
            android:id="@+id/button02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮2"      
        ></Button>
        <!-- android:text="按钮2" --> 
        <Button
            android:id="@+id/button03"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮3"      
        ></Button>
    </TableRow>

    <TableRow >
        <Button
            android:id="@+id/button04"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮4"      
        ></Button>
        <Button
            android:id="@+id/button05"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮5"      
        ></Button>
        <Button
            android:id="@+id/button06"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮6"      
        ></Button>
    </TableRow>

    <TableRow >
        <Button
            android:id="@+id/button07"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮7"      
        ></Button>
        <Button
            android:id="@+id/button08"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮8"      
        ></Button>
        <Button
            android:id="@+id/button09"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮9"      
        ></Button>
    </TableRow>    
</TableLayout>

实际效果图如下：

4、TableLayout的android:collapseColumns属性，用于隐藏指定的列，若有多列需要隐藏，请用逗号将需要隐藏的列序号隔开。。
下面的布局文件table_relative04.xml，演示了android:collapseColumns属性的使用：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:collapseColumns="1"
    >
    <TableRow >
        <Button
            android:id="@+id/button01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮1" 
        ></Button>
        <Button
            android:id="@+id/button02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮2"      
        ></Button>
        <!-- android:text="按钮2" --> 
        <Button
            android:id="@+id/button03"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮3"      
        ></Button>
    </TableRow>

    <TableRow >
        <Button
            android:id="@+id/button04"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮4"      
        ></Button>
        <Button
            android:id="@+id/button05"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮5"      
        ></Button>
        <Button
            android:id="@+id/button06"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮6"      
        ></Button>
    </TableRow>

    <TableRow >
        <Button
            android:id="@+id/button07"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮7"      
        ></Button>
        <Button
            android:id="@+id/button08"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮8"      
        ></Button>
        <Button
            android:id="@+id/button09"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮9"      
        ></Button>
    </TableRow>    
</TableLayout>

实际效果图如下：

5、TableLayout的android:layout_span属性，设置组件显示所占用的列数。
下面的布局文件table_relative05.xml，演示了android:layout_span*属性的使用：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <TableRow >
        <Button
            android:id="@+id/button01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="3"
            android:text="按钮1" 
        ></Button>
        <Button
            android:id="@+id/button02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮2"      
        ></Button>
        <!-- android:text="按钮2" --> 
        <Button
            android:id="@+id/button03"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮3"      
        ></Button>
    </TableRow>

    <TableRow >
        <Button
            android:id="@+id/button04"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮4"      
        ></Button>
        <Button
            android:id="@+id/button05"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="3"
            android:text="按钮5"      
        ></Button>
        <Button
            android:id="@+id/button06"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮6"      
        ></Button>
    </TableRow>

    <TableRow >
        <Button
            android:id="@+id/button07"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮7"      
        ></Button>
        <Button
            android:id="@+id/button08"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮8"      
        ></Button>
        <Button
            android:id="@+id/button09"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮9"      
        ></Button>
    </TableRow>    
</TableLayout>

实际效果图如下：

6、TableLayout的android:layout_column属性，设置组件所在列数。
下面的布局文件table_relative06.xml，显示了android:layout_column属性的使用：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <TableRow >
        <Button
            android:id="@+id/button01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮1" 
        ></Button>
        <Button
            android:id="@+id/button02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="按钮2"      
        ></Button>
        <!-- android:text="按钮2" --> 
        <Button
            android:id="@+id/button03"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮3"      
        ></Button>
    </TableRow>

    <TableRow >
        <Button
            android:id="@+id/button04"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="按钮4"      
        ></Button>
        <Button
            android:id="@+id/button05"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮5"      
        ></Button>
        <Button
            android:id="@+id/button06"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮6"      
        ></Button>
    </TableRow>

    <TableRow >
        <Button
            android:id="@+id/button07"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮7"      
        ></Button>
        <Button
            android:id="@+id/button08"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮8"      
        ></Button>
        <Button
            android:id="@+id/button09"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮9"      
        ></Button>
    </TableRow>    
</TableLayout>

实际效果图如下：