JavaFX Pane inklusive Inhalt der Bildschirm Auflösung anpassen

[Lyreex]

Guten Tag zusammen,

ich benötige wieder eure Fachmänniche Hilfe.
Heute hätte ich eine Frage zu der JavaFX Oberfläche. Wie ich die so anpassen kann, das die GUI sich an jede Auflösung automatisch anpasst.

Zur GUI:
Die GUI ist auf Pane aufgebaut. Darin enthalten sind noch Labels, ein Bild (oben Rechts als Logo) und noch eine weiteres Pane (pane2).
In der Pane2 sind ebenfalls Labels enthalten. Mehr ist auf der GUI nicht drauf. Also nur 2x Pane, 1x Bild und ein paar Labels.
Jetzt hat die GUI eine Standardmäßige Größe von 1911x1077.
Die GUI wird immer im Fullscreen angezeigt.

Problem:
Wenn die Bildschirmauflösung kleiner ist, dann fehlt die Hälfte von der Oberfläche.

Ich hab hier im Forum schon gesehen das bereits andere ein ähnliches Problem hatten.
Ein Lösungsansatz war es mit einer GridPane zu lösen, was bei mir leider nicht funktioniert hat.
Da die Labels während des Programmablaufs gefüllt werden und ich nicht genau sagen kann wie viel da rein kommt. Bei dem GridPane haben die sich dann nach oben aufgefüllt und sind teilweise auch überlappt. Entweder war ich zu doof dafür das richtig zu machen oder es passt halt wirklich nicht für meinen Anwendungszweck.

Mein Lösungsansatz:
Jetzt hab ich aber schon eine Idee wie man das ganze lösen könnte. Dazu würd ich aber gerne eure Meinung hören, ob das überhaupt Sinn macht.
Ich weiß ja das die optimale Auflösung 1911x1077 ist und das das Bild oben rechts in dem Fall Position x = 1218 und y = 72 hat.
Wenn ich jetzt eine Auflösung von z.B. 1366x768 habe könnte ich doch theoretisch die Position von dem Bild oben rechst neu ermitteln oder?
Dazu würd ich folgende Rechnung machen:

Beispiel für das Bild oben rechts auf der GUI:

Optimale Bildschirmauflösung - aktuelle Bildschirmauflösung = Positionsverschiebung
1911 - 1366 = 545


Aktuelle X Position von Image - Positionsverschiebung = neue X Position von Image
1218 - 545 = 671


Die neue errechnte X Positon würde ich dann am Anfang des Programmstartes setzen und das dann für alle Objekte auf der GUI durchziehen. Für jedes dann die entsprechende Rechnung ausführen. Die aktuelle Bildschirmauflösung bekomme ich über die Scene heraus, da diese immer im Vollbild Modus gestartet werden soll.


Wenn jemand eine smartere Lösung hat, würde ich mich freuen, wenn er diese mit mir teilt.

 

[mrBrown]

Generell ist es am sinnvollsten, auf absolute Positionsangaben zu verzichten, und stattdessen passende Layouts zu nutzen.
Welches da passt, hängt immer sehr vom spezifischen Fall ab.

Gridpane kann durchaus passend sein, was genau da das Problem war, hab ich nicht ganz verstanden. Wurden die Labels zu groß, um in die einzelnen "Zellen" zu passen?

 

[mihe7]

Wie ich die so anpassen kann, das die GUI sich an jede Auflösung automatisch anpasst.

könnte ich doch theoretisch die Position von dem Bild oben rechst neu ermitteln oder?

Genau das ist die Aufgabe eines Layouts (layout panes/layout container bzw. "LayoutManager" unter AWT/Swing).

Dazu würd ich aber gerne eure Meinung hören, ob das überhaupt Sinn macht.

In der Regel nicht.

 

[Lyreex]

Okay.

Ja genau, die haben nicht mehr in die Zelle gepasst und anstatt das die Labels den Text untereinander geschrieben haben, wurde der Text immer oben drüber angehongen. So das sich das Label von unten nach oben geschrieben hat statt von oben nach unten.

 

[Lyreex]

Genau das ist die Aufgabe eines Layouts (layout panes/layout container bzw. "LayoutManager" unter AWT/Swing).


In der Regel nicht.

Okay, gut.

Was genau ist den mit Layout gemeint? Das verwirrt mich jetzt etwas.

 

[mihe7]

Was genau ist den mit Layout gemeint? Das verwirrt mich jetzt etwas.

Guckst Du hier

javafx.scene.layout (JavaFX 8)

Gemeint sind damit Klassen, die das Layout übernehmen, also GridPane, AnchorPane, FlowPane usw.

 

[Lyreex]

Ahh okay.

Das heißt ich kann das Layout im SceneBuilder so einstellen, dass es sich von alleine an die Bildschirmauflösung anpasst?

 

[mihe7]

So in etwa

 

[Lyreex]

Ich bin da aktuell leider etwas Hilflos.
Ich hab jetzt mal die Pane gewechselt in eine AnchorPane.
Auch mal etwas mit den Einstellungen rumgespielt aber nicht auf das gewünschte Ergebnis gekommen.

Es gibt doch bestimmt eine Funktion mit der ich die Labels Prozentual auf die Oberfläche skalieren kann?

 

[mihe7]

Es gibt doch bestimmt eine Funktion mit der ich die Labels Prozentual auf die Oberfläche skalieren kann?

Ach, Du willst die Größe des Inhalts eines Labels skalieren? Das geht dann in die Richtung: https://stackoverflow.com/questions...t-truncating-text-within-it/13300657#13300657

 

[Lyreex]

Ach, Du willst die Größe des Inhalts eines Labels skalieren? Das geht dann in die Richtung: https://stackoverflow.com/questions...t-truncating-text-within-it/13300657#13300657

Ich hab mich wohl etwas unglücklich ausgedrückt. Sorry.
Die Idee war das die Label Position mit der Größe der Scene skaliert.

So das die Oberfläche auf allen Bildschirmen gleich aussieht. Egal welche Auflösung diese haben.

Also wenn ich jetzt die Oberfläche auf einem Bildschirm mit einer Auflösung von 1920x1080 öffne, dann ist oben rechts das Logo.

Wenn ich jetzt die Oberfläche auf einem Bildschirm mit einer Auflösung von 1366x768 öffne, dann sieht man das Logo nicht mehr, weil die Position außerhalb der Bildschirmauflösung liegt.

Ich wollt jetzt eine Methode schreiben um die Position (und ggf. Größe aber das ist vorerst nebensache) prozentual an die Größe anzupassen.

 

[mihe7]

Ich wollt jetzt eine Methode schreiben um die Position (und ggf. Größe aber das ist vorerst nebensache) prozentual an die Größe anzupassen.

Nochmal: genau das macht das Layout automatisch - es verteilt die Komponenten auf den zur Verfügung stehenden Platz. Wie es das macht, hängt vom gewählten Layout und dessen Einstellungen ab.

Wenn Du z. B. in einer nackten Anchorpane den Top- und Right-Anchor zu Deinem Logo mit einem Abstand von 20 bzw. 10 setzt, dann wird Dein Logo in diesem Panel mit einem Abstand von 20 nach oben und 10 nach rechts vom oberen, rechten Rand angezeigt - egal, wie groß Dein Fenster wird.

Wenn Du ein 4-spaltiges Layout haben willst, kannst Du eine GridPane verwenden und jeder Spalte z. B. 25 % Breite mitgeben.

Layouts lassen sich natürlich auch schachteln.

public class Main extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Personen");
        AnchorPane header = new AnchorPane();
        Label logo = new Label("LOGO");
        header.setTopAnchor(logo, 10.0);
        header.setRightAnchor(logo, 20.0);
        header.getChildren().add(logo);

        GridPane grid = new GridPane();
        for (int i = 0; i < 4; i++) {
            grid.add(new Button(Integer.toString(i)), i, i);
            ColumnConstraints cc = new ColumnConstraints();
            cc.setPercentWidth(25.0);
            grid.getColumnConstraints().add(cc);
        }

        BorderPane content = new BorderPane();
        content.setTop(header);
        content.setCenter(grid);

        Scene scene = new Scene(content, 400, 400);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

 

[Lyreex]

Nochmal: genau das macht das Layout automatisch - es verteilt die Komponenten auf den zur Verfügung stehenden Platz. Wie es das macht, hängt vom gewählten Layout und dessen Einstellungen ab.

Wenn Du z. B. in einer nackten Anchorpane den Top- und Right-Anchor zu Deinem Logo mit einem Abstand von 20 bzw. 10 setzt, dann wird Dein Logo in diesem Panel mit einem Abstand von 20 nach oben und 10 nach rechts vom oberen, rechten Rand angezeigt - egal, wie groß Dein Fenster wird.

Wenn Du ein 4-spaltiges Layout haben willst, kannst Du eine GridPane verwenden und jeder Spalte z. B. 25 % Breite mitgeben.

Layouts lassen sich natürlich auch schachteln.

public class Main extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Personen");
        AnchorPane header = new AnchorPane();
        Label logo = new Label("LOGO");
        header.setTopAnchor(logo, 10.0);
        header.setRightAnchor(logo, 20.0);
        header.getChildren().add(logo);

        GridPane grid = new GridPane();
        for (int i = 0; i < 4; i++) {
            grid.add(new Button(Integer.toString(i)), i, i);
            ColumnConstraints cc = new ColumnConstraints();
            cc.setPercentWidth(25.0);
            grid.getColumnConstraints().add(cc);
        }

        BorderPane content = new BorderPane();
        content.setTop(header);
        content.setCenter(grid);

        Scene scene = new Scene(content, 400, 400);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

Jaa genau das war das was ich gesucht hab. DANKE!!

Jetzt hab ich nur noch den kleinen Huddel, dass wenn der Text zu lange im Label ist, wird der Rest abgeschnitten.

 

[mihe7]

Jetzt hab ich nur noch den kleinen Huddel, dass wenn der Text zu lange im Label ist, wird der Rest abgeschnitten.

Sollte sich mit https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/Labeled.html#setWrapText-boolean- beheben lassen, oder?