開発者ドキュメント

Android TableLayoutの例

Androidでは、http://developer.android.com/reference/android/widget/TableLayout.html[TableLayout]を使用すると、HTMLの標準表レイアウトと同様に、コンポーネントを行と列に並べ替えることができます。また、<tr>および< <td> `

このチュートリアルでは、

TableLayout`を使用してボタン、textview、edittextを行と列の形式に整列する方法を紹介します。また、2つのセルのビューにまたがる" android:layout

span


“の使用法を示します。 :layoutcolumn` “を実行すると、指定した列にビューが表示されます。


P.SこのプロジェクトはEclipse 3.7で開発され、Android 2.3.3.

でテストされています

1. TableLayout



res/layout/main.xml

“ファイルを開き、デモンストレーションのために以下のビューを追加してください。 XMLコメントを読んで、それは自明であるべきです。


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 columns -->
    <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="Column 1"
            android:textAppearance="?android:attr/textAppearanceLarge"/>

        <Button
            android:id="@+id/button1"
            android:text="Column 2"/>
    </TableRow>

    <!-- edittext span 2 column -->
    <TableRow
        android:id="@+id/tableRow2"
        android:layout__width="wrap__content"
        android:layout__height="wrap__content"
        android:padding="5dip" >

        <EditText
            android:id="@+id/editText1"
            android:layout__span="2"
            android:text="Column 1 & 2"/>
    </TableRow>

    <!-- just draw a red line -->
    <View
        android:layout__height="2dip"
        android:background="#FF0000"/>

    <!-- 3 columns -->
    <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="Column 1"
            android:textAppearance="?android:attr/textAppearanceLarge"/>

        <Button
            android:id="@+id/button2"
            android:text="Column 2"/>

        <Button
            android:id="@+id/button3"
            android:text="Column 3"/>
    </TableRow>

    <!-- display this button in 3rd column via layout__column(zero based) -->
    <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="2"
            android:text="Column 3"/>
    </TableRow>

    <!-- display this button in 2nd column via layout__column(zero based) -->
    <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="1"
            android:text="Column 2"/>
    </TableRow>

</TableLayout>

デモ

結果を参照してください。



ソースコードをダウンロードする

ダウンロードする –

Android-TableLayout-Example.zip

(15 KB)

参考文献

レイアウトスパンコード]

リンク://タグ/アンドロイド/[アンドロイド]リンク://タグ/レイアウト/[レイアウト]リンク://タグ/tablelayout/[tablelayout]

モバイルバージョンを終了