French subtitles

← 05-07 Build Layout - Solution

Get Embed Code
13 Languages

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

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