Заставьте кнопки адаптироваться к изменению размера окна (перестановке) в JavaFX - PullRequest
0 голосов
/ 08 января 2019

Я все еще изучаю JavaFX, и одно из моих самых больших разочарований состоит в том, что я не могу понять, как изменить положение моих кнопок (или любого другого элемента) при изменении размера окна. Допустим, моя ширина составляет 500 пикселей, а у меня кнопка на 250 пикселей. Теперь я изменяю размер окна до 1500 пикселей. Кнопка остается там, где она была раньше, однако теперь я хочу, чтобы она была на уровне 750 пикселей, так как это вдвое меньше.

Вот как это выглядит:

first picture

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

second picture Я действительно не уверен, как справиться с этой проблемой изменения размера, поэтому я надеюсь, что вы, ребята, сможете мне помочь.

Заранее спасибо!

FXML

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

<?import javafx.scene.image.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.media.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>

<BorderPane maxHeight="1080.0" maxWidth="1920.0" minHeight="720.0" minWidth="1080.0" style="-fx-background-color: #FFFFFF;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <center>
      <MediaView fx:id="mediaV" fitHeight="200.0" fitWidth="200.0" BorderPane.alignment="CENTER" />
   </center>
   <bottom>
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: #1C1C1C;" BorderPane.alignment="CENTER">
         <children>
            <ImageView fx:id="albumCoverView" fitHeight="204.0" fitWidth="222.0" layoutX="-1.0" layoutY="-2.0" pickOnBounds="true" preserveRatio="true" />
            <HBox fx:id="hBoxButtons" layoutX="447.0" layoutY="75.0" prefHeight="64.0" prefWidth="256.0">
               <children>
                  <Button fx:id="previousButton" focusTraversable="false" mnemonicParsing="false" onAction="#handlePlay" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/previous.png&quot;); -fx-background-size: 64px 64px; -fx-background-color: #1C1C1C;" />
                  <Button fx:id="playPauseButton" focusTraversable="false" mnemonicParsing="false" onAction="#handlePlay" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/play.png&quot;); -fx-background-size: 64px 64px; -fx-background-color: #1C1C1C;" />
                  <Button fx:id="nextButton" focusTraversable="false" mnemonicParsing="false" onAction="#handlePlay" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/next.png&quot;); -fx-background-size: 64px 64px; -fx-background-color: #1C1C1C;" />
               </children>
            </HBox>
            <Button fx:id="stopButton" focusTraversable="false" layoutX="374.0" layoutY="76.0" mnemonicParsing="false" onAction="#handleStop" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/stop.png&quot;); -fx-background-size: 64px 64px; -fx-background-color: #1C1C1C;" />
         </children>
      </Pane>
   </bottom>
   <left>
      <Pane prefHeight="520.0" prefWidth="268.0" style="-fx-background-color: #2E2E2E;" BorderPane.alignment="CENTER">
         <children>
            <TextField layoutX="25.0" layoutY="36.0" prefHeight="51.0" prefWidth="220.0" promptText="Search" style="-fx-border-radius: 50; -fx-background-radius: 50;" />
         </children></Pane>
   </left>
</BorderPane>

1 Ответ

0 голосов
/ 08 января 2019

Я считаю, что вы используете BorderPane в качестве корневого узла в этой ситуации, но лично я не люблю использовать BorderPane. Мое решение использует VBox в качестве корневого узла.

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.media.MediaView?>

<VBox maxHeight="1080.0" maxWidth="1920.0" minHeight="720.0" minWidth="1080.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <HBox VBox.vgrow="ALWAYS">
         <children>
            <VBox maxWidth="476.0" prefHeight="520.0" prefWidth="268.0" style="-fx-background-color: #2E2E2E;" HBox.hgrow="ALWAYS">
               <children>
                  <TextField prefHeight="51.0" prefWidth="220.0" promptText="Search" style="-fx-border-radius: 50; -fx-background-radius: 50;">
                     <VBox.margin>
                        <Insets left="20.0" right="20.0" top="40.0" />
                     </VBox.margin>
                  </TextField>
               </children>
            </VBox>
            <StackPane maxWidth="1444.0" prefHeight="520.0" prefWidth="812.0" HBox.hgrow="ALWAYS">
               <children>
                  <MediaView fx:id="mediaV" fitHeight="200.0" fitWidth="200.0" />
               </children>
            </StackPane>
         </children>
      </HBox>
      <HBox prefHeight="200.0" style="-fx-background-color: #1C1C1C;">
         <children>
            <ImageView fx:id="albumCoverView" fitHeight="204.0" fitWidth="222.0" pickOnBounds="true" preserveRatio="true" />
            <StackPane prefHeight="150.0" prefWidth="200.0" HBox.hgrow="ALWAYS">
               <children>
                  <HBox fx:id="hBoxButtons" maxHeight="-Infinity" maxWidth="-Infinity" spacing="1.0">
                     <children>
                        <Button fx:id="stopButton" focusTraversable="false" mnemonicParsing="false" onAction="#handleStop" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/stop.png&quot;); -fx-background-size: 64px 64px;">
                           <HBox.margin>
                              <Insets right="10.0" />
                           </HBox.margin>
                        </Button>
                        <Button fx:id="previousButton" focusTraversable="false" mnemonicParsing="false" onAction="#handlePlay" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/previous.png&quot;); -fx-background-size: 64px 64px;" />
                        <Button fx:id="playPauseButton" focusTraversable="false" mnemonicParsing="false" onAction="#handlePlay" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/play.png&quot;); -fx-background-size: 64px 64px;" />
                        <Button fx:id="nextButton" focusTraversable="false" mnemonicParsing="false" onAction="#handlePlay" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/next.png&quot;); -fx-background-size: 64px 64px;" />
                     </children>
                  </HBox>
               </children>
            </StackPane>
         </children>
      </HBox>
   </children>
</VBox>
...