Android JetPack Compose Preview
Android Studio vous offre la possibilité d'avoir un aperçu de vos composable sans pour autant exécuter l'application toute entière.
kotDans Jetpack Compose, nous pouvons voir l'aperçu de notre code dans Android Studio. Cela nous permet de voir la sortie sans exécuter notre application.
Cliquez sur split pour voir à la fois le code et l'aperçu.
Comment ajouter un aperçu ?
Vous devez ajouter l'annotation @Preview() avant la fonction composable. Après avoir ajouté cette annotation, nous pouvons voir l'aperçu de notre interface utilisateur.
@Preview ( )
@Composable
fun DefaultPreview( ) {
Text( "Hello World!" )
}
Personnalisation l’aperçu
Lorsque nous analysons la classe @Preview, elle possède de nombreuses fonctionnalités intéressantes. Cliquez (Command + clic ou ctrl + clic) sur l'annotation @Preview pour voir les options suivantes :
annotation class Preview(
val name: String = "",
val group: String = "",
@IntRange(from = 1) val apiLevel: Int = -1,
// TODO(mount): Make this Dp when they are inline classes
val widthDp: Int = -1,
// TODO(mount): Make this Dp when they are inline classes
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
)
Comment personnaliser ?
Name
@Preview(name = "Preview1" )
Si vous donnez l'argument name, il affichera le nom donné ("Preview1") dans votre zone de prévisualisation. Nous pouvons ajouter plusieurs aperçus dans la même classe, donc si vous donnez le nom, vous pouvez vous identifier facilement.
Background
La fonction composable ne définit aucun arrière-plan par elle-même, mais vous pouvez en ajouter un à l'aperçu en définissant showBackground = true dans l'annotation Preview. Il y a aussi l'argument backgroundColor pour changer la couleur.
@Preview( name = "Preview1" , showBackground = true , backgroundColor = 0xFF03A9F4 )
Width et Height
La fonction composable définit sa largeur et sa hauteur par défaut dans un wrap_content. Si vous voulez changer, passez les valeurs widthDp et heightDp souhaitées .
@Preview(name = "Preview1", showBackground = true, widthDp = 180, backgroundColor = 0xFFF3A9F4, heightDp = 70)
@Composable
fun DefaultPreview() {
Text(text = "Hello world")
}
Aperçu
SystemUI et Device
Vous pouvez prévisualiser une fonction composable dans un écran factice (avec une barre d'état, une barre d'outils et un menu de navigation). Définissez simplement showSystemUi = true et vous êtes prêt. Vous pouvez également modifier le cadre de périphérique utilisé — par exemple périphérique = Devices.PIXEL.
@Preview(name = "Preview1", device = Devices.PIXEL, showSystemUi = true)
@Composable
fun DefaultPreview( ) {
Text ( text = "Hello world" )
}
Aperçu
Plusieurs aperçus
Vous pouvez ajouter plusieurs aperçus. Ajoutez simplement l'annotation @Preview dans votre composable.
@Preview(name = "Preview1", showBackground = true, backgroundColor = 0xFF2196F3)
@Composable
fun Preview1() {
Text(text = "Hello world 1")
}
@Preview(name = "Preview2", showBackground = true, backgroundColor = 0xFF2196F3)
@Composable
fun Preview2() {
Text(text = "Hello world 2")
}
J'espère que vous avez compris l'idée de base de l'annotation @Preview. Veuillez vous référer à cette page officielle pour plus de détails.
Jetpack Compose tooling
Guide youtube officiel
Voir plus
0 commentaire(s)
Posts similaires
Android JetPack Compose Preview
Jetpack Compose : Mise en page avec Row ou Column
Présentation de JetPack Compose
Catégories
Soyez au courant des dernières tendances
Abonnez-vous pour obtenir les meilleurs articles, tutoriels, astuces et informations !
Laissez votre commentaire à @johnmbiya