YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Spanish subtitles

← 02-12 Fixing_Overdraw_with_Canvas_API

02-12 Fixing_Overdraw_with_Canvas_API

Get Embed Code
13 Languages

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

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