Grundlagen zum Verfassen von Layouts

Jetpack Compose erleichtert das Entwerfen und Erstellen der Benutzeroberfläche Ihrer App erheblich. Verfassen wandelt den Zustand in UI-Elemente um, und zwar über:

1. Zusammensetzung der Elemente
2. Layout der Elemente
3. Zeichnung von Elementen

In diesem Dokument geht es um das Layout von Elementen und erklärt einige Gebäude Blocks Compose bietet Ihnen die Möglichkeit, Ihre UI-Elemente anzuordnen.

Ziele von Layouts in Compose

Die Jetpack Compose-Implementierung des Layoutsystems hat zwei Hauptziele:

• Hohe Leistung
• Fähigkeit, mühelos benutzerdefinierte Layouts zu erstellen

Grundlagen zusammensetzbarer Funktionen

Zusammensetzbare Funktionen sind der Grundbaustein von Compose. Eine zusammensetzbare Funktion ist eine Funktion, die Unit ausgibt und einen Teil Ihrer UI beschreibt. Die -Funktion benötigt Eingaben und generiert das, was auf dem Bildschirm zu sehen ist. Weitere Informationen Informationen zu zusammensetzbaren Funktionen finden Sie im Abschnitt Modelldokumentation.

Eine zusammensetzbare Funktion kann mehrere UI-Elemente ausgeben. Wenn Sie jedoch keine wie sie angeordnet sein sollten, kann die Funktion „Schreiben“ Elemente auf eine Art und Weise an, die Ihnen nicht gefällt. Dieser Code generiert zum Beispiel Elemente:

@Composable
fun ArtistCard() {
    Text("Alfred Sisley")
    Text("3 minutes ago")
}
LayoutBasicsSnippets.kt

Ohne Anleitung, wie sie angeordnet sein sollen, stapelt „Compose“ die Textelemente übereinander, sodass sie unlesbar werden:

Die Funktion „Compose“ bietet eine Sammlung gebrauchsfertiger Layouts, mit denen Sie Ihre UI-Elementen und erleichtert die Definition Ihrer eigenen, spezialisierteren Layouts.

Komponenten des Standardlayouts

In vielen Fällen können Sie einfach das Standardlayout von Google Composer verwenden Elemente.

Verwenden Sie Column um Elemente vertikal auf dem Bildschirm zu platzieren.

@Composable
fun ArtistCardColumn() {
    Column {
        Text("Alfred Sisley")
        Text("3 minutes ago")
    }
}
LayoutBasicsSnippets.kt

Verwenden Sie ebenso Row um Elemente horizontal auf dem Bildschirm zu platzieren. Unterstützung von Column und Row und konfigurieren die Ausrichtung der darin enthaltenen Elemente.

@Composable
fun ArtistCardRow(artist: Artist) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Column {
            Text(artist.name)
            Text(artist.lastSeenOnline)
        }
    }
}
LayoutBasicsSnippets.kt

Mit Box kannst du Elemente übereinander platzieren. Mit Box lässt sich auch eine bestimmte Ausrichtung der darin enthaltenen Elemente konfigurieren.

@Composable
fun ArtistAvatar(artist: Artist) {
    Box {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Icon(Icons.Filled.Check, contentDescription = "Check mark")
    }
}
LayoutBasicsSnippets.kt

Oft sind diese Bausteine alles, was Sie brauchen. Sie können Ihre eigene zusammensetzbare Funktion schreiben, um diese Layouts zu einem ausgefeilteren Layout zu kombinieren, das zu Ihrer App passt.

Um die Position der untergeordneten Elemente innerhalb eines Row festzulegen, legen Sie horizontalArrangement und verticalAlignment Argumente. Legen Sie für ein Column-Objekt verticalArrangement und horizontalAlignment Argumente:

@Composable
fun ArtistCardArrangement(artist: Artist) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.End
    ) {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Column { /*...*/ }
    }
}
LayoutBasicsSnippets.kt

Layoutmodell

Im Layoutmodell wird der UI-Baum in einem einzigen Durchlauf dargestellt. Jeder Knoten ist gebeten, sich selbst zu messen, dann alle untergeordneten Elemente rekursiv messen, Größenbeschränkungen in der Baumstruktur auf untergeordnete Elemente. Dann werden die Blattknoten platziert, wobei die festgelegten Größen und Platzierungsanweisungen an die Baum.

Kurz gesagt messen Eltern vor ihren Kindern, die Größe und Position ihre Kinder.

Sehen Sie sich die folgende SearchResult-Funktion an.

@Composable
fun SearchResult() {
    Row {
        Image(
            // ...
        )
        Column {
            Text(
                // ...
            )
            Text(
                // ...
            )
        }
    }
}
LayoutBasicsSnippets.kt

Diese Funktion liefert den folgenden UI-Baum.

SearchResult
  Row
    Image
    Column
      Text
      Text

Im Beispiel SearchResult folgt das Baumlayout der Benutzeroberfläche in dieser Reihenfolge:

1. Der Stammknoten Row wird zum Messen aufgefordert.
2. Der Stammknoten Row fordert die Messung durch sein erstes untergeordnetes Element, Image, an.
3. Image ist ein Blattknoten (d. h., er hat keine untergeordneten Elemente), also gibt er eine Größe an. und gibt Anweisungen zur Platzierung zurück.
4. Der Stammknoten Row fordert die Messung durch sein zweites untergeordnetes Element Column an.
5. Der Column-Knoten fordert die Messung seines ersten untergeordneten Text-Elements an.
6. Der erste Text-Knoten ist ein Blattknoten, also gibt er eine Größe an und gibt Anweisungen zur Platzierung.
7. Der Column-Knoten fordert die Messung seines zweiten untergeordneten Text-Elements an.
8. Der zweite Text-Knoten ist ein Blattknoten, also gibt er eine Größe an und gibt Anweisungen zur Platzierung.
9. Nachdem der Column-Knoten nun seine untergeordneten Elemente gemessen, skaliert und platziert hat, eigene Größe und Platzierung bestimmen kann.
10. Nachdem der Stammknoten Row seine untergeordneten Elemente gemessen, die Größe angepasst und platziert hat, eigene Größe und Platzierung bestimmen kann.

Leistung

„Compose“ erzielt eine hohe Leistung, da Kinder nur einmal erfasst werden. Einzelticket ist gut für die Leistung, da Compose effizient tiefgehende Baumstrukturen der Benutzeroberfläche Wenn ein Element sein untergeordnetes Element zweimal gemessen hat und dieses untergeordnete Element jeweils seine untergeordneten Elemente zweimal usw. enthält, hätte ein einziger Versuch, eine ganze Benutzeroberfläche sehr viel Arbeit zu leisten, was es schwierig macht, die Leistung Ihrer App aufrechtzuerhalten.

Wenn für Ihr Layout aus irgendeinem Grund mehrere Messungen erforderlich sind, bietet die Funktion „Schreiben“ ein spezielles System, intrinsische Messungen. Weitere Informationen zu dieser Funktion in Intrinsische Messungen in Compose Layouts

Da Messung und Platzierung verschiedene Unterphasen des Layout-Durchlaufs sind, sind alle Änderungen, die sich nur auf die Platzierung der Artikel, nicht auf die Messung, auswirken, separat.

Modifikatoren in Layouts verwenden

Wie im Abschnitt Modifikatoren zum Schreiben erläutert, können Sie können Sie Ihre zusammensetzbaren Funktionen dekorieren oder erweitern. Modifikatoren sind entscheidend, zum Anpassen Ihres Layouts. Hier verketten wir beispielsweise mehrere Modifikatoren, zum Anpassen von ArtistCard:

@Composable
fun ArtistCardModifiers(
    artist: Artist,
    onClick: () -> Unit
) {
    val padding = 16.dp
    Column(
        Modifier
            .clickable(onClick = onClick)
            .padding(padding)
            .fillMaxWidth()
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) { /*...*/ }
        Spacer(Modifier.size(padding))
        Card(
            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        ) { /*...*/ }
    }
}
LayoutBasicsSnippets.kt

Im obigen Code werden verschiedene Modifikatorfunktionen zusammen verwendet.

• clickable sorgt dafür, dass eine zusammensetzbare Funktion auf Nutzereingaben reagiert und eine Welle zeigt.
• padding platziert ein Element mit Platz.
• Mit fillMaxWidth wird für die zusammensetzbare Füllung die maximale Breite festgelegt, die von in das übergeordnete Element ein.
• size() gibt die bevorzugte Breite und Höhe eines Elements an.

Scrollbare Layouts

Weitere Informationen zu scrollbaren Layouts finden Sie in der Dokumentation zum Schreiben von Touch-Gesten

Listen und Faullisten findest du in der Dokumentation zum Erstellen von Listen

Responsive Layouts

Ein Layout sollte unter Berücksichtigung verschiedener Bildschirmausrichtungen entworfen werden. und Formfaktorgrößen. Compose bietet sofort ein paar Mechanismen, um die Anpassung Ihrer zusammensetzbaren Layouts an verschiedene Bildschirmkonfigurationen zu erleichtern.

Einschränkungen

Um die Einschränkungen des übergeordneten Elements zu kennen, und um das Layout können Sie einen BoxWithConstraints verwenden. Die Messung Einschränkungen im Bereich der Lambda-Funktion finden können. Sie können diese Messwerte verwenden, Einschränkungen beim Erstellen verschiedener Layouts für unterschiedliche Bildschirmkonfigurationen:

@Composable
fun WithConstraintsComposable() {
    BoxWithConstraints {
        Text("My minHeight is $minHeight while my maxWidth is $maxWidth")
    }
}
LayoutBasicsSnippets.kt

Anzeigenflächenbasierte Layouts

Compose bietet eine Vielzahl von zusammensetzbaren Funktionen, die auf Material Design mit der androidx.compose.material:material-Abhängigkeit (beinhaltet beim Erstellen einer Projekt in Android Studio erstellen), um die Erstellung der Benutzeroberfläche zu vereinfachen. Elemente wie Drawer, FloatingActionButton, und TopAppBar sind alle angegeben.

Materialkomponenten nutzen in großem Umfang Slot-APIs. um über die zusammensetzbaren Funktionen Anpassungen hinzuzufügen. Dieser Ansatz sorgt dafür, Komponenten sind flexibler, da sie ein untergeordnetes Element akzeptieren, das anstatt jeden Konfigurationsparameter des untergeordneten Elements offenlegen zu müssen. Anzeigenflächen lassen einen leeren Bereich auf der Benutzeroberfläche, den der Entwickler nach Bedarf füllen kann. Für Dies sind z. B. die Anzeigenflächen, die Sie in einem TopAppBar:

Zusammensetzbare Elemente verwenden normalerweise ein zusammensetzbares content-Lambda ( content: @Composable () -> Unit). Slot-APIs stellen mehrere content-Parameter für bestimmte Anwendungsfälle zur Verfügung. Mit TopAppBar können Sie beispielsweise Inhalte für title, navigationIcon und actions.

Beispiel: Scaffold ermöglicht das Implementieren einer Benutzeroberfläche mit der grundlegenden Material Design-Layoutstruktur. Scaffold bietet Slots für die gängigsten Material-Komponenten der obersten Ebene, z. B. TopAppBar, BottomAppBar, FloatingActionButton und Drawer. Durch die Verwendung von Scaffold, kann ganz einfach überprüft werden, ob diese Komponenten richtig positioniert und zusammenarbeiten.

@Composable
fun HomeScreen(/*...*/) {
    ModalNavigationDrawer(drawerContent = { /* ... */ }) {
        Scaffold(
            topBar = { /*...*/ }
        ) { contentPadding ->
            // ...
        }
    }
}
LayoutBasicsSnippets.kt

Empfehlungen für dich

• Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
• Modifikatoren zum Schreiben
• Kotlin für Jetpack Compose
• Materialkomponenten und Layouts