javafx
layout

StackPane

StackPane espone i suoi figli in uno stack back-to-front.

L'ordine z dei bambini è definito dall'ordine dell'elenco dei bambini (accessibile chiamando getChildren ): il 0 ° bambino è l'ultimo e l'ultimo bambino in cima allo stack.

Lo stackpane tenta di ridimensionare ogni bambino per riempire la propria area di contenuto. Nel caso in cui un bambino non possa essere ridimensionato per riempire l'area dello StackPane (o perché non era ridimensionabile o la sua dimensione massima lo ha impedito) allora sarà allineato all'interno dell'area usando la proprietà alignmentProperty dello stackpane, che di default è Pos.CENTER.

Esempio

// Create a StackPane
StackPane pane = new StackPane();

// Create three squares
Rectangle rectBottom = new Rectangle(250, 250);
rectBottom.setFill(Color.AQUA);
Rectangle rectMiddle = new Rectangle(200, 200);
rectMiddle.setFill(Color.CADETBLUE);
Rectangle rectUpper = new Rectangle(150, 150);
rectUpper.setFill(Color.CORAL);

// Place them on top of each other
pane.getChildren().addAll(rectBottom, rectMiddle, rectUpper);

HBox e VBox

I layout di HBox e VBox sono molto simili, entrambi presentano i loro figli in una singola riga.

Caratteristiche comuni

Se un HBox o un VBox hanno un bordo e / o un padding set, i contenuti saranno disposti all'interno di questi riquadri.

Distribuiscono ogni bambino gestito a prescindere dal valore della proprietà visibile del bambino; i bambini non gestiti vengono ignorati.

L'allineamento del contenuto è controllato dalla proprietà di allineamento, che per impostazione predefinita è Pos.TOP_LEFT .

HBox

HBox espone i suoi figli in un'unica fila orizzontale da sinistra a destra.

HBox ridimensiona i bambini (se ridimensionabili) alla loro larghezza preferita s e usa la proprietà fillHeight per determinare se ridimensionare le loro altezze per riempire la propria altezza o mantenere le loro altezze a loro preferite (fillHeight defaults su true).

Creare un HBox

// HBox example
HBox row = new HBox();
Label first = new Label("First");
Label second = new Label("Second");
row.getChildren().addAll(first, second);

VBox

VBox espone i suoi figli in una singola colonna verticale dall'alto verso il basso.

VBox ridimensiona i bambini (se ridimensionabili) alle loro altezze preferite e utilizza la proprietà fillWidth per determinare se ridimensionare le loro larghezze per riempire la propria larghezza o mantenere le loro larghezze al loro preferito (fillWidth defaults su true).

Creare un VBox

// VBox example
VBox column = new VBox();
Label upper = new Label("Upper");
Label lower = new Label("Lower");
column.getChildren().addAll(upper, lower);

BorderPane

BorderPane è suddiviso in cinque aree diverse.

Le aree di confine (in Top , a Right , in Bottom , a Left ) hanno dimensioni preferite in base al loro contenuto. Di default prenderanno solo ciò di cui hanno bisogno, mentre l'area del Center occuperà tutto lo spazio rimanente. Quando le aree di confine sono vuote, non occupano spazio.

Ogni area può contenere solo un elemento. Può essere aggiunto usando i metodi setTop(Node) , setRight(Node) , setBottom(Node) , setLeft(Node) , setCenter(Node) . Puoi usare altri layout per inserire più di un elemento in una singola area.

//BorderPane example
BorderPane pane = new BorderPane();

Label top = new Label("Top");

Label right = new Label("Right");

HBox bottom = new HBox();
bottom.getChildren().addAll(new Label("First"), new Label("Second"));

VBox left = new VBox();
left.getChildren().addAll(new Label("Upper"), new Label("Lower"));

StackPane center = new StackPane();
center.getChildren().addAll(new Label("Lorem"), new Label("ipsum"));

pane.setTop(top);        //The text "Top"
pane.setRight(right);    //The text "Right"
pane.setBottom(bottom);  //Row of two texts
pane.setLeft(left);      //Column of two texts
pane.setCenter(center);  //Two texts on each other

FlowPane

FlowPane definisce i nodi in righe o colonne in base allo spazio orizzontale o verticale disponibile disponibile. Racchiude i nodi alla riga successiva quando lo spazio orizzontale è inferiore al totale di tutte le larghezze dei nodi; esso avvolge i nodi alla colonna successiva quando lo spazio verticale è inferiore al totale di tutte le altezze dei nodi. Questo esempio illustra il layout orizzontale predefinito:

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception{
        FlowPane root = new FlowPane();
        for (int i=1; i<=15; i++) {
            Button b1=new Button("Button "+String.valueOf(i));
            root.getChildren().add(b1); //for adding button to root
        }
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setTitle("FlowPane Layout");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

Costruttore di default FlowPane :

FlowPane root = new FlowPane();

FlowPane aggiuntivi di FlowPane :

FlowPane() //Creates a horizontal FlowPane layout with hgap/vgap = 0 by default.
FlowPane(double hgap, double gap) //Creates a horizontal FlowPane layout with the specified hgap/vgap.
FlowPane(double hgap, double vgap, Node... children) //Creates a horizontal FlowPane layout with the specified hgap/vgap.
FlowPane(Node... children) //Creates a horizontal FlowPane layout with hgap/vgap = 0.
FlowPane(Orientation orientation) //Creates a FlowPane layout with the specified orientation and hgap/vgap = 0.
FlowPane(Orientation orientation, double hgap, double gap) //Creates a FlowPane layout with the specified orientation and hgap/vgap.
FlowPane(Orientation orientation, double hgap, double vgap, Node... children) //Creates a FlowPane layout with the specified orientation and hgap/vgap.
FlowPane(Orientation orientation, Node... children) //Creates a FlowPane layout with the specified orientation and hgap/vgap = 0.

L'aggiunta di nodi al layout utilizza i metodi add() o addAll() del Pane padre:

Button btn = new Button("Demo Button");    
root.getChildren().add(btn); 
root.getChildren().addAll(…); 

Per impostazione predefinita, un FlowPane espone i nodi figlio da sinistra a destra. Per modificare l'allineamento del flusso, chiamare il metodo setAlignment() passando un valore enumerato di tipo Pos .

Alcuni allineamenti di flusso comunemente usati:

root.setAlignment(Pos.TOP_RIGHT);     //for top right
root.setAlignment(Pos.TOP_CENTER);    //for top Center
root.setAlignment(Pos.CENTER);        //for Center
root.setAlignment(Pos.BOTTOM_RIGHT);  //for bottom right

GridPane

GridPane espone i suoi figli all'interno di una griglia flessibile di righe e colonne.

Figli della GridPane

Un bambino può essere posizionato ovunque all'interno di GridPane e può estendersi su più righe / colonne (lo span predefinito è 1) e il suo posizionamento all'interno della griglia è definito dai vincoli di layout:

Non è necessario specificare il numero totale di righe / colonne in primo piano in quanto la griglia espanderà / contrarrà automaticamente la griglia per adattarla al contenuto.

Aggiunta di bambini a GridPane

Per aggiungere nuovi Node a un GridPane i vincoli di layout sui bambini devono essere impostati utilizzando il metodo statico della classe GridPane , quindi quei bambini possono essere aggiunti a un'istanza GridPane .

GridPane gridPane = new GridPane();

// Set the constraints: first row and first column
Label label = new Label("Example");
GridPane.setRowIndex(label, 0);
GridPane.setColumnIndex(label, 0);
// Add the child to the grid
gridpane.getChildren().add(label);

GridPane fornisce metodi convenienti per combinare questi passaggi:

gridPane.add(new Button("Press me!"), 1, 0); // column=1 row=0

La classe GridPane fornisce anche metodi di settaggio statico per impostare il numero di righe e colonne di elementi figli:

Label labelLong = new Label("Its a long text that should span several rows");
GridPane.setColumnSpan(labelLong, 2);
gridPane.add(labelLong, 0, 1);  // column=0 row=1

Dimensione di colonne e righe

Per impostazione predefinita, righe e colonne verranno ridimensionate per adattarsi al loro contenuto. In caso di necessità del controllo esplicito delle dimensioni di righe e colonne , è RowConstraints ColumnConstraints istanze RowConstraints e ColumnConstraints a GridPane . L'aggiunta di questi due vincoli ridimensiona l'esempio sopra per avere la prima colonna 100 pixel, la seconda colonna lunga 200 pixel.

gridPane.getColumnConstraints().add(new ColumnConstraints(100));
gridPane.getColumnConstraints().add(new ColumnConstraints(200));

Di default GridPane ridimensiona righe / colonne alle loro dimensioni preferite anche se il reticolo viene ridimensionato più grande della sua dimensione preferita. Per supportare dimensioni dinamiche di colonne / righe , entrambe le classi di contstaints forniscono tre proprietà: dimensione minima, dimensione massima e dimensione preferita.

Inoltre ColumnConstraints fornisce setHGrow e RowConstraints fornisce i metodi setVGrow per influenzare la priorità della crescita e della riduzione . Le tre priorità predefinite sono:

• Priorità . SEMPRE: cerca sempre di aumentare (o ridurre), condividendo l'aumento (o la diminuzione) nello spazio con altre aree di layout che hanno una crescita (o restringimento) di SEMPRE
• Priority.SOMETIMES : se non ci sono altre aree di layout con grow (o shrink) impostato su ALWAYS o quelle aree di layout non hanno assorbito tutto lo spazio aumentato (o diminuito), quindi condivideranno l'aumento (o la diminuzione) nello spazio con altre aree di layout di SOMETIMES.
• Priorità.NEVER : l'area di layout non crescerà mai (o si restringerà) quando si verifica un aumento (o una diminuzione) nello spazio disponibile nella regione.

ColumnConstraints column1 = new ColumnConstraints(100, 100, 300);
column1.setHgrow(Priority.ALWAYS);

La colonna sopra definita ha una dimensione minima di 100 pixel e cercherà sempre di crescere fino a raggiungere la larghezza massima di 300 pixel.

È anche possibile definire il dimensionamento percentuale per righe e colonne. L'esempio seguente definisce una GridPane cui la prima colonna riempie il 40% della larghezza della griglia, la seconda riempie il 60%.

GridPane gridpane = new GridPane();
ColumnConstraints column1 = new ColumnConstraints();
column1.setPercentWidth(40);
ColumnConstraints column2 = new ColumnConstraints();
column2.setPercentWidth(60);
gridpane.getColumnConstraints().addAll(column1, column2);

Allineamento di elementi all'interno delle celle della griglia

L'allineamento di Node s può essere definita utilizzando il setHalignment metodo (orizzontale) di ColumnConstraints classe e setValignment metodo (verticale) del RowConstraints classe.

ColumnConstraints column1 = new ColumnConstraints();
column1.setHalignment(HPos.RIGHT);

RowConstraints row1 = new RowConstraints();
row1.setValignment(VPos.CENTER);

TilePane

Il layout del riquadro di tile è simile al layout di FlowPane. TilePane colloca tutti i nodi in una griglia in cui ogni cella o tessera ha le stesse dimensioni. Organizza nodi in righe e colonne ordinate, sia orizzontalmente che verticalmente.

    import javafx.application.Application;
    import javafx.scene.Scene;
    import javafx.scene.control.Button;
    import javafx.scene.layout.TilePane;
    import javafx.stage.Stage;
    
    public class Main extends Application {
    
        @Override
        public void start(Stage primaryStage) {
            primaryStage.setTitle("TilePane Demo");
            double width = 400;
            double height = 300;
            TilePane root = new TilePane();
            root.setStyle("-fx-background-color:blue");
            // to set horizontal and vertical gap
            root.setHgap(20);
            root.setVgap(50);
            Button bl = new Button("Buttons");
            root.getChildren().add(bl);
            Button btn = new Button("Button");
            root.getChildren().add(btn);
            Button btn1 = new Button("Button 1");
            root.getChildren().add(btn1);
            Button btn2 = new Button("Button 2");
            root.getChildren().add(btn2);
            Button btn3 = new Button("Button 3");
            root.getChildren().add(btn3);
            Button btn4 = new Button("Button 4");
            root.getChildren().add(btn4);
    
            Scene scene = new Scene(root, width, height);
            primaryStage.setScene(scene);
            primaryStage.show();
        }
    
    
        public static void main(String[] args) {
            launch(args);
        }
    }

produzione

Per creare Tilepane

TilePane root = new TilePane();

setHgap () E il metodo setVgap () viene utilizzato per creare spazi tra colonna e colonna. possiamo anche impostare le colonne per il layout usando

int columnCount = 2;
root.setPrefColumns(columnCount);

AnchorPane

AnchorPane a è un layout che consente di posizionare il contenuto a una distanza specifica dai lati.

Esistono 4 metodi per l'impostazione e 4 metodi per ottenere le distanze in AnchorPane . Il primo parametro di questi metodi è il Node figlio. Il secondo parametro dei setter è il valore Double da utilizzare. Questo valore può essere null senza indicare alcun vincolo per il lato specificato.

Nell'esempio seguente posiziona i nodi a distanze specificate dai lati.

Anche la regione center viene ridimensionata per mantenere le distanze specificate dai lati. Osservare il comportamento quando la finestra viene ridimensionata.

public static void setBackgroundColor(Region region, Color color) {
    // change to 50% opacity
    color = color.deriveColor(0, 1, 1, 0.5);
    region.setBackground(new Background(new BackgroundFill(color, CornerRadii.EMPTY, Insets.EMPTY)));
}

@Override
public void start(Stage primaryStage) {
    Region right = new Region();
    Region top = new Region();
    Region left = new Region();
    Region bottom = new Region();
    Region center = new Region();
    
    right.setPrefSize(50, 150);
    top.setPrefSize(150, 50);
    left.setPrefSize(50, 150);
    bottom.setPrefSize(150, 50);
    
    // fill with different half-transparent colors
    setBackgroundColor(right, Color.RED);
    setBackgroundColor(left, Color.LIME);
    setBackgroundColor(top, Color.BLUE);
    setBackgroundColor(bottom, Color.YELLOW);
    setBackgroundColor(center, Color.BLACK);
    
    // set distances to sides
    AnchorPane.setBottomAnchor(bottom, 50d);
    AnchorPane.setTopAnchor(top, 50d);
    AnchorPane.setLeftAnchor(left, 50d);
    AnchorPane.setRightAnchor(right, 50d);
    
    AnchorPane.setBottomAnchor(center, 50d);
    AnchorPane.setTopAnchor(center, 50d);
    AnchorPane.setLeftAnchor(center, 50d);
    AnchorPane.setRightAnchor(center, 50d);
    
    // create AnchorPane with specified children
    AnchorPane anchorPane = new AnchorPane(left, top, right, bottom, center);

    Scene scene = new Scene(anchorPane, 200, 200);
    
    primaryStage.setScene(scene);
    primaryStage.show();
}