Showing Revision 1 created 10/20/2015 by sp8.

1. Title:
2. Description:

3. 180 0:00 - 0:05
   Pour créer cette disposition,
   j'ouvre le fichier activity_main.xml.
4. 4710 0:05 - 0:08
   J'aurai besoin d'une disposition
   linéaire verticale pour placer chaque vue
5. 7670 0:08 - 0:09
   dans une colonne verticale.
6. 9340 0:09 - 0:13
   Je vais donc d'abord changer
   la disposition de relative à linéaire.
7. 12870 0:13 - 0:17
   L'éditeur me signale directement
   que la balise ouvrante est différente de
8. 17110 0:17 - 0:21
   la fermante, donc je vais copier
   ceci pour le coller ici, en bas ;
9. 20840 0:21 - 0:22
   balises identiques, voilà.
10. 22100 0:22 - 0:24
    Ensuite, je peux ajouter les vues.
11. 23930 0:24 - 0:26
    D'abord, j'ai une TextView « quantité ».
12. 25720 0:26 - 0:30
    Je vais donc prendre cette TextView et
    changer le texte affiché en « quantité ».
13. 29880 0:30 - 0:32
    Ensuite, j'ai une TextView qui dit « 0 ».
14. 31960 0:32 - 0:34
    Je peux donc copier la première
    TextView et la coller plus bas.
15. 34460 0:34 - 0:38
    Je change sa valeur pour que le texte
    dise « 0 » comme dans ma capture.
16. 38430 0:38 - 0:42
    Le dernier enfant de
    cette disposition linéaire est un bouton.
17. 41500 0:42 - 0:45
    On n'avait jamais ajouté de bouton dans
    nos dispositions avant, alors voyons ça.
18. 45020 0:45 - 0:48
    En ouvrant un navigateur,
    on peut chercher "Button Android".
19. 48160 0:48 - 0:52
    Ce premier lien a l'air bon,
    le site est en developer.android.com.
20. 52570 0:53 - 0:57
    Et voici la documentation pour Button,
    on peut passer la majorité de ce texte.
21. 56700 0:57 - 0:59
    On fait défiler pour pouvoir
    lire le survol de cette classe.
22. 59250 0:59 - 1:03
    Il parle un peu de code JAVA,
    on n'en a pas encore appris, mais
23. 63000 1:03 - 1:06
    plus bas, ici, on a
    du code XML pour un bouton.
24. 66300 1:06 - 1:09
    On peut copier ceci et
    voir ses effets dans notre code.
25. 69280 1:09 - 1:12
    Dans notre disposition, j'ajoute
    un bouton sous les deux TextViews.
26. 72420 1:12 - 1:16
    Je colle mon code pris
    dans la documentation ici.
27. 76030 1:16 - 1:19
    Ensuite, au lieu de la chaîne
    self_destruct, je vais plutôt
28. 78900 1:19 - 1:22
    afficher une chose plus
    sympathique comme Commander.
29. 82280 1:22 - 1:25
    On peut aussi effacer la dernière
    ligne, on n'en aura pas besoin.
30. 84900 1:25 - 1:29
    Cool. On a donc une TextView "quantité",
    une autre qui affiche "0", et un bouton
31. 88580 1:29 - 1:29
    "Commander".
32. 90320 1:30 - 1:32
    Exécutons ce script,
    pour voir ce que ça donne,
33. 92220 1:32 - 1:34
    avec ce bouton vert Lecture.
34. 93540 1:34 - 1:36
    On voit en bas
    que la machine compile le code.
35. 97690 1:38 - 1:39
    Oh, ce n'est pas ce qu'on veut.
36. 98660 1:39 - 1:43
    Il semble que notre disposition linéaire
    soit en fait horizontale, pas verticale.
37. 103470 1:43 - 1:48
    Veillons donc à ajouter
    l'attribut "orientation".
38. 107586 1:48 - 1:52
    On va le changer à, mettons…
    « android:orientation="vertical" ».
39. 112020 1:52 - 1:54
    Ça devrait régler le problème.
40. 113570 1:54 - 1:54
    Refaisons Exécuter.
41. 115520 1:56 - 1:57
    Ok, c'est déjà mieux.
42. 117010 1:57 - 2:00
    Les trois enfants s'affichent
    dans une colonne verticale.
43. 120270 2:00 - 2:02
    Il ne reste qu'à
    styliser ces vues pour
44. 121810 2:02 - 2:04
    qu'ils ressemblent plus
    à la capture qu'on nous a donnée.
45. 125280 2:05 - 2:08
    Sur la capture on voit que la TextView
    "quantité" est écrire en majuscules.
46. 129600 2:10 - 2:14
    Dans la leçon 1, on a vu qu'il existe
    un attribut « android:textAllCaps ».
47. 133950 2:14 - 2:16
    Il apparaît ici dans l'auto-complétion.
48. 136230 2:16 - 2:18
    S'il apparaît comme ici,
    il suffit de faire Entrée
49. 138310 2:18 - 2:20
    et l'éditeur l'insérera
    automatiquement dans le code.
50. 141400 2:21 - 2:25
    On place la valeur à "true"
    parce qu'on veut le texte en majuscules.
51. 144970 2:25 - 2:29
    S'il vaut mieux utiliser cet attribut
    pour mettre les lettres en majuscules,
52. 148580 2:29 - 2:33
    c'est parce que si on modifie l'interface
    pour passer "quantité" en minuscules,
53. 152620 2:33 - 2:36
    comme ici, il suffira
    de retirer l'attribut
54. 155650 2:36 - 2:38
    au lieu de chercher
    à changer le texte.
55. 158020 2:38 - 2:42
    Ensuite, pour la TextView qui dit "0",
    il faut une taille de police de 16 sp.
56. 161840 2:42 - 2:46
    Je vais l'ajouter, l'attribut apparaît
    dans les auto-complétions possibles alors
57. 165970 2:46 - 2:50
    je fais juste Entrée et
    j'indique 16 sp en valeur.
58. 170000 2:50 - 2:52
    On veut aussi que
    la police soit de couleur noire.
59. 172450 2:52 - 2:55
    J'utilise le système
    de couleurs d'Android pour le
60. 174700 2:55 - 2:57
    noir, qu'on appelle comme ceci.
61. 177380 2:57 - 3:01
    Cool. On s'est ainsi occupé
    des TextViews "quantité" et "0".
62. 180558 3:01 - 3:05
    Le bouton Commander est bien ainsi,
    le texte est toujours mis en majuscules
63. 185011 3:05 - 3:09
    dans les boutons, avec une hauteur
    et une largeur en "wrap_content".
64. 188820 3:09 - 3:12
    On doit cependant s'occuper
    de cet espace vertical.
65. 191898 3:12 - 3:16
    On veut 16 dp de marge intérieure
    ou extérieure entre les TextViews
66. 195810 3:16 - 3:17
    "quantité" et "0".
67. 197190 3:17 - 3:20
    On veut aussi 16 dp de marge intérieure
    entre le "0" et
68. 200027 3:20 - 3:21
    le bouton Commander.
69. 201430 3:21 - 3:24
    On peut l'implémenter
    de bien des façons,
70. 203960 3:24 - 3:28
    Je préfère juste l'ajouter comme
    marge supérieure pour le bouton ;
71. 211410 3:31 - 3:34
    puis comme marge inférieure
    pour la TextView "quantité".
72. 217810 3:38 - 3:41
    N'hésitez pas à faire autre chose
    tant que l'aspect final est le même.
73. 220810 3:41 - 3:44
    J'ai préféré placer des marges
    supérieures et inférieures parce que je
74. 224000 3:44 - 3:47
    sais que cette zone au milieu
    changera plus tard.
75. 227040 3:47 - 3:50
    On la changera pour en faire
    un sélecteur de quantité avec des
76. 229670 3:50 - 3:55
    boutons plus et moins, et je tiens
    à avoir 16 dp d'espace entre le titre
77. 234620 3:55 - 3:57
    "quantité" et le sélectionneur.
78. 236830 3:57 - 3:58
    Pareil pour le bouton.
79. 238610 3:59 - 4:01
    Ok, relançons le code
    sur notre appareil.
80. 241280 4:01 - 4:03
    Cool, l'écran est pile comme on voulait.
81. 243350 4:03 - 4:07
    La TextView "quantité" est
    tout en majuscules, la TextView "0"
82. 247150 4:07 - 4:12
    a une police noire de 16 sp, et on a
    le bouton Commander ici.
83. 251710 4:12 - 4:15
    On a aussi un espace
    de 16 dp entre ces vues.
84. 255760 4:16 - 4:18
    Beau travail.
    Oh, j'avais oublié.
85. 258240 4:18 - 4:22
    Le quiz demande aussi ce qui se passe
    quand on appuie sur ce bouton.
86. 261560 4:22 - 4:26
    Ben… En fait, il ne fait rien.
    Pour le moment, du moins.
87. 265950 4:26 - 4:28
    Restez attentifs pour
    connaître la suite.