Return to Video

07-23 Les Étapes - Solution

  • 0:01 - 0:04
    Bon, je vais répondre à ces questions
    avant de commencer avec XML.
  • 0:05 - 0:07
    En premier, il faut
    sélectionner les modes d'affichage.
  • 0:07 - 0:09
    Je vais dessiner
    autour de ceux que je vois.
  • 0:10 - 0:11
    Il y a cinq modes d'affichage,
  • 0:11 - 0:14
    sans compter le groupe View,
    qui est vraiment un mode d'affichage.
  • 0:14 - 0:17
    Mais bon, ces cinq modes
    sont deux TextViews en haut ici,
  • 0:18 - 0:19
    et puis, trois boutons.
  • 0:19 - 0:24
    Et il n'y a pas vraiment d'ImageViews ici,
    donc on dit qu'il n'y pas d'ImageViews.
  • 0:24 - 0:26
    Peut-être que vous vous demandez
    pourquoi j'ai décidé
  • 0:26 - 0:28
    que ce sont deux TextViews différents.
  • 0:28 - 0:30
    Eh ben, dans le produit final,
  • 0:30 - 0:34
    le style pour l'Équipe A
    et le score ne se ressemblent pas.
  • 0:34 - 0:37
    Donc, j'ai décidé de les séparer
    pour avoir deux TextViews différents.
  • 0:37 - 0:40
    Regardons la deuxième étape
    où on positionne les modes d'affichage.
  • 0:40 - 0:43
    Je vais sélectionner
    quel groupe d'affichage je veux utiliser.
  • 0:43 - 0:46
    Et les deux auxquels je pense sont
    LinearLayout et RelativeLayout.
  • 0:47 - 0:49
    Ici on a une colonne verticale
    des modes d'affichage.
  • 0:49 - 0:53
    C'est plutôt clair pour moi ce je veux,
    c'est le LinearLayout.
  • 0:54 - 0:57
    Et pour finir, j'ai la troisième étape,
    ce qui consiste à styler les modes.
  • 0:57 - 1:00
    Et je vais travailler dessus
    pendant que je travaille avec XML.
  • 1:00 - 1:02
    Bien, travaillons maintenant sur XML.
  • 1:03 - 1:05
    Je veux regarder l'onglet Text.
  • 1:05 - 1:07
    Donc la première chose
    que je vais faire ici,
  • 1:07 - 1:10
    c'est de supprimer les choses
    dont je n'ai pas besoin.
  • 1:10 - 1:13
    Donc je vais procéder avec ça
    et je vais supprimer ce TextView.
  • 1:13 - 1:18
    Tous ces paddingLeft, paddingRight,
    paddingTop et paddingBottom,
  • 1:18 - 1:19
    je vais aussi les supprimer.
  • 1:20 - 1:23
    Je fais très attention à ne pas supprimer
    d'autres éléments par accident.
  • 1:23 - 1:24
    Bon.
  • 1:25 - 1:28
    On avait dit que le groupe d'affichage
    à utiliser n'est pas un RelativeLayout,
  • 1:28 - 1:30
    mais un LinearLayout,
    donc je vais changer ça maintenant.
  • 1:31 - 1:33
    Et à l'intérieur de ce LinearLayout,
  • 1:33 - 1:36
    je vais avoir deux TextViews
    et trois boutons.
  • 1:36 - 1:38
    Donc je vais commencer à les créer.
  • 1:38 - 1:40
    Je ne vais pas être précise tout de suite
  • 1:40 - 1:42
    concernant la largeur
    et la hauteur de TextView.
  • 1:43 - 1:45
    Pour l'instant, je vais laisser cela
    en tant que wrap_content,
  • 1:45 - 1:48
    ce qui va mettre le champ de TextView
    autour du texte.
  • 1:49 - 1:52
    Je vais écrire le texte
    pour ce TextView aussi.
  • 1:52 - 1:55
    Et ce premier TextView
    va simplement dire Team A, ou Équipe A.
  • 1:56 - 1:59
    Voyons à quoi ça ressemble
    dans l'aperçu, dans Preview.
  • 1:59 - 2:02
    Je peux voir un petit TextView là
    où est écrit Team A.
  • 2:02 - 2:04
    Créons-en encore quelques-uns de plus.
  • 2:04 - 2:07
    Donc celui en-dessous est le score,
    et c'est un TextView aussi.
  • 2:08 - 2:10
    Donc on va commencer
    à écrire un peu de texte.
  • 2:10 - 2:12
    Bien, je vois le mot TextView,
    donc j'appuie sur Entrée.
  • 2:12 - 2:15
    Et je vais aussi faire
    de cela du wrap_content.
  • 2:16 - 2:18
    Et je vais aussi ajouter du texte.
  • 2:18 - 2:21
    Ben le score commence normalement à zéro,
    donc on va le commencer à zéro.
  • 2:22 - 2:22
    Bon.
  • 2:23 - 2:24
    Maintenant, les boutons.
  • 2:24 - 2:26
    Donc je vais commencer
    à écrire le mot Button.
  • 2:26 - 2:28
    Allez-y et faites wrap_content
    pour ceux-ci aussi.
  • 2:28 - 2:32
    Maintenant, le premier bouton
    va afficher +3 points.
  • 2:32 - 2:34
    Je vais aller le copier
  • 2:35 - 2:36
    et puis le coller
  • 2:36 - 2:37
    une fois,
  • 2:37 - 2:39
    deux fois pour avoir encore deux boutons.
  • 2:40 - 2:42
    Et on va avoir un bouton qui dit +2 points
  • 2:43 - 2:45
    et un bouton
    qui dit Free Throw, ou Lancer Franc.
  • 2:45 - 2:47
    Bien, voyons
    à quoi ça ressemble dans Preview.
  • 2:48 - 2:51
    Bon, il semble que j'ai trois boutons.
  • 2:51 - 2:54
    Je peux voir Team A et zéro.
  • 2:54 - 2:56
    J'ai tous mes modes d'affichage,
  • 2:56 - 2:59
    mais ça ne ressemble pas vraiment
    au produit final voulu.
  • 2:59 - 3:01
    Ils sont dans une colonne verticale.
  • 3:01 - 3:03
    Je pense que je dois changer
    l'orientation de la mise en page,
  • 3:03 - 3:05
    donc c'est ce que je vais faire.
  • 3:05 - 3:09
    Je vais commencer par écrire orientation
    et je veux qu'elle soit verticale.
  • 3:10 - 3:12
    Bien, ça semble être mieux.
  • 3:12 - 3:17
    Donc ces boutons ont été élargis
    pour remplir la largeur de la fenêtre.
  • 3:17 - 3:21
    Je ne veux donc peut-être pas
    faire wrap_content pour les boutons,
  • 3:21 - 3:23
    je vais plutôt faire match_parent.
  • 3:23 - 3:25
    Je vais le changer maintenant.
  • 3:26 - 3:29
    Bon, la largeur de tous mes boutons
    sont maintenant match_parent.
  • 3:29 - 3:30
    Allons voir Preview.
  • 3:31 - 3:33
    Bien, c'est mieux maintenant,
    ils ont été élargis.
  • 3:33 - 3:34
    Bien.
  • 3:34 - 3:39
    Mon texte est toujours
    un peu coincé dans le coin,
  • 3:40 - 3:43
    et pour le corriger, je vais utiliser
    gravity ou de la pesanteur.
  • 3:44 - 3:46
    Donc nous voici avec un Google Drawing,
  • 3:46 - 3:49
    et créons un champ de saisie
    dans Google Drawing.
  • 3:50 - 3:52
    Donc c'est tout comme
    la bordure de TextView.
  • 3:53 - 3:55
    Je peux écrire les mots Team A,
  • 3:55 - 3:58
    et par défaut, ça sera
    dans le coin en haut à gauche.
  • 3:58 - 4:01
    Et c'est la même chose avec les TextViews,
    quand on met du texte dans TextView,
  • 4:01 - 4:03
    par défaut, ça sera
    dans le coin en haut à gauche.
  • 4:03 - 4:06
    Donc, avec Google Drawing,
    je peux sélectionner ce texte
  • 4:07 - 4:11
    et utiliser l'équivalent d'un attribut,
    appelé une ligne,
  • 4:12 - 4:15
    pour le centrer horizontalement
    dans le champ de saisie
  • 4:16 - 4:19
    et pour le centrer verticalement
    dans le champ de saisie.
  • 4:19 - 4:20
    C'est plutôt cool.
  • 4:20 - 4:22
    Prendre le contenu de ce mode d'affichage
  • 4:22 - 4:25
    et le déplacer à l'intérieur
    du contour de ce mode
  • 4:25 - 4:27
    est le rôle de LayoutGravity.
  • 4:27 - 4:30
    Et si vous pensez que c'est semblable
    à certaines des méthodes d'alignement
  • 4:30 - 4:32
    qu'on peut utiliser avec RelativeLayout,
  • 4:32 - 4:33
    c'est exact,
  • 4:33 - 4:36
    mais on peut utiliser
    l'attribut Gravity avec LinearLayout,
  • 4:36 - 4:38
    ce qui le rend plus puissant.
  • 4:38 - 4:39
    On va le regarder dans la version code.
  • 4:40 - 4:44
    Donc je vais prendre mon premier TextView
    et je vais écrire gravity.
  • 4:45 - 4:47
    Bon.
    Avec gravity, on a deux options :
  • 4:47 - 4:49
    layout_gravity et gravity.
  • 4:49 - 4:51
    Je viens
    d'expliquer les attributs gravity.
  • 4:51 - 4:53
    Donc on va utiliser celui-là.
  • 4:53 - 4:55
    Bon. Et puis, j'ai un tas d'options ici,
  • 4:56 - 4:58
    et je pense que je veux
    que ce soit centré horizontalement.
  • 4:58 - 5:00
    Donc c'est ce que je vais utiliser.
  • 5:00 - 5:03
    Et je vais aller l'effet
    que ça a eu dans Preview.
  • 5:04 - 5:08
    On ne voit pas un grand changement,
    mais il y a une raison pour cela.
  • 5:09 - 5:13
    Si j'appuie ici et on fait un zoom dessus
    car c'est difficile pour vous de le voir.
  • 5:15 - 5:20
    Bien, alors ici on a Équipe A,
    et on peut à peu près voir le contour.
  • 5:21 - 5:25
    Ben si je vous disais que c'est centré
    à l'intérieur de ce mode d'affichage,
  • 5:25 - 5:27
    ce serait dur de prouver le contraire.
  • 5:27 - 5:31
    Ça semble être centré à l'intérieur
    de ce mode, c'est juste petit.
  • 5:31 - 5:33
    Retournons à notre Google Drawing.
  • 5:33 - 5:38
    C'est comme si je rétrécissais la taille
    pour qu'elle soit la taille du texte.
  • 5:39 - 5:40
    C'est centré,
  • 5:40 - 5:44
    mais ce n'est pas si différent
    par rapport à quand c'est aligné à gauche.
  • 5:45 - 5:47
    Donc, si je veux
    que ce soit centré sur l'écran,
  • 5:47 - 5:50
    j'ai besoin d'élargir le TextView
    pour être la longueur de l'écran,
  • 5:50 - 5:52
    on va donc devoir changer la largeur.
  • 5:54 - 5:56
    Donc ici, je vais fermer l'onglet Preview.
  • 5:57 - 5:59
    Je vais travailler avec la largeur ici.
  • 6:00 - 6:04
    Au lieu de faire wrap_content,
    je vais faire match_parent.
  • 6:05 - 6:06
    Regardons Preview encore.
  • 6:07 - 6:08
    Zoomons en arrière.
  • 6:09 - 6:11
    C'est beaucoup mieux comme ça.
  • 6:11 - 6:12
    Ça semble être centré.
  • 6:12 - 6:14
    Faisons la même chose avec le score ici.
  • 6:16 - 6:18
    Donc je vais ajouter gravity ici aussi,
  • 6:18 - 6:20
    et gravity dans tous les layout_gravity.
  • 6:21 - 6:23
    center_horizontal
  • 6:24 - 6:26
    Je vais changer les largeurs
    à match_parent.
  • 6:27 - 6:29
    Vérifiions de nouveau.
  • 6:29 - 6:31
    Génial ! Tout est centré.
  • 6:31 - 6:32
    Ça semble être plutôt bien.
  • 6:32 - 6:34
    Sauf que tout est serré ensemble,
  • 6:34 - 6:37
    il n'y a pas beaucoup de place
    pour que ces éléments puissent respirer.
  • 6:37 - 6:40
    Je vais donner à tous ces TextViews,
    un padding de quatre.
  • 6:42 - 6:46
    Je vais commencer à taper padding,
    je vais faire 4dp.
  • 6:47 - 6:48
    Souvenez-vous de dp ?
  • 6:48 - 6:52
    Et j'utilise seulement padding,
    pas de padding bottom, rien de cela.
  • 6:52 - 6:55
    Et on aura 4dp tout autour le TextView.
  • 6:55 - 6:58
    Voyons à quoi ça ressemble dans Preview.
  • 6:58 - 7:01
    Bien, ça me donne un peu plus d'espace.
  • 7:01 - 7:04
    Je vais faire la même chose
    avec le TextView pour le score.
  • 7:08 - 7:11
    Maintenant, je vais essayer
    de faire la même chose avec le bouton.
  • 7:16 - 7:19
    Mouais... il n'y a de grands changements.
  • 7:19 - 7:23
    Et si je l'agrandissais un peu,
    jusqu'à huit ?
  • 7:24 - 7:25
    Ou vingt ?
  • 7:26 - 7:29
    Intéressant...ça semble
    agrandir le bouton lui-même.
  • 7:30 - 7:32
    Je ne veux pas que le bouton s'agrandisse.
  • 7:32 - 7:34
    Je veux que l'espace
    autour du bouton s'agrandisse.
  • 7:34 - 7:37
    En fait, ça serait mieux
    pour layout_margin.
  • 7:38 - 7:41
    Padding ajoute de l'espace
    à l'intérieur du mode d'affichage,
  • 7:41 - 7:43
    alors que margin met
    de l'espace à l'extérieur du mode.
  • 7:44 - 7:45
    Donc on le change à layout_margin.
  • 7:46 - 7:47
    Je vais faire 8dp.
  • 7:48 - 7:49
    C'est mieux comme ça.
  • 7:50 - 7:53
    Alors il y a de l'espace
    autour du mode et entre les deux modes.
  • 7:53 - 7:55
    Faisons-le maintenant
    avec les autres boutons.
  • 7:56 - 7:59
    Margin et non padding :
    layout_margin.
  • 8:00 - 8:01
    Donc ça c'est plutôt bien.
  • 8:01 - 8:04
    Alors si vous aviez choisi
    des attributs différents des miens,
  • 8:04 - 8:08
    peut-être que vous avez mis un padding
    de cinq et non de quatre, pas de problème.
  • 8:08 - 8:11
    En ce moment, j'essaye
    seulement de le rendre lisible.
  • 8:12 - 8:15
    On va s'occuper de la taille de la police
    et de belles couleurs plus tard.
  • 8:17 - 8:18
    D'accord.
  • 8:18 - 8:20
    Et joli travail.
    Vous avez fini cette étape.
タイトル:
07-23 Les Étapes - Solution
概説:

more » « less
Video Language:
English
Team:
Udacity
プロジェクト:
UD837 - Android for Beginners
Duration:
08:22

French subtitles

改訂 Compare revisions