Layout del coordinatore - Immagine da imgur

Design Android - Coordinatore Layout n. 1: un'introduzione

Il layout del coordinatore è descritto come un "FrameLayout superpotente" secondo i documenti. Viene utilizzato per facilitare il modo in cui le viste all'interno del layout interagiscono tra loro. Questo viene fatto creando o assegnando comportamenti specifici a queste viste. Questi comportamenti sono fondamentali per ciò che rende unico il Material Design e includono interazioni familiari come cassetti e pannelli scorrevoli per elementi e pulsanti che possono essere trascinati e trascinati su altri elementi mentre si muovono e si animano.

Diamo un'occhiata ai comportamenti e al loro funzionamento. Nel prossimo articolo mostreremo un semplice esempio di come creare un comportamento che consenta l'interazione di base tra le viste in un coordinatore

Figura 1: Pulsante di azione mobile che reagisce a Snackbar Immagine gentilmente concessa da Nikita Rusin

comportamenti

I comportamenti sono al centro di CoordinatorLayouts. Rappresentano le interazioni tra 2 o più viste nello stesso layout. Normalmente sono classificati come segue:

1. Comportamenti basati sul layout: ad es. quando viene visualizzata una Snackbar dal basso, il FloatingActionButton si traduce immediatamente verso l'alto per adattarsi alla vista in arrivo, come mostrato nella Figura 1 a sinistra.
L'ancoraggio è anche una forma di comportamento basato sul layout, ad esempio quando un FloatingActionButton è ancorato a un AppBarLayout come mostrato nella Figura 2. I comportamenti basati sul layout tendono ad essere onnipresenti in tutto il Framework Android e generalmente i più facili da creare, quindi dovremo concentrarci su di loro in questo articolo.

Figura 2: pulsante di azione mobile ancorato ad AppBar (a destra). Immagine gentilmente concessa da Saul Molinero

2. Comportamenti basati su scorrimento: ad es. Quando un RecyclerView e una AppBar sono entrambi presenti in aCoordinatorLayout, quando RecyclerView scorre, spingerà l'AppBar verso l'alto un po ', quindi minimizzerà l'AppBar, in modo da continuare a scorrere senza interruzioni, come mostrato nella Figura 2 (a sinistra). I comportamenti basati su scorrimento implicano un po 'più di lavoro per farli funzionare e per ora non ci concentreremo molto su di essi.

Se ti immergi nel codice di qualsiasi vista che contiene un comportamento, noterai che un comportamento è allegato alla vista utilizzando un'annotazione come mostrato in EC-1, EC -2 e EC-3 di seguito.

EC-1: comportamento AppBarLayout
@ CoordinatorLayout.DefaultBehavior (AppBarLayout.Behavior.class)
AppBarLayout di classe pubblica estende LinearLayout
EC-2: Comportamento FloatingActionButton
@ CoordinatorLayout.DefaultBehavior (FloatingActionButton.Behavior.class)
classe pubblica FloatingActionButton estende VisibilityAwareImageButton
EC-3: comportamento Snackbar
la classe finale pubblica Snackbar estende BaseTransientBottomBar 

L'uso dell'annotazione come mostrato in EC-1 e EC-2 è un modo per associare un comportamento a una vista a livello di programmazione. Una vista può avere un solo allegato Comportamento ad essa. È importante notare che uno Snackbar e il suo BaseTransientBottomBar principale non hanno un comportamento collegato a loro, anche se entrambi interagiscono con il pulsante FloatingActionButton quando viene premuto il pulsante FloatingActionButton. Questo dimostra che esiste una direzionalità quando si tratta di comportamenti. Significa che un comportamento può dipendere da un'altra visione ma non necessariamente viceversa. Per capire perché, diamo un'occhiata a come funzionano i comportamenti internamente.

Attuare i comportamenti

Quando si tratta di creare comportamenti, la classe Behavior deve estendere la classe Coordinator.Behaviors , dove V rappresenta la vista che conterrà il comportamento. La classe Coordinator.Behaviors ha diversi metodi che possono essere sovrascritti per mettere a punto il tuo comportamento, tuttavia ci sono 3 metodi in particolare che sono essenziali per sovrascrivere.

Per una comprensione più approfondita, useremo l'interazione tra FloatingActionButton e BottomSheet come esempio. (Vedi la classe FloatingActionButton $ Behavior)

1. layoutDependsOn (...)

Utilizzato per verificare se una determinata vista in CoordinatorLayout è la vista da cui dipende il tuo comportamento. Ad esempio, FloatingActionButton verificherà se la vista BottomSheet è una vista da cui dipende. In tal caso, restituirà true.

2. onDependentViewChanged (...)

Una volta che il layout ha trovato una dipendenza, deve iniziare ad osservare tale dipendenza. Ad esempio, una volta che FloatingActionButton ha identificato che dipende dal BottomSheet, questo metodo ascolterà le modifiche sul BottomSheet e informerà FloatingActionButton. Esempio di codice (EC-5) di seguito mostra questo. Qui è dove va la logica per gestire l'interazione.

EC-5: ecco il codice dall'origine FloatingActionButton
@Oltrepassare
public boolean onDependentViewChanged (CoordinatorLayout parent, FloatingActionButton child,
        Visualizza dipendenza) {
    if (dipendenza dell'istanza di AppBarLayout) {
        // Se dipendiamo da un AppBarLayout, lo mostreremo / nasconderemo automaticamente
        // se il FAB è ancorato ad AppBarLayout
        updateFabVisibilityForAppBarLayout (parent, dipendenza (AppBarLayout), child);
    } else if (isBottomSheet (dipendenza)) {
        updateFabVisibilityForBottomSheet (dipendenza, figlio);
    }
    restituire false;
}

Come possiamo vedere, questo metodo controlla per vedere il tipo di viste in CoordinatorLayout, nel nostro caso un AppBarLayout e BottomSheet, per AppBarLayout, si ancorerà ad esso e, per il BottomSheet, si nasconderà o tradurrà verso l'alto a seconda a varie condizioni.

3. onDependentViewRemoved (...)

Questo metodo è simile a onDependentViewChanged () tuttavia informa la vista allegata, ad esempio FloatingActionButton se il BottomSheet è stato rimosso da CoordinatorLayout. FloatingActionButton reagirà quindi di nuovo riapparendo pr traducendo verso il basso se non è scomparso.

Esistono altri metodi offerti dalla classe Coordinator.Behaviors che offrono maggiore granularità. Questi 3 sono i più basilari e importanti, in particolare onDependentViewChanged

Conclusione

Come puoi vedere, il layout del coordinatore, se usato in modo appropriato, è un meccanismo molto potente per orchestrare le interazioni tra le sue viste nidificate. È uno strumento utile per visualizzare l'interazione, alla fine mettendo in evidenza gli ideali di Material Motion.

Nel prossimo articolo vedremo come creare i nostri comportamenti personalizzati! Fidati di me, è più facile di quanto pensi. Grazie per aver letto!
Pace!