GridBagLayoutはSwingレイアウトマネージャの一つですが、これの使い方を覚えるとSwingアプリケーションのコンポーネント配置の柔軟性が格段に向上します。というか、このレイアウトマネージャの概念を避けて通ることはできません。直感的に使えるGroupLayout、最悪でもピクセル完全指定のAbsoluteLayoutで組むこともできますが微妙なサイズの変更を要求された場合は軽く死ねます。
GridBagLayoutに限らず、世の中にはこういうレイアウトを手書きするのは効率的ではないので、NetBeansを使ってみます。
このようなレイアウトのフォームを作る場合、ウィンドウを広げたときには(1,0)の幅、(0,1)の高さ、(1,1)の幅と高さは可変にしたいと考えます。
まずは適当に4つのパネルをペタペタ貼り付けましょう。デフォルトではGroupLayout(フリーデザイン)で配置になっていると思います。下のような感じになりました。*1
次にインスペクタウィンドウ上でレイアウトを適用したいパネルを右クリックして[レイアウトを設定]->[グリッドバッグレイアウト]を選択します。なにやら変わり映えがしませんね。
GridBagLayoutカスタマイザ
*2という大変便利なツールがあるので、ぜひ使ってみましょう。
まず、内側のパディングがいらないのでどっちも0にしちゃいましょう。するとバグなんじゃないかってくらい凄惨な光景になります。
まだ慌てないでください。じゃぎじゃぎにグリッドが切り刻まれています。みにくいですね、各パネルのpreferredSize(推奨サイズ)をみると[0, 0]になっているじゃないですか。GridBagLayoutは推奨サイズを基準としてレイアウトを試みるのです。なのでこんな[0,0]のパネルを見ていてもあまり意味はありません。全部のパネルの推奨サイズを[100, 100]にしちゃいましょう。
すこしおちついてきましたね。こんなだらしのない配置になっているのはデフォルトで配置されるグリッドが間違っているからです。
jPanel1は(0,0)に、jPanel3は(0,1)に、jPanel2は(1,0)、そしてjPanel4は(1,1)に配置しましょうか。左のレイアウトウィンドウのグリッドX,グリッドYでパネルの位置を明示的に指定してください。内側のパディングはグリッド内部につくられる隙間のことですが、今は邪魔なので全部のパネルについて0にしてください。インセットも理解の妨げにしかならないので全部0。グリッド幅と高さについても同様に全部1で。2にするとひとつのパネルが2グリッド占有することになるのでやめておきます。
するとこんな感じで周りに4つの四角がまとまってくれました。
GridBagLayoutカスタマイザの真髄はここからです。
右下の緑のパネルにウェイトX=1、ウェイトY=1を指定すると周りのグリッド内に収まるだけの周りの余白が緑のパネルの周りに一身に集められます。他のパネルに付いても余白が割り当てられているのがわかると思います。ウェイトの概念は余分な領域の配分方法を設定する – GridBagLayoutクラス – Swingが詳しいです。
レイアウトウィンドウの「サイズ設定の方法(Fill)」というプロパティがあると思うのですが、オレンジのパネルに「垂直」を指定してください。すると垂直方向に余った分までパネルサイズが拡張されました。同様に紫のパネルは「水平」、緑のパネルは「両方」を指定します。
目のマークをクリックしてデザインをプレビューしてみましょう。
伸ばしてみるとそのサイズに合わせてサイズが適切に調整されることがわかると思います。逆にあんまり小さくするとこれらの配置の最大推奨サイズ内に収まりきらなくなって、ガタッとカラム落ちを起こすので気をつけてください。
*1:分かりやすくするために背景色をつけています。
*2:今日のツール: NetBeansのGridBagLayoutカスタマイザ (ブログ: 岡崎 – Okazaki’s blog)
投稿者紹介
-
私たちは、テクノロジに魅せられた個性あふれるメンバーによって構成された茨城県日立市に本社を構えるベンチャー企業です。
”テクノロジを通して「驚き」と「感動」を創造し、人々の「夢」と「笑顔」を支えます。” の経営理念をモットーに明るい未来を描き、ワクワクする企画提案を続けて参ります。
最近のエントリ
- レポート2019.10.28ユニキャストレストランを開催しました🍳
- レポート2019.08.29社内研修ワークショップ~マシュマロ・チャレンジ~
- レポート2019.08.06Computex/InnoVEX 出展者・通訳として参加してきました。
- レポート2018.06.12Computex 2018 レポート