Androidプログラミングの館

3.3 TableLayout

　TableLayoutは表のように配置するレイアウトです。
本章で作るレイアウトは以下のような注文フォームです。

今回は、GUIで作ると無駄にコードが多くなるので、ソースコードを直接書いていきます。
コードと結果を比較しながら少しずつ作っていきますのでご覧下さい。

まずは、TableLayoutを用意します。(main.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">


</TableLayout>

TableLayoutはTableLayoutタグの中に、TableRowタグを入れることで行を表現します。
一行の中に、チェックボックス、テキストビュー、エディットテキストを入れてみましょう。

<?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">

    <TableRow >
        <CheckBox />
        <TextView android:text="りんご" />
        <EditText />
    </TableRow>

    <TableRow >
        <CheckBox />
        <TextView android:text="ぶどう" />
        <EditText />
    </TableRow>

</TableLayout>

ここで、「品名」にあたる部分は長くなる可能性があるので、出来るだけ画面いっぱいに表示したいので、広げようと思います。
TableLayoutタグの中に「android:stretchColumns="1" 」を追加します。
すると、左から(0から数えて)1番目のセルが拡張されます。

<?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 >
        <CheckBox />
        <TextView android:text="りんご" />
        <EditText />
    </TableRow>

    <TableRow >
        <CheckBox />
        <TextView android:text="ぶどう" />
        <EditText />
    </TableRow>

</TableLayout>

これで長い名前の商品名でも見やすくなりました。

<?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 >
        <CheckBox />
        <TextView android:text="りんご" />
        <EditText />
    </TableRow>

    <TableRow >
        <CheckBox />
        <TextView android:text="ぶどう" />
        <EditText />
    </TableRow>

    <TableRow >
        <CheckBox />
        <TextView android:text="愛媛産じゃなく実は和歌山産みかん" />
        <EditText />
    </TableRow>

</TableLayout>

また、セルの結合はlayout_spanを指定することで行えます。

<?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:text="品名" android:layout_span="2" />
        <TextView android:text="数量" />
    </TableRow>

    <TableRow >
        <CheckBox />
        <TextView android:text="りんご" />
        <EditText />
    </TableRow>

    <TableRow >
        <CheckBox />
        <TextView android:text="ぶどう" />
        <EditText />
    </TableRow>

    <TableRow >
        <CheckBox />
        <TextView android:text="愛媛産じゃなく実は和歌山産みかん" />
        <EditText />
    </TableRow>

</TableLayout>

これでTableLayoutの説明は終わりです。

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License.

- Remical Soft -