Gluon Mobile GridPane с процентами не работает

Question

У меня есть вид в центре GridPane, который заполняет весь экран. GridPane имеет проценты, определенные для всех строк и всех столбцов. На моем Nexus 5X макет работает нормально. Когда я устанавливаю приложение на Zebra Scanner TC8000, которое является Android 4.4.3, проценты не соблюдаются. Вместо этого отображаются примерно 50%, а остальные исчезают так же, как экран слишком мал.

Разрешение на Zebra намного меньше, 480x800 против 1080x1920 на 5X, но я ожидал, что компоненты будут уменьшаться в соответствии с процентами GridPane. Кто-нибудь знает, что происходит не так.

Редактировать: Я пробовал много разных вещей, и лучший код, который я получил atm, - это код ниже. Проблемы с этим кодом: - Первая строка занимает 55% высоты экрана вместо 30%, которая настроена. - Компоненты оставляют экран шириной примерно 50 - 100 пикселей. Если эта проблема решена, макет становится приемлемым.

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

<?import com.gluonhq.charm.glisten.mvc.View?> 
<?import javafx.geometry.Insets?> 
<?import javafx.geometry.Rectangle2D?> 
<?import javafx.scene.control.Button?> 
<?import javafx.scene.control.Label?> 
<?import javafx.scene.control.TextField?> 
<?import javafx.scene.image.ImageView?> 
<?import javafx.scene.layout.BorderPane?> 
<?import javafx.scene.layout.ColumnConstraints?> 
<?import javafx.scene.layout.GridPane?> 
<?import javafx.scene.layout.HBox?> 
<?import javafx.scene.layout.Pane?> 
<?import javafx.scene.layout.Region?> 
<?import javafx.scene.layout.RowConstraints?> 
<?import javafx.scene.layout.StackPane?> 
<?import javafx.scene.layout.VBox?> 
<?import javafx.scene.text.Font?> 

<View fx:id="product" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.essers.pxl2016.scan.application.gluon.views.ProductPresenter"> 
    <padding> 
     <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /> 
    </padding> 
    <top> 
     <HBox fx:id="buttonHBox" alignment="CENTER_LEFT" cacheShape="false" BorderPane.alignment="CENTER"> 
      <children> 
       <Label fx:id="descriptionLabel"> 
        <font> 
         <Font name="System Bold" size="15.0" /> 
        </font> 
        <HBox.margin> 
         <Insets /> 
        </HBox.margin> 
       </Label> 
       <Region HBox.hgrow="ALWAYS" /> 
       <Button fx:id="exitButton" mnemonicParsing="false" text="Exit"> 
        <HBox.margin> 
         <Insets /> 
        </HBox.margin> 
       </Button> 
      </children> 
     </HBox> 
    </top> 
    <center> 
     <GridPane> 
      <columnConstraints> 
       <ColumnConstraints fillWidth="false" percentWidth="100.0" /> 
      </columnConstraints> 
      <rowConstraints> 
       <RowConstraints percentHeight="30.0" vgrow="SOMETIMES" /> 
       <RowConstraints percentHeight="20.0" vgrow="SOMETIMES" /> 
       <RowConstraints percentHeight="50.0" vgrow="SOMETIMES" /> 
      </rowConstraints> 
      <children> 
       <GridPane hgap="4.0" vgap="4.0"> 
        <columnConstraints> 
         <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" percentWidth="15.0" /> 
         <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" percentWidth="15.0" /> 
         <ColumnConstraints halignment="LEFT" hgrow="SOMETIMES" percentWidth="45.0" /> 
         <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" percentWidth="25.0" /> 
        </columnConstraints> 
        <rowConstraints> 
         <RowConstraints percentHeight="7.5" vgrow="SOMETIMES" /> 
         <RowConstraints percentHeight="30.0" vgrow="SOMETIMES" /> 
         <RowConstraints percentHeight="5.0" vgrow="SOMETIMES" /> 
         <RowConstraints percentHeight="7.5" vgrow="SOMETIMES" /> 
         <RowConstraints percentHeight="45.0" valignment="CENTER" vgrow="ALWAYS" /> 
         <RowConstraints percentHeight="5.0" vgrow="SOMETIMES" /> 
        </rowConstraints> 
        <children> 
         <VBox alignment="CENTER" spacing="5.0" GridPane.rowIndex="4"> 
          <children> 
           <Button fx:id="plusButton" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#plusClicked" text="+" textAlignment="CENTER" VBox.vgrow="ALWAYS"> 
            <VBox.margin> 
             <Insets /> 
            </VBox.margin> 
           </Button> 
           <Button fx:id="minButton" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#minClicked" text="-" textAlignment="CENTER" VBox.vgrow="ALWAYS"> 
            <VBox.margin> 
             <Insets /> 
            </VBox.margin> 
           </Button> 
          </children> 
          <GridPane.margin> 
           <Insets /> 
          </GridPane.margin> 
         </VBox> 
         <Label text="Count" textAlignment="CENTER" GridPane.columnIndex="1" GridPane.rowIndex="3"> 
          <font> 
           <Font size="11.0" /> 
          </font> 
         </Label> 
         <Label alignment="CENTER" contentDisplay="CENTER" nodeOrientation="LEFT_TO_RIGHT" text="Scanned barcode" textAlignment="CENTER" GridPane.columnIndex="2" GridPane.rowIndex="3"> 
          <font> 
           <Font size="11.0" /> 
          </font> 
          <GridPane.margin> 
           <Insets left="5.0" /> 
          </GridPane.margin> 
         </Label> 
         <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#okClicked" text="OK" GridPane.columnIndex="3" GridPane.rowIndex="4"> 
          <GridPane.margin> 
           <Insets /> 
          </GridPane.margin> 
         </Button> 
         <Label text="Target"> 
          <font> 
           <Font size="11.0" /> 
          </font> 
         </Label> 
         <Label text="Scanned" GridPane.columnIndex="1"> 
          <font> 
           <Font size="11.0" /> 
          </font> 
         </Label> 
         <Label alignment="CENTER" text="Target barcode" GridPane.columnIndex="2"> 
          <font> 
           <Font size="11.0" /> 
          </font> 
          <padding> 
           <Insets left="5.0" /> 
          </padding> 
         </Label> 
         <TextField fx:id="targetCountTextField" alignment="CENTER" disable="true" editable="false" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" text="5" GridPane.rowIndex="1" /> 
         <TextField fx:id="countTextField" alignment="CENTER" maxHeight="1.7976931348623157E308" text="1" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" GridPane.rowIndex="4" GridPane.rowSpan="2" GridPane.vgrow="ALWAYS" /> 
         <TextField fx:id="targetBarcodeTextField" disable="true" editable="false" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" GridPane.columnIndex="2" GridPane.rowIndex="1"> 
          <opaqueInsets> 
           <Insets left="5.0" /> 
          </opaqueInsets> 
         </TextField> 
         <TextField fx:id="scannedCountTextField" alignment="CENTER" disable="true" editable="false" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" text="0" GridPane.columnIndex="1" GridPane.rowIndex="1" /> 
         <TextField fx:id="scannedBarcodeTextField" maxHeight="1.7976931348623157E308" onKeyPressed="#handleKeyPress" GridPane.columnIndex="2" GridPane.rowIndex="4" GridPane.rowSpan="2"> 
          <opaqueInsets> 
           <Insets left="5.0" /> 
          </opaqueInsets> 
         </TextField> 
         <Button fx:id="skipButton" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#skipClicked" text="Skip" GridPane.columnIndex="3" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.vgrow="ALWAYS" /> 
        </children> 
       </GridPane> 
       <GridPane GridPane.rowIndex="1"> 
        <columnConstraints> 
         <ColumnConstraints hgrow="SOMETIMES" minWidth="0.0" percentWidth="29.0" prefWidth="0.0" /> 
         <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="31.0" prefWidth="100.0" /> 
         <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="15.0" prefWidth="100.0" /> 
         <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="25.0" prefWidth="100.0" /> 
        </columnConstraints> 
        <rowConstraints> 
         <RowConstraints vgrow="SOMETIMES" /> 
         <RowConstraints vgrow="SOMETIMES" /> 
         <RowConstraints vgrow="SOMETIMES" /> 
         <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> 
        </rowConstraints> 
        <children> 
         <Label text="Id:" /> 
         <Label text="Location:" GridPane.rowIndex="1" /> 
         <Label text="Description:" GridPane.rowIndex="2" /> 
         <Label text="Comment:" GridPane.rowIndex="3" /> 
         <Label text="Status:" GridPane.columnIndex="2" GridPane.rowIndex="1" /> 
         <Label text="Unit:" GridPane.columnIndex="2" /> 
         <Label fx:id="idLabel" GridPane.columnIndex="1" /> 
         <Label fx:id="locationLabel" GridPane.columnIndex="1" GridPane.rowIndex="1" /> 
         <Label fx:id="longDescriptionLabel" wrapText="true" GridPane.columnIndex="1" GridPane.columnSpan="3" GridPane.rowIndex="2" /> 
         <Label fx:id="commentLabel" wrapText="true" GridPane.columnIndex="1" GridPane.columnSpan="3" GridPane.rowIndex="3" /> 
         <Label fx:id="statusLabel" GridPane.columnIndex="3" GridPane.rowIndex="1" /> 
         <Label fx:id="unitLabel" GridPane.columnIndex="3" /> 
        </children> 
       </GridPane> 
       <VBox GridPane.rowIndex="2" GridPane.vgrow="ALWAYS"> 
        <children> 
         <Pane fx:id="pane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" VBox.vgrow="ALWAYS"> 
          <children> 
           <StackPane fx:id="imagePane" alignment="TOP_LEFT" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"> 
            <children> 
             <ImageView fx:id="imageView" onMouseClicked="#imageClicked" pickOnBounds="true" preserveRatio="true" StackPane.alignment="CENTER"> 
              <viewport> 
               <Rectangle2D /> 
              </viewport> 
             </ImageView> 
             <Button fx:id="videoButton" disable="true" mnemonicParsing="false" onAction="#videoButtonClicked" text="Video" visible="false" StackPane.alignment="TOP_RIGHT"> 
              <StackPane.margin> 
               <Insets right="3.0" top="3.0" /> 
              </StackPane.margin> 
             </Button> 
            </children> 
           </StackPane> 
          </children> 
         </Pane> 
         <Label fx:id="figLabel" alignment="TOP_LEFT" /> 
        </children> 
       </VBox> 
      </children> 
     </GridPane> 
    </center> 
</View> 

Answer 1

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

@Override 
public void postInit(Scene scene) { 
    scene.getWindow().setWidth(320); 
    scene.getWindow().setHeight(600); 
} 

Использование ScenicView вы заметите, что вид имеет Ширина 370 px, так как минимальная ширина для верхней внутренней сетки равна 360 px.

Пока вы не установили минимальное значение для какого-либо элемента управления, вы можете видеть, что стилизованные кнопки не изменяются правильно, так как минимальная ширина задается css.

Попробуйте добавить это, чтобы удалить их минимальное значение ширины:

.view { 
} 

.button { 
    -fx-min-width: 10; 
} 

Теперь вид должен быть в пределах границы мобильного экрана:

Answer 2

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

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