Return to Video

13-02 Adding a CheckBox - Solution

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

more » « less
Video Language:
English
Team:
Udacity
Project:
UD837 - Android for Beginners
Duration:
05:27

French subtitles

Revisions