Einführung von Jetpack Compose in das bestehende Projekt von Ziv Kesten | Februar 2022
Erstellen Sie mit “Erinnern” eine erweiterbare Statusansicht.
In diesem Teil unserer Serie auf Einführung von Jetpack Compose in das bestehende ProjektWir werden ein erweiterbares Listenelement erstellen, das wir in unserer Forderungsliste verwenden werden, eine Funktion, die wir mithilfe der Jetpack Compose-Benutzeroberfläche in unserer Anwendung unter erstellen Limonade.
Schauen wir uns zuerst noch einmal den Bildschirm an, den wir bauen.
Wir haben bereits die folgenden Schaltflächen erstellt: “Nichts des oben Genannten” ich “NÄCHSTE” Rosa Limonade-Taste.
Heute erfahren Sie, wie Sie ein erweiterbares Listenelement erstellen, das eine Gruppe von Anforderungen an die Versicherungspolice für Haustiere darstellt.
Betrachten wir zunächst einen Einzelfall des Objekts, das wir bauen.
Zusehen, wie unser Fall abstürzt Kondition Wir können drei Komponenten identifizieren:
- Text, der den Titel des Artikels enthält.
- Text, der den Untertitel des Artikels enthält.
- Rechtspfeil-Symbol (das animiert wird, sich vertikal zu drehen, wenn wir ein Element erweitern).
Als erstes fangen wir wie immer an zu komponieren:
@Composable
ExpandableListItem() {
Card(...) {
Row(...) {
TitleAndSubtitle(...)
Icon(...)
}
}
}
Wie wir schon oft gesehen haben, schreiben wir beim Schreiben einer deklarativen Benutzeroberfläche zunächst so wenig wie möglich, nur um das Ergebnis zu beschreiben oder was wir auf dem Bildschirm sehen möchten.
Um unser erweiterbares Element zu beschreiben, schreiben wir also zuerst a Card die enthalten aRow und drinnen richten wir einTitleAndSubtitle ich Icon.
Card ein vom System geliefertes Verbundbauteil ist, kann dies einige Zeit in Anspruch nehmenelevation ich shape als Parameter, und wir können es mit a versorgenmodifier für alles andere, was wir brauchen.
Der Card ist ein Container für unser erweiterbares Listenelement, damit wir es versenden elevation und einigemodifiers :
fillMaxWidth()– wird unsere Karte genauso über die gesamte Breite des Bildschirms streckenandroid:layout_width=”match_parent”Bi.padding()– Es gibt uns Platz von den Rändern.clip(RoundedCornerShape(*.dp))– wird die Karte der gelieferten beifügenRoundedCornerShape.clickable()– ergibt ein Lambda, das wir später zur Abwechslung verwenden können Zustand zusammengesetzt
Card(
elevation = 4.dp,
modifier = Modifier
.fillMaxWidth()
.padding(start = 15.dp, top = 15.dp, end = 15.dp)
.clip(RoundedCornerShape(8.dp))
.clickable { // We will deal with the click event later }
)
Bei uns Card wir haben Row (Horizontales Äquivalent LineraLayout), die Titel und ein Symbol enthält.
Der Row wird ein nehmen horizontalArrangment Parameter für den Abstand zwischen dem Symbol und dem Titel.
Row(
horizontalArrangement = Arrangement.SpaceBetween,
modifier = Modifier.fillMaxWidth()
) {...}
U Row legen wir fest TitleAndSubtitle ich Icon die horizontal ausgerichtet werden.
Row(...) {
TitleAndSubtitle(
title = "Expandable item title",
subtitle = "There are more items below! 👇"
)
Icon(...)
}
Der TitleAndSubtitle ist eine Zusammensetzung, die wir geschrieben haben, um a zu haben Column (Vertikales Äquivalent LineraLayout) mit zwei Text zusammensetzbar
@Composable
fun TitleAndSubtitle(
title: String,
subtitle: String
) {
Column(verticalArrangement = Arrangement.Center) {
Text(text = title)
Text(text = subtitle)
}
}
Der Icon ist ein zusammenbaubares System, wir geben es ihm imageVector die wir als Teil der kompositorischen Abhängigkeit erhalten, an align Modifikator und etwas Neues, das wir noch nicht gesehen haben … a graphicsLayer.
Icon(
imageVector = Icons.Default.ArrowDropDown,
modifier = Modifier
.align(CenterVertically)
.graphicsLayer(...)
)
Der graphicsLayer Modifikator
GraphicsLayer ist ein Modifikator, der zum Anwenden von Effekten auf Inhalte verwendet wird, z. B. Skalierung, Drehung, Deckkraft, Schatten und Beschneidung.
In unserem Fall möchten wir das Pfeilsymbol so drehen, dass sich der Pfeil nach oben dreht, wenn das Element erweitert wird.
Innen graphicsLayer wir können benutzen animateFloatAsState die wir abgedeckt haben letzter Artikel über den pinken Limonadenknopf.
Wir werden zuweisen rotationZ Eigentum hier, um eine Drehung zu erreichen 0 zu 180 Grad.
Icon(
modifier = Modifier
.graphicsLayer(
rotationZ = animateFloatAsState(
if (expanded) 180f else 0f).value, )
)
Die Rotation wird anhand eines logischen Namens entschieden erweitertDies werden unsere Komponenten sein Kondition.
In Jetpack Compose zeigt das deklarative UI-Framework wieder nur Elemente, die ihre eigenen hatten Kondition geändert, wenn wir darüber sprechen Kondition Im Zusammenhang mit der Compose-Benutzeroberfläche beziehen wir uns normalerweise speziell auf einige Funktionsvariablen, die enthalten oder darstellen Kondition.
Dies kann ein Primitiv oder ein Objekt sein.
und zur Aufrechterhaltung unserer Montagefunktion Konditiones sollte während der Neuzusammenstellung nicht vergessen werden, sonst wird der Zustand bei jeder Zusammensetzung zurückgesetzt.
Unser Artikel ist erweiterbar, daher muss er einen Status haben, der angibt, ob er erweiterbar ist oder nicht erweitert.
Dazu kehren wir zu unserer anfänglichen Definition der Kompilierung zurück und fügen a hinzu Kondition Variable
@Composable
ExpandableListItem() {
var expanded by remember { mutableStateOf(false) }
Card(modifier = Modifier.clickable { expanded = !expanded}) {
Row(...) {
TitleAndSubtitle(...)
Icon(...)
}
}
}
mutableStateOf
Wir nehmen die Initialen Kondition das Objekt, das ist falsch (extended = false) und als Standard übergeben mutableStateOf:
var expanded by remember { mutableStateOf(false) }
mutableStateOf ist eine reaktive Strömung, ähnlich LiveDate oder StateFlow und wird boolesche Werte ausgeben, wenn wir uns ändern erweitert Variable.
merken
Wir wickeln mutableStateOf tok ua remember blockieren, damit es bei allen Neuzusammenstellungen nicht vergessen wird, sonst wird das Kondition wird die Voreinstellung sein falsch jedes Mal ExpandableListItem namens.
Wir ändern den Zustand, wenn wir auf klicken Card verwenden clickable Modifikator:Card(modifier = Modifier.clickable { expanded = !expanded})
Lassen Sie uns nun den erweiterbaren Teil der Komponente implementieren.
Jetzt müssen wir am Ende unserer Komponente einen weiteren Abschnitt hinzufügen,
Lassen Sie uns einpacken Row Element u Column damit wir ein zusätzliches Element darunter platzieren können.
@Composable
ExpandableListItem() {
var expanded
Card(...) {
/// Wrap the row in a Column
Column {
Row(...) {
TitleAndSubtitle(...)
Icon(...)
}
// And add the extra items sections
Column {
ExtraItem(item = Item())
ExtraItem(item = Item())
}
}
}
}data class Item (
val title: String,
val date: String
)
Wo ExtraItemist nur ein Row mit zwei Text zusammensetzbar.
@Composable
fun ExtraItem(item: Item) {
Row(horizontalArrangement = Arrangement.SpaceBetween) {
Text(text = item.title)
Text(text = item.date)
}
}
Lassen Sie uns jetzt mit jemandem etwas Stil zu unseren erweiterbaren Inhalten hinzufügen Dividers und Spacermit:
//// Extra items sectionsDivider(modifier = Modifier.height(1.dp))
Column(modifier = Modifier.padding(...)) {
Spacer(modifier = Modifier.height(10.dp))
ExtraItem(item = Item())
Spacer(modifier = Modifier.height(10.dp))
Divider(modifier = Modifier.height(1.dp))
Spacer(modifier = Modifier.height(10.dp))
ExtraItem(item = Item())
Spacer(modifier = Modifier.height(10.dp))
Divider(modifier = Modifier.height(1.dp))
Spacer(modifier = Modifier.height(10.dp))
ExtraItem(item = Item())
}
Und jetzt bekommen wir dieses schöne Bauteil!
Aber darauf zu klicken bringt nichts 😩, uns fehlt noch diese Schlüsselzutat in der Magie unserer Komponente!.
Eine der wunderbarsten Komponenten, die die Abhängigkeit vom Kompilieren einer Benutzeroberfläche beinhaltet, ist AnimatedVisibility zusammensetzbar.
@Composable
fun ExpandableListItem() {
var expanded by remember { mutableStateOf(false) }
Card() {
Row() {
TitleAndSubtitle()
Icon()
}
AnimatedVisibility(visible = expanded) {
Column {
ExtraItem(item = Item())
ExtraItem(item = Item())
}
}
}
}
Der AnimatedVisibility ermöglicht uns Änderungen in der Sichtbarkeitsanimation in Layouts wie z Column oder LazyColumnund gemäß dem deklarativen UI-Paradigma müssen wir keine benutzerdefinierten Animationen definieren, um dieses Verhalten zu erhalten.
Wir können es jedoch leicht anpassen, wenn wir es verwenden möchten AnimationSpec.
Der AnimationSpec speichert die Animationsspezifikation, wir können sie verwenden, um sie zu definieren Genuss, Dauer, Verzögerungen, und andere Spezifikationen im Zusammenhang mit der Anpassung von Animationen.
Wenn wir Animationen wie z erweitern ich reduzieren Animationen für unsere Benutzeroberfläche können wir als verwenden.
AnimatedVisibility(
visible = expanded,
enter = expandVertically(
animationSpec = tween(
durationMillis = 300, easing = FastOutLinearInEasing)
),
exit = shrinkVertically(
animationSpec = tween(
durationMillis = 300, easing = FastOutLinearInEasing)
)
)
Und indem wir diese Spezifikationen zu unseren hinzufügen AnimatedVisibility Wir können die gewünschte Animation für unser erweiterbares Element erhalten!
Hier ist der vollständige Code für unseren erweiterbaren Artikel!
Wir haben heute viel gelernt! Wir haben den Pfeil mit animiert graphicsLayer Modifikator, mit dem wir die Sichtbarkeit animiert haben AnimatedVisibilityund wir haben gelernt, wie man es benutzt Kondition in Jetpack Compose mit remember ich mutableStateOf.
Im nächsten Abschnitt fügen wir dem erweiterbaren Element ein benutzerdefiniertes Optionsfeld hinzu!
Vergiss nicht zu klatschen und zu abonnieren, aber nur wenn du denkst, ich habe es verdient!.
