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