Cos'è CoordinatorLayout?


96

Ho appena dato un'occhiata all'app demo della nuova libreria di progettazione del supporto Android. È fornito da Chris Banes su GitHub . Tramite l'app, CoordinatorLayoutviene utilizzato pesantemente. Inoltre, molte delle progettuali supporto classi di libreria come FloatingActionButton, SnackBar, AppBarLayoutecc si comporta diversamente quando all'interno usate CoordinatorLayout.

Qualcuno può far luce su ciò che è CoordinatorLayoute come è diverso dagli altri ViewGroupin Android, o almeno fornire il percorso corretto verso l'apprendimento CoordinatorLayout.


5
android-developers.blogspot.com/2015/05/… Ha anche una descrizione ampia, anche se confusa, nei JavaDocs (non attualmente disponibile in forma collegabile direttamente, ma puoi scaricare uno ZIP da developer.android.com/preview /download.html ).
CommonsWare

1
Qual è effettivamente il vantaggio di utilizzare CordinatorLayout? Che vantaggio ha sugli altri?
eRaisedToX

Risposte:


43

Ecco quello che stai cercando.

da documenti

la libreria Design introduce CoordinatorLayout, un layout che fornisce un ulteriore livello di controllo sugli eventi di tocco tra le visualizzazioni figlio, qualcosa di cui traggono vantaggio molti dei componenti nella libreria Design.

https://android-developers.googleblog.com/2015/05/android-design-support-library.html

in questo link vedrai i video dimostrativi di tutte le viste sopra menzionate.

spero che questo ti aiuti :)


4
il collegamento è interrotto.
Yogesh Seralia

40

Cos'è un CoordinatorLayout? Non lasciarti ingannare dal nome di fantasia, non è altro che un FrameLayout con steroidi

Per capire meglio cosa CoordinatorLayoutè / fa, devi prima di tutto capire / tenere a mente cosa significa Coordinare.

Se cerchi la parola su Google

Coordinata

Questo è ciò che ottieni:

inserisci qui la descrizione dell'immagine

Penso che queste definizioni aiutino a descrivere cosa fa un CoordinatorLayout da solo e come si comportano le visualizzazioni al suo interno.

Un CoordinatorLayout (un ViewGroup) porta i diversi elementi (viste secondarie) di un layout (̶a̶ ̶c̶o̶m̶p̶l̶e̶x̶ ̶a̶c̶t̶i̶v̶i̶t̶y̶ ̶o̶r̶ ̶a̶n̶ ̶o̶r̶g̶a̶n̶i̶z̶a̶t̶i̶o̶ in una relazione armoniosa o efficiente)

Con l'aiuto di un CoordinatorLayout, le visualizzazioni dei bambini lavorano insieme armoniosamente per implementare comportamenti fantastici come

trascina, scorri, lancia o qualsiasi altro gesto.

Le viste all'interno di un CoordinatorLayout negoziano con gli altri al fine di lavorare insieme in modo efficace specificando questi comportamenti

Un CoordinatorLayout è una caratteristica fantastica di Material Design che aiuta a creare layout accattivanti e armonizzati.

Tutto quello che devi fare è racchiudere le visualizzazioni del tuo bambino all'interno del CoordinatorLayout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout        
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true"
 tools:context="com.byte64.coordinatorlayoutexample.ScollingActivity">

 <android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">



        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_scolling" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/fab_margin"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="bottom|end"
    app:srcCompat="@android:drawable/ic_dialog_email" />

 </android.support.design.widget.CoordinatorLayout>

e content_scrolling:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView     
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:layout_behavior="@string/appbar_scrolling_view_behavior"
 tools:context="com.byte64.coordinatorlayoutexample.ScollingActivity"
 tools:showIn="@layout/activity_scolling">

 <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/text_margin"
    android:text="@string/large_text" />

 </android.support.v4.widget.NestedScrollView>

Ciò che questo ci offre è un layout che può essere fatto scorrere per comprimere la barra degli strumenti e nascondere il pulsante FloatingActionButton

Aperto:

inserisci qui la descrizione dell'immagine

Chiuso:

inserisci qui la descrizione dell'immagine


2
Anche il layout relativo o vincolato non avrebbe una relazione tra le viste? Se ci si sposta verso l'alto, la vista correlata si sposta verso l'alto. Perché il coordinatore è migliore?
Snake

1
@Snake 1. Il CoordinatorLayout aiuta a disporre una vista su un'altra vista, cosa che né un ConstraintLayout né un RelativeLayout possono fare. 2. Aiuta anche ad animare la transizione delle visualizzazioni. Un buon esempio è la transizione dell'attività / frammento "Visualizza contatto" nell'app Whatsapp.
Felix Favor Chinemerem

13

Un ulteriore punto da notare. Poiché OP ha specificamente chiesto

Inoltre, molte delle classi libabry del design di supporto come FloatingActionButton, SnackBar, AppBarLayout ecc. Si comportano in modo diverso quando vengono utilizzate all'interno di CoordinatorLayout.

E credo che sia per questo.

CoordinatorLayout è un FrameLayout super potente.

Pulsante FAB, SnackBar funziona sul concetto di FrameLayout e poiché lo stesso CoordinatorLayout ha funzionalità di FrameLayout, potrebbe far sì che altre visualizzazioni si comportino diversamente !.


9

CoordinatorLayout è essenzialmente il layout del frame con molte funzionalità che sono evidenti dal nome, automatizza il coordinamento tra i suoi figli e aiuta a costruire bellissime viste. La sua implementazione può essere vista nell'app Google Play Store. Come la barra degli strumenti si comprime e cambia i colori.

La cosa migliore di CoordinatorLayout è il comportamento che diamo ai suoi discendenti diretti o indiretti. Devi aver visto durante lo scorrimento tutta l'interfaccia utente si mette in movimento. È molto probabile che il comportamento stia facendo la sua magia.


7

Per dare una rapida istantanea di ciò che è utile nella documentazione di Android :

Usa CoordinatorLayout per controllare semplicemente il comportamento relazionale delle tue visualizzazioni,

Ad esempio, se desideri che la tua barra degli strumenti si comprima o si nasconda. Google ha reso tutto molto semplice introducendo AppBarLayout e CollapsingToolbarLayout, che funzionano entrambi meglio sotto un CoordinatorLayout.

L'altra situazione più utilizzata è quando vuoi che un FloatingActionButton si attacchi alla parte inferiore della tua CollapsingToolbar e si muova con essa, mettendoli sotto un coordinatorLayout e usandoli app:layout_anchor="@id/YourAppBarId"per la colla (!) Eapp:layout_anchorGravity="bottom|end" poiché la posizione sarà sufficiente per te per vedere il lavoro magico!

Usando questo layout come contesto, le viste figlio avranno una migliore collaborazione e si comporteranno in modo intelligente perché saranno consapevoli l'una dell'altra attraverso il contesto CoordinatorLayout, questo significa che i tuoi pulsanti FloatingAction non saranno più sovrapposti da uno snackBar ecc.

questi erano solo un breve riepilogo delle parti più utili, quindi se vuoi risparmiare più tempo nell'animazione della tua app, varrà la pena approfondire l'argomento.

vedere il modello di attività della visualizzazione a scorrimento di Google


1

Una cosa importante da notare è che CoordinatorLayout non ha alcuna comprensione innata del lavoro FloatingActionButton o AppBarLayout: fornisce solo un'API aggiuntiva sotto forma di Coordinator.Behavior, che consente alle visualizzazioni figlio di controllare meglio eventi e gesti tattili così come dichiarare le dipendenze tra loro e ricevere callback tramite onDependentViewChanged ().

Le viste possono dichiarare un comportamento predefinito utilizzando l'annotazione CoordinatorLayout.DefaultBehavior (YourView.Behavior.class) o impostarlo nei file di layout con l'app: layout_behavior = "com.example.app.YourView $ Behavior" attributo. Questo framework rende possibile l'integrazione di qualsiasi vista con CoordinatorLayout.

Disponibile ora! La libreria di progettazione è ora disponibile, quindi assicurati di aggiornare il repository di supporto Android in SDK Manager. È quindi possibile iniziare a utilizzare la libreria di progettazione con un'unica nuova dipendenza:

compile 'com.android.support:design:22.2.0' Nota che poiché la libreria Design dipende dalle librerie Support v4 e AppCompat Support, queste verranno incluse automaticamente quando aggiungi la dipendenza della libreria Design. Ci siamo anche presi cura che questi nuovi widget fossero utilizzabili nella vista Progettazione dell'editor del layout di Android Studio (trovali sotto CustomView), offrendoti un modo più semplice per visualizzare in anteprima alcuni di questi nuovi componenti.

La libreria di progettazione, AppCompat e tutta la libreria di supporto Android sono strumenti importanti per fornire gli elementi costitutivi necessari per creare un'app Android moderna e dall'aspetto eccezionale senza dover costruire tutto da zero.


0

Il CoordinatorLayoutè un super-alimentato FrameLayout.

Per impostazione predefinita, se aggiungi più elementi secondari a a FrameLayout, si sovrapporranno l'uno all'altro. A FrameLayoutdovrebbe essere utilizzato più spesso per mantenere un'unica visualizzazione figlio. L'attrattiva principale di CoordinatorLayoutè la sua capacità di coordinare le animazioni e le transizioni delle visualizzazioni al suo interno. Usando solo XML, puoi descrivere un layout in cui un FAB si sposta fuori dalla traiettoria di uno Snackbar in arrivo, ad esempio, o avere un FAB (o qualsiasi altra vista in realtà) che è apparentemente collegato a un altro widget e si sposta sullo schermo con il aggeggio.

Ecco il tutorial della fonte principale .

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.