ウィンドウサイズのパーセンテージに基づくJavaFXレイアウト

Question

3つのラベルを持つJavaFXでレイアウトを作成する必要があります。各ラベルは水平にセンタリングする必要があります。最初のものはウィンドウの1/4の位置に配置し、2番目のものは中央に垂直に配置し、3番目のものは3/4の位置に配置します。

ウィンドウのサイズを変更した場合、ラベルは相対位置を保持する必要があります。

かなりシンプルなようですが、どうやってそれを行うのか分かりません。私はVBoxを使ってみましたが、垂直配置より細かい制御をする方法はないようです。私はAnchorPaneを見ましたが、これを行う方法がわかりませんでした。

誰かがFXMLまたはプログラムでこれを行う簡単な方法を教えてもらえますか？

Answer 1

これは、GridPane（これ以外の方法もあります）で行うことができます。 4行1列で塗りつぶし、各行の高さを同じにし、各行の下部にラベルを配置するにはRowConstraintsを使用します。 ColumnConstraintsオブジェクトを使用して、ラベルを水平方向に中央揃えにします。

SSCCE：

import javafx.application.Application; 
import javafx.geometry.HPos; 
import javafx.geometry.VPos; 
import javafx.scene.Scene; 
import javafx.scene.control.Label; 
import javafx.scene.layout.ColumnConstraints; 
import javafx.scene.layout.GridPane; 
import javafx.scene.layout.RowConstraints; 
import javafx.stage.Stage; 

public class LayoutExample extends Application { 

    @Override 
    public void start(Stage primaryStage) { 
     GridPane root = new GridPane(); 
     int numRows = 4 ; 
     for (int i = 0 ; i < numRows ; i++) { 
      RowConstraints rc = new RowConstraints(); 
      rc.setPercentHeight(100.0/numRows); 
      rc.setValignment(VPos.BOTTOM); 
      root.getRowConstraints().add(rc); 
     } 
     ColumnConstraints cc = new ColumnConstraints(); 
     cc.setHalignment(HPos.CENTER); 
     cc.setPercentWidth(100); 
     root.getColumnConstraints().add(cc); 

     for (int row = 0; row < 3 ; row++) { 
      Label label = new Label("Label "+(row+1)); 
      root.add(label, 0, row); 
     } 

     Scene scene = new Scene(root, 400, 400); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

    public static void main(String[] args) { 
     launch(args); 
    } 
} 

Answer 2

FXML基づくアプローチと代わりGridPaneのVBoxを使用して次のようになります

<?xml version="1.0" encoding="UTF-8"?> 

<?import java.lang.*?> 
<?import javafx.scene.control.Label?> 
<?import javafx.scene.layout.VBox?> 

<VBox xmlns:fx="http://javafx.com/fxml" alignment="CENTER"> 

    <Label text="Label 1" VBox.vgrow="ALWAYS"> 
     <maxHeight><Double fx:constant="MAX_VALUE" /></maxHeight> 
    </Label> 
    <Label text="Label 2" VBox.vgrow="ALWAYS"> 
     <maxHeight><Double fx:constant="MAX_VALUE" /></maxHeight> 
    </Label> 
    <Label text="Label 3" VBox.vgrow="ALWAYS"> 
     <maxHeight><Double fx:constant="MAX_VALUE" /></maxHeight> 
    </Label> 
</VBox> 

このコードは次のように好きではないかもしれません、私がe(fx)clipse内部DSLを使用しているので、SceneBuilderによって生成されたときそれを生成するために。

EDIT

@James_D（下記のコメントを参照）で示唆したように、これはいつでもフィットソリューションではないかもしれません。そう。上記のFXMLのマイナーアップデートはLabelの周りに "スペーサー"としてRegionを使用することです。

<?xml version="1.0" encoding="UTF-8"?> 

<?import java.lang.*?> 
<?import javafx.scene.control.Label?> 
<?import javafx.scene.layout.Region?> 
<?import javafx.scene.layout.VBox?> 

<VBox xmlns:fx="http://javafx.com/fxml" alignment="CENTER"> 
    <Region VBox.vgrow="ALWAYS"> 
     <maxHeight><Double fx:constant="MAX_VALUE" /></maxHeight> 
    </Region> 
    <Label text="Label 1"/> 
    <Region VBox.vgrow="ALWAYS"> 
     <maxHeight><Double fx:constant="MAX_VALUE" /></maxHeight> 
    </Region> 
    <Label text="Label 2"/> 
    <Region VBox.vgrow="ALWAYS"> 
     <maxHeight><Double fx:constant="MAX_VALUE" /></maxHeight> 
    </Region> 
    <Label text="Label 3"/> 
    <Region VBox.vgrow="ALWAYS"> 
     <maxHeight><Double fx:constant="MAX_VALUE" /></maxHeight> 
    </Region> 
</VBox> 

これは、より柔軟なソリューションです。

Answer 3

以下のConstrainedGridPaneクラスはこれを行うのに役立ちます。私はGridPaneを使用して考えられていなかったが、今振り返ってみると、それは当然の選択だ

public class LabelPane extends ConstrainedGridPane() { 
    public LabelPane() { 
    // ... setup you labels 
    // hgap=0 - 1 column using 100% 
    super.fixColumnSizes(0,100); 
    // vgap=5 - 4 columns using 25% each ... 
    super.fixRowSizes(5, 25,25,25,25); 
    } 
} 

ConstrainedGridPaneソースコード

import javafx.scene.image.ImageView; 
import javafx.scene.layout.BorderPane; 
import javafx.scene.layout.ColumnConstraints; 
import javafx.scene.layout.GridPane; 
import javafx.scene.layout.Region; 
import javafx.scene.layout.RowConstraints; 

/** 
* a GridPane with Column and RowConstraints 
* @author wf 
* 
*/ 
public class ConstrainedGridPane extends GridPane { 


    /** 
    * fix the columnSizes to the given column Width 
    * @param colWidths 
    */ 
    public void fixColumnSizes(int hGap,int... colWidths) { 
    this.setHgap(hGap); 
    // Setting columns size in percent 
    for (int colWidth : colWidths) { 
     ColumnConstraints column = new ColumnConstraints(); 
     column.setPercentWidth(colWidth); 
     getColumnConstraints().add(column); 
    } 
    } 

    /** 
    * fix the rowSizes to the given rowHeights 
    * @param rowHeights 
    */ 
    public void fixRowSizes(int vGap,int... rowHeight) { 
    this.setVgap(vGap); 
    for (int rowWidth : rowHeight) { 
     RowConstraints rowc = new RowConstraints(); 
     rowc.setPercentHeight(rowWidth); 
     getRowConstraints().add(rowc); 
    } 

    // grid.setPrefSize(WINDOW_WIDTH, WINDOW_HEIGHT); // Default width and 
    // height 
    this.setMaxSize(Region.USE_COMPUTED_SIZE, Region.USE_COMPUTED_SIZE); 
    } 
}