JavaFXとレイアウト¶
レイアウトコンテナの使い方メモ
マージンとパディング¶
- マージンは、親レイアウトの中で自身のコンポーネントと他のコンポーネントとの間の隙間
- パディングは、自身のコンポーネントの境界(Border)とコンポーネントの中身(Content)との間の隙間
レイアウト部品¶
HBox¶
- デフォルトではHBoxに配置したコントロールは左詰
HBoxに配置したコントロールの1つを最大にする¶
複数のコントロールを配置し、そのうち1つを最大にするには、そのコントロールのHgrowをALWAYSに設定します。
HBoxに、Label、TextField、Buttonを貼ったとき、ウィンドウを大きくすると右側が余白となっている。
真ん中のTextFieldのレイアウト設定でHBox ConstraintsのHgrowをALWAYSに設定したとき、ウィンドウを大きくするとTextFieldが幅を大きくとっている。
SceneBuilderでの設定箇所
- Labelを最大化するとき、Max WidthをUSE_COMPUTED_SIZEからMAX_VALUEにします。
Group¶
Groupは、Groupに追加された子ノードの集まりの境界を自身の大きさとし、Group自身には大きさを設定できません。
また、レイアウトをしないので、子ノードの情報がそのまま表示されます。
Group に Shape を貼る¶
Group に、Shapeのサブクラス(Circle)を貼ってみます。
このように表示が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 全体が表示されます。
項目 | 値 |
---|---|
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を幅一杯の大きさにしてくれます。
コンテナの表示・非表示¶
コンテナを動的に表示・非表示する¶
コンテナのmanagedプロパティとvisibleプロパティを切り替えます。
次は、ToggleButtonの状態で表示・非表示を切り替えるコンテナの例です。
ToggleButton paneToggle;
VBox rightPane;
:
rightPane.managedProperty().bind(paneToggle.selectedProperty());
rightPane.visibleProperty().bind(paneToggle.selectedProperty());