Androidのチュートリアル – Tutorials > Hello, Views | Table Layout

Table Layout はテーブル状に配置するためのコンテナです。

レイアウト作成

HelloTableLayout という名前で新規にプロジェクトをつくり、res/layout/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"
    android:stretchColumns="1">
    <TableRow>
        <TextView
            android:layout_column="1"
            android:text="Open..."
            android:padding="3dip" />
        <TextView
            android:text="Ctrl-O"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_column="1"
            android:text="Save..."
            android:padding="3dip" />
        <TextView
            android:text="Ctrl-S"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_column="1"
            android:text="Save As..."
            android:padding="3dip" />
        <TextView
            android:text="Ctrl-Shift-S"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>
    <View
        android:layout_height="2dip"
        android:background="#FF909090" />
    <TableRow>
        <TextView
            android:text="X"
            android:padding="3dip" />
        <TextView
            android:text="Import..."
            android:padding="3dip" />
    </TableRow>
    <TableRow>
        <TextView
            android:text="X"
            android:padding="3dip" />
        <TextView
            android:text="Export..."
            android:padding="3dip" />
        <TextView
            android:text="Ctrl-E"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>
    <View
        android:layout_height="2dip"
        android:background="#FF909090" />
    <TableRow>
        <TextView
            android:layout_column="1"
            android:text="Quit"
            android:padding="3dip" />
    </TableRow>
</TableLayout>

HTML と異なるのは table > tr > td の構造の td が無い点です。

TableLayout > TableRow > TextView のように、行(TableRow)の定義の子要素がそのまま列要素になっています。

この場合、それぞれの行には三つの列があることになっています。

一行目

オブジェクトを一つずつ見ていくと、まず、テーブル自体の宣言である TableLayout 要素がおかれ、子要素に一行目の TableRow 要素があり、二つの TextView が配置されています。

    <TableRow>
        <TextView
            android:layout_column="1"
            android:text="Open..."
            android:padding="3dip" />
        <TextView
            android:text="Ctrl-O"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>

この行には、二つの TextView が入っていることになりますが、次の行の “X” が入っている列の余白分をあけるために、android:layout_column=”1″ を一つ目の TextView に指定しています。

列のインデックスは、0 から始まるので、android:layout_column=”1″ を指定するということは、2列目に配置することになり、次の TextView は3列目に入ることになります。

ここで dip(Density Independent Pix) という単位がでてきました。

Android 端末はいろいろなメーカーから発売され、解像度もさまざまです。

そのため、ピクセル単位で指定してしまうと、大きく見えたり小さく見えたり、思ったようなレイアウトにならないことが起こりえます。

そこで、解像度が異なっていても、同じ大きさで表示される仕組みが dip なのです。

ひとまずは、dip で指定しておけば、端末の違いで見た目で悩まされることは無い、という認識で置いておきます。

二行目、三行目

二、三行目の TableRow 要素の中身は一行目と同様です。

四つ目の要素

    <View
        android:layout_height="2dip"
        android:background="#FF909090" />

四つ目の要素には、TextView が置かれていますが、高さを持たせて、背景色で塗りつぶすことで、水平線を表現したものです。

四行目

    <TableRow>
        <TextView
            android:text="X"
            android:padding="3dip" />
        <TextView
            android:text="Import..."
            android:padding="3dip" />
    </TableRow>

次の行では、android:layout_column=”1″ 指定せず、一列目(0番目)から配置しています。

五行目

    <TableRow>
        <TextView
            android:text="X"
            android:padding="3dip" />
        <TextView
            android:text="Export..."
            android:padding="3dip" />
        <TextView
            android:text="Ctrl-E"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>

こちらも、要素が三列目として一つ増えただけで、四行目と同じです。

七つ目の要素

    <View
        android:layout_height="2dip"
        android:background="#FF909090" />

こちらも、四つ目の要素と同様、水平線を表現するために、TextView を利用しています。

六行目

    <TableRow>
        <TextView
            android:layout_column="1"
            android:text="Quit"
            android:padding="3dip" />
    </TableRow>

最後の行は、一つ分余白(2列目に配置)した TextView でした。

プロジェクトの作成から main.xml を上書きするだけでとりあえず完成します。

テーブルについては、HTML と同じような考え方でよいでしょう。td 要素について考えない分だけ簡単かもしれません。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする