Construire une carte de profil
Combinez des composables en un écran.
Construire une carte de profil est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.
Notre objectif
Il est temps de mettre en pratique ce que vous avez appris. Nous allons créer une simple carte de profil : un nom et un intitulé de poste soigneusement empilés dans un encadré mis en forme.
Vous découvrirez au passage le Modifier, qui contrôle la taille, l'espacement et l'apparence des éléments composables.
Découvrez le Modifier
Un Modifier change l'apparence et le comportement d'un élément composable. Vous le transmettez par l'intermédiaire du paramètre modifier, accepté par la plupart des éléments composables.
Les modificateurs gèrent le remplissage intérieur, la taille, la couleur d'arrière-plan, les bordures et bien plus encore. Dans Compose, ils constituent le principal moyen de décorer votre interface.
Text(
"Ada Lovelace",
modifier = Modifier.padding(16.dp)
)Chaîner les modificateurs
Vous construisez un modificateur en enchaînant des appels séparés par des points. Chaque appel renvoie un nouveau modificateur : vous pouvez donc en combiner plusieurs.
L'ordre est important : un remplissage intérieur avant l'arrière-plan donne un résultat différent du même remplissage après l'arrière-plan. Lisez la chaîne de gauche à droite, comme une recette.
Modifier
.padding(16.dp)
.fillMaxWidth()Remplir la largeur
Le modificateur fillMaxWidth étire un élément composable sur tout l'espace horizontal disponible. Il convient parfaitement aux cartes qui doivent s'étendre sur toute la largeur de l'écran.
Il existe également fillMaxSize pour les deux directions, ainsi que size pour définir une largeur et une hauteur fixes.
Column(
modifier = Modifier.fillMaxWidth()
) {
Text("Profile")
}Ajouter un remplissage intérieur
Le remplissage intérieur ajoute de l'espace à l'intérieur d'un élément composable, entre son bord et son contenu. Utilisez Modifier.padding avec une valeur en dp.
Le remplissage intérieur empêche le texte de toucher les bords d'une carte, ce qui rend la mise en page plus agréable et plus nette.
Column(
modifier = Modifier.padding(16.dp)
) {
Text("Ada Lovelace")
Text("Mathematician")
}Ajouter un arrière-plan à la carte
Une couleur d'arrière-plan aide la carte à se distinguer. Appliquez-la avec le modificateur background et une valeur de couleur.
Combinez-le avec un remplissage intérieur afin de laisser suffisamment d'espace autour du texte.
Column(
modifier = Modifier
.background(Color.LightGray)
.padding(16.dp)
) {
Text("Ada Lovelace")
}Empiler le nom et l'intitulé
Dans le Column de la carte, nous empilons deux éléments de texte : un nom en gras en haut et un intitulé de poste plus léger en dessous.
Définir des valeurs différentes pour fontSize et fontWeight crée une hiérarchie visuelle claire entre les deux.
Column {
Text("Ada Lovelace", fontSize = 20.sp, fontWeight = FontWeight.Bold)
Text("Mathematician", fontSize = 14.sp)
}Le rendre réutilisable
Transformons la carte en un élément composable réutilisable qui prend un name et un title comme paramètres. Elle pourra ainsi afficher n'importe quelle personne.
C'est la même idée que dans la première leçon : transmettre les données et réutiliser l'interface partout.
@Composable
fun ProfileCard(name: String, title: String) {
Column {
Text(name)
Text(title)
}
}La carte de profil complète
Voici la carte avec tous ses éléments réunis : une colonne pleine largeur, un arrière-plan gris, un remplissage intérieur et deux lignes de texte mises en forme.
Remarquez comment la chaîne de modificateurs et les éléments enfants de la colonne réunissent tout ce que vous avez appris dans les leçons précédentes au sein d'un seul élément composable bien structuré.
@Composable
fun ProfileCard(name: String, title: String) {
Column(
modifier = Modifier
.fillMaxWidth()
.background(Color.LightGray)
.padding(16.dp)
) {
Text(name, fontSize = 20.sp, fontWeight = FontWeight.Bold)
Text(title, fontSize = 14.sp)
}
}Prévisualiser la carte
Ajoutez une fonction enveloppe @Preview pour afficher la carte dans Android Studio. Elle appelle ProfileCard avec des données d'exemple et affiche un arrière-plan.
Vous pouvez maintenant ajuster les espacements intérieurs ou les couleurs et observer instantanément la mise à jour du résultat.
@Preview(showBackground = true)
@Composable
fun ProfileCardPreview() {
ProfileCard("Ada Lovelace", "Mathematician")
}L'afficher à l'écran
Pour afficher la carte dans l'application en cours d'exécution, appelez-la dans setContent, au sein de votre activité. Cela relie votre élément composable à l'écran réel.
Vous êtes maintenant passé d'un seul élément composable à un composant d'interface complet et réutilisable.
setContent {
ProfileCard("Ada Lovelace", "Mathematician")
}Vérification rapide
Révisons comment les éléments composables obtiennent leur remplissage intérieur, leur taille et leur arrière-plan.
Récapitulatif
Vous avez créé une carte de profil complète en combinant Text, Column et Modifier. Les modificateurs vous permettent de chaîner padding, fillMaxWidth et background pour structurer et mettre en forme votre interface.
Vous avez rendu la carte réutilisable grâce aux paramètres name et title, vous l'avez prévisualisée avec @Preview et affichée via setContent. Vous avez ainsi créé un écran composable complet, du début à la fin. Félicitations !
Questions Fréquemment Posées
La leçon « Construire une carte de profil » est-elle gratuite ?
Oui — le texte complet de « Construire une carte de profil » 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 « Construire une carte de profil » ?
Combinez des composables en un écran. 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 4 sur 4.
Combien de temps prend la leçon « Construire une carte de profil » ?
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
- Qu’est-ce qu’un composable ?
- Bases de Text et Column
- Prévisualiser votre interface
- Construire une carte de profil