X/Y 位置合わせを使用したコンポーネントの位置合わせ

コンポーネントのレイアウト・プロパティーをヌルに設定すると、 「レイアウトのカスタマイズ」ウィンドウを使用して、境界に基づいてコンポーネントを位置合わせできます。

このタスクについて

レイアウトをヌルに設定することにより、各コンポーネントは、その境界に基づきユーザー・インターフェース上に配置され、サイズが指定されます。各コンポーネントの境界を個別に更新するといった単調で誤りを起こしがちな作業を行わずに済むよう、Visual Editor を使用して、コンポーネントのサイズおよび配置を関係に基づき位置合わせおよび調整することができます。

レイアウトをヌルに設定すると、「レイアウトのカスタマイズ」ウィンドウには、コンポーネントのグループに対して機能するいくつかのアクションが示されます。以下のことが行えます。
  • 端に基づいたコンポーネントの位置合わせ
  • 中心点に基づいたコンポーネントの位置合わせ
  • コンポーネントの幅と高さを同じにする
  • 指定範囲内にコンポーネントを縦横均等に配置する

ヌル・レイアウトのコンポーネントを位置合わせ、サイズ変更、および均等割り付けする方法は、以下のとおりです。

手順

  1. 「設計」ビューまたは「Java™ Bean」ビューで、相互に関連付けて位置合わせまたは調整する複数のコンポーネントを選択します。囲み枠選択ツールを使用することも、CTRL キーを押しながら複数のコンポーネントを選択することもできます。 選択した最後のコンポーネントがコントロール・コンポーネント (アンカー) になります。アンカー・コンポーネントは黒いサイズ変更ハンドルで示され、他の選択されたコンポーネントには白いハンドルが示されます。
  2. 以下の手順のいずれかを行い、「レイアウトのカスタマイズ」ウィンドウを開きます。
    • ポップアップ・メニューの「レイアウトのカスタマイズ」を選択します。
    • ツールバーで「レイアウトのカスタマイズ」「レイアウトのカスタマイズ」ツールバー・ボタンをクリックします。

    ヌル・レイアウトの「カスタマイズ・レイアウト」ウィンドウ

  3. コンポーネントを相互に位置合わせするには、次のボタンを使用します。
    • 左揃え - コンポーネントをアンカー・コンポーネントの左端に位置合わせします。
    • 中央揃え - コンポーネントを縦の面にそってアンカー・コンポーネントの中央に位置合わせします。
    • 右揃え - コンポーネントをアンカー・コンポーネントの右端に位置合わせします。
    • 上揃え - コンポーネントをアンカー・コンポーネントの上端に位置合わせします。
    • 中央揃え - コンポーネントを水平方向の面にそってアンカー・コンポーネントの中央に位置合わせします。
    • 下揃え - コンポーネントをアンカー・コンポーネントの下端に位置合わせします。
  4. 選択したコンポーネントのサイズを調整するには、次のボタンを使用します。
    • 幅を合わせる - コンポーネントをアンカー・コンポーネントと同じ幅にします。
    • 高さを合わせる - コンポーネントをアンカー・コンポーネントと同じ高さにします。
  5. コンポーネントの間隔を均等に割り付けるには、最初に以下のいずれかを行って、割り付け領域の境界を指定します。
    • 何もない領域をクリックして、コンテナーを割り付け領域として使用する (これがデフォルトの振る舞い) か、ボックスが表示されている場合は「均等割り付けボックスの非表示」をクリックします。
    • 「均等割り付けボックスの表示」をクリックして、ボックスのハンドルをドラッグし、 割り付けの必要なサイズを指定します。
    次のいずれかのボタンを使用して、コンポーネントを均等に割り付けます。
    • 水平方向に均等割り付け - コンポーネントをアンカー・コンポーネントと同じ幅にします。
    • 垂直方向に均等割り付け - コンポーネントをアンカー・コンポーネントと同じ高さにします。

例えば、3 つの JButton コンポーネントを選択し、これを同じ幅にして、それぞれを左の境界を基準に位置合わせするよう指定することができます。最後に選択された JButton コンポーネントが、他の 2 つのボタンのアンカー (コントロール) として使用されます。「左揃え」アクションでは、 JButton コンポーネントが最後に選択された JButton コンポーネントの 左端に位置合わせされ、「幅を合わせる」アクションでは、選択した JButton コンポーネントが コントロール JButton コンポーネントと同じ幅になります。

「レイアウトのカスタマイズ」ウィンドウの位置合わせボタンは、以下の条件が該当する場合のみ使用可能になります。

コンポーネントの位置合わせや、幅と高さを合わせる他にも、コンポーネントの均等割り付けを行うことができます。コンポーネントが割り付けられる際に、親コンテナーで定義された結合ボックス内で、 等間隔に割り付ける位置に変更されます。例えば、「垂直方向に均等割り付け」 ボタン 「垂直方向に均等割り付け」ボタンをクリックする前は、次の図に示されているように 3 つのボタンが等間隔に割り付けられていません。

「設計」ビューに配置された Bean

「垂直方向に均等割り付け」をクリックすると、 コンポーネントは次の図のように等間隔になります。

垂直方向に均等割り付けされた Bean

3 つのボタンは親の高さ内 (フレームの上端と下端の範囲内) で割り付ける必要がありますので、注意してください。

割り付けに使用される領域をさらに制御できるようにするため、「均等割り付けボックスの表示」 「均等割り付けボックス」 ボタンをクリックすることで「均等割り付けボックス」を使用可能にします。 このボタンをクリックすると、選択したすべてのコンポーネント・エリアの周りにボックスが描画されます。 このボックスは、ハンドルを使用して移動およびサイズ変更できます。「均等割り付けボックス」を使用して ボックスをアクティブにすると、制御を位置変更する際に使用される領域が、「均等割り付けボックス」によって定義されます。 「均等割り付けボックス」がない場合、親コンテナーが均等割り付け用の領域を定義します。 次の図は、均等割り付けボックスを表しています。

均等割り付けボックスを使用した Bean

次の図のように、均等割り付けボックスの移動およびサイズ変更が可能です。

サイズ変更した均等割り付けボックスの Bean

均等割り付けボックスの使用中に、垂直方向の均等割り付けを行う場合、 次の図のように、親コンテナーではなくボックスの境界内で均等割り付けが行わ れます。

ボックス内で垂直方向に均等割り付けされた Bean


フィードバック