Установите адаптивный макет с помощью JavaFX

я начал работать с javaFX и хочу установить такой макет: введите здесь описание изображения

Я установил конструктор сцен, но нет возможности работать с процентами, как с простым div в html...

так что это лучший вариант, чтобы установить этот макет?

это мой простой файл fxml: (теперь он пустой)

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns:fx="http://javafx.com/fxml/1">
    <!-- TODO Add Nodes -->
</AnchorPane>

спасибо много


java layout responsive javafx
person kfir91    schedule 03.09.2016    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Вы можете добиться такого макета, используя GridPane с соответствующими ограничениями:

@Override
public void start(Stage primaryStage) throws IOException {
    GridPane root = new GridPane();

    root.getColumnConstraints().addAll(DoubleStream.of(30, 2, 68)
            .mapToObj(width -> {
                ColumnConstraints constraints = new ColumnConstraints();
                constraints.setPercentWidth(width);
                constraints.setFillWidth(true);
                return constraints;
            }).toArray(ColumnConstraints[]::new));

    RowConstraints rowConstraints = new RowConstraints();
    rowConstraints.setVgrow(Priority.ALWAYS);

    root.getRowConstraints().add(rowConstraints);

    root.addRow(0, Stream.of("red", "green", "blue").map(s -> {
        Region region = new Region();
        region.setStyle("-fx-background-color:"+s);
        return region;
    }).toArray(Node[]::new));

    Scene scene = new Scene(root);

    primaryStage.setScene(scene);
    primaryStage.show();
}

FXML-версия

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<GridPane prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <columnConstraints>
      <ColumnConstraints percentWidth="30.0" />
      <ColumnConstraints percentWidth="2.0" />
      <ColumnConstraints percentWidth="68.0" />
   </columnConstraints>
   <rowConstraints>
      <RowConstraints vgrow="ALWAYS" />
   </rowConstraints>
   <children>
      <Region style="-fx-background-color: red;" />
      <Region style="-fx-background-color: green;" GridPane.columnIndex="1" />
      <Region style="-fx-background-color: blue;" GridPane.columnIndex="2" />
   </children>
</GridPane>
person fabian    schedule 03.09.2016

arrow_upward
0
arrow_downward

Я создал ответ для этого в следующем разделе: Как указать процент ширины в JavaFX 2 с помощью FXML?

Ниже копия для тех, кому лень туда лезть ;-)

Чтобы начать работать с процентами в самом FXML, вы можете использовать следующее:

<fx:define>
    <Screen fx:factory="getPrimary" fx:id="screen" />
</fx:define>

Это поможет вам определить размеры текущего экрана, на котором отображается приложение. Теперь, когда у нас есть размеры дисплея, мы можем поиграть с ними в FXML следующим образом:

<HBox fx:id="hroot" prefHeight="${screen.visualBounds.height}" prefWidth="${screen.visualBounds.width}"> Your FXML elements inside the root... </HBox>

Обратите внимание, что я использую visualBounds, так как это даст мне доступное пространство на экране, так как я не хочу перекрытия с панелью задач, например, в Windows. Для полноэкранных приложений вы просто используете «границы».

Теперь, чтобы перейти к использованию процентов, вы можете поиграть со значениями prefheight и prefWidth. Вы можете поместить вычисления в ${}.

Необязательно:

Если вы хотите, чтобы все ваши элементы использовали относительные размеры, просто обратитесь к ним, используя их идентификатор и свойство ширины или высоты, и выполните расчет.

<VBox fx:id="VBSidebar" prefWidth="${hroot.width*0.15}" prefHeight="${hroot.height}"> more elements.. </VBox>
person Jarrick    schedule 06.01.2017