Como hacer vistas personalizas usando canvas en Android

1. Custom Views in Android
using Canvas API

2. @glomadrian
Adrián García Lomas github.com/glomadrian
Android Engineer

3. Custom Views
● Extienden View / Viewgroup
● Progress, TextView, Animaciones, etc
● Atributos propios
● Funcionalidades propias

4. ¿Por qué deberías usarlas?
● Marca la diferencia!
● Diseño sin límites
● Extender funcionalidad de otras vistas
● Adaptar a tus necesidades

5. Extendiendo View

6. Ciclo de vida
Constructor
onAttachedToWindow()
measure()
onMeassure()
layout()
onLayout()
dispatchDraw()
draw()
onDraw()
invalidate()
requestLayout()

7. onMeassure()
● Determinar el tamaño de la vista dependiendo del padre
● Obtener el modo de Medición
○ EXACTLY (Igual que el padre)
○ AT_MOST (Como máximo el tamaño del padre)
○ UNESPECIFIED (Lo que la vista quiera)
● Definir las dimensiones de la custom view

9. onSizeChange()
● Se llama cada vez que el tamaño cambia
● Cuando se llama la vista ya tiene tamaño
● Se puede obtener el width y el height de la vista
● Si se necesita inicializar algo dependiendo del tamaño
● El tamaño puede cambiar externamente

10. ● Es donde todo el pintado de la vista ocurre
● Realizar solo acciones de pintado
● No crear nuevos objetos si no es necesario
● 16ms (60 fps) es el tiempo usado para el pintado
● Cuidado con el overdraw
● Cuidado con invalidate() para forzar el pintado de la vista
onDraw()

11. ● El método onDraw() proporciona un canvas para pintar
● Canvas siempre contiene un bitmap donde pinta
● Proporciona una gran cantidad de métodos para el pintado
● Hay que proporcionarle un objeto Paint
Canvas

12. ● Contiene toda la configuración sobre el pintado
● Color
● Estilo del pintado
● Tamaño
● Antialiasing
Paint

13. Canvas: Pintando
X
Y
● width / 2 , height / 2
● 0 , 0
● Evitar usar píxeles en dimensiones
● Usar dim.xml
● Jugar con width y height
● Probar en varios dispositivos

14. Usando canvas: drawLine()

15. Usando canvas: drawRect()

16. Usando canvas: drawOval()

17. Usando custom view

18. Usando custom view

19. Animación de carga
● drawArc()
● DashPathEffect
● ValueAnimator
● UpdateListener
● Interpolators

20. Animación de carga: drawArc()

21. Animación de carga: ValueAnimator
● Devuelve valores en un intervalo de tiempo
● Pueden ser int, float, etc...
● Update listener es donde se hará la animación

22. Animación de carga: start()
ValueAnimator
onUpdate
grade = value
invalidate
onDraw()

23. Animación cargando: Interpolators
● Define como son devueltos los valores
● Hay varias implementaciones en el SDK
Linear interpolator Accelerate Decelerate interpolator

24. Animación cargando: Interpolators

25. Dashed Circular Progress
https://github.com/glomadrian/dashed-circular-progress
● Uso de drawArc()
● Uso de interpolators
● Uso de Paint
● Custom ViewGroup
● drawBitmap()
● Atributos Personalizados

26. Usando canvas: Path
● Contenedor para un conjunto de formas geométricas
● Muy versátil
● Se puede pintar en canvas usando: canvas.drawPath()
● Al ser un objeto este se puede guardar (Stack, Arrays, etc)
● Muy extensible
● Curva de Bézier

27. Usando canvas: drawPath()

28. Path
● lineTo()
● moveTo()
● addArc()
● addOval()
● addRect()
● addPath()
● cubicTo()
● quadTo()

29. Path: quadTo()
● startPoint
● x2, y2
● x1, y1

30. Path: quadTo()

31. Path: cubicTo()
● x3, y3
● x2, y2
● x1, y2
● startPoint

32. Path: cubicTo()

33. Loading Balls
● Uso de path
● Animaciones con path
● Uso varios ValueAnimators simultáneos
● Atributos Personalizados
https://github.com/glomadrian/loading-balls

34. Atributos personalizados
● Reusabilidad
● Extensibilidad
● Esencial para librerías de este tipo
● Todo queda en el XML

35. Atributos personalizados

36. attrs.xml
● Definir atributos para vistas personalizadas
● fichero attrs.xml dentro la carpeta values
● Atributos
○ dimension
○ color
○ boolean
○ string
○ reference
○ y más...

37. Obteniendo atributos

38. Declarando atributos personalizados

39. Atributos Personalizados

40. Analizando el Rendimiento
● Normalmente son vistas muy vistosas
● No todos los móviles son de última generación
● Posible pintado duplicado (overdraw)
● Mucho trabajo en el método onDraw()
● No solo custom views

41. Detectando overdraw

42. Detectando overdraw

43. Detectando overdraw

44. Detectando overdraw

45. Detectando frames perdidos

46. Detectando frames perdidos
● Muy útil , visual
● Línea verde: 16ms / 60 frames
● Por debajo: Frames pintados
● Por encima: Frames perdidos
● Colores por tipo de carga

47. Detectando frames perdidos

48. Detectando frames perdidos

49. ¿Preguntas?