Return to Video

07-23 Les Étapes - Solution

  • 0:01 - 0:05
    Bon, je vais répondre à ces questions
    avant de commencer avec XML.
  • 0:05 - 0:07
    En premier,
    il faut sélectionner le mode d'affichage.
  • 0:07 - 0:09
    Je vais dessiner
    autour de ceux que je vois.
  • 0:10 - 0:11
    Donc, 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:18
    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 va dire pas d'ImageViews.
  • 0:24 - 0:25
    Peut-être que vous vous demandez
    pourquoi j'ai décidé
  • 0:25 - 0:28
    que ce sont deux TextViews différents.
  • 0:28 - 0:32
    Eh ben, dans le produit final,
    le style pour l'Équipe A
  • 0:32 - 0:34
    et le score ne se ressemblent pas.
  • 0:34 - 0:38
    Donc, j'ai décidé de les séparer
    pour avoir deux TextViews différents.
  • 0:38 - 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:47
    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:03
    Bien, travaillons maintenant sur XML.
  • 1:03 - 1:05
    Je veux regarder l'onglet Text.
  • 1:05 - 1:08
    Donc la première chose
    que je vais faire ici,
  • 1:08 - 1:10
    c'est de supprimer les choses
    dont je n'ai pas besoin.
  • 1:10 - 1:12
    Donc je vais procéder avec ça
    et je vais supprimer ce TextView.
  • 1:13 - 1:17
    Tous ces paddingLeft, paddingRight,
    paddingTop et paddingBottom,
  • 1:17 - 1:20
    je vais aussi les supprimer.
  • 1:20 - 1:23
    Je fais très attention à ne pas supprimer
    autres éléments par accident.
  • 1:23 - 1:25
    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:35
    Et à l'intérieur de ce LinearLayout,
  • 1:35 - 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écis tout de suite
  • 1:40 - 1:43
    concernant la largeur
    et l'hauteur de TextView.
  • 1:43 - 1:45
    Pour l'instant, je vais le laisser
    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, Preview.
  • 1:59 - 2:02
    Je peux voir un petit TextView là
    où est écrit Team A.
  • 2:02 - 2:04
    Créons encore deux.
  • 2:04 - 2:07
    Donc celui en-dessous est le score,
    et c'est un TextView aussi.
  • 2:07 - 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:16
    Et je vais aussi faire
    que c'est wrap_content.
  • 2:16 - 2:18
    Et je vais aussi ajouter du texte.
  • 2:18 - 2:22
    Ben le score commence normalement à zéro,
    donc on va le commencer à zéro.
  • 2:22 - 2:23
    Bon.
  • 2:23 - 2:23
    Maintenant pour les boutons.
  • 2:23 - 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:35
    Je vais aller le copier
    et puis le coller une fois,
  • 2:35 - 2:40
    deux fois pour avoir encore deux boutons.
  • 2:40 - 2:43
    Et on va avoir un bouton qui dit +2 points
  • 2:43 - 2:45
    et un bouton qui dit Free Throw.
  • 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
    Donc, 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
    Souvenez-vous qu'ils sont
    dans une colonne verticale.
  • 3:01 - 3:03
    Donc je pense que je dois
    changer l'orientation de ma mise en page,
  • 3:03 - 3:05
    donc c'est ce que je vais faire.
  • 3:05 - 3:10
    Je vais commencer par écrire orientation
    et je veux que ça 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:20
    Je ne veux donc peut-être pas
    faire wrap_content pour les boutons,
  • 3:20 - 3:23
    je vais faire match_parent plutôt.
  • 3:23 - 3:24
    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:39 - 3:44
    et pour le corriger, je vais utiliser
  • 3:44 - 3:46
  • 3:46 - 3:49
  • 3:50 - 3:52
  • 3:52 - 3:54
  • 3:54 - 3:58
  • 3:58 - 4:01
  • 4:01 - 4:03
  • 4:03 - 4:09
  • 4:09 - 4:14
  • 4:14 - 4:19
  • 4:19 - 4:20
  • 4:20 - 4:24
  • 4:24 - 4:27
  • 4:27 - 4:30
  • 4:30 - 4:34
  • 4:34 - 4:37
  • 4:37 - 4:39
  • 4:40 - 4:44
  • 4:45 - 4:47
  • 4:47 - 4:49
  • 4:49 - 4:51
  • 4:51 - 4:53
  • 4:53 - 4:56
  • 4:56 - 4:58
  • 4:58 - 5:00
  • 5:00 - 5:03
  • 5:04 - 5:08
  • 5:09 - 5:13
  • 5:15 - 5:16
  • 5:16 - 5:21
  • 5:21 - 5:25
  • 5:25 - 5:27
  • 5:27 - 5:32
  • 5:32 - 5:33
  • 5:33 - 5:39
  • 5:39 - 5:40
  • 5:40 - 5:45
  • 5:45 - 5:47
  • 5:47 - 5:50
  • 5:50 - 5:52
  • 5:54 - 5:56
  • 5:57 - 5:59
  • 6:00 - 6:05
  • 6:05 - 6:06
  • 6:07 - 6:08
  • 6:09 - 6:11
  • 6:11 - 6:12
  • 6:12 - 6:14
  • 6:16 - 6:19
  • 6:19 - 6:20
  • 6:20 - 6:26
  • 6:27 - 6:29
  • 6:29 - 6:31
  • 6:31 - 6:32
  • 6:32 - 6:34
  • 6:34 - 6:37
  • 6:37 - 6:41
  • 6:41 - 6:46
  • 6:47 - 6:48
  • 6:48 - 6:52
  • 6:52 - 6:54
  • 6:54 - 6:57
  • 6:58 - 7:01
  • 7:01 - 7:04
  • 7:08 - 7:11
  • 7:16 - 7:19
  • 7:19 - 7:24
  • 7:24 - 7:26
  • 7:26 - 7:30
  • 7:30 - 7:32
  • 7:32 - 7:34
  • 7:34 - 7:38
  • 7:38 - 7:41
  • 7:41 - 7:43
  • 7:44 - 7:45
  • 7:45 - 7:47
  • 7:47 - 7:49
  • 7:49 - 7:53
  • 7:53 - 7:55
  • 7:56 - 8:00
  • 8:00 - 8:01
  • 8:01 - 8:04
  • 8:04 - 8:08
  • 8:08 - 8:12
  • 8:12 - 8:15
  • 8:17 - 8:18
  • 8:18 - 8:19
  • 8:19 - 8:20
タイトル:
07-23 Les Étapes - Solution
概説:

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

French subtitles

改訂 Compare revisions