Responsive UI mit ConstraintLayout erstellen   Teil von Android Jetpack.

Auch wenn eine fehlende Einschränkung keinen Kompilierungsfehler verursacht, werden fehlende Einschränkungen im Layout-Editor in der Symbolleiste als Fehler angezeigt. Wenn Sie die Fehler und anderen Warnungen sehen möchten, klicken Sie auf Warnungen und Fehler anzeigen . Damit Sie keine Einschränkungen übersehen, fügt der Layout-Editor mit den Funktionen Automatische Verbindung und Einschränkungen ableiten automatisch Einschränkungen hinzu.

ConstraintLayout zu Ihrem Projekt hinzufügen

So verwenden Sie ConstraintLayout in Ihrem Projekt:

1. Das maven.google.com-Repository muss in der settings.gradle-Datei deklariert sein:

   Groovy

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

   Kotlin

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

2. Fügen Sie die Bibliothek als Abhängigkeit in der build.gradle-Datei auf Modulebene hinzu, wie im folgenden Beispiel gezeigt. Die aktuelle Version kann von der im Beispiel gezeigten abweichen.

   Cool

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

   Kotlin

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

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 wandeln Sie ein vorhandenes Layout in ein Layout mit Einschränkungen um:

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

Neues Layout erstellen

So erstellen Sie eine neue Datei für das Layout mit Einschränkungen:

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 "androidx.constraintlayout.widget.ConstraintLayout" als Root-Tag 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 einer ConstraintLayout hinzufügen, wird sie in einem Begrenzungsrahmen mit quadratischen Ziehpunkten zum Ändern der Größe in den Ecken und kreisförmigen Ziehpunkten für Einschränkungen an den Seiten angezeigt.

2. Klicken Sie auf die Ansicht, um sie auszuwählen.
3. Führen Sie einen der folgenden Schritte aus:
   • Klicken Sie auf einen Begrenzungsziehpunkt und ziehen Sie ihn zu einem verfügbaren Ankerpunkt. Dieser Punkt kann der Rand einer anderen Ansicht, der Rand des Layouts oder eine Hilfslinie sein. Wenn Sie den Anker für die Einschränkung ziehen, werden im Layout-Editor mögliche Verbindungsanker und blaue Overlays angezeigt.

   • Klicken Sie im Fenster Attribute im Bereich Layout auf eine der Schaltflächen Verbindung erstellen , wie in Abbildung 4 dargestellt.

     

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

Beim Erstellen der Einschränkung wird im Editor ein Standardabstand festgelegt, um die beiden Ansichten zu trennen.

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

• Jede Ansicht muss mindestens zwei Einschränkungen haben: eine horizontale und eine vertikale.
• Sie können nur zwischen einem Begrenzungspunkt und einem Ankerpunkt, die sich in derselben Ebene befinden, Einschränkungen erstellen. Eine vertikale Ebene (die linke und rechte Seite) einer Ansicht kann nur auf eine andere vertikale Ebene beschränkt werden und Baselines können nur auf andere Baselines beschränkt werden.
• Jeder Begrenzungs-Handle kann nur für eine Begrenzung verwendet werden. Sie können jedoch mehrere Begrenzungen von verschiedenen Ansichten zum selben Ankerpunkt erstellen.

Sie haben folgende Möglichkeiten, eine Einschränkung zu löschen:

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

• Klicken Sie mit gedrückter Strg-Taste (Befehlstaste unter macOS) auf einen Anker der Einschränkung. Die Einschränkung wird rot, um anzuzeigen, dass Sie sie durch Klicken löschen können (siehe Abbildung 5).

  

  Abbildung 5. Eine rote Einschränkung bedeutet, dass Sie darauf klicken können, um sie zu löschen.

• Klicken Sie im Bereich Layout des Fensters Attribute auf einen Anker für Einschränkungen (siehe Abbildung 6).

  

  Abbildung 6 Klicken Sie auf einen Anker, um ihn zu löschen.

Wenn Sie einer Ansicht entgegengesetzte Einschränkungen hinzufügen, werden die Beschränkungslinien wie eine Feder gewickelt, um die entgegengesetzten Kräfte anzugeben (siehe Video 2). Der Effekt ist am deutlichsten, wenn die Ansichtsgröße auf „fixiert“ oder „Inhalt umbrechen“ festgelegt ist. In diesem Fall wird die Ansicht zwischen den Einschränkungen zentriert. Wenn Sie stattdessen möchten, dass die Ansicht dehnt, um die Einschränkungen zu erfüllen, ändern Sie die Größe in "Übereinstimmungen mit Einschränkungen". Wenn Sie die aktuelle Größe beibehalten, die Ansicht aber so verschieben möchten, dass sie nicht zentriert ist, passen Sie die Einschränkungsvorgabe an.

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

Elternposition

Bestellposition

Koordinierung

Grundlinienausrichtung

Auf eine Leitlinie begrenzen

Auf eine Barriere beschränken

Einschränkungsverzerrung anpassen

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

Wenn Sie stattdessen möchten, dass die Ansicht entsprechend den Einschränkungen gedehnt wird, ändern Sie die Größe in "Übereinstimmungseinschränkungen".

Ansichtsgröße anpassen

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

Oben im Fenster Attribute befindet sich der Ansichtsinspektor mit Steuerelementen für verschiedene Layoutattribute, wie in Abbildung 14 dargestellt. Dies ist nur für Ansichten mit einem Einschränkungslayout verfügbar.

Sie können die Berechnung von Höhe und Breite ändern, indem Sie auf die Symbole klicken, die in Abbildung 14 mit der Anmerkung 3 gekennzeichnet sind. Diese Symbole stehen für den Größenmodus: Klicken Sie auf das Symbol, um zwischen den folgenden Einstellungen zu wechseln:

• Fest: Geben Sie im folgenden Textfeld eine bestimmte Größe an oder ändern Sie die Größe der Ansicht im Editor.
• Inhalt umbrechen: Die Ansicht wird nur so weit maximiert, wie es für die Inhalte erforderlich ist.
• layout_restrictedWidth

Legen Sie diesen Wert auf true fest, damit sich die horizontale Dimension ändern kann, um Einschränkungen zu berücksichtigen. Standardmäßig ist ein Widget, das auf WRAP_CONTENT festgelegt ist, nicht durch Einschränkungen begrenzt.

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

    Hier wird eine dp-Dimension für die Mindestbreite der Ansicht verwendet.

  • layout_constraintWidth_max

    Hierfür wird die Dimension dp für die maximale Breite der Ansicht benötigt.

  Wenn die angegebene Dimension jedoch nur eine Einschränkung hat, wird die Ansicht so erweitert, dass sie den Inhalt enthält. 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 Größe der Ansicht auf ein Seitenverhältnis wie 16:9 festlegen, wenn mindestens eine der Ansichtsabmessungen auf „Einschränkungen einhalten“ (0dp) gesetzt ist. Klicken Sie zum Aktivieren des Seitenverhältnisses auf Einschränkungen für Seitenverhältnis ein-/ausschalten (Beschreibung 1 in Abbildung 14) und geben Sie das Seitenverhältnis width:height in das angezeigte Eingabefeld ein.

Wenn sowohl für die Breite als auch für die Höhe „Einschränkungen einhalten“ festgelegt ist, können Sie auf Seitenverhältnisbeschränkung umschalten klicken, um auszuwählen, welche Dimension auf einem Verhältnis der anderen basiert. Im Ansichtsprüffeld wird angezeigt, welche Dimension als Verhältnis festgelegt ist. Dazu werden die entsprechenden Ränder mit einer durchgezogenen Linie verbunden.

Wenn Sie beispielsweise beide Seiten auf „Einschränkungen angleichen“ festlegen, klicken Sie zweimal auf Seitenverhältnis einschränken, 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).

Ränder der Ansicht anpassen

Wenn die Ansichten gleichmäßig verteilt sein sollen, klicken Sie in der Symbolleiste auf Rahmen , um den Standardrand für jede Ansicht auszuwählen, die Sie dem Layout hinzufügen. Alle Änderungen, die Sie am Standardrand vornehmen, gelten nur für die Ansichten, die Sie danach hinzufügen.

Sie können den Rand für jede Ansicht im Fenster Attributes steuern, indem Sie auf die Zahl in der Zeile klicken, die die jeweilige Einschränkung darstellt. In Abbildung 14 ist in der Anmerkung 4 zu sehen, dass der untere Rand auf 16 dp festgelegt ist.

Abbildung 16 Klicken Sie in der Symbolleiste auf die Schaltfläche Rand.

Alle Ränder, die vom Tool angeboten werden, sind Vielfache von 8 dp, damit Ihre Ansichten den Empfehlungen für das quadratische Raster von 8 dp in Material Design entsprechen.

Lineare Gruppen mit einer Kette steuern

Eine Kette ist eine Gruppe von Ansichten, die über bidirektionale Positionsbeschrä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 sind gleichmäßig verteilt, nachdem die Ränder berücksichtigt wurden. Das ist die Standardeinstellung.
2. Im Inneren verteilen:Die erste und die letzte Ansicht sind an den Einschränkungen an jedem Ende der Kette befestigt und die restlichen Ansichten sind gleichmäßig verteilt.
3. Gewichtet:Wenn die Kette auf ausbreiten oder innerhalb ausbreiten gesetzt ist, können Sie den verbleibenden Bereich füllen, indem Sie für eine oder mehrere Ansichten „Anpassung an die Einschränkungen“ (0dp) festlegen. Standardmäßig wird der Bereich gleichmäßig auf alle Ansichten verteilt, die auf „Anpassung an die Einschränkungen“ gesetzt sind. Sie können jedoch mit den Attributen layout_constraintHorizontal_weight und layout_constraintVertical_weight jeder Ansicht eine Gewichtung zuweisen. Das funktioniert genauso wie layout_weight in einem linearen Layout: Die Ansicht mit dem höchsten Gewichtswert erhält den größten Bereich und Ansichten mit demselben Gewicht erhalten denselben Bereich.
4. Komprimiert:Die Ansichten werden nach Berücksichtigung der Ränder komprimiert. Sie können die Neigung der gesamten Kette nach links oder rechts oder nach oben oder unten anpassen, indem Sie die Neigung der Ansicht „Kopf“ der Kette ändern.

Die „Ansichtsspitze“ der Kette – die linkeste Ansicht in einer horizontalen Kette (bei einem Layout von links nach rechts) und die oberste Ansicht in einer vertikalen Kette – definiert den Stil der Kette in XML. Sie können jedoch zwischen auseinander, innen ausgebreitet und gepackt wechseln, indem Sie eine beliebige Ansicht in der Kette auswählen und auf die Kettenschaltfläche  klicken, die unter der Ansicht angezeigt wird.

So erstellen Sie eine Kette (siehe Video 4):

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.

Beachten Sie bei der Verwendung von Ketten Folgendes:

• Eine Ansicht kann sowohl zu einer horizontalen als auch zu einer vertikalen Kette gehören, sodass Sie flexible Rasterlayouts erstellen können.
• Eine Kette funktioniert nur dann richtig, wenn jedes Ende der Kette an ein anderes Objekt auf derselben Achse gebunden ist, wie in Abbildung 14 dargestellt.
• Die Ausrichtung einer Kette ist zwar vertikal oder horizontal, die Ansichten werden dadurch aber nicht in diese Richtung ausgerichtet. Um die richtige Position für jede Ansicht in der Kette zu erreichen, müssen Sie weitere Einschränkungen hinzufügen, z. B. Ausrichtungseinschränkungen.

Einschränkungen automatisch erstellen

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

Mit Einschränkungen ableiten wird das Layout gescannt, um die effektivsten Einschränkungen für alle Ansichten zu ermitteln. Die Ansichten werden auf ihre aktuellen Positionen beschränkt, bieten aber gleichzeitig Flexibilität. Möglicherweise müssen Sie Anpassungen vornehmen, damit das Layout für verschiedene Bildschirmgrößen und -ausrichtungen wie gewünscht reagiert.

Automatische Verbindung mit Eltern ist eine separate Funktion, die Sie aktivieren können. Wenn diese Funktion aktiviert ist und Sie einem übergeordneten Layout untergeordnete Ansichten hinzufügen, werden automatisch zwei oder mehr Einschränkungen für jede Ansicht erstellt, wenn Sie sie dem Layout hinzufügen. Dies gilt jedoch nur, wenn es sinnvoll ist, die Ansicht auf das übergeordnete Layout zu beschränken. Die automatische Verbindung führt nicht zu Einschränkungen für andere Ansichten im Layout.

Die automatische Verbindung ist standardmäßig deaktiviert. Klicken Sie in der Symbolleiste des Layout-Editors auf Automatische Verbindung zum übergeordneten Element aktivieren .

Keyframe-Animationen

Änderungen an der Größe und Position von Elementen lassen sich in einem ConstraintLayout mit ConstraintSet und TransitionManager animieren.

Ein ConstraintSet ist ein einfaches Objekt, das die Einschränkungen, Ränder und Abstände aller untergeordneten Elemente innerhalb eines ConstraintLayout darstellt. Wenn Sie eine ConstraintSet auf eine angezeigte ConstraintLayout anwenden, werden die Einschränkungen aller untergeordneten Elemente im Layout 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 eine ConstraintSet aus der zweiten Keyframe-Datei laden und auf die angezeigte ConstraintLayout anwenden.

Im folgenden Codebeispiel wird gezeigt, wie eine einzelne Schaltfläche an das Ende des Bildschirms animiert wird.

// 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 Demo-App Sunflower verwendet.