Android Academy · Leçon

Prévisualiser votre interface

Utilisez @Preview pour itérer rapidement.

Prévisualiser votre interface est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 4 leçons au total.

Pourquoi les aperçus sont utiles

Construire et exécuter une application sur un appareil prend du temps. Compose propose une manière plus rapide d'afficher votre interface : l'aperçu.

Un aperçu restitue un élément composable directement dans Android Studio. Vous pouvez ainsi vérifier votre mise en page sans lancer toute l'application sur un émulateur ou un téléphone.

L'annotation @Preview

Pour prévisualiser un élément composable, vous créez une fonction distincte et vous la marquez avec @Preview. Android Studio affiche alors son rendu dans le volet de conception.

La fonction d'aperçu elle-même est également un élément composable : elle porte donc à la fois @Preview et @Composable.

@Preview
@Composable
fun GreetingPreview() {
    Greeting("World")
}

Les aperçus ne prennent aucun paramètre

Une fonction d'aperçu ne doit prendre aucun paramètre. Compose doit pouvoir l'appeler seul et ne peut donc pas lui fournir d'arguments.

C'est pourquoi vous créez une fonction enveloppe : l'aperçu appelle votre élément composable réel et lui transmet des données d'exemple à afficher.

@Preview
@Composable
fun ProfilePreview() {
    ProfileCard(name = "Ada")
}

Nommer les fonctions d'aperçu

Une convention courante consiste à nommer l'aperçu d'après l'élément composable qu'il affiche, en terminant par Preview. Pour Greeting, vous écririez GreetingPreview.

Vous voyez ainsi immédiatement quel aperçu correspond à quel élément composable, notamment lorsque votre fichier s'agrandit.

@Preview
@Composable
fun HeaderPreview() {
    Header()
}

Donner un nom à un aperçu

Vous pouvez attribuer un libellé à un aperçu avec le paramètre name. Ce titre apparaît au-dessus de l'aperçu rendu dans Android Studio.

Des noms explicites permettent de distinguer facilement plusieurs aperçus en un coup d'œil.

@Preview(name = "Light Mode")
@Composable
fun CardPreview() {
    ProfileCard("Ada")
}

Afficher l'arrière-plan

Par défaut, un aperçu peut être rendu sur un arrière-plan transparent. Définissez showBackground = true pour dessiner une surface opaque derrière votre élément composable.

Les espacements et les couleurs sont ainsi beaucoup plus faciles à évaluer dans le volet de conception.

@Preview(showBackground = true)
@Composable
fun TextPreview() {
    Text("Hello!")
}

Plusieurs aperçus à la fois

Vous pouvez ajouter plusieurs annotations @Preview à une même fonction ou écrire plusieurs fonctions d'aperçu. Chacune est rendue séparément.

C'est pratique pour vérifier la même interface avec différentes données d'exemple, comme un nom court et un nom long.

@Preview
@Composable
fun ShortNamePreview() {
    Greeting("Ada")
}

@Preview
@Composable
fun LongNamePreview() {
    Greeting("Grace Hopper")
}

Prévisualiser différentes tailles

Les paramètres widthDp et heightDp définissent la taille de la zone d'aperçu. Vous pouvez ainsi tester l'apparence de votre mise en page dans une petite ou une grande zone.

Définir la taille de l'aperçu aide à repérer les textes qui se répartissent mal sur plusieurs lignes ou dont le contenu déborde.

@Preview(widthDp = 200, heightDp = 100)
@Composable
fun SmallPreview() {
    Greeting("Hi")
}

Aperçus en mode sombre

Vous pouvez prévisualiser l'apparence de votre interface avec un thème sombre en définissant le paramètre uiMode sur le mode nuit. Cela permet de repérer les couleurs qui semblent incorrectes sur un arrière-plan sombre.

Vérifier tôt les aperçus clair et sombre vous évite les mauvaises surprises par la suite.

@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun DarkPreview() {
    ProfileCard("Ada")
}

Aperçus interactifs et en direct

Android Studio peut mettre à jour l'aperçu pendant que vous écrivez : les modifications apparaissent presque instantanément. Il existe également un mode interactif qui permet de cliquer et de naviguer sans effectuer une compilation complète.

Les aperçus ne remplacent pas l'exécution de l'application, mais ils accélèrent considérablement la conception des écrans.

Les aperçus servent uniquement au débogage

Les fonctions d'aperçu sont des outils de développement. Elles ne font pas partie de l'application distribuée et n'apparaîtront pas aux utilisateurs.

Vous pouvez donc ajouter autant d'aperçus que vous le souhaitez avec des données d'exemple. Ils ne modifient que ce que vous voyez dans l'IDE.

@Preview(showBackground = true, name = "Final")
@Composable
fun FinalPreview() {
    InfoBlock()
}

Vérification rapide

Révisons une règle essentielle concernant les fonctions d'aperçu.

Récapitulatif

Vous avez appris que @Preview restitue un élément composable dans Android Studio, sans appareil nécessaire. Les fonctions d'aperçu ne prennent aucun paramètre ; elles enveloppent donc votre élément composable réel avec des données d'exemple.

Parmi les options utiles figurent name, showBackground, widthDp, heightDp et uiMode pour le mode sombre. Les aperçus sont des outils réservés au débogage. Ensuite, vous combinerez tout cela pour créer une véritable carte de profil.

Questions Fréquemment Posées

La leçon « Prévisualiser votre interface » est-elle gratuite ?

Oui — le texte complet de « Prévisualiser votre interface » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Android Academy, passe à CoddyKit PRO. Le cours Android Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Prévisualiser votre interface » ?

Utilisez @Preview pour itérer rapidement. Tu pratiques Android Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Android Academy ?

Aucune expérience préalable n'est requise. Android Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Prévisualiser votre interface » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Android Academy ?

Oui. Chaque leçon Android Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Android Academy