Android学习笔记13：表格布局管理器TableLayout

  在Web开发中，我们会接触到形形色色的表格，HTML中的<table>元素为我们实现了表格的实现，可以说，表格是我们使用最多的元素。在Android中，我们可以使用TableLayout来实现表格布局。HTML的表格中使用<tr>来表示表格的一行，类似的，在TableLayout中，我们也有对应的TableRow来表示表格的一行。但在Android中就不往下区分表格单元了，也就是没有相应的<td>。
    下面首先来看一下TableLayout的文档：

    它是LinearLayout线性布局管理器的子类，其继承结构为：
java.lang.Object
   ↳ android.view.View
   ↳ android.view.ViewGroup
   ↳ android.widget.LinearLayout
   ↳ android.widget.TableLayout
    从文档中不难看出，要使用TableLayout就离不开TableRow，那么TableRow的文档如下：

    其也是LinearLayout的子类，继承结构如下：
java.lang.Object
   ↳ android.view.View
   ↳ android.view.ViewGroup
   ↳ android.widget.LinearLayout
   ↳ android.widget.TableRow
    在Eclipse中创建一个项目来说明TableLayout，首先使用XML来定义布局管理器：

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical" >  
6.     <TableRow>  
7.         <EditText  
8.             android:id="@+id/edit"  
9.             android:layout_width="wrap_content"  
10.             android:layout_height="wrap_content"  
11.             android:text="请输入内容" />  
12.         <Button  
13.             android:id="@+id/btn"  
14.             android:layout_width="wrap_content"  
15.             android:layout_height="wrap_content"  
16.             android:text="搜索" />  
17.     </TableRow>  
18.     <View  
19.         android:id="@+id/hr"  
20.         android:layout_height="2dp"  
21.         android:background="#FDF5E6" />  
22.     <TableRow>  
23.         <TextView  
24.             android:id="@+id/label"  
25.             android:layout_width="wrap_content"  
26.             android:layout_height="wrap_content"  
27.             android:text="请选择您的性别" />  
28.         <RadioGroup  
29.             android:id="@+id/gender"  
30.             android:layout_width="wrap_content"  
31.             android:layout_height="wrap_content"  
32.             android:checkedButton="@+id/male"  
33.             android:orientation="vertical" >  
34.             <RadioButton  
35.                 android:id="@+id/male"  
36.                 android:text="男" />  
37.             <RadioButton  
38.                 android:id="@+id/female"  
39.                 android:text="女" />  
40.         </RadioGroup>  
41.     </TableRow>  
42. </TableLayout>  

    我们创建了一个表格布局管理器，在其中创建了两行，也就是两个TableRow元素。在第一行中，我们放置了两个组件，一个是文本输入组件，给出默认提示文字。第二个是一个按钮，构成一个搜索框。
    第二个TableRow中我们放置了一个提示文本和一个单选按钮，那么创建一个TextView和一个RadioGroup就行了。在RadioGroup中我们设置RadioButton是纵向排列的，然后默认选中一个。
    在两个TableRow中间，我们放置了一个<View>元素，可以表示任意的组件，这里我们放置一个水平线，就像HTML中的<hr>元素效果，设置宽度是2dp，颜色为#FDF5E6。
    运行这段程序，我们就得到如下的显示效果：

    我们在Web开发中使用表格最多的应用就是数据显示了，那么在Android中也会需要用表格来显示数据，下面我们就来看看如何使用TableLayout和TableRow来显示数据，再创建一个布局管理器文件（在layout下创建datadisplay.xml），

    那么在R.java中我们就会得到对应的资源：

Java代码  

1. package org.pioneer;  
2. public final class R {  
3.     public static final class attr {  
4.     }  
5.     public static final class drawable {  
6.         public static final int ic_launcher=0x7f020000;  
7.     }  
8.     public static final class id {  
9.         public static final int btn=0x7f050001;  
10.         public static final int edit=0x7f050000;  
11.         public static final int female=0x7f050006;  
12.         public static final int gender=0x7f050004;  
13.         public static final int hr=0x7f050002;  
14.         public static final int label=0x7f050003;  
15.         public static final int male=0x7f050005;  
16.     }  
17.     public static final class layout {  
18.         public static final int datadisplay=0x7f030000;  
19.         public static final int main=0x7f030001;  
20.     }  
21.     public static final class string {  
22.         public static final int app_name=0x7f040001;  
23.         public static final int hello=0x7f040000;  
24.     }  
25. }  

    下面来编写这个布局文件，其内容如下：

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.     <TableRow>  
6.         <TextView  
7.             android:layout_column="0"  
8.             android:gravity="center_horizontal"  
9.             android:padding="10dp"  
10.             android:text="序号" />  
11.         <TextView  
12.             android:layout_column="1"  
13.             android:gravity="center_horizontal"  
14.             android:padding="10dp"  
15.             android:text="姓名" />  
16.         <TextView  
17.             android:layout_column="2"  
18.             android:gravity="center_horizontal"  
19.             android:padding="10dp"  
20.             android:text="城市" />  
21.         <TextView  
22.             android:layout_column="3"  
23.             android:gravity="center_horizontal"  
24.             android:padding="10dp"  
25.             android:text="性别" />  
26.     </TableRow>  
27. </TableLayout>  

    这里我们仅仅定义出表格的表头，有4列显示内容，那么layout_column表示的就是该列的编号，可以看出，这个编号是从0开始的，同时这是显示样式的水平居中显示，并且都有10dp的间距。修改Activity程序中的布局管理器文件：

Java代码  

1. super.setContentView(R.layout.datadisplay);  

    运行程序，此时得到如下显示效果：

    那么可以看到，表头我们就做出来了，下面继续设置内容：

Xml代码  

1. <View  
2.     android:layout_height="2dp"  
3.     android:background="#FDF5E6" />  
4. <TableRow>  
5.     <TextView  
6.         android:layout_column="0"  
7.         android:gravity="center_horizontal"  
8.         android:padding="5dp"  
9.         android:text="001" />  
10.     <TextView  
11.         android:layout_column="1"  
12.         android:gravity="center_horizontal"  
13.         android:padding="10dp"  
14.         android:text="Sarin" />  
15.     <TextView  
16.         android:layout_column="2"  
17.         android:gravity="center_horizontal"  
18.         android:padding="10dp"  
19.         android:text="辽宁省大连市高新园区七贤岭汇贤园七号腾飞软件园二号楼" />  
20.     <TextView  
21.         android:layout_column="3"  
22.         android:gravity="center_horizontal"  
23.         android:padding="10dp"  
24.         android:text="男" />  
25. </TableRow>  
26. <TableRow>  
27.     <TextView  
28.         android:layout_column="0"  
29.         android:gravity="center_horizontal"  
30.         android:padding="5dp"  
31.         android:text="002" />  
32.     <TextView  
33.         android:layout_column="1"  
34.         android:gravity="center_horizontal"  
35.         android:padding="10dp"  
36.         android:text="Tom" />  
37.     <TextView  
38.         android:layout_column="2"  
39.         android:gravity="center_horizontal"  
40.         android:padding="10dp"  
41.         android:text="北京市" />  
42.     <TextView  
43.         android:layout_column="3"  
44.         android:gravity="center_horizontal"  
45.         android:padding="10dp"  
46.         android:text="男" />  
47. </TableRow>  

    我们设置了一条水平横线，下面是两条数据的显示，那么运行程序，我们会看到这样的显示效果：

    显示不下不要紧，我们切换到横屏模式下再看：

    但是问题仍然存在，因为某一个文本太长了，并且我们设置了水平居中显示的效果，所以后面的内容都显示不下消失了，显然这么显示不合理，需要列可以折行显示内容，设置如下内容：

Xml代码  

1. 下内容：  
2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"   
5.     android:shrinkColumns="2">  

    在TableLayout元素上我们设置一个shrinkColumns属性，就是设置哪一列可以折行显示，这里是第三列需要折行显示，设置完成，显示效果如下：

    我们就得到了预期的效果。表格布局中还可以设置隐藏列，那么需要在TableLayout上设置如下属性：

Xml代码  

1. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="match_parent"  
3.     android:layout_height="match_parent"   
4.     android:shrinkColumns="2"  
5.     android:collapseColumns="0,3">  

    这里我们设置第一列和第四列为不显示状态，那么就得到如下显示效果：

    和前面两个布局管理器类似，我们也可以通过程序来控制表格布局管理器。不难想到这里我们需要四个类来完成，分别是TableLayout，TableLayout.LayoutParams，TableRow，TableRow.LayoutParams
    下面来看一下TableLayout.LayoutParams的文档：

    可以看出TableLayout.LayoutParams继承自LinearLayout.LayoutParams，其继承结构如下：
java.lang.Object
   ↳ android.view.ViewGroup.LayoutParams
   ↳ android.view.ViewGroup.MarginLayoutParams
   ↳ android.widget.LinearLayout.LayoutParams
   ↳ android.widget.TableLayout.LayoutParams
    下面是TableRow.LayoutParams，其实它们都是类似的：

    它的继承结构为：
java.lang.Object
   ↳ android.view.ViewGroup.LayoutParams
   ↳ android.view.ViewGroup.MarginLayoutParams
   ↳ android.widget.LinearLayout.LayoutParams
   ↳ android.widget.TableRow.LayoutParams
    下面我将在XML布局管理文件中配置的数据表格用程序来进行编写，那么就需要准备数据，表格数据可以看作是二维表，那么很自然想到，在数据量不大时可以使用而为数组来表示，其代码如下：

Java代码  

1. package org.pioneer;  
2. import android.app.Activity;  
3. import android.os.Bundle;  
4. import android.view.ViewGroup;  
5. import android.widget.TableLayout;  
6. import android.widget.TableRow;  
7. import android.widget.TextView;  
8. public class TableLayoutDemoActivity extends Activity {  
9.     private String tableData[][] = new String[][] { { "序号", "姓名", "地址", "性别" },  
10.             { "001", "Sarin", "辽宁省大连市高新园区七贤岭汇贤园七号腾飞软件园二号楼", "男" },  
11.             { "002", "Tom", "北京市", "男" } };// 定义显示的数据  
12.     @Override  
13.     public void onCreate(Bundle savedInstanceState) {  
14.         super.onCreate(savedInstanceState);  
15.         TableLayout layout = new TableLayout(this);// 定义布局管理器  
16.         TableLayout.LayoutParams layoutParams = new TableLayout.LayoutParams(  
17.                 ViewGroup.LayoutParams.FILL_PARENT,  
18.                 ViewGroup.LayoutParams.FILL_PARENT);// 定义布局管理器参数  
19.         layout.setBackgroundResource(R.drawable.ic_launcher);// 设置背景图片  
20.         for (int i = 0; i < tableData.length; i++) {  
21.             TableRow row = new TableRow(this);// 定义TableRow  
22.             for (int j = 0; j < tableData[i].length; j++) {  
23.                 TextView text = new TextView(this);// 定义TextView组件  
24.                 text.setText(tableData[i][j]);// 设置TextView的显示文字  
25.                 row.addView(text, j);// 向TableRow中添加TextView组件  
26.             }  
27.             layout.addView(row);// 向布局管理器中添加表格行  
28.         }  
29.         super.setContentView(layout, layoutParams);// 设置布局管理器  
30.     }  
31. }  

    对于二维数组的遍历必然是嵌套的循环来进行，运行程序，我们得到如下效果：

    可以看到，我们之前设置的显示效果都不存在了，当然这可以通过代码继续设置样式，但该代码已经相当的复杂了，如果继续修改程序，那程序必然显得十分臃肿。所以对复杂布局我们采用XML文件的配置方式来进行是比较好的方法。