Responsive UI mit ConstraintLayout erstellen Teil von Android Jetpack
Mit ConstraintLayout
können Sie große, komplexe Layouts mit einer flachen Ansichtshierarchie erstellen, also ohne verschachtelte Ansichtsgruppen. Es ähnelt RelativeLayout
insofern, als alle Ansichten entsprechend den Beziehungen zwischen gleichgeordneten Ansichten und dem übergeordneten Layout angeordnet werden. Sie ist aber flexibler als RelativeLayout
und einfacher mit dem Layout-Editor von Android Studio zu verwenden.
Die gesamte Leistung von ConstraintLayout
ist direkt über die visuellen Tools des Layout-Editors verfügbar, da die Layout API und der Layout-Editor speziell aufeinander abgestimmt sind. Sie können Ihr Layout vollständig mit ConstraintLayout
erstellen, indem Sie die XML-Datei ziehen, statt die XML-Datei zu bearbeiten.
Auf dieser Seite wird beschrieben, wie du mit ConstraintLayout
ein Layout in Android Studio 3.0 oder höher erstellst. Weitere Informationen zum Layout-Editor finden Sie unter UI mit dem Layout-Editor erstellen.
Eine Reihe von Layouts, die Sie mit ConstraintLayout
erstellen können, finden Sie im GitHub-Projekt zu Einschränkungslayoutbeispielen.
Einschränkungen – Übersicht
Um die Position einer Ansicht in ConstraintLayout
zu definieren, fügen Sie für die Ansicht mindestens eine horizontale und eine vertikale Einschränkung hinzu. Jede Einschränkung stellt eine Verbindung oder Ausrichtung zu einer anderen Ansicht, das übergeordnete Layout oder eine unsichtbare Richtlinie dar. Jede Einschränkung definiert die Position der Ansicht entlang der vertikalen oder horizontalen Achse. Jede Ansicht muss mindestens eine Einschränkung für jede Achse haben, häufig sind aber auch mehr erforderlich.
Wenn Sie eine Ansicht im Layout-Editor ablegen, bleibt sie dort, wo Sie sie verlassen, auch wenn es keine Einschränkungen gibt. Dies soll Ihnen lediglich die Bearbeitung erleichtern. Wenn es beim Ausführen des Layouts auf einem Gerät keine Einschränkungen gibt, wird sie an der Position [0,0] (der oberen linken Ecke) gezeichnet.
In Abbildung 1 sieht das Layout im Editor gut aus, aber es gibt keine vertikale Einschränkung für Ansicht C. Wenn mit diesem Layout auf einem Gerät gezeichnet wird, wird Ansicht C horizontal am linken und rechten Rand von Ansicht A ausgerichtet. Sie wird jedoch oben auf dem Bildschirm angezeigt, da sie keine vertikale Beschränkung hat.
![](https://developer.android.com/static/training/constraint-layout/images/constraint-fail_2x.png?authuser=6&hl=de)
Abbildung 1: Der Editor zeigt Ansicht C unter A, hat aber keine vertikale Einschränkung.
![](https://developer.android.com/static/training/constraint-layout/images/constraint-fail-fixed_2x.png?authuser=6&hl=de)
Abbildung 2: Ansicht C ist jetzt unter Ansicht A vertikal eingeschränkt.
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:
- Achten Sie darauf, dass das Repository
maven.google.com
in der Dateisettings.gradle
deklariert ist:Cool
dependencyResolutionManagement { ... repositories { google() } )
Kotlin
dependencyResolutionManagement { ... repositories { google() } }
- 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-alpha14" // To use constraintlayout in compose implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14" }
Kotlin
dependencies { implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha14") // To use constraintlayout in compose implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14") }
- 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
![](https://developer.android.com/static/training/constraint-layout/images/layout-editor-convert-to-constraint_2x.png?authuser=6&hl=de)
Abbildung 3: Das Menü zum Konvertieren eines Layouts in ConstraintLayout
.
So konvertieren Sie ein vorhandenes Layout in ein Einschränkungslayout:
- Öffnen Sie das Layout in Android Studio und klicken Sie unten im Editorfenster auf den Tab Design.
- 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:
- Klicken Sie im Fenster Project (Projekt) auf den Modulordner und wählen Sie File > New > XML > Layout XML aus.
- Geben Sie einen Namen für die Layoutdatei und "androidx.constraintlayout.widget.ConstraintLayout" als Root-Tag ein.
- Klicken Sie auf Fertig.
Einschränkung hinzufügen oder entfernen
So fügen Sie eine Einschränkung hinzu:
Video 1: Die linke Seite einer Ansicht wird auf die linke Seite der übergeordneten Ansicht beschränkt.
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.- Klicken Sie auf die Ansicht, um sie auszuwählen.
- 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.
Video 2: Einschränkung hinzufügen, die einer vorhandenen widerspricht
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
Fixieren Sie die Seite einer Ansicht auf den entsprechenden Rand des Layouts.
In Abbildung 7 ist die linke Seite der Ansicht mit dem linken Rand des übergeordneten Layouts verbunden. Mit dem Rand können Sie den Abstand von der Kante definieren.
![](https://developer.android.com/static/training/constraint-layout/images/parent-constraint_2x.png?authuser=6&hl=de)
Abbildung 7: Eine horizontale Einschränkung für das übergeordnete Element.
Auftragsposition
Definieren Sie die Darstellungsreihenfolge für zwei Ansichten, entweder vertikal oder horizontal.
In Abbildung 8 ist B immer auf rechts von A und C unter A eingeschränkt. Diese Einschränkungen implizieren jedoch keine Ausrichtung, sodass B sich weiterhin nach oben und unten bewegen kann.
![](https://developer.android.com/static/training/constraint-layout/images/position-constraint_2x.png?authuser=6&hl=de)
Abbildung 8: Eine horizontale und vertikale Einschränkung.
Koordinierung
Richtet den Rand einer Ansicht am selben Rand einer anderen Ansicht aus.
In Abbildung 9 ist die linke Seite von B an der linken Seite von A ausgerichtet. Wenn Sie die Ansichtsmitte ausrichten möchten, erstellen Sie eine Beschränkung auf beiden Seiten.
Sie können die Ausrichtung verschieben, indem Sie die Ansicht von der Beschränkung aus nach innen ziehen. Abbildung 10 zeigt beispielsweise B mit einer 24-dp-Offset-Ausrichtung. Der Versatz wird durch den Rand der eingeschränkten Ansicht definiert.
Sie können auch alle Ansichten auswählen, die ausgerichtet werden sollen, und dann in der Symbolleiste auf Ausrichten
klicken, um den Ausrichtungstyp auszuwählen.
![](https://developer.android.com/static/training/constraint-layout/images/alignment-constraint_2x.png?authuser=6&hl=de)
Abbildung 9: Eine horizontale Ausrichtungsbeschränkung.
![](https://developer.android.com/static/training/constraint-layout/images/alignment-constraint-offset_2x.png?authuser=6&hl=de)
Abbildung 10. Eine horizontale Offset-Ausrichtungsbeschränkung.
Referenzausrichtung
Richtet die Textbasis einer Ansicht an der Textbasis einer anderen Ansicht aus.
In Abbildung 11 ist die erste Zeile von B auf den Text in A ausgerichtet.
Klicken Sie zum Erstellen einer Referenzeinschränkung mit der rechten Maustaste auf die Textansicht, die Sie einschränken möchten, und klicken Sie dann auf Referenz anzeigen. Klicken Sie dann auf die Textbasis und ziehen Sie die Linie zu einer anderen Grundlinie.
![](https://developer.android.com/static/training/constraint-layout/images/baseline-constraint_2x.png?authuser=6&hl=de)
Abbildung 11. Eine Referenzausrichtungsbeschränkung.
Auf eine Richtlinie beschränken
Du kannst eine vertikale oder horizontale Führungslinie hinzufügen, mit der du die Ansichten einschränkst und die für die Nutzer deiner App unsichtbar ist. Sie können die Richtlinie innerhalb des Layouts entweder basierend auf dp-Einheiten oder einem Prozentsatz relativ zum Rand des Layouts positionieren.
Klicken Sie zum Erstellen einer Führungslinie in der Symbolleiste auf Richtlinien
und dann auf Vertikale Führungslinie hinzufügen oder Horizontale Richtlinie hinzufügen.
Ziehen Sie die gepunktete Linie, um sie neu zu positionieren, und klicken Sie auf den Kreis am Rand der Führungslinie, um den Messmodus zu wechseln.
![](https://developer.android.com/static/training/constraint-layout/images/guideline-constraint_2x.png?authuser=6&hl=de)
Abbildung 12. Eine auf eine Richtlinie beschränkte Ansicht.
Auf eine Barriere beschränken
Ähnlich wie eine Richtlinie ist eine Hürde eine unsichtbare Linie, auf die Sie Ansichten beschränken können. Eine Hürde definiert jedoch keine eigene Position. Stattdessen richtet sich die Position der Hürde nach der Position der darin enthaltenen Ansichten. Dies ist nützlich, wenn Sie eine Ansicht auf eine Gruppe von Ansichten und nicht auf eine bestimmte Ansicht beschränken möchten.
In Abbildung 13 ist beispielsweise Ansicht C auf der rechten Seite einer Barriere beschränkt. Die Hürde ist auf das „Ende“ (oder die rechte Seite, bei einem Layout von links nach rechts) von Ansicht A und Ansicht B gesetzt. Die Hürde bewegt sich je nachdem, ob sich die rechte Seite von Ansicht A oder von Ansicht B ganz rechts befindet.
So erstellen Sie eine Barriere:
- Klicken Sie in der Symbolleiste auf Richtlinien
und dann auf Vertikale Barriere hinzufügen oder Horizontale Hürde hinzufügen.
- Wählen Sie im Fenster Komponentenstruktur die gewünschten Ansichten innerhalb der Hürde aus und ziehen Sie sie in die Sperrkomponente.
- Wählen Sie in der Komponentenstruktur die Hürde aus, öffnen Sie das Fenster Attribute
und legen Sie barrierDirection fest.
Jetzt können Sie eine Einschränkung aus einer anderen Ansicht für die Hürde erstellen.
Sie können auch Ansichten innerhalb der Barriere einschränken. Auf diese Weise können Sie alle Ansichten in der Barriere aneinander ausrichten, auch wenn Sie nicht wissen, welche Ansicht die längste oder höchste ist.
Sie können auch eine Richtlinie in eine Hürde einfügen, um eine "Mindestposition" für die Hürde festzulegen.
![](https://developer.android.com/static/training/constraint-layout/images/barrier-constraint_2x.png?authuser=6&hl=de)
Abbildung 13. Ansicht C ist auf eine Barriere beschränkt, die sich je nach Position und Größe von Ansicht A und Ansicht B bewegt.
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".
Video 3: Einschränkungsverzerrung anpassen
Ansichtsgröße anpassen
![](https://developer.android.com/static/images/training/constraint-layout/constraint-layout-editor-attributes-2x.png?authuser=6&hl=de)
Abbildung 14: Bei der Auswahl einer Ansicht enthält das Fenster Attribute Steuerelemente für das Größenverhältnis 1, 2 zum Löschen, den 3-Modus für Höhe oder Breite, 4 Ränder und 5 Beschränkungsverzerrung. Sie können auch einzelne Einschränkungen im Layout-Editor hervorheben, indem Sie in der Einschränkungsliste 6 darauf klicken.
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
-
Ü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.
- layout_constraintWidth_min
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.
Größe als Verhältnis festlegen
![](https://developer.android.com/static/images/training/constraint-layout/constraint-layout-ratio-2x.png?authuser=6&hl=de)
Abbildung 15. Die Ansicht ist auf ein Seitenverhältnis von 16:9 festgelegt, wobei die Breite an einem Verhältnis der Höhe basiert.
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
![](https://developer.android.com/static/training/constraint-layout/images/constraint-chain_2x.png?authuser=6&hl=de)
Abbildung 17. Horizontale Kette mit zwei Ansichten.
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.
![](https://developer.android.com/static/training/constraint-layout/images/constraint-chain-styles_2x.png?authuser=6&hl=de)
Abbildung 18. Beispiele für jeden Kettenstil.
Für Ketten gibt es folgende Stile:
- Streuung: Die Ansichten sind gleichmäßig verteilt, nachdem die Ränder berücksichtigt wurden. Das ist die Standardeinstellung.
- 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.
- 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 Attributelayout_constraintHorizontal_weight
undlayout_constraintVertical_weight
eine Gewichtung zuweisen. Das funktioniert genauso wie beilayout_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. - 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):
- Wählen Sie alle Datenansichten aus, die in die Kette aufgenommen werden sollen.
- Klicken Sie mit der rechten Maustaste auf eine der Ansichten.
- Wählen Sie Ketten aus.
- Wählen Sie entweder Horizontal zentrieren oder Vertikal zentrieren aus.
Video 4: Horizontale Kette erstellen
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.