web-dev-qa-db-ja.com

JavaFXコントロールを中央に配置する方法

より具体的には、JavaFXコントロールが中央に配置されないのはなぜですか？以下は2つのスクリーンショットです。1つ目は開始直後（ウィンドウをより見やすい場所に移動しましたが、まだサイズ変更していません）と2つ目は、問題を示すためにサイズ変更した直後です。最初に表示されたときに（すべてのDPIで）適切なサイズになっていることを確認すると、ボーナスポイントが表示されます。

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.

便利なことに、関連するコードがスクリーンショットに含まれています。それでもテキストとして必要な場合は、次のようにします。

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

解決

コントロールをVBox（または他の同様のルートレイアウトペイン）に配置し、 VBoxの配置を設定 を中央に配置します。

レイアウトのアドバイス

これは、JavaFXでのレイアウトの開始に関する私の個人的なアドバイスです（これは単なるアドバイスであり、すべての人に適用できるわけではありません。そのままでも、そのままでもかまいません）。

  • ウィンドウとすべてのコントロールおよびレイアウトは、自動的に適切なサイズに調整されます。
  • 結果を得るのに必要な最小限のレイアウトヒントを提供するだけで、組み込みのレイアウトマネージャーとレイアウトシステムができるだけ多くの計算を実行できるようにします。
  • 両方のスタイルのコード開発に慣れ、実際にそれらを混合する必要があるまで、JavaFXのみまたはSwingのみのコードを使用することに固執してください。
  • SceneBuilderツールを使用してさまざまなレイアウトを試し、JavaFXレイアウトメカニズムに慣れます。
  • JavaFXレイアウトのチュートリアル を調べてください。
  • JavaFXレイアウトに関するプレゼンテーション を確認してください。
  • 画面をステージの中央に配置するには、 stage.centerOnScreen（） を呼び出します。
  • Java 8u40（リリースされたとき））の組み込みダイアログサポートの使用を検討してください。

Hi-dpiサポート

答えをご覧ください：

ダイアログのFXMLベースのサンプルコード

update-check

SceneBuilder に以下をロードして、簡単に表示できます。

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

問題のサイズ変更

JFrameにサイズを追加していることを確認してください

frame.setSize(500, 300);

センター問題

GridPaneでフレームまたはJavaFXコントロールを中央揃えにするかどうかわからないので、両方に回答を追加します

フレーム画面のセンタリング

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

screenshot

GridPane児童センタリング

追加する必要があります

GridPane.setHalignment(child, HPos.CENTER);

あなたのコードに、残りの不要なコードを削除してください

私はあなたのコードを編集しました：

{
    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);
}

結果は

enter image description here

3
ItachiUchiha