Erstellen Sie eine responsive UI mit ConstraintLayout Teil von Android Jetpack.

Obwohl eine fehlende Einschränkung keinen Kompilierungsfehler verursacht, zeigt der Layout-Editor fehlende Einschränkungen in der Symbolleiste als Fehler an. Um die Fehler und andere Warnungen anzusehen, klicken Sie auf Warnungen und Fehler anzeigen . Damit Ihnen keine Einschränkungen entgehen, fügt der Layout-Editor mit den Funktionen Automatische Verbindung und Ableitung von Einschränkungen automatisch Einschränkungen hinzu.

ConstraintLayout zu einem Projekt hinzufügen

So verwenden Sie ConstraintLayout in Ihrem Projekt:

1. In der Datei settings.gradle muss das Repository maven.google.com deklariert sein:

   Groovig

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       )
       

   Kotlin

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       }
       

2. Fügen Sie die Bibliothek als Abhängigkeit in die Datei build.gradle auf Modulebene ein, wie im folgenden Beispiel gezeigt. Die neueste Version kann sich von der im Beispiel gezeigten unterscheiden.

   Groovig

   dependencies {
       implementation "androidx.constraintlayout:constraintlayout:2.2.0-alpha13"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha13"
   }
   

   Kotlin

   dependencies {
       implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha13")
       // To use constraintlayout in compose
       implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha13")
   }
   

3. Klicken Sie in der Symbolleiste oder in der Synchronisierungsbenachrichtigung auf Projekt mit Gradle-Dateien synchronisieren.

Jetzt können Sie Ihr Layout mit ConstraintLayout erstellen.

Layout konvertieren

So konvertieren Sie ein vorhandenes Layout in ein eingeschränktes Layout:

1. Öffnen Sie Ihr Layout in Android Studio und klicken Sie unten im Editorfenster auf den Tab Design.
2. Klicken Sie im Fenster Component Tree mit der rechten Maustaste auf das Layout und klicken Sie auf Convert LinearLayout to ConstraintLayout.

Neues Layout erstellen

So erstellen Sie eine neue Einschränkungs-Layoutdatei:

1. Klicken Sie im Fenster Project (Projekt) auf den Modulordner und wählen Sie File > New > XML > Layout XML aus.
2. Geben Sie einen Namen für die Layoutdatei und als Root-Tag „androidx.constraintlayout.widget.ConstraintLayout“ ein.
3. Klicken Sie auf Fertig.

Einschränkung hinzufügen oder entfernen

So fügen Sie eine Einschränkung hinzu:

1. Ziehen Sie eine Ansicht aus dem Fenster Palette in den Editor.

   Wenn Sie eine Ansicht in einem ConstraintLayout hinzufügen, wird sie in einem Begrenzungsrahmen mit quadratischen Ziehpunkten zur Anpassung an jeder Ecke und kreisförmigen Ziehpunkten angezeigt.

2. Klicken Sie auf die Ansicht, um sie auszuwählen.
3. Sie haben folgende Möglichkeiten:
   • Klicken Sie auf einen Ziehpunkt und ziehen Sie ihn auf einen verfügbaren Ankerpunkt. Dieser Punkt kann der Rand einer anderen Perspektive, der Rand des Layouts oder eine Richtlinie sein. Wenn Sie den Ziehpunkt für die Einschränkung ziehen, werden im Layout-Editor potenzielle Verbindungsanker und blaue Overlays angezeigt.

   • Klicken Sie im Bereich Layout des Fensters Attribute auf eine der Schaltflächen Verbindung erstellen (siehe Abbildung 4).

     

     Abbildung 4: Im Bereich Layout des Fensters Attribute können Sie Verbindungen erstellen.

Wenn die Einschränkung erstellt wird, weist der Editor ihr einen Standardmarge zur Trennung der beiden Ansichten zu.

Beachten Sie beim Erstellen von Einschränkungen die folgenden Regeln:

• Für jede Ansicht müssen mindestens zwei Einschränkungen gelten: eine horizontale und eine vertikale.
• Einschränkungen können nur zwischen einem Einschränkungs-Handle und einem Ankerpunkt erstellt werden, die sich auf derselben Ebene befinden. Eine vertikale Ebene – die linke und die rechte Seite – einer Ansicht kann nur auf eine andere vertikale Ebene beschränkt werden und Basislinien können nur auf andere Referenzlinien beschränkt werden.
• Jeder Einschränkungs-Handle kann nur für eine Einschränkung verwendet werden. Sie können jedoch mehrere Einschränkungen aus verschiedenen Ansichten zum selben Ankerpunkt erstellen.

Sie können eine Einschränkung mit einem der folgenden Schritte löschen:

• Klicken Sie auf eine Einschränkung, um sie auszuwählen, und dann auf Löschen.

• Klicken Sie bei gedrückter Strg-Taste (Befehlstaste auf macOS) auf einen Einschränkungsanker. Die Einschränkung wird rot, um anzuzeigen, dass Sie sie per Klick löschen können (siehe Abbildung 5).

  

  Abbildung 5: Eine rote Einschränkung bedeutet, dass Sie sie per Klick löschen können.

• Klicken Sie im Abschnitt Layout des Fensters Attribute auf einen Einschränkungsanker, wie in Abbildung 6 dargestellt.

  

  Abbildung 6: Klicken Sie auf einen Einschränkungsanker, um ihn zu löschen.

Wenn Sie einer Ansicht entgegengesetzte Beschränkungen hinzufügen, werden die Fixierungslinien wie eine Feder gewunden, um die entgegengesetzten Kräfte anzuzeigen (siehe Video 2). Dies wird am sichtbarsten, wenn die Ansichtsgröße auf „festgelegt“ oder „Inhalt umbrechen“ festgelegt ist. In diesem Fall befindet sich die Ansicht zwischen den Einschränkungen. Wenn die Größe der Ansicht stattdessen erweitert werden soll, um die Einschränkungen zu erfüllen, ändern Sie die Größe in „Übereinstimmung mit Einschränkungen“. Wenn Sie die aktuelle Größe beibehalten, aber die Ansicht so verschieben möchten, dass sie nicht zentriert wird, passen Sie die Einschränkungsverzerrung an.

Mit Einschränkungen können Sie verschiedene Arten von Layoutverhalten erreichen, wie in den folgenden Abschnitten beschrieben.

Übergeordnete Position

Bestellposition

Koordinierung

Baseline-Ausrichtung

Auf eine Richtlinie beschränken

Auf eine Barriere beschränken

Einschränkungsgewichtung anpassen

Wenn Sie eine Einschränkung auf beiden Seiten einer Ansicht hinzufügen und die Ansichtsgröße für dieselbe Dimension entweder „fest“ oder „Inhalt umbrechen“ ist, wird die Ansicht mit einer Verzerrung von standardmäßig 50% zwischen den beiden Einschränkungen zentriert. Sie können die Verzerrung anpassen, indem Sie den Schieberegler im Fenster Attributes (Attribute) oder die Ansicht ziehen, wie in Video 3 gezeigt.

Wenn die Größe der Ansicht stattdessen erweitert werden soll, um die Einschränkungen zu erfüllen, ändern Sie die Größe in „Übereinstimmung mit Einschränkungen“.

Ansichtsgröße anpassen

Mithilfe der Ziehpunkte an den Ecken können Sie die Größe einer Ansicht ändern. Dadurch wird die Größe jedoch hartcodiert – die Größe der Ansicht wird nicht an unterschiedliche Inhalte oder Bildschirmgrößen angepasst. Wenn Sie einen anderen Größenmodus auswählen möchten, klicken Sie auf eine Ansicht und öffnen Sie auf der rechten Seite des Editors das Fenster Attribute .

Oben im Fenster Attributes (Attribute) befindet sich das Ansichts-Inspector, das Steuerelemente für mehrere Layout-Attribute enthält (siehe Abbildung 14). Dies ist nur für Ansichten in einem Einschränkungslayout verfügbar.

Sie können die Berechnungsmethode für Höhe und Breite ändern, indem Sie auf die Symbole klicken, die in Abbildung 14 mit der Zusatzinformation 3 gekennzeichnet sind. Diese Symbole stellen den Größenmodus wie folgt dar. Klicken Sie auf das Symbol, um zwischen diesen Einstellungen zu wechseln:

• Fest: Geben Sie eine bestimmte Dimension in das folgende Textfeld an oder passen Sie die Größe der Ansicht im Editor an.
• Inhalt zusammenbrechen: Die Ansicht wird nur so weit maximiert, wie es für den Inhalt erforderlich ist.
• layout_RestrictedWidth

Legen Sie dafür true fest, damit die horizontale Dimension entsprechend den Einschränkungen geändert wird. Standardmäßig ist ein auf WRAP_CONTENT festgelegtes Widget nicht durch Einschränkungen eingeschränkt.

• Übereinstimmungseinschränkungen: Die Ansicht wird so weit wie möglich erweitert, um die Einschränkungen auf jeder Seite zu erfüllen (unter Berücksichtigung der Ränder der Ansicht). Sie können dieses Verhalten jedoch mit den folgenden Attributen und Werten ändern. Diese Attribute werden nur wirksam, wenn Sie die Ansichtsbreite auf „Einschränkungen entsprechen“ festlegen:
  • layout_constraintWidth_min

    Hierfür wird eine dp-Dimension für die Mindestbreite der Ansicht benötigt.

  • layout_constraintWidth_max.

    Hierfür wird eine dp-Dimension für die maximale Breite der Ansicht verwendet.

  Hat die angegebene Dimension jedoch nur eine Einschränkung, wird die Ansicht an den Inhalt angepasst. Wenn Sie diesen Modus für die Höhe oder Breite verwenden, können Sie auch ein Größenverhältnis festlegen.

Größe als Verhältnis festlegen

Sie können die Ansichtsgröße auf ein Verhältnis wie 16:9 festlegen, wenn mindestens eine der Ansichtsdimensionen auf „Übereinstimmungseinschränkungen“ (0dp) festgelegt ist. Um das Verhältnis zu aktivieren, klicken Sie auf Seitenverhältniseinschränkung umschalten (Zusatzinformation 1 in Abbildung 14) und geben Sie in die angezeigte Eingabe das Verhältnis width:height ein.

Wenn sowohl Breite als auch Höhe auf „Übereinstimmung mit Einschränkungen“ festgelegt sind, können Sie auf Seitenverhältniseinschränkung umschalten klicken, um auszuwählen, welche Dimension auf dem Verhältnis der anderen basiert. Im Ansichts-Inspector wird angezeigt, welche Dimension als Verhältnis festgelegt ist, indem die entsprechenden Kanten mit einer durchgezogenen Linie verbunden werden.

Wenn Sie beispielsweise beide Seiten auf "Einschränkungen entsprechen" festlegen, klicken Sie zweimal auf Seitenverhältniseinschränkung umschalten, um die Breite als Verhältnis zur Höhe festzulegen. Die gesamte Größe wird durch die Höhe der Ansicht bestimmt, die beliebig definiert werden kann (siehe Abbildung 15).

Ansichtsränder anpassen

Klicken Sie für gleichmäßige Abstände in der Symbolleiste auf Marge , um den Standardrand für jede Ansicht auszuwählen, die Sie dem Layout hinzufügen. Jede Änderung, die Sie am Standardrand vornehmen, gilt nur für die Ansichten, die Sie ab diesem Zeitpunkt hinzufügen.

Sie können den Rand für jede Ansicht im Fenster Attributes (Attribute) steuern. Klicken Sie dazu auf die Zahl in der Zeile, die die jeweilige Einschränkung darstellt. In Abbildung 14 zeigt die Zusatzinformation 4, dass der untere Rand auf 16 dp festgelegt ist.

Abbildung 16: Die Schaltfläche Marge in der Symbolleiste.

Alle vom Tool angebotenen Ränder sind Faktoren von 8 dp, damit Ihre Ansichten den Material Design-Empfehlungen für quadratische 8 dp-Raster entsprechen.

Lineare Gruppen mit einer Kette steuern

Eine Kette ist eine Gruppe von Ansichten, die durch bidirektionale Positionseinschränkungen miteinander verknüpft sind. Die Ansichten innerhalb einer Kette können entweder vertikal oder horizontal verteilt werden.

Ketten können auf eine der folgenden Arten gestaltet werden:

1. Streuung: Die Ansichten werden gleichmäßig verteilt, nachdem die Margen berücksichtigt wurden. Das ist die Standardeinstellung.
2. Streuung innerhalb der Kette:Die erste und letzte Ansicht werden an die Einschränkungen an jedem Ende der Kette angehängt. Der Rest ist gleichmäßig verteilt.
3. Gewichtet: Wenn die Kette auf Streuung oder Innenraum verteilt festgelegt ist, können Sie den verbleibenden Bereich ausfüllen, indem Sie eine oder mehrere Ansichten auf „Übereinstimmungseinschränkungen“ (0dp) setzen. Standardmäßig wird der Bereich gleichmäßig auf die einzelnen Ansichten verteilt, für die „Einschränkungen entsprechen“ festgelegt ist. Sie können jedoch mithilfe der Attribute layout_constraintHorizontal_weight und layout_constraintVertical_weight jeder Ansicht eine Gewichtung von Wichtigkeit zuweisen. Das funktioniert auf die gleiche Weise wie bei layout_weight in einem linearen Layout: Die Ansicht mit der höchsten Gewichtung erhält den größten Platz und Ansichten mit derselben Gewichtung erhalten den gleichen Platz.
4. Packt: Die Ansichten werden nach Berücksichtigung der Ränder zusammengefügt. Sie können die Verzerrung der gesamten Kette (nach links oder rechts oder nach oben oder unten) anpassen, indem Sie die Verzerrung der Kette nach oben oder unten ändern.

Die „Kopfansicht“ der Kette – die Ansicht ganz links in einer horizontalen Kette (in einer horizontalen Kette von links nach rechts) und die oberste Ansicht in einer vertikalen Kette – definiert den Stil der Kette in XML. Sie können jedoch zwischen Verteilen, Innen verteilen und Verpacken wechseln, indem Sie eine beliebige Ansicht in der Kette auswählen und unter der Ansicht auf die Verkettungsschaltfläche klicken.

Um eine Kette zu erstellen, gehen Sie wie in Video 4 gezeigt vor:

1. Wählen Sie alle Datenansichten aus, die in die Kette aufgenommen werden sollen.
2. Klicken Sie mit der rechten Maustaste auf eine der Ansichten.
3. Wählen Sie Ketten aus.
4. Wählen Sie entweder Horizontal zentrieren oder Vertikal zentrieren aus.

Bei der Verwendung von Ketten sind folgende Punkte zu beachten:

• Eine Ansicht kann sowohl Teil einer horizontalen als auch einer vertikalen Kette sein, sodass Sie flexible Rasterlayouts erstellen können.
• Eine Kette funktioniert nur dann richtig, wenn jedes Ende der Kette an einem anderen Objekt auf derselben Achse fixiert ist (siehe Abbildung 14).
• Obwohl die Ausrichtung einer Kette vertikal oder horizontal ist, werden die Ansichten nicht in dieser Richtung ausgerichtet, wenn Sie eine Kette verwenden. Fügen Sie weitere Einschränkungen wie Ausrichtungseinschränkungen ein, um die richtige Position für jede Ansicht in der Kette zu erreichen.

Einschränkungen automatisch erstellen

Anstatt Einschränkungen für jede Ansicht beim Platzieren im Layout hinzuzufügen, können Sie jede Ansicht an die gewünschten Positionen im Layout-Editor verschieben und dann auf Einschränkungen ableiten klicken, um automatisch Einschränkungen zu erstellen.

Einschränkungen ableiten scannt das Layout, um den effektivsten Satz von Einschränkungen für alle Ansichten zu ermitteln. Sie schränkt die Ansichten auf ihre aktuellen Positionen ein und bietet gleichzeitig Flexibilität. Möglicherweise müssen Sie Anpassungen vornehmen, damit das Layout an unterschiedliche Bildschirmgrößen und -ausrichtungen angepasst wird.

Automatische Verbindung mit übergeordneter Ressource ist eine separate Funktion, die Sie aktivieren können. Wenn Sie diese Funktion aktivieren und einer übergeordneten Ansicht untergeordnete Ansichten hinzufügen, werden automatisch zwei oder mehr Einschränkungen für jede Ansicht erstellt, wenn Sie sie dem Layout hinzufügen – allerdings nur, wenn es angemessen ist, die Ansicht auf das übergeordnete Layout zu beschränken. Durch die automatische Verbindung werden keine Einschränkungen für andere Ansichten im Layout erstellt.

Die automatische Verbindung ist standardmäßig deaktiviert. Klicken Sie dazu in der Symbolleiste des Layout-Editors auf Automatische Verbindung mit übergeordneter Ressource aktivieren .

Keyframe-Animationen

Innerhalb einer ConstraintLayout können Sie Änderungen an Größe und Position von Elementen mithilfe von ConstraintSet und TransitionManager animieren.

Ein ConstraintSet ist ein einfaches Objekt, das die Einschränkungen, Ränder und den Abstand aller untergeordneten Elemente innerhalb einer ConstraintLayout darstellt. Wenn Sie ein ConstraintSet auf eine angezeigte ConstraintLayout anwenden, werden durch das Layout die Einschränkungen aller untergeordneten Elemente aktualisiert.

Wenn Sie eine Animation mit ConstraintSet erstellen möchten, geben Sie zwei Layoutdateien an, die als Start- und End-Keyframes für die Animation dienen. Anschließend können Sie ein ConstraintSet aus der zweiten Keyframe-Datei laden und auf das angezeigte ConstraintLayout anwenden.

Das folgende Codebeispiel zeigt, wie Sie das Verschieben einer einzelnen Schaltfläche an den unteren Bildschirmrand animieren.

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}

// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Weitere Informationen

ConstraintLayout wird in der Sunflower-Demo-App verwendet.