Android JetPack Compose Preview

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