Este documento proporciona una introducción a las vistas personalizadas en Android usando el Canvas API. Explica cómo extender la clase View para crear vistas personalizadas con funcionalidades únicas. Detalla el ciclo de vida de una vista personalizada y métodos clave como onMeasure(), onDraw(), y onSizeChanged(). También cubre temas como animaciones, uso del canvas para dibujar formas, atributos personalizados y optimización del rendimiento.

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?