javafx
Układy

StackPane

StackPane swoje dzieci w stos od tyłu do przodu.

Kolejność Z dzieci jest określona przez kolejność listy dzieci (dostępne przez wywołanie getChildren ): 0 dziecko jest najniższym i ostatnim dzieckiem na górze stosu.

Panel stosu próbuje zmienić rozmiar każdego dziecka, aby wypełnić własny obszar zawartości. W przypadku, gdy nie można zmienić rozmiaru dziecka w celu wypełnienia obszaru StackPane (albo dlatego, że nie można go zmienić, albo uniemożliwiał to jego maksymalny rozmiar), wówczas zostanie on wyrównany w tym obszarze za pomocą alignmentProperty z stackpane, która domyślnie ma Pos.CENTER.

Przykład

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

W HBox i VBox układy są bardzo podobne, zarówno rozplanować swoje dzieci w jednej linii.

Wspólne cechy

Jeśli HBox lub VBox mieć obramowanie i / lub ustaw obicia, następnie zawartość zostaną rozplanowane w tych wypustkami.

Układają każde zarządzane dziecko bez względu na widoczną wartość właściwości dziecka; niezarządzane dzieci są ignorowane.

Wyrównanie zawartości jest kontrolowane przez właściwość wyrównania, która domyślnie ma wartość Pos.TOP_LEFT .

HBox

HBox swoje dzieci w jednym poziomym rzędzie od lewej do prawej.

HBox zmieni rozmiar dzieci (jeśli można zmienić rozmiar) do ich preferowanej szerokości i użyje swojej właściwości fillHeight, aby określić, czy zmienić ich wysokość, aby wypełnić własną wysokość, czy też zachować wysokość do preferowanej (domyślnie wartość fillHeight to true).

Tworzenie HBox

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

VBox

VBox swoje dzieci w jednej pionowej kolumnie od góry do dołu.

VBox zmieni rozmiar dzieci (jeśli można zmienić rozmiar) do ich preferowanych wysokości i użyje swojej właściwości fillWidth, aby określić, czy zmienić ich szerokość, aby wypełnić własną szerokość, czy też zachować ich szerokość do preferowanych (domyślnie wartość fillWidth to true).

Tworzenie VBox

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

BorderPane

BorderPane jest podzielony na pięć różnych obszarów.

Obszary graniczne (u Top , z Right , u Bottom , z Left ) mają preferowany rozmiar na podstawie ich zawartości. Domyślnie zabiorą tylko to, czego potrzebują, a obszar Center zajmie pozostałe miejsce. Kiedy obszary graniczne są puste, nie zajmują miejsca.

Każdy obszar może zawierać tylko jeden element. Można go dodać przy użyciu metod setTop(Node) , setRight(Node) , setBottom(Node) , setLeft(Node) , setCenter(Node) . Możesz użyć innych układów, aby umieścić więcej niż jeden element w jednym obszarze.

//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 określa węzły w rzędach lub kolumnach na podstawie dostępnej dostępnej przestrzeni poziomej lub pionowej. Zawija węzły do następnego wiersza, gdy pozioma przestrzeń jest mniejsza niż suma wszystkich szerokości węzłów; zawija węzły do następnej kolumny, gdy przestrzeń pionowa jest mniejsza niż suma wysokości wszystkich węzłów. Ten przykład ilustruje domyślny układ poziomy:

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

Domyślny konstruktor FlowPane :

FlowPane root = new FlowPane();

Dodatkowe konstruktory 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.

Dodawanie węzłów do układu używa add() lub addAll() metody rodzica Pane :

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

Domyślnie FlowPane węzły podrzędne od lewej do prawej. Aby zmienić wyrównanie przepływu, wywołaj setAlignment() , przekazując wyliczoną wartość typu Pos .

Niektóre powszechnie stosowane wyrównania przepływu:

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 rozkłada swoje dzieci w elastycznej siatce wierszy i kolumn.

Children of the GridPane

Dziecko może zostać umieszczone w dowolnym miejscu w GridPane i może obejmować wiele wierszy / kolumn (domyślny zakres to 1), a jego umieszczenie w siatce jest określone przez ograniczenia układu:

Całkowita liczba wierszy / kolumn nie musi być określana z góry, ponieważ panel siatki automatycznie rozszerzy / skurczy siatkę, aby pomieścić zawartość.

Dodawanie dzieci do GridPane

Aby dodać nowe Node do GridPane ograniczenia układu na GridPane potomnych należy ustawić przy użyciu metody statycznej klasy GridPane , a następnie te elementy potomne można dodać do instancji 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 zapewnia wygodne metody łączenia tych kroków:

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

Klasa GridPane zapewnia również metody ustawiające statyczne do ustawiania rozpiętości wierszy i kolumn elementów potomnych:

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

Rozmiar kolumn i rzędów

Domyślnie wiersze i kolumny zostaną dopasowane do zawartości. W przypadku potrzeby jawnej kontroli wielkości wierszy i kolumn , instancje RowConstraints i ColumnConstraints można dodać do GridPane . Dodanie tych dwóch ograniczeń spowoduje zmianę rozmiaru powyższego przykładu, tak aby pierwsza kolumna miała 100 pikseli, a druga kolumna miała długość 200 pikseli.

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

Domyślnie GridPane rozmiar wierszy / kolumn do preferowanych rozmiarów, nawet jeśli rozmiar siatki jest większy niż preferowany rozmiar. W celu obsługi dynamicznych rozmiarów kolumn / wierszy obie klasy contstaints zapewniają trzy właściwości: rozmiar minimalny, rozmiar maksymalny i rozmiar preferowany.

Dodatkowo ColumnConstraints zapewnia setHGrow a RowConstraints zapewnia metody setVGrow , które wpływają na priorytet wzrostu i kurczenia się . Trzy wstępnie zdefiniowane priorytety to:

• Priorytet ZAWSZE: Zawsze staraj się powiększać (lub zmniejszać), dzieląc wzrost (lub spadek) w przestrzeni z innymi obszarami układu, które mają wzrost (lub kurczenie) ZAWSZE
• Priority.SETETES : Jeśli nie ma innych obszarów układu z powiększeniem (lub zmniejszeniem) ustawionym ZAWSZE lub te obszary układu nie pochłonęły całej zwiększonej (lub zmniejszonej) przestrzeni, wówczas współdzieli zwiększenie (lub zmniejszenie) przestrzeni z inne obszary układu CZASAMI.
• Priority.NEVER : Obszar układu nigdy się nie powiększy (lub nie zmniejszy), gdy w regionie wzrośnie (lub zmniejszy) miejsce.

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

Zdefiniowana powyżej kolumna ma minimalny rozmiar 100 pikseli i zawsze będzie próbowała rosnąć, aż osiągnie maksymalną szerokość 300 pikseli.

Możliwe jest również zdefiniowanie wielkości procentowej dla wierszy i kolumn. Poniższy przykład definiuje GridPane którym pierwsza kolumna wypełnia 40% szerokości siatki, druga wypełnia 60%.

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

Wyrównanie elementów wewnątrz komórek siatki

Wyrównanie Node S może być określona za pomocą setHalignment (poziomej) sposobu ColumnConstraints klasy i setValignment (w pionie) sposób RowConstraints klasy.

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

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

TilePane

Układ panelu kafelków jest podobny do układu FlowPane. TilePane umieszcza wszystkie węzły w siatce, w której każda komórka lub kafelek ma ten sam rozmiar. Układa węzły w równych rzędach i kolumnach, poziomo lub pionowo.

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

wynik

Aby utworzyć Tilepane

TilePane root = new TilePane();

setHgap () I metoda setVgap () służy do tworzenia odstępu między kolumną a kolumną. możemy również ustawić kolumny dla układu za pomocą

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

AnchorPane

AnchorPane a to układ, który umożliwia umieszczanie treści w określonej odległości od jej boków.

Istnieją 4 metody ustawiania i 4 metody uzyskiwania odległości w AnchorPane . Pierwszym parametrem tych metod jest Node podrzędny. Drugim parametrem ustawiającym jest wartość Double do użycia. Ta wartość może być null co oznacza brak ograniczenia dla danej strony.

W poniższym przykładzie umieszcza węzły w określonych odległościach od boków.

Obszar center jest również zmieniany, aby zachować określone odległości z boków. Obserwuj zachowanie po zmianie rozmiaru okna.

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