Android的一个TableLayout的布局例子分析

这里明显是由5个view来完成的，最上面的4个可以看成是2X2的一个布局

import android.app.Activity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.EditText;
import android.widget.TableLayout;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
public class ex08 extends Activity implements OnClickListener {
private final int WC = ViewGroup.LayoutParams.WRAP_CONTENT;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
RelativeLayout r_layout = new RelativeLayout(this);
setContentView(r_layout);
TableLayout tableLayout = new TableLayout(this);
r_layout.addView(tableLayout, new RelativeLayout.LayoutParams(WC, WC));
tableLayout.setId(1);
TableRow tableRow1 = new TableRow(this);
tableLayout.addView(tableRow1, new TableLayout.LayoutParams(WC, WC));
ImageView iv = new ImageView(this);
tableRow1.addView(iv);
iv.setImageDrawable(getResources().getDrawable(R.drawable.star_big_on));
EditText edit1 = new EditText(this);
tableRow1.addView(edit1);
TableRow tableRow2 = new TableRow(this);
ImageView iv2 = new ImageView(this);
iv2.setImageDrawable(getResources().getDrawable(R.drawable.gallery_photo_4));
tableRow2.addView(iv2);
EditText edit2 = new EditText(this);
tableRow2.addView(edit2);
tableLayout.addView(tableRow2, new TableLayout.LayoutParams(WC, WC));
Button btn = new Button(this); btn.setText("Exit");
btn.setOnClickListener(this);
RelativeLayout.LayoutParams param =
new RelativeLayout.LayoutParams(WC, WC);
param.addRule(RelativeLayout.BELOW, 1);
param.topMargin = 20;
r_layout.addView(btn, param);
}
public void onClick(View arg0) { finish(); }
}

在TableLayout中，布局是按照规则的表格样式来填写的



而对于上面的例子中的5个布局可以理解成如下的图片方式：

於是先最大的view，並設定為目前佈局：
RelativeLayout r_layout = new RelativeLayout(this);
setContentView(r_layout)
接著定義第二層的TableLayout，並加入到r_layout 裡：
TableLayout tableLayout = new TableLayout(this);
r_layout.addView(tableLayout, new RelativeLayout.LayoutParams(WC, WC));
再定義第三層的TableRow，並加入到tableLayout 裡：
TableRow tableRow1 = new TableRow(this);
tableLayout.addView(tableRow1, new TableLayout.LayoutParams(WC, WC));
最後，定義最小的view，並加入到tableRow裡：
ImageView iv = new ImageView(this);
tableRow1.addView(iv);
如此依序逐步定義，就能順利完成。

RelativeLayout->TableLayout->TableRow->ImageView
用的比较多的也可以在xml的布局中进行实现。
举个例子来看看在xml中的布局

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">

<TableRow>
<TextView
android:layout_column="1"
android:text="Open..."
android:padding="3dip" />
<TextView
android:text="Ctrl-O"
android:gravity="right"
android:padding="3dip" />
</TableRow>

<TableRow>
<TextView
android:layout_column="1"
android:text="Save..."
android:padding="3dip" />
<TextView
android:text="Ctrl-S"
android:gravity="right"
android:padding="3dip" />
</TableRow>

<TableRow>
<TextView
android:layout_column="1"
android:text="Save As..."
android:padding="3dip" />
<TextView
android:text="Ctrl-Shift-S"
android:gravity="right"
android:padding="3dip" />
</TableRow>

<View
android:layout_height="2dip"
android:background="#FF909090" />

<TableRow>
<TextView
android:text="X"
android:padding="3dip" />
<TextView
android:text="Import..."
android:padding="3dip" />
</TableRow>

<TableRow>
<TextView
android:text="X"
android:padding="3dip" />
<TextView
android:text="Export..."
android:padding="3dip" />
<TextView
android:text="Ctrl-E"
android:gravity="right"
android:padding="3dip" />
</TableRow>

<View
android:layout_height="2dip"
android:background="#FF909090" />

<TableRow>
<TextView
android:layout_column="1"
android:text="Quit"
android:padding="3dip" />
</TableRow>
</TableLayout>

可以看到在外层的tablelayout，里面包含了多个tablerow，每个tablerow中独立的是button这些view、textview