Android Academy · Lektion

Grundlagen von Text und Column

Zeigen und stapeln Sie Inhalte.

Grundlagen von Text und Column ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Das Text-Composable

Das Einfachste, was Sie in Compose anzeigen können, ist Text. Das Composable Text zeichnet eine Zeichenkette auf dem Bildschirm.

Sie übergeben die anzuzeigende Zeichenkette als erstes Argument. Mehr ist nicht nötig, um Wörter auf dem Bildschirm anzuzeigen.

@Composable
fun Hello() {
    Text("Hello, Android!")
}

Text formatieren

Text akzeptiert Parameter, mit denen Sie sein Erscheinungsbild ändern können. Sie können fontSize, color und fontWeight festlegen.

Für Größen wird die Einheit sp verwendet, die mit den Schriftarteinstellungen der Benutzer skaliert. So bleibt Ihre App für alle gut lesbar.

Text(
    "Big Title",
    fontSize = 24.sp,
    fontWeight = FontWeight.Bold
)

Warum Sie ein Layout benötigen

Wenn Sie Text zweimal hintereinander aufrufen, landen beide Textabschnitte an derselben Stelle und liegen übereinander. Composables ordnen sich nicht automatisch an.

Um Elemente der Reihe nach zu platzieren, benötigen Sie ein Layout-Composable, das seine untergeordneten Elemente anordnet. Für die vertikale Anordnung ist Column das am häufigsten verwendete.

Das Column-Composable

Column ordnet seine untergeordneten Elemente vertikal untereinander an. Die untergeordneten Composables platzieren Sie im nachgestellten Lambda-Block.

Jedes Composable, das Sie innerhalb der geschweiften Klammern schreiben, wird in der von Ihnen angegebenen Reihenfolge zu einer Zeile in diesem vertikalen Stapel.

@Composable
fun TwoLines() {
    Column {
        Text("First line")
        Text("Second line")
    }
}

Die Reihenfolge in einer Column ist wichtig

Innerhalb einer Column erscheinen die untergeordneten Elemente von oben nach unten exakt in der Reihenfolge, in der Sie sie auflisten. Verschieben Sie eine Zeile im Code nach oben, bewegt sie sich auch auf dem Bildschirm nach oben.

Dadurch werden Layouts vorhersehbar: Wenn Sie den Code von oben nach unten lesen, wissen Sie, wie der Bildschirm von oben nach unten aussieht.

Column {
    Text("Title")
    Text("Subtitle")
    Text("Body text")
}

Vertikale Anordnung

Column kann den Abstand zwischen seinen untergeordneten Elementen mit verticalArrangement steuern. Beispielsweise fügt Arrangement.spacedBy gleichmäßige Abstände ein.

Das ist übersichtlicher, als jedem untergeordneten Element von Hand einen Abstand hinzuzufügen, und sorgt für ein konsistentes Layout.

Column(
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    Text("One")
    Text("Two")
}

Horizontale Ausrichtung

Standardmäßig richtet eine Column ihre untergeordneten Elemente am Anfang, also links, aus. Verwenden Sie horizontalAlignment, um sie zu zentrieren oder am Ende auszurichten.

Setzen Sie den Wert auf Alignment.CenterHorizontally, damit jedes untergeordnete Element innerhalb der Breite der Column zentriert wird.

Column(
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Centered")
    Text("Also centered")
}

Die Row kennenlernen

Column stapelt Elemente vertikal, während das zugehörige Row-Layout untergeordnete Elemente horizontal nebeneinander anordnet. Beide beruhen auf derselben Idee, verwenden aber unterschiedliche Richtungen.

Sie werden Rows und Columns kombinieren, um Raster und Karten zu erstellen. Merken Sie sich zunächst: Column bedeutet nach unten, Row bedeutet nebeneinander.

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

Layouts verschachteln

Layouts können andere Layouts enthalten. Sie können eine Row in eine Column einfügen, um komplexere Designs zu erstellen.

Hier zeigt eine Column einen Titel und darunter eine Row mit zwei Textabschnitten. Durch Verschachtelung entstehen komplexe Bildschirme aus einfachen Bestandteilen.

Column {
    Text("Score")
    Row {
        Text("Home")
        Text("Away")
    }
}

Abstand zwischen Elementen einfügen

Um einen festen Abstand zwischen zwei Composables einzufügen, können Sie einen Spacer einsetzen. Dabei handelt es sich um ein leeres Composable, das lediglich Platz einnimmt.

Geben Sie ihm über einen Modifier eine Höhe. Dadurch wird das nächste Element nach unten verschoben. Modifier sehen Sie sich in der nächsten Lektion genauer an.

Column {
    Text("Top")
    Spacer(modifier = Modifier.height(16.dp))
    Text("Bottom")
}

Alles zusammenfügen

Mit Text und Column können Sie bereits einen einfachen Bildschirm mit Beschriftungen erstellen. Stapeln Sie eine Überschrift und einige Detailzeilen.

Dieses kleine Muster bildet die Grundlage für fast jeden Compose-Bildschirm, den Sie erstellen werden.

@Composable
fun InfoBlock() {
    Column {
        Text("Name: Ada")
        Text("Role: Engineer")
    }
}

Kurzer Test

Testen wir, ob Sie die Layoutrichtung verstanden haben.

Zusammenfassung

Sie haben gelernt, Zeichenfolgen mit Text anzuzeigen und mit fontSize und fontWeight zu formatieren. Eine Column stapelt untergeordnete Elemente in der Reihenfolge des Codes vertikal, während eine Row sie horizontal anordnet.

Mit verticalArrangement oder einem Spacer können Sie Abstände steuern und untergeordnete Elemente mit horizontalAlignment ausrichten. Durch das Verschachteln von Rows und Columns entstehen komplexere Layouts. Als Nächstes zeigen Sie diese Bildschirme in einer Vorschau an, ohne die App auszuführen.

Häufig gestellte Fragen

Ist die Lektion „Grundlagen von Text und Column“ kostenlos?

Ja — der vollständige Text von „Grundlagen von Text und Column“ 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 „Grundlagen von Text und Column“?

Zeigen und stapeln Sie Inhalte. 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 2 von 4.

Wie lange dauert die Lektion „Grundlagen von Text und Column“?

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