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自己占用整行 --><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="独自一行的按钮1"/><!-- 这是第2行，先添加一个TableRow，并为TableRow添加三个Button，也就是此行包含三列 --><TableRow><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="普通按钮1"/><Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="被收缩的按钮1"/><Buttonandroid:id="@+id/button4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="被拉伸的按钮1"/></TableRow><!--这是此TableLayout的第3行，没有使用TableRow，直接添加一个Button，那么次Button自己占用整行 --><Buttonandroid:id="@+id/button5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="独自一行的按钮2"/><!-- 这是第4行，先添加一个TableRow，并为TableRow添加三个Button，也就是此行包含三列 --><TableRow><Buttonandroid:id="@+id/button6"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="普通按钮2"/><Buttonandroid:id="@+id/button7"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="被收缩的按钮2"/><Buttonandroid: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列所有单元格的宽度可以拉伸，以保证能完全填满表格空余空间--> <TableLayoutandroid:id="@+id/TableLayout1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:shrinkColumns="1"android:stretchColumns="2"><!--这是此TableLayout的第1行，没有使用TableRow，直接添加一个Button，那么次Button自己占用整行 --><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="独自一行的按钮1"/><!-- 这是第2行，先添加一个TableRow，并为TableRow添加三个Button，也就是此行包含三列 --><TableRow><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="普通按钮1"/><Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="被收缩的按钮1"/><Buttonandroid:id="@+id/button4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="被拉伸的按钮1"/></TableRow></TableLayout> <!--定义第2个TableLayout，有两行第1列所有单元格的宽度可以被收缩，以保证该表格能适应父容器的宽度第2列所有单元格的宽度可以拉伸，以保证能完全填满表格空余空间--> <TableLayoutandroid: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自己占用整行 --><Buttonandroid:id="@+id/button5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="独自一行的按钮2"/><!-- 这是第4行，先添加一个TableRow，并为TableRow添加三个Button，也就是此行包含三列 --><TableRow><Buttonandroid:id="@+id/button6"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="普通按钮2"/><Buttonandroid:id="@+id/button7"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="被收缩的按钮2"/><Buttonandroid: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，那么后面两行都看不到，因为是以水平方向排列的，后面两行显示在前两行的右边，看不到。

总结

以上是生活随笔为你收集整理的Android表格布局(Table Layout)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。