Javafxは等しくトグルボタンにまたがっています

Question

次のようなトグルボタンのグループを作る必要があります。白い背景が選択され、2つのボタンは親コンテナの幅の50％を占めます。 2つのトグルボタンがHBox内に配置されています。スタイリング

は、これまでのところ、私が試した、このように立ち往生。

.viewType .toggle-button { 
    -fx-padding: 0 2 0 2; 
    -fx-background-color: #000; 
    -fx-text-fill: white; 
} 

.viewType .toggle-button:selected { 
    -fx-padding: 0; 
    -fx-background-color: white; 
    -fx-text-fill: black; 
    -fx-border-wdith: 2; 
    -fx-border-color: black; 
    -fx-border-radius: 4; 
} 

Answer 1

を、GridPaneを使用します

GridPane grid = new GridPane(); 
grid.getColumnConstraints().addAll(createCol(), createCol()); 
ToggleButton toggle1 = new ToggleButton("..."); 
toggle1.setMaxWidth(Double.MAX_VALUE); 
ToggleButton toggle2 = new ToggleButton("..."); 
toggle2.setMaxWidth(Double.MAX_VALUE); 
grid.addRow(0, toggle1, toggle2); 

// ... 

private ColumnConstraints createCol() { 

    ColumnConstraints col = new ColumnConstraints(); 
    col.setPercentWidth(50); 
    col.setFillWidth(true); 
    return col ; 

} 

のように、列の制約を使用してください（ HBoxではなく）。親を構成することで、グリッド・ペインが親にどれだけ大きなかを制御することができます（詳細は、親に使用されるペインのタイプによって異なります）。

SSCCE：

import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.scene.control.ToggleButton; 
import javafx.scene.control.ToggleGroup; 
import javafx.scene.layout.BorderPane; 
import javafx.scene.layout.ColumnConstraints; 
import javafx.scene.layout.GridPane; 
import javafx.stage.Stage; 

public class EqualSizedButtons extends Application { 

    @Override 
    public void start(Stage primaryStage) { 
     GridPane grid = new GridPane(); 
     grid.getStyleClass().add("viewType"); 
     grid.getColumnConstraints().addAll(createCol(), createCol()); 
     ToggleButton toggle1 = new ToggleButton("A"); 
     toggle1.setMaxWidth(Double.MAX_VALUE); 
     ToggleButton toggle2 = new ToggleButton("This is really big button B"); 
     toggle2.setMaxWidth(Double.MAX_VALUE); 
     grid.addRow(0, toggle1, toggle2); 

     new ToggleGroup().getToggles().addAll(toggle1, toggle2); 

     BorderPane root = new BorderPane(); 
     root.setBottom(grid); 

     Scene scene = new Scene(root, 600, 600); 
     scene.getStylesheets().add("style.css"); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 


    private ColumnConstraints createCol() { 

     ColumnConstraints col = new ColumnConstraints(); 
     col.setPercentWidth(50); 
     col.setFillWidth(true); 
     return col ; 

    } 

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

Answer 2

あなたはJava側でダブル最大にmaxWidthにボタンを設定することができます。これは、HBoxの同じ幅にボタンを提供します。それが有用であるホープ：

btn1.setMaxWidth(Double.MAX_VALUE); 
btn2.setMaxWidth(Double.MAX_VALUE); 

あなたはノードのサイジングと合わせると関連する有用な情報については、以下のリンクをチェックすることができます：あなたは両方のボタンが同じ幅を持つようにしたい場合は

Sizing and Aligning Nodes