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

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

dzim

Top Contributor
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

Top Contributor
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

  • coolwidget.zip
    1,9 KB · Aufrufe: 0

Robat

Top Contributor
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>
 

lam_tr

Top Contributor
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>

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

dzim

Top Contributor
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

Top Contributor
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 :p
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 :)
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
Juelin setzen background color für selected Row im Tableview AWT, Swing, JavaFX & SWT 21
Juelin Für Java-Spezialisten AWT, Swing, JavaFX & SWT 4
H JTabel - RowFilter Daten für Berechnung filtern AWT, Swing, JavaFX & SWT 6
I JavaFX JavaFx-Anwendung für die Erstellung einer Windows-Anwendung? AWT, Swing, JavaFX & SWT 6
M Eigene Java Klasse für allgemeine Grafikelemente AWT, Swing, JavaFX & SWT 8
M Vokabelprogram - Schleife für Liste soll schrittweise durchlaufen werden AWT, Swing, JavaFX & SWT 3
tommybalbor JavaFx Anwendung klappt nicht für macOs Nutzern, wenn ich zwei dependecies bei maven hinzufüge AWT, Swing, JavaFX & SWT 6
I Libraries für AWT für andere Grafik-Frameworks tauglich machen AWT, Swing, JavaFX & SWT 6
R auto. Importanweisungen für javafx funktioniert in Eclipse nicht mehr AWT, Swing, JavaFX & SWT 4
komplettlost Vollbildmodus für MacOs Nutzer geht nicht AWT, Swing, JavaFX & SWT 13
D JavaFX Schadensberechnung für Kartenspiel AWT, Swing, JavaFX & SWT 1
P JTable Listener für die Änderung einzelner Zellen oder Rows AWT, Swing, JavaFX & SWT 2
Jose05 JavaFX: eigene FXML-Datei für einen Button AWT, Swing, JavaFX & SWT 3
L actionListener für Button AWT, Swing, JavaFX & SWT 97
izoards Textfeld für Zeit AWT, Swing, JavaFX & SWT 4
CptK Wie funktioniert contains() für Path2D.Double AWT, Swing, JavaFX & SWT 10
T Getter und Setter für eine Stage AWT, Swing, JavaFX & SWT 6
P Swing Programm hängt sich bei Buttondruck auf? (GUI für "Chatbot" erstellen) AWT, Swing, JavaFX & SWT 15
T Button für GUI programmieren AWT, Swing, JavaFX & SWT 1
Z Switch Case für Buttons AWT, Swing, JavaFX & SWT 8
M Hough-Transformation für Kreise und andere Formen AWT, Swing, JavaFX & SWT 3
kodela HTML-tags für JLabel AWT, Swing, JavaFX & SWT 9
E Keystroke für Ausschneiden läßt sich nicht ändern AWT, Swing, JavaFX & SWT 2
M Swing Cell Renderer für Zeilenumbruch in JTable AWT, Swing, JavaFX & SWT 0
MiMa Package Struktur für GUI Programmierung AWT, Swing, JavaFX & SWT 26
N JavaFX 1 Listener für mehrere ChoiceBoxen AWT, Swing, JavaFX & SWT 3
B eclipse für JavaFx setuppen AWT, Swing, JavaFX & SWT 4
K Swing Struktur für TreeTable rekursiv aufbauen AWT, Swing, JavaFX & SWT 17
A Swing JTextField an Button übergeben für Popup-Fenster funktioniert nicht AWT, Swing, JavaFX & SWT 3
H Ein Patten für das Gluon Mobile Framework AWT, Swing, JavaFX & SWT 7
J Gibt es einen Grund für 16x16 anstatt z.B. 15x15 Tiles ? AWT, Swing, JavaFX & SWT 10
F JFormattedTextField für kg und Währung AWT, Swing, JavaFX & SWT 6
V Swing für jedes Kästchen eine eigene Farbe AWT, Swing, JavaFX & SWT 2
F Wie bekomme ich den Wert der ComboBox in eine Variable gespeichert welche ich für meinen ActionListener nutzen kann? AWT, Swing, JavaFX & SWT 3
Soloeco JavaFX Dreifachklick für MenuButton erforderlich AWT, Swing, JavaFX & SWT 2
looparda Suche Lib für Visualisierung von Graphen AWT, Swing, JavaFX & SWT 12
G LayoutManager Beliebige Anzahl von Panels für LayoutManager AWT, Swing, JavaFX & SWT 3
L Ein Actionlistener für ein Textfeld, anstatt viele Actionlistener für ein Textfeld AWT, Swing, JavaFX & SWT 7
S Swing Finde Grund für NullPointerExeption nicht. AWT, Swing, JavaFX & SWT 2
W JavaFX (j)Unittests für GUI AWT, Swing, JavaFX & SWT 0
B JavaFX JavaFX TableView PropertyValueFactory für Werte aus HashMap AWT, Swing, JavaFX & SWT 2
SchmidiMC Swing Vorschläge für ein Design AWT, Swing, JavaFX & SWT 5
Z JavaFX Pane für wechselnde Sub-Panes mit Auto-Resize AWT, Swing, JavaFX & SWT 2
S 2D-Grafik affine Transformation für Text-Shape AWT, Swing, JavaFX & SWT 0
G Swing Variable Elemente für GroupLayout AWT, Swing, JavaFX & SWT 18
kodela Accalerator für einige Menüoptionen funktioniert nicht mehr AWT, Swing, JavaFX & SWT 3
P Swing Empfehlungen für einfaches Computerspiel AWT, Swing, JavaFX & SWT 4
L DragDropped für jede Node AWT, Swing, JavaFX & SWT 0
temi JavaFX Lösungsansatz für Umsetzung gesucht AWT, Swing, JavaFX & SWT 4
J Swing JavaProgramm für Verschlüssen für eine Datei AWT, Swing, JavaFX & SWT 19
D DatePicker für Java Swing AWT, Swing, JavaFX & SWT 2
MiMa Programmeinstellungen für Anwendung?? AWT, Swing, JavaFX & SWT 54
heinz ketchup While-Schleife in einem Service für GUI AWT, Swing, JavaFX & SWT 22
L JavaFX Renderer für JavaFX AWT, Swing, JavaFX & SWT 2
MiMa GUI Controller für Border Pane als MVC Modell AWT, Swing, JavaFX & SWT 1
L Font für Dashboard AWT, Swing, JavaFX & SWT 3
F Swing JColorChooser für die JToggleButtons AWT, Swing, JavaFX & SWT 5
S JavaFX Optimierung für verschiedene Auflösungen AWT, Swing, JavaFX & SWT 12
L JavaFX Animation für Panel wechsel AWT, Swing, JavaFX & SWT 3
T Swing Drag and Drop für JComponents AWT, Swing, JavaFX & SWT 1
Kloso Swing Pseudocode für Strafurzeichnung AWT, Swing, JavaFX & SWT 4
F Konstruktor für "Vier Gewinnt" AWT, Swing, JavaFX & SWT 10
L JavaFX PdfViewer für JavaFX Anwendung AWT, Swing, JavaFX & SWT 6
R Swing Welche LayoutManager sind die richtigen für mich? AWT, Swing, JavaFX & SWT 11
L Event Handling Gui für Taschenrechner AWT, Swing, JavaFX & SWT 27
C Slider für Zeitauswahl AWT, Swing, JavaFX & SWT 3
M Limit für JFrame-Vergrößerung AWT, Swing, JavaFX & SWT 8
GreenTeaYT Button funktioniert nicht für Ein-und Auszahlungen? AWT, Swing, JavaFX & SWT 8
K Liniendicke für Line Chart dynamisch ändern AWT, Swing, JavaFX & SWT 0
K JButton nicht sichtbar machen für User 2 AWT, Swing, JavaFX & SWT 4
OnDemand Gui Themes für FX AWT, Swing, JavaFX & SWT 4
G DefaultListModel für JList AWT, Swing, JavaFX & SWT 2
P JavaFX Kalender mit Kacheln für Ereignisse AWT, Swing, JavaFX & SWT 4
S ActionListener für alle Buttons AWT, Swing, JavaFX & SWT 26
J Swing Neuen Command für "show"? AWT, Swing, JavaFX & SWT 2
sandaime Swing Thread für CMD auslesen AWT, Swing, JavaFX & SWT 16
H Swing JFileChooser für nicht existierendes Unterverzeichnis AWT, Swing, JavaFX & SWT 3
R Java FX - Fxml - relative Größenangaben für Breite und Höhe einer TextArea AWT, Swing, JavaFX & SWT 8
D GUI-Bau für ein Auswertungs-Tool AWT, Swing, JavaFX & SWT 11
L Swing CellRenderer für einzelne Zellen? AWT, Swing, JavaFX & SWT 5
RalleYTN Swing Menü für Texteditor (Rechtsklick) AWT, Swing, JavaFX & SWT 4
H Applet Flappy Bird für Noobs AWT, Swing, JavaFX & SWT 4
X JavaFX Tooltips für XYChart-Knoten werden nicht angezeigt! AWT, Swing, JavaFX & SWT 3
Thallius Swing Aufgabe für einen der gerne Tüftelt. AWT, Swing, JavaFX & SWT 4
A hilfe für flowlayout AWT, Swing, JavaFX & SWT 6
B EventHandler für durch Tastenkombination erzeugte Zeichen AWT, Swing, JavaFX & SWT 3
T Hintergrund für GUI AWT, Swing, JavaFX & SWT 1
L JavaFX TableView mit Attributs der Modellreferenzerierung für die Spalte AWT, Swing, JavaFX & SWT 3
C JavaFX Character Comparator für TableColumn AWT, Swing, JavaFX & SWT 0
KrokoDiehl JavaFX Gleiche Controller-Instanz für inludiertes FXML AWT, Swing, JavaFX & SWT 1
V Tastatur KeyListener für mehrere Buttons AWT, Swing, JavaFX & SWT 1
S Pfad für Speichervorgang auswählen AWT, Swing, JavaFX & SWT 11
M If für viele TextFields AWT, Swing, JavaFX & SWT 7
stylegangsta Eigene Klasse für JButton aus dem JFrame abrufen AWT, Swing, JavaFX & SWT 29
R JMenuItems für Touchscreen auseinanderziehen AWT, Swing, JavaFX & SWT 3
L LookAndFeel Eigenes Design für die Applikation AWT, Swing, JavaFX & SWT 4
G Grafikformat für AWT-Applet? AWT, Swing, JavaFX & SWT 0
J Java -8 Action Listener für mehrere Buttons AWT, Swing, JavaFX & SWT 9
Z JavaFX TableView cellValueFactory für Arrays AWT, Swing, JavaFX & SWT 2
T LayoutManager Methode, um Bildschirm(fenster) für Aktualisierungen zu blockieren bzw. freizugeben gesucht AWT, Swing, JavaFX & SWT 2

Ähnliche Java Themen

Neue Themen


Oben