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?