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 pro...
¿Por qué deberías usarlas?
● Marca la diferencia!
● Diseño sin límites
● Extender funcionalidad de otras vistas
● Adaptar ...
Extendiendo View
Ciclo de vida
Constructor
onAttachedToWindow()
measure()
onMeassure()
layout()
onLayout()
dispatchDraw()
draw()
onDraw()
i...
onMeassure()
● Determinar el tamaño de la vista dependiendo del padre
● Obtener el modo de Medición
○ EXACTLY (Igual que e...
onSizeChange()
● Se llama cada vez que el tamaño cambia
● Cuando se llama la vista ya tiene tamaño
● Se puede obtener el w...
● Es donde todo el pintado de la vista ocurre
● Realizar solo acciones de pintado
● No crear nuevos objetos si no es neces...
● El método onDraw() proporciona un canvas para pintar
● Canvas siempre contiene un bitmap donde pinta
● Proporciona una g...
● 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 widt...
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 li...
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 i...
Animación cargando: Interpolators
Dashed Circular Progress
https://github.com/glomadrian/dashed-circular-progress
● Uso de drawArc()
● Uso de interpolators
...
Usando canvas: Path
● Contenedor para un conjunto de formas geométricas
● Muy versátil
● Se puede pintar en canvas usando:...
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
http...
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
○ dimens...
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 ...
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:...
Detectando frames perdidos
Detectando frames perdidos
¿Preguntas?
Custom views in android using canvas api
Próxima SlideShare
Cargando en…5
×

Custom views in android using canvas api

465 visualizaciones

Publicado el

Como hacer vistas personalizas usando canvas en Android

Publicado en: Ingeniería
0 comentarios
2 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
465
En SlideShare
0
De insertados
0
Número de insertados
32
Acciones
Compartido
0
Descargas
3
Comentarios
0
Recomendaciones
2
Insertados 0
No insertados

No hay notas en la diapositiva.
  • Vistazo general a lo que son las custom views
    Dónde podemos encontrarlas
    Especial importancia a los atributos propios que dan mucha extensibilidad
  • Defender su uso
    Diseños diferentes para las aplicaciones
    Poder hacer cosas con otras vistas que previamente no estaban soportadas
    Explicar que es un mundo diferente programar vistas que programar en android
    Es divertido
    Se aprende mucho
  • Primer constructor: Permitir la creación de vista desde código
    Segundo Constructor: Creacion de vista desde XML pasándole sus atributos personalizados
    Tercer Constructor: Creación de vista desde XML con atributos y usando un estilo personalizado.
  • Después de que la vista padre añade la vista hija se ejecuta onAttachedToindow()
    Meassure() se usa para que las vistas puedan conocer tu tamaño
    onMeassure() método para que los hijos puedan determinar el tamaño de la vista (es llamado desde meassure)
    layout() llamado para asignar un tamaño a todas las vistas hijas
    onLayout() cada vista hija debe asignar un tamaño y para eso se usa este método
    dispathDraw() Cuando una vista padre realiza el draw usa este metodo para decirte a todas las vistas hijas que deben pintarse
    draw() Método para forzar el pintado manual
    onDraw() Método que se ha de sobrescribir para el pintado de la vista
  • Custom views in android using canvas api

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

    ×