javafx
lay-outs

StackPane

StackPane legt zijn kinderen op in een back-to-front stapel.

De z-volgorde van de kinderen wordt bepaald door de volgorde van de lijst met kinderen (toegankelijk door getChildren bellen): het 0e kind is het onderste en laatste kind bovenaan de stapel.

Het stapelvenster probeert de grootte van elk kind te wijzigen om zijn eigen inhoudsgebied te vullen. In het geval als het StackPane een kind niet kan worden aangepast om het gebied van het StackPane te vullen (omdat het niet aanpasbaar was of omdat de maximale grootte dit heeft verhinderd), wordt het uitgelijnd binnen het gebied met behulp van de alignmentProperty van de stackpane, die standaard wordt ingesteld op Pos.CENTER.

Voorbeeld

// 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 en VBox

De lay-outs van HBox en VBox lijken sterk op elkaar, allebei leggen ze hun kinderen op één lijn.

Algemene karaktertrekken

Als een HBox of een VBox een rand en / of VBox hebben, wordt de inhoud binnen die inzetstukken geplaatst.

Ze geven elk beheerd kind weer, ongeacht de zichtbare waarde van het kind; onbeheerde kinderen worden genegeerd.

De uitlijning van de inhoud wordt geregeld door de eigenschap uitlijning, die standaard wordt ingesteld op Pos.TOP_LEFT .

hbox

HBox legt zijn kinderen in een enkele horizontale rij van links naar rechts.

HBox zal het formaat van kinderen (indien aanpasbaar) aanpassen aan de gewenste breedte s en gebruikt de eigenschap fillHeight om te bepalen of hun hoogte moet worden aangepast om de eigen hoogte te vullen of hun hoogte naar wens te houden (fillHeight is standaard ingesteld op true).

Een HBox maken

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

VBox

VBox legt zijn kinderen in een enkele verticale kolom van boven naar beneden.

VBox zal het formaat van kinderen (indien van grootte veranderen) naar hun voorkeurshoogte en gebruikt zijn eigenschap fillWidth om te bepalen of hun breedte moet worden aangepast om de eigen breedte te vullen of hun breedte aan hun voorkeur te houden (fillWidth staat standaard op true).

Een VBox maken

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

BorderPane

Het BorderPane is BorderPane in vijf verschillende gebieden.

De randgebieden ( Top , Right , Bottom , Left ) hebben de voorkeur qua grootte op basis van hun inhoud. Standaard nemen ze alleen wat ze nodig hebben, terwijl het Center alle resterende ruimte inneemt. Wanneer de grensgebieden leeg zijn, nemen ze geen ruimte in beslag.

Elk gebied kan slechts één element bevatten. Het kan worden toegevoegd met behulp van de methoden setTop(Node) , setRight(Node) , setBottom(Node) , setLeft(Node) , setCenter(Node) . U kunt andere lay-outs gebruiken om meer dan één element in een enkel gebied te plaatsen.

//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 knooppunten in rijen of kolommen op basis van de beschikbare horizontale of verticale beschikbare ruimte. Het wikkelt knopen naar de volgende lijn wanneer de horizontale ruimte kleiner is dan het totaal van alle breedte van de knopen; het wikkelt knopen naar de volgende kolom wanneer de verticale ruimte kleiner is dan het totaal van alle hoogten van de knopen. Dit voorbeeld illustreert de standaard horizontale lay-out:

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);
    }
}

Standaard FlowPane constructor:

FlowPane root = new FlowPane();

Extra FlowPane constructeurs:

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.

addAll() toevoegen aan de lay-out maakt gebruik van de methoden add() of addAll() van het bovenliggende Pane :

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

Standaard worden in een FlowPane onderliggende knooppunten van links naar rechts geplaatst. Als u de setAlignment() wilt wijzigen, roept u de methode setAlignment() door een genummerde waarde van het type Pos .

Enkele veelgebruikte stroomuitlijningen:

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 legt zijn kinderen op in een flexibel raster van rijen en kolommen.

Kinderen van het raster

Een kind kan overal in het GridPane worden geplaatst en kan meerdere rijen / kolommen GridPane (standaardbereik is 1) en de plaatsing ervan in het raster wordt bepaald door de indelingsbeperkingen:

Het totale aantal rijen / kolommen hoeft niet vooraf te worden opgegeven, omdat het raster het raster automatisch zal uitbreiden / inkrimpen om de inhoud te kunnen bevatten.

Kinderen toevoegen aan het GridPane

Om nieuwe Node aan een GridPane toe te voegen, GridPane de lay- GridPane voor de kinderen worden ingesteld met behulp van de statische methode van de klasse GridPane , waarna die kinderen kunnen worden toegevoegd aan een GridPane instantie.

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 biedt handige methoden om deze stappen te combineren:

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

De klasse GridPane biedt ook statische setter-methoden om de rij- en kolomspanning van onderliggende elementen in te stellen:

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

Grootte van kolommen en rijen

Standaard worden rijen en kolommen aangepast aan hun inhoud. In het geval dat expliciete controle van rij- en kolomgroottes nodig is , kunnen RowConstraints en ColumnConstraints instanties aan het GridPane worden toegevoegd. Als u deze twee beperkingen toevoegt, wordt het voorbeeld hierboven aangepast om de eerste kolom 100 pixels en de tweede kolom 200 pixels lang te hebben.

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

Standaard zal het GridPane het formaat van rijen / kolommen aanpassen aan hun voorkeursgroottes, zelfs als de grootte van het raster groter is dan de gewenste grootte. Om dynamische kolom- / rijgroottes te ondersteunen, biedt beide klasse contstaints drie eigenschappen: minimale grootte, maximale grootte en voorkeursgrootte.

Daarnaast ColumnConstraints biedt setHGrow en RowConstraints biedt setVGrow methoden om de prioriteit van de groeiende en krimpende beïnvloeden. De drie vooraf gedefinieerde prioriteiten zijn:

• Prioriteit ALTIJD: Probeer altijd te groeien (of te krimpen) en de toename (of afname) in de ruimte te delen met andere lay-outgebieden die ALTIJD groeien (of krimpen)
• Prioriteit.SOMS : Als er geen andere lay-outgebieden zijn met groei (of krimp) ingesteld op ALTIJD of die lay-outgebieden niet alle toegenomen (of verminderde) ruimte hebben opgenomen, deelt de toename (of afname) in ruimte met andere lay-outgebieden van SOMETIMES.
• Prioriteit.NOOIT : het lay-outgebied zal nooit groeien (of krimpen) wanneer de beschikbare ruimte in de regio toeneemt (of afneemt).

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

De hierboven gedefinieerde kolom heeft een minimale grootte van 100 pixels en hij zal altijd proberen te groeien totdat hij zijn maximale breedte van 300 pixels bereikt.

Het is ook mogelijk om de percentagegrootte voor rijen en kolommen te definiëren. Het volgende voorbeeld definieert een GridPane waarbij de eerste kolom 40% van de breedte van het raster vult, de tweede kolom 60% vult.

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

Uitlijning van elementen binnen de rastercellen

De uitlijning van Node B kan worden bepaald met de setHalignment (horizontale) Werkwijze ColumnConstraints klasse en setValignment (verticaal) Werkwijze RowConstraints klasse.

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

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

TilePane

De indeling van het tegelvenster is vergelijkbaar met de indeling van het FlowPane. TilePane plaatst alle knooppunten in een raster waarin elke cel of tegel dezelfde grootte heeft. Het rangschikt knopen in nette rijen en kolommen, horizontaal of verticaal.

    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);
        }
    }

uitgang

Tilepane maken

TilePane root = new TilePane();

setHgap () En de setVgap () -methode wordt gebruikt om een gat te maken tussen kolom en kolom. we kunnen ook de kolommen voor de lay-out instellen met behulp van

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

AnchorPane

AnchorPane a is een lay-out waarmee de inhoud op een specifieke afstand van de zijkanten kan worden geplaatst.

Er zijn 4 methoden voor het instellen en 4 methoden voor het verkrijgen van de afstanden in AnchorPane . De eerste parameter van deze methoden is het onderliggende Node . De tweede parameter van de setters is de te gebruiken Double waarde. Deze waarde kan null wat geen beperking voor de gegeven zijde aangeeft.

In het volgende voorbeeld worden knooppunten op opgegeven afstanden van de zijkanten geplaatst.

Het center wordt ook aangepast om de opgegeven afstanden tot de zijkanten te behouden. Let op het gedrag wanneer het formaat van het venster wordt gewijzigd.

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();
}