YouTube

Got a YouTube account?

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

French subtitles

← Width and Height

Get Embed Code
14 Languages

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

  1. On a donc préparé
    la liste des invités à la fête.

  2. >> Attends, c'est ça la liste
    des invités à l'anniversaire, Katherine ?
  3. >> Oui.
  4. >> J'espère être sur cette liste.
  5. >> Ouais, c'est à envisager.
  6. >> Aouh. Je me sens
    tout petit, tout à coup.
  7. >> En parlant de « petit »,
  8. parlons un peu des dimensions
    des vues à l'écran.
  9. >> Oh, c'est quand on a fixé la largeur
    et la hauteur avec les dp, hein ?
  10. >> Oui, la largeur et la hauteur.
  11. On aurait aussi pu avoir
    wrap_content de la vue.
  12. >> Oui c'est l'étrange formule
    pour dire que la vue va
  13. « enlacer le contenu »
  14. donc si le contenu grossit,
  15. la vue aussi et
    si le contenu rétrécit, la vue aussi.
  16. >> Oui, et il existe
    une troisième valeur, « match_parent ».
  17. >> Ça fait un peu étrange.
  18. Ça sonne comme le nom d'un site de
    rencontres pour parents sans conjoints.
  19. >> Pas tellement.
  20. match_parent veut dire que la vue sera
    aussi large ou longue que la vue parente.
  21. >> Oh, c'est logique.
  22. Je suis une vue, j'ai un père,
    et j'aurais donc la même carrure
  23. et la même taille
    que mon père.
  24. Ok.
    >> Exactement. Donc pour résumer,
  25. les différentes valeurs pour dimensionner
    une vue sont la larg--une valeur fixe
  26. de dp en largeur ou en hauteur.
  27. >> Voilà. On peut aussi
    avoir wrap_content.
  28. Et la prochaine
    qu'on va essayer est…
  29. >> match_parent.
  30. Voici des exemples pour voir en quoi
    différentes largeurs de vues filles
  31. dans une disposition linéaire peuvent
    impacter l'interface utilisateur finale.
  32. Dans cet exemple, on a réglé chaque vue
    enfant avec une largeur fixe de 200 dp.
  33. Si le contenu d'une vue
    dépasse la largeur de 200 dp,
  34. on cours le risque de tronquer
    du contenu comme ici.
  35. Dans cet exemple, on a réglé la largeur
    de chaque vue fille à wrap_content.
  36. Ceci affiche
    tout le contenu,
  37. mais la largeur d'une vue varie beaucoup
    suivant ce qu'elle peut contenir.
  38. Dans cet exemple, chaque vue fille
    a une largeur de valeur match_parent.
  39. On voit ici que les vues enfants
    ont la même largeur de la vue parente,
  40. quel que soit le contenu
    de la vue enfant.
  41. On peut appliquer les mêmes valeurs
    à la hauteur height de chaque vue.
  42. Dans cet exemple, on a réglé la hauteur
    de cette vue enfant à 200 dp.
  43. Si le contenu de la vue
    est plus grand qu'elle,
  44. on cours alors le risque
    de tronquer une partie du contenu.
  45. Dans cet exemple, on a réglé la hauteur
    de la TextView enfant à wrap_content.
  46. Ainsi le contenu sera affiché
    à l'écran sans
  47. rien tronquer parce que
    la taille de la TextView dépendra
  48. de son contenu.
  49. Dans cet exemple, on règle la hauteur
    de la TextView enfant à match_parent.
  50. Ainsi, la vue fille sera
    aussi grande que la vue parente,
  51. quel que soit son contenu.
  52. Lançons maintenant le Visualiseur XML et
  53. essayons d'être plus comme
    nos parents ; dans le code.
  54. Un lien vers le Visualiseur XML
    vous est fourni avec du code de départ
  55. dans les consignes ci-dessous.
  56. Dans notre cas, LinearLayout
    est la « vue racine » de
  57. notre disposition car c'est
    la première et plus externe des vues.
  58. Si on règle la largeur et la hauteur
    de la vue racine sur match_parent,
  59. et qu'on en fait la disposition
    principale de l'application,
  60. alors cette LinearLayout aura
    les dimensions de l'écran de l'appareil.
  61. Je peux vous le montrer en passant
    le fond de cette disposition linéaire
  62. sur une couleur
    autre que transparente.
  63. Si je règle la couleur de fond
    de LinearLayout sur gris,
  64. on voit que ce gris prend toute la
    largeur et toute la hauteur de l'écran.
  65. Qu'arriverait-il
    si je changeais la largeur
  66. et la hauteur de ces TextViews
    à match_parent ?
  67. Pour mieux visualiser
    les bords de chaque vue,
  68. je vais mettre un fond à chaque vue.
  69. Je vais maintenant changer la hauteur
    de cette TextView à match_parent.
  70. Au fait, ça s'épelle
    match, tiret bas, parent.
  71. On remarque que cette TextView occupe
    toute la hauteur de la vue parente.
  72. Malheureusement, elle pousse
    du coup tout le reste hors de l'écran,
  73. ce n'est pas ce qu'on veut.
  74. Remettons donc wrap_content.
  75. Ok.
  76. Réglons maintenant la largeur à
    match_parent pour voir.
  77. Maintenant la TextView est aussi large
    que sa vue parente, qui elle-même
  78. est aussi large que l'écran
    de l'appareil.
  79. Si je change la valeur
    des autres TextView en match_parent,
  80. on voit qu'elles vont également prendre
    toute la largeur de la vue parente.
  81. J'aimerais aussi souligner autre chose :
  82. chaque fois qu'on a un attribut
    qui débute par « layout_ », comme
  83. layout_height ou layout_width, il s'agit
    de paramètre de disposition de groupes.
  84. Ils servent en fait au groupe parent
    de vues à déterminer la taille et
  85. la position de ses vues.
  86. Par comparaison, les autres attributs
    comme background, textSize et
  87. text sont gérés par la TextView
    afin de se styliser elle-même.
  88. Ces paramètres de disposition de vue
    sont, eux, exploités par la parente.
  89. À votre tour d'essayer différentes
    valeurs de largeur et de hauteur.
  90. Pour vous rendre sur le Visualiseur XML
    avec un code de départ,
  91. lisez les consignes ci-dessous.
  92. Changez les valeurs de largeur
    et de hauteur de chaque TextView.
  93. Vous pouvez fixer la valeur en dp,
    ou mettre wrap_content ou match_parent.
  94. N'oubliez pas que la largeur et la hauteur
    ne sont pas forcés d'être de même valeur.
  95. À la fin, cochez cette case
    pour la suite.