CollapsingToolbar rulleflagge i aktion !!!

Android Design - Collapsing Toolbar: ScrollFlags Illustrated

I dette afsnit vil vi se på CollapsingToolbar scrollflags, kombinere scrollflags og nogle overvejelser, når du implementerer dem.

1. ScrollFlags

Der leveres 5 rulleflagge, disse er
 rulle, udvid altid, udvid altid altid sammenklappet, klik, exitUntilCollapsed.

For at bruge rulleflagge i din CollapsingToolbar skal du tilføje følgende egenskab til din CollapsingToolbar.

app: layout_scrollFlags =”

Lad os nu oprette en kontrol uden nogen flag for at se, hvordan CollapsingToolbar opfører sig.

Figur 1: Kontroller rulleopførsel uden rulleflagge.

Som du kan se, sker der ikke fra Figur 1 noget specielt, NestedScrollView ruller frit under CollapsingToolbar, mens CollapsingToolbar forbliver i en udvidet tilstand. Dette er ideelt, hvis du har en visning i din CollapsingToolbar, der altid skal forblive udvidet og synlig.

1.1 rulle

app: layout_scrollFlags =”scroll”
Rulleflaget giver NestedScrollView (dvs. den underliggende visning, der omfatter alt indholdet, fx tekst-afsnit og billede), signalering til CollapsingToolbar, at det er i en rulletilstand.

Figur 2: app: layout_scrollFlags = ”rulle”
  • Hvis NestedScrollView rulles op, vil den igen push-up og kollaps CollapsingToolbart til toppen, så den forsvinder, hvilket gør det muligt for NestedScrollView at udvide fuldt ud.
  • Hvis NestedScrollView bliver rullet ned, vil den begynde at udvide 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”

Figur 3: enterAlways, enterAlwaysCollapsed, snap, exitUntilCollapsed - alle opfører sig det samme, når de bruges alene.

På egen hånd opfører sig hver af de fire flag ovenfor på samme måde som vores kontrol. På dette tidspunkt undrer du dig sandsynligvis, hvorfor er de ikke forskellige? For at se deres forskelle skal vi kombinere dem med det rulleflag, der er nævnt i afsnit 1.1 ovenfor.

2. Kombination af ScrollFlags

ScrollFlags kan kombineres for at udnytte den unikke bevægelse fra flere adfærd. For at kombinere rulleflagge inkluderer vi dem bare adskilt med den lodrette bjælketegn | for eksempel. For at kombinere rulle- og enterAlways-attributen ville vi gøre noget som dette. app: layout_scrollFlags =”scroll | enterAlways”

Lad os se på nogle eksempler. I afsnit 1 så vi, at rulleflagget var det eneste, der gjorde noget af betydning. Lad os kombinere det med de andre flag og se, om vi får noget andet.

2.1 rulle | enterAlways vs rulle | enterAlwaysCollapsed

Forskellene mellem de to er subtile, vær opmærksom på hvad der sker på en nedadgående rulle.

Figur 4: rulle | enterAlways (venstre) vs rulle | enterAlwaysCollapsed (højre)

Ved pålydende rulle | enterAlways & scroll | enterAlwaysCollapsed ser identisk ud i funktion. Forskellen opstår, når CollapsingToolbar beslutter at udvide ved hjælp af en downwardNestedScrollView-rulle.

rul | enterAlways: Har en ivrig tilgang til, hvor hurtigt CollapsingToolbar udvides under en nedadgående rulle. Når det betyder, når der er en nedadgående rulle, vil dette flag begynde at udvide CollapsingToolbar uanset hvor langt op NestedScrollView har rullet.

rulle | enterAlwaysCollapsed: Har en doven tilgang til, hvor hurtigt CollapsingToolbar udvides under en nedadgående rulle. Betydning af det øjeblik, hvor der er en nedadgående rulle, CollapsingToolbar udvides kun, når NestedScrollView har rullet til toppen af ​​sit indhold.

2.2 rulle | enterAlways vs rulle | snap

Nu hvor vi ved, hvad rulle | enterAlways gør, så lad os kontrastere det til rulle | snap.

Figur 5: rulle | enterAlways (venstre) vs rulle | snap (højre)

rulle | snap: Forskellen her er mere tydelig. snap vil altid prøve at indstille CollapsingToolbar til enten en sammenbrudt eller udvidet tilstand afhængigt af hvor CollapsingToolbar kollapsede eller udvides til. (Jeg tror, ​​det er bedst overladt til illustrationen at definere den).

2.2 rulle | enterAlways vs rulle | exitUntilCollapse

Figur 6: rulle | enterAlways (venstre) vs rulle | exitUntilCollapsed (højre)

rulle | exitUntilCollapsed: Dette er det eneste rulleflag, der sikrer, at værktøjslinjen forbliver øverst og ikke forsvinder på rulle. Dette flag opfører sig også lignende enterAlwaysCollapsed-flag, da det kun udvider CollapsingToolbar, når NestedScrollView nærmer sig toppen af ​​dets indhold.

3. Kombination af endnu flere flag.

At lege rundt med flag er lavmælende vanedannende, lader kombinere flere af dem! Inden du ser videoerne, kan du prøve at gætte, hvad flagene kan gøre for at se, om du virkelig forstår nuancerne mellem de to.

3.1 rulle | snap | exitUntilCollapsed

Figur 7: rulle | snap | exitUntilCollapsed

Denne kombination fungerer godt, da den tillader, at CollapsingToolBar klikker afhængigt af rulleintensiteten, men en "fuld" opad-rulle afsluttes altid med værktøjslinjen synlig øverst.

3.2 enterAlwaysCollapsed | snap

Uden rulleflagget endnu engang sker der ikke rigtig noget med CollapsingToolbar, som et resultat forbliver det i en udvidet tilstand til trods for rulleindsats.

3.3 rulle | enterAlways | enterAlwaysCollapsed

Figur 9: rulle | enterAlways | enterAlwaysCollapsed

I betragtning af vores beskrivelser af enterAlways & enterAlways Sammenlignet med afsnit 2.1 ovenfor opfører de sig meget forskelligt. Som et resultat bliver appen ret forvirret over, hvordan man håndterer nedad-ruller. Jeg vil anbefale ikke at bruge dette

4. ScrollFlags observationer og overvejelser

  1. CollapsingToolbar rulleflag afhænger meget af rullebevægelsen af ​​en NestedScrollView eller RecyclerView med nogle vedhæftede ScrollingBehavior for at kunne se effekterne af rulleflaggene (se artikel i KoordinatorLayout-opførsel).
  2. Rulleflagget er nøglen til at kunne aktivere rulling af CollapsingToolbar.
  3. Bestilling af flag har ingen indflydelse. fx rul | snap og snap | rulle udfører nøjagtig den samme funktion.
  4. Vær forsigtig med at blande rulleflagge, der kan komme i konflikt med hensyn til deres funktion. Se afsnit 3.3 om, hvordan enterAlways og enterAlwaysCollapsed konflikt, når en nedadrulning for at udvide CollapsingToolbar introduceres.

Konklusion

ScrollFlags er vigtige for at give din CollapsingToolbar noget personlig karakter. Som vi har set, er der flere måder at kombinere flag for at få forskellige resultater, der kan forbedre vores apps visuelle æstetik og bedre fremme vores forretningsregler. Vi har også set nogle flag, når de kombineres, kan slå sammen og give en negativ oplevelse for dine brugere.

Vær kreativ og prøv nogle forskellige scrollflag-kombinationer til din app!

Tak igen for at have læst!

Tjek min anden artikel om CoordinatorLayout Adfærds for at lære, hvordan man opretter din egen!