The document discusses various techniques for customizing Canvas and View objects in Android, including:
1. The lifecycle of a View, including constructor, layout, measure, draw, and animation methods.
2. Creating circular progress indicators using Canvas, with techniques like animating drawing arcs and adding effects like blurring.
3. Avoiding square views by using paths with curves and drawing on non-rectangular canvases.
4. Improving performance by optimizing drawing operations and avoiding unnecessary invalidates.
Motivacion de la charla, introdución a la api de canvas, path, algunos trucos un poco de perfonance para ellos explicare dos pequeños ejemplos un loading y una vista que usaremos de boton
Realmente no son dificiles de usar
No ir siempre a buscar la solucion a GITHUB
No necesitas todo lo que aporta la librearia
Más control
Adaptado totalmente a tus necesidades
Es muy divertido programar vistas, es totalmente diferente a lo que hacemos dia a dia
Ciclo de vida de una vista, por que es importante conocer por que pasos toma la vista
Primero se ejecuta el contructor, que es donde crearemos los objetos necesarios que no dependan del tamaño de la vista
Es llamado justo despues de que el padre hagaun addView()
measure() && onMeassure() en este momento la vista aun no tiene tamaño y es aqui donde se puede definir en caso de que necesitemos modificarlo, por ejemlo aqui podemos saber si nuestra vista
se encuentra dentro de un tamaño concreto, de un math_parent o de un wrap_content y actuar en consecuencia
layout && onLayout() el onLayout se ejecuta por cada uno de las vistas hijas añadidas en la mayoria de los casos no es necesario
dispathDraw() && draw() y onDraw() es el metodo más importante y es donde vamos a realizar todas las tareas de pintado de nuestras vistas custom
una vez realizado el onDraw() la vista es mostrada y no se volvera a pintar a no ser que se llame al método invalidate()
este métoco hace volver a empezar el ciclo de pintado y entonces el método onDraw() vovlera a ser ejecutado
Para ilustrar mejor todo esto vamos hacer paso a paso una animación de carga parecida a esta
Hablar del paint,
Controla el color, el estilo los tamaños y muchas cosas más
Es un objeto que necesitaremos todo el tiempo que dure la vista por lo que conviene creerlo al principio
Por lo general el tamaño de una vista suele dar problemas sobretodo al principio.
Por el proceso que pasa la vista el tamaño no se obtiene hasta cierto momento del ciclo de vida de la vista
El método onSizeChanged es muy importante siempre se llamará cuando el tamaño cambie.
Eso quiere decir que se llamara despues del onLayout
Este es un buen sitio para crear todos los componentes que necesiten de tamaño.
Le resto el borde para evitar que el circulo se corte
RectF define un rectangulo, donde se definen las 4 posiciones x1, y1, x2, y2
Método donde ocurre todo
Tener en cuenta los 16MS es el tiempo que se tiene para pintar
Por eso hay que evitar todos los proceso pesados en este método
si se usa invalidate se entra en un bucle
Canvas es el objeto donde se pinta todo, canvas provee una cantidad de metodos para el pintado
entre ellos drawCircle drawPath etc
explicar método circle RectF
Grados
desde donde empieza
false / true
Mejorar circulo
Que es DashPathEffect pinta el stroke dash
Hay más pathEffect
QUe es value animator y para que sirve
Como lo vamos a usar
Crear animación al crear la vista
Tiene dos listener importantes
Vamos a usar el update listener
Este listener salta cada vez que un valor se actualiza
El truco consiste en setear el valor del circulo al que nos devuelve el valueAnimator
y forzar el pintado
Varios tipos de animator float int color
Explicar lo que ha pasado y asi es como funcionan las animaciones en canvas
Frame a frame
Explicar que el value animator los devuelve de manera lineal
y que se le puede pasar un interpolator para definir cómo deben ser devueltos
Explicar que son funciones matemáticas
Hay muchos
Explicar que queremos mejorar el ciruclo amarillo poniendo por debajo una distorion
explicar que creamos otro painter con otras propiedades
en este caso Rojo con un ancho 20% más
y una mascara de blur
No obtenemos nada...
Pregunta?
Solo en vistas estaticas
vistas que no esten dentro de un adapter ni sean reutilizadas
No solo pasa aqui, tambien en las mascaras en canvas para imagenes etc
Cambio de cuadradas - innovar no ir siempre a lo mismo
Explicar lo que vamos hacer
Explicar path, que es y para qué sirve
Cómo funciona
Explicar como funciona quadTo
Paso 1
Some magic
Resultado, explicar lo que se puede consguir con poco