JavaFX Lösungsvorschläge für dieses coole Control

[lam_tr]

Hallo zusammen,

grad eben bin ich auf dieses coole Control gekommen und möchte es gerne nachbauen.

Quelle: https://medium.muz.li/profile-page-inspiration-2152f16bde07

Hätte jemand eine Idee wie man da vorgehen kann, es geht mir nur um den rechten Teil?

Ich skizziere mal grob den UI Baum

AnchorPane
|- HBox
|- ScrollPane + Inhalt

- Wie kann ich an der Stelle das ImageView über der ScrollPane machen
- Vermutlich muss ich ein MouseListener auf die ImageView machen, sobald der Abstand zum oberen Rand kleiner wird 2-4Pixel dann ScaleTransition ausführen zum Verkleinern?
- Für die obere HBox auch ein Listener, sobald der ImageView 2-4Pixel dann FadeIn ansonsten FadeOut (FadeTransition)

Aber an sich bewege hier den Inhalt der ScrollPane sondern die ScrollPane an sich oder?

Hat ja jemand Verbessungsvorschläge oder Anregungen für mich.

Vielen Dank
lam

 

[dzim]

Sieht nett aus, müsste ich aber ausprobieren. Könnte man eventuell machen, indem man beim Maus-Scroll testet, ob der ScrollView des Contents bei vscroll-Value 0.0 ist und dann ein Translate des gesamten Views nach unten machen. Andersherum musst du testen, dass der Translate-Wert gleich 0 ist, bevor du scrolling auf dem ScrollView wieder zulässt.
Bin selbst kein Profi im schreiben von Controlls, aber das wäre so mein erster naiver Anfang.

 

[lam_tr]

Hi dzim,

ich habe mal probert das hinzubekommen, es wirkt einfach nicht gut.



Vor allem, wenn ich nach oben verschiebe, dann wird die ScrollPane nicht ausgedehnt sondern nur translated, unten soll nicht gelb sein.

Eine weitere Hässlichkeit ist, wenn ich wieder runter scrolle, dann sollte sofort der grüne Bereich verschwinden. Das tut es aber nicht, erst wenn ich den Content der ScrollPane bis zum Anschlag gescrollt habe.

Ich habe mein Ergebnis gezippt, vielleicht kannst du da mal reinschauen und weitere Verbesserungsvorschläge geben.

 

[Robat]

Ich hab auch mal angefangen etwas rum zuspielen. Hab es direkt mal als Komponente gestaltet - ist natürlich noch absolut nicht perfekt. Ich mach bestimmt noch bisschen weiter, wenn ich Zeit habe

public class PrettyProfileComponent extends StackPane {

    private static final double SCROLL_OFFSET = 20;
    private static final double NAVBAR_HEIGHT = 50;
    private static final double PROFILE_IMAGE_SIZE = 125;
    private static final double CONTENT_START_POS = 500;

    @FXML
    private HBox navbar;
    @FXML
    private Pane profileImage;
    @FXML
    private ScrollPane profileContent;

    public PrettyProfileComponent() {
        loadFxmlDefinition();

        layoutProfileContent();
        layoutNavbar();
        layoutProfileImage();
    }

    private void loadFxmlDefinition() {
        final FXMLLoader loader = new FXMLLoader(getClass().getResource("/root.fxml"));
        loader.setRoot(this);
        loader.setController(this);
        try {
            loader.load();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    private void layoutNavbar() {
        navbar.setStyle("-fx-background-color: #ebebeb");
        navbar.setEffect(new DropShadow(10, Color.BLACK));
        navbar.setMaxHeight(NAVBAR_HEIGHT);
        navbar.setMinHeight(NAVBAR_HEIGHT);
        navbar.setPrefHeight(NAVBAR_HEIGHT);
        navbar.toFront();


        navbar.visibleProperty().bind(Bindings.when(
                Bindings.createBooleanBinding(() -> (profileContent.getMaxHeight() >= (getHeight() - NAVBAR_HEIGHT) && profileContent.getMaxHeight() != CONTENT_START_POS)
                        , profileContent.maxHeightProperty())).then(true).otherwise(false));

        StackPane.setAlignment(navbar, Pos.TOP_CENTER);
    }

    private void layoutProfileImage() {
        StackPane.setAlignment(profileImage, Pos.TOP_LEFT);

        profileImage.setStyle("-fx-background-color: blue;");
        profileImage.setMaxHeight(PROFILE_IMAGE_SIZE);
        profileImage.setMaxWidth(PROFILE_IMAGE_SIZE);
        profileImage.setTranslateX(PROFILE_IMAGE_SIZE);
        profileImage.translateYProperty().bind(Bindings.createDoubleBinding(() -> {
            final double currentPos = getHeight() - profileContent.getMaxHeight();
            final double height = profileImage.getHeight();
            return currentPos - (height/2);
        }, profileContent.maxHeightProperty()));
        profileImage.visibleProperty().bind(navbar.visibleProperty().not());
        profileImage.toFront();

    }

    private void layoutProfileContent() {

        profileContent.setMaxHeight(CONTENT_START_POS);
        profileContent.setVbarPolicy(ScrollPane.ScrollBarPolicy.ALWAYS);
        profileContent.addEventFilter(ScrollEvent.SCROLL, event -> {
            if(event.getDeltaY() < 0) {
                if(profileContent.getMaxHeight() < getHeight()) {
                    profileContent.setMaxHeight(Math.min(getHeight(), profileContent.getMaxHeight() + SCROLL_OFFSET));
                    event.consume();
                }
            } else {
                if(profileContent.getVvalue() == 0) {
                    profileContent.setMaxHeight(Math.max(profileContent.getMaxHeight() - SCROLL_OFFSET, CONTENT_START_POS));
                    event.consume();
                }
            }
        });

        profileContent.setContent(new Label(String.join("\n\n", Collections.nCopies(40, "Hallo\n"))));
        StackPane.setAlignment(profileContent, Pos.BOTTOM_CENTER);
    }
}

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

<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.Pane?>
<fx:root type="javafx.scene.layout.StackPane" xmlns:fx="http://javafx.com/fxml">
   <HBox fx:id="navbar">
      <Label text="Navbar" />
   </HBox>
   <Pane fx:id="profileImage" />
   <ScrollPane fx:id="profileContent" />
</fx:root>

 

[lam_tr]

Ich hab auch mal angefangen etwas rum zuspielen. Hab es direkt mal als Komponente gestaltet - ist natürlich noch absolut nicht perfekt. Ich mach bestimmt noch bisschen weiter, wenn ich Zeit habe

public class PrettyProfileComponent extends StackPane {

    private static final double SCROLL_OFFSET = 20;
    private static final double NAVBAR_HEIGHT = 50;
    private static final double PROFILE_IMAGE_SIZE = 125;
    private static final double CONTENT_START_POS = 500;

    @FXML
    private HBox navbar;
    @FXML
    private Pane profileImage;
    @FXML
    private ScrollPane profileContent;

    public PrettyProfileComponent() {
        loadFxmlDefinition();

        layoutProfileContent();
        layoutNavbar();
        layoutProfileImage();
    }

    private void loadFxmlDefinition() {
        final FXMLLoader loader = new FXMLLoader(getClass().getResource("/root.fxml"));
        loader.setRoot(this);
        loader.setController(this);
        try {
            loader.load();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    private void layoutNavbar() {
        navbar.setStyle("-fx-background-color: #ebebeb");
        navbar.setEffect(new DropShadow(10, Color.BLACK));
        navbar.setMaxHeight(NAVBAR_HEIGHT);
        navbar.setMinHeight(NAVBAR_HEIGHT);
        navbar.setPrefHeight(NAVBAR_HEIGHT);
        navbar.toFront();


        navbar.visibleProperty().bind(Bindings.when(
                Bindings.createBooleanBinding(() -> (profileContent.getMaxHeight() >= (getHeight() - NAVBAR_HEIGHT) && profileContent.getMaxHeight() != CONTENT_START_POS)
                        , profileContent.maxHeightProperty())).then(true).otherwise(false));

        StackPane.setAlignment(navbar, Pos.TOP_CENTER);
    }

    private void layoutProfileImage() {
        StackPane.setAlignment(profileImage, Pos.TOP_LEFT);

        profileImage.setStyle("-fx-background-color: blue;");
        profileImage.setMaxHeight(PROFILE_IMAGE_SIZE);
        profileImage.setMaxWidth(PROFILE_IMAGE_SIZE);
        profileImage.setTranslateX(PROFILE_IMAGE_SIZE);
        profileImage.translateYProperty().bind(Bindings.createDoubleBinding(() -> {
            final double currentPos = getHeight() - profileContent.getMaxHeight();
            final double height = profileImage.getHeight();
            return currentPos - (height/2);
        }, profileContent.maxHeightProperty()));
        profileImage.visibleProperty().bind(navbar.visibleProperty().not());
        profileImage.toFront();

    }

    private void layoutProfileContent() {

        profileContent.setMaxHeight(CONTENT_START_POS);
        profileContent.setVbarPolicy(ScrollPane.ScrollBarPolicy.ALWAYS);
        profileContent.addEventFilter(ScrollEvent.SCROLL, event -> {
            if(event.getDeltaY() < 0) {
                if(profileContent.getMaxHeight() < getHeight()) {
                    profileContent.setMaxHeight(Math.min(getHeight(), profileContent.getMaxHeight() + SCROLL_OFFSET));
                    event.consume();
                }
            } else {
                if(profileContent.getVvalue() == 0) {
                    profileContent.setMaxHeight(Math.max(profileContent.getMaxHeight() - SCROLL_OFFSET, CONTENT_START_POS));
                    event.consume();
                }
            }
        });

        profileContent.setContent(new Label(String.join("\n\n", Collections.nCopies(40, "Hallo\n"))));
        StackPane.setAlignment(profileContent, Pos.BOTTOM_CENTER);
    }
}

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

<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.Pane?>
<fx:root type="javafx.scene.layout.StackPane" xmlns:fx="http://javafx.com/fxml">
   <HBox fx:id="navbar">
      <Label text="Navbar" />
   </HBox>
   <Pane fx:id="profileImage" />
   <ScrollPane fx:id="profileContent" />
</fx:root>

Also ich find es schon perfekt... habs nicht mal annähernd so hinbekommen. Richtig Cool!

 

[dzim]

Ich hatte noch keine Zeit (*hust* Lust) daran herumzuexperimentieren... @Robat Super Vorarbeit!

 

[lam_tr]

Ich hatte noch keine Zeit (*hust* Lust) daran herumzuexperimentieren... @Robat Super Vorarbeit!

@dzim, @Robat
Wie macht ihr das nur, ich will das auch lernen. Aber das was mich da am meisten abschreckt, ist die Mathematik dahinter. Das ganze Layouting berechnen fällt mir immer schwer.

 

[dzim]

Ich hab es ja nicht gemacht, weil ich eben auch gerade keinen Bock darauf hatte. Aber im Ernst: Am Ende musst du "nur" ein paar Bindings machen und Trial-and-Error geht auch immer...
Das wichtige ist, dass du halt wissen musst, wann/wo/welchen Event-Filter/-Handler etc. du anhängen musst. Am Code von @Robat sieht man es schön am ScrollEvent-Filter.

 

[Robat]

Also ich find es schon perfekt... habs nicht mal annähernd so hinbekommen. Richtig Cool!

Naja man könnte noch ein paar fancy Transitions einbauen. Außerdem gibt es noch einen kleinen Bug, dass das Profilbild erst nach dem ersten scrollen angezeigt wird, da getHeight() 0 liefert und maxHeight des Profilbildes dadurch -500 ist. Weiterhin ist die fixe Startposition des Scrollpanes nicht so schön. Sieht bei Fullscreen nicht schön aus

Trial-and-Error geht auch immer...

Das ist genau das Stichwort. Ich hab auch viel herumprobiert und geschaut wie man am schönsten den Effekt bekommt. Letztendlich ist es ausprobieren und die nötigen Bindings erzeugen.

Wie macht ihr das nur, ich will das auch lernen

Ehrlich gesagt kann man da mEn nicht viel lernen .. einfach machen, machen und machen. Viel ausprobieren, kreativ sein was Lösungen angeht und aufstehen, wenn man mal hinfällt. Ansonsten einfach mal die Methoden anschauen, die die versch. Klassen so haben und damit rumhantieren
Oder eben, was auch ein schöner Weg ist, nachfragen und sich austauschen