ΣυρρίκνωσηToolbar scrollflags σε δράση!

Android Design - Συρρίκνωση γραμμής εργαλείων: ScrollFlags Εικονογραφημένο

Σε αυτή την ενότητα θα εξετάσουμε το CollapsingToolbar scrollflags, που συνδυάζει scrollflags και μερικές σκέψεις κατά την εφαρμογή τους.

1. ScrollFlags

Υπάρχουν 5 scrollflags που παρέχονται, αυτά είναι
 κύλιση, επέκτασηΠάντοτε, επέκτασηΠληροφορίες, συμπίεση, έξοδοςΕντίστοιχη συμπίεση.

Για να χρησιμοποιήσετε το scrollflags στο CollapsingToolbar, προσθέστε την ακόλουθη ιδιότητα στη CollapsingToolbar.

app: layout_scrollFlags = "<επιλέξτε-σημαία-εδώ>"

Τώρα ας δημιουργήσουμε έναν έλεγχο χωρίς σημαίες για να δούμε πώς συμπεριφέρεται το CollapsingToolbar.

Εικόνα 1: Έλεγχος συμπεριφοράς κύλισης χωρίς μετακίνηση.

Όπως μπορείτε να δείτε, από το Σχήμα 1, δεν συμβαίνει τίποτα ιδιαίτερο, το NestedScrollView μετακινείται ελεύθερα κάτω από το CollapsingToolbar, καθώς το CollapsingToolbar παραμένει σε κατάσταση επέκτασης. Αυτό είναι ιδανικό εάν έχετε μια προβολή στο CollapsingToolbar που θα πρέπει πάντα να παραμείνει επεκταμένη και ορατή.

1.1 μετακινηθείτε

app: layout_scrollFlags = "κύλιση"
Η σημαία κύλισης επιτρέπει στο NestedScrollView (δηλαδή στην υποκείμενη προβολή που περιλαμβάνει όλο το περιεχόμενο, π.χ. παραγράφους κειμένου και εικόνα) να σηματοδοτήσει στο CollapsingToolbar ότι βρίσκεται σε κατάσταση κύλισης.

Εικόνα 2: app: layout_scrollFlags =
  • Αν το NestedScrollView μετακινηθεί προς τα επάνω, με τη σειρά του θα ωθήσει προς τα πάνω και θα συμπτύξει το CollapsingToolbarto στην κορυφή, επιτρέποντάς του να εξαφανιστεί, επιτρέποντας στο NestedScrollView να επεκταθεί πλήρως.
  • Εάν το NestedScrollView μετακινηθεί προς τα κάτω, θα αρχίσει να επεκτείνεται η CollapsingToolbar.

1.2 enterAlways, enterAlwaysCollapsed, snap & exitUntilCollapsed.

app: layout_scrollFlags = "enterAlways"
app: layout_scrollFlags = "enterAlwaysCollapsed"
app: layout_scrollFlags = "snap"
app: layout_scrollFlags = "exitUntilCollapsed"
app: layout_scrollFlags = "exitUntilCollapsed"

Εικόνα 3: enterAlways, enterAlwaysCollapsed, snap, exitUntilCollapsed - όλα συμπεριφέρονται με τον ίδιο τρόπο όταν χρησιμοποιούνται μόνα τους.

Από μόνα τους, κάθε μία από τις τέσσερις σημαίες παραπάνω συμπεριφέρεται παρόμοια με τον έλεγχό μας. Σε αυτό το σημείο ίσως αναρωτιέστε γιατί δεν είναι διαφορετικά; Για να δούμε τις διαφορές τους, πρέπει να τα συνδυάσουμε με τη σημαία κύλισης που αναφέρεται στην Ενότητα 1.1 παραπάνω.

2. Συνδυασμός ScrollFlags

Τα ScrollFlags μπορούν να συνδυαστούν για να αξιοποιήσουν τη μοναδική κίνηση από πολλαπλές συμπεριφορές. Για να συνδυάσουμε τα scrollflags, τα συμπεριλαμβάνουμε μόνο με το χαρακτήρα κάθετης γραμμής | π.χ. Για να συνδυάσουμε το χαρακτηριστικό scroll και enterAlways θα κάνουμε κάτι τέτοιο. app: layout_scrollFlags = "κύλιση | enterAlways"

Ας δούμε μερικά παραδείγματα. Στην Ενότητα 1, είδαμε ότι η σημαία κύλισης ήταν η μόνη που έκανε κάτι σημαντικό. Αφήνουμε να το συνδυάσουμε με τις άλλες σημαίες και να δούμε αν παίρνουμε κάτι διαφορετικό.

2.1 μετακινηθείτε | enterAlways vs κύλιση | enterAlwaysCollapsed

Οι διαφορές μεταξύ των δύο είναι λεπτές, δώστε προσοχή σε αυτό που συμβαίνει σε έναν προς τα κάτω κύλινδρο.

Εικόνα 4: κύλιση | enterAlways (αριστερά) vs κύλιση | enterAlwaysCollapsed (δεξιά)

Στην ονομαστική τιμή μετακινηθείτε | enterAlways & κύλιση | enterAlwaysCollapsed εμφάνιση ταυτόσημη σε λειτουργία. Η διαφορά εμφανίζεται όταν το CollapsingToolbar αποφασίσει να επεκταθεί σε ένα κύλισης προς τα κάτω.

scroll | enterAlways: Έχει μια πρόθυμη προσέγγιση για το πόσο σύντομα επεκτείνεται το CollapsingToolbar κατά τη διάρκεια ενός προς τα κάτω κύλισης. Με την έννοια ότι υπάρχει μια προς τα κάτω μετακίνηση, αυτή η σημαία θα αρχίσει να επεκτείνει το CollapsingToolbar ανεξάρτητα από το πόσο μακριά έχει εξελιχθεί το NestedScrollView.

scroll | enterAlwaysCollapsed: Έχει μια τεμπέλικτη προσέγγιση για το πόσο σύντομα επεκτείνεται το CollapsingToolbar κατά τη διάρκεια μιας προς τα κάτω μετακίνησης. Σημαίνει τη στιγμή που υπάρχει μια προς τα κάτω μετακίνηση, Το CollapsingToolbar θα επεκταθεί μόλις το NestedScrollView έχει μετακινηθεί στην κορυφή του περιεχομένου του.

2.2 μετακινηθείτε | enterAlways vs κύλιση | snap

Τώρα που ξέρουμε τι μετακινηθείτε | enterAlways, ας το αντιπαρατεθήσουμε να μετακινηθεί |

Εικόνα 5: κύλιση | enterAlways (αριστερά) εναντίον κύλισης | κουμπώματος (δεξιά)

scroll | snap: Η διαφορά εδώ είναι πιο εμφανής. το snap θα προσπαθήσει πάντα να ρυθμίσει το CollapsingToolbar είτε σε πτυσσόμενη είτε σε επεκταμένη κατάσταση ανάλογα με το πού το CollapsingToolbar κατέρρευσε ή επεκτάθηκε. (Νομίζω ότι το καλύτερο της άφησε στην εικόνα για να το ορίσει).

2.2 μετακινηθείτε | enterAlways vs κύλιση | exitUntilCollapse

Εικόνα 6: κύλιση | enterAlways (αριστερά) vs κύλιση | exitUntilCollapsed (δεξιά)

scroll | exitUntilCollapsed: Αυτό είναι το μόνο scrollflag που θα διασφαλίσει ότι το Toolbar παραμένει στην κορυφή και δεν εξαφανίζεται κατά την κύλιση. Αυτή η σημαία συμπεριφέρεται παρόμοια με τη σημαία enterAlwaysCollapsed καθώς επεκτείνει το CollapsingToolbar μόνο όταν η NestedScrollView πλησιάσει την κορυφή του περιεχομένου της.

3. Συνδυάζοντας ακόμα περισσότερες σημαίες.

Παίζοντας με τις σημαίες είναι εθιστικό χαμηλού επιπέδου, μπορείτε να συνδυάσετε περισσότερα από αυτά! Πριν παρακολουθήσετε τα βίντεο, δοκιμάστε να μαντέψετε τι μπορεί να κάνουν οι σημαίες, για να δείτε αν καταλαβαίνετε πραγματικά τις αποχρώσεις μεταξύ των δύο.

3.1 μετακινηθείτε | κλείστε | την έξοδοUntilCollapsed

Εικόνα 7: κύλιση | αποκοπή | έξοδοςΕντικείμενοΚατάλυση

Αυτός ο συνδυασμός λειτουργεί καλά, καθώς επιτρέπει στο CollapsingToolBar να κουμπώνει ανάλογα με την ένταση κύλισης, ωστόσο μια "πλήρης" ανοδική κύλιση θα τερματιστεί πάντα με το Toolbar ορατό στο επάνω μέρος.

3.2

Χωρίς τη σημαία κύλισης για άλλη μια φορά, τίποτα δεν συμβαίνει πραγματικά στο CollapsingToolbar, ως αποτέλεσμα, παραμένει σε μια διευρυμένη κατάσταση, παρά τις προσπάθειες κύλισης.

3.3 μετακινηθείτε | enterAlways | enterAlwaysCollapsed

Σχήμα 9: κύλιση | enterAlways | enterAlwaysCollapsed

Λαμβάνοντας υπόψη τις περιγραφές των εισερχομένων και των εισερχομένων που καταγράφονται στην ενότητα 2.1 παραπάνω, συμπεριφέρονται πολύ διαφορετικά. Ως αποτέλεσμα, η εφαρμογή είναι αρκετά συγκεχυμένη ως προς τον τρόπο χειρισμού των προς τα κάτω κύλινδροι. Θα πρότεινα να μην το χρησιμοποιήσετε

4. Παρατηρήσεις και εκτιμήσεις ScrollFlags

  1. Οι κύλινδροι συρρίκνωσης CollapsingToolbar εξαρτώνται σε μεγάλο βαθμό από την κίνηση κύλισης ενός NestedScrollView ή RecyclerView με κάποιο συνημμένο ScrollingBehavior για να βλέπουν τα αποτελέσματα των σημαδιών κύλισης (δείτε το άρθρο του CoordinatorLayout Behaviors).
  2. Η σημαία κύλισης είναι το κλειδί για να μπορέσετε να ενεργοποιήσετε την κύλιση CollapsingToolbar.
  3. Η παραγγελία σημαίας δεν έχει καμία επίδραση. π.χ. κύλιση | κουμπώματος και κουμπώματος | κύλισης εκτελέστε την ίδια ακριβώς λειτουργία.
  4. Να είστε προσεκτικοί κατά την ανάμειξη των scrollflags που μπορεί να έρχονται σε αντίθεση με τη λειτουργία τους. Δείτε την ενότητα 3.3 σχετικά με τον τρόπο εισαγωγής των εισερχόμενων και εισερχόμενων συρράξεων όταν εισάγεται μια προς τα κάτω κύλιση για να επεκτείνετε το CollapsingToolbar.

συμπέρασμα

Τα ScrollFlags είναι απαραίτητα για να δώσετε στο CollapsingToolbar κάποιο εξατομικευμένο χαρακτήρα. Όπως έχουμε δει, υπάρχουν διάφοροι τρόποι συνδυασμού σημαιών για να αποκτήσουμε ξεκάθαρα αποτελέσματα που μπορούν να ενισχύσουν την οπτική αισθητική των εφαρμογών μας και να προωθήσουν καλύτερα τους επιχειρηματικούς μας κανόνες. Έχουμε επίσης δει ορισμένες σημαίες όταν συνδυάζονται μπορούν να συγκρουστούν και να δώσουν μια αρνητική εμπειρία στους χρήστες σας.

Να είστε δημιουργικοί και να δοκιμάσετε μερικά διαφορετικά scrollflag combos για την εφαρμογή σας!

Ευχαριστώ και πάλι για την ανάγνωση!

Ελέγξτε το άλλο άρθρο μου σχετικά με τις Συνιστώσες Συντονιστή για να μάθετε πώς να δημιουργήσετε το δικό σας!