动态增加TableLayout的行

Just like HTML Tables on webpages the TableLayout on Android gives you the option to align Views in a table order with rows and columns.

My development setup is:

IDE: Eclipse IDE (setup guide here ).
Phone: HTC Hero
Android version: 1.5 HTC Rom

I will be using the standard Android Project Skeleton in Eclipse as my base setup. This auto creates all the basic files needed, so these will not be covered here.

TableLayout on Android

The TableLayout is built using the TableLayout and the TableRow commands. There is no TableCols like the <td> tag in HTML. To align your view in columns you have to set the width of the elements and manually control the layout.

XML Layout

To make a basic layout with 2 rows and 4 textview I have a main.xml with this content:

< TableLayout android:id = "@+id/TableLayout01" android:layout_width = "wrap_content" android:layout_height = "wrap_content" >

 

   < TableRow android:id = "@+id/TableRow01" android:layout_width = "wrap_content" android:layout_height = "wrap_content" >

 

     < TextView android:id = "@+id/TextView01" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "textfield 1-1" ></ TextView >

     < TextView android:id = "@+id/TextView02" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "textfield 1-2" ></ TextView >

 

   </ TableRow >

 

   < TableRow android:id = "@+id/TableRow02" android:layout_width = "wrap_content" android:layout_height = "wrap_content" >

 

     < TextView android:id = "@+id/TextView03" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "textfield 2-1" ></ TextView >

     < TextView android:id = "@+id/TextView04" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "textfield 2-2" ></ TextView >

 

   </ TableRow >

 

</ TableLayout >

This creates a layout like this:

So we have now displayed a simple TableLayout.

Right aligning checkboxes

Many apps have a nice clean setup where the checkboxes is right aligned to the screen and this is actually very easy to achieve. You just have to set the width of the textview so it will push the checkbox to the right.

First step is to change the TextView02 to a Checkbox like this:

...

     < TextView android:id = "@+id/TextView01" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "textfield 1-1" ></ TextView >

     < CheckBox android:id = "@+id/CheckBox01" android:layout_width = "wrap_content" android:layout_height = "wrap_content" ></ CheckBox >

This will output somethings like this:

Now we just have to align the checkbox.

We can do this by setting the width of the previous textfield like this:

< TableRow android:id = "@+id/TableRow01" android:layout_width = "wrap_content" android:layout_height = "wrap_content" >< TextView android:id = "@+id/TextView01" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "textfield 1-1" android:width = "250px" ></ TextView >

Notice the width=”250px” in the end there. This results in:

But what is the screen size changes? The checkbox will then be placed 250px from the left because the width is hardcoded. Not that great – but yet very easy to adjust.

On the LayoutTable we can adjust stretching across columns, similar to the colspan tag in HTML.

...

< TableLayout android:id = "@+id/TableLayout01" android:layout_width = "fill_parent" android:layout_height = "wrap_content"   android:stretchColumns = "0" >

...

This will make the first (“0″) column stretch as most as needed and allowed by the other elements.:

And with the screen flipped:

Complete XML layout:

<? xml version = "1.0" encoding = "utf-8" ?>

< LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android "

     android:orientation = "vertical"

     android:layout_width = "fill_parent"

     android:layout_height = "fill_parent"

     >

 

< TableLayout android:id = "@+id/TableLayout01" android:layout_width = "fill_parent" android:layout_height = "wrap_content"   android:stretchColumns = "0" >

 

   < TableRow android:id = "@+id/TableRow01" android:layout_width = "wrap_content" android:layout_height = "wrap_content" >

     < TextView android:id = "@+id/TextView01" android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:text = "textfield 1-1" ></ TextView >

 

     < CheckBox android:id = "@+id/CheckBox01" android:layout_width = "wrap_content" android:layout_height = "wrap_content" ></ CheckBox >

   </ TableRow >

 

   < TableRow android:id = "@+id/TableRow02" android:layout_width = "wrap_content" android:layout_height = "wrap_content" >

     < TextView android:id = "@+id/TextView03" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "textfield 2-1" ></ TextView >

     < TextView android:id = "@+id/TextView04" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "textfield 2-2" ></ TextView >

 

   </ TableRow >

 

</ TableLayout >

</ LinearLayout >

Appending rows dynamically

Lets say you want to add rows to the TableLayout on depend during your app. No problem.

Add a button at the top of your application like this:

< Button android:id = "@+id/Button01" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "Add row" ></ Button >

 

< ScrollView android:id = "@+id/ScrollView01" android:layout_width = "wrap_content" android:layout_height = "wrap_content" >

 

   < TableLayout android:id = "@+id/TableLayout01" android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:stretchColumns = "0" >

 

     < TableRow android:id = "@+id/TableRow01" android:layout_width = "wrap_content" android:layout_height = "wrap_content" >

       < TextView android:id = "@+id/TextView01" android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:text = "textfield 1-1" ></ TextView >

 

       < CheckBox android:id = "@+id/CheckBox01" android:layout_width = "wrap_content" android:layout_height = "wrap_content" ></ CheckBox >

     </ TableRow >

 

   </ TableLayout >

</ ScrollView >

There is now a button available for handling clicks from the user and the TableLayout has been wrapped in a ScrollView which enables the scroll functionality.

Now for some Java code

package huuah.tablelayout;

 

import android.app.Activity;

import android.os.Bundle;

import android.widget.TableLayout;

import android.widget.TextView;

import android.view.View;

 

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.CheckBox;

import android.widget.TableRow;

import android.widget.TableRow.LayoutParams;

 

public class tablelayout extends Activity implements OnClickListener {

     /** Called when the activity is first created. */

 

     //initialize a button and a counter

     Button btn;

     int counter = 0 ;

 

     @Override

     public void onCreate(Bundle savedInstanceState) {

         super .onCreate(savedInstanceState);

 

         // setup the layout

         setContentView(R.layout.main);

 

         // add a click-listener on the button

         btn = (Button) findViewById(R.id.Button01);

         btn.setOnClickListener( this );       

 

     }

 

     // run when the button is clicked

     public void onClick(View view) {

 

         // get a reference for the TableLayout

         TableLayout table = (TableLayout) findViewById(R.id.TableLayout01);

 

         // create a new TableRow

         TableRow row = new TableRow( this );

 

         // count the counter up by one

         counter++;

 

         // create a new TextView

         TextView t = new TextView( this );

         // set the text to "text xx"

         t.setText( "text " + counter);

 

         // create a CheckBox

         CheckBox c = new CheckBox( this );

 

         // add the TextView and the CheckBox to the new TableRow

         row.addView(t);

         row.addView(c);

 

         // add the TableRow to the TableLayout

         table.addView(row, new TableLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

 

     }

}

So whenever the button is clicked, it adds a new row to the TableLayout and notice the Scrollbar from the ScrollView.

If you want more information and TableLayout and placement techniques I can recommend reading:

Thats it for now. Enjoy coding and please post some comments.

原文：http://huuah.com/using-tablelayout-on-android/