Koordinatorlayout - Billede fra imgur

Android-design - koordinatorlayout # 1: En introduktion

Koordinatorlayoutet beskrives som en "en superdrevet FrameLayout" i henhold til dokumenterne. Det bruges til at lette, hvordan visninger i dit layout interagerer med hinanden. Dette gøres ved at oprette eller tildele specifikke opførsler til disse synspunkter. Disse opførsler er kernen i det, der gør Materialesign unikt og inkluderer velkendte interaktioner såsom glideskuffer og paneler til at skubbe-afviselige elementer og knapper, der holder sig til andre elementer, når de bevæger sig og animerer.

Lad os se på adfærd og hvordan de fungerer. I vores næste artikel skal vi vise et simpelt eksempel på, hvordan man opretter en adfærd, der giver mulighed for grundlæggende interaktion mellem visninger i en koordinatorLayout

Figur 1: Flydende handlingsknap reagerer på Snackbar Image med tilladelse fra Nikita Rusin

adfærd

Adfærd er kernen i CoordinatorLayouts. De repræsenterer interaktioner mellem 2 eller flere visninger i samme layout. De er normalt kategoriseret i følgende:

1. Layoutbaserede adfærd: F.eks. Når der vises en snackbar fra bunden, oversættes FloatingAction-knappen straks opad for at imødekomme den indgående visning, som vist i figur 1 til venstre.
Forankring er også en form for layoutbaseret opførsel, for eksempel når en FloatingActionButton er forankret til en AppBarLayout, som det ses i figur 2. Layoutbaseret opførsel har en tendens til at være allestedsnærværende i Android-rammerne og generelt den nemmeste at oprette, så vi skal fokusere om dem i denne artikel.

Figur 2: Flydende handlingsknap forankret til AppBar (til højre). Image Med tilladelse fra Saul Molinero

2. Rullebaseret opførsel: F.eks. Når der findes en RecyclerView og AppBar i aCoordinatorLayout, når RecyclerView ruller, skubber den AppBar en smule opad og minimerer derefter AppBar for at fortsætte med at rulle problemfrit som vist i figur 2 (til venstre). Rullebaseret adfærd involverer lidt mere arbejde for at få dem i gang, og vi skal ikke fokusere meget på dem indtil videre.

Hvis du dykker ned i koden for en visning, der indeholder en adfærd, vil du bemærke, at en adfærd er knyttet til visningen ved hjælp af en annotation som vist i EC-1, EC -2 og EC-3 nedenfor.

EC-1: AppBarLayout-opførsel
@ CoordinatorLayout.DefaultBehavior (AppBarLayout.Behavior.class)
public class AppBarLayout udvider LinearLayout
EC-2: FloatingActionButton Adfærd
@ CoordinatorLayout.DefaultBehavior (FloatingActionButton.Behavior.class)
offentlig klasse FloatingActionButton udvider SynlighedAwareImageButton
EC-3: Snackbar-opførsel
public final class Snackbar udvider BaseTransientBottomBar 

Brug af annotationen som vist i EC-1 og EC-2 er en måde at knytte en opførsel til en visning programmatisk. En visning kan kun have en given adfærd knyttet til den. Det er vigtigt at bemærke, at en snackbar og dens overordnede BaseTransientBottomBar ikke har en opførsel knyttet til dem, selvom de begge interagerer med FloatingActionButton, når FloatingActionButton trykkes ned. Dette viser, at der er retningsmæssighed involveret, når det kommer til adfærd. Betydning af en adfærd kan afhænge af et andet syn, men ikke nødvendigvis omvendt. Lad os se på, hvordan adfærd fungerer internt for at se hvorfor.

Implementering af adfærd

Når det kommer til oprettelse af adfærd, skal din adfærdsklasse udvide klassen Coordinator.Behaviors , hvor V repræsenterer det synspunkt, der vil indeholde adfærden. Coordinator.Behaviors -klassen har adskillige metoder, der kan tilsidesættes for at finjustere din opførsel, men der er især tre metoder, der er vigtige for at tilsidesætte.

For at få en dybere forståelse skal vi bruge interaktionen mellem FloatingActionButton og BottomSheet som et eksempel. (Se klassen FloatingActionButton $ Adfærd)

1. layoutDependsOn (...)

Bruges til at kontrollere, om en bestemt visning i CoordinatorLayout er den visning, din adfærd afhænger af. F.eks. Vil FloatingActionButton kontrollere, om BottomSheet-visningen er en visning, det afhænger af. I så fald skal det vende tilbage.

2. onDependentViewChanged (…)

Når layoutet har fundet en afhængighed, skal det begynde at observere denne afhængighed. Når FloatingActionButton for eksempel har identificeret, at det afhænger af BottomSheet, vil denne metode lytte til ændringer på BottomSheet og informere FloatingActionButton. Eksempelkode (EC-5) nedenfor viser dette. Her går logikken til at håndtere interaktionen.

EC-5: Her er kode fra FloatingActionButton-kilden
@Override
offentlig boolsk onDependentViewChanged (koordinatorLayout forælder, FloatingActionButton barn,
        Se afhængighed) {
    if (afhængighedsforekomst af AppBarLayout) {
        // Hvis vi er afhængige af en AppBarLayout, viser / skjuler vi den automatisk
        // hvis FAB er forankret i AppBarLayout
        updateFabVisibilityForAppBarLayout (forælder, (AppBarLayout) afhængighed, barn);
    } andet hvis (isBottomSheet (afhængighed)) {
        updateFabVisibilityForBottomSheet (afhængighed, barn);
    }
    vende tilbage falsk;
}

Som vi kan se, kontrollerer denne metode for at se typen af ​​visninger i CoordinatorLayout, i vores tilfælde en AppBarLayout og BottomSheet, for AppBarLayout, den vil forankre sig selv til den, og for BottomSheet vil den skjule sig selv eller oversætte opad afhængigt på forskellige betingelser.

3. onDependentViewRemoved (…)

Denne metode ligner onDependentViewChanged () men den informerer den vedhæftede visning, dvs. FloatingActionButton, hvis bundskemaet er blevet fjernet fra CoordinatorLayout. FloatingActionButton reagerer derefter ved at dukke op igen pr oversætte nedad, hvis det ikke var forsvundet.

Der er flere metoder, der tilbydes af koordinatoren. Evner -klassen, der tilbyder mere granularitet. Disse 3 er de mest basale og vigtige, især på afhængig visning

Konklusion

Som du kan se, er koordinatorlayouten, hvis det bruges korrekt, en meget kraftig mekanisme til orketrering af interaktioner mellem det indlejrede synspunkt. Det er et nyttigt værktøj til at se interaktion, og i sidste ende fremhæve idealerne om Materialebewegelse.

I vores næste artikel skal vi se, hvordan vi opretter vores egen tilpassede opførsel! Tro mig, det er lettere, end du tror. Tak for at have læst!
Fred!