• このシリーズの開始点として使用されるプロジェクトを .zip アーカイブとしてダウンロードできます。
• このチュートリアルは、コンテナのレイアウトのデザインにのみ焦点を置いています。GUI への機能の追加は範囲に含まれていません。

グリッド領域

グリッド領域は、「レイアウトをカスタマイズ」ダイアログボックスの右側にあります。ここには、コンポーネントのグリッドレイアウトが表示されます。
このサンプルフォームのコンポーネントはすでに追加されていますが、正しくレイアウトされていません。

ツールバー

グリッド領域の上には、4 つのボタンを持つツールバーが配置されています。ここから、元に戻す、やり直し、パディング、レイアウトのプレビューなどの一般的なコマンドに便利にアクセスできます。

プロパティーカスタマイザ

プロパティーカスタマイザは、「レイアウトをカスタマイズ」ダイアログボックスの左上隅に配置されています。これにより、「アンカー」と「サイズ設定の方法 (Fill)」という、もっとも一般的なレイアウト制約を容易に変更できます。

プロパティーシート

プロパティーシートは、プロパティーカスタマイザの下に配置されています。ここには、選択されたコンポーネントのレイアウト制約が表示されます。

移動

必要に応じて、単純なドラッグ＆ドロップを使用してコンポーネントを移動できます。コンポーネントは、選択されると緑色で強調表示されます。コンポーネントをドラッグしている間、その「グリッド X」および「グリッド Y」プロパティーは新しい位置を反映するように変更されます。必要に応じて、新しい列と行が自動的に作成されます。

下の図に示すようなレイアウトを作成するには、次のように、列 3 から列 12 のコンポーネントを移動します。

1. 「Surname:」ラベルおよび隣接するテキストフィールドを 2 行目の先頭の 2 つのセルにドラッグします。
2. 「Street:」ラベル、隣接するテキストフィールド、および隣接する「Browse」ボタンを 3 行目の先頭の 3 つのセルにドラッグします。
3. 「City:」ラベル、隣接するテキストフィールド、および隣接する「Browse」ボタンを 4 行目の先頭の 3 つのセルにドラッグします。
4. 「State:」ラベルおよび隣接するコンボボックスを 5 行目の先頭の 2 つのセルにドラッグします。

これで、コンポーネントがターゲットレイアウトに従って配置されました。

注: コンポーネントが移動されると、ターゲットセルは緑色で強調表示されます。

サイズ変更

コンポーネントを選択したときにその境界の周りに表示される小さい四角形のサイズ変更ハンドルをドラッグすることによって、コンポーネントのサイズを変更できます。

「First name:」および「Surname:」テキストフィールドのサイズを変更して、隣接する 2 つのセルを占有するようにするには、次の手順に従います。

1. Ctrl キーを押しながら 2 つの JTextField コンポーネントをクリックして選択します。
2. 両方の JTextField が選択された状態で、セルの右端の上にカーソルを置いてクリックし、オレンジ色で強調表示されたガイドラインに右側の列 3 の隣接するセルが含まれるまでドラッグします。
3. カーソルを離すと、コンポーネントのサイズが変更されます。

次の図に示すように、「First name:」および「Surname:」テキストフィールドが 2 つのセルにまたがるように拡張されました。占有されているセルが強調表示されます。

「サイズ設定の方法 (Fill)」レイアウト制約の指定

「First name:」および「Surname:」テキストフィールドは 2 つのセルを占有していますが、優先サイズがあるために表示領域の中央に配置されています。続行する前に、「サイズ設定の方法 (Fill)」レイアウト制約を使用して、これらのセルの領域全体を埋める必要があります。

これらのテキストフィールドの高さを変更せずに、その幅を水平方向に表示領域いっぱいに広げるには、プロパティーシート領域にある「サイズ設定の方法 (Fill)」コンボボックスで「水平」を選択します。

プレビュー

これで ContactsBasicInitial フォームのレイアウトが正常に完了したため、インタフェースで結果を表示してみることができます。カスタマイザのツールバーにある「レイアウトをテスト」ボタン () をクリックすることによって、作業中のフォームをプレビューできます。専用のウィンドウにフォームが開き、構築、実行する前にフォームをテストできます。

プレビューは、レイアウトの動的な動作 (たとえば、デザインされたコンテナのサイズが変更されたときのレイアウトの動作のようす) をテストする場合に役立ちます。

「ウエイト X」および「ウエイト Y」制約の指定

ウエイトを指定すると、GridBagLayout コンポーネントの外観に大きな影響を与えます。ウエイトは、列間 (「ウエイト X」) および行間 (「ウエイト Y」) でのスペースの分散方法を決定するために使用されます。これは、サイズ変更の動作を指定するために重要です。
ウエイトは一般に、極端な値として 0.0 と 1.0 で指定されます。必要に応じて、この範囲内の数値が使用されます。数値が大きいと、そのコンポーネントの行または列により多くのスペースを与えることを示します。

プレビューされたコンテナのサイズを水平方向に変更しようとしても、レイアウトコンポーネントのサイズが同じまま、コンテナの中央に集まったままの状態になることがわかります。「サイズ設定の方法 (Fill)」制約が「水平」に設定された「First name:」や「Surname:」のフィールドでさえ、「サイズ設定の方法 (Fill)」制約がセルのサイズではなく、セルの内部領域を示しているため、拡張されません。つまり、「サイズ設定の方法 (Fill)」属性が「なし」以外の値に設定されたコンポーネントは、拡張が「可能」なことを示していますが、拡張が「必要」なことを示しているわけではありません。
「ウエイト X」および「ウエイト Y」レイアウト制約は、コンポーネントの水平および垂直方向への拡張が「必要」かどうかを決定します。
行 (または列) 内にある 2 つのコンポーネントの「ウエイト X」(または「ウエイト Y」) 制約の値が 0 以外である場合、これらの値によって個々のコンポーネントの拡張の量が決定されます。たとえば、これらの値が 0.6 と 0.4 である場合、最初のコンポーネントは使用可能な余分なスペースの 60% を取得し、2 つ目のコンポーネントは 40% を取得します。

デザインされたコンテナのサイズを水平方向に正しく変更するには、次を実行します。

1. GridBag カスタマイザのグリッド領域で、「First name:」ラベルの右にあるテキストフィールドを選択します。
2. 「ウエイト X」レイアウト制約値フィールドに「1.0」と入力し、Enter キーを押します。
3. GridBag カスタマイザのグリッド領域で、
「Surname:」ラベルの右にあるテキストフィールドを選択します。
4. 「ウエイト X」レイアウト制約値フィールドに「1.0」と入力し、Enter キーを押します。
5. GridBag カスタマイザのグリッド領域で、「Street」ラベルの右にあるテキストフィールドを選択します。
6. 「サイズ設定の方法 (Fill)」コンボボックスで「水平」を選択し、Enter キーを押します。
7. 「ウエイト X」レイアウト制約値フィールドに「1.0」と入力し、Enter キーを押します。
8. GridBag カスタマイザのグリッド領域で、「City:」ラベルの右にあるテキストフィールドを選択します。
9. 「サイズ設定の方法 (Fill)」コンボボックスで「水平」を選択し、Enter キーを押します。
10. 「ウエイト X」レイアウト制約値フィールドに「1.0」と入力し、Enter キーを押します。

デザインされたコンテナのサイズが水平方向に正しく変更されることを確認するには、カスタマイザのツールバーにある「レイアウトをテスト」ボタン () をクリックし、ContactsBasicInitial フォームの境界をドラッグします。

アンカー設定

アンカー設定は、コンポーネントがその表示領域より小さいときに、そのコンポーネントを配置する (領域内の) 場所を決定するために使用されます。

前の節での ContactsBasicInitial フォームの水平方向のサイズ変更中に、「State」コンボボックスが「State」ラベルから離れることにおそらく気付いたはずです。このコンボボックスの優先サイズは対応するセルのサイズより小さいため、GridBagLayout はデフォルトで、このコンポーネントをセルの中央に配置します。

この動作を変更するには、次のように「アンカー」レイアウト制約を指定します。

1. 「State」ラベルの右にあるコンボボックスを選択し、「アンカー」コンボボックスの右にある矢印ボタン () をクリックします。
2. ドロップダウンリストから「行の始め」を選択します。

フォームのサイズが水平方向に変更されたとき、「State」コンボボックスはフォームの左側に固定されるようになりました。

ラベルを現在の中央ではなく、左側にそろえるには、次の手順に従います。

1. 「First name:」、「Surname:」、「Street」、「City」、および「State」ラベルを選択します。

注: 最初のコンポーネントでマウスの左ボタンを押し、そのまま、すべてのラベルを囲む矩形を描くように最後のコンポーネントまでドラッグすることによって、複数のコンポーネントを選択できます。マウスを離すと、下に示すように、5 つのすべてのコンポーネントがオレンジ色の境界線と緑色の背景で強調表示されます。



2. これらのラベルの「アンカー」レイアウト制約を「行の始め」に変更します。
   これらのラベルが左側に固定されました。

要素間隔

デフォルトでは、各コンポーネントに外側のパディングはありません。「インセット」制約は、コンポーネントの外側のパディング、つまり、コンポーネントとその表示領域の端の間の最小のスペースを指定します。

現在のレイアウトでは、各コンポーネントが互いに近すぎる位置に配置されています。それらを切り離すには、次を実行します。

1. Ctrl キーを押しながら、すべてのコンポーネントをクリックして選択します。
2. 「インセット」制約テキストフィールドの右にあるボタンを押します。
3. 表示されたダイアログボックスで、「上:」と「左:」の値を 5 に変更し、「了解」をクリックします。
   作成されたフォームを開くと、ContactsBasicFinal.java ファイルのフォームのように表示されます。