Upload
adrian-garcia-lomas
View
525
Download
6
Embed Size (px)
Citation preview
Custom Views in Android using Canvas API
@glomadrian
Adrián García Lomas github.com/glomadrian
Android Engineer
Custom Views
● Extienden View / Viewgroup
● Progress, TextView, Animaciones, etc
● Atributos propios
● Funcionalidades propias
¿Por qué deberías usarlas?
● Marca la diferencia!
● Diseño sin límites
● Extender funcionalidad de otras vistas
● Adaptar a tus necesidades
Extendiendo View
Ciclo de vida
Constructor
onAttachedToWindow()
measure()
onMeassure()
layout()
onLayout()
dispatchDraw()
draw()
onDraw()
invalidate()
requestLayout()
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
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
● 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()
● 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
● Contiene toda la configuración sobre el pintado
● Color
● Estilo del pintado
● Tamaño
● Antialiasing
Paint
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
Usando canvas: drawLine()
Usando canvas: drawRect()
Usando canvas: drawOval()
Usando custom view
Usando custom view
Animación de carga
● drawArc()
● DashPathEffect
● ValueAnimator
● UpdateListener
● Interpolators
Animación de carga: drawArc()
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
Animación de carga: start()
ValueAnimator
onUpdate
grade = value
invalidate
onDraw()
Animación cargando: Interpolators● Define como son devueltos los valores
● Hay varias implementaciones en el SDK
Linear interpolator Accelerate Decelerate interpolator
Animación cargando: Interpolators
Dashed Circular Progress
https://github.com/glomadrian/dashed-circular-progress
● Uso de drawArc()
● Uso de interpolators
● Uso de Paint
● Custom ViewGroup
● drawBitmap()
● Atributos Personalizados
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
Usando canvas: drawPath()
Path
● lineTo()
● moveTo()
● addArc()
● addOval()
● addRect()
● addPath()
● cubicTo()
● quadTo()
Path: quadTo()
● startPoint
● x2, y2
● x1, y1
Path: quadTo()
Path: cubicTo()
● x3, y3
● x2, y2
● x1, y2
● startPoint
Path: cubicTo()
Loading Balls
● Uso de path
● Animaciones con path
● Uso varios ValueAnimators simultáneos
● Atributos Personalizados
https://github.com/glomadrian/loading-balls
Atributos personalizados
● Reusabilidad
● Extensibilidad
● Esencial para librerías de este tipo
● Todo queda en el XML
Atributos personalizados
attrs.xml● Definir atributos para vistas personalizadas
● fichero attrs.xml dentro la carpeta values
● Atributos
○ dimension
○ color
○ boolean
○ string
○ reference
○ y más...
Obteniendo atributos
Declarando atributos personalizados
Atributos Personalizados
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
Detectando overdraw
Detectando overdraw
Detectando overdraw
Detectando overdraw
Detectando frames perdidos
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
Detectando frames perdidos
Detectando frames perdidos
¿Preguntas?