YouTube

Got a YouTube account?

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

French subtitles

← 13-02 Adding a CheckBox - Solution

Get Embed Code
13 Languages

Showing Revision 1 created 10/12/2015 by sp14.

  1. Pour construire de cette mise en page, pensez
    d'abord aux vues dont on a besoin.
  2. Je vais supposer que tout cela
    est déjà construit et qu'on va juste
  3. parler de nouvelles choses qu'on
    doit ajouter à notre mise en page.
  4. Les deux nouvelles vues dont on doit ajouter
    sont le TextView pour les garnitures
  5. et la vue CheckBox pour
    l'article crème fouettée.
  6. Vous ne saviez probablement pas que
    cette vue existait dans Android, mais
  7. heureusement faire une recherche sur Google
    vous a aidé à trouver cette réponse.
  8. En passant à l'étape 2,
    on doit positionner les vues.
  9. En supposant que ces vues sont déjà
    positionnées correctement,
  10. on doit juste ajouter les garnitures et la crème
    fouettée, verticalement, dans la même colonne.
  11. Tant que la vue racine est
    une mise en page,
  12. verticale linéaire, on peut juste ajouter
    ces deux Vues en haut de ceci.
  13. Pour la troisième étape,
    on doit styler les vues.
  14. Le style à l'en-tête des garnitures
    est le même que la quantité et
  15. les en-têtes du récapitulatif des commandes,
    donc on sera apte à juste copier et
  16. coller les en-têtes
    qui existent déjà.
  17. La vue CheckBox est nouveau quoique
    on doit le styler en conséquence.
  18. On devrait tenir compte de 24 dp
    d'espace entre la boîte et le texte,
  19. et on devrait changer la taille de police de
    crème fouettée pour être de 16 sp.
  20. Effectuons ces changement à
    notre app maintenant.
  21. Pour ajouter une en-tête de garniture qui
    ressemble à l'en-tête Quantity, on peut
  22. copier et coller le code.
  23. Je le copie et l'ajoute ensuite au
    sommet de ce vertical LinearLayout.
  24. Ok, donc maintenant ça
    dit Quantity twice ici.
  25. Je vais changer le texte de sorte à
    ce que ça dise Toppings.
  26. J'ai aussi copié le margin
    bottom dessus de
  27. sorte à ce qu'il y ait de l'espace entre
    cette en-tête et le contenu en-dessous.
  28. Maintenant on n'a pas ajouté un CheckBox
    à notre app avant, donc
  29. Je vais chercher sur google comment
    on fait ça.
  30. Je vais chercher le
    checkbox android.
  31. Rappelez-vous d'ajouter android car
    il pourrait y avoir des cases à cocher pour
  32. les autres plateformes, comme pour
    le web ou autres plateformes mobiles,
  33. ça vous aidera à obtenir un
    résultat spécifique pour Android.
  34. Essayons le premier lien.
  35. C'est la documentation de référence pour
    la classe CheckBox.
  36. Je fais défiler et
    je vois un bon aperçu de la classe et
  37. Alors il va tout droit
    dans les attributs XML.
  38. Ce que je voudrais quoiqu'il en soit est
    un exemple de certains XML pour Checkbox.
  39. Bon revenons aux résultats
    de la recherche.
  40. Cliquez sur le second lien.
  41. Cool, maintenant ça montre quelques
    images de cases à cocher.
  42. Et voici quelques XML.
  43. Ça semble assez bien.
  44. Il a deux cases à cocher
    dans un LinearLayout.
  45. Je vais juste copier cette
    première case à cocher et
  46. puis je vais le coller
    dans notre app.
  47. Retour dans notre app, je vais le coller
    après le texte de garnitures, mais
  48. avant le texte Quantity, donc ici.
  49. Je vais modifier le XML car il
    ne s'adapte pas exactement à notre cas.
  50. Je vais supprimer l'id et
    aussi le text ici.
  51. Au lieu de viande, car notre
    café ne vend pas de viande,
  52. Je vais taper Crème fouettée.
  53. En passant, ce que vous avez
    vu avant, @string/meat,
  54. se référait à une chaîne de ressource
    dans le fichier strings.xml.
  55. Nous en parlerons un peu
    plus tard, mais pour le moment,
  56. vous pouvez taper la chaîne
    directement ici.
  57. Et regardez, les mises à jour précédemment,
    donc on a une case qui dit Crème fouettée.
  58. Ce qui est cool avec la vue case
    à cocher est que ça vous donne une case,
  59. aussi bien que quelque texte, donc vous
    n'avez pas à ajouter une autre vue texte.
  60. On n'a pas non plus besoin de cette ligne
    qui parle de onClick.
  61. Tout ce qui nous importe pour cette tache de
    codage est de faire apparaître la case ici.
  62. L'autre moyen pour arriver à ce
    XML est en cochant cette feuille de triche
  63. des vues communes Android.
  64. Cette feuille de triche liste un tas
    de vues communes Android views et
  65. ça a aussi bien un exemple pour le XML.
  66. Voici la vue de case à cocher et voici un
    exemple de ce que ça ressemblerait et
  67. le XML correspondant.
  68. Vous auriez pu copier le formulaire XML
    ici et le coller dans l'app.
  69. En revenant à Android Studio exécutons
    l'app pour voir à quoi ça ressemble.
  70. Et voilà.
  71. Il semble assez bien.
  72. On a l'en-tête de garnitures et
    une case Crème fouettée.
  73. On a aussi une cool animation
    quand on coche la case.
  74. Le seul problème que je vois
    est que l'espacement est inactif.
  75. Par exemple, c'est trop serré
    entre l'en-tête Quantity et
  76. la case Crème fouettée et il n'y a pas
    assez de place entre eux ici.
  77. En revenant à la ligne
    rouge qui a été fourni,
  78. on devrait ajouter 24 dp d'espace ici
    et changer la taille de la police à 16 sp.
  79. Premièrement je vais changer la taille de
    la police.
  80. Je vais taper android:textSize
    et alors mettre 16sp.
  81. Je vais ouvrir la prévisualisation pour
    vérifier que ça augmente en taille de la
  82. police et c'est le cas.
  83. Si vous n'êtes pas sûr si actualisé ou non,
    vous pouvez toujours appuyer sur le bouton.
  84. Ok.
  85. Maintenant pour découvrir l'espacement
    je l'ai fait fonctionner
  86. en faisant un tas d'essai et d'erreur.
  87. J'ai essayé de régler les
    valeurs de margin et puis
  88. j'ai essayé de régler les valeurs de padding,
    et il s'avère que paddingLeft
  89. contrôle l'espacement entre
    la case et le texte.
  90. Ajoutons le padding
    maintenant.
  91. Cool, le texte s'est déplacé.
  92. Je vois encore un problème pourtant
  93. Il y a assez d'espace vertical ici, mais
    là il n'y a pas assez d'espace vertical.
  94. Je dois même ajouter bottom padding ou
    bottom margin à cette vue case à cocher ou
  95. je dois ajouter top padding ou
    top margin à cette en-tête Quantity.
  96. Dans tous les cas ça marcherait,
  97. je vais juste ajouter une marge
    supérieur à cette en-tête Quantity.
  98. Là, ça semble mieux !
  99. Maintenant, les choses apparaissent plus
    proportionnellement espacées.
  100. Je vais exécuter cette app sur mon
    dispositif.
  101. Et voilà l'app.
  102. Ça semble vraiment bien.
  103. Beau travail.
  104. Quand vous devez ajouter plus de changements UI
    à votre app, vous pouvez suivre ce modèle
  105. de recherche google pour les informations
    en ligne et l'appliquer ensuite à votre app.