Android开发中TableLayout表格布局（一）

一、引言

       在移动端应用程序开发中，常常会使用到表格布局，iOS和Android开发框架中都提供了独立的表格视图控件供开发者使用，例如iOS中的UITableView、UICollectionView，Android中的ListView、GridView等。除了独立的视图控件外，Android中还提供了一个布局容器类TableLayout，使用其也可以进行方便的表格布局。

       前边博客有介绍过关于LinearLayout线性布局的相关内容，LinearLayout只能进行水平或者垂直方向上的排列布局，使用LinearLayout的布局嵌套，实际上也可以实现表格布局的样式。实际上，TableLayout就是采用这样的原理，TableLayout继承于LinearLayout，其中每个视图元素作为一行，同时Android中还提供了一个TableRow类，这个类同样继承自LinearLayout，其中每个视图元素作为当前行中的一列，结合使用TableLayout与TableRow，就实现了行列的表格布局。

二、关于TableRow

       TableRow可以简单理解为TableLayout布局中的一行，当然，TableLayout中也可以直接添加任意的View视图，但是默认添加的View视图将独占一行。TableRow中可以添加其他视图，每个视图被作为一列处理，通过TableRow的内部类LayoutParams来设置TableRow内部视图的布局方式，其中主要可以通过设置宽高或者设置权重来定制每列视图元素的尺寸，例如：

TableLayout tableLayout = new TableLayout(this);

//创建行 第一行用单个元素

TextView textView = new TextView(this);

textView.setText("1000");

textView.setTextSize(20);

textView.setTextAlignment(View.TEXT_ALIGNMENT_VIEW_END);

tableLayout.addView(textView);

//第二行使用TableRow

TableRow tableRow1 = new TableRow(this);

//设置本行中每一列的权重和

tableRow1.setWeightSum(10);

Button button11 = new Button(this);

button11.setText("AC");

//设置固定宽高

TableRow.LayoutParams layoutParams1 = new TableRow.LayoutParams(300,200);

button11.setLayoutParams(layoutParams1);

tableRow1.addView(button11);

Button button12 = new Button(this);

//通过权重设置列的宽度 占正常列宽的一半

TableRow.LayoutParams layoutParams2 = new TableRow.LayoutParams(0,200,5);

button12.setLayoutParams(layoutParams2);

button12.setText("+/-");

tableRow1.addView(button12);

Button button13 = new Button(this);

button13.setText("%");

tableRow1.addView(button13);

Button button14 = new Button(this);

button14.setText("÷");

tableRow1.addView(button14);

tableLayout.addView(tableRow1);

上面代码向TableRow中添加了4个视图，默认情况下会生成四列，setWeightSum()方法用于设置每列的权重和，需要注意，它作用的对象是每一列元素，而不是整行。上面的代码效果如下：

默认的列宽是评分整个行宽，可以通过指定宽度或者权重来修改特定列的列宽。

       还有一点需要注意，如果一个TableLayout布局中多个TableRow，则表格的列数会以最多列的一行为准，例如在添加一行TableRow，而其中只有一列，则其依然会预留4列的位置，示例如下：

TableRow tableRow2 = new TableRow(this);

Button button = new Button(this);

button.setText("跳过");

tableRow2.addView(button);

tableLayout.addView(tableRow2);

效果如下：

也可以设置跳过某列进行布局，或者进行列的合并，示例如下：

TableRow tableRow2 = new TableRow(this);

Button button = new Button(this);

button.setText("跳过");

TableRow.LayoutParams layoutParams21 = new TableRow.LayoutParams();

//从第2列开始

layoutParams21.column = 1;

//合并3列

layoutParams21.span = 3;

button.setLayoutParams(layoutParams21);

tableRow2.addView(button);

tableLayout.addView(tableRow2);