TableLayout表格布局

1.本节学习路线图

---

2.TableLayout的介绍

3.如何确定行数与列数

4.三个常用属性

属性使用示例：

①collapseColumns(隐藏列)

流程:在TableRow中定义5个按钮后,接着在最外层的TableLayout中添加以下属性: android:collapseColumns = "0,2"，就是隐藏第一与第三列,代码如下:

<TableLayout

    android:id="@+id/TableLayout2"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:collapseColumns="0,2" >

    <TableRow>

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="one" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="two" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="three" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="four" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="five" />

    </TableRow>

</TableLayout>

运行效果图：

②stretchColumns(拉伸列)

流程:在TableLayout中设置了四个按钮,接着在最外层的TableLayout中添加以下属性: android:stretchColumns = "1"

设置第二列为可拉伸列,让该列填满这一行所有的剩余空间,代码如下:

<TableLayout

    android:id="@+id/TableLayout2"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:stretchColumns="1" >

    <TableRow>

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="one" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="two" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="three" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="four" />

    </TableRow>

</TableLayout>

运行效果图：

③shrinkColumns(收缩列)

步骤:这里为了演示出效果,设置了5个按钮和一个文本框,在最外层的TableLayout中添加以下属性: android:shrinkColumns = "1"

设置第二个列为可收缩列,代码如下:

<TableLayout

    android:id="@+id/TableLayout2"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:shrinkColumns="1" >

    <TableRow>

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="one" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="two" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="three" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="four" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="five" />

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="文本XX" />

    </TableRow>

</TableLayout>

运行截图：

从图中我们可以看到two这个按钮被挤压成条条状,这个就是收缩,为了保证表格能适应 父容器的宽度！至于另外两个属性就不讲解了,用法和HTML相同！有兴趣的可以研究下！

---

5.使用实例

使用TableLayout来完成简单的登录界面,运行效果图如下:

流程解析: