Jetpack Compose et aperçu composable | de Tomáš Repčík | janvier 2023

Tirez le meilleur parti de l’écran de prévisualisation lors du développement itératif

Avec le nouveau Android Studio Electric Eel, la prise en charge des aperçus composables a obtenu de nouvelles fonctionnalités telles que la définition de la taille de l’appareil Android, plusieurs aperçus avec la définition de classe, des exemples de sources de données et plus encore.

Les aperçus composables vous donnent la possibilité de voir l’état réel de vos composables sans émulateur. Ainsi, le développeur peut itérer plus rapidement avec divers paramètres et obtenir la vue composable finale souhaitée.

Si un nouveau composable est créé dans Android studio, la deuxième fonction avec une balise @Preview est généré en dessous, qui sert de point de départ pour vos aperçus. L’écran suivant est utilisé comme exemple pour créer de meilleurs aperçus.

Si les paramètres nécessaires sont ajoutés à notre composable, nous obtiendrons le résultat suivant. Si l’aperçu est manquant dans votre fichier composable, commencez à écrire prev et un indice d’Android Studio apparaît. En cliquant sur Entrée, Android Studio générera tout le code nécessaire.

@Preview
@Composable
fun WelcomeScreenPreview() {
AppTheme {
val navController = rememberNavController()
WelcomeScreen(navController = navController)
}
}

Pour le rendre beaucoup plus réaliste, nous pouvons ajouter quelques paramètres au @Preview.

• showBackground — le fond de l’appareil est rempli par la couleur par défaut ou par colorBackground paramètre
• backgroundColor – est une couleur ARGB 32 bits en Long. Vous devez multiplier manuellement la représentation de la couleur hexadécimale par un nombre Long, car le nombre doit être une constante du compilateur.
• showSystemUi – affiche la barre supérieure de navigation inférieure avec l’heure
• name — affiche le nom personnalisé de l’aperçu
• apiLevel — quelle version cible d’Android doit être utilisée
• fontScale — la mise à l’échelle de la police en fonction des paramètres du téléphone
• locale — pour changer les paramètres régionaux utilisés par la vue
• uiMode – peut modifier le masquage des couleurs de l’interface utilisateur en fonction de son choix (par exemple, en mode sombre)

@Preview(
showBackground = true,
backgroundColor = 256 * 256 * 256, // R * G * B
showSystemUi = true,
name = "Welcome Screen",
fontScale = 1f,
local = "en"
apiLevel = Build.VERSION_CODES.TIRAMISU,
uiMode = Configuration.UI_MODE_TYPE_NORMAL
)

Pour éviter d’intégrer l’arrière-plan, mettez dans votre arbre de composition le Surface, Scaffoldou autre composable avec arrière-plan et il créera l’arrière-plan pour vous.

@Preview implémente le dimensionnement de l’écran. L’écran peut être prévisualisé à plusieurs tailles d’écran à la fois. Vous pouvez également choisir des appareils prédéfinis ou votre largeur et votre hauteur. En train d’écrire id ou alors spec à l’intérieur de la chaîne affichera des conseils.

// for defining the specific device - names are checked by IDE
@Preview(device = "id:pixel_5")
// for defining the screen specifications - values are checked by IDE too
@Preview(device = "spec:width=411dp,height=891dp,dpi=410,orientation=portrait")

Les balises d’aperçu peuvent être regroupées dans une classe et réutilisées pour n’importe quelle autre vue. La création de plusieurs aperçus pour un composable n’est plus nécessaire. Pour créer plusieurs configurations d’écran, le annotation class doit être défini :

@Preview(device = "id:pixel_5")
@Preview(device = "id:pixel") // you can add any number of previews together
annotation class MultipleScreenSizePreview

@MultipleScreenSizePreview
@Composable
fun WelcomeScreenPreview() {
AppTheme {
Surface {
val navController = rememberNavController()
WelcomeScreen(navController = navController)
}
}
}

N’hésitez pas à mélanger différents appareils et spécifications de taille d’écran.

Vous pouvez également mélanger vos classes personnalisées !

// set of bright screens
@Preview(device = "id:pixel_5")
@Preview(device = "id:pixel")
annotation class BrightScreens

// set of dark screens
@Preview(device = « id:pixel_5 », uiMode = Configuration.UI_MODE_NIGHT_YES)
@Preview(device = « id:pixel », uiMode = Configuration.UI_MODE_NIGHT_YES)
annotation class DarkScreens

// combination of previews
@BrightScreens
@DarkScreens
@Composable
fun WelcomeScreenPreview() {
AppTheme {
Surface {
val navController = rememberNavController()
WelcomeScreen(navController = navController)
}
}
}

Les composables ont besoin de données à afficher ou d’état à afficher. Dans la plupart des cas, il suffit de passer manuellement un ou deux paramètres. Cependant, s’il y a beaucoup d’états ou de données volumineuses à transmettre, le code est bourré de toutes les entrées.

L’aperçu nous permet de créer un fournisseur de données où les données peuvent être séparées, chargées et transmises à l’aperçu.

Voici un exemple d’écran, qui peut aller entre les états de chargement, de réussite et d’erreur.

Voici les états disponibles :

sealed class MainState {
object LoadingState : MainState()
object SuccessState : MainState()
object ErrorState : MainState()
}

Créer PreviewParameterProvider<T>, le fournisseur doit implémenter cette interface et définir la classe de données. Voici la commodité des classes scellées.

class MainStateProvider : PreviewParameterProvider<MainState> {
override val values = sequenceOf(
MainState.LoadingState,
MainState.SuccessState,
MainState.ErrorState,
)
}

Les Values champ est remplacé et nous donne l’endroit où mettre nos données personnalisées. Pour chaque entrée, le fournisseur créera un nouvel aperçu. Le paramètre d’entrée est annoté avec notre fournisseur @PreviewParameter(MainStateProvider::class) et le compilateur s’occupera du reste.

@Preview(device = "id:pixel_5")
@Composable
fun MainScreenPrev(@PreviewParameter(MainStateProvider::class) state: MainState) {
MainScreen(state)
}

L’utilisation n’est pas limitée aux états. Explorez d’autres approches pour prévisualiser l’écran avec diverses données d’entrée et un seul fournisseur.

• Les aperçus vous permettent de voir rapidement les modifications, d’itérer et de comparer les vues sans lancer l’émulateur.
• La création d’aperçus vous obligera à conserver une logique et une interface utilisateur séparées, car cela prendra moins de temps.
• Pour obtenir un retour instantané sur plusieurs configurations d’appareils dans une grille.
• Les aperçus peuvent créer des images en cliquant dessus avec le bouton droit de la souris. Les images peuvent être partagées avec d’autres développeurs ou gestionnaires pour un retour rapide.
• Malheureusement, les aperçus ne remplacent pas les tests d’interface utilisateur et les tests de bout en bout.
• Rester simple!

Merci d’avoir lu!