GridBagLayoutについて

GridBagLayoutは非常に柔軟で強力なレイアウトで、GridLayoutよりも自由にグリッドにコンポーネントを配置できます。GridBagLayoutは、動的な長方形のグリッド上に、コンポーネントを水平および垂直に配置します。コンポーネントを同じサイズにする必要はなく、1つのコンポーネントが複数のセルを占有する場合もあります。

GridBagLayout image

GridBagLayoutでは、各コンポーネントの制約と最小サイズ、さらにコンテナの優先サイズに基づいて、コンポーネントの配置が決まります。

この後の説明では、

GridBagLayoutは複雑なグリッドに対応しますが、GridBagLayoutコンテナ内にネストした小さいパネルにコンポーネントを配置すると、より効果的に(そして期待どおりに)機能します。このようなネストしたパネルでは、他のレイアウトを使用でき、必要であればコンポーネントのパネルを追加できます。この方法には次の2つの利点があります。

ただしGridBagLayoutは多くのコンテナを必要とするため、プログラムが必要とするメモリー量は他のレイアウト・マネージャより多くなります。

GridBagConstraintsについて

GridBagLayoutではGridBagConstraintsオブジェクトを使用し、GridBagLayoutコンテナ内の各コンポーネントのレイアウト情報を指定します。各コンポーネントとGridBagConstraintsオブジェクトの間の関係は1対1であるため、コンテナのコンポーネントごとに、GridBagConstraintsオブジェクトをカスタマイズする必要があります。

GridBagLayoutコンポーネントには、次の制約があります。

GridBagConstraintsにより、次のものを制御できます。

UIエディタでの使用や設定のヒントを含め、各制約の詳細な説明は、後述の個々の制約のセクションを参照してください。

ソース・コードでのGridBagConstraintsの手動設定

UIエディタを使用してGridBagLayoutコンテナを設計すると、コンテナに追加する各コンポーネントに対して、常に新しいGridBagConstraintsオブジェクトが作成されます。GridBagConstraintsGridBagConstraintsから導出され、UIエディタで生成されるコードを簡潔にするためにGridBagConstraintsの11のプロパティすべてを引数とするコンストラクタを持ちます。

次に例を示します。

bevelPanel1.add(textFieldControl3, new GridBagConstraints2(0, 5, 6, 2, 1.0, 0.0,
GridBagConstraints.WEST, GridBagConstraints.HORIZONTAL, new Insets(0, 24, 0, 0), 150, 0));
bevelPanel1.add(checkboxControl1, new GridBagConstraints2(7, 5, 4, 1, 0.0, 0.0,
GridBagConstraints.CENTER, GridBagConstraints.NONE, new Insets(8, 29, 0, 24), 18, -11));

GridBagConstraintsコンストラクタのパラメータをソース・コード内で直接変更することも、「制約」プロパティ・エディタを使用して値を変更することもできます。

手動でコーディングしてGridBagLayoutコンテナを作成する場合、各GridBagLayoutコンテナに対して作成する必要のあるGridBagConstraintsオブジェクトは1つのみです。GridBagLayoutでは、コンテナに追加したコンポーネントに対して、GridBagConstraintsのデフォルト値または最後に変更された値が使用されます。コンテナに追加するコンポーネントに、特定の制約について異なる値を設定する場合、そのコンポーネントの新規の制約値を指定するだけです。この新規の値は、再び変更されないかぎり、後から追加するコンポーネントについても有効です。

注意: GridBagLayoutのこのコーディング方法は最も効率がよい(以前追加したコンポーネントから制約値を再利用する)方法ですが、このようにして作成したコンテナはUIエディタでビジュアルに編集することはできません。

既存のGridBagLayoutコードのUIエディタ向け変更

1つのGridBagConstraintsオブジェクトを使用して以前に手動でコーディングしたGridBagLayoutコンテナがある場合、UIエディタでそのコンテナを編集するには、コードに次のような変更を加える必要があります。

UIエディタでのGridBagLayoutのビジュアル設計

GridBagLayoutは複雑ですが、便利なレイアウト・マネージャです。UIエディタには、「制約」プロパティ・エディタ、グリッド、選択したコンポーネント上のポップアップ・メニューなど、GridBagLayoutの設計と制御をより簡単にする機能があります。

UIエディタでGridBagLayoutを設計するには、2つの方法があります。GridBagLayoutパネルにコンポーネントを追加して最初から設計することも、まずXYLayoutなどの別のレイアウトを利用してUIエディタでパネルのプロトタイプを作成し、すべてのコンポーネントを希望どおりに配列してサイズを設定した後で、GridBagLayoutに変換することもできます。この方法により、設計時間を大幅に短縮できます。

どちらの方法を使用する場合でも、コンポーネントをグループ化するためのネストしたパネルを利用し、中から外へ構築していくことをお薦めします。これらのパネルを使用して、GridBagLayoutコンテナの主要領域を定義し、GridBagLayout設計を簡略化します。これによりグリッド内のセルが減り、GridBagConstraintsを必要とするコンポーネントが少なくなります。

GridBagLayoutへの変換

最初に別のレイアウトでレイアウトのプロトタイプを作成する場合、パネルやコンポーネントを最初に配置する際のその位置揃え、特に左揃えと上揃えに注意すると、GridBagLayoutへの変換が非常に手際よく容易にできます。実際はグリッドを設計していることを念頭に置いて、仮想のグリッド内にコンポーネントを配置するようにし、行数と列数をできるだけ少なくするためにネストしたパネルを使用してください。プロトタイプ作成にXYLayoutを使用すると、コンポーネントのポップアップ・メニュー(UIエディタ内でコンポーネントを右クリックしてアクセス)上で、コンポーネントの位置揃え機能を利用できます。

UIエディタで設計内容をGridBagLayoutに変換すると、コンテナをGridBagLayoutに変更する前のコンポーネントの位置に基づいて、コンポーネントの制約値が割り当てられます。調整が必要な場合でも、小さな調整のみで済むことがほとんどです。

GridBagLayoutへの変換により、一部のコンポーネント(テキスト領域、フィールド、グループ・ボックスまたはリストなど、実行時にコンテナが広がるため、通常はサイズが大きくなることが予想されるもの)には、weight制約(スペース配分)が割り当てられます。GridBagLayoutへの変換後、設計を調整する必要がある場合、すべてのコンポーネントからまずweight制約を削除(すべて0(ゼロ)に設定)すれば、作業が非常に楽になります。

weight制約値が0(ゼロ)より大きいコンポーネントが1つでもあれば、コンテナ内の全コンポーネント間の複雑な相互作用により、UIエディタ内のサイズ設定の動作が予測しにくくなります。

コンポーネントがスペース配分されているGridBagLayoutは、コンポーネントがコンテナの中央に集まらないため、簡単に見つけることができます。かわりに、コンポーネントはコンテナの枠まで広がります。

ヒント: GridBagLayoutでコンポーネントからスペース配分をすべて取り消すと、次のいずれかが発生します。

スペース配分の使用方法、スペース配分がコンポーネントの相互作用に与える影響の詳細は、後述のweight制約に関するセクションを参照してください。

GridBagLayoutコンテナへのコンポーネントの追加

新規のGridBagLayoutコンテナを作成し、すべてのコンポーネントを最初から追加してGridBagLayoutを作成する場合、次のような動作が予想されます。

「制約」プロパティ・エディタでのGridBagConstraintsの設定

GridBagLayoutの「制約」プロパティ・エディタを使用すると、一部のGridBagConstraintsはUIエディタで指定でき、ソース・コードを編集する必要はありません。

Constraints Editor image

制約の設定に「制約」プロパティ・エディタを使用する大きな利点の1つは、複数のコンポーネントの制約を同時に変更できることです。たとえば、GridBagLayoutコンテナ内のすべてのボタンで同じ内部パディングを使用する場合、[Shift]キーを押しながら各ボタンを選択した後、「制約」プロパティ・エディタを開いて制約を編集できます。

「制約」プロパティ・エディタを使用するには、次のようにします。

  1. GridBagLayoutコンテナ内の変更するコンポーネントを、構造ウィンドウまたはUIエディタで選択します。
  2. プロパティ・インスペクタで「制約」プロパティを選択し、その値フィールドをクリックします。
  3. プロパティ・エディタで制約を設定し、「OK」を押します。

グリッドの表示

UIエディタには、レイアウト内の各セルおよびコンポーネントの状態を正確に把握するためのグリッドを、オプションで表示できます。

マウスを使用した制約変更

UIエディタでは、コンポーネント全体をドラッグするか、コンポーネント上の各サイズ変更ハンドルをクリックすることで、一部の制約をマウスで設定できます。制約をビジュアルに設定する方法は、後述の制約の各セクションで説明します。

GridBagLayoutポップアップ・メニューの使用

GridBagLayoutコンポーネントを右クリックすると、「制約」プロパティ・エディタの一部のプロパティに簡単にアクセスできるポップアップ・メニューが表示され、一部の制約を簡単に設定または削除できます。

メニュー・コマンド

アクション

グリッドの表示

UIエディタにGridBagLayoutグリッドを表示します。

パディングの削除

選択したコンポーネントのすべてのサイズのパディング値(ipadxおよびipady)を0(ゼロ)に設定します。

制約...

選択したGridBagLayoutコンポーネントの「制約」プロパティ・エディタを表示します。

水平方向に最大サイズ化

コンポーネントの最大サイズ化(fill)をHORIZONTALに設定します。コンポーネントはセルの水平方向に最大サイズ化されます。fillがVERTICALであった場合、制約はBOTHに設定されます。

垂直方向に最大サイズ化

コンポーネントの最大サイズ化(fill)をVERTICALに設定します。コンポーネントはセルの垂直方向に最大サイズ化されます。fillがHORIZONTALであった場合、制約はBOTHに設定されます。

最大サイズ化しない

コンポーネントの最大サイズ化(fill)をNONEに変更します。

水平方向のスペース配分

コンポーネントのX方向のスペース配分(weightx)を1.0に設定します。

垂直方向のスペース配分

コンポーネントのY方向のスペース配分(weighty)を1.0に設定します。

スペース配分しない

コンポーネントのスペース配分(weightx、weighty)をどちらも0.0に設定します。

GridBagConstraints

次のセクションでは、各GridBagConstraintsを個別に説明します。各制約の内容と有効値およびデフォルト値を記載し、UIエディタでビジュアルに設定する方法を説明します。

配置指定(anchor)

説明: 
コンポーネントがその表示領域より小さい場合、anchor制約(配置指定)を使用し、レイアウト・マネージャに領域内のどこにコンポーネントを配置すべきかを指示します。
anchor制約は、表示領域より小さいコンポーネントにのみ作用し、fill制約(最大サイズ化)の影響を受けます。たとえば、コンポーネントのfill制約値がGridBagConstraints.BOTH(表示領域の水平、垂直両方向に最大サイズ化される)の場合、コンポーネントが使用可能な領域全体を占有するため、anchor制約は影響を与えません。anchor制約を有効にするには、最大サイズ化(fill)をGridBagConstraints.NONEGridBagConstraints.HORIZONTALまたはGridBagConstraints.VERTICALに設定します。

有効値: 

GridBagConstraints.CENTER
GridBagConstraints.NORTH

GridBagConstraints.NORTHEAST

GridBagConstraints.EAST

GridBagConstraints.SOUTHEAST

GridBagConstraints.SOUTH

GridBagConstraints.SOUTHWEST

GridBagConstraints.WEST

GridBagConstraints.NORTHWEST

デフォルト値: 

GridBagConstraints.CENTER

UIエディタでのanchor制約の設定
セルより小さいコンポーネントの場合、マウスを使用して配置の指定ができます。コンポーネントをクリックして、移動可能なツールバーをドッキングする場合と同様に、表示領域の端の希望の位置までドラッグするだけです。たとえば、ボタンをセルの左上隅に固定するには、ボタンの中央でマウスをクリックし、ボタンの左上隅がセルの左上隅に触れるまでドラッグします。これによりanchor制約値が「左上」に設定されます。

「制約」プロパティ・エディタでも、anchor制約を設定できます。
 

  1. UIエディタでコンポーネントを選択します。
  2. プロパティ・インスペクタで「制約」プロパティをクリックし、「制約」プロパティ・エディタを表示します。
  3. 「配置指定」領域でanchor制約値を選択し、「OK」を押します。

最大サイズ化(fill)

説明: 

コンポーネントの表示領域がコンポーネントに必要なサイズより大きい場合、fill制約(最大サイズ化)を使用して、レイアウト・マネージャに表示領域のどの部分をコンポーネントの領域とするかを指示します。anchor制約(配置指定)と同様に、fill制約は表示領域より小さいコンポーネントにのみ作用します。fill制約を使用して、コンポーネントが指定領域の最大サイズになるよう、レイアウト・マネージャに指示します。

有効値: 

GridBagConstraints.NONE

(コンポーネントのサイズを変更しません。)

GridBagConstraints.BOTH

(領域の垂直、水平両方向に最大になるよう、コンポーネントのサイズを変更します。)

GridBagConstraints.HORIZONTAL

(領域の水平方向にのみ最大になるよう、コンポーネントのサイズを変更します)

GridBagConstraints.VERTICAL

(領域の垂直方向にのみ最大になるよう、コンポーネントのサイズを変更します。)


デフォルト値: 

GridBagConstraints.NONE

UIエディタでのfill制約の指定

コンポーネントのfill制約を指定する最も簡単な方法は、UIエディタでコンポーネントのポップアップ・メニューを使用する方法です。

  1. UIエディタでコンポーネントを右クリックし、ポップアップ・メニューを表示します。
  2. 次のいずれかの操作を行います。
    • 「水平方向に最大サイズ化」を選択し、値をHORIZONTALに設定します。
    • 「垂直方向に最大サイズ化」を選択し、値をVERTICALに設定します。
    • 「水平方向に最大サイズ化」「垂直方向に最大サイズ化」の両方を選択し、値をBOTHに設定します。
    • 「最大サイズ化しない」を選択し、値をNONEに設定します。

「制約」プロパティ・エディタでも、fill制約を設定できます。
 

  1. プロパティ・インスペクタで「制約」プロパティをクリックし、「制約」プロパティ・エディタを表示します。
  2. 「最大サイズ化」領域でfill制約値を選択し、「OK」を押します。

グリッド幅/高さ(gridwidth、gridheight)

説明: 

コンポーネントが使用する1行内のセル数(gridwidth)または1列内のセル数(gridheight)を指定するには、これらの制約を使用します。この制約値はピクセル数ではなく、セル数で指定されます。

有効値: 

gridwidth=nn, gridheight=nn

(ここでnnは、セルの列数または行数を表す整数です。)

GridBagConstraints.RELATIVE (-1)

このコンポーネントが行(gridwidth)または列(gridheight)の最後から2番目のコンポーネントであることを指定します。GridBagConstraints.RELATIVEを指定したコンポーネントは、最後のセルを除く残りのセルすべてを使用します。たとえば、6列の行で、コンポーネントが3番目の列から始まった場合、RELATIVEのgridwidthを指定すると、コンポーネントは第3、第4および第5列を使用することになります。

GridBagConstraints.REMAINDER (0)

このコンポーネントが行(gridwidth)または列(gridheight)の最後のコンポーネントであることを指定します。


デフォルト値: 

 

gridwidth=1, gridheight=1


UIエディタでのgridwidthおよびgridheight制約の指定

「制約」プロパティ・エディタで、gridwidthおよびgridheight制約値を指定できます。
 

  1. プロパティ・インスペクタで「制約」プロパティをクリックし、「制約」プロパティ・エディタを表示します。
  2. 「グリッド位置」領域で、「幅」フィールドにはgridwidthの値を、「高さ」フィールドにはgridheightの値を入力します。行または列でコンポーネントが使用するセル数を指定します。
    • 値をRELATIVEにする場合、-1を入力します。
    • 値をREMAINDERにする場合、0を入力します。
マウスを使用し、コンポーネントを隣接する空のセルに入るようにサイズを変更することで、gridwidthまたはgridheightを変更できます。

グリッド位置(gridx、gridy)

説明: 

コンポーネントの左上隅のグリッド・セルの位置を指定するには、これらの制約を使用します。たとえば、gridx=0は一番左の列、gridy=0は一番上の行です。したがって、gridx=0およびgridy=0制約を指定したコンポーネントは、グリッドの最初のセル(一番上の左)に配置されます。

GridBagConstraints.RELATIVEにより、コンポーネントが次のように、前のコンポーネントと相対的に配置されるよう指定します。

有効値: 

gridx=nn, gridy=nn
GridBagConstraints.RELATIVE (-1)

 

デフォルト値: 

gridx=0, gridy=0

 

UIエディタでのグリッド・セルの位置の指定

マウスを使用し、コンポーネントの左上隅に使用するセルを指定できます。コンポーネントの左上隅の近くをクリックし、新規のセルへドラッグします。複数のセルを使用するコンポーネントを移動する場合、コンポーネントをクリックする際に、必ず左上のセル内でクリックしてください。コンポーネントの他の制約にすでに値が指定されているため、マウスでコンポーネントを新規セルに移動すると、たとえばコンポーネントが使用するセル数が変わるなど、他の制約値に変化が生じる場合があります。不用意に他の制約を変えずに、gridxおよびgridy制約値をより正確に指定するには、「制約」プロパティ・エディタを使用します。
 
  1. プロパティ・インスペクタで「制約」プロパティをクリックし、「制約」プロパティ・エディタを表示します。
  2. 「グリッド位置」領域で、「X」フィールドにgridx値の列数を、または「Y」フィールドにgridy値の行数を入力します。値をRELATIVEにする場合、-1を入力します。

重要: マウスを使用してコンポーネントをすでに使用されているセルに移動すると、UIエディタでは、2つのコンポーネントが互いに重ならないように新規の行および列が挿入されます。一方、「制約」プロパティ・エディタを使用してコンポーネントの位置を変更すると、UIエディタではコンポーネントが重ならないようにするチェックは行われません。

外枠までの空間(insets)

説明: 

コンポーネントと表示領域の枠との間に最小限の余白(パディング)をピクセルで指定するには、insets(外枠までの空間)を使用します。insetは、コンポーネントの枠とそれに対応するセルの枠の間が、常に指定した間隔になるよう指定します。つまり、insetsはコンポーネントをセルの枠から離しておく役割を果たします。たとえば、左右のinsetsを使用してコンポーネントの幅をセルより広くした場合、セルはコンポーネントとそのinsetsが収まるように広がります。fill(最大サイズ化)およびpadding制約(パディング)により、insetsの余白がなくなることは決してありません。

有効値: 

insets = new Insets(n,n,n,n)

上、左、下、右(各パラメータは、表示領域とセルの枠との間隔をピクセル数で表します。)

デフォルト値

insets = new Insets(0,0,0,0)

UIエディタでのinset値の設定

UIエディタでは、選択したGridBagLayoutコンポーネント上に青のサイズ変更ハンドルが表示され、insetsの位置とサイズを示します。青いハンドルをマウスでドラッグし、insetのサイズを拡大または縮小します。

insetの値をより正確に制御するには、「制約」プロパティ・エディタを使用し、ピクセルの正確な数を指定します。

  1. プロパティ・インスペクタで「制約」プロパティをクリックし、「制約」プロパティ・エディタを表示します。
  2. 「外枠までの空間」領域で、上、左、下または右の各insetのピクセル数を指定します。
     
負のinset値を指定できますが、コンポーネントが隣のコンポーネントに重なる可能性があるため、指定しないようにしてください。

サイズ・パディング(ipadx、ipady)

説明: 

これらの制約により、コンポーネントの内部パディングを指定します。ipadxおよびipadyを使用し、コンポーネントの最小サイズに、内部パディング用に追加する余白(ピクセル単位)を指定します。たとえば、コンポーネントの幅は、少なくとも最小幅プラスipadx(ピクセル単位)になります。コード内で指定された数値によって、余白がコンポーネントの両側に均等に分割されます。同様に、コンポーネントの高さは、少なくとも最小の高さプラスipady(ピクセル単位)となります。

例: 

指定サイズが幅30ピクセル、高さ20ピクセルのコンポーネントに余白を指定すると、次のようになります。

有効値: 

ipadx=nn, ipadx=nn

デフォルト値: 

ipadx=0, ipady=0

UIエディタでの内部パディング制約のサイズ設定

コンポーネントの内部パディングのサイズは、コンポーネントの枠上にある任意の黒いサイズ変更ハンドルをクリックし、マウスでドラッグすることにより指定できます。

パディング値をより正確に制御するには、「制約」プロパティ・エディタを使用し、値に使用するピクセルの正確な数を指定します。

  1. プロパティ・インスペクタで「制約」プロパティをクリックし、「制約」プロパティ・エディタを表示します。

  2. 「サイズ・パディング」領域の「幅」および「高さ」値にピクセル数を入力し、「OK」をクリックします。

パディングを簡単に削除(0(ゼロ)に設定)するには、UIエディタ内でコンポーネントを右クリックし、「パディングの削除」を選択します。複数のコンポーネントを選択し、同じ手順ですべてのコンポーネントから一度にパディングを削除することもできます。

負の値も有効です。負の値を指定した場合、コンポーネントは初期サイズより小さくなります。

注意: パディングは、XYLayoutと同様、他のコンピュータ・システム上または他の言語では不正確な場合があります。

スペース配分(weightx、weighty)

説明: 
weight制約(スペース配分)を使用し、GridBagLayoutコンテナのサイズを変更する際、コンテナの余白を水平方向(weightx)および垂直方向(weighty)にどのように配分するかを指定します。weight制約により、コンテナがデフォルト・サイズ以上に拡大されたとき、各セルおよびコンポーネントにどれだけの余白が割り当てられるかが決まります。

スペース配分の値はdouble型で、0.0から1.0の範囲(0.0と1.0を含む)の数値を指定します。0(ゼロ)は、コンポーネントに余白が割り当てられないことを意味し、1.0はコンポーネントに余白がすべて割り当てられることを意味します。

有効値: 

weightx=n.n, weighty=n.n

デフォルト値: 

weightx=0.0, weighty=0.0

UIエディタでのweightxおよびweighty制約の設定

UIエディタでコンポーネントのweight制約を指定するには、コンポーネントを右クリックし、「水平方向のスペース配分」(weightx)または「垂直方向のスペース配分」(weighty)を選択します。これにより、値は1.0に設定されます。スペース配分を取り消す(0(ゼロ)に設定する)には、コンポーネントを右クリックし、「スペース配分しない」を選択します。これは複数のコンポーネントにも可能です。[Shift]キーを押しながらコンポーネントを選択してから右クリックし、適切なメニュー項目を選択します。

weight制約を0.0または1.0以外の値に設定する場合、「制約」プロパティ・エディタで値を設定できます。
 

  1. プロパティ・インスペクタで「制約」プロパティをクリックし、「制約」プロパティ・エディタを表示します。

  2. 「スペース配分」領域で「X」(weightx)または「Y」(weighty)値に0.0と1.0の間の値を入力し、「OK」を押します。

重要: weight制約によりUIエディタでのサイズ設定動作が予測しにくくなる可能性があるため、これらの制約の設定は、GridBagLayoutの設計の最後に行ってください。

weight制約がコンポーネントの動作に与える影響の例

GridBagLayoutおよびGridBagConstraintsの追加情報は、J2SE(Java2 Standard Edition)のドキュメントの「GridBagLayout」および「GridBagConstraints」を参照してください。