French subtitles

← 02-12 Fixing_Overdraw_with_Canvas_API

02-12 Fixing_Overdraw_with_Canvas_API

Get Embed Code
13 Languages

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

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