ConstraintLayout vs. Koordinator-Layout?

Lesezeit: 7 Minuten

Benutzer-Avatar
Swapnil Mobile App-Entwickler

Was ist umzusetzen: ConstraintLayout oder CoordinatorLayout für richtiges Materialdesign in Android?

Benutzer-Avatar
Darisch

CoordinatorLayout ist ein leistungsstarkes FrameLayout.

KoordinatorLayout

CoordinatorLayout ist für zwei primäre Anwendungsfälle vorgesehen:

  • Als Top-Level-Anwendungsdekor oder Chrom-Layout
  • Als Container für eine bestimmte Interaktion mit einer oder mehreren untergeordneten Ansichten

Wenn Sie mehrere untergeordnete Elemente zu a hinzufügen, ist dies standardmäßig der Fall FrameLayout, sie würden einander überlappen. EIN FrameLayout sollte am häufigsten verwendet werden, um eine einzelne untergeordnete Ansicht zu halten. Der Hauptanreiz der CoordinatorLayout ist seine Fähigkeit, die Animationen und Übergänge der darin enthaltenen Ansichten zu koordinieren. Durch Angabe Verhaltensweisen für untergeordnete Ansichten von a CoordinatorLayout Sie können viele verschiedene Interaktionen innerhalb eines einzelnen Elternteils bereitstellen, und diese Ansichten können auch miteinander interagieren. Ansichtsklassen können ein Standardverhalten angeben, wenn sie als untergeordnete Elemente von a verwendet werden CoordinatorLayout Verwendung der CoordinatorLayout.DefaultBehavior Anmerkung.

Verhaltensweisen können verwendet werden, um eine Vielzahl von Interaktionen und zusätzlichen Layoutänderungen zu implementieren, die von verschiebbaren Schubladen und Bedienfeldern bis hin zu durch Wischen verschließbaren Elementen und Schaltflächen reichen, die an anderen Elementen haften bleiben, wenn sie sich bewegen und animieren.

ConstraintLayout ist eine leistungsstarke ViewGroup ähnlich einem RelativeLayout, aber flexibler als RelativeLayout.

ConstraintLayout

ConstraintLayout ermöglicht Ihnen die Erstellung großer und komplexer Layouts mit einer flachen Ansichtshierarchie (keine verschachtelten Ansichtsgruppen). Es ähnelt RelativeLayout dass alle Ansichten gemäß den Beziehungen zwischen Geschwisteransichten und dem übergeordneten Layout angeordnet sind, aber es ist flexibler als RelativeLayout und einfacher zu verwenden mit dem Layout-Editor von Android Studio.

  • ConstraintLayout kann überall verwendet werden, Sie brauchen keine andere ViewGroup wie RelativeLayout, LinearLayout oder FrameLayout sobald Sie mit der Verwendung beginnen ConstraintLayout.

Derzeit gibt es verschiedene Arten von Einschränkungen, die Sie verwenden können:

  • Relative Positionierung
  • Ränder
  • Zentrierende Positionierung
  • Zirkuläre Positionierung
  • Sichtbarkeitsverhalten
  • Dimensionsbeschränkungen
  • Ketten
  • Virtuelle Helfer-Objekte
  • Optimierer

Was ist umzusetzen: ConstraintLayout oder CoordinatorLayout für richtiges Materialdesign in Android?

Möglicherweise müssen Sie beide verwenden ConstraintLayout und CoordinatorLayout um effiziente UI- und Materialanimationen zu erstellen.

Ein allgemeines Beispiel, das beide verwendet CoordinatorLayout und ConstraintLayout ist unten als Referenz angegeben.

  • Verwenden Coordinatorlayout als Applikationsdekor der obersten Ebene. Es wird normalerweise zum Layout verwendet AppBarLayout , FloatingActionButtonund den Hauptteil Ihres Bildschirms, sagen wir NestedScrollView. Im Inneren des NestedScrollView verwenden ConstraintLayout den Rest des Layouts als flache Hierarchie zu beschreiben.

    <androidx.coordinatorlayout.widget.CoordinatorLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
    
          <androidx.core.widget.NestedScrollView
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
    
              <!-- Your scrolling content -->
              <androidx.constraintlayout.widget.ConstraintLayout
                  ...>
    
                  <!-- body of constraint layout -->
    
                  <Button android:id="@+id/button" ...
                  app:layout_constraintLeft_toLeftOf="parent"
                  app:layout_constraintRight_toRightOf="parent/>
    
    
              </androidx.constraintlayout.widget.ConstraintLayout>
         </androidx.core.widget.NestedScrollView>
    
         <com.google.android.material.appbar.AppBarLayout
             android:layout_height="wrap_content"
             android:layout_width="match_parent">
          <androidx.appcompat.widget.Toolbar
                 ...
                 app:layout_scrollFlags="scroll|enterAlways"/>
          <com.google.android.material.tabs.TabLayout
                 ...
                 app:layout_scrollFlags="scroll|enterAlways"/>
          </com.google.android.material.appbar.AppBarLayout>
     </androidx.coordinatorlayout.widget.CoordinatorLayout>
    

Was bedeutet das obige Snippet? Bitte schön.

  • Wir haben die platziert androidx.coordinatorlayout.widget.CoordinatorLayout als Root-Layout. Und wir setzen androidx.core.widget.NestedScrollView und com.google.android.material.appbar.AppBarLayout als direkte Kinder.
  • Wir haben definiert app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" Attribut für androidx.core.widget.NestedScrollView. Dies ist der entscheidende Punkt. Wir haben ein Verhalten für die definiert NestedScrollView. Das heißt, wir sagen dem Koordinator-Layout, dass die NestedScrollView abhängig von der AppBarLayout.

    • Natürlich tun Behaviors nichts von sich aus, aber CoordinatorLayout tut es. Es handelt entsprechend und hilft beim Abfangen von Berührungsereignissen, Fenstereinschüben, Messungen, Layouts und verschachteltem Scrollen. Hier platziert es also die NestedScrollView unter dem AppBarLayout, wie wir es angewiesen haben. Cool oder?
  • Wir haben die platziert ConstraintLayout innerhalb der NestedScrollView scrollbar zu machen. Wie wir bereits besprochen haben, wird ConstraintLayout verwendet, um untergeordnete Ansichten innerhalb der Grenzen von ConstraintLayout auszurichten.

Kann ich ConstraintLayout in einem anderen ConstraintLayout hinzufügen?

Natürlich ja, Sie können jede Kombination verwenden, um Ansichten gemäß Ihren Designanforderungen auszurichten.

Kann ich CoordinatorLayout in einem anderen CoordinatorLayout hinzufügen?

Das ist keine übliche Praxis. Der häufigste Anwendungsfall von CoordinatorLayout ist ein Anwendungsdekor der obersten Ebene, um zwischen anderen direkten untergeordneten Elementen zu koordinieren. Aber ja, wenn Sie das CoordinatorLayout wirklich verschachteln möchten, können Sie dies tun, indem Sie ein benutzerdefiniertes CoordinatorLayout erstellen, das das erweitert CoordinatorLayout und implementiert NestedScrollingChild um die Bildlaufereignisse an das übergeordnete CoordinatorLayout zu übergeben.


Bonuspunkt

Sie können die Mächtigen verwenden MotionLayout das ist eine Unterklasse von ConstraintLayout zum Erstellen von Animationen. Sie können dies für ein detailliertes Beispiel für die Verwendung von benutzerdefinierten Animationen überprüfen MotionLayout.

  • Kudos dafür, eine der besten Antworten, die ich je auf SO gelesen habe

    – John

    1. Februar um 15:48 Uhr

Benutzer-Avatar
für2rist

KoordinatorLayout soll das Layout der obersten Ebene für Aktivitäten sein, um die zu verwalten Verhaltensweisen zB Interaktionen und Animationen.

ConstraintLayoutDas Hauptziel von ist es, eine bequeme Möglichkeit zu bieten, ein flaches Layout mit mehreren untergeordneten Elementen zu erstellen (das viel leistungsfähigere RelativeLayout).

Das CoordinatorLayout dient also dazu, das komplexe Verhalten (insbesondere Animationen) der Komponenten Ihrer Aktivität zu verwalten, und das ConstraintLayout für die richtige Platzierung der Komponenten (insbesondere Listenelemente).

Es scheint, als würden Sie (fast) immer a verwenden CoordinatorLayoutund verwenden Sie manchmal a ConstraintLayout Innerhalb. Siehe die folgenden Ressourcen

  • Das Codelab unter https://codelabs.developers.google.com/codelabs/material-design-style/index.html#3 verwendet nur a CoordinatorLayout

  • Die beispielhafte android-sunflower-App (“Veranschaulichung der Best Practices für die Android-Entwicklung”) verwendet keine von beiden für die Aktivität auf oberster Ebene, verwendet jedoch beide innerhalb ihrer fragment_plant_detail.xmlmit dem ConstraintLayout innerhalb der sein CoordinatorLayout:

    <layout ...>
    <data .../>
    <android.support.design.widget.CoordinatorLayout ...>
        <android.support.design.widget.AppBarLayout ...>
            <android.support.design.widget.CollapsingToolbarLayout ...>
                <ImageView... />
                <android.support.v7.widget.Toolbar... />
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>
        <android.support.v4.widget.NestedScrollView ...>
            <android.support.constraint.ConstraintLayout ...>
                <TextView.../>
                <TextView... />
            </android.support.constraint.ConstraintLayout>
        </android.support.v4.widget.NestedScrollView>
        <android.support.design.widget.FloatingActionButton ... />
    </android.support.design.widget.CoordinatorLayout>
    </layout>
    

  • Dies ist ein gutes Beispiel. für Datenbindung; für Viewmodel-Parameter; zum Koordinieren und Animieren von Symbolleisten, FAB usw.; verwendet, um Ansichten zu halten.

    – Sergio

    20. Juli 2018 um 7:12 Uhr

@Darish hat eine großartige, umfassende Antwort darauf. Ich stimme allem zu, was er gesagt hat, und wollte nur ein paar Informationen hinzufügen. Meiner Erfahrung nach ist ein Constraint-Layout als übergeordnete Ansicht meistens gut genug. Wenn Sie das Koordinator-Layout einbringen müssen, haben Sie bestimmte Verhaltensweisen, die Sie verwalten möchten (z. B. Bottom Sheets). Das Koordinator-Layout ist mehr Ärger als es wert ist, wenn Sie die Verhaltensfähigkeiten davon nicht nutzen oder wenn Sie versuchen, mit mehreren Ansichten herumzuspielen, da CoordinatorLayout als “superstarkes FrameLayout” fungiert.

Ich habe vor einiger Zeit einen Blog-Beitrag mit Illustrationen zu den Unterschieden und Verwendungen von Koordinator vs. Constraint-Layout geschrieben. Schau es dir hier an, wenn es dich interessiert.

Ich würde auch das Plug-in für MotionLayout als großartige umfassende Möglichkeit empfehlen, Ihren Layouts Animationen ohne zu viel zusätzlichen Code hinzuzufügen! Diese Google Developers-Serie mit Beispielen ist eine großartige Möglichkeit, mit MotionLayout zu beginnen.

1229450cookie-checkConstraintLayout vs. Koordinator-Layout?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy