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