Gluon Mobile GridPane mit Prozentsätzen funktioniert nicht

Question

Ich habe eine Ansicht mit in der Mitte eine GridPane, die den gesamten Bildschirm füllt. Das GridPane hat Prozentsätze für alle Zeilen und alle Spalten definiert. Auf meinem Nexus 5X funktioniert das Layout normal. Wenn ich die App auf einem Zebra Scanner TC8000 installiere, der ein Android 4.4.3 ist, werden die Prozentsätze nicht respektiert. Stattdessen werden grob die oberen 50% angezeigt und der Rest verschwindet, ähnlich wie der Bildschirm zu klein ist.

Die Auflösung auf dem Zebra ist natürlich viel weniger, 480x800 vs 1080x1920 auf dem 5X, aber ich erwartete, dass die Komponenten entsprechend den Prozentsätzen des GridPane herunterskalieren würden. Weiß jemand, was schief läuft?

Edit: Ich habe viele verschiedene Dinge ausprobiert und der beste Code, den ich bekam, ist der Code unten. Die Probleme dieses Codes sind: - Die erste Zeile nimmt 55% der Bildschirmhöhe statt der 30%, die konfiguriert ist. - Die Komponenten verlassen den Bildschirm in der Breite um ca. 50 - 100 Pixel. Wenn dieser gelöst ist, wird das Layout akzeptabel.

<?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

Sie können das Problem reproduzieren, wenn Sie Ihre Anwendung auf dem Desktop laufen, und die Bühne Abmessungen 320x600:

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

ScenicView Verwenden Sie werden feststellen, dass die Aussicht hat 370 px Breite, da die minimale Breite für das obere innere Raster 360 px ist.

Während Sie keinen Mindestwert für ein Steuerelement festgelegt haben, können Sie sehen, dass die formatierten Schaltflächen nicht korrekt angepasst werden, da die Mindestbreite von CSS festgelegt wird.

Versuchen Sie, diese Zugabe ihre minimale Breite Wert zu entfernen:

.view { 
} 

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

Nun ist die Ansicht innerhalb der Grenze des Handy-Display sein sollte:

Answer 2

Das Problem war, dass ich ein setzen Schaltfläche in einer Spalte mit geringer Breite. In SceneBuilder und auf Geräten mit hoher Auflösung sah das Layout gut aus, aber wenn es auf einem kleinen Bildschirm angezeigt wurde, wurde der Button zu breit für die Spalte. Als Reaktion wurde die Größe der Ansicht auf eine größere maximale Breite geändert und da die Breite den Bildschirm bereits gefüllt hat, wurde der Bildschirm jetzt übertroffen.

Imo sollte die Größe der Schaltfläche angepasst oder verkleinert werden, damit sie in die GridPane-Zelle passt. Außerdem ist die Mindestgröße der in den Berechnungen verwendeten Schaltfläche ziemlich groß, obwohl meine Schaltfläche nur ein Pluszeichen enthielt.