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
Ä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 unterschiedlichen 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")
}
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 in der Vorschau 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
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
ContextAPIs 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,
)
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