Showing Revision 2 created 12/28/2015 by sp12.

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

   02-12 Fixing_Overdraw_with_Canvas_API

3. 610 0:01 - 0:03
   Estamos de vuelta en Android Studio,
4. 3080 0:03 - 0:06
   revisando la fuente
   de nuestro DroidCardsView.
5. 5810 0:06 - 0:08
   Esta es nuestra vista personalizada.
6. 7850 0:08 - 0:12
   Recuerda, es en esta vista personalizada
   donde generamos las cartas apiladas.
7. 11820 0:12 - 0:14
   Por ejemplo,
   cada carta tiene su mapa de bits,
8. 14330 0:14 - 0:18
   y las dibujamos en pantalla
   ignorando el método onDraw.
9. 19160 0:19 - 0:22
   Recuerda,
   al ignorar el método onDraw,
10. 22230 0:22 - 0:25
    Android no podrá optimizar
    el renderizado de esta vista,
11. 25370 0:25 - 0:29
    así que como desarrolladores
    deberemos recortar bien cada carta
12. 28640 0:29 - 0:32
    mientras se dibuja en pantalla
    para evitar la superposición.
13. 32409 0:32 - 0:36
    La API Canvas nos da los métodos
    que necesitamos para dibujar las cartas
14. 36510 0:37 - 0:38
    con eficiencia.
15. 37950 0:38 - 0:40
    Veamos la documentación.
16. 40420 0:40 - 0:44
    Vamos a usar el método canvas.clipRect
    para mejorar nuestro código.
17. 44920 0:45 - 0:49
    Usaremos esta variante de aquí,
    que toma cuatro floats como parámetros.
18. 49430 0:49 - 0:51
    Volvemos a Android Studio.
19. 51530 0:52 - 0:54
    Modifiquemos el dibujo
    de las cartas en cascada
20. 53630 0:54 - 0:55
    para reducir esta superposición.
21. 56200 0:56 - 1:00
    Usaré esta gran función de Android Studio
    para mostrar otra vista,
22. 59700 1:00 - 1:02
    para que veas el antes
    y el después del código.
23. 62640 1:03 - 1:07
    Aquí tenemos nuestra vista comparativa.
    Centrémonos en el método onDraw,
24. 67230 1:07 - 1:09
    que estamos sobreescribiendo.
25. 69110 1:09 - 1:12
    A la izquierda tenemos
    el antiguo estado del bucle for,
26. 72120 1:12 - 1:15
    pero centrémonos en las mejoras
    que haremos a la derecha.
27. 75020 1:15 - 1:19
    Mientras iteramos sobre las cartas,
    vayamos viendo cada paso de mejora.
28. 79020 1:19 - 1:20
    En primer lugar,
29. 80230 1:20 - 1:23
    vamos a calcular la posición de la carta.
30. 83760 1:24 - 1:27
    Después necesitamos llamar
    a esta función canvas.save,
31. 86670 1:27 - 1:29
    que guardará
    nuestro estado de canvas actual.
32. 89600 1:30 - 1:33
    Dicho de otra forma,
    mantiene el estado actual de tu pantalla
33. 92900 1:33 - 1:35
    antes de aplicar la API clipRect.
34. 95840 1:36 - 1:40
    Cuando llamamos al método clipRect,
    hacemos restricciones geométricas.
35. 100480 1:40 - 1:43
    Cuando entramos estos parámetros,
    le decimos al sistema
36. 103580 1:44 - 1:47
    que dibuje solo una parte de la carta
    que queremos que sea visible.
37. 106850 1:47 - 1:49
    Obviamente,
    el resto quedaría oculto.
38. 109350 1:49 - 1:54
    Solo se dibujarán las partes de la carta
    de dentro del límite de esa restricción.
39. 114630 1:55 - 1:57
    Por último,
    llamaremos al método canvas.restore,
40. 117130 1:57 - 2:00
    que convertirá canvas
    a un estado no recortado.
41. 120070 2:00 - 2:04
    Es decir, va a deshacer la restricción
    que implementamos al llamar a clipRect.
42. 124440 2:04 - 2:08
    Y luego repetimos este bucle
    con todas las cartas excepto la de arriba.
43. 128639 2:09 - 2:13
    Procesaremos esta última carta
    de distinta manera que las de debajo.
44. 133710 2:14 - 2:19
    Para esta no se necesita recortar,
    lo que haremos es dibujarla por completo.
45. 139050 2:19 - 2:21
    Puedes verlo mediante esta instrucción.
46. 141890 2:22 - 2:26
    Creemos nuestro código mejorado
    y veamos si reducimos esa superposición.
47. 147490 2:27 - 2:29
    Perfecto.
48. 148765 2:29 - 2:31
    Como ves,
    hay mucha menos superposición.
49. 152030 2:32 - 2:36
    Espero que quede claro que con Canvas
    tenemos una forma sencilla
50. 155700 2:36 - 2:38
    y eficiente de dibujar
    con vistas personalizadas.
51. 158200 2:38 - 2:41
    En caso de que quieras indagar más
    acerca de la API Canvas,
52. 161640 2:42 - 2:45
    revisa la documentación completa
    en las notas del profesor.
53. 165010 2:45 - 2:50
    Vistas como estas son fabulosas
    para crear una UX única y convincente,
54. 169750 2:50 - 2:53
    pero tenemos que "jugar" con el sistema
    para ayudar a Android
55. 173280 2:53 - 2:56
    a renderizar esas vistas
    de un modo eficiente.
56. 175990 2:56 - 3:00
    Cuando crees una vista personalizada,
    mira que no haya superposición
57. 179690 3:00 - 3:03
    y resucita a tu amigo,
    el método clipRect.
58. 182990 3:03 - 3:07
    Excelente trabajo, vamos con Colt
    para adquirir más conocimientos de perf.