Учебник по JavaFX: расширенные макеты

Как организовать и разместить GUI компоненты в приложении JavaFX, используя расширенные макеты.

В предыдущей статье мы рассмотрели некоторые основные макеты JavaFX. Теперь пришло время рассмотреть остальные имеющийся макеты.

1. Учебник по JavaFX: начало работы
2. Учебник по JavaFX: Hello world!
3. Учебник по JavaFX: FXML и SceneBuilder
4. Учебник по JavaFX: основные макеты
5. Учебник по JavaFX: расширенные макеты
6. Учебник по JavaFX: CSS стилизация
7. JavaFX Weaver: интеграция JavaFX и Spring Boot приложения

AnchorPane

AnchorPane — интересный и мощный макет. Это позволяет вам определять точки привязки (якоря) к компонентам внутри макета. Существует 4 типа якорей (anchor):

• top (верх)
• bottom (низ)
• left (лево)
• right (право)

Каждый компонент может иметь любую комбинацию якорей. От нуля до всех четырех.

Привязка (anchoring) компонента означает, что он сохраняет определенное расстояние от определенного края макета (например, TOP). Это расстояние сохраняется даже при изменении размера макета.

Например: anchorRight=10 означает, что компонент будет сохранять расстояние 10 от правого края макета.

Вы можете указать две точки привязки (anchor), которые не находятся в противоположных направлениях, чтобы привязать ваш компонент к определенному углу макета.

Привязка TOP = 10, RIGHT = 10 означает, что компонент будет оставаться в верхнем правом углу макета на расстоянии 10 от обоих краев.



В приведенном выше примере размер каждого компонента остается неизменным при изменении размера окна. Однако, если вы определяете точки привязки в противоположных направлениях, вы можете увеличивать / уменьшать свой компонент при изменении размера окна.



Вы можете использовать различные комбинации привязки, например:

• LEFT + RIGHT изменяет размер по горизонтали
• TOP + BOTTOM изменяет размеры по вертикали
• Указание всех 4-х якорей означает как горизонтальное, так и вертикальное изменение размеров компонента

Указать точки привязки в FXML легко. В следующем примере есть все четыре якоря, но вы можете включить только те, которые вы хотите, или не включать ни одного.

<AnchorPane>
    <Button AnchorPane.topAnchor="10"
            AnchorPane.leftAnchor="10"
            AnchorPane.rightAnchor="10"
            AnchorPane.bottomAnchor="10">I am fully anchored!</Button>
</AnchorPane>

Теперь давайте рассмотрим, как реализуется привязка в Java:

AnchorPane anchorPane = new AnchorPane();
Button button = new Button("I am fully anchored!");
AnchorPane.setTopAnchor(button, 10d);
AnchorPane.setBottomAnchor(button, 10d);
AnchorPane.setLeftAnchor(button, 10d);
AnchorPane.setRightAnchor(button, 10d);
anchorPane.getChildren().add(button);

GridPane

GridPane — это макет, который позволяет вам расположить ваши компоненты в виде таблицы. В отличие от TilePane, которая добавляет компоненты один за другим, здесь вам при добавлении каждого нового компонента нужно указать координаты его местоположения в вашей таблице.

<GridPane hgap="10" vgap="10">
    <Label GridPane.rowIndex="0" GridPane.columnIndex="0">First</Label>
    ...
</GridPane>

В Java при добавлении нового компонента мы сначала указываем параметр ColumnIndex(x) и затем RowIndex(y).

    GridPane grid = new GridPane();
    grid.add(new Label("Hello!"), columnIndex, rowIndex);

Spacing

По умолчанию ячейки таблицы не имеют промежутков. Компоненты находятся рядом друг с другом, без интервалов. Интервал может быть определен отдельно для строк и столбцов, то есть горизонтально и вертикально.

• hgap устанавливает горизонтальный интервал (между столбцами)
• vgap устанавливает вертикальный интервал (между рядами)

<GridPane hgap="10" vgap="10">
    ...
</GridPane>

Интервал (Spacing), определенный в Java:

GridPane grid = new GridPane();
grid.setHgap(10);
grid.setVgap(10);

Интервал (Spacing) для нескольких ячеек

Компоненты в GridPane могут занимать несколько строк и / или столбцов. Компонент с rowspan расширяется до основания от своей исходной ячейки. Компонент с colspan расширяется вправо.


В Java возможны два способа установки параметров rowSpan и columnSpan. Вы можете установить их непосредственно при добавлении компонента в таблицу:

grid.add(component, columnIndex, rowIndex, columnSpan, rowSpan);

Или через GridPane:

GridPane.setColumnSpan(component, columnSpan);
GridPane.setRowSpan(component, rowSpan);

Sizing (Определение размеров)

Хотя в первоначальном примере все ячейки были одинакового размера, это не обязательно должно быть так. Размеры ячеек таблицы определяются следующим образом:

• Высота каждой строки равна наибольшему элементу в строке
• Ширина каждого столбца равна самому широкому элементу в столбце

Ограничения столбцов и строк

Как уже упоминалось, по умолчанию размеры столбцов и строк основаны на компонентах внутри панели. К счастью, есть возможность лучше контролировать размеры отдельных столбцов и строк.

Для этого используются классы ColumnContstraints и RowConstraints.

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

Процент

Это довольно просто. Вы можете установить процент от доступного пространства, которое будет занято данной строкой или столбцом. При изменении размера макета строки и столбцы также изменяются в соответствии с новым размером.

<GridPane>
    <columnConstraints>
        <ColumnConstraints percentWidth="50" />
        <ColumnConstraints percentWidth="50" />
    </columnConstraints>
    <rowConstraints>
        <RowConstraints percentHeight="50" />
        <RowConstraints percentHeight="50" />
    </rowConstraints>
    ...
</GridPane>

Тот же пример на Java:

GridPane gridPane = new GridPane();

ColumnConstraints col1 = new ColumnConstraints();
col1.setPercentWidth(50);
ColumnConstraints col2 = new ColumnConstraints();
col2.setPercentWidth(50);
gridPane.getColumnConstraints().addAll(col1, col2);

RowConstraints row1 = new RowConstraints();
row1.setPercentHeight(50);
RowConstraints row2 = new RowConstraints();
row2.setPercentHeight(50);
gridPane.getRowConstraints().addAll(row1, row2);

Абсолютный размер

Вместо определения размера в процентах вы можете определить предпочтительный и минимальный размер. Кроме того, вы можете указать, как строка / столбец должны вести себя при изменении размера макета. Столбцы используют свойство hgrow, а строки имеют свойство vgrow.

Эти свойства могут иметь три разных значения.

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

<GridPane>
    <columnConstraints>
        <ColumnConstraints minWidth="50" prefWidth="100" />
        <ColumnConstraints minWidth="50" prefWidth="100" hgrow="SOMETIMES" />
    </columnConstraints>
    <rowConstraints>
        <RowConstraints minHeight="50" prefHeight="100" />
        <RowConstraints minHeight="50" prefHeight="100" vgrow="SOMETIMES" />
    </rowConstraints>
    ...
</GridPane>

Тот же пример на Java:

 GridPane gridPane = new GridPane();

ColumnConstraints col1 = new ColumnConstraints();
col1.setMinWidth(50);
col1.setPrefWidth(100);
ColumnConstraints col2 = new ColumnConstraints();
col2.setMinWidth(50);
col2.setPrefWidth(100);
col2.setHgrow(Priority.SOMETIMES);
gridPane.getColumnConstraints().addAll(col1, col2);

RowConstraints row1 = new RowConstraints();
row1.setMinHeight(50);
row1.setPrefHeight(100);
RowConstraints row2 = new RowConstraints();
row2.setMinHeight(50);
row2.setPrefHeight(100);
row2.setVgrow(Priority.SOMETIMES);
gridPane.getRowConstraints().addAll(row1, row2);

Вы также можете указать параметры maxHeight и maxWidth (максимальную высоту и штрину) для отдельных строк и столбцов.

BorderPane

BorderPane — это макет с пятью разделами:

• Top (Верх)
• Bottom (Низ)
• Right (Право)
• Left (Лево)
• Center (Центр)

Вы можете назначить компоненты отдельным разделам BorderPane:

<BorderPane>
    <top>
        <Label>TOP</Label>
    </top>
    <bottom>
        <Label>BOTTOM</Label>
    </bottom>
    <left>
        <Label>LEFT</Label>
    </left>
    <right>
        <Label>RIGHT</Label>
    </right>
    <center>
        <Label>CENTER</Label>
    </center>
</BorderPane>

Теперь тот же пример на Java:

Label top = new Label("TOP");
Label bottom = new Label("BOTTOM");
Label left = new Label("LEFT");
Label right = new Label("RIGHT");
Label center = new Label("CENTER");

BorderPane borderPane = new BorderPane();
borderPane.setTop(top);
borderPane.setBottom(bottom);
borderPane.setLeft(left);
borderPane.setRight(right);
borderPane.setCenter(center);

Sizing (Определение размеров)

Все регионы, кроме центрального (center), имеют фиксированный размер. Центр (center) тогда заполняет остальное пространство.

Верхняя (Top) и нижняя (Bottom) области растягиваются по всему доступному горизонтальному пространству. Их высота зависит от высоты компонента внутри.

Слева и справа заполнить все доступное вертикальное пространство (кроме того, что занимают сверху и снизу). Их ширина зависит от ширины компонента внутри.

Центр имеет динамический размер и заполняет остальное пространство, не занимаемое другими секциями. Давайте посмотрим на пример:

Что дальше

Теперь, когда мы знаем, как использовать различные макеты, рассмотрим, как стилизовать компоненты JavaFX с помощью CSS.