Android Academy · Lektion

Abstände mit Padding

Verwenden Sie Modifier für Abstände.

Abstände mit Padding ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

Was ist Padding?

Padding ist leerer Raum, der um den Inhalt eines Composables hinzugefügt wird. Er hält den Inhalt von den Rändern fern, damit alles nicht beengt wirkt.

In Compose fügen Sie Padding über einen Modifier hinzu.

Text(
    text = "Hello",
    modifier = Modifier.padding(16.dp)
)

Die Einheit dp

Für Padding-Größen wird dp verwendet, die Abkürzung für dichteunabhängige Pixel. dp erscheint auf jedem Bildschirm in derselben physischen Größe.

Schreiben Sie eine Zahl gefolgt von .dp, zum Beispiel 8.dp oder 24.dp.

Modifier.padding(8.dp)

Was ist ein Modifier?

Ein Modifier beschreibt, wie ein Composable aussieht und sich verhält: seine Größe, sein Padding, seinen Hintergrund und mehr.

Sie erstellen Modifier, indem Sie Funktionen mit Punkten aneinanderreihen.

Modifier
    .padding(16.dp)
    .background(Color.Yellow)

Padding auf allen Seiten

Der Aufruf padding(16.dp) mit einem Wert fügt an allen vier Seiten denselben Abstand hinzu: oben, unten, am Anfang und am Ende.

So geben Sie dem Inhalt am schnellsten mehr Raum.

Box(
    modifier = Modifier.padding(16.dp)
) {
    Text("Inside")
}

Horizontales und vertikales Padding

Mit den Parametern horizontal und vertical können Sie die Seiten getrennt festlegen.

Horizontal umfasst Anfang und Ende, vertikal oben und unten.

Modifier.padding(
    horizontal = 24.dp,
    vertical = 8.dp
)

Padding auf einer Seite

Um eine einzelne Kante anzusprechen, benennen Sie sie: start, top, end oder bottom.

So können Sie die Abstände genau dort fein abstimmen, wo Sie sie benötigen.

Modifier.padding(
    start = 16.dp,
    top = 4.dp
)

Die Reihenfolge ist wichtig

Die Reihenfolge der Modifier verändert das Ergebnis. Wenn Sie Padding vor einen Hintergrund setzen, bleibt der gepaddete Bereich ungefärbt; danach füllt der Hintergrund auch das Padding aus.

Lesen Sie Modifier von oben nach unten, wie Ebenen.

Modifier
    .background(Color.Cyan)
    .padding(16.dp)

Abstände zwischen Elementen

Verwenden Sie innerhalb einer Column oder Row Arrangement.spacedBy, um automatisch gleich große Abstände zwischen untergeordneten Elementen einzufügen.

Das ist übersichtlicher, als jedes Element von Hand mit Padding zu versehen.

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

Spacer für Abstände

Ein Spacer ist ein leeres Composable, das Elemente auseinanderdrückt. Geben Sie ihm mit einem Modifier eine Größe.

Er eignet sich gut für einen festen Abstand zwischen zwei Elementen.

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

Padding und Margin

Compose hat kein separates Margin. Sie erzeugen äußeren Abstand, indem Sie Padding in der Modifier-Kette weiter vorne platzieren, vor Größe oder Hintergrund.

Damit übernimmt ein einziges Werkzeug, Padding, je nach Reihenfolge sowohl innere als auch äußere Abstände.

Modifier
    .padding(16.dp)
    .background(Color.LightGray)
    .padding(8.dp)

Konsistente Abstände

Gute Apps verwenden einige wiederkehrende Werte wie 4, 8, 16 und 24 dp. Dadurch bleiben Layouts übersichtlich und vorhersehbar.

Vermeiden Sie beliebige Zahlen und wählen Sie Werte aus einer kleinen Skala.

Modifier.padding(16.dp)

Kurze Überprüfung

Testen Sie Ihr Wissen über Padding.

Zusammenfassung

Padding fügt mit Modifier.padding und dp-Werten Raum um den Inhalt hinzu. Sie können alle Seiten, horizontale und vertikale Seiten oder einzelne Kanten mit Padding versehen.

Die Reihenfolge der Modifier ist wichtig, und Arrangement.spacedBy oder Spacer kümmern sich um Abstände zwischen Elementen.

Als Nächstes erkunden Sie Farben und MaterialTheme.

Häufig gestellte Fragen

Ist die Lektion „Abstände mit Padding“ kostenlos?

Ja — der vollständige Text von „Abstände mit Padding“ 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 „Abstände mit Padding“?

Verwenden Sie Modifier für Abstände. 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 3 von 4.

Wie lange dauert die Lektion „Abstände mit Padding“?

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