Showing Revision 2 created 01/20/2016 by QA_SP_6_FR.

1. Title:
   02-12 Fixing_Overdraw_with_Canvas_API
2. Description:

   02-12 Fixing_Overdraw_with_Canvas_API

3. 486 0:00 - 0:03
   Bon, alors nous revoici
   dans Android Studio,
4. 3189 0:03 - 0:06
   avec le code source de
   DroidCardsView.
5. 5606 0:06 - 0:08
   Souvenez-vous,
   c'est une vue personnalisée.
6. 7962 0:08 - 0:12
   Pour rappel, c'est dans cette vue qu'on a
   créé notre paquet de cartes à jouer.
7. 11870 0:12 - 0:14
   Par exemple,
   chaque carte a son bitmap et
8. 14480 0:14 - 0:18
   on la dessinera à l'écran en remplaçant
   la méthode onDraw.
9. 19280 0:19 - 0:22
   Maintenant souvenez-vous, quand
   on remplace la méthode onDraw,
10. 22320 0:22 - 0:26
    Android ne peut pas optimiser
    le rendu de cette vue,
11. 25580 0:26 - 0:29
    donc c'est à nous, développeurs,
    de bien découper chaque carte
12. 28720 0:29 - 0:31
    qui se dessinera à l'écran
    pour éviter trop de superpositions.
13. 32470 0:32 - 0:36
    Heureusement, l'API Canvas nous donne
    pile les méthodes requises pour dessiner
14. 36010 0:36 - 0:38
    nos cartes plus efficacement.
15. 38010 0:38 - 0:39
    Lisons la documentation.
16. 40520 0:41 - 0:45
    On utilisera la méthode canvas.clipRect
    pour améliorer notre code.
17. 45010 0:45 - 0:49
    On prendra cette variante-ci,
    avec quatre nombres en paramètres.
18. 49272 0:49 - 0:51
    Bon, nous revoici dans Android Studio.
19. 51325 0:51 - 0:56
    Bricolons le dessin de chaque carte créée
    pour éviter les superpositions.
20. 56074 0:56 - 0:59
    J'ai une fonction pratique d'Android
    Studio pour afficher les différences,
21. 59063 0:59 - 1:02
    pour voir l'état du code
    avant et après changement.
22. 62212 1:02 - 1:06
    Bon, nous voici dans l'affichage
    comparatif.
23. 65510 1:06 - 1:09
    Regardez notamment ma méthode
    onDraw, celle qu'on remplace.
24. 69180 1:09 - 1:12
    On a l'ancien état de
    la boucle for juste ici à gauche,
25. 71590 1:12 - 1:15
    mais voyons surtout les améliorations
    qu'on va introduire ici à droite.
26. 75110 1:15 - 1:19
    Dans l'itération des cartes,
    examinons chaque étape de l'amélioration.
27. 79100 1:19 - 1:23
    D'une, on va déjà calculer
    la position de la carte.
28. 83850 1:24 - 1:27
    On aura besoin d'appeler
    la fonction canvas.save,
29. 86736 1:27 - 1:29
    pour enregistrer
    l'état du canvas existant.
30. 89491 1:29 - 1:31
    Autrement dit,
31. 90549 1:31 - 1:36
    elle sauvegarde l'état actuel de l'écran
    avant d'appliquer l'API clipRect.
32. 95691 1:36 - 1:37
    Quand on fait appel à
    cette méthode clipRect,
33. 97485 1:37 - 1:41
    on définit simplement
    des limites géométriques.
34. 100664 1:41 - 1:44
    Quand on transmet ces paramètres,
    on dit simplement au système
35. 103580 1:44 - 1:47
    de ne dessiner qu'une partie
    de la carte, celle qu'on veut voir.
36. 107000 1:47 - 1:48
    Évidemment, le reste en sera caché.
37. 109470 1:49 - 1:52
    Seules les portions de la carte
    qui se trouvent dans les limites
38. 112250 1:52 - 1:55
    qu'on a définies
    seront donc dessinées.
39. 114660 1:55 - 1:57
    Pour finir, on fera appel à
    canvas.restore,
40. 117012 1:57 - 2:00
    pour repasser le canevas
    à un état sans découpe.
41. 119890 2:00 - 2:01
    Autrement dit,
42. 120650 2:01 - 2:04
    la fonction va annuler l'interdiction
    qu'on avait établie pour appeler clipRect.
43. 124244 2:04 - 2:09
    Et on va répéter cette boucle pour
    toutes les cartes sauf celle du dessus.
44. 128788 2:09 - 2:11
    Pour être plus précis,
    on traitera la carte supérieure,
45. 131000 2:11 - 2:14
    la dernière, différemment
    de ses consœurs du paquet.
46. 133780 2:14 - 2:16
    Pour cette carte, on n'a pas besoin
    de la découper,
47. 136440 2:16 - 2:19
    donc on ne va pas hésiter
    et la dessiner intégralement.
48. 138650 2:19 - 2:21
    C'est visible grâce
    à cette déclaration, ici.
49. 141980 2:22 - 2:24
    Bon, assemblons
    ce code amélioré pour
50. 143800 2:24 - 2:25
    voir si on a moins
    de superpositions.
51. 147660 2:28 - 2:29
    Super, génial.
52. 148820 2:29 - 2:31
    Comme on peut voir,
    il y en a beaucoup moins.
53. 152130 2:32 - 2:35
    J'espère que vous aurez compris
    qu'avec l'API Canvas, on a une méthode
54. 155250 2:35 - 2:38
    simple pour dessiner efficacement
    si on utilise des vues personnalisées.
55. 158350 2:38 - 2:42
    Ah, et si vous voulez
    en savoir plus sur l'API Canvas,
56. 161720 2:42 - 2:45
    n'hésitez pas à lire la doc,
    le lien est dans les consignes.
57. 165170 2:45 - 2:48
    Ce type de vue est génial pour aider
    à créer une expérience utilisateur unique
58. 168460 2:48 - 2:52
    et intuitive, mais n'oubliez pas
    qu'on doit « indiquer » au système
59. 172480 2:52 - 2:56
    comment aider Android à rendre
    ce type de vues de façon performante.
60. 176110 2:56 - 3:00
    Dès qu'on utilise une vue personnalisée,
    il faut prendre garde aux superpositions,
61. 179800 3:00 - 3:02
    et être prêt à jouer avec
    la méthode clipRect.
62. 181972 3:02 - 3:04
    Allez, beau travail.
63. 184290 3:04 - 3:06
    Retournons voir Colt pour
    plus de conseils.