Responsive UI mit ConstraintLayout erstellen Teil von Android Jetpack

Obwohl eine fehlende Einschränkung keinen Kompilierungsfehler verursacht, zeigt der Layouteditor fehlende Einschränkungen in der Symbolleiste als Fehler an. Klicken Sie auf Show Warnings and errors (Warnungen und Fehler anzeigen), um die Fehler und andere Warnungen anzusehen. Damit Sie fehlende Einschränkungen vermeiden, werden im Layout-Editor mit der Funktion Einschränkungen automatisch verbinden und ableiten automatisch Einschränkungen hinzugefügt.

ConstraintLayout zu Ihrem Projekt hinzufügen

Wenn Sie ConstraintLayout in Ihrem Projekt verwenden möchten, gehen Sie so vor:

1. Achten Sie darauf, dass das Repository maven.google.com in der Datei settings.gradle deklariert ist:

   Cool

       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 Darstellung im Beispiel 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 Sync Project with Gradle Files.

Jetzt können Sie Ihr Layout mit ConstraintLayout erstellen.

Layout konvertieren

So konvertieren Sie ein vorhandenes Layout in ein Einschränkungslayout:

1. Öffnen Sie das 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 starten Sie eine neue Einschränkungslayoutdatei:

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 einem ConstraintLayout hinzufügen, wird sie in einem Begrenzungsrahmen mit quadratischen Ziehpunkten an jeder Ecke und kreisförmigen Ziehpunkten an jeder Seite 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 zu einem verfügbaren Ankerpunkt. Dieser Punkt kann der Rand einer anderen Ansicht, der Rand des Layouts oder eine Orientierungshilfe 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 , wie in Abbildung 4 gezeigt.

     

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

Beim Erstellen der Einschränkung wird ihr vom Editor ein Standardrand zugewiesen, um die beiden Ansichten zu trennen.

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 lassen sich nur zwischen einem Einschränkungsziehpunkt und einem Ankerpunkt erstellen, die sich auf derselben Ebene befinden. Eine vertikale Ebene – die linke und rechte Seite – einer Ansicht kann nur auf eine andere vertikale Ebene beschränkt werden und Referenzen können nur auf andere Referenzen beschränkt werden.
• Jeder Einschränkungs-Ziehpunkt kann nur für eine Einschränkung verwendet werden. Sie können aber mehrere Einschränkungen aus verschiedenen Ansichten für denselben 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 bei gedrückter Strg-Taste (Mac: Befehlstaste) auf einen Einschränkungsanker. Die Einschränkung wird rot, um anzuzeigen, dass Sie zum Löschen klicken können, wie in Abbildung 5 dargestellt.

  

  Abbildung 5: Eine rote Einschränkung zeigt an, dass Sie zum Löschen klicken können.

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

  

  Abbildung 6: Klicken Sie auf einen Einschränkungsanker, 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 tritt am deutlichsten auf, wenn die Ansichtsgröße auf "fest" oder "Inhalt umbrechen" gesetzt ist, sodass die Ansicht zwischen den Einschränkungen zentriert wird. 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änkungsgewichtung an.

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

Übergeordnete Position

Auftragsposition

Koordinierung

Referenzausrichtung

Auf eine Richtlinie beschränken

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 Verzerrung anpassen, indem Sie den Schieberegler im Fenster Attributes (Attribute) oder die Ansicht ziehen (siehe Video 3).

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

Mit den Eckziehpunkten können Sie die Größe einer Ansicht ändern. Dadurch wird jedoch die Größe 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 das Fenster Attributes auf der rechten Seite des Editors.

Oben im Fenster Attributes (Attribute) befindet sich der Ansichtsinspektor, der Steuerelemente für verschiedene Layoutattribute enthält (siehe Abbildung 14). Dies ist nur für Ansichten mit einem Einschränkungslayout verfügbar.

Sie können die Berechnungsmethode für Höhe und Breite ändern, indem Sie auf die Symbole mit Zusatzinformationen 3 in Abbildung 14 klicken. 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 im folgenden Textfeld an oder ändern Sie die Größe der Ansicht im Editor.
• Umfließen von Inhalt: 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 sich gemäß den Einschränkungen ändern kann. Standardmäßig ist ein Widget, das auf WRAP_CONTENT gesetzt ist, nicht durch Einschränkungen eingeschränkt.

• Ü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 wirksam, wenn Sie für die Ansichtsbreite „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 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 auf den Inhalt erweitert. 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. Klicken Sie zum Aktivieren des Verhältnisses auf Seitenverhältnis- verhältnis umschalten (1 in Abbildung 14) und geben Sie das Verhältnis width:height in die angezeigte Eingabe ein.

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

Wenn Sie beispielsweise für beide Seiten „Einschränkungen abgleichen“ festlegen, klicken Sie zweimal auf Seitenverhältnisbeschränkung umschalten, um die Breite als Verhältnis der 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

Wenn die Ansichten gleichmäßig verteilt sein sollen, klicken Sie in der Symbolleiste auf Rand , 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 steuern, indem Sie auf die Zahl in der Zeile klicken, die die jeweilige Einschränkung darstellt. In Abbildung 14 zeigt die Zusatzinformation 4, dass der untere Rand auf 16 dp festgelegt ist.

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

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

Lineare Gruppen mit einer Kette steuern

Eine Kette ist eine Gruppe von Ansichten, die mithilfe von bidirektionalen Positionsbeschränkungen miteinander verbunden sind. Die Ansichten in einer Kette können entweder vertikal oder horizontal verteilt werden.

Für Ketten gibt es folgende Stile:

1. Streuung: Die Ansichten sind gleichmäßig verteilt, nachdem die Ränder berücksichtigt wurden. Das ist die Standardeinstellung.
2. Verteilen innerhalb der Kette: Die erste und letzte Ansicht werden an die Einschränkungen an jedem Ende der Kette angehängt, die restlichen Ansichten sind gleichmäßig verteilt.
3. Gewichtet: Wenn für die Kette die Option Verteilen oder Verteilen innerhalb festgelegt ist, können Sie den verbleibenden Platz füllen, indem Sie für eine oder mehrere Ansichten „Einschränkungen anpassen“ (0dp) festlegen. Standardmäßig wird der Bereich gleichmäßig auf alle Ansichten verteilt, für die „Übereinstimmungseinschränkungen“ festgelegt ist. Sie können aber jeder Ansicht mithilfe der Attribute layout_constraintHorizontal_weight und layout_constraintVertical_weight eine Gewichtung zuweisen. Das funktioniert genauso wie bei layout_weight bei einem linearen Layout: Die Ansicht mit der höchsten Gewichtung erhält den meisten Platz und Ansichten mit derselben Gewichtung erhalten den gleichen Platz.
4. Packet:Die Ansichten werden gepackt, nachdem die Ränder berücksichtigt wurden. Sie können die Verzerrung der gesamten Kette – nach links oder rechts oder nach oben oder unten – anpassen, indem Sie die Verzerrung nach „Kopf“ der Kette ändern.

Die Kopfansicht der Kette – die Ansicht ganz links in einer horizontalen Kette (bei einem rechtsläufigen Layout) und die oberste Ansicht in einer vertikalen Kette – definiert den Stil der Kette in XML. Sie können jedoch zwischen Verteilt, Innen verteilen und Verpackt wechseln, indem Sie eine beliebige Ansicht in der Kette auswählen und auf die Kettenschaltfläche unter der Ansicht klicken.

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 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 eine Kette vertikal oder horizontal ausgerichtet ist, werden die Ansichten nicht in diese Richtung ausgerichtet. 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 jeder Ansicht beim Platzieren im Layout Einschränkungen hinzuzufügen, können Sie im Layouteditor jede Ansicht 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 den effektivsten Satz von Einschränkungen für alle Ansichten zu ermitteln. Die Ansichten bleiben auf ihre aktuellen Positionen beschränkt und bieten gleichzeitig Flexibilität. Möglicherweise müssen Sie Anpassungen vornehmen, damit das Layout wie gewünscht an verschiedene Bildschirmgrößen und -ausrichtungen angepasst wird.

Automatische Verbindung mit Eltern ist eine separate Funktion, die Sie aktivieren können. Wenn sie aktiviert ist und Sie 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. Dies gilt jedoch nur dann, wenn es angebracht ist, die Ansicht auf das übergeordnete Layout zu beschränken. Die automatische Verbindung schränkt andere Ansichten im Layout nicht ein.

Die automatische Verbindung ist standardmäßig deaktiviert. Klicken Sie dazu 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 einer ConstraintLayout darstellt. Wenn Sie ein ConstraintSet auf eine angezeigte ConstraintLayout anwenden, aktualisiert das Layout die Einschränkungen aller untergeordneten Elemente.

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. Dann 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>

Zusätzliche Ressourcen

ConstraintLayout wird in der Sunflower-Demo-App verwendet.