YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

French subtitles

← LinearLayout

Get Embed Code
13 Languages

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

  1. Bien. On a vu que
    cette disposition linéaire contient
  2. deux TextViews filles.
  3. Au passage, ces fonds colorés ne sont
    qu'un outil pédagogique destiné à aider
  4. à comprendre que les deux TextView filles
    sont dans la vue parente.
  5. Ces couleurs rouge et bleu
    n'apparaîtront donc pas sur l'appareil
  6. à moins de spécifier
    les couleurs de fond de ces vues.
  7. Pour illustrer mon propos,
    allons sur le Visualiseur XML.
  8. Si on passe ce code
    sur le Visualiseur XML,
  9. voici ce qui apparaît
    sur l'appareil.
  10. On a d'abord un groupe de vues
    LinearLayout,
  11. celui-ci est transparent parce qu'on
    ne lui a pas donné de couleur de fond.
  12. La première fille est la TextView
    « Guest List » (liste d'invités),
  13. et elle apparaît en haut ici.
  14. La deuxième vue fille est
    une TextView qui dit « Kunal » et
  15. elle apparaît
    sous la première TextView.
  16. Si je copie cette TextView
    pour la coller un peu plus bas,
  17. qu'arrivera-t-il, selon vous ?
  18. Eh oui, on aura une autre vue « Kunal »
    qui apparaîtra juste sous la première.
  19. Ok. Il semble donc qu'en ajoutant
    plus de TextViews ici,
  20. elles apparaîtront l'une après l'autre
    dans cette liste.
  21. Étudions le code plus attentivement.
  22. Il débute par le signe inférieur à
    suivi
  23. du nom de la vue, ici LinearLayout.
  24. Ensuite on a une liste d'attributs
    et le signe supérieur à.
  25. Remarquez l'absence de barre oblique
    car ce n'est que la balise ouvrante
  26. de LinearLayout.
  27. La balise fermante est
    tout en bas, ici, parce qu'on
  28. veut insérer des éléments filles
    entre les balises ouvrante et fermante.
  29. Mais par exemple, dans cette TextView,
    puisqu'il n'y a aucune fille dedans,
  30. on peut directement
    rendre la balise orpheline.
  31. Pareil avec cette TextView,
    et cette autre plus bas.
  32. Donc quand on dit qu'un groupe
    de vues contient des vues filles,
  33. il est impératif de les insérer
    entre les balises entrante et sortante.
  34. Une autre chose que vous aurez
    peut-être remarquée est cet attribut,
  35. « android:orientation = "vertical" ».
  36. On ne l'avait encore jamais vu, alors
  37. allons lire la documentation Android
    comme je vous l'avais montré.
  38. J'ouvre une nouvelle fenêtre du navigateur
    et j'entre « android orientation ».
  39. Le premier résultat parle de
    LinearLayout, et
  40. se trouve sur le site
    developer.android.com,
  41. cliquons là-dessus.
  42. Tout comme la documentation
    de TextView qui était un peu effrayante,
  43. on peut ignorer la majorité de ce texte.
  44. On doit juste vérifier qu'on est
    réellement sur la page de LinearLayout,
  45. puis faire défiler la page
    pour voir les attributs XML.
  46. Alors, on cherche l'attribut
    nommé android:orientation
  47. Le voilà.
  48. Cliquons dessus
    pour afficher plus de détails.
  49. La description nous dit que cet attribut
  50. détermine si notre disposition
    sera en ligne ou en colonne.
  51. L'attribut peut avoir
    pour valeur "horizontal" pour
  52. une disposition en ligne,
    ou "vertical" pour une colonne.
  53. On a ensuite une liste
    des deux valeurs, ici.
  54. Cool, donc notre code dit en ce moment
    qu'android:orientation vaut « vertical ».
  55. Voilà pourquoi
    nos vues s'affichent en colonne.
  56. Pour satisfaire notre curiosité,
    on devrait essayer l'autre valeur.
  57. Passons l'orientation en « horizontal »
    et voyons ce qui se passe.
  58. De retour dans mon code,
    j'efface « vertical ».
  59. Je tape « horizontal ». Regardez,
    nos vues sont sur une ligne horizontale.
  60. Je ne sais pas pour vous, mais
  61. je n'aime pas trop lire
    ma liste d'invités à l'horizontale.
  62. Mais il y a beaucoup
    d'autres cas très utilisés
  63. où on aurait plutôt besoin
    d'une disposition linéaire horizontale.
  64. Par exemple, si on crée un élément
    de liste, on peut vouloir avoir une image
  65. à gauche et une description à droite.
  66. Je vous laisse essayer
    par vous-mêmes dans une seconde, mais
  67. avant j'aimerais souligner
    cette autre ligne de code.
  68. C'est la déclaration
    de nom d'espace de XML.
  69. On utilise ce nom d'espace
    pour préciser que tous ces attributs
  70. font partie d'Android.
  71. Voilà pourquoi ils débutent tous par
    « android: ».
  72. Elle sert à indiquer que la référence est
    à cette adresse propre à Android.
  73. On peut en pratique
    se forger ses propres attributs.
  74. Mais pour empêcher des conflits de noms,
    avec deux attributs de même nom mais
  75. des comportement différents, en pratique,
    on ajoute toujours ce préfixe,
  76. « android: », pour dire que
    l'attribut est propre à Android.
  77. En résumé, n'oubliez jamais d'ajouter
    cette déclaration d'espace de nom XML
  78. dans la balise ouvrante
    de la vue racine de votre fichier XML.
  79. À vous maintenant.
  80. On aimerait que vous testiez en pratique
    le code de disposition linéaire.
  81. Ajoutez plus de TextViews pour avoir
    plus d'objets dans cette colonne.
  82. Qui listeriez-vous comme
    invités VIP à votre fête ?
  83. Essayez aussi de changer
    l'attribut d'orientation de LinearLayout.
  84. N'oubliez pas qu'il vaut
    « vertical » ou « horizontal ».