Androidアプリ入門 No.38 TableLayoutの基本 - コンピュータクワガタ

TableLayout

TableLayoutの基本

TableLayoutは文字通りHTMLのTable要素のように表形式のレイアウトができる。TableLayoutの主な属性は以下となる。

属性	説明
shrinkColumns	折り返してでも狭いスペースでコンテンツを表現しようとする。カンマ区切りで複数の列を指定できる。
stretchColumns	指定された列は、行の開いているスペースいっぱいの空間を取ろうとする。カンマ区切りで複数の列を指定できる。

TableLayoutは、TableRowで行を表現する。TableRow以下に設定したウィジェット分列ができる。TableRowでは以下の属性が使用できる。

属性	説明
layout_span	HTMLのcolspanと同等。列を複数に拡大する。
layout_column	指定した列にウィジェットを配置する。

まずは、共通部分のstrings.xmlを以下に示す。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, MainActivity!</string>
    <string name="app_name">ActivityTest</string>

    <style name="CodeFont">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#000</item>
        <item name="android:textSize">26sp</item>        
    </style>
</resources>

次に、MainActivity.javaを以下に示す。

package sample.at;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

最後に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"
    >
    <TableRow>
        <TextView
            style="@style/CodeFont"
            android:text="1-1"
            android:background="#fff"
            />
        <TextView
            style="@style/CodeFont"
            android:text="1-2"
            android:background="#f00"
            />
        <TextView
            style="@style/CodeFont"
            android:text="1-3"
            android:background="#0f0"
            />
    </TableRow>
    <TableRow>
        <TextView
            style="@style/CodeFont"
            android:text="2-1"
            android:background="#00f"
            android:layout_span="2"
            />
        <TextView
            style="@style/CodeFont"
            android:text="2-2"
            android:background="#ff0"
            />
    </TableRow>
    <TableRow>
        <TextView
            style="@style/CodeFont"
            android:text="3-2"
            android:background="#fff"
            android:layout_column="1"
            />
     </TableRow>
</TableLayout>

実行結果は以下のようになる。1行目は3つのTextViewを配置する。2行目は1列目を2列分幅を取るようにlayout_spanを指定している。3行目は2列目を使用するためlayout_columnに1（indexは1から始まるため）を指定している。また、layout_columnとlayout_width="fill_parent"は同時に指定できないので注意すること。

次に、main.xmlを以下のように変更する。変更点はTableLayoutにstretchColumns属性を追加しただけである。

<?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="0,2"
    >
    <TableRow>
        <TextView
            style="@style/CodeFont"
            android:text="1-1"
            android:background="#fff"
            />
        <TextView
            style="@style/CodeFont"
            android:text="1-2"
            android:background="#f00"
            />
        <TextView
            style="@style/CodeFont"
            android:text="1-3"
            android:background="#0f0"
            />
    </TableRow>
    <TableRow>
        <TextView
            style="@style/CodeFont"
            android:text="2-1"
            android:background="#00f"
            android:layout_span="2"
            />
        <TextView
            style="@style/CodeFont"
            android:text="2-2"
            android:background="#ff0"
            />
    </TableRow>
    <TableRow>
        <TextView
            style="@style/CodeFont"
            android:text="3-2"
            android:background="#fff"
            android:layout_column="1"
            />
     </TableRow>
</TableLayout>

実行結果は以下になる。stretchColumnsに0と2を指定したため、1列目と3列目が横幅を埋めるように広がる。

最後にshrinkColumnsの例を以下に示す。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:shrinkColumns="0,2"
    >
    <TableRow>
        <TextView
            style="@style/CodeFont"
            android:text="1-1あいうえお"
            android:background="#fff"
            />
        <TextView
            style="@style/CodeFont"
            android:text="1-2あいうえお"
            android:background="#f00"
            />
        <TextView
            style="@style/CodeFont"
            android:text="1-3あいうえお"
            android:background="#0f0"
            />
    </TableRow>
    <TableRow>
        <TextView
            style="@style/CodeFont"
            android:text="2-1"
            android:background="#00f"
            android:layout_span="2"
            />
        <TextView
            style="@style/CodeFont"
            android:text="2-2"
            android:background="#ff0"
            />
    </TableRow>
    <TableRow>
        <TextView
            style="@style/CodeFont"
            android:text="3-2"
            android:background="#fff"
            android:layout_column="1"
            />
     </TableRow>
</TableLayout>