custom views in android using canvas api
TRANSCRIPT
![Page 1: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/1.jpg)
Custom Views in Android using Canvas API
![Page 2: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/2.jpg)
@glomadrian
Adrián García Lomas github.com/glomadrian
Android Engineer
![Page 3: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/3.jpg)
Custom Views
● Extienden View / Viewgroup
● Progress, TextView, Animaciones, etc
● Atributos propios
● Funcionalidades propias
![Page 4: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/4.jpg)
¿Por qué deberías usarlas?
● Marca la diferencia!
● Diseño sin límites
● Extender funcionalidad de otras vistas
● Adaptar a tus necesidades
![Page 5: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/5.jpg)
Extendiendo View
![Page 6: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/6.jpg)
Ciclo de vida
Constructor
onAttachedToWindow()
measure()
onMeassure()
layout()
onLayout()
dispatchDraw()
draw()
onDraw()
invalidate()
requestLayout()
![Page 7: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/7.jpg)
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
![Page 8: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/8.jpg)
![Page 9: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/9.jpg)
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
![Page 10: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/10.jpg)
● 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()
![Page 11: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/11.jpg)
● 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
![Page 12: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/12.jpg)
● Contiene toda la configuración sobre el pintado
● Color
● Estilo del pintado
● Tamaño
● Antialiasing
Paint
![Page 13: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/13.jpg)
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
![Page 14: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/14.jpg)
Usando canvas: drawLine()
![Page 15: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/15.jpg)
Usando canvas: drawRect()
![Page 16: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/16.jpg)
Usando canvas: drawOval()
![Page 17: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/17.jpg)
Usando custom view
![Page 18: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/18.jpg)
Usando custom view
![Page 19: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/19.jpg)
Animación de carga
● drawArc()
● DashPathEffect
● ValueAnimator
● UpdateListener
● Interpolators
![Page 20: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/20.jpg)
Animación de carga: drawArc()
![Page 21: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/21.jpg)
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
![Page 22: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/22.jpg)
Animación de carga: start()
ValueAnimator
onUpdate
grade = value
invalidate
onDraw()
![Page 23: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/23.jpg)
Animación cargando: Interpolators● Define como son devueltos los valores
● Hay varias implementaciones en el SDK
Linear interpolator Accelerate Decelerate interpolator
![Page 24: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/24.jpg)
Animación cargando: Interpolators
![Page 25: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/25.jpg)
Dashed Circular Progress
https://github.com/glomadrian/dashed-circular-progress
● Uso de drawArc()
● Uso de interpolators
● Uso de Paint
● Custom ViewGroup
● drawBitmap()
● Atributos Personalizados
![Page 26: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/26.jpg)
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
![Page 27: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/27.jpg)
Usando canvas: drawPath()
![Page 28: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/28.jpg)
Path
● lineTo()
● moveTo()
● addArc()
● addOval()
● addRect()
● addPath()
● cubicTo()
● quadTo()
![Page 29: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/29.jpg)
Path: quadTo()
● startPoint
● x2, y2
● x1, y1
![Page 30: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/30.jpg)
Path: quadTo()
![Page 31: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/31.jpg)
Path: cubicTo()
● x3, y3
● x2, y2
● x1, y2
● startPoint
![Page 32: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/32.jpg)
Path: cubicTo()
![Page 33: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/33.jpg)
Loading Balls
● Uso de path
● Animaciones con path
● Uso varios ValueAnimators simultáneos
● Atributos Personalizados
https://github.com/glomadrian/loading-balls
![Page 34: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/34.jpg)
Atributos personalizados
● Reusabilidad
● Extensibilidad
● Esencial para librerías de este tipo
● Todo queda en el XML
![Page 35: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/35.jpg)
Atributos personalizados
![Page 36: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/36.jpg)
attrs.xml● Definir atributos para vistas personalizadas
● fichero attrs.xml dentro la carpeta values
● Atributos
○ dimension
○ color
○ boolean
○ string
○ reference
○ y más...
![Page 37: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/37.jpg)
Obteniendo atributos
![Page 38: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/38.jpg)
Declarando atributos personalizados
![Page 39: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/39.jpg)
Atributos Personalizados
![Page 40: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/40.jpg)
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
![Page 41: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/41.jpg)
Detectando overdraw
![Page 42: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/42.jpg)
Detectando overdraw
![Page 43: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/43.jpg)
Detectando overdraw
![Page 44: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/44.jpg)
Detectando overdraw
![Page 45: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/45.jpg)
Detectando frames perdidos
![Page 46: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/46.jpg)
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
![Page 47: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/47.jpg)
Detectando frames perdidos
![Page 48: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/48.jpg)
Detectando frames perdidos
![Page 49: Custom views in android using canvas api](https://reader034.vdocuments.site/reader034/viewer/2022042722/58a39d9f1a28abb1348b646d/html5/thumbnails/49.jpg)
¿Preguntas?