プロジェクト

全般

プロフィール

JavaFXとレイアウト

レイアウトコンテナの使い方メモ

マージンとパディング

  • マージンは、親レイアウトの中で自身のコンポーネントと他のコンポーネントとの間の隙間
  • パディングは、自身のコンポーネントの境界(Border)とコンポーネントの中身(Content)との間の隙間

レイアウト部品

HBox

  • デフォルトではHBoxに配置したコントロールは左詰

HBoxに配置したコントロールの1つを最大にする

複数のコントロールを配置し、そのうち1つを最大にするには、そのコントロールのHgrowをALWAYSに設定します。

HBoxに、Label、TextField、Buttonを貼ったとき、ウィンドウを大きくすると右側が余白となっている。

HBox-01.png

真ん中のTextFieldのレイアウト設定でHBox ConstraintsのHgrowをALWAYSに設定したとき、ウィンドウを大きくするとTextFieldが幅を大きくとっている。

HBox-02.png

SceneBuilderでの設定箇所

HBox-03.png

  • Labelを最大化するとき、Max WidthをUSE_COMPUTED_SIZEからMAX_VALUEにします。

Group

Groupは、Groupに追加された子ノードの集まりの境界を自身の大きさとし、Group自身には大きさを設定できません。
また、レイアウトをしないので、子ノードの情報がそのまま表示されます。

Group に Shape を貼る

Group に、Shapeのサブクラス(Circle)を貼ってみます。

group_circle-1.png

このように表示がCircleの右下1/4しか見えません。このとき、Circleのプロパティは次の通りです。

項目
Radius 100
CenterX 0
CenterY 0
LayoutX 0
LayoutY 0
Layout Bounds -100,-100 200x200
Bounds In Local -100,-100 200x200
Bounds In Parent -100,-100 200x200

これは、Circleが (0, 0) を中心に半径100の幾何情報となっているのに対して、画面座標系では (0, 0) を左上隅として正の値を表示するためです。
CenterX と、CenterY とを、100, 100 に設定すると、Layout Bounds が 0,0 200x200 となり、Circle 全体が表示されます。

group_circle-2.png

項目
Radius 100
CenterX 100
CenterY 100
LayoutX 0
LayoutY 0
Layout Bounds 0,0 200x200
Bounds In Local 0,0 200x200
Bounds In Parent 0,0 200x200

または、LayoutX と、LayoutY とを、100, 100 に設定しても、全体が表示されます。

項目
Radius 100
CenterX 0
CenterY 0
LayoutX 100
LayoutY 100
Layout Bounds -100,-100 200x200
Bounds In Local -100,-100 200x200
Bounds In Parent 0,0 200x200

コントロールの大きさ

VBoxやBorderPaneに配置したコントロールの大きさを幅一杯に揃える

ButtonやLabelなどは、テキストプロパティに設定された文字を収める幅がコントロールの幅となります。
そのため、例えばVBoxに複数のButtonやLabelを配置すると、それぞれのテキストプロパティの文字列に応じた幅で表示され、デザインとしては大きさがばらばらとなってしまいます。

この場合、配置するButtonやLabelのMax WidthプロパティをMAX_VALUEに設定すると、VBoxなどのレイアウト部品がButtonやLabelを幅一杯の大きさにしてくれます。

vbox_maxwidth-1.png

コンテナの表示・非表示

コンテナを動的に表示・非表示する

コンテナのmanagedプロパティとvisibleプロパティを切り替えます。
次は、ToggleButtonの状態で表示・非表示を切り替えるコンテナの例です。

ToggleButton paneToggle;
VBox rightPane;
  :
rightPane.managedProperty().bind(paneToggle.selectedProperty());
rightPane.visibleProperty().bind(paneToggle.selectedProperty());


1年以上前に更新