javafx
Макеты

StackPane

StackPane своих детей в стеке «назад к фронту».

Z-порядок детей определяется порядком списка детей (доступным по вызову getChildren ): 0-й ребенок является нижним и последним дочерним элементом поверх стека.

Стекловая панель пытается изменить размер каждого дочернего элемента, чтобы заполнить свою собственную область содержимого. В случае, если дочерний объект не может быть изменен, чтобы заполнить область StackPane (либо потому, что он не был изменен, либо его максимальный размер предотвратил его), тогда он будет выровнен по области, используя alignmentProperty стека, по умолчанию - Pos.CENTER.

пример

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

HBox и VBox очень похожи, оба выкладывают своих детей в одну строку.

Общие характеристики

Если у HBox или VBox есть граница и / или набор дополнений, тогда содержимое будет выложено внутри этих вложений.

Они выставляют каждого управляемого ребенка независимо от значения видимого свойства ребенка; неуправляемые дети игнорируются.

Выравнивание содержимого контролируется свойством выравнивания, которое по умолчанию Pos.TOP_LEFT .

HBox

HBox своих детей в одном горизонтальном ряду слева направо.

HBox будет изменять размер дочерних HBox (если они изменяются) до их предпочтительной ширины s и использует свойство fillHeight, чтобы определить, изменять ли их высоты, чтобы заполнить свою собственную высоту или сохранить их высоты до их предпочтительного значения (по умолчанию значения fillHeight равны true).

Создание HBox

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

VBox

VBox выставляет своих детей в одной вертикальной колонке сверху вниз.

VBox будет изменять размеры дочерних элементов (если они изменяются) до их предпочтительных высот и использует свойство fillWidth, чтобы определить, изменять ли их ширину, чтобы заполнить свою собственную ширину или сохранить их ширину до их предпочтительных значений (по умолчанию значение fillWidth равно true).

Создание VBox

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

BorderPane

BorderPane разделен на пять разных областей.

Приграничные области ( Top , Right , Bottom , Left ) имеют предпочтительный размер в зависимости от их содержимого. По умолчанию они будут использовать только то, что им нужно, в то время как область Center займет любое оставшееся пространство. Когда пограничные области пусты, они не занимают места.

Каждая область может содержать только один элемент. Его можно добавить с помощью методов setTop(Node) , setRight(Node) , setBottom(Node) , setLeft(Node) , setCenter(Node) . Вы можете использовать другие макеты, чтобы поместить более одного элемента в одну область.

//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 устанавливает узлы в строках или столбцах на основе доступных доступных горизонтальных или вертикальных пространств. Он переносит узлы на следующую строку, когда горизонтальное пространство меньше, чем общая ширина всех узлов; он переносит узлы в следующий столбец, когда вертикальное пространство меньше, чем общее количество всех высот узлов. Этот пример иллюстрирует горизонтальную компоновку по умолчанию:

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

FlowPane умолчанию:

FlowPane root = new FlowPane();

Дополнительные конструкторы 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.

Добавление узлов в макет использует методы add() или addAll() родительской Pane :

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

По умолчанию FlowPane дочерние узлы слева направо. Чтобы изменить выравнивание потока, вызовите метод setAlignment() , передав перечислимое значение типа Pos .

Некоторые обычно используемые выравнивания потока:

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 своих дочерних GridPane в гибкой сетке строк и столбцов.

Дети грид-панели

Ребенок может быть размещен в любом месте GridPane и может охватывать несколько строк / столбцов (по умолчанию - 1), а его размещение в сетке определяется ограничениями макета:

Общее количество строк / столбцов не нужно указывать заранее, так как gridpane автоматически расширяет / сокращает сетку для размещения контента.

Добавление детей в GridPane

Чтобы добавить новый Node в GridPane ограничения макета для GridPane должны быть установлены с использованием статического метода класса GridPane , после чего эти дети могут быть добавлены в экземпляр 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 предоставляет удобные методы для объединения этих шагов:

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

Класс GridPane также предоставляет статические методы настройки для установки дочерних элементов row- и columnspan :

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

Размер столбцов и строк

По умолчанию строки и столбцы будут иметь размер, соответствующий их контенту. В случае необходимости явного контроля размеров RowConstraints и ColumnConstraints можно добавить экземпляры RowConstraints и GridPane . Добавление этих двух ограничений приведет к изменению размера вышеприведенного примера, чтобы иметь первый столбец 100 пикселей, а второй столбец - 200 пикселей.

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

По умолчанию GridPane будет изменять размеры строк / столбцов до их предпочтительных размеров, даже если размер сетки будет больше размера, чем его предпочтительный размер. Для поддержки динамических размеров столбцов / строк оба класса contstaints предоставляют три свойства: минимальный размер, максимальный размер и предпочтительный размер.

Дополнительно ColumnConstraints предоставляет setHGrow и RowConstraints предоставляет методы setVGrow чтобы повлиять на приоритет роста и сокращения . Три заранее определенных приоритета:

• Priority.ALWAYS : Всегда старайтесь расти (или уменьшаться), разделяя увеличение (или уменьшение) пространства с другими областями макета, которые растут (или уменьшаются) ВСЕГДА
• Priority.SOMETIMES : Если нет других областей макета с ростом (или уменьшением), установленным ВСЕГДА, или эти области макета не поглощают все увеличенное (или уменьшенное) пространство, то будут разделять увеличение (или уменьшение) в пространстве с помощью другие области размещения SOMETIMES.
• Priority.NEVER : область макета никогда не будет расти (или уменьшаться), когда есть увеличение (или уменьшение) пространства, доступного в регионе.

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

Столбец, определенный выше, имеет минимальный размер 100 пикселей, и он всегда будет пытаться расти до тех пор, пока он не достигнет максимальной ширины 300 пикселей.

Также можно определить процентное соотношение для строк и столбцов. В следующем примере определяется GridPane где первый столбец заполняет 40% ширины сетки, второй заполняет 60%.

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

Выравнивание элементов внутри ячеек сетки

Выравнивание Node с может быть определено с помощью setHalignment ( по горизонтали) метод ColumnConstraints класса и setValignment (вертикальной) методом RowConstraints класса.

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

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

TilePane

Макет панели плитки похож на макет FlowPane. TilePane помещает все узлы в сетку, в которой каждая ячейка или плитка имеют одинаковый размер. Он упорядочивает узлы в аккуратных строках и столбцах, горизонтально или вертикально.

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

выход

Чтобы создать Tilepane

TilePane root = new TilePane();

setHgap () И метод setVgap () используется для создания разрыва между столбцом и столбцом. мы также можем установить столбцы для макета, используя

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

AnchorPane

AnchorPane a - это макет, который позволяет размещать контент на определенном расстоянии от его сторон.

Существует 4 метода настройки и 4 метода для получения расстояний в AnchorPane . Первым параметром этих методов является дочерний Node . Второй параметр сеттеров - это Double значение для использования. Это значение может быть null что не указывает на ограничение для данной стороны.

В следующем примере места размещаются на заданных расстояниях от сторон.

center региона также изменяется , чтобы сохранить заданные расстояния от сторон. Наблюдайте за поведением при изменении размера окна.

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