Koordinaattorin ulkoasu - kuva imgurista

Android Design - koordinaattorin asettelu # 1: Johdanto

Koordinaattorin asettelua kuvataan asiakirjojen mukaan ”erittäin tehokkaana FrameLayout” -sovelluksena. Sitä käytetään helpottamaan miten asettelusi näkymät ovat vuorovaikutuksessa keskenään. Tämä tehdään luomalla tai määrittelemällä erityiset käyttäytymismallit näille näkymille. Nämä käyttäytymiset ovat ydin siinä, mikä tekee materiaalisuunnittelusta ainutlaatuisen, ja niihin sisältyy tuttuja vuorovaikutuksia, kuten liukuvat laatikot ja paneelit pyyhkäisemällä poistettavat elementit ja painikkeet, jotka tarttuvat muihin elementteihin liikkuessaan ja animoimalla.

Katsotaanpa käyttäytymistä ja sen toimintaa. Seuraavassa artikkelissamme esitetään yksinkertainen esimerkki siitä, miten luodaan käyttäytyminen, joka mahdollistaa perustiedot vuorovaikutuksessa näkymien välillä CoordinatorLayoutissa

Kuva 1: Kelluva toimintapainike reagoi välipalakuvaan Nikita Rusinin kohteliasta

käyttäytymistä

Käyttäytyminen on CoordinatorLayoutsin ydin. Ne edustavat kahden tai useamman näkymän välistä vuorovaikutusta samassa asettelussa. Ne luokitellaan yleensä seuraaviin:

1. Asetteluperusteiset käytännöt: Esimerkki kun välipala näkyy alhaalta, FloatingActionButton kääntyy välittömästi ylöspäin, jotta se mahtuu saapuvaan näkymään, kuten vasemmalla olevassa kuvassa 1 on esitetty.
Ankkurointi on myös eräänlainen asetteluun perustuva käyttäytyminen, esimerkiksi kun FloatingActionButton on ankkuroitu AppBarLayout-sovellukseen, kuten kuvasta 2 nähdään. Asettelupohjaiset käyttäytymiset ovat yleensä kaikkialla Android-puitteissa ja yleensä helpoimpia luoda, joten keskitymme keskittymään heistä tässä artikkelissa.

Kuva 2: AppBariin kiinnitetty kelluva painike (oikealla). Kuva Saul Molinero

2. Vierityspohjaiset käytännöt: Esim. Kun RecyclerView ja AppBar ovat molemmat olemassa aCoordinatorLayout-sovelluksessa, kun RecyclerView vierittää, se työntää AppBaria hiukan ylöspäin ja pienentää sitten AppBarin, jotta vieritys jatkuu saumattomasti kuvan 2 (vasemmalla) osoittamalla tavalla. Vierityspohjaisiin käyttäytymisiin liittyy vähän enemmän työtä saadakseen ne liikkeelle, emmekä keskity niihin juuri nyt.

Jos sukellat jonkin käyttäytymistä sisältävän näkymän koodiin, huomaat, että näkymään on liitetty käyttäytyminen käyttämällä merkintää, kuten alla olevissa EC-1, EC -2 ja EC-3 esitetään.

EC-1: AppBarLayout -käyttäytyminen
@ CoordinatorLayout.DefaultBehavior (AppBarLayout.Behavior.class)
julkisen luokan AppBarLayout laajentaa LinearLayoutia
EC-2: FloatingActionButton-käyttäytyminen
@ CoordinatorLayout.DefaultBehavior (FloatingActionButton.Behavior.class)
julkisen luokan FloatingActionButton laajentaa VisibilityAwareImageButton-ominaisuutta
EC-3: Snackbar-käyttäytyminen
julkinen lopullinen luokan välipala laajentaa BaseTransientBottomBar  -alueen

Merkinnän käyttäminen EC-1: n ja EC-2: n osoittamalla tavalla on tapa liittää käyttäytyminen näkymään ohjelmallisesti. Näkymässä voi olla vain yksi annettu käyttäytymisliite siihen. On tärkeätä huomata, että välipalapalkissa ja sen emoympäristössä BaseTransientBottomBar ei ole käyttäytymistä kiinnitettynä, vaikka molemmat ovat vuorovaikutuksessa FloatingActionButton kanssa, kun FloatingActionButton-painiketta painetaan. Tämä osoittaa, että käyttäytymiseen liittyy suuntaavuus. Käytön tarkoitus voi riippua toisesta näkemyksestä, mutta ei välttämättä päinvastoin. Katsotaanpa miten käyttäytyminen toimii sisäisesti, niin miksi

Käyttäytymisen toteuttaminen

Kun kyse on käyttäytymisen luomisesta, käyttäytymisluokkasi on laajennettava koordinaattoria.Behaviors -luokka, jossa V edustaa käyttäytymistä sisältävää näkymää. Koordinaattori.Behaviors -luokassa on useita menetelmiä, jotka voidaan ohittaa käyttäytymisen hienosäätöön, mutta erityisesti 3 menetelmää on välttämätöntä ohittaa.

Syvemmälle ymmärtämiseksi käytämme esimerkkinä FloatingActionButtonin ja BottomSheet-vuorovaikutusta. (Katso FloatingActionButton $ käyttäytymisluokka)

1. layoutDependsOn (…)

Käytetään tarkistamaan onko tietty näkymä CoordinatorLayout-sovelluksessa näkymä, josta käyttäytyminensi riippuu. Esimerkiksi, FloatingActionButton tarkistaa onko BottomSheet-näkymä näkymä, josta se riippuu. Jos niin, sen palaa totta.

2. onDependentViewChanged (…)

Kun asettelu on löytänyt riippuvuuden, sen on alkaa tarkkailla tätä riippuvuutta. Esimerkiksi, kun FloatingActionButton on todennut sen olevan riippuvainen BottomSheet-toiminnosta, tämä menetelmä kuuntelee BottomSheet-muutoksia ja ilmoittaa siitä FloatingActionButton-tiedostolle. Alla oleva esimerkkikoodi (EC-5) näyttää tämän. Tässä on vuorovaikutuksen käsittelemisen logiikka.

EC-5: Tässä on koodi FloatingActionButton-lähteestä
@Ohittaa
julkinen boolean onDependentViewChanged (CoordinatorLayout -vanhempi, FloatingActionButton lapsi,
        Näytä riippuvuus) {
    if (AppBarLayoutin riippuvuusesimerkki) {
        // Jos olemme riippuvaisia ​​AppBarLayoutista, näytämme / piilotamme sen automaattisesti
        // jos FAB on kiinnitetty AppBarLayout-sovellukseen
        updateFabVisibilityForAppBarLayout (vanhempi, (AppBarLayout) riippuvuus, lapsi);
    } else if (isBottomSheet (riippuvuus)) {
        updateFabVisibilityForBottomSheet (riippuvuus, lapsi);
    }
    palauta väärä;
}

Kuten voimme nähdä, tämä menetelmä tarkistaa näkemysten tyypin CoordinatorLayoutissa, tässä tapauksessa AppBarLayout ja BottomSheet, AppBarLayoutiin, se ankkuroituu siihen, ja BottomSheet se piilottaa itsensä tai kääntää ylöspäin riippuen erilaisissa olosuhteissa.

3. onDependentViewRemoved (…)

Tämä menetelmä on samanlainen kuin onDependentViewChanged (), mutta se ilmoittaa liitteenä olevalle näkymälle eli FloatingActionButton-näppäimelle, jos BottomSheet on poistettu CoordinatorLayout-sovelluksesta. FloatingActionButton reagoi sitten vastaavasti esiintymällä pr kääntämällä alaspäin, jos se ei olisi kadonnut.

Koordinaattorin tarjoamia menetelmiä on enemmän.Bhahaviors luokka tarjoaa enemmän yksityiskohtaisuutta. Nämä 3 ovat alkeellisimpia ja tärkeimpiä, erityisesti onDependentViewChanged

johtopäätös

Kuten näette, koordinaattorin asettelu, jos sitä käytetään asianmukaisesti, on erittäin tehokas mekanismi vuorovaikutusten orkeroimiseksi sen sisäkkäisten näkymien välillä. Se on hyödyllinen työkalu näkymävuorovaikutukseen ja tuo viime kädessä esiin Material Motion -ideaalit.

Seuraavassa artikkelissamme näemme kuinka luoda omat mukautetut käytöksemme! Luota minuun, se on helpompaa kuin luulet. Kiitos lukemisesta!
Rauha!