サイトのトップへ戻る

libGDX ドキュメント 日本語訳

サイト内検索

Table



概要

Table はHTML のテーブルと同様に、論理テーブルを使って子の位置とサイズを設定するWidgetGroup です。 Tableは簡単に使用できてウィジットのサイズと位置を手動で設定するよりも強力なので、scene2d.uiにおいてウィジットの配置で広く使われるよう意図されています。 Tableベースのレイアウトは絶対位置に依存せず、したがって異なるウィジットサイズと画面解像度に対して自動的に調整を行います。

Table は、 libgdx のTableLayout のコードを改良して作られています。 (二つとも作成者は同じ人です)。 TableLayout はTableと同じ機能を提供しますが、これは他のUIツールキット向けのものです(Swing, Android, など)。



クイックスタート

    Label nameLabel = new Label("Name:", skin);
    TextField nameText = new TextField("", skin);
    Label addressLabel = new Label("Address:", skin);
    TextField addressText = new TextField("", skin);

    Table table = new Table();
    table.add(nameLabel);
    table.add(nameText).width(100);
    table.row();
    table.add(addressLabel);
    table.add(addressText).width(100);

上記のコードでは、Tableにセルを4つ追加して、列を2つと行を2つ配置しています。 addメソッドは追加したセルを戻り値として返します。このセルはレイアウトを制御するメソッドを持っています。 tableが子のサイズと位置を設定するので、テキストフィールドの横幅を100に設定する場合は、戻り値として取得したtableセルのwidthメソッドを実行します。 テキストフィールド自身のwidthメソッドを実行するのではありません。



ルート table

UIの配置を行う際には、UIウィジットは自身のサイズを設定しません。その代わり、最小サイズ、推奨サイズ、最大サイズを提供します。 ウィジットの親は自身のサイズとそれら提供された情報を使ってウィジットのサイズを設定します。 多くのレイアウトでは、ルート位置にサイズの固定された(大抵は画面全体と同じサイズ)一つのtableを使います。 ウィジットと内部tableをルートtableに追加すると、固定サイズと固定サイズに依存しないレスポンシブレイアウトになります。

libgdxでは、 setFillParent メソッドを使ってルートtableのサイズをstageのサイズと合わせることが簡単にできます。 (しかし、一般的にはこのメソッドはルートtableのみで使用してください):

    Table table = new Table();
    table.setFillParent(true);
    stage.addActor(table);


デバッグ機能

Table は、レイアウト内で起こっていることを視覚化するためのデバッグ用線を描写することができます。 この機能は以下のようにして有効にします。:

table.setDebug(true); // turn on all debug lines (table, cell, and widget)


セルを追加する

ウィジットをtableへ追加するにはadd メソッドを使います。このメソッドを実行すると、カレント行にセルが追加されます。 次の行へ移動するには、 rowメソッドを実行してください。

    table.add(nameLabel);
    table.add(nameText);
    table.row();
    table.add(addressLabel);
    table.add(addressText);

add メソッドを実行すると、 Cellが戻り値として返ります。このCellは、レイアウトを制御するためのプロパティを持っています。 cellに実装された全てのメソッドはCellを戻り値として返すので、連鎖的にメソッドの実行を行えます。

    table.add(nameText).padLeft(10).width(100);


論理テーブル

以下のセルで論理テーブルが構成されていますが、論理テーブルのサイズとtableウィジットのサイズは同じではありません。

外側にある青い四角線はtableウィジットのサイズを示します。 内側にある青い四角線は論理テーブルのサイズを示し、これは既定では中央に配置されます。 この既定での配置はtableの各メソッドを使用して変更することができます。 table のメソッドはtableを戻り値として返すので、cell のメソッドと同じ様に連鎖的にメソッドの実行を行えます。

    table.right().bottom();



Cellのプロパティ



Expand

論理テーブルを、table ウィジット全体のサイズまでに広げるには、 TableLayout に対してセルが追加スペースを取るよう指示する必要があります。

    table.add(nameLabel).expandX();
    table.add(nameText).width(100);
    table.row();
    table.add(addressLabel);
    table.add(addressText).width(100);

赤線はセルの境界を示し、緑線はウィジットの境界を示します。 X方向においては、左側にある列が追加スペースを全て取得していることに注意してください。 一つのセルでexpandを実行すれば、それが属する列や行全体でexpand が実行されます。 複数の列でexpandを実行すると、追加スペースは均等に割り振られます。

    table.add(nameLabel).expandX();
    table.add(nameText).width(100).expandX();
    table.row();
    table.add(addressLabel);
    table.add(addressText).width(100);

expandY メソッドを使うことで、y方向でもExpand が動作します。 expand メソッドを使うとx,y両方の方向でexpandが実行できます。

    table.add(nameLabel).expand();
    table.add(nameText).width(100);
    table.row();
    table.add(addressLabel);
    table.add(addressText).width(100);



配置

論理テーブルの配置処理と同様に、セル内のウィジットも配置処理を行うことができます。

    table.add(nameLabel).expand().bottom().right();
    table.add(nameText).width(100).top();
    table.row();
    table.add(addressLabel);
    table.add(addressText).width(100);



Fill

fill メソッドを使うとウィジットのサイズをセルのサイズに合わせられます。 expandと同様に、fillXメソッドとfillYメソッドがあります。

    table.add(nameLabel).expand().bottom().fillX();
    table.add(nameText).width(100).top();
    table.row();
    table.add(addressLabel);
    table.add(addressText).width(100);

セルを表す赤線がウィジットを表す緑線の上に描写されているので注意してください。



ウィジットのサイズ

既定では、tableはウィジットのサイズをその推奨サイズに設定するよう試みます。 ウィジットの推奨サイズが空きスペースよりも大きくて収まらない場合は、推奨サイズと最低サイズの間でウィジットのサイズを設定します。 最小サイズでもウィジットが収まらない場合は、レイアウトが破棄されてウィジットは重なって表示されます。 fillメソッドをでは、ウィジットのサイズをその最大サイズよりも大きくするとはありません。

初心者のやりがちなミスとして、tableに配置されたウィジットのサイズや位置を、ウィジットのメソッドを使って設定しようとすることがあります。 table が子の推奨サイズや最小サイズや最大サイズを使ってそのサイズを設定し、既に設定されていたサイズや位置を上書きします。

ウィジットには推奨サイズや最小サイズや最大サイズを設定するためのsetterメソッドが実装されていません。 これらの値を明示的に設定するようにするとややこしくなるので、ウィジット自身によって算出するようになっています。 また、これらの値を変更してウィジットのサブクラスを作成するのはお勧めしません。 その代わり、ウィジットを格納しているセルに推奨サイズ、最小サイズ、最大サイズを設定してください。 するとウィジットの設定値ではなくセルに設定した値が使用されます。

    table.add(nameLabel);
    table.add(nameText).minWidth(100);
    table.row();
    table.add(addressLabel);
    table.add(addressText).prefWidth(999);

上記ではprefWidth の値をtableよりも大きな999に設定しているので、tableに収まるようにサイズが下げられます。

widthメソッド は、minWidth, prefWidth, maxWidthに同じ値をまとめて設定するショートカットメソッドです。 heightメソッドは、 minHeight, prefHeight, maxHeight に同じ値をまとめて設定するショートカットメソッドです。 sizeメソッドでは width とheight を引数として受け取り、上記6つのプロパティを全て一括設定します。



パディング

パディングとは、セルの内側に追加する余白スペースのことです。

    table.add(nameLabel);
    table.add(nameText).width(100).padBottom(10);
    table.row();
    table.add(addressLabel);
    table.add(addressText).width(100).pad(10);

セルとセルの間では二つのセルのパディング空間が合算されて余白ができるのため、TextField間の余白は20ピクセルになるので注意してください。 デバッグ線はtableでのレイアウトにおいて重要な処理ではないので、常にパディングが適用されたセルが表示される訳ではありません。

パディングは、tableの内側にも設定することができます。

    table.pad(10);


スペーシング

パディングと同様、スペーシングでもセルの内側に余白を追加します。 しかし、セルとセルの間で二つのスペーシング空間は合算されず、二つのうち大きいほうが使用されます。 また、スペーシングはtableの内側には適用されません。 例えばフォームの場合などでは、スペーシングを使うと簡単にセルの間隔を一定に保つことができます。

    table.add(nameLabel);
    table.add(nameText).width(100).spaceBottom(10);
    table.row();
    table.add(addressLabel);
    table.add(addressText).width(100).space(10);

セルとセルの間の余白は組み合わされため、text field間の余白は10ピクセルになるので注意してください。 また、tableの内側にはスペーシングが適用されないため、二列目のtext fieldの下にスペースはないので注意してください。



Colspan

セルは複数の列にまたがることができます。

    table.add(nameLabel);
    table.add(nameText).width(100).spaceBottom(10);
    table.row();
    table.add(addressLabel).colspan(2);

rowspanは無いので注意してください。rowspanの機能を実現するには、tableの中にtableを追加して使用してください 。



Uniform

uniform にtrueが設定されたセルは、全て同じサイズになります。

    table.add(nameLabel).uniform();
    table.add(nameText).width(100).uniform();
    table.row();
    table.add(addressLabel);
    table.add(addressText).width(100);



Defaultsメソッド



Cell のdefaultsメソッド

しばしば多くのセルが同一のプロパティを持つことがあるので、全てのセルに既定のプロパティを設定することでレイアウトに必要なコードを大幅に減らすことができます。 table の defaults メソッドを実行すると、全てのセルに設定された既定プロパティを持ったセルが戻り値として返されます 。

    table.defaults().width(100);
    table.add(nameLabel);
    table.add(nameText);
    table.row();
    table.add(addressLabel);
    table.add(addressText);



Column のdefaultsメソッド

table のcolumnDefaults メソッドを実行すると、その列の全てのセルに設定された既定プロパティを持つセルが戻り値として返されます この戻り値に任意のプロパティを設定すると、既定プロパティが上書きされます。 列を指定するためのインデックスは0から始まります。

    table.columnDefaults(1).width(150);
    table.add(nameLabel);
    table.add(nameText);
    table.row();
    table.add(addressLabel);
    table.add(addressText);



Row のdefaultsメソッド

row メソッドが実行されると、その行の全てのセルに設定された既定プロパティを持つセルが戻り値として返されます。 この戻り値に任意のプロパティを設定すると、セルの既定プロパティと行の既定プロパティが両方が上書きされます。 セルを追加する前にrowメソッドを実行することができるので覚えておいて下さい。 こにより、最初の行に設定を行うことで行全体に既定のプロパティを適用することができます。

    table.row().height(50);
    table.add(nameLabel);
    table.add(nameText);
    table.row().height(100);
    table.add(addressLabel);
    table.add(addressText);



Values

サイズやパディングなどの全ての値は、実際はValueインスタンスです。 数値を使用する場合は Value.Fixedを使用します。 例えば他のウィジットのサイズやパディングを基にしてそれらの値を設定するなど、Value を使うことでより柔軟な設定が可能です。

    table.add(nameLabel);
    table.add(nameText).pad(new Value.Fixed(10));
    table.row();
    table.add(addressLabel).width(Value.percentWidth(0.33f));
    table.add(addressText);


ウィジットを重ねて配置する

Table は、ウィジットを重ねずにサイズや位置を設定するという点で優れています。 ウィジットを他のウィジットの上に配置するには、 Stackを使用します。



セルを挿入する

Table ではセル内にウィジットを変更したり削除したり(nullを設定することで)できますが 現時点ではセルを途中に挿入したり、セルを削除したりすることはできません。 それをするためには、Tableを再作成する必要があります:clearChildrenを実行して全ての子とセルを削除し、それらを再度Tableへ追加します。

セルの挿入や削除をする必要がある場合は、VerticalGroupHorizontalGroupを使用します。



メモ

  • 既定では、位置やサイズの値は整数に丸められます。このため、小さい値を使う場合に問題が発生する可能性があります。 この設定を変更するにはTable#setRound(false)を実行してください。