CollapsingToolbar -vierityslaitteet toiminnassa !!!

Android Design - Kokoontuva työkalurivi: ScrollFlags Illustrated

Tässä osassa tarkastellaan CollapsingToolbar-vierityslappuja, yhdistämällä vierityslaitteet ja joitain huomioita niitä toteutettaessa.

1. ScrollFlags

Tarjolla on 5 vierityslaitetta, nämä ovat
 vieritä, laajennaAina, laajennaAinatoista, napsauta, poistuUntilla.

Lisää seuraava ominaisuus CollapsingToolbariin, jotta voit käyttää vierityslappuja CollapsingToolbar -palkissa.

app: layout_scrollFlags =”

Perustetaan nyt hallintalaite ilman lippuja nähdäksesi kuinka CollapsingToolbar toimii.

Kuva 1: Ohjaa vierityskäyttäytymistä ilman vierityslappuja.

Kuten voit nähdä kuvasta 1, mitään erityistä ei tapahdu, NestedScrollView vierittää vapaasti CollapsingToolbar-alla, koska CollapsingToolbar pysyy laajennetussa tilassa. Tämä on ihanteellinen, jos CollapsingTool -palkissa on näkymä, jonka tulisi aina olla laajennettu ja näkyvä.

1.1 vieritä

app: layout_scrollFlags =”selaa”
Vierityslippun avulla NestedScrollView (ts. Taustanäkymä, joka kattaa kaiken sisällön, esim. Tekstin kappaleet ja kuvan), ilmoittaa CollapsingToolbarille, että se on vieritystilassa.

Kuva 2: sovellus: layout_scrollFlags = ”vieritä”
  • Jos NestedScrollView-sovellusta vieritetään, se puolestaan ​​työntää ja romahtaa CollapsingToolbarto -osan yläosan, jolloin se voi kadota, jolloin NestedScrollView-sovellus voi laajentua kokonaan.
  • Jos NestedScrollView-sovellusta vieritetään, se alkaa laajentaa CollapsingToolbar-sovellusta.

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”

Kuva 3: enterAlways, enterAlwaysCollapsed, Snap, exitUntilCollapsed - kaikki käyttäytyvät samoin yksin käytettäessä.

Yksin, kaikki neljä lippua yllä käyttäytyvät samalla tavalla kuin hallitsemme. Tässä vaiheessa olet todennäköisesti miettinyt, miksi he eivät ole erilaisia? Näkemään niiden erot meidän on yhdistettävä ne yllä olevassa 1.1 kohdassa mainittuun vierityslippuun.

2. Yhdistä ScrollFlags

ScrollFlags voidaan yhdistää hyödyntämään ainutlaatuista liikettä useista käyttäytymisistä. Vierityslappujen yhdistämiseksi sisällytetään ne vain pystysuoran palkkimerkin avulla erotettuna | esim. Yhdistämällä vieritys ja enterAlways -määritteen tekisimme jotain tällaista. app: layout_scrollFlags =”selaa | enterAlways”

Katsotaanpa joitain esimerkkejä. Kohdassa 1 näimme, että vierityslippu oli ainoa, joka teki jotain merkittävää. Annetaan yhdistää se muiden lippujen kanssa ja katsoa saako jotain erilaista.

2.1 vieritä | enterAlways vs. vieritä | enterAlwaysCollapsed

Eroa näiden kahden välillä on hieno, kiinnitä huomiota siihen, mitä tapahtuu alaspäin vierittämällä.

Kuva 4: vieritä | enterAlways (vasen) vs vieritä | enterAlwaysCollapsed (oikea)

Nimellisarvolla vierittämällä | enterAlways & scroll | enterAlwaysCollapsed näyttävät toiminnaltaan samanlaisilta. Ero syntyy, kun CollapsingToolbar päättää laajentaa alaspäinNestsScrollView-vieritystä.

vieritys | enterAlways: suhtautuu innokkaasti siihen, kuinka nopeasti CollapsingToolbar laajenee alaspäin vierittämisen aikana. Tämä tarkoittaa, että kun alaspäin vierittämistä on, tämä lippu alkaa laajentaa CollapsingToolbar-yksikköä riippumatta siitä, kuinka pitkälle NestedScrollView on vieritty.

vieritys | enterAlwaysCollapsed: Käytä laiskaa lähestymistapaa kuinka nopeasti CollapsingToolbar laajenee alaspäin vierittämisen aikana. Tarkoittaen alaspäin vierittämistä, CollapsingToolbar laajenee vasta sitten, kun NestedScrollView on vieritty sisällön yläosaan.

2.2 vieritys | enterAina ja vieritys | napsauta

Nyt kun tiedämme, mitä vierittäminen | enterAlways tekee, vastakkain on se, että vieritetään | napsauttaa.

Kuva 5: vieritä | anna aina (vasen) vs vieritä | napsauta (oikea)

vieritys | napsautus: Ero tässä on selvempi. Snap yrittää aina asettaa CollapsingToolbar joko romahtuneeseen tai laajennettuun tilaan sen mukaan, missä CollapsingToolbar romahti tai laajennettiin. (Mielestäni se on parasta jättää kuvan määrittelemiseksi).

2.2 vieritä | enterAina vs. vieritä | exitUntilCollapse

Kuva 6: vieritä | enterAina (vasen) vs vieritä | exitUntilCollapsed (oikealla)

vieritä | exitUntilCollapsed: Tämä on ainoa vierityslippu, joka varmistaa, että työkalupalkki pysyy yläosassa ja että se ei katoa vierityksen aikana. Tämä lippu toimii myös samalla tavalla kuin enterAlwaysCollapsed -lippu, koska se laajentaa CollapsingToolbar-sovellusta vasta, kun NestedScrollView lähestyy sisällön yläosaa.

3. Yhdistämällä vielä enemmän lippuja.

Lippujen kanssa leikkiminen on herkkyyttä herättävä, yhdistämällä enemmän heistä! Ennen kuin katsot videoita, kokeile arvata, mitä liput saattavat tehdä, jotta ymmärrätkö todellakin näiden kahden väliset vivahteet.

3.1 vieritä | napsauta | exitUntilCollapsed

Kuva 7: vieritä | napsauta | exitUntilCollapsed

Tämä yhdistelmä toimii hyvin, koska se antaa CollapsingToolBar -sovelluksen napsahtaa vierityksen voimakkuudesta riippuen, mutta ”täysi” ylöspäin vierittäminen loppuu aina työkalurivin ollessa näkyvissä yläosassa.

3.2 enterAlwaysCollapsed | napsauta

Ilman jälleen vierityslippua CollapsingToolbar -palkkiin ei oikeastaan ​​tapahdu mitään, minkä seurauksena se pysyy laajennetussa tilassa vierityspyrkimyksistä huolimatta.

3.3 vieritä | enterAlways | enterAlwaysCollapsed

Kuva 9: ​​vieritä | enterAlways | enterAlwaysCollapsed

Kun otetaan huomioon yllä olevassa jaksossa 2.1 esitetyt enterAlways & enterAlwaysCollapsed -kuvaukset, ne käyttäytyvät hyvin eri tavalla. Seurauksena on, että sovellus tulee melko hämmentyneenä siitä, kuinka käsitellä alaspäin vieriä vierityksiä. Suosittelen, että et käytä tätä

4. ScrollFlags-havainnot ja huomioinnit

  1. CollapsingToolbar -vierityslautaset ovat suuresti riippuvaisia ​​NestedScrollView- tai RecyclerView-vieritysliikkeistä, joissa on joitain liitettyjä ScrollingBehavior-sovelluksia, jotta voitaisiin nähdä vierityslippujen vaikutukset (katso CoordinatorLayout Behaviors -artikkeli).
  2. Vierityslippu on avain, jotta CollapsingToolbar-vieritys voidaan ottaa käyttöön.
  3. Lippujen tilaamisella ei ole vaikutusta. esim. vieritys | napsautus ja napsautus | vieritys suorittavat täsmälleen saman toiminnon.
  4. Ole varovainen sekoittamalla vierityslappuja, jotka saattavat olla ristiriidassa niiden toiminnan kanssa. Katso kohta 3.3 siitä, kuinka enterAlways- ja enterAlwaysCollapsed -ristiriidat tapahtuvat, kun alaspäin vieritetään CollapsingToolbar-laajennus.

johtopäätös

ScrollFlags on välttämätön, jotta CollapsingToolbar antaa henkilökohtaisen merkin. Kuten olemme nähneet, lippujen yhdistämisellä on useita tapoja saada selkeät tulokset, jotka voivat parantaa sovellustemme visuaalista estetiikkaa ja edistää paremmin liiketoimintasääntöjämme. Olemme myös nähneet joitain lippuja, kun yhdistelmä voi rikkoa ja antaa negatiivisen kokemuksen käyttäjillesi.

Ole luova ja kokeile joitain erilaisia ​​vierityslappu-komboja sovelluksellesi!

Kiitos vielä kerran, että luit!

Tutustu muihin artikkeleihini CoordinatorLayout Behaviors -tapahtumasta oppimaan kuinka luoda omia!