appendix> Layout> GridBagLayout TOPUPPREVNEXT

GridBagLayout と GridBagConstraints

【主な機能】

グリッドレイアウトのように格子状に配置するのですが、列の幅や、行の高さ、 などを個別に指定できます。 格子状の配置場所となるコンポーネントのレイアウトに GridBagLayout を指定しておき、 配置するコンポーネントに対して、 GridBagConstraints をつかって、 格子のどこから何マス使って配置するか、 列の幅をどうするか、行の高さをどうするか、 外枠の大きさが広がった場合に自分の大きさも広げるのか、 外枠が小さくなった場合にいいなりにちじんでしまうのか、 などを指定します。

指定する項目が多く煩雑ですが、 それぞれのフィールドの意味や働きは単純です。 かなり自由なレイアウトがができるようになります。 例題１、２のように グリッドと配置をきめ、拡大しない状態で一旦 fill を調整し、 拡大した状態で weight を調整し、weight がゼロの行や列にあるコンポーネントの anchor を調整し、 最後に insets を調整するという手順ですすめると簡単に設定できます。

【関連するクラス】


   java.lang.Object 
     ├java.awt.GridBagLayout
     ├java.awt.GridBagConstraints
     └java.awt.Insets

【コンストラクタ】

コンストラクタ機能
GridBagLayout ( ) グリッドバグレイアウトマネージャを生成します。 生成したものを、受取側のコンポーネントに setLayout します。
GridBagConstraints ( ) デフォルト値をフィールドに指定した配置規則を生成します。 生成した後、必要なフィールドを設定してから、 配置するものに対して setConstraints メソッドで設定をしてから add を行うか、または、 add する際のパラメータに指定します。
１１個のパラメータをぶらさげて 全フィールドを設定するコンストラクタもありますが、推奨されていません。
Insets ( int top ,
int left ,
int bottom ,
int right )
 「外部パディング」に使用するインセットを生成します。
top 上側の隙間
left 左側の隙間
bottom 下側の隙間
right 右側の隙間

【GridBagConstraints クラスのフィールド】

フィールド値
int grigx

int gridy		 配置する場所の列、行を指定します。配置するものが複数の列や行にまたがる場合は、 左上隅の位置を指定します。
原点（左上隅）は gridx が 0 、 gridy が 0 です。 gridx = １ はその右、 gridy = １ はその下になります。
(0,0) (1,0) (2,0) (3,0) dots-24x24-yoko.gif
(0,1) (1,1) (2,1) (3,1)
(0,2) (1,2) (2,2) (3,2)
dots-24x24-tate.gif dots-24x24-naname.gif
直前に配置したものの右のマスに配置する場合は、 gridx に GridBagConstraints.RELATIVE を指定します。 直前に配置したもの下のマスに配置する場合は、 gridy に GridBagConstraints.RELATIVE を指定します。 両方とも RELATIVE のときは、横方向に順に配置されます。
int gridwidth

int gridheight		 配置するものが、何列あるいは何行を占めるかを指定します。
行の最後までを占有する場合には、、 gridwidth に GridBagConstraints.REMAINDER を設定します。 行の右側のあいている部分を占有するには、 gridwidth に GridBagConstraints.RELATIVE を設定します。
列の最後までを占有する場合には、 gridheight に GridBagConstraints.REMAINDER を設定します。 列の下側のあいている部分を占有するには、 gridheight に GridBagConstraints.RELATIVE を設定します。
double weightx 外側が横方向に広がった場合、配置した場所の横幅を、 ほかの部分の横幅とくらべて、多めに広げるか少なめに広げるかを指定します。 weight の値自体ではなく、他の列の要素に指定された weightx との比率で決定されます。
横方向の全て指定がゼロの場合には、左右があいて中央付近に配置されます。
double weighty 外側が縦方向に広がった場合、配置した場所の高さが、 ほかの行の高さとくらべて、多めに広がるのか少なめに広がるかを指定します。 他の行に指定された weighty との比率で決定されます。
縦方向の全ての指定がゼロの場合、上下があいて中央付近に配置されます。
int anchor 貼り付けるマスが自分自身より大きい場合に、マスのどの辺に配置するかを 次のいずれかで指定します。
anchor-1.gif
配置された場所が広げられた場合にも適用されます。 自分自身がマスの大きさまで広がるように指定した場合、 広がる方向に対しては意味がありません。
int fill 貼り付けるマスが自分自身がより大きい場合に、 自分自身をどのように広げるかを次のいずれかで指定します。
NONE ―― 大きさを変えない
BOTH ―― 縦、横いっぱいに広げる
HORIZONTAL ―― 横方向のみ広げる
VERTICAL ―― 縦方向にのみ広げる
int ipadx
int ipady		 「内部パディング」。 自分自身の最小サイズよりも、横に ipadx の２倍 、 縦に ipady の２倍だけ大きく表示されます。
Insets insets 「外部パディング」。 自分自身とマスの枠の間にあけるべき間隔を指定します。

【よく使われるメソッド】

メソッド機能
void setConstraints (
Component comp ,
GridBagConstraints constraints )
 GridBagLayout クラスのメソッドです。
constraints に指定された配置規則を、 comp に設定します。
void add (
Component comp ,
Object constraints )
 Container クラスのメソッドです。
comp に指定されたコンポーネントを、 このコンテナの最後に追加します。 constraints に指定されたコンポーネントの配置規則は レイアウトマネージャが使用します。

【例１】

gridx gridy gridwidth gridheight

gridx、 gridy、 gridwidth、gridheight の使用例です。 REMAINDER や RELATIVE の働きを理解しましょう。 たとえば、下図のようにコンポーネントを配置する場合を考えましょう。。 No.2 〜 No.4 は現在は３個ですが、 将来４個横に並べるような改造が予定されているとします。

GridBagLayout4-1.gif

プログラム LayoutSampleGridBagLayout4.java

9〜10行目 import
２つのクラスを参照します。
24行目
グリッドバグ・レイアウトマネージャの生成。
25行目
配置規則の生成。
30〜33行目
No.1 は、グリッド(0,0) に配置し、幅は１マス、長さは列の最後まで
35〜37行目
配置するもの p1 に配置規則を設定し、配置します。
gridx:0 gridy:0 gridwidth:1 gridheight:REMAINDER
40〜41行目
No.2 は、No.1 の右側に配置し、高さは１マス。
gridx:RELATIVE gridy:0 gridwidth:1 gridheight:1
46〜52行目
No.3、No.4は配置規則は変更せずに配置のみを実行。 gridx が RELATIVE のため 順に右側に配置されます。
54〜56行目
No.5 は No.4 の右側に配置するので、gridx と gridy は変更しなくてもよい。
gridx:RELATIVE gridy:0 gridwidth:1 gridheight:REMAINDER
〜行目
58〜61行目
No.6 は、グリッド(1,1) から行のあいている部分全部。
gridx:1 gridy:1 gridwidth:1 gridheight:RELATIVE
65行目
No.7 は、No.6 の下側に配置。
gridx:1 gridy:RELATIVE gridwidth:1 gridheight:RELATIVE

実行結果　　GridBagLayout4-2.gif

この状態で各コンポーネントは割り当てられた領域の中央に配置されています。 配置の状況が判るように、コンポーネントを配置されている領域全体に広げてみましょう。

プログラム LayoutSampleGridBagLayout4a.java

30行目
constraints.fill = GridBagConstraints.BOTH ; を追加。

実行結果　　GridBagLayout4-3.gif

全コンポーネントが領域いっぱいに広がります。 ここでウィンドウを広げてみましょう。

実行結果　　GridBagLayout4-4.gif

パネルは、広がったフレームの中央に配置されています。 フレームの拡大・縮小に追随するようにするには、 weightx と weighty をゼロ以外に設定する必要があります。

プログラム LayoutSampleGridBagLayout4b.java

31〜32行目
weightx と weighty に 100.0 を設定。

実行結果　　GridBagLayout4-5.gif

全コンポーネントのweightx と weighty が 100.0 になっている状態です。どの欄もおなじ比率で拡大されます。

さて、ここで No.4 の右側にコンポーネントを追加してみましょう。

プログラム LayoutSampleGridBagLayout4c.java

57〜58行目
配置規則はいじらずに、コンポーネントの追加だけを行います。

実行結果　　GridBagLayout4-6.gif

No.5 の gridx や No.6 〜 No.7 の gridheight に、RELATIVE と指定してあったので配置規則を変更せずにコンポーネントを追加することができました。

【例２】

fill weightx anchor insets

具体的なコンポーネントの例をみてみましょう。 20.2 ハノイの塔 の画面の下 （ BorderLayout の SOUTH ）に貼り付けられた、 ラベルや、テキスト・フィールド、スライダ、ボタン などが配置されたパネルのコーディングをのぞいてみましょう。 パネルの概観は次のようなものです。

レイアウトの設計をするために描いたグリッドは下図のとおりです。 ウィンドウが広げられた場合、１列目と６列目が主に広がり、 ４列目が遠慮がちに広がるようにしたいと思います。 BorderLayout の SOUTH 用のパネルですから、縦に広げられることは想定していません。

Hanoi.java から関連する部分を抜き出して、 デフォルトの配置規則で表示してみました。

プログラム LayoutSampleGridBagLayout2.java

19行目
GridBagLayout レイアウトマネージャを生成し、gridbag という名前をつけます。
20行目
配置規則を生成し、constraints という名前をつけます。
21行目
レイアウトマネージャ gridbag を指定してパネルを生成し、 menupanel という名前をつけます。
17〜73行目
配置するコンポーネントの生成と、配置規則 constraints の設定と、 パネル menupanel への貼り付け。 実際に見えるもの以外に グリッドの１、４、６列に空白のラベルを貼り付けています。 （ 34行目 glue1、50行目 glue2、52行目 glue3 ）

実行結果　

FlowLayout のように左から右へ配置されます。

gridx、 gridy、 gridwidth、gridheight を指定しましょう。

プログラム LayoutSampleGridBagLayout2a.java

コンポーネントを生成した次の行に、 配置する位置と大きさを指定する代入文を挿入しています。 gridwidth や gridheight が 1 ではない４コンポーネントのための処理は以下の箇所です。
43行目
glue1 のために gridheight を 2 に設定。
51〜52行目
slider ために、 gridwidth を 2 に設定し、 gridheight を 1 に戻しています。
59行目
"quick" ラベルのために、 gridwidth を 1 に戻しています。
71行目、78行目
glue2 のために gridheight を 2 に設定し、 "go" ボタンのために 1 に戻しています。
91行目、98行目
glue3 のために gridheight を 2 に設定し、 " move count " ラベルのために 1 に戻しています。

実行結果　

"go" ボタン と "stop" ボタンの大きさをそろえるために、 fill を設定しましょう。 "quick" ラベルと "slow" ラベルの配置を調整するために、 anchor を設定しましょう。

プログラム LayoutSampleGridBagLayout2b.java

57行目、64行目、71行目、
"quick" ラベルのために anchor をNORTHWEST に設定し、 "slow" ラベルのために NORTHEAST に設定し、glue2 以降のために CENTER に戻しています。
82行目、96行目
２つのボタンのために、 82行目で fill を BOTH に設定し、 それ以降のコンポーネントのために 96行目で NONE に戻しています。

実行結果　

両端が狭いのが気になります。 また、ウィンドウを広げてみると weightx の設定が必要なことが判ります。(下図)

glue1 と glue3 の weightx に 100.0 を、 glue2 には 50.0 を設定してみましょう。 両端がウィンドウの枠にくっつき過ぎないよう、"number of disk" や "move count" など両端のコンポーネントにインセットを指定します。

プログラム LayoutSampleGridBagLayout2c.java

28行目
左端の "Number of Disks" ラベルとテキストフィールドのために、 インセットを生成し、constraints.insets に設定します。 実際にはラベルのほうが幅が広いので、 ラベルの左側とウィンドウのワクの間に 10 ピクセルのスキマができます。
45行目
glue1 の weightx を 100.0 に設定。
46行目
glue1 以降のために、insets を ゼロに戻します。
56行目
slider 以降のために、weightx を 0.0 に戻します。
79行目
glue2 の weightx を 50.0 に設定。
87行目
"go" ボタン以降のために、weightx を 0.0 に戻します。
102行目
glue3 の weightx を 100.0 に設定。
111〜112行目
"move count" ラベルと countLabel のために、 weightx を 0.0 に戻し、 insets を設定。 このインセットによって右側にスキマがあきます。

実行結果　

ウィンドウ広げてみましょう。

完成です。縦方向には伸びないことも確認できました。

【例３】

GridBagConstraints のデフォルト値を確認するプログラムです。

ソースプログラム LayoutSampleGridBagLayout3.java

実行結果

GridBagLayout3-1.gif

更新日：2004-11-01