Compatibilité d'Android Studio avec Compose

Android Studio propose un grand nombre de nouvelles fonctionnalités spécialement conçues pour Jetpack Compose. Il suit une approche axée sur le code tout en améliorant la productivité des développeurs, sans avoir à choisir entre une interface de conception ou un éditeur de code uniquement.

L'une des différences essentielles entre l'interface utilisateur basée sur les vues et Jetpack Compose est que Compose ne s'appuie pas sur View pour afficher ses composables. Grâce à cette approche architecturale, Android Studio est en mesure de proposer des fonctionnalités étendues pour Jetpack Compose sans qu'il soit nécessaire d'ouvrir un émulateur ni de se connecter à un appareil, contrairement aux vues Android. Les développeurs disposent ainsi d'un processus itératif plus rapide pour implémenter la conception de leur interface utilisateur.

Pour activer les fonctionnalités spécifiques à Android Studio pour Jetpack Compose, vous devez ajouter les dépendances suivantes dans le fichier build.gradle de votre application :

debugImplementation "androidx.compose.ui:ui-tooling:1.3.0"
implementation "androidx.compose.ui:ui-tooling-preview:1.3.0"

Aperçu du composable

Un composable est défini par une fonction, annotée avec @Composable :

@Composable
fun SimpleComposable() {
    Text("Hello World")
}

Élément de texte simple contenant les mots "Hello World"

Pour afficher un aperçu de ce composable, vous devez créer un autre composable, annoté avec @Composable et @Preview, en émettant le composable que vous avez créé initialement :

@Preview
@Composable
fun ComposablePreview() {
    SimpleComposable()
}

Enfin, cliquez sur la vue fractionnée (conception/code) pour ouvrir le panneau latéral de droite, dans lequel l'aperçu sera affiché :

Sélecteur "Vue fractionnée" d'Android Studio

Affichage de texte simple dans la fenêtre d'aperçu

Vous pouvez ajouter des paramètres manuellement dans votre code pour personnaliser la manière dont Android Studio affiche @Preview.

Fonctionnalités @Preview

Android Studio propose plusieurs fonctionnalités pour étendre l'aperçu des composables. Vous pouvez modifier leur conception de conteneur, interagir avec ou les déployer directement sur un émulateur ou un appareil.

LocalInspectionMode

Vous pouvez lire le CompositionLocal LocalInspectionMode pour voir si le composable est affiché dans un aperçu. Cela vous permet, par exemple, d'afficher une image d'espace réservé dans la fenêtre d'aperçu au lieu d'afficher des données réelles. Si la composition est affichée dans un aperçu, LocalInspectionMode.current prend la valeur true.

if (LocalInspectionMode.current) {
    // Show this text in a preview window:
    Text("Hello preview user!")
} else {
    // Show this text in the app:
    Text("Hello $name!")
}

Mode interactif

Le mode interactif vous permet d'interagir avec un aperçu comme sur un appareil. Il est isolé dans un environnement de bac à sable (isolé des autres aperçus), où vous pouvez cliquer sur des éléments et effectuer des saisies dans l'aperçu. L'aperçu lit même les animations. C'est un moyen rapide de tester différents états et gestes de votre composable, comme une case cochée ou vide.

Le mode interactif de l'aperçu s'exécute directement dans Android Studio, sans émulateur. Il existe donc certaines limites :

  • Aucun accès au réseau
  • Aucun accès aux fichiers
  • Certaines API Context peuvent ne pas être entièrement disponibles.

Utilisateur cliquant sur le bouton "interactif" de l'aperçu

Vidéo de l'utilisateur qui interagit avec un aperçu

Déployer l'aperçu

Vous pouvez déployer un @Preview spécifique sur un émulateur ou un appareil physique. L'aperçu est déployé dans la même application de projet qu'une nouvelle activité. Il partage donc le même contexte et les mêmes autorisations, ce qui signifie que vous n'avez pas à écrire de code récurrent, comme demander une autorisation si elle a déjà été accordée.

Cliquez sur l'icône Déployer sur l'appareil  à côté de l'annotation @Preview ou en haut de l'aperçu. Android Studio déploiera @Preview sur votre appareil ou votre émulateur connecté.

Utilisateur cliquant sur le bouton "Déployer" de l'aperçu

Vidéo de l'utilisateur déployant un aperçu sur l'appareil

Annotations d'aperçus multiples

L'aperçu multiple vous permet de définir une classe d'annotation comportant elle-même plusieurs annotations @Preview avec des configurations différentes. Ajouter cette annotation à une fonction modulable affiche automatiquement tous les aperçus en une seule fois. Par exemple, vous pouvez utiliser cette annotation pour prévisualiser plusieurs appareils, tailles de police ou thèmes en même temps sans répéter ces définitions pour chaque composable.

Commencez par créer votre propre classe d'annotation personnalisée :

@Preview(
    name = "small font",
    group = "font scales",
    fontScale = 0.5f
)
@Preview(
    name = "large font",
    group = "font scales",
    fontScale = 1.5f
)
annotation class FontScalePreviews

Vous pouvez utiliser cette annotation personnalisée pour vos composables d'aperçu :

@FontScalePreviews
@Composable
fun HelloWorldPreview() {
    Text("Hello World")
}

Onglet "Conception" d'Android Studio montrant le composable avec une petite et une grande police

Vous pouvez combiner plusieurs annotations d'aperçus multiples et d'aperçus normaux pour créer un ensemble d'aperçus plus complet. Combiner des annotations d'aperçus multiples ne signifie pas que toutes les différentes combinaisons sont affichées. Chaque annotation d'aperçus multiples agit indépendamment et n'affiche que ses propres variantes.

@Preview(
    name = "dark theme",
    group = "themes",
    uiMode = UI_MODE_NIGHT_YES
)
@FontScalePreviews
@DevicePreviews
annotation class CombinedPreviews

@CombinedPreviews
@Composable
fun HelloWorldPreview() {
    MyTheme { Surface { Text("Hello world") } }
}

Onglet "Conception" d'Android Studio montrant le composable dans toutes ses configurations

Navigation dans le code et contours d'un composable

Vous pouvez pointer sur un aperçu pour afficher les contours des composables qu'il contient. Cliquez sur le contour d'un composable pour accéder à sa définition dans la vue de l'éditeur.

Utilisateur pointant sur un aperçu, entraînant l'affichage par Studio des contours de ses composables

Copier le rendu @Preview

Chaque aperçu affiché peut être copié en tant qu'image en effectuant un clic droit dessus.

Utilisateur cliquant sur un aperçu pour le copier en tant qu'image

Définir la couleur de l'arrière-plan

Par défaut, votre composable s'affiche avec un arrière-plan transparent. Pour ajouter un arrière-plan, ajoutez les paramètres showBackground et backgroundColor. N'oubliez pas que backgroundColor est un ARGB Long et non une valeur Color :

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
    Text("Hello World")
}

Rectangle vert avec les mots "Hello World"

Dimensions

Par défaut, les dimensions @Preview sont choisies automatiquement pour encapsuler son contenu. Si vous souhaitez définir les dimensions manuellement, vous pouvez ajouter les paramètres heightDp et widthDp. N'oubliez pas que ces valeurs sont déjà interprétées comme Dp. Vous n'avez pas besoin d'ajouter .dp à la fin de la valeur :

@Preview(widthDp = 50, heightDp = 50)
@Composable
fun SquareComposablePreview() {
    Box(Modifier.background(Color.Yellow)) {
        Text("Hello World")
    }
}

Carré jaune avec les mots "Hello World"

Langue

Pour tester différents paramètres régionaux utilisateurs, vous devez ajouter le paramètre locale :

@Preview(locale = "fr-rFR")
@Composable
fun DifferentLocaleComposablePreview() {
    Text(text = stringResource(R.string.greetings))
}

Élément de texte simple contenant le mot "Bonjour" avec un drapeau français

UI du système

Si vous devez afficher les barres d'état et d'action dans un aperçu, ajoutez le paramètre showSystemUi :

@Preview(showSystemUi = true)
@Composable
fun DecoratedComposablePreview() {
    Text("Hello World")
}

Fenêtre d'aperçu montrant une activité avec les barres d'état et d'action

@PreviewParameter

Vous pouvez transmettre des exemples de données à une fonction Aperçu du composable en ajoutant un paramètre avec l'annotation @PreviewParameter.

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
    UserProfile(user)
}

Pour fournir les exemples de données, créez une classe qui implémente PreviewParameterProvider et renvoie les exemples de données sous forme de séquence.

class UserPreviewParameterProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User("Elise"),
        User("Frank"),
        User("Julia")
    )
}

Un aperçu s'affiche pour chaque élément de données de la séquence :

Vous pouvez utiliser la même classe de fournisseur pour plusieurs aperçus. Si nécessaire, limitez le nombre d'aperçus à afficher en définissant le paramètre "limit".

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User
) {
    UserProfile(user)
}

Mode UI

Le paramètre uiMode peut utiliser n'importe quelle constante Configuration.UI_* et vous permet de modifier le comportement de l'aperçu en conséquence. Par exemple, vous pouvez passer l'aperçu en mode Nuit pour observer la réaction du thème.

UI d'aperçu de Compose

Actions de l'éditeur

Android Studio propose également diverses fonctionnalités dans la zone de l'éditeur pour améliorer votre productivité lorsque vous utilisez Jetpack Compose.

Modèles actifs

Android Studio a ajouté ces modèles actifs associés à Compose, qui vous permettent d'insérer rapidement des extraits de code en saisissant l'abréviation correspondante :

  • comp pour configurer une fonction @Composable
  • prev pour créer une fonction modulable @Preview
  • paddp pour ajouter un modificateur padding dans dp
  • weight pour ajouter un modificateur weight
  • W, WR ou WC pour placer le composable actuel dans un conteneur Box, Row ou Column

Icônes dans la marge

Les icônes dans la marge sont des actions contextuelles visibles dans la barre latérale, à côté des numéros de ligne. Android Studio propose plusieurs icônes de marge propres à Jetpack Compose pour faciliter le travail des développeurs.

Déployer l'aperçu

Vous pouvez déployer un @Preview sur l'émulateur ou l'appareil physique directement depuis l'icône de marge :

Utilisateur cliquant sur l'icône de déploiement dans la marge d'une fonction d'aperçu et déployant l'aperçu sur l'appareil.

Sélecteur de couleur

Chaque fois qu'une couleur est définie à l'intérieur ou à l'extérieur d'un composable, son aperçu s'affiche dans la marge. Vous pouvez modifier la couleur à l'aide du sélecteur de couleur en cliquant dessus :

Utilisateur cliquant sur une couleur dans la marge pour afficher le sélecteur de couleur

Sélecteur de ressource d'image

Chaque fois qu'un dessin, un vecteur ou une image sont définis à l'intérieur ou à l'extérieur d'un composable, leur aperçu s'affiche dans la marge. Vous pouvez le modifier via le sélecteur de ressource d'image en cliquant dessus :

Utilisateur cliquant sur une icône dans la marge pour afficher le sélecteur de ressource

Développement de code itératif

En tant que développeur d'applications mobiles, vous développez souvent l'interface utilisateur de votre application étape par étape plutôt que tout en même temps. Android Studio s'adapte à cette approche grâce à Jetpack Compose, en fournissant des outils qui ne nécessitent pas une compilation complète pour inspecter, modifier les valeurs et vérifier le résultat final.

Modification en temps réel de littéraux

Android Studio peut mettre à jour en temps réel certains littéraux constants utilisés dans les composables dans les aperçus, l'émulateur et l'appareil physique. Voici quelques types pris en charge :

  • Int
  • String
  • Color
  • Dp
  • Boolean

Vidéo de l'utilisateur modifiant des littéraux dans le code source. L'aperçu est mis à jour de façon dynamique.

Vous pouvez afficher des littéraux constants qui déclenchent des mises à jour en temps réel sans l'étape de compilation. Pour ce faire, activez la décoration des littéraux via l'indicateur d'UI Modification en temps réel de littéraux.

Activation de Modification en temps réel de littéraux

Modification en temps réel

Pour accélérer le processus de développement dans Compose, utilisez Modification en temps réel dans les versions Canary d'Android Studio Flamingo. La Modification en temps réel est une version plus performante de la fonctionnalité Modification en temps réel de littéraux. Elle vous permet de voir l'effet des mises à jour des composables en temps réel en déployant automatiquement des modifications de code sur un émulateur ou un appareil.

Aperçu de l'UI Modification en temps réel

Appliquer les modifications

L'option Appliquer les modifications vous permet de mettre à jour le code et les ressources sans avoir à redéployer votre application sur un émulateur ou un appareil physique (avec certaines limites).

Chaque fois que vous ajoutez, modifiez ou supprimez des composables, vous pouvez mettre à jour votre application sans avoir à la redéployer en cliquant sur ce bouton :

Utilisateur cliquant sur le bouton "Appliquer les modifications"

Outil d'inspection de la mise en page

L'outil d'inspection de la mise en page vous permet d'inspecter une mise en page Compose dans une application en cours d'exécution dans un émulateur ou un appareil physique.

Obtenir le nombre de recompositions

Vous pouvez utiliser l'outil d'inspection de la mise en page pour vérifier la fréquence à laquelle un composable est recomposé ou ignoré. Si l'interface utilisateur présente des performances médiocres, cela est souvent dû à une erreur de codage qui force sa recomposition de façon excessive. À l'inverse, certaines erreurs de codage peuvent empêcher la recomposition de votre UI alors qu'elle doit l'être, ce qui signifie que les modifications de l'UI n'apparaissent pas à l'écran. Suivre les recompositions permet de détecter ces deux types de problèmes.

Pour suivre la recomposition, activez Afficher le nombre de recompositions dans les options d'affichage :

Nombre de recompositions activé dans les options d'affichage

Une fois cette option activée, l'outil d'inspection de la mise en page affiche le nombre de recompositions à gauche et les recompositions ignorées à droite :

Nombre de recompositions affiché dans l'outil d'inspection de la mise en page

Si vous double-cliquez sur un composable dans l'outil d'inspection de la mise en page, vous êtes redirigé vers le code correspondant afin de l'analyser.

Animations

Android Studio vous permet d'inspecter les animations à partir de l'aperçu de l'animation. Si une animation est décrite dans l'aperçu d'un composable, vous pouvez inspecter la valeur exacte de chaque valeur animée à un moment donné, ou bien encore mettre en pause l'animation, la lire en boucle, l'avancer rapidement ou la ralentir. Cela vous permet de déboguer plus facilement l'animation tout au long de ses transitions :

Lire, parcourir et ralentir AnimatedVisibility

Vous pouvez également utiliser l'aperçu de l'animation pour visualiser les courbes d'animation dans un graphique, ce qui vous permet de vous assurer que les valeurs de l'animation sont correctement chorégraphiées :

Visualisation d'une courbe d'animation

L'aperçu de l'animation détecte automatiquement les animations qui peuvent être inspectées, comme indiqué par l'icône Démarrer l'inspection d'animation Icône Exécuter.

Icône Démarrer l'inspection d'animation dans la fenêtre de conception

L'aperçu de l'animation est actuellement compatible avec l'API updateTransition. Pour utiliser l'aperçu de l'animation avec updateTransition, utilisez Compose 1.0.1 ou version ultérieure.

Activer les fonctionnalités expérimentales

Certaines fonctionnalités ne sont disponibles qu'après les avoir activées manuellement dans la section dédiée dans les préférences d'Android Studio : Fichier > Paramètres > Fonctionnalités expérimentales (Android Studio > Préférences > Fonctionnalités expérimentales sur Mac).

Outils Compose activés dans les préférences expérimentales d'Android Studio