Javafx bouton de bascule également étendu

Question

J'ai besoin de faire un groupe de bouton bascule comme suit, avec le fond blanc étant le bouton sélectionné, et deux boutons prennent 50% de largeur du conteneur parent. Deux boutons à bascule sont placés à l'intérieur de HBox. Le style

Jusqu'à présent, j'essayé, coincé comme ça.

.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

Si vous voulez que les deux boutons pour avoir une largeur égale, utilisez un GridPane au lieu d'un HBox, et utiliser des contraintes de colonne pour faire les deux colonnes largeurs égales:

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 ; 

} 

Vous pouvez également contrôler la taille du volet de la grille dans le parent en configurant le parent (les détails dépendent du type de volet utilisé pour le parent).

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

Vous pouvez définir les touches maxWidth à max double dans la partie java. Cela donnera à vos boutons la même largeur dans HBox. L'espoir, il est utile:

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

Vous pouvez vérifier le lien suivant pour obtenir des informations utiles relatives à des noeuds de dimensionnement et l'alignement:

Sizing and Aligning Nodes