Android Academy · Leçon

Espacement avec Padding

Utilisez Modifier pour gérer l’espacement.

Espacement avec Padding 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.

Qu’est-ce que le remplissage intérieur ?

Le remplissage intérieur est un espace vide ajouté autour du contenu d’un composable. Il éloigne le contenu des bords afin d’éviter une apparence trop serrée.

Dans Compose, vous ajoutez ce remplissage au moyen d’un modificateur.

Text(
    text = "Hello",
    modifier = Modifier.padding(16.dp)
)

L’unité dp

Les tailles de remplissage utilisent dp, qui signifie pixels indépendants de la densité. dp conserve la même taille physique sur tous les écrans.

Écrivez un nombre suivi de .dp, par exemple 8.dp ou 24.dp.

Modifier.padding(8.dp)

Qu’est-ce qu’un modificateur ?

Un modificateur décrit l’apparence et le comportement d’un composable : sa taille, son remplissage, son arrière-plan, etc.

Vous construisez les modificateurs en enchaînant des fonctions avec des points.

Modifier
    .padding(16.dp)
    .background(Color.Yellow)

Remplissage sur tous les côtés

Appeler padding(16.dp) avec une seule valeur ajoute le même espace sur les quatre côtés : en haut, en bas, au début et à la fin.

C’est la manière la plus rapide d’aérer le contenu.

Box(
    modifier = Modifier.padding(16.dp)
) {
    Text("Inside")
}

Remplissage horizontal et vertical

Vous pouvez définir les côtés séparément avec les paramètres horizontal et vertical.

L’horizontal couvre le début et la fin ; le vertical couvre le haut et le bas.

Modifier.padding(
    horizontal = 24.dp,
    vertical = 8.dp
)

Remplir un seul côté

Pour cibler un seul bord, nommez-le : début, haut, fin ou bas.

Vous pouvez ainsi ajuster précisément l’espacement là où vous en avez besoin.

Modifier.padding(
    start = 16.dp,
    top = 4.dp
)

L’ordre est important

L’ordre des modificateurs change le résultat. Placer le remplissage avant un arrière-plan laisse la zone de remplissage sans couleur ; le placer après permet à l’arrière-plan de la recouvrir.

Lisez les modificateurs de haut en bas, comme des calques.

Modifier
    .background(Color.Cyan)
    .padding(16.dp)

Espacement entre les éléments

Dans une Column ou une Row, utilisez Arrangement.spacedBy pour ajouter automatiquement des espaces identiques entre les enfants.

C’est plus propre que d’ajouter manuellement un remplissage à chaque enfant.

Column(
    verticalArrangement = Arrangement.spacedBy(12.dp)
) {
    Text("One")
    Text("Two")
}

Spacer pour créer des espaces

Un Spacer est un composable vide utilisé pour écarter les éléments. Donnez-lui une taille avec un modificateur.

Il est pratique pour créer un espace fixe entre deux éléments.

Column {
    Text("Top")
    Spacer(Modifier.height(16.dp))
    Text("Bottom")
}

Remplissage intérieur et marge

Compose ne possède pas de marge distincte. Vous créez un espace extérieur en plaçant le remplissage plus tôt dans la chaîne de modificateurs, avant la taille ou l’arrière-plan.

Un seul outil, le remplissage, gère donc l’espacement intérieur et extérieur selon son ordre.

Modifier
    .padding(16.dp)
    .background(Color.LightGray)
    .padding(8.dp)

Un espacement cohérent

Les bonnes applications utilisent quelques valeurs répétées, comme 4, 8, 16 et 24 dp. Les mises en page restent ainsi nettes et prévisibles.

Évitez les nombres choisis au hasard ; utilisez une petite échelle de valeurs.

Modifier.padding(16.dp)

Vérification rapide

Testez vos connaissances sur le remplissage.

Récapitulatif

Le remplissage ajoute de l’espace autour du contenu avec Modifier.padding et des valeurs en dp. Vous pouvez remplir tous les côtés, les côtés horizontalement ou verticalement, ou un seul bord.

L’ordre des modificateurs est important, et Arrangement.spacedBy ou Spacer gèrent les espaces entre les éléments.

Ensuite, vous découvrirez les couleurs et MaterialTheme.

Questions Fréquemment Posées

La leçon « Espacement avec Padding » est-elle gratuite ?

Oui — le texte complet de « Espacement avec Padding » 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 « Espacement avec Padding » ?

Utilisez Modifier pour gérer l’espacement. 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 « Espacement avec Padding » ?

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