goo blog サービス終了のお知らせ 

marunomaruno-memo

marunomaruno-memo

[Android] レイアウト (3) テーブル・レイアウト

2012年03月22日 | Android
[Android] レイアウト (3) テーブル・レイアウト
================================================================================

テーブル形式でウィジェットを配置するグリッド・モデルのレイアウトである。
TableLayout は TableRow と連動する。TableRow は、テーブルの行を規定する。

使い方としては、以下のとおり。

<TableLayout>
    <TableRow>
        ウィジェット
        ウィジェット
            ...
    </TableRow>

    <TableRow>
        ウィジェット
        ウィジェット
            ...
    </TableRow>

        ...
</TableLayout>


・行にセルを配置する

行の宣言は、TableRow で行う。
列数は Android が決定する。

android:layout_span 属性で、ウィジェットを複数の列に広げることができる。


・TableLayout の子要素

直接の子は TableRow 要素だけである。
ただし、TableRow 要素以外にも行と行の間に他のウィジェットを配置できる。その場合
は、横方向の LinearLayout と同様に振る舞う。


・伸縮とたたみ込み

android:stretchColumns 属性で、ここに指定した列は、行の空いているスペースいっぱ
いに広がる。この属性の値は単一の列番号またはコンマ区切りの列番号のリストで指定す
る。列番号は左の列から 0 から振られる。
実行時に、TableLayout.setColumnsStretchable() メソッドで制御できる。

android:shrinkColumns 属性で、ここに指定した列は、コンテンツを折り返して表示する。
値の指定は、android:stretchColumns 属性と同じ。
実行時に、TableLayout.setColumnsShrinkale() メソッドで制御できる。

android:collapseColumns 属性で、ここに指定した列は、最初はたたみ込まれた状態にな
る。これは最初は表示されない列となる。表示するには、TableLayout
.setColumnsCollapsed() メソッドを呼び出すことで表示される。


▲ レイアウト

□ res/layout/main.xml
---
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TableLayout
        android:id="@+id/tableLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dip"
        android:weightSum="1" >

        <TableRow
            android:id="@+id/tableRow0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <ToggleButton
                android:id="@+id/button00"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:onClick="onClick"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textOff="[0][0]"
                android:textOn="[0][0]" />

            <ToggleButton
                android:id="@+id/button01"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:onClick="onClick"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textOff="[0][1]"
                android:textOn="[0][1]" />

            <ToggleButton
                android:id="@+id/button02"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:onClick="onClick"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textOff="[0][2]"
                android:textOn="[0][2]" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <ToggleButton
                android:id="@+id/button10"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:onClick="onClick"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textOff="[1][0]"
                android:textOn="[1][0]" />

            <ToggleButton
                android:id="@+id/button11"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:onClick="onClick"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textOff="[1][1]"
                android:textOn="[1][1]" />

            <ToggleButton
                android:id="@+id/button12"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:onClick="onClick"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textOff="[1][2]"
                android:textOn="[1][2]" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <ToggleButton
                android:id="@+id/button20"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_span="2"
                android:onClick="onClick"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textOff="[2][0]"
                android:textOn="[2][0]" />

            <ToggleButton
                android:id="@+id/button22"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:onClick="onClick"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textOff="[2][2]"
                android:textOn="[2][2]" />
        </TableRow>
    </TableLayout>

</LinearLayout>
---

TableLayout の場合は、なるべく幅に入るように調整されるようだ。

TableLayout の属性は、そのスーパークラスである LinearLayout と同じ。


□ TableLayout クラス

java.lang.Object
   +    android.view.View
        +    android.view.ViewGroup
             +    android.widget.LinearLayout
                  +    android.widget.TableLayout

テーブル形式のレイアウトを定義するクラス。
この子要素として TableRow を使うことで、行を定義する。

XML 属性としては、上記の「伸縮とたたみ込み」に関する属性がある。


XML 属性(属性名の前に、名前空間プレフィックス android: がつく)
---
android:collapseColumns
android:shrinkColumns
android:stretchColumns
---

それぞれ、つぎのメソッドで動的に変更できる。
    setColumnCollapsed(int,boolean)
    setShrinkAllColumns(boolean)
    setStretchAllColumns(boolean)


□ TableRow クラス

java.lang.Object
   +    android.view.View
        +    android.view.ViewGroup
             +    android.widget.LinearLayout
                  +    android.widget.TableRow

テーブルの行を定義するクラス。
この子要素としてウィジェットを指定すると、それがテーブルの項目として定義される。

このクラスには、とくに XML 属性はない。行の属性としては、内部クラスの TableRow
.LayoutParams クラス で定義している。


□ TableRow.LayoutParams クラス

java.lang.Object
   +    android.view.ViewGroup.LayoutParams
        +    android.view.ViewGroup.MarginLayoutParams
             +    android.widget.LinearLayout.LayoutParams
                  +    android.widget.TableRow.LayoutParams

テーブルの行の属性を定義するクラス。


XML 属性(属性名の前に、名前空間プレフィックス android: がつく)
---
layout_column    ビューの列数
layout_span      結合する列数
---

この属性に関するメソッドはない。


---
★?
TableLayout では、HTML の table 要素のような行の結合(rowspan)はできないようだ。
---


□ 表示
---
00        01        02

10        11        12

20                  22
---


▲ アクティビティ

□ TableLayout01Activity.java

※ クラス名が上記の名前になっているだけで、コードは LinearLayout01Activity.java と同じ。

                                                                            以上


最新の画像もっと見る

コメントを投稿