Collapsing Toolbar scrollflags in azione !!!

Design Android - Barra degli strumenti comprimente: ScrollFlags Illustrated

In questa sezione esamineremo i flag di scorrimento CollapsingToolbar, combinando i flag di scorrimento e alcune considerazioni durante l'implementazione.

1. ScrollFlags

Ci sono 5 scrollflags forniti, questi sono
 scorrere, espandere Sempre, espandere SempreCollapsed, snap, exitUntilCollapsed.

Per usare i flag di scorrimento nella barra dei Collapsing, aggiungi la seguente proprietà alla barra dei Collapsing.

APP: layout_scrollFlags =”

Ora impostiamo un controllo senza flag per vedere come si comporta CollapsingToolbar.

Figura 1: controllo del comportamento di scorrimento senza flag di scorrimento.

Come puoi vedere, dalla Figura 1 non accade nulla di speciale, NestedScrollView scorre liberamente sotto la barra Collapsing poiché la Barra collapsing rimane in uno stato espanso. Questo è l'ideale se si dispone di una vista nella barra degli strumenti Collapsing che dovrebbe rimanere sempre espansa e visibile.

1.1 scroll

app: layout_scrollFlags =”scroll”
Il flag di scorrimento consente a NestedScrollView (ovvero la vista sottostante che comprende tutto il contenuto, ad esempio paragrafi di testo e immagini) di segnalare alla barra di Collapsing che si trova in uno stato di scorrimento.

Figura 2: app: layout_scrollFlags =
  • Se NestedScrollView viene fatto scorrere verso l'alto, a sua volta push-up e comprimerà la barra Collapsing nella parte superiore consentendone la scomparsa, consentendo a NestedScrollView di espandersi completamente.
  • Se si scorre verso il basso NestedScrollView, inizierà a espandere 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”

Figura 3: enterAlways, enterAlwaysCollapsed, snap, exitUntilCollapsed: tutti si comportano allo stesso modo se utilizzati da soli.

Da soli, ognuna delle quattro bandiere sopra si comporta in modo simile al nostro controllo. A questo punto ti starai probabilmente chiedendo perché non sono diversi? Per vedere le loro differenze, dobbiamo combinarle con il flag di scorrimento menzionato nella precedente Sezione 1.1.

2. Combinazione di ScrollFlags

ScrollFlags può essere combinato per sfruttare il movimento unico di più comportamenti. Per combinare i flag di scorrimento, li includiamo solo separati dal carattere barra verticale | per esempio. Per combinare l'attributo scroll e enterAlways faremmo qualcosa del genere. app: layout_scrollFlags =”scroll | enterAlways”

Diamo un'occhiata ad alcuni esempi. Nella Sezione 1, abbiamo visto che la bandiera di scorrimento era l'unica a fare qualcosa di significativo. Combiniamolo con le altre bandiere e vediamo se abbiamo qualcosa di diverso.

2.1 scroll | enterAlways vs scroll | enterAlwaysCollapsed

Le differenze tra i due sono sottili, presta attenzione a ciò che accade su una pergamena verso il basso.

Figura 4: scroll | enterAlways (a sinistra) vs scroll | enterAlwaysCollapsed (a destra)

Al valore nominale scroll | enterAlways & scroll | enterAlwaysCollapsed sembrano identici nella funzione. La differenza si verifica quando CollapsingToolbar decide di espandersi in uno scorrimento verso il basso di NestedScrollView.

scroll | enterAlways: ha un approccio entusiasta alla velocità con cui CollapsingToolbar si espande durante uno scorrimento verso il basso. Significato una volta che c'è uno scorrimento verso il basso, questo flag inizierà ad espandere CollapsingToolbar indipendentemente da quanto ha fatto scorrere NestedScrollView.

scroll | enterAlwaysCollapsed: ha un approccio pigro alla velocità con cui CollapsingToolbar si espande durante uno scorrimento verso il basso. Significa che nel momento in cui è presente uno scorrimento verso il basso, CollapsingToolbar si espanderà solo dopo che NestedScrollView è arrivato all'inizio del suo contenuto.

2.2 scroll | enterSempre vs scroll | snap

Ora che sappiamo cosa fa scroll | enterAlways, mettiamola in contrasto con scroll | snap.

Figura 5: scroll | enterAlways (a sinistra) vs scroll | snap (a destra)

scroll | snap: la differenza qui è più evidente. snap proverà sempre a impostare CollapsingToolbar su uno stato compresso o espanso a seconda di dove è compresso o espanso CollapsingToolbar. (Penso che sia meglio lasciarlo all'illustrazione per definirlo).

2.2 scroll | enterSempre vs scroll | exitUntilCollapse

Figura 6: scroll | enterAlways (a sinistra) vs scroll | exitUntilCollapsed (a destra)

scroll | exitUntilCollapsed: questa è l'unica bandiera che assicurerà che la barra degli strumenti rimanga in alto e non scompaia sullo scorrimento. Questo flag si comporta anche in modo simile al flag enterAlwaysCollapsed in quanto espande la barra Collapsing Toolbar solo quando NestedScrollView si avvicina all'inizio del suo contenuto.

3. Combinare ancora più bandiere.

Giocare con le bandiere è avvincente, ti consente di combinarne altre! Prima di guardare i video, prova a indovinare cosa potrebbero fare le bandiere, per capire se capisci davvero le sfumature tra i due.

3.1 scroll | snap | exitUntilCollapsed

Figura 7: scroll | snap | exitUntilCollapsed

Questa combinazione funziona bene, poiché consente a CollapsingToolBar di scattare in base all'intensità di scorrimento, tuttavia uno scorrimento verso l'alto “completo” termina sempre con la barra degli strumenti visibile in alto.

3.2 enterAlwaysCollapsed | snap

Senza il flag di scorrimento ancora una volta, alla CollapsingToolbar non succede nulla, di conseguenza, rimane in uno stato espanso nonostante gli sforzi di scorrimento.

3.3 scroll | enterAlways | enterAlwaysCollapsed

Figura 9: scroll | enterAlways | enterAlwaysCollapsed

Date le nostre descrizioni di enterSempre e enterSempre, descritte nella precedente Sezione 2.1, si comportano in modo molto diverso. Di conseguenza l'app diventa piuttosto confusa su come gestire gli scroll verso il basso. Consiglierei di non usare questo

4. Osservazioni e considerazioni ScrollFlags

  1. Collapsing Toolbar scrollflags dipendono fortemente dal movimento di scorrimento di un NestedScrollView o RecyclerView con alcuni comportamenti Scrolling collegati per poter vedere gli effetti dei flag di scorrimento (vedi articolo di CoordinatorLayout Behaviors).
  2. Il flag di scorrimento è la chiave per poter abilitare lo scorrimento CollapsingToolbar.
  3. L'ordinamento delle bandiere non ha alcun impatto. ad esempio scroll | snap e snap | scroll svolgono esattamente la stessa funzione.
  4. Diffidare di mescolare le bandiere di scorrimento che potrebbero essere in conflitto per quanto riguarda la loro funzione. Vedere la sezione 3.3 su come entrano sempre in conflitto EnterEnways e enterAlollaCollapsed quando viene introdotto uno scorrimento verso il basso per espandere CollapsingToolbar.

Conclusione

Gli ScrollFlags sono essenziali per dare al tuo CollapsingToolbar un carattere personalizzato. Come abbiamo visto, esistono diversi modi per combinare le bandiere per ottenere risultati distinti che possono migliorare l'estetica visiva delle nostre app e promuovere meglio le nostre regole aziendali. Abbiamo anche visto alcune bandiere quando combinate possono scontrarsi e dare un'esperienza negativa ai tuoi utenti.

Sii creativo e prova alcune diverse combinazioni di flag di scorrimento per la tua app!

Grazie ancora per la lettura!

Dai un'occhiata al mio altro articolo su CoordinatorLayout Behaviors per imparare a crearne uno tuo!