Was ist CoordinatorLayout?


93

Ich habe mir gerade die Demo-App der neuen Designbibliothek für Android-Support angesehen. Es wird von Chris Banes auf Github zur Verfügung gestellt . Durch die App CoordinatorLayoutwird stark genutzt. Auch viele der Unterstützung Design - Bibliothek Klassen wie FloatingActionButton, SnackBar, AppBarLayoutusw. verhält sich anders , wenn gebrauchte innen CoordinatorLayout.

Kann einige Lichter auf jemand bitte werfen , was ist CoordinatorLayoutund wie es sich von anderen unterscheidet ViewGroups in android, oder zumindest richtigen Weg bieten zu lernen CoordinatorLayout.


5
android-developers.blogspot.com/2015/05/… Es enthält auch eine ausführliche, wenn auch verwirrende Beschreibung in den JavaDocs (derzeit nicht in direkt verlinkbarer Form verfügbar, aber Sie können eine ZIP-Datei von developer.android.com/preview herunterladen /download.html ).
CommonsWare

1
Was ist eigentlich der Vorteil der Verwendung CordinatorLayout? Welchen Vorteil hat es gegenüber anderen?
eRaisedToX

Antworten:


42

Hier ist es, wonach Sie suchen.

aus docs

Mit der Designbibliothek CoordinatorLayoutwird ein Layout eingeführt , das eine zusätzliche Kontrolle über Berührungsereignisse zwischen untergeordneten Ansichten bietet. Dies wird von vielen Komponenten in der Designbibliothek genutzt.

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

In diesem Link sehen Sie die Demo-Videos aller oben genannten Ansichten.

hoffe das hilft :)


2
Link ist defekt.
Yogesh Seralia

39

Was ist ein CoordinatorLayout? Lassen Sie sich nicht von dem ausgefallenen Namen täuschen, es ist nichts weiter als ein FrameLayout für Steroide

Um am besten zu verstehen, was ein CoordinatorLayoutist / tut, müssen Sie zunächst verstehen / bedenken, was es bedeutet, zu koordinieren.

Wenn Sie das Wort googeln

Koordinate

Das ist was du bekommst:

Geben Sie hier die Bildbeschreibung ein

Ich denke, diese Definitionen helfen zu beschreiben, was ein CoordinatorLayout alleine macht und wie sich die darin enthaltenen Ansichten verhalten.

Ein CoordinatorLayout (eine ViewGroup) bringt die verschiedenen Elemente (untergeordneten Ansichten) eines (̶a̶ ̶c̶o̶m̶p̶l̶e̶x̶ ̶a̶c̶t̶i̶v̶i̶t̶y̶

Mithilfe eines CoordinatorLayout arbeiten untergeordnete Ansichten harmonisch zusammen, um großartige Verhaltensweisen wie z

schleppt, wischt, schleudert oder andere Gesten.

Ansichten in einem CoordinatorLayout verhandeln mit anderen, um durch Angabe dieser Verhaltensweisen effektiv zusammenzuarbeiten

Ein CoordinatorLayout ist eine super coole Funktion von Material Design, mit der attraktive und harmonisierte Layouts erstellt werden können.

Sie müssen lediglich die Ansichten Ihres Kindes in das CoordinatorLayout einbinden.

<?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>

und 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>

Dies gibt uns ein Layout, das gescrollt werden kann, um die Symbolleiste zu reduzieren und den FloatingActionButton auszublenden

Öffnen:

Geben Sie hier die Bildbeschreibung ein

Geschlossen:

Geben Sie hier die Bildbeschreibung ein


2
Hätte das Relativ- oder Einschränkungslayout nicht auch eine Beziehung zwischen Ansichten? Wenn man nach oben geht, wird die zugehörige Ansicht nach oben verschoben. Warum ist Koordinator besser?
Schlange

1
@Snake 1. Das CoordinatorLayout hilft beim Anordnen einer Ansicht über eine andere Ansicht, was weder ein ConstraintLayout noch ein RelativeLayout kann. 2. Es hilft auch, den Übergang von Ansichten zu animieren. Ein gutes Beispiel ist der Übergang der Aktivität / des Fragments "Kontakt anzeigen" in der WhatsApp-App.
Felix Favor Chinemerem

13

Ein zusätzlicher Punkt zu beachten. Da OP speziell gefragt

Außerdem verhalten sich viele Libabry-Klassen des Support-Designs wie FloatingActionButton, SnackBar, AppBarLayout usw. anders, wenn sie in CoordinatorLayout verwendet werden.

Und ich denke, das liegt daran.

CoordinatorLayout ist ein leistungsstarkes FrameLayout.

Mit der FAB-Schaltfläche arbeitet SnackBar am Konzept von FrameLayout. Da CoordinatorLayout selbst über die Funktionalität von FrameLayout verfügt, können sich andere Ansichten möglicherweise anders verhalten.


8

CoordinatorLayout ist im Wesentlichen das Rahmenlayout mit vielen Funktionen, das aus dem Namen hervorgeht. Es automatisiert die Koordination zwischen seinen Kindern und hilft dabei, schöne Ansichten zu erstellen. Die Implementierung ist in der Google Play Store App zu sehen. Wie die Symbolleiste reduziert und die Farben geändert werden.

Das Beste an CoordinatorLayout ist das Verhalten, das wir seinen direkten oder indirekten Nachkommen geben. Sie müssen beim Scrollen gesehen haben, dass die gesamte Benutzeroberfläche in Bewegung gerät. Es ist sehr wahrscheinlich, dass das Verhalten seine Magie entfaltet.


7

So geben Sie einen kurzen Überblick über die Funktionen der Android-Dokumentation :

Verwenden Sie CoordinatorLayout, um einfach das relationale Verhalten Ihrer Ansichten zu steuern.

Zum Beispiel, wenn Ihre Symbolleiste ausgeblendet oder ausgeblendet werden soll. Google hat es mit der Einführung von AppBarLayout und CollapsingToolbarLayout, die beide unter einem CoordinatorLayout am besten funktionieren, wirklich einfach gemacht.

Die andere am häufigsten verwendete Situation ist, wenn Sie möchten, dass ein FloatingActionButton am unteren Rand Ihrer CollapsingToolbar haftet und sich damit bewegt, sie unter ein Koordinator-Layout legt und app:layout_anchor="@id/YourAppBarId"für den Kleber (!) Und app:layout_anchorGravity="bottom|end"als Position ausreicht, um die zu sehen magische Arbeit!

Wenn Sie dieses Layout als Kontext verwenden, können die untergeordneten Ansichten besser zusammenarbeiten und sich intelligent verhalten, da sie sich über den CoordinatorLayout-Kontext gegenseitig kennen. Dies bedeutet, dass Ihre FloatingAction-Schaltflächen nicht mehr von einer Snackbar usw. überlappt werden.

Dies war nur eine kurze Zusammenfassung der nützlichsten Teile. Wenn Sie also mehr Zeit beim Animieren Ihrer App sparen möchten, lohnt es sich, etwas tiefer in das Thema einzutauchen.

Weitere Informationen finden Sie in der Aktivitätsvorlage für die Google Scrolling-Ansicht


1

Es ist wichtig zu beachten, dass CoordinatorLayout kein angeborenes Verständnis für eine FloatingActionButton- oder AppBarLayout-Arbeit hat. Es bietet lediglich eine zusätzliche API in Form eines Coordinator.Behavior, mit der untergeordnete Ansichten Berührungsereignisse und Gesten besser steuern können sowie Abhängigkeiten untereinander deklarieren und Rückrufe über onDependentViewChanged () erhalten.

Ansichten können ein Standardverhalten mithilfe der Annotation CoordinatorLayout.DefaultBehavior (YourView.Behavior.class) deklarieren oder mit der App in Ihren Layoutdateien festlegen: layout_behavior = "com.example.app.YourView $ Behavior". Dieses Framework ermöglicht es jeder Ansicht, sich in CoordinatorLayout zu integrieren.

Jetzt verfügbar! Die Designbibliothek ist ab sofort verfügbar. Aktualisieren Sie daher unbedingt das Android Support Repository im SDK-Manager. Sie können dann die Designbibliothek mit einer einzigen neuen Abhängigkeit verwenden:

Kompilieren Sie 'com.android.support:design:22.2.0'. Da die Designbibliothek von den Support v4- und AppCompat-Supportbibliotheken abhängt, werden diese automatisch hinzugefügt, wenn Sie die Designbibliotheksabhängigkeit hinzufügen. Wir haben auch darauf geachtet, dass diese neuen Widgets in der Entwurfsansicht des Android Studio-Layout-Editors verwendet werden können (finden Sie sie unter CustomView), damit Sie einige dieser neuen Komponenten einfacher in der Vorschau anzeigen können.

Die Designbibliothek, AppCompat und die gesamte Android-Supportbibliothek sind wichtige Tools, um die Bausteine ​​bereitzustellen, die zum Erstellen einer modernen, gut aussehenden Android-App erforderlich sind, ohne alles von Grund auf neu zu erstellen.


0

Das CoordinatorLayoutist ein Super-Power FrameLayout.

Wenn Sie einem mehrere untergeordnete Elemente hinzufügen FrameLayout, überlappen sie sich standardmäßig . A FrameLayoutsollte am häufigsten verwendet werden, um eine einzelne untergeordnete Ansicht zu halten. Der Hauptanreiz des CoordinatorLayoutist seine Fähigkeit, die Animationen und Übergänge der darin enthaltenen Ansichten zu koordinieren . Wenn Sie nur XML verwenden, können Sie ein Layout beschreiben, in dem ein FAB beispielsweise einer eingehenden Snackbar aus dem Weg geht, oder ein FAB (oder eine andere Ansicht wirklich), das anscheinend an ein anderes Widget angehängt ist und sich mit dem auf dem Bildschirm bewegt Widget.

Hier ist das Hauptquellen- Tutorial .

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.