[Android] TableLayout 範例介紹

在這個例子，我們來看如何用TableLayout來排列textView和button，
及如何使用“android:layout_span”將button寬度延伸成2欄位(column)，
及使用“android:layout_column”來將按鈕放到特定的欄位。

File : res/layout/main.xml 

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 
    <!-- 2個欄位 -->
    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >
 
        <TextView
            android:id="@+id/textView1"
            android:text="第 1 欄"
            android:textAppearance="?android:attr/textAppearanceLarge" />
 
        <Button
            android:id="@+id/button1"
            android:text="第 2 欄" />
    </TableRow>
 
    <!-- 將按鈕延伸至2個欄位寬  -->
    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >
 
         <Button
            android:id="@+id/button2"
            android:layout_span="2"
            android:text="第 1 和 2 欄" />
         
       
    </TableRow>
 
 
    <!-- 3個欄位 -->
    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >
 
        <TextView
            android:id="@+id/textView2"
            android:text="第 1 欄"
            android:textAppearance="?android:attr/textAppearanceLarge" />
 
        <Button
            android:id="@+id/button2"
            android:text="第 2 欄" />
 
        <Button
            android:id="@+id/button3"
            android:text="第 3 欄" />
    </TableRow>
 
    <!-- 利用layout_columnundefinedbase is 0),將按鈕放在第2欄 -->
    <TableRow
        android:id="@+id/tableRow4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >
 
        <Button
            android:id="@+id/button4"
            android:layout_column="1"
            android:text="第 2 欄" />
    </TableRow>
 
    <!-- 利用layout_columnundefinedbase is 0),將按鈕放在第3欄 -->
    <TableRow
        android:id="@+id/tableRow5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >
 
        <Button
            android:id="@+id/button5"
            android:layout_column="2"
            android:text="第  3 欄" />
    </TableRow>
 
</TableLayout>

結果:

延伸閱讀: [Android] RelativeLayout範例介紹