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の例]。
http://developer.android.com/reference/android/widget/TableLayout.html
[Android
TableLayout JavaDoc]。
http://android-pro.blogspot.com/2010/02/table-layout.html
[Another
素晴らしいAndroid TableLayoutの例]。
http://stackoverflow.com/questions/4637233/how-to-set-layout-span-through-code
[Set
レイアウトスパンコード]
リンク://タグ/アンドロイド/[アンドロイド]リンク://タグ/レイアウト/[レイアウト]リンク://タグ/tablelayout/[tablelayout]