CollapsingToolbar scroll scroll-uri în acțiune !!!

Design Android - Bara de instrumente colapsată: ScrollFlags Illustrated

În această secțiune vom analiza collapsingToolbar scrollflags, combinând scrollflag-uri și unele considerente atunci când le implementăm.

1. ScrollFlags

Sunt disponibile 5 defilări, acestea sunt
 defilare, expandAlways, expandAlwaysCollapsed, snap, exitUntilCollapsed.

Pentru a utiliza defilări în bara dvs. CollapsingTool, adăugați următoarea proprietate la bara dvs. CollapsingTool.

app: layout_scrollFlags =“

Acum să creăm un control fără niciun steag pentru a vedea cum se comportă CollapsingToolbar.

Figura 1: Controlați comportamentul de defilare fără defilare.

După cum puteți vedea, din figura 1, nu se întâmplă nimic special, NestedScrollView derulează liber sub CollapsingToolbar, deoarece CollapsingToolbar rămâne într-o stare extinsă. Acest lucru este ideal dacă aveți o vizualizare în bara dvs. CollapsingTool care ar trebui să rămână întotdeauna extinsă și vizibilă.

1.1 defilare

app: layout_scrollFlags =“scroll“
Steagul de defilare permite NestedScrollView (adică vizualizarea de bază care cuprinde tot conținutul, de exemplu, paragrafe de text și imagine) să semnalizeze barai CollapsingTool că se află într-o stare de defilare.

Figura 2: aplicație: layout_scrollFlags = ”defilare”
  • Dacă NestedScrollView este defilat în sus, la rândul său, va face push-up și va prăbuși CollapsingToolbarto partea de sus permițându-i să dispară, permițând NestedScrollView să se extindă complet.
  • Dacă NestedScrollView este derulat în jos, va începe să se extindă CollapsingToolbar.

1.2 enterAlways, enterAlwaysCollapsed, snap & exitUntilCollapsed.

app: layout_scrollFlags =“enterAlways“
app: layout_scrollFlags =“enterAlwaysCollapsed“
app: layout_scrollFlags =“fixați“
app: layout_scrollFlags =“exitUntilCollapsed“
app: layout_scrollFlags =“exitUntilCollapsed“

Figura 3: enterAlways, enterAlwaysCollapsed, snap, exitUntilCollapsed - toate se comportă la fel atunci când sunt utilizate singure.

Pe cont propriu, fiecare dintre cele patru steaguri de mai sus se comportă în mod similar controlului nostru. În acest moment, vă întrebați probabil de ce nu sunt diferite? Pentru a vedea diferențele lor, trebuie să le combinăm cu indicatorul de defilare menționat în secțiunea 1.1 de mai sus.

2. Combinarea ScrollFlags

ScrollFlags pot fi combinate pentru a folosi mișcarea unică din comportamente multiple. Pentru a combina scrollflag-urile le includem doar separate de caracterul vertical al barei | de exemplu. Pentru a combina derularea și atributul enterAlways, am face așa ceva. app: layout_scrollFlags =“parcurgere | enterAlways“

Să ne uităm la câteva exemple. În secțiunea 1, am văzut că steagul de defilare a fost singurul care a făcut ceva semnificativ. Să-l combinăm cu celelalte steaguri și să vedem dacă avem ceva diferit.

2.1 defilare | enterAlways vs scroll | enterAlwaysCollapsed

Diferențele dintre cele două sunt subtile, fiți atenți la ceea ce se întâmplă pe o defilare în jos.

Figura 4: defilare | enterAlways (stânga) vs defilare | enterAlwaysCollapsed (dreapta)

La valorile faciale defilare | enterAlways & scroll | enterAlwaysCollapsed arata identic in functie. Diferența apare atunci când CollapsingToolbar decide să se extindă pe o derulare descendentă NestedScrollView.

scroll | enterAlways: are o abordare dornică de cât de curând se extinde CollapsingToolbar în timpul derulării în jos. Adică după ce va exista o defilare în jos, acest steag va începe să extindă bara CollapsingTool indiferent de cât de sus a defilat NestedScrollView.

scroll | enterAlwaysCollapsed: are o abordare leneșă cu privire la cât de curând se extinde CollapsingToolbar în timpul defilării în jos. În sensul momentului în care există o defilare în jos, bara CollapsingTool se va extinde numai după ce NestedScrollView a defilat până în partea de sus a conținutului său.

2.2 defilare | enterAlways vs scroll | snap

Acum că știm ce face scroll | enterAlways, să-l contrastăm pentru a defila | snap.

Figura 5: defilare | enterAlways (stânga) vs scroll | snap (dreapta)

defilare | snap: aici diferența este mai evidentă. snap va încerca întotdeauna și va seta bara CollapsingTool la o stare prăbușită sau extinsă, în funcție de locul în care CollapsingToolbar s-a prăbușit sau a extins-o. (Cred că este cel mai bine lăsat în ilustrație pentru a o defini).

2.2 defilare | enterAlways vs scroll | exitUntilCollapse

Figura 6: defilare | enterAlways (stânga) vs defilare | exitUntilCollapsed (dreapta)

scroll | exitUntilCollapsed: Acesta este singurul scrollflag care va asigura că Bara de instrumente rămâne în vârf și nu va dispărea în defilare. Acest steag se comportă asemănător cu steagul enterAlwaysCollapsed, deoarece extinde doar CollapsingToolbar odată ce NestedScrollView se apropie de partea de sus a conținutului său.

3. Combinând și mai multe steaguri.

Jocul cu stegulețe este o dependență cu cheie joasă, permiteți combinarea mai multor! Înainte de a viziona videoclipurile, încercați să ghiciți ce ar putea face steagurile, pentru a vedea dacă înțelegeți cu adevărat nuanțele dintre cele două.

3.1 defilare | snap | exitUntilCollapsed

Figura 7: defilare | snap | exitUntilCollapsed

Această combinație funcționează bine, deoarece permite CollapsingToolBar să se prindă în funcție de intensitatea defilării, cu toate acestea, o defilare în sus „completă” se va încheia întotdeauna cu Bara de instrumente vizibilă în partea de sus.

3.2 enterAlwaysCollapsed | snap

Fără indicatorul de defilare încă o dată, nimic nu se întâmplă cu CollapsingToolbar, drept urmare, acesta rămâne într-o stare extinsă, în ciuda eforturilor de defilare.

3.3 defilare | enterAlways | enterAlwaysCollapsed

Figura 9: defilare | enterAlways | enterAlwaysCollapsed

Având în vedere descrierile noastre despre enterAlways & enterAlwaysCollapsed în secțiunea 2.1 de mai sus, ele se comportă foarte diferit. Drept urmare, aplicația devine destul de confuză cu privire la modul de gestionare a defilărilor în jos. V-aș recomanda să nu folosiți acest lucru

4. Observații și considerente ScrollFlags

  1. CollapsingToolbar scroll scroll-urile depind foarte mult de mișcarea de derulare a unui NestedScrollView sau RecyclerView cu unele ScrollingBehavior atașate pentru a putea vedea efectele defilării-flag-urilor (consultați articolul din comportamentele CoordinatorLayout).
  2. Steagul de defilare este cheia pentru a putea activa derularea bilei CollapsingToolbar.
  3. Comanda steagurilor nu are niciun impact. de ex. defilare | snap și snap | defilare îndeplinesc exact aceeași funcție.
  4. Aveți grijă să amestecați defilări care ar putea intra în conflict cu funcția lor. Consultați secțiunea 3.3 despre modul în care enterAlways și enterAlwaysCollapsed conflict când este introdus un defilare în jos pentru a extinde CollapsingToolbar.

Concluzie

ScrollFlag-urile sunt esențiale pentru a oferi barului CollapsingToolbar un anumit caracter personalizat. După cum am văzut, există mai multe modalități de a combina steagurile pentru a obține rezultate distincte care pot îmbunătăți aplicațiile noastre estetice vizuale și pot promova mai bine regulile noastre de afaceri. Am văzut, de asemenea, câteva stegulețe atunci când combinate pot să se ciocnească și să ofere o experiență negativă utilizatorilor.

Fii creativ și încearcă câteva combinații diferite de scrollflag pentru aplicația ta!

Mulțumesc din nou pentru lectură!

Vezi și celălalt articol al meu despre CoordinatorLayout Behaviors pentru a afla cum să-ți creezi propriul tău!