9 noviembre 2010
El Androide Libre
9 comentarios
Este artculo se public en mi blog hace ya algunos das. 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 tambin en EAL (minolles y minolles de gracias). Mira mam!
Salgo en el androide libre!
I. Introduccin
Hola!
Por eso mismo, he decidido empezar una serie de posts explicando cmo he hecho el
layout de Meneadroid. Empezar por el men principal, y luego ir explicando otras
cosas, incluso, cmo he hecho los iconos tirando de Photoshop. Si esperis que os diga
qu posts voy a escribir y de qu ir cada uno, ya os digo que le estis 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 cmo funcionan
los Layouts y sus componentes y propiedades ms importantes a travs de esta
interfaz.
Estos artculos van dirigidos a gente que ha empezado a pelearse con los Layouts y
todava est en la fase odio los layouts (s, yo tambin pas por ah), pero si
empezis de cero, os recomiendo leer algo de documentacin bsica 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 tena claro que
mi patrn de diseo iba a ser la aplicacin de Twitter (aqu un poco ms en
profundidad). Por lo tanto, tena claro cmo quera que fuese el men principal, y el
resultado final fue ste:
Bonico, eh?
Por supuesto, hice infinidad de pruebas, prototipos y variaciones. Os pondra 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 segn 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:
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).
Adems, 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
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.
Ms manzanas
Por motivos estticos, decid que las tres filas deban respetar la misma proporcin, es
decir, un tercio del espacio sobrante sera para el ttulo, 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 sabis, hay tres opciones: fill_parent, wrap_content y tamao fijo. Las dos
ltimas las descartamos, ya que queremos que ocupen todo el espacio sea cual sea el
tamao de pantalla. Entonces, utilizaremos fill_parent.
Es ahora cuando entra en juego el peso de los elementos a travs de la propiedad Layout
weight.
Weight Watchers
View 1: wrap_content
View 2: fill_parent
View 3: fill_parent
View 4: wrap_content
Si le damos un peso de 1 a View2, entonces View3 ocupa todo el espacio libre debajo de
View1. Bsicamente, no es buena idea dentro de un mismo layout mezclar Views con el
valor fill_parent con y sin peso.
En el prximo artculo acabaremos de crear el men, aunque una vez entendido esto, el
resto es un paseo.
Hasta la prxima!