Benutzeroberfläche mit zusammensetzbaren Vorschauen als Vorschau ansehen

Eine zusammensetzbare Funktion wird durch eine Funktion definiert und mit @Composable annotiert:

@Composable
fun SimpleComposable() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

Um eine Vorschau dieser zusammensetzbaren Funktion zu aktivieren, müssen Sie eine weitere zusammensetzbare Funktion mit Anmerkungen erstellen. mit @Composable und @Preview. Diese neue, mit Anmerkungen versehene zusammensetzbare Funktion enthält der zuvor erstellten zusammensetzbaren Funktion SimpleComposable:

@Preview
@Composable
fun SimpleComposablePreview() {
    SimpleComposable()
}
AndroidStudioComposeSnippets.kt

Die Annotation @Preview weist Android Studio darauf hin, zusammensetzbar ist, sollte in der Designansicht dieser Datei angezeigt werden. Sie können sich die Änderungen an der zusammensetzbaren Vorschau an.

Sie können Ihrem Code manuell Parameter hinzufügen, um die Art und Weise anzupassen, wie Android Studio Rendert @Preview. Sie können sogar die Anmerkung @Preview um eine zusammensetzbare Funktion mit verschiedenen Eigenschaften in der Vorschau anzuzeigen.

Einer der Hauptvorteile der zusammensetzbaren Funktion von @Preview besteht darin, im Emulator in Android Studio. Sie können sich den arbeitsspeicherintensiven Start der Emulator für noch genauere Design-Änderungen. Außerdem bietet @Preview die Möglichkeit, und kleine Codeänderungen ganz einfach testen.

Um die Anmerkung @Preview am effektivsten zu nutzen, sollten Sie Ihre in Bezug auf den Zustand, den sie als Eingabe erhalten, und die Ereignisse, die sie Ausgaben.

@Preview definieren

Android Studio bietet einige Funktionen zur Erweiterung zusammensetzbarer Vorschauen. Sie können das Containerdesign ändern, mit ihnen interagieren oder sie direkt in einem Emulator oder Gerät.

Abmessungen

Standardmäßig werden @Preview-Dimensionen automatisch ausgewählt, um den Inhalt umzubrechen. Wenn Sie die Dimensionen manuell festlegen möchten, fügen Sie die Parameter heightDp und widthDp hinzu. Diese Werte werden bereits als dp interpretiert, daher müssen Sie .dp nicht hinzufügen für sie:

@Preview(widthDp = 50, heightDp = 50)
@Composable
fun SquareComposablePreview() {
    Box(Modifier.background(Color.Yellow)) {
        Text("Hello World")
    }
}
AndroidStudioComposeSnippets.kt

Dynamische Farbvorschau

Wenn Sie die Option Dynamische Farbe in Ihrer App verwenden, Verwenden Sie das Attribut wallpaper, um zwischen Hintergründen zu wechseln und zu sehen, wie Ihre Benutzeroberfläche auf unterschiedlichen Nutzenden ausgewählten Hintergrund. Hintergrunddesign auswählen angeboten von Wallpaper . Für diese Funktion ist Compose 1.4.0 oder höher erforderlich.

Mit verschiedenen Geräten verwenden

In Android Studio Flamingo kannst du den device-Parameter der Vorschau bearbeiten um Konfigurationen für zusammensetzbare Funktionen auf verschiedenen Geräten zu definieren.

Wenn der Geräteparameter einen leeren String (@Preview(device = "")) enthält, können Sie Rufen Sie die automatische Vervollständigung auf, indem Sie Ctrl + Space drücken. Dann können Sie die Werte für jeden Parameter.

Über die automatische Vervollständigung können Sie eine beliebige Geräteoption aus der Liste auswählen, z. B. @Preview(device = "id:pixel_4") Alternativ können Sie ein benutzerdefiniertes Gerät eingeben indem Sie spec:width=px,height=px,dpi=int… auswählen, um die einzelnen Werte für jeden Parameter.

Drücke zum Übernehmen Enter oder brich den Vorgang mit Esc ab.

Wenn Sie einen ungültigen Wert festlegen, wird die Deklaration rot unterstrichen und eine Korrektur kann möglicherweise verfügbar sein (Alt + Enter (⌥ + ⏎ für macOS) > Ersetzen durch.... Das Bei der Prüfung wird versucht, eine Lösung zu finden, die Ihrer Eingabe am nächsten kommt.

Sprache

Fügen Sie den Parameter locale hinzu, um verschiedene Nutzersprachen zu testen:

@Preview(locale = "fr-rFR")
@Composable
fun DifferentLocaleComposablePreview() {
    Text(text = stringResource(R.string.greeting))
}
AndroidStudioComposeSnippets.kt

Hintergrundfarbe festlegen

Standardmäßig wird die zusammensetzbare Funktion mit einem transparenten Hintergrund angezeigt. So fügen Sie ein Hintergrund, fügen Sie die Parameter showBackground und backgroundColor hinzu. Behalten backgroundColor ist ein ARGB-Farbraum Long, nicht Color Wert:

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

System-UI

Wenn die Status- und Aktionsleisten in einer Vorschau angezeigt werden sollen, fügen Sie den Parameter showSystemUi-Parameter:

@Preview(showSystemUi = true)
@Composable
fun DecoratedComposablePreview() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

UI-Modus

Der Parameter uiMode kann beliebige Configuration.UI_*-Attribute annehmen. und ermöglicht es Ihnen, das Verhalten der Vorschau entsprechend zu ändern. Für können Sie die Vorschau auf den Nachtmodus einstellen, um zu sehen, wie das Design reagiert.

LocalInspectionMode

Sie können in der LocalInspectionMode lesen. CompositionLocal, um zu sehen, ob die zusammensetzbare Funktion in einer Vorschau (innerhalb eines Inspectable-Komponente). Ob die Komposition gerendert wird In einer Vorschau wird LocalInspectionMode.current als true ausgewertet. Dieses können Sie die Vorschau anpassen. können Sie beispielsweise eine Platzhalterbild im Vorschaufenster zu sehen, anstatt echte Daten anzuzeigen.

Auf diese Weise können Sie auch die Einschränkungen umgehen. Für Beispiel, in dem Beispieldaten gezeigt werden, anstatt die Netzwerkanfrage aufzurufen.

@Composable
fun GreetingScreen(name: String) {
    if (LocalInspectionMode.current) {
        // Show this text in a preview window:
        Text("Hello preview user!")
    } else {
        // Show this text in the app:
        Text("Hello $name!")
    }
}
AndroidStudioComposeSnippets.kt

Mit @Preview interagieren

Android Studio bietet Funktionen, mit denen Sie mit Ihren definierten Vorschauen ansehen. So können Sie besser nachvollziehen, Laufzeitverhalten und ermöglicht Ihnen eine bessere Navigation auf der Benutzeroberfläche.

Interaktiver Modus

Im interaktiven Modus können Sie mit einer Vorschau auf ähnliche Weise interagieren wie auf einem Gerät, auf dem dein Programm läuft, z. B. einem Smartphone oder Tablet. Im interaktiven Modus in einer Sandbox-Umgebung isoliert ist (d. h. von anderen Vorschauen getrennt), in der Sie auf Elemente klicken und Nutzereingaben in die Vorschau eingeben können. Es ist ein kurzer können Sie verschiedene Zustände, Gesten und sogar Animationen Ihrer zusammensetzbaren Funktion testen.

Codenavigation und zusammensetzbare Gliederungen

Wenn Sie den Mauszeiger auf eine Vorschau bewegen, sehen Sie die Umrisse der zusammensetzbaren Funktionen. enthalten. Durch Klicken auf eine zusammensetzbare Gliederung wird die Editoransicht aufgerufen zu ihrer Definition hinzufügen.

Vorschau anzeigen

Du kannst eine bestimmte @Preview auf einem Emulator oder einem physischen Gerät ausführen. Die Die Vorschau wird in derselben Projekt-App wie ein neues Activity-Objekt bereitgestellt. denselben Kontext und dieselben Berechtigungen hat. Sie müssen keine Boilerplate-Code, der um eine Berechtigung bittet, falls diese bereits gewährt wurde.

Klicken Sie auf das Symbol Vorschau ausführen . neben der Anmerkung @Preview oder oben in der Vorschau und Android Studio stellt diese @Preview auf Ihrem verbundenen Gerät oder Emulator bereit.

@Preview kopieren und rendern

Jede gerenderte Vorschau kann durch einen Rechtsklick als Bild kopiert werden.

Mehrere Vorschauen derselben @Preview-Anmerkung

Sie können mehrere Versionen derselben zusammensetzbaren Funktion @Preview präsentieren mit oder unterschiedliche Parameter, die an die zusammensetzbare Funktion übergeben werden. Dieses können Sie den Boilerplate-Code reduzieren, den Sie ansonsten schreiben müssten.

Vorlagen für die Multivorschau

androidx.compose.ui:ui-tooling-preview Multipreview ab 1.6.0-alpha01 API-Vorlagen: @PreviewScreenSizes, @PreviewFontScales, @PreviewLightDark, und @PreviewDynamicColors, sodass Sie mit einer einzelnen Annotation Vorschau der Editor-UI in gängigen Szenarien ansehen.

Benutzerdefinierte Multipreview-Anmerkungen erstellen

Mit der Mehrfachvorschau können Sie eine Anmerkungsklasse definieren, die @Preview-Annotationen mit unterschiedlichen Konfigurationen. Diese Anmerkung hinzufügen zu rendert eine zusammensetzbare Funktion automatisch alle Vorschauen einmal. Sie können diese Anmerkung z. B. dazu verwenden, eine Vorschau für mehrere Geräte, Schriftarten Größen oder Themen gleichzeitig, ohne diese Definitionen für alle einfach zusammensetzbar.

Erstellen Sie zuerst Ihre eigene benutzerdefinierte Anmerkungsklasse:

@Preview(
    name = "small font",
    group = "font scales",
    fontScale = 0.5f
)
@Preview(
    name = "large font",
    group = "font scales",
    fontScale = 1.5f
)
annotation class FontScalePreviews
AndroidStudioComposeSnippets.kt

Sie können diese benutzerdefinierte Anmerkung für zusammensetzbare Vorschauen verwenden:

@FontScalePreviews
@Composable
fun HelloWorldPreview() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

Sie können mehrere Anmerkungen der Mehrfachvorschau und der normalen Vorschauanmerkungen kombinieren. um einen umfassenderen Satz von Vorschauen zu erhalten. Multipreview-Anmerkungen kombinieren bedeutet das nicht, dass alle Kombinationen angezeigt werden. Stattdessen werden alle Multipreview-Anmerkungen agiert unabhängig voneinander und rendert nur ihre eigenen Varianten.

@Preview(
    name = "Spanish",
    group = "locale",
    locale = "es"
)
@FontScalePreviews
annotation class CombinedPreviews

@CombinedPreviews
@Composable
fun HelloWorldPreview2() {
    MaterialTheme { Surface { Text(stringResource(R.string.hello_world)) } }
}
AndroidStudioComposeSnippets.kt

Durch die Kombination der Mehrfachvorschau und der normalen Vorschau können Sie mehr umfassendes Testen vieler Eigenschaften größerer Projekte.

@Preview und große Datensätze

Häufig müssen große Datasets an die zusammensetzbare Funktion übergeben werden, in der Vorschau ansehen. Übergeben Sie dazu einfach Beispieldaten an eine zusammensetzbare Vorschaufunktion, indem Sie Parameter mit dem @PreviewParameter hinzufügen .

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
    UserProfile(user)
}
AndroidStudioComposeSnippets.kt

Um die Beispieldaten bereitzustellen, erstellen Sie eine Klasse, die PreviewParameterProvider und gibt den Fehlerwert als Folge von Beispieldaten an.

class UserPreviewParameterProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User("Elise"),
        User("Frank"),
        User("Julia")
    )
}
AndroidStudioComposeSnippets.kt

Dadurch wird eine Vorschau pro Datenelement in der Sequenz angezeigt:

Sie können dieselbe Anbieterklasse für mehrere Vorschauen verwenden. Begrenzen Sie bei Bedarf Anzahl der Vorschauen, indem Sie den Parameter limit festlegen.

@Preview
@Composable
fun UserProfilePreview2(
    @PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User
) {
    UserProfile(user)
}
AndroidStudioComposeSnippets.kt

Einschränkungen und Best Practices

Android Studio führt den Vorschaucode direkt im Vorschaubereich aus. Nicht einen Emulator oder ein physisches Gerät ausführen, Teil des Android-Frameworks namens Layoutlib. Layoutlib ist benutzerdefiniert Version des Android-Frameworks, das für die Ausführung außerhalb von Android-Geräten entwickelt wurde. Die Ziel der Bibliothek ist es, eine Vorschau eines Layouts in Android Studio zu bieten, dem Rendering auf Geräten sehr nahe.

Einschränkungen für Vorschauen

Aufgrund der Art, wie Vorschauen in Android Studio gerendert werden, und benötigen zum Rendern nicht das gesamte Android-Framework. Dies hat jedoch folgende Einschränkungen:

• Kein Netzwerkzugriff
• Kein Dateizugriff
• Einige Context APIs sind möglicherweise nicht vollständig verfügbar

Vorschauen und ViewModels

Vorschauen sind eingeschränkt, wenn ViewModel in einem zusammensetzbar. Im Vorschausystem können nicht alle Parameter, die an ein ViewModel übergeben werden, wie Repositories, Anwendungsfälle, Administratoren, oder Ähnliches. Wenn dein ViewModel an der Abhängigkeitsinjektion beteiligt ist (z. B. wie bei Hilt), kann das Vorschausystem nicht die gesamte Abhängigkeit Diagramm, um das ViewModel zu erstellen.

Wenn Sie versuchen, eine zusammensetzbare Funktion mit ViewModel in der Vorschau anzusehen, wird in Android Studio eine Fehler beim Rendern der zusammensetzbaren Funktion:

Wenn Sie eine Vorschau einer zusammensetzbaren Funktion mit ViewModel ansehen möchten, erstellen Sie weitere zusammensetzbare Funktion mit den Parametern aus ViewModel, die als Argumente von der zusammensetzbaren Funktion. So müssen Sie keine Vorschau der zusammensetzbaren Funktion anzeigen, in der die Funktion ViewModel

@Composable
fun AuthorColumn(viewModel: AuthorViewModel = viewModel()) {
  AuthorColumn(
    name = viewModel.authorName,
    // ViewModel sends the network requests and makes posts available as a state
    posts = viewModel.posts
  )
}

@Preview
@Composable
fun AuthorScreenPreview(
  // You can use some sample data to preview your composable without the need to construct the ViewModel
  name: String = sampleAuthor.name,
  posts: List<Post> = samplePosts[sampleAuthor]
) {
  AuthorColumn(...) {
    name = NameLabel(name),
    posts = PostsList(posts)
  }
}

Annotationsklasse @Preview

Du kannst jederzeit „Strg“ oder „⌘ + Klick“ drücken die Anmerkung @Preview in Android Studio an. Dort finden Sie eine vollständige Liste der Parameter, die Sie beim Anpassen Ihres in der Vorschau ansehen.

annotation class Preview(
    val name: String = "",
    val group: String = "",
    @IntRange(from = 1) val apiLevel: Int = -1,
    val widthDp: Int = -1,
    val heightDp: Int = -1,
    val locale: String = "",
    @FloatRange(from = 0.01) val fontScale: Float = 1f,
    val showSystemUi: Boolean = false,
    val showBackground: Boolean = false,
    val backgroundColor: Long = 0,
    @UiMode val uiMode: Int = 0,
    @Device val device: String = Devices.DEFAULT,
    @Wallpaper val wallpaper: Int = Wallpapers.NONE,
)
AndroidStudioComposeSnippets.kt

Weitere Informationen

Wenn du mehr darüber erfahren möchtest, wie Android Studio die Nutzerfreundlichkeit von @Preview fördert, Weitere Tool-Tipps finden Sie im Blog Compose Tools.

Empfehlungen für dich

• Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
• Daten auf lokaler Ebene mit CompositionLocal
• Material Design 2 in Compose
• Ansichten in „Compose“ verwenden