-
Title:
02-12 Fixing_Overdraw_with_Canvas_API
-
Description:
02-12 Fixing_Overdraw_with_Canvas_API
-
Estamos de vuelta en Android Studio,
-
revisando la fuente
de nuestro DroidCardsView.
-
Esta es nuestra vista personalizada.
-
Recuerda, es en esta vista personalizada
donde generamos las cartas apiladas.
-
Por ejemplo,
cada carta tiene su mapa de bits,
-
y las dibujamos en pantalla
ignorando el método onDraw.
-
Recuerda,
al ignorar el método onDraw,
-
Android no podrá optimizar
el renderizado de esta vista,
-
así que como desarrolladores
deberemos recortar bien cada carta
-
mientras se dibuja en pantalla
para evitar la superposición.
-
La API Canvas nos da los métodos
que necesitamos para dibujar las cartas
-
con eficiencia.
-
Veamos la documentación.
-
Vamos a usar el método canvas.clipRect
para mejorar nuestro código.
-
Usaremos esta variante de aquí,
que toma cuatro floats como parámetros.
-
Volvemos a Android Studio.
-
Modifiquemos el dibujo
de las cartas en cascada
-
para reducir esta superposición.
-
Usaré esta gran función de Android Studio
para mostrar otra vista,
-
para que veas el antes
y el después del código.
-
Aquí tenemos nuestra vista comparativa.
Centrémonos en el método onDraw,
-
que estamos sobreescribiendo.
-
A la izquierda tenemos
el antiguo estado del bucle for,
-
pero centrémonos en las mejoras
que haremos a la derecha.
-
Mientras iteramos sobre las cartas,
vayamos viendo cada paso de mejora.
-
En primer lugar,
-
vamos a calcular la posición de la carta.
-
Después necesitamos llamar
a esta función canvas.save,
-
que guardará
nuestro estado de canvas actual.
-
Dicho de otra forma,
mantiene el estado actual de tu pantalla
-
antes de aplicar la API clipRect.
-
Cuando llamamos al método clipRect,
hacemos restricciones geométricas.
-
Cuando entramos estos parámetros,
le decimos al sistema
-
que dibuje solo una parte de la carta
que queremos que sea visible.
-
Obviamente,
el resto quedaría oculto.
-
Solo se dibujarán las partes de la carta
de dentro del límite de esa restricción.
-
Por último,
llamaremos al método canvas.restore,
-
que convertirá canvas
a un estado no recortado.
-
Es decir, va a deshacer la restricción
que implementamos al llamar a clipRect.
-
Y luego repetimos este bucle
con todas las cartas excepto la de arriba.
-
Procesaremos esta última carta
de distinta manera que las de debajo.
-
Para esta no se necesita recortar,
lo que haremos es dibujarla por completo.
-
Puedes verlo mediante esta instrucción.
-
Creemos nuestro código mejorado
y veamos si reducimos esa superposición.
-
Perfecto.
-
Como ves,
hay mucha menos superposición.
-
Espero que quede claro que con Canvas
tenemos una forma sencilla
-
y eficiente de dibujar
con vistas personalizadas.
-
En caso de que quieras indagar más
acerca de la API Canvas,
-
revisa la documentación completa
en las notas del profesor.
-
Vistas como estas son fabulosas
para crear una UX única y convincente,
-
pero tenemos que "jugar" con el sistema
para ayudar a Android
-
a renderizar esas vistas
de un modo eficiente.
-
Cuando crees una vista personalizada,
mira que no haya superposición
-
y resucita a tu amigo,
el método clipRect.
-
Excelente trabajo, vamos con Colt
para adquirir más conocimientos de perf.