Android Academy · Lektion

Ihre UI in der Vorschau anzeigen

Verwenden Sie @Preview für schnelle Iterationen.

Ihre UI in der Vorschau anzeigen 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.

Warum Vorschauen hilfreich sind

Das Erstellen und Ausführen einer App auf einem Gerät benötigt Zeit. Compose bietet eine schnellere Möglichkeit, Ihre Benutzeroberfläche zu sehen: die Vorschau.

Eine Vorschau rendert ein Composable direkt in Android Studio. So können Sie Ihr Layout überprüfen, ohne die gesamte App auf einem Emulator oder Smartphone zu starten.

Die @Preview-Annotation

Um eine Vorschau für ein Composable anzuzeigen, erstellen Sie eine separate Funktion und versehen sie mit @Preview. Android Studio zeigt die gerenderte Ausgabe anschließend im Designbereich an.

Die Vorschaufunktion selbst ist ebenfalls ein Composable und trägt daher sowohl @Preview als auch @Composable.

@Preview
@Composable
fun GreetingPreview() {
    Greeting("World")
}

Vorschauen akzeptieren keine Parameter

Eine Vorschaufunktion darf keine Parameter akzeptieren. Compose muss sie selbstständig aufrufen und kann daher keine Argumente übergeben.

Deshalb erstellen Sie einen Wrapper: Die Vorschau ruft Ihr eigentliches Composable auf und übergibt ihm Beispieldaten zur Anzeige.

@Preview
@Composable
fun ProfilePreview() {
    ProfileCard(name = "Ada")
}

Vorschaufunktionen benennen

Üblicherweise wird die Vorschau nach dem angezeigten Composable benannt und endet mit Preview. Für Greeting würden Sie GreetingPreview schreiben.

So ist sofort erkennbar, welche Vorschau zu welchem Composable gehört – besonders wenn Ihre Datei wächst.

@Preview
@Composable
fun HeaderPreview() {
    Header()
}

Eine Vorschau benennen

Sie können eine Vorschau mit dem Parameter name beschriften. Dieser Titel erscheint in Android Studio über der gerenderten Vorschau.

Hilfreiche Namen machen mehrere Vorschauen auf einen Blick unterscheidbar.

@Preview(name = "Light Mode")
@Composable
fun CardPreview() {
    ProfileCard("Ada")
}

Den Hintergrund anzeigen

Standardmäßig wird eine Vorschau möglicherweise auf einem transparenten Hintergrund gerendert. Setzen Sie showBackground = true, um hinter Ihrem Composable eine einfarbige Fläche anzuzeigen.

So lassen sich Abstände und Farben im Designbereich deutlich leichter beurteilen.

@Preview(showBackground = true)
@Composable
fun TextPreview() {
    Text("Hello!")
}

Mehrere Vorschauen gleichzeitig

Sie können einer Funktion mehrere @Preview-Annotationen hinzufügen oder mehrere Vorschaufunktionen schreiben. Jede davon wird separat gerendert.

Das ist nützlich, um dieselbe Benutzeroberfläche mit unterschiedlichen Beispieldaten zu überprüfen, etwa mit einem kurzen und einem langen Namen.

@Preview
@Composable
fun ShortNamePreview() {
    Greeting("Ada")
}

@Preview
@Composable
fun LongNamePreview() {
    Greeting("Grace Hopper")
}

Vorschauen mit unterschiedlichen Größen

Mit den Parametern widthDp und heightDp legen Sie die Größe der Vorschaufläche fest. So können Sie testen, wie Ihr Layout in einem kleinen oder großen Bereich aussieht.

Durch die Größenanpassung der Vorschau erkennen Sie Text, der ungünstig umgebrochen wird, oder Inhalte, die über den verfügbaren Bereich hinausgehen.

@Preview(widthDp = 200, heightDp = 100)
@Composable
fun SmallPreview() {
    Greeting("Hi")
}

Vorschauen im dunklen Modus

Mit dem auf den Nachtmodus gesetzten Parameter uiMode können Sie eine Vorschau Ihrer Benutzeroberfläche im dunklen Design anzeigen. So erkennen Sie Farben, die auf dunklen Hintergründen unpassend wirken.

Wenn Sie frühzeitig sowohl helle als auch dunkle Vorschauen prüfen, vermeiden Sie später Überraschungen.

@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun DarkPreview() {
    ProfileCard("Ada")
}

Interaktive und Live-Vorschauen

Android Studio kann die Vorschau während der Eingabe aktualisieren, sodass Änderungen nahezu sofort sichtbar werden. Außerdem gibt es einen interaktiven Modus, in dem Sie klicken können, ohne einen vollständigen Build auszuführen.

Vorschauen ersetzen nicht das Ausführen der App, machen die Gestaltung von Bildschirmen aber deutlich schneller.

Vorschauen dienen nur zum Debuggen

Vorschaufunktionen sind Werkzeuge für die Entwicklung. Sie sind nicht Bestandteil Ihrer veröffentlichten App und werden den Nutzern nicht angezeigt.

Sie können also beliebig viele Vorschauen mit Beispieldaten hinzufügen. Sie beeinflussen nur das, was Sie in der IDE sehen.

@Preview(showBackground = true, name = "Final")
@Composable
fun FinalPreview() {
    InfoBlock()
}

Kurzer Test

Sehen wir uns eine wichtige Regel für Vorschaufunktionen an.

Zusammenfassung

Sie haben gelernt, dass @Preview ein Composable direkt in Android Studio rendert, ohne dass ein Gerät erforderlich ist. Vorschaufunktionen akzeptieren keine Parameter und umschließen daher Ihr eigentliches Composable mit Beispieldaten.

Nützliche Optionen sind name, showBackground, widthDp, heightDp sowie uiMode für den dunklen Modus. Vorschauen sind ausschließlich für das Debuggen gedacht. Als Nächstes kombinieren Sie alles, um eine echte Profilkarte zu erstellen.

Häufig gestellte Fragen

Ist die Lektion „Ihre UI in der Vorschau anzeigen“ kostenlos?

Ja — der vollständige Text von „Ihre UI in der Vorschau anzeigen“ 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 „Ihre UI in der Vorschau anzeigen“?

Verwenden Sie @Preview für schnelle Iterationen. 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 „Ihre UI in der Vorschau anzeigen“?

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