Eine zusammensetzbare Funktion wird durch eine Funktion definiert und mit @Composable
annotiert:
@Composable fun SimpleComposable() { Text("Hello World") }
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() }
Die Annotation @Preview
weist Android Studio darauf hin,
zusammensetzbar ist, sollte in der Designansicht dieser Datei angezeigt werden. Sie können sich die
werden während der Bearbeitung aktualisiert.
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") } }
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)) }
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") }
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") }
![Ein Vorschaufenster mit einer Aktivität sowie Status- und Aktionsleisten](https://developer.android.google.cn/static/develop/ui/compose/images/tooling-decorated-preview.png?authuser=8&hl=de)
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!") } }
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. Anmerkung hinzufügen zu
rendert eine zusammensetzbare Funktion automatisch alle Vorschauen
einmal. Sie können diese Anmerkung z. B. zur Vorschau mehrerer 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
Sie können diese benutzerdefinierte Anmerkung für zusammensetzbare Vorschauen verwenden:
@FontScalePreviews @Composable fun HelloWorldPreview() { Text("Hello World") }
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)) } } }
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) }
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") ) }
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) }
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 sind. 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, sich 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, )
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