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

L

lam_tr

Top Contributor
Hallo zusammen,

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

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
 

Anhänge

  • 1569499131310.png
    1569499131310.png
    359,5 KB · Aufrufe: 37
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.
 
Hi dzim,

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

12428

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.
 

Anhänge

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 🙂
Java: 
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: 
<?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>
 
Robat hat gesagt.:
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 🙂
Java: 
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: 
<?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>
Zum Vergrößern anklicken....

Also ich find es schon perfekt... habs nicht mal annähernd so hinbekommen. Richtig Cool!
 
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.
 
lam_tr hat gesagt.:
Also ich find es schon perfekt... habs nicht mal annähernd so hinbekommen. Richtig Cool!
Zum Vergrößern anklicken....
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 😛
dzim hat gesagt.:
Trial-and-Error geht auch immer...
Zum Vergrößern anklicken....
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.
lam_tr hat gesagt.:
Wie macht ihr das nur, ich will das auch lernen
Zum Vergrößern anklicken....
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 🙂
 

Aktuelle Jobs

Neue Themen

Ähnliche Themen

Checkstyle: Lösungsvorschläge für Design for Extension
Antworten: 7
Lösungsvorschläge für Multi-User
Antworten: 1
Zwei Lösungsvorschläge für eine Aufgabenstellung gesucht
Antworten: 3
coole Methoden
Antworten: 6
Control für Tabreiter (TabbedPane)
Antworten: 8

Zurück
Oben