web-dev-qa-db-fra.com

Comment centrer les contrôles JavaFX

Plus précisément, pourquoi mes contrôles JavaFX ne sont-ils pas centrés? Voici deux captures d'écran, la première juste après le démarrage (j'ai déplacé la fenêtre dans un endroit plus visible mais je ne l'ai pas encore redimensionnée), et la seconde juste après le redimensionnement pour montrer mon problème. Points bonus si vous m'aidez à vous assurer qu'il est correctement dimensionné (sur tous les DPI) lors de sa première présentation:

A small window with the title "Checking", and only a small sliver of content, on top of its own codeThe same scene, but the window now shows the title "Checking for Updates...", its content more apparent, where the components are centered, but not their content.

Idéalement, le code correspondant est inclus dans ces captures d'écran. Si vous en avez toujours besoin sous forme de texte, c'est parti:

private void initJFXPanel(JFXPanel holder)
{
    {
        {
            rootGrid = new GridPane();
            rootGrid.setAlignment(Pos.CENTER);
            rootGrid.setPadding(new Insets(16));
            rootGrid.setHgap(16);
            rootGrid.setVgap(8);
        }

        interior = holder.getScene();
        if (interior == null)
            holder.setScene(interior = new Scene(rootGrid));
        interior.setRoot(rootGrid);

    }
    {
        statusLabel = new Label("Checking for Updates...");
        statusLabel.setAlignment(Pos.CENTER);
        statusLabel.setTextAlignment(TextAlignment.CENTER);
        rootGrid.add(statusLabel, 0, 0);
    }
    {
        progressBar = new ProgressBar();
        progressBar.setProgress(-1);
        progressBar.setPrefWidth(Constants.MAX_WIN_BOUNDS.width / 5d); // 1/5 the width of the screen
        rootGrid.add(progressBar, 0, 1);
    }
    {
        downloadButton = new Button("Get it!");
        downloadButton.setAlignment(Pos.CENTER);
        rootGrid.add(downloadButton, 0, 2);
    }
    holder.setMinimumSize(new Dimension((int)(rootGrid.getPrefWidth() + .5), (int)(rootGrid.getPrefHeight() + .5)));
    setMinimumSize(holder.getMinimumSize());
}
javauser-interfacejavafxui-design
11
Supuhstar

Solution

Placez vos contrôles dans une VBox (ou un autre volet de disposition racine similaire) et définissez l'alignement de la VBox au centre.

Conseils de mise en page

Ceci est mon conseil personnel pour commencer avec la mise en page dans JavaFX (c'est juste un conseil et ne s'applique pas à tout le monde, vous pouvez le prendre ou le laisser):

  • Votre fenêtre et tous les contrôles et mises en page seront automatiquement dimensionnés à leur taille préférée.
  • Laissez les gestionnaires de mise en page intégrés et le système de mise en page faire autant de calculs que possible avec vous en fournissant simplement les conseils de mise en page minimum nécessaires pour obtenir votre résultat.
  • Restez à utiliser uniquement JavaFX ou Swing uniquement jusqu'à ce que vous soyez familier avec les deux styles de développement de code et que vous ayez vraiment besoin de les mélanger.
  • Utilisez l'outil SceneBuilder pour jouer avec différentes dispositions et vous familiariser avec les mécanismes de disposition JavaFX.
  • Étudiez le tutoriel de mise en page JavaFX .
  • Consultez une présentation sur la disposition JavaFX .
  • Pour centrer une scène, l'appel d'écran stage.centerOnScreen () .
  • Pensez à utiliser le support de dialogue intégré de Java 8u40 (quand il sera publié).

Prise en charge Hi-dpi

Voir la réponse à:

Exemple de code basé sur FXML pour votre boîte de dialogue

update-check

Vous pouvez charger ce qui suit dans SceneBuilder pour l'afficher facilement:

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

<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import Java.lang.*?>
<?import javafx.scene.layout.*?>

<VBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" spacing="8.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Label fx:id="updateStatus" text="Checking for Updates..." />
      <ProgressBar fx:id="updateProgress" prefWidth="200.0" progress="0.0" />
      <Button fx:id="updateAction" mnemonicParsing="false" text="Get it!" />
   </children>
   <padding>
      <Insets bottom="16.0" left="16.0" right="16.0" top="16.0" />
   </padding>
</VBox>
21
jewelsea

Redimensionner le problème

Assurez-vous que vous ajoutez une taille à votre JFrame

frame.setSize(500, 300);

Problème central

Je ne sais pas si vous envisagez de centrer votre cadre ou les contrôles JavaFX dans le GridPane, donc j'ajoute des réponses pour les deux

Centrage de l'écran du cadre

Dimension dim = Toolkit.getDefaultToolkit().getScreenSize();
frame.setLocation(dim.width/2-frame.getSize().width/2, 
                                        dim.height/2-frame.getSize().height/2);

screenshot

GridPane Centrage enfant

Vous devez ajouter

GridPane.setHalignment(child, HPos.CENTER);

à votre code, supprimez le reste du code inutile

J'ai édité votre code:

{
    Label statusLabel = new Label("Checking for Updates...");
    //statusLabel.setAlignment(Pos.CENTER);
    //statusLabel.setTextAlignment(TextAlignment.CENTER);
    rootGrid.add(statusLabel, 0, 0);
    GridPane.setHalignment(statusLabel, HPos.CENTER);
}
{
    ProgressBar progressBar = new ProgressBar();
    progressBar.setProgress(-1);
    progressBar.setPrefWidth(400); // 1/5 the width of the screen
    rootGrid.add(progressBar, 0, 1);
}
{
    Button downloadButton = new Button("Get it!");
    //downloadButton.setAlignment(Pos.CENTER);
    rootGrid.add(downloadButton, 0, 2);
    GridPane.setHalignment(downloadButton, HPos.CENTER);
}

et le résultat est

enter image description here

3
ItachiUchiha