Minimizando dependencias en Android

Es común que cuando nos encontramos frente a un problema lo primero que atinamos es a buscar una biblioteca que ya provea una solución. Si bien es una buena práctica (Don’t repeat yourself) muchas veces esta solución trae más problemas a futuro que soluciones.

Un caso particular que se suele ver mucho en Android es la necesidad de hacer la experiencia del usuario más rica, de darle más información en pantalla. Para ellos agregamos toda clase de detalles a nuestras UIs, y como escribir vistas desde cero suele ser complejo, terminamos incluyendo una biblioteca como dependencia seleccionada de alguna de las opciones populares.

En general estoy de acuerdo con esa aproximación, pero siempre está el fantasma de los 65K de Android. ¿Entonces qué hacemos?. Simple, escribamos nuestras propias vistas donde sea fácil, trivial o simplemente tenga sentido.

Cabe mencionar que otra posible táctica a este problema es utilizar ProGuard, a fin de eliminar todos los métodos y clases que no se usen. Trataremos de analizar en un próximo artículo esta posibilidad.


Indicador de página

Para ilustrar el punto voy a utilizar un problema con el que me encontré esta semana : agregar a un ViewPager los ‘puntitos’ que indican de manera visual en qué página estoy y cuantas páginas tengo.

Indicardor de páginas de un ViewPager

Si quisiera agregar esto rápidamente al proyecto, con hacer una simple búsqueda en Google encontraría varias opciones. Tal vez una de las más populares es ViewPagerIndicator escrita por Jake Wharton.

Esta biblioteca nos ofrece gran variedad de configuraciones y opciones : círculos, líneas, imágenes personalizadas, con tabs, sin tabs, etc. Yo en principio no necesito tantas cosas. Solo quiero un círculo por página y que el círculo que representa la página actual sea de otro color.

Para hacer el problemas aún más interesante, en esta aplicación estoy llegando a los 62k métodos, lo que me deja poco para maniobrar en cuanto a dependencias se refiere.

Haciendo una cuenta rápida la biblioteca tiene 9 archivos Java, si suponemos que cada uno es una clase y cada uno puede tener alrededor de 30 métodos, estamos casi en 300 métodos solo para mostrar 3 círculos de color blanco.

Vamos a ver a continuación que en unos 12 podemos implementar lo mínimo e indispensable para este proyecto.

Nota : Contar los métodos no es tan lineal, las cuentas son solo a fin de ilustrar el punto. Si te interesa saber que pasa con Java en Android abajo del capot, podés ver la charla de Jake Wharton ‘Exploring Java’s Hidden Costs’.

PagerIndicator.java

Para implementar un indicador de página no necesitamos mucho :

  • Saber cuantas páginas tenemos
  • Saber cuál es la página actual
  • Saber el tamaño de la vista y de los círculos
  • Saber cuando el usuario cambia de página

Lo primero que debemos hacer es crear el esqueleto base de nuestra vista con los constructores que necesita. Cuando extendemos View nos pide que definamos un constructor. Si bien con solo definir el primero alcanzaría para este caso, siempre es bueno definirlos todos, sobre todo si queremos agregar luego la posibilidad de customizar la vista desde el layout XML.

https://gist.github.com/Gazer/a3e8f61031a013aab690c75aeccb0b60

Antes de empezar a dibujar algo vamos a necesitar algunos objetos básicos. Como regla general es malo crear instancias de cualquier cosa en el ciclo de dibujo. Recuerden que debemos poder mantener 60fps en caso de querer animar y si el garbage collector está en el medio eso no es alcanzable.

Este método setup() que creamos será llamado desde todos los constructores que definimos anteriormente, de manera que no importe como se cree la vista tendremos todo lo necesario. Los objetos Paint nos permiten definir cómo se van a dibujar las cosas.

https://gist.github.com/Gazer/5098ec213709d3bac7263d657cca6188

Dibujar los círculos que representan las páginas es bastante simple en este caso. Lo que hago es calcular el ancho total que van a ocupar los N puntos, contando los espacios de separación que son proporcionales al diámetro y luego centro el bloque completo tanto en dirección horizontal como vertical.

Un punto crucial en toda vista es definir el tamaño. En Android un programador puede decir que quiere que una viste ocupe todo el padre, que se adapte al tamaño del contenido, que tenga un tamaño exacto. Esto tanto vertical como horizontal. Una forma de resolver este problema es definir el tamaño mínimo en cada eje y luego ver que es lo que quiere el programador. Una vez que tenemos ambos, nos quedamos con la mejor opción.

Todos estos cálculos se hacen en la pasada de layout, específicamente la llamada a onMeasure es la que “mide” la vista y le avisa al padre el tamaño que vamos a tener.

Siempre que calculemos el tamaño de nuestra vista es fundamental tener en cuenta el padding que el programador está deseando para nuestra vista. En este caso nuestra vista, por ejemplo, queremos que sea como mínimo el diámetro elegido más el padding.

https://gist.github.com/Gazer/6ecbed1b078ac0c2a07608e533698c13

Ya con todas las piezas en su lugar podemos proceder a escribir el método onDraw de nuestra vista, que es donde finalmente se pone interesante.

Todas las vistas en Android son utilizables no solo en nuestras aplicaciones, sino que también podemos verlas en el editor visual del Android Studio. Es por eso que el framework nos da la posibilidad de preguntar en que contexto se va a dibujar la vista. En este caso lo que se hizo fue dibujar 5 círculos con el del medio como página actual en el editor, de manera de poder tener una buena vista previa de la vista en la ventana.

https://gist.github.com/Gazer/dc1f39f6c5787a0d19240350855b5ca2

Como último paso y no por eso menos importante, nos falta conectar con el ViewPager y saber cuando éste último cambia de página. Para eso basta con agregar un PageChangeListener y el resto es historia 🙂

https://gist.github.com/Gazer/09c80557fda8b9d2b91d6953d5afbec4


Como se puede ver hay casos que son muy simples de resolver y evitar así una dependencia externa.

A esta implementación se le pueden mejorar un par de cosas :

  • Utilizar attributes para configurar el radio, color, forma
  • Utilizar el onPageScrolled para animar el cambio de página

Pero eso queda como desafío para el lector :). El código completo de la clase se los dejo en este Gist.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s