Return to Video

02-20 Padding vs. Margin

  • 0:00 - 0:02
    Bon travail jusqu'ici.
  • 0:02 - 0:05
    Vous êtes bien en route pour construire
    de vraiment grandes mises en page.
  • 0:05 - 0:09
    Toutefois, je vois un problème avec presque
    toutes les mises en page construites.
  • 0:09 - 0:13
    Les vues sont directement contre
    le bord du ViewGroup ou
  • 0:13 - 0:14
    contre le dispositif.
  • 0:14 - 0:16
    Pour toutes les mises en page que
    nous avons construites dans cette leçon
  • 0:16 - 0:20
    jusqu'ici, on pourrait leur ajouter un
    peu plus d'ongles visuelles, afin
  • 0:20 - 0:24
    qu'elles soient plus belles en ajoutant
    un peu plus d'espace blanc.
  • 0:24 - 0:26
    On fera ça en utilisant les concepts
    de padding et margin,
  • 0:26 - 0:29
    qu'on couvre dans cette vidéo.
  • 0:29 - 0:31
    Par exemple, on pourrait ajouter un
    peu plus d'espace banc ici, ici,
  • 0:31 - 0:34
    ou même en haut, afin
    que les vues ne soient pas bondées
  • 0:34 - 0:38
    contre le bord du parent et
    contre le bord du dispositif.
  • 0:38 - 0:39
    C'est vraiment une décision
    de conception,
  • 0:39 - 0:42
    car quelque fois vous ne voulez
    qu'il aille bord à bord, comme pour
  • 0:42 - 0:45
    l'effet complet d'image de purge dont
    je parlais plus tôt.
  • 0:45 - 0:49
    Mais en tout cas, vous pouvez utiliser
    l'espace blanc pour ajouter plus de marge,
  • 0:49 - 0:53
    pour que le contenu soit un peu
    plus facile à lire et parcourir.
  • 0:53 - 0:57
    Je vous montrerai l'effet en ajoutant
    padding ou margin à une vue.
  • 0:57 - 0:59
    Commençon avec TextView
    qui dit Salut.
  • 0:59 - 1:02
    Si on ajoute huit dips de
    padding à une vue,
  • 1:02 - 1:05
    alors ça le rendrait plus grand de huit
    dips dans chaque direction.
  • 1:05 - 1:08
    Si on ajoute un margin de disposition
    de huit dips au TextView,
  • 1:08 - 1:11
    alors voilà à quoi
    ça ressemblerait.
  • 1:11 - 1:13
    Afin d'ajouter un margin, vous devez
    le mettre dans un ViewGroup, donc
  • 1:13 - 1:16
    c'est pourquoi je l'ai dans cette
    disposition linéaire ici.
  • 1:16 - 1:19
    La disposition linéaire est celle
    qui prend le TextView original et
  • 1:19 - 1:21
    le pousse par huit dips.
  • 1:21 - 1:23
    De la gauche et du haut.
  • 1:23 - 1:26
    Et aussi par les côtés.
  • 1:26 - 1:28
    Ainsi même si vous
    déclarez padding ou
  • 1:28 - 1:33
    margin sur le TextView enfant, le padding
    sera manipulé par TextView lui-même.
  • 1:33 - 1:36
    Tandis que le margin est manipulé
    par le ViewGroup parent.
  • 1:36 - 1:40
    Si deux de ceux-ci sont sur un dispositif
    réel et vous n'avez pas d'arrière-plan pour
  • 1:40 - 1:43
    le TextView, alors techniquement
    les deux se ressembleraient.
  • 1:43 - 1:46
    Le texte commencerait à huit
    dips de la gauche et à
  • 1:46 - 1:48
    huit dips en-dessous du haut du
    dispositif.
  • 1:48 - 1:52
    Toutefois, si vous avez un background
    color
    pour le TextView,
  • 1:52 - 1:55
    alors l'utilisateur serait apte à voir
    que le TextView est si grand.
  • 1:55 - 1:59
    Alors que, sur l'autre dispositif,
    le TextView serait juste si grand.
  • 1:59 - 2:01
    Voici un code
    affichant padding sur une vue.
  • 2:02 - 2:07
    Sur l'élement XML du TextView, vous
    déclareriez un nouvel attribut qui dit,
  • 2:07 - 2:11
    padding du côlon android égal
    huit dips entre guillemets.
  • 2:11 - 2:12
    Vous pouvez choisisr n'importe quelle
    taille pour
  • 2:12 - 2:15
    le padding,
    tant que c'est une valeur dip.
  • 2:15 - 2:19
    Quand on spécifie huit dips de
    padding, il en ajoute à gauche,
  • 2:19 - 2:21
    en haut, en bas, et
    à droite du TextView.
  • 2:22 - 2:25
    Au lieu d'utiliser l'attribut général
    padding d'Android,
  • 2:25 - 2:29
    vous pouvez aussi le diviser à gauche,
    à droite, en haut ou en bas.
  • 2:29 - 2:33
    Essentiellement, ces quatres ligne de code
    fait la même chose que cette ligne unique.
  • 2:33 - 2:36
    Toutefois, ces contrôles à grains fins
    vous permettent d'avoir des valeurs padding
  • 2:36 - 2:39
    différents pour la gauche,
    la droite, le haut ou le bas.
  • 2:39 - 2:43
    Vous n'avez pas à avoir une même valeur
    padding pour les quatres directions.
  • 2:43 - 2:47
    La valeur par défaut du padding est zéro,
    donc si vous spécifiez gauche, droite et
  • 2:47 - 2:52
    haut, mais pas le bas, alors ce
    sera zéro pour le padding bottom .
  • 2:52 - 2:56
    Pour spécifier le margin, vous
    ajoutez encore un attribut à TextView.
  • 2:56 - 3:00
    Le nom de l'attribut est margin de
    disposition côlon de soulignement on peut
  • 3:00 - 3:03
    lui donner une valeur égale à, par
    exemple, huit trempettes.
  • 3:03 - 3:07
    Cela déplace le TextView enfant à
    huit trempettes du parent sur tous les bords.
  • 3:07 - 3:12
    S'il y avait un autre TextView enfant
    ici en haut, alors avoir un margin
  • 3:12 - 3:15
    pousserait ce TextView huit trempettes
    en-dessous de ce premier TextView.
  • 3:16 - 3:19
    Vous pouvez penser à avoir un margin
    comme ayant un peu de champ de force
  • 3:19 - 3:20
    autour de cette vue.
  • 3:20 - 3:24
    Aucune autre vue ne peut entrer ces
    région de huit trempettes autour d'elle.
  • 3:24 - 3:28
    Ou vous pouvez aussi diviser le margin
    de disposition en chacun des quatres directions,
  • 3:28 - 3:32
    disposition marginLeft,
    disposition marginRight, top, et bottom.
  • 3:32 - 3:36
    Si vous ne spécifiez aucune de ces
    valeurs, alors elle sera de zéro.
  • 3:36 - 3:39
    Pour rappeler que le ViewGroup
    est celui qui positionne ces
  • 3:39 - 3:42
    enfants basé sur le margin,
    vous pouvez voir les attributs.
  • 3:42 - 3:45
    Ils commencent tous avec une disposition
    de soulignement pour le margin.
  • 3:45 - 3:48
    De cette façon, vous savez que le ViewGroup
    est celui qui manipule la position
  • 3:48 - 3:49
    de ces vues.
  • 3:50 - 3:53
    Padding et margin
    peuvent s'appliquer à tous les vues.
  • 3:53 - 3:56
    Mettons les attributs que nous venons
    d'apprendre en pratique.
  • 3:56 - 3:58
    Ici j'ai trois TextViews
    dans une disposition linéaire.
  • 3:58 - 4:01
    Ils sont tous écrasés contre
    le bord gauche de l'écran, donc
  • 4:01 - 4:02
    je veux ajouter un peu d'espace.
  • 4:03 - 4:05
    Commençons en essayant
    d'ajouter quelque margin.
  • 4:06 - 4:08
    Cool, maintenant il y a plus
    d'espace autour de ce TextView.
  • 4:09 - 4:11
    Je ferais le même pour
    les deux autres TextViews.
  • 4:12 - 4:17
    Interéssant, donc c'est 16 dips ici,
    mais c'est en fait 32 dips car
  • 4:17 - 4:20
    on obtient huit dips de marge
    inférieure du premier TextView et
  • 4:20 - 4:23
    huit dips de marge supérieure
    du second TextView.
  • 4:23 - 4:25
    Si on veut que l'espacement
    soit cohérent, alors
  • 4:25 - 4:30
    c'est toujours 16 dips entre chaque vue
    alors on doit changer le margin ici.
  • 4:30 - 4:33
    Je peux le casser en des
    valeurs de margin individuelles.
  • 4:33 - 4:38
    Avec ce code, j'ai une marge à gauche de
    16 dips et une marge supérieure de 16 dips.
  • 4:38 - 4:41
    Il n'y a pas de marge inférieure
    de ce premier TextView, donc
  • 4:41 - 4:43
    cet espace entre eux est
    maintenant correct à 16 dips.
  • 4:43 - 4:47
    La même ira pour le
    dernier TextView.
  • 4:47 - 4:49
    Cool, maintenant tout l'espacement
    vertical est égal.
  • 4:50 - 4:53
    Précédemment, quand j'ai dit qu'on ajoute
    des espaces blancs aux bords de ces vues,
  • 4:53 - 4:56
    techniquement cet espace est
    transparent.
  • 4:56 - 4:59
    Vous pouvez voir à travers elle,
    pour ce qui est derrière elle.
  • 4:59 - 5:02
    Dans ce cas, on a un arrière-plan
    gris sur le ViewGroup.
  • 5:02 - 5:05
    La disposition aurait la même apparence sur
    le dispositif que nous utilisons un margin
  • 5:05 - 5:09
    ou un padding, car dans ce cas, on n'a
    aucun background color sur le TextView.
  • 5:10 - 5:12
    Ajoutons-le et
    voyons où les limites de chaque vue sont.
  • 5:13 - 5:16
    Ok, maintenant il y a un background
    color sur ce premier TextView.
  • 5:16 - 5:20
    Quand on a ajouté la marge à gauche et supérieure,
    on voit que le ViewGroup pousse juste
  • 5:20 - 5:23
    le TextView à huit et l'abaisse
    de huit.
  • 5:23 - 5:27
    On peut changer cela en padding, et
    maintenant on voit que TextView est plus grand
  • 5:27 - 5:30
    et reprend ces 8 dips d'espace
    sur la gauche et en haut.
  • 5:31 - 5:33
    Donc visuellement, les choses auraient
    un aspect différent sur le dispositif,
  • 5:33 - 5:35
    qu'on a un padding ou un margin.
  • 5:35 - 5:38
    S'il y a un background
    color
    sur ce TextView.
  • 5:38 - 5:41
    On peut faire de même pour les autres
    vues donc vous voyez que c'est bon.
  • 5:42 - 5:45
    Ajouter des valeurs padding et margin
    n'est pas juste limité à ces vues enfants,
  • 5:45 - 5:48
    vous pouvez aussi l'ajouter
    sur le ViewGroup.
  • 5:48 - 5:51
    Si j'ajoute une valeur padding pour
    la disposition linéaire.
  • 5:51 - 5:56
    Ensuite, vous pouvez voir qu'il décale la
    vue par 16 dips dans toutes les directions.
  • 5:56 - 5:59
    J'ai mentionné que vous pouviez définir toute
    valeur pour un padding ou un margin.
  • 5:59 - 6:01
    Mais comment savoir
    quelle valeur choisir?
  • 6:01 - 6:05
    Bien, les directives de conception matérielle
    vous recommande d'utiliser des incréments de
  • 6:05 - 6:06
    huit dips.
  • 6:06 - 6:09
    Ceci est une connaissance un peu plus
    avancée, mais essentiellement on veut que
  • 6:09 - 6:13
    les composants s'alignent sur l'écran
    le long de cette grille carrée de huit dips.
  • 6:13 - 6:16
    Maintenant les carrés n'apparaissent
    effectivement pas sur l'écran, mais
  • 6:16 - 6:18
    si vous voulez positionner
    du texte ici,
  • 6:18 - 6:21
    Vous pourriez vouloir le déplacer
    comme deux carrés à gauche.
  • 6:21 - 6:25
    Deux carrés sur cette grille
    égaleraient 16 dips.
  • 6:25 - 6:29
    Sur cette écran email, toutes
    les icône sont alignées sur cette ligne.
  • 6:29 - 6:33
    Elles sont positionnées à 16 dips du
    bord gauche de cet écran et tout
  • 6:33 - 6:38
    ce texte ici est positionné à 72 dips
    du bord gauche de cet écran.
  • 6:38 - 6:41
    Ainsi, vous pouvez genre imaginer que le
    contenu commence à suivre certaines
  • 6:41 - 6:42
    lignes ici.
  • 6:42 - 6:44
    Voici un autre moyen de le visualiser.
  • 6:44 - 6:47
    Dans cette capture d'écran
    de Google I/O app,
  • 6:47 - 6:54
    on a le contenu aligné à cette ligne de 16
    dips, autant que cette ligne de 72 dips.
  • 6:54 - 6:57
    C'est essentiellement à 72 dips
    du bord gauche de l'écran.
  • 6:57 - 6:59
    Et sur ce bord,
  • 6:59 - 7:03
    le contenu s'arrête 16 dips avant
    le bord droite de l'écran.
  • 7:03 - 7:05
    Sur la tablette,
    vous avez plus d'écran immobilier, donc
  • 7:05 - 7:07
    vous pouvez avoir un peu plus de
    padding.
  • 7:07 - 7:11
    Ça peut être à 24 dips du bord gauche
    de l'écran, et ainsi de suite pour
  • 7:11 - 7:12
    les autres valeurs.
  • 7:12 - 7:17
    La raison pourquoi nous recommandons ces valeurs
    est de rendre votre contenu facile à lire.
  • 7:17 - 7:20
    Par exemple, si ce titre était
    déplacé à un couple de pixels et
  • 7:20 - 7:24
    le sous-texte a été déplacé vers
    le droit à un couple de pixels,
  • 7:24 - 7:26
    il y aurait un bord dentelé ici.
  • 7:26 - 7:30
    Et cela distraira l'utilisateur de
    lire votre contenu actuel.
  • 7:30 - 7:35
    Alors en alignant tout, cela rend
    votre app facile à lire et à utiliser.
  • 7:35 - 7:38
    Voici un couple d'exemples réels
    de l'utilisation du padding et margin.
  • 7:38 - 7:40
    Dans cette capture d'écran du
    Google Calendar app,
  • 7:40 - 7:44
    on voit un peu de texte ici qui
    se déplace un peu par ici.
  • 7:44 - 7:47
    Il y a aussi un peu d'espace
    entre ces événements du calendrier.
  • 7:47 - 7:48
    Si on le met en œuvre à l'aide du
    padding,
  • 7:48 - 7:52
    alors ce background image s'étendra
    probablement dans cet espace blanc.
  • 7:52 - 7:56
    Au lieu de cela, si on utilise margin,
    alors il ajoute une petite zone autour de la vue,
  • 7:56 - 7:58
    alors c'est probablement margin.
  • 7:58 - 8:02
    Voici une autre capture de la page
    détail pour un événement du calendrier.
  • 8:02 - 8:06
    Il y a beaucoup de texte ici et ils
    semblent être plus large que les autres.
  • 8:06 - 8:09
    On peut créer ces écarts plus
    large en ajoutant padding.
  • 8:09 - 8:13
    Pour ajouter cet écart ici, vous pouvez
    ajouter un padding bottom à ce TextView,
  • 8:13 - 8:15
    ou vous pouvez ajouter un padding top
    à cette vue.
  • 8:16 - 8:18
    Tous ces moyens fonctionneraient.
  • 8:18 - 8:21
    Ou vous pourriez même le mettre en œuvre
    en utilisant un margin de disposition.
  • 8:21 - 8:24
    Vous ne pouvez vraiment pas dire la différence
    entre utiliser un margin ou un padding
  • 8:24 - 8:28
    dans ce cas, car l'arrière-plan
    du texte utilisé est transparent.
  • 8:28 - 8:31
    Maintenant c'est votre tour de pratiquer
    avec des options différentes des valeurs
  • 8:31 - 8:32
    de margin et padding.
  • 8:32 - 8:35
    Nous avons fourni un certain code initial pour
    que vous commenciez en utilisant ce lien.
  • 8:35 - 8:39
    Une fois que vous êtes à l'aise avec les valeurs
    padding et margin, avancez et
  • 8:39 - 8:40
    essayez de construire
    cette mise en page.
  • 8:41 - 8:46
    Par ailleurs, ce texte se trouve
    à 16 dips des bords ici.
  • 8:46 - 8:49
    Mais il y a seulement huit dips
    entre les deux TextViews.
  • 8:49 - 8:51
    Quand vous avez fini,
    cochez cette case.
Title:
02-20 Padding vs. Margin
Description:

more » « less
Video Language:
English
Team:
Udacity
Project:
UD837 - Android for Beginners
Duration:
08:52

French subtitles

Revisions