Este artículo se publicó en mi blog hace ya algunos días. Como uno de los cuatro gatos que me leen es Adrian de El Androide Libre y parece que le gustó, me propuso muy amablemente publicarlo también en EAL (minolles y minolles de gracias). ¡Mira mamá! ¡Salgo en el androide libre!

Trata sobre los layouts de Meneadroid, ya que mucha gente me ha preguntado al respecto. Meneadroid es una aplicación Android cliente del sitio Meneame.net (disclosure: yo no tengo nada que ver con Meneame.net ni con sus miembros). Aun está pendiente de ciertas funcionalidades (escribir comentarios, menear, categorías, etc.), pero parece que las primeras versiones han gustado y sigo trabajando en ello. Sin más, os dejo con el artículo.

I. Introducción

¡Hola!

Varias personas me han preguntado sobre el layout de Meneadroid. Que si cómo lo he hecho, que si he utilizado otra cosa, que si con layouts no se puede, etc. Y es que parece que los layouts se le atragantan a mucha gente que empieza con el mundo Android. La verdad, yo al principio pensaba igual. Esto de los layouts es un peñazo, no se puede hacer nada bien, etc. Pero poco a poco, los fui entendiendo, hasta que se produjo la “singularidad”, es decir, vi como tenían que usarse. Y oiga, desde entonces, como dice el anuncio “hago lo que quiero, con mi… layout”. Y estoy encantado. Ojalá los hubiese conocido antes.

Por eso mismo, he decidido empezar una serie de posts explicando cómo he hecho el layout de Meneadroid. Empezaré por el menú principal, y luego iré explicando otras cosas, incluso, cómo he hecho los iconos tirando de Photoshop. Si esperáis que os diga qué posts voy a escribir y de qué irá cada uno, ya os digo que le estáis pidiendo a la persona equivocada que se organice y tenga capacidad de preparar cosas de antemano (madredelamorhermoso, pedirme eso a mí). Lo que intento es explicar cómo funcionan los Layouts y sus componentes y propiedades más importantes a través de esta interfaz.

Estos artículos van dirigidos a gente que ha empezado a pelearse con los Layouts y todavía está en la fase “odio los layouts” (sí, yo también pasé por ahí), pero si empezáis de cero, os recomiendo leer algo de documentación básica sobre layouts, ya que hay una serie de cosas que doy por supuestas. Y si no, pues preguntad, que responderé a gusto. A lo que iba. Cuando creé la interfaz de Meneadroid tenía claro que mi patrón de diseño iba a ser la aplicación de Twitter (aquí un poco más en profundidad). Por lo tanto, tenía claro cómo quería que fuese el menú principal, y el resultado final fue éste:

Bonico, ¿eh?
Por supuesto, hice infinidad de pruebas, prototipos y variaciones. Os pondría los prototipos que hice en papel, pero mi hija decidió que ganaban mucho siendo cortados en trocitos.

El contenedor principal

El contenedor principal es un LinearLayout con las siguientes propiedades destacables:

  • Orientation: vertical
  • Layout height: fill_parent
  • Vertical height: fill_parent

Nada del otro mundo. Simplemente, llenamos toda la pantalla con este View, dos de un tipo y dos del otro. Ahora agregamos dos LinearLayout y dos TextView según la imagen:

Vamos a hablar primero de los TextView, que son sencillitos, y así nos los quitamos de encima.

La manzana de Newton

En principio, no tienen nada especial, son dos TextViews con las siguientes propiedades:

  • Layout height: wrap_content
  • Layout width: fill_parent
  • Gravity: center

Hablemos sobre la gravedad de los View. La gravedad define cómo se va a alinear un objeto tanto vertical como horizontalmente. Existen dos propiedades que afectan a la gravedad: Gravity y Layout gravity. La primera, Gravity, nos indica cómo se va a alinear el contenido del View, mientras que el segundo, Layout gravity, nos indica cómo se va a alinear el View dentro de su contenedor padre. Pongo un par de ejemplos y fijaos en elrecuadro rojo, que es el que me marca exactamente los bordes del View.

Ejemplo 1

  • Layout height: wrap_content
  • Layout width: fill_parent
  • Layout gravity:
  • Gravity: center

Este es el resultado actual. El View ocupa todo el ancho de su contenedor padre (en este caso el root View, por lo que ocupa toda la pantalla).
Además, como su Gravity es center, el texto sale centrado.
Layout gravity está en blanco, ya que, como ocupa todo el ancho, nos da igual centrar el View o no centrarlo.

Ejemplo 2

  • Layout height: wrap_content
  • Layout width: wrap_content
  • Layout gravity: center
  • Gravity:

Aquí hay una diferencia sutil. En este caso tenemos el width a wrap_content, por lo que el View ocupa el espacio exacto que necesita para mostrar el texto. Y al poner Layout gravity a center el widget queda centrado.

Resultado: tenemos la misma interfaz de cara al usuario, pero en realidad se comporta diferente.

Más manzanas

Es fundamental saber cuándo utilizar Gravity y cuando utilizar Layout gravity, y eso sólo se obtiene a golpe de experiencia. Haced pruebas con TextView multilíneas para ver cómo se comportan las diferentes combinaciones. Algunos controles no disponen de Gravity (por ejemplo el ImageView). En ese caso, lo que suelo hacer es envolverlo con un Linear Layout y posicionar la imagen en él.

Los dos grandotes

Bien, vamos a hablar sobre los dos Layout que contienen el título de la aplicación y las opciones.

Por motivos estéticos, decidí que las tres filas debían respetar la misma proporción, es decir, un tercio del espacio sobrante sería para el título, otro tercio para las dos primeras opciones (Portada y Pendientes) y el último tercio para las otras dos (Buscar y Opciones).

De Layout width no nos vamos a preocupar, que está como wrap_content en el primer Layout y como fill_parent en el segundo. Pero del Layout height sí que vamos a hablar. Como sabéis, hay tres opciones: fill_parent, wrap_content y tamaño fijo. Las dos últimas las descartamos, ya que queremos que ocupen todo el espacio sea cual sea el tamaño de pantalla. Entonces, utilizaremos fill_parent.

Pero¿qué sucede si establezco la propiedad Layout height como fill_parent en ambos casos? Pues que tendré un bonito Layout que tan sólo muestra el logotipo. Tened en cuenta que fill_parent significa exactamente eso, llenar el padre, por lo tanto, el primer control con fill_parent llena toda la pantalla.

Busquemos otra solución. ¿Qué tal si ponemos el primer Layout como wrap_content y el segundo como fill_parent? Pues pasan dos cosas. Una, que no consigo la proporción en tercios que quería, y dos, que los dos TextView del final son expulsados fuera de la pantalla.

Es ahora cuando entra en juego el peso de los elementos a través de la propiedad Layout weight.

Weight Watchers

La propiedad Layout weight es un entero que especifica la proporción del espacio disponible que nuestro View va a ocupar. Bueno, en realidad especificamos el valor inverso. Imaginemos que tengo los siguientes Views con unos valores para tamaño:

  • View 1: wrap_content
  • View 2: fill_parent
  • View 3: fill_parent
  • View 4: wrap_content

Si no especificamos ningún peso para ninguno de ellos, veremos View1 en la parte superior ajustado a su contenido y debajo View2 ocupando todo el espacio restante.

Si le damos un peso de 1 a View2, entonces View3 ocupa todo el espacio libre debajo de View1. Básicamente, no es buena idea dentro de un mismo layout mezclar Views con el valor fill_parent con y sin peso.

Si establecemos un peso de 1 para View2 y View3, entonces veremos todos los elementos. View1 en la parte superior ajustado a su contenido, View4 en la parte inferior ajustado a su contenido, y en medio, View2 y View3 repartiéndose el espacio sobrante.

Pero ¿cómo hacemos que ocupen un espacio diferente? Pues asignándoles pesos diferentes. Recordad que el valor que asignemos es la inversa del espacio que ocupará. Así, si damos a View2 un peso de 1 y a View3 se los damos de 2, View3 ocupará la mitad de espacio que View1. Si utilizamos la combinación 1 y 3, pues un tercio, etc. Os recomiendo que juguéis con estos números para ver cómo se comportan.

Entonces, como os comentaba, el LinearLayout que contiene el título tiene un valor de Layout weight de 2, y el TableLayout tiene un peso de 1. Así, Android divide el espacio que queda entre estos dos componentes, y le da al primero la mitad que al segundo, lo que viene siendo 1/3 y 2/3 respectivamente.
Como siempre digo, ahora a practicar, practicar y practicar. He comentado dos conceptos muy importantes en este artículo, la gravedad y el peso de un widget. Conocerlos y aprender a usarlos es clave.

En el próximo artículo acabaremos de crear el menú, aunque una vez entendido esto, el resto es un paseo.

¡Hasta la próxima!

Sergi Martínez (y mi blog)

P.D.: ¿Qué no tienes Meneadroid? pues nada, aquí tienes el enlace:

Mostrar comentarios
Vídeos El Androide Libre
Controla tu móvil SIN TOCARLO – SÓLO CON LA VOZ!
Cómo AHORRAR DATOS en INSTAGRAM
Análisis Xiaomi Mi 9T
Análisis Xiaomi Mi True Wireless
Análisis Amazon Kindle Fire 7 2019
TRUCAZO: Acelera los audios de WHATSAPP #STOPTURRAS
Cómo pasar de audio a texto automáticamente
Análisis OPPO Reno 10x Zoom
Samsung Galaxy M20 vs Xiaomi Redmi Note 7
¿Sin ESPACIO en Android? Cómo LIMPIAR tu móvil
Análisis Huawei P30 Lite
Google ROMPE con Huawei: cómo te afecta
Cómo crear tu propio ROBOT
Cómo ver HISTORIAS de Instagram SIN SER VISTO
Análisis Black Shark 2
Ya está disponible Opera 10.1 BETA para Android
Simyo da el campanazo con dos moviles Android 2.1: Huawei U8110 y Samsung galaxy 5 i550