Android Academy · Lektion

Column, Row und Box

Ordnen Sie Composables in gängigen Layouts an.

Column, Row und Box ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Android Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Composables anordnen

Um Composables relativ zueinander zu platzieren, bietet Compose drei grundlegende Layout-Composables: Column, Row und Box.

Column: Vertikaler Stapel

Column stapelt seine untergeordneten Elemente vertikal, von oben nach unten.

Column {
    Text("First")
    Text("Second")
    Text("Third")
}

Row: Horizontaler Stapel

Row platziert seine untergeordneten Elemente nebeneinander, von links nach rechts.

Row {
    Text("Left")
    Text("Middle")
    Text("Right")
}

Box: Überlappung

Box stapelt untergeordnete Elemente übereinander, wie Ebenen. Später hinzugefügte Elemente werden über früheren gezeichnet. Ideal für Badges, Overlays und Hintergründe.

Box {
    Image(
        painter = painterResource(R.drawable.photo),
        contentDescription = null
    )
    Text("Caption")
}

Untergeordnete Elemente sind Content-Lambdas

Jedes Layout nimmt eine nachgestellte Content-Lambda entgegen. Alle Composables, die Sie darin aufrufen, werden zu seinen untergeordneten Elementen. Es gibt kein XML — untergeordnete Elemente sind einfach Funktionsaufrufe.

Layouts verschachteln

Layouts lassen sich beliebig verschachteln. Platzieren Sie eine Row in einer Column, um eine rasterähnliche Struktur oder eine Liste von Zeilen zu erstellen.

Column {
    Row {
        Text("A")
        Text("B")
    }
    Row {
        Text("C")
        Text("D")
    }
}

Column und LinearLayout

Wenn Sie XML verwendet haben, entspricht Column einem vertikalen LinearLayout und Row einem horizontalen. Box ähnelt einem einfachen FrameLayout.

Standardgröße

Standardmäßig ist ein Layout nur so groß wie seine untergeordneten Elemente (wrap content). Mit Modifikatoren wie Modifier.fillMaxSize() können Sie es auf den verfügbaren Platz erweitern. Das wird in der nächsten Lektion behandelt.

contentAlignment in Box

Mit contentAlignment kann Box alle untergeordneten Elemente ausrichten. Sie können beispielsweise alle zentrieren.

Box(contentAlignment = Alignment.Center) {
    Text("Centered")
}

Die richtige Wahl treffen

Wählen Sie anhand der Richtung: Column für vertikale, Row für horizontale Anordnung und Box für Überlappungen oder zum Zentrieren eines einzelnen Elements. Die meisten Bildschirme kombinieren alle drei.

Zusammenfügen

Ein kleines Profil-Layout, das alle drei verwendet.

@Composable
fun Profile() {
    Column {
        Box(contentAlignment = Alignment.Center) {
            Image(
                painter = painterResource(R.drawable.avatar),
                contentDescription = null
            )
        }
        Row {
            Text("Posts ")
            Text("Followers")
        }
    }
}

Schnelltest

Welches Layout stapelt seine untergeordneten Elemente übereinander, sodass sie sich überlappen?

Zusammenfassung

Drei grundlegende Layouts:

Column — vertikaler Stapel.
Row — horizontaler Stapel.
Box — überlappende Ebenen; contentAlignment zentriert den Inhalt.

Sie lassen sich beliebig verschachteln, um jeden Bildschirm aufzubauen.

Häufig gestellte Fragen

Ist die Lektion „Column, Row und Box“ kostenlos?

Ja — der vollständige Text von „Column, Row und Box“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Android Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Column, Row und Box“?

Ordnen Sie Composables in gängigen Layouts an. Du übst Android Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Android Academy zu starten?

Keine Vorkenntnisse erforderlich. Android Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Column, Row und Box“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Android Academy-Lektion Code schreiben und ausführen?

Ja. Jede Android Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Android Academy