Erste Schritte mit ConstraintLayout in Jetpack Compose | von Shrey Sindher | Januar 2022
Jetpack Compose ist ein moderner Satz von Tools für Android zum Erstellen einer nativen Benutzeroberfläche. Vereinfacht und beschleunigt die Entwicklung der Benutzeroberfläche auf Android. Beleben Sie Ihre App schnell mit weniger Code, leistungsstarken Tools und intuitiven Kotlin-APIs.
Ich habe kürzlich Jetpack Compose gelernt und fast sofort den Wahnsinn dahinter erkannt. Mit Compose können Sie im Vergleich zur Verwendung von Android View mit weniger Code mehr erreichen: Schaltflächen, Listen oder Animationen – was auch immer Sie tun müssen, Sie müssen jetzt weniger Code schreiben.
Ich habe ConstraintLayout oft in meinen Projekten verwendet. Als ich zu Compose wechselte, hatte ich natürlich das Bedürfnis, es auch hier zu erkunden. Hier sind also die Entwürfe, die wir umsetzen werden:
In diesem Leitfaden behandeln wir Folgendes zu ConstraintLayout:
- Grundlagen
- Richtlinien
- Barrieren
- Ketten
- Öffnen Sie Android Studio und klicken Sie auf Neues Projekt.
- Wählen Leeren Sie die Montageaktivität. Klicke auf Nächste.
3. Geben Sie Ihrem Projekt den passenden Namen und klicken Sie auf Beenden.
4. Wenn das Projekt vollständig geladen ist, gehen Sie zur Gradle-Datei auf Anwendungsebene und darunter Sucht, hinzufügen:
implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0"
5. Synchronisieren Sie Gradle-Projektdateien.
gehen MainActivity.kt und ersetzen Sie den Code durch:
Erstellen Sie eine neue Klasse: MovieBookingScreen.kt. Und fügen Sie den folgenden Code hinzu:
Hier erstellen wir zunächst eine grundlegende Compositing-Funktion mit nichts als a Surface ia ConstraintLayout die die gesamte Höhe und Breite abdeckt.
Zum Vergleich mit einem herkömmlichen XML-basierten ConstraintLayout weisen wir unseren Ansichten IDs zu und verwenden diese IDs dann, um andere Ansichten entsprechend einzuschränken. Und hier erstellen wir zuerst all diese Referenzen mit createRefs() Funktion und ordnen Sie diese dann unseren Komponenten zu.
Nehmen wir zunächst das Menüsymbol in der oberen linken Ecke. Wir gebrauchen constrainAs(reference) um dem Komponierten eine Referenz zuzuweisen. Und dann u constrainBlock, schreiben wir alle Einschränkungen. Im folgenden Beispiel weisen wir zu menuButton Unter Bezugnahme auf das kompatible Symbol definieren wir in constrainBlock seine Einschränkungen:
Anfang ich oben verbunden sein soll Eltern Anfang ich oben das heißt mit 16 dps-Margen
Anstelle des übergeordneten Elements können wir auf andere zusammengesetzte Referenzen verweisen.
Richtlinie
Die Richtlinien in ConstraintLayout sind unsichtbare Linien, die für Benutzer nicht sichtbar sind, aber Entwicklern dabei helfen, das Layout einfach zu gestalten und die Ansicht dieser Richtlinien einzuschränken, sodass das Design klarer und interaktiver sein kann.
Nehmen wir als Nächstes an, wir möchten eine Richtlinie auf 40 % erstellen und das Titelbild des Films zwischen der übergeordneten und der Richtlinie begrenzen. Wir möchten auch sicherstellen, dass die Breite und Höhe des Bildes 2: 3 betragen.
Wir können Folgendes tun, indem wir zuerst eine Richtlinie erstellen. (40 % werden als 0,4f übertragen). Wir können auch den absoluten Wert weitergeben dp. Dann definieren wir die Breite als Dimension.fillToConstraints das ist analog zum tunen android:layout_width=”0dp” . Wir verwenden, um das Verhältnis einzustellen aspectRatio Modifikator, wo wir das Verhältnis übertragen. Das ist wieder analog app:layout_constraintDimensionRatio=”2:3" .
Ebenso können wir andere Texte erstellen, die komponiert und begrenzt werden können.
Horizontale Verkettung
Eine Kette ist eine Gruppe von Ansichten, die durch bidirektionale Positionsbeschränkungen miteinander verbunden sind
Die Kette kann von 3 Arten sein:
Spread: Ein Kettenstil, der die enthaltenen Layouts gleichmäßig verteilt.SpreadInside: Ein Kettenstil, bei dem die erste und die letzte Anordnung an die Beschränkungen an jedem Ende der Kette angehängt werden und der Rest gleichmäßig verteilt wird.Packed: Der Kettenstil, in dem die Zeitpläne enthalten sind, wird zusammengepackt und in der Mitte des verfügbaren Platzes platziert.
Als Nächstes erstellen wir für die Besetzungslinie zunächst ein ConstraintLayout, fügen unsere zusammengesetzten hinzu und führen sie dann mit zusammen createHorizontalChain(). Außerdem ist jedes Bild, das zusammengesetzt werden kann, durch die Angabe eines Verhältnisses von begrenzt 1:1 um eine quadratische Form beizubehalten.
Barriere
Die Barriere verweist auf mehrere Widgets als Eingabe und erstellt eine virtuelle Richtlinie basierend auf dem extremsten Widget auf der angegebenen Seite. Beispielsweise wird die linke Barriere links von allen referenzierten Ansichten ausgerichtet.
Eine Barriere kann wie unten gezeigt einfach erstellt werden, indem Sie zu den Ansichten gehen. Hier schaffen wir die untere Barriere, um unter dem Titelbild und unserem Gussbehälter Orientierung zu bekommen. In ähnlicher Weise können wir eine obere, untere, anfängliche und endgültige Barriere erstellen.
val barrier = createBottomBarrier(coverImage, castContainer)
Als nächstes begrenzen wir den Text der Beschreibung unterhalb der Barriere. Damit sind wir mit der oberen Hälfte unseres Looks fertig 🎉. Jetzt bleibt uns die untere Hälfte des Bildschirms.
Teilen Sie die untere Hälfte des Bildschirms in 3 Teile:
- Kalenderleiste
- Details zum Kino
- Schaltfläche “Tickets buchen”.
Erstens kann ein grauer Hintergrund implementiert werden, indem eine einfache zu komponierende Oberfläche hinzugefügt und ihr eine graue Farbe gegeben wird.
1. Kalenderleiste
Die Kalenderleiste kann wiederum in drei Teile unterteilt werden: Voter, Datumsreihenfolge und Tagesreihenfolge.
Zuerst erstellen wir Text Composables für Tagesreihen und begrenzen Sie sie mit einer horizontalen Kette, um sie gleichmäßig über die Breite des Bildschirms zu verteilen. Dann erstellen wir Text Compoasables für die Datumslinie und begrenzen jedes Datum auf den entsprechenden Tag (Start und Ende) und das vorherige Datum (oben und unten), etwa so:
Jetzt kommt der interessante Teil. Wir erstellen zwei für die Datumsauswahl Surface zusammensetzbar. Ein weißer Streifen, der den Haupthintergrund darstellt, und der andere schwarze Streifen, der auf die weiße Fläche beschränkt ist. Da wir nun möchten, dass die Datumsauswahl dynamisch ist und sich zum ausgewählten Datum bewegt, speichern wir sie im Status, anstatt die Einschränkungen für den Beginn und das Ende des ersten Tages fest zu codieren. Wann immer wir also den Wert eines Zustands ändern, a recomposition wird ausgeführt, und unsere Datumsauswahl ändert ihre Grenzen entsprechend.
Sehen Sie sich als Beispiel den Composable-Clip unten aus dem Text „Montag“ an. U clickable Block ändern wir den Wert der Einschränkung des Datumsauswahlbereichs.
2. Kinodetails
Der Name des Kinos und die Entfernung können als zwei zusammengesetzte Texte betrachtet werden, die in der Mitte des verfügbaren Raums zwischen Kalenderleiste und Schaltfläche verbunden sind. Also erstellen wir einen ConstraintLayout-Compiler neu, der den gesamten verfügbaren Platz einnimmt, und verknüpfen beide Texte, die kompiliert werden können, mit VerticalChainBeibehaltung des Kettenstils als Packed.
3. Schaltfläche „Tickets buchen“.
Dies ist nur eine einfache Schaltfläche, die mit Text komponiert werden kann, der darin komponiert werden kann. Es ist auf die Unterseite des Elternteils begrenzt und so konzipiert, dass es die gesamte Breite einnimmt.
Und das ist es 😎
Folgendes haben wir erreicht:
Hier ist der vollständige Code MovieBookingScreen.kt für ihre referenz:
Danke fürs Lesen. Ich würde gerne alle Ihre Probleme besprechen und lösen. Wenn dir der Artikel gefallen hat, applaudiere und teile ihn 🙃