Android (IV): Diseo de layouts o interfaces

Personalizacin de nuestros layouts o interfaces

Bienvenidos a uno ms de los experimentos que poco a poco voy realizando en el aprendizaje de mi curso de desarrollo en Android. En este cuarto post voy a intentar explicar algunas de las propiedades y "truquillos" que he aprendido a la hora de realizar el diseo de la aplicacin a mi gusto. Supongo que todos sabremos (tanto desarrolladores como usuarios) que uno de los puntos claves de una buena aplicacin es un buen diseo. Por eso, una vez sabemos qu debe aparecer en cada pantalla o pgina web el siguiente paso es cmo mostrar esa informacin para que aparezca de la mejor manera tanto en lo visual como en lo prctico. A continuacin har un repaso de todas las modificaciones que he realizado en la interfaz de la pantalla principal de mi aplicacin para cambiar el diseo que aparece por defecto al diseo que he querido enfocar. Como ejemplo, vamos a disear una pantalla en la que mostraremos el ttulo de la aplicacin, un mensaje de bienvenida, cuatro botones que nos darn acceso a diferentes partes del programa y un pie en el que indicaremos informacin correspondiente a la aplicacin, ya sea la versin de la aplicacin, el autor, empresa, derechos, ao de publicacin, etc.

Cambios de aspecto de una vista con los mismos elementos

1. Creacin del archivo XML que define el Layout o interfaz

Todos los archivos que definen la interfaz se encuentran en una carpeta llamada "layout" dentro de la carpeta "res" perteneciente al proyecto de Android. Si no tenemos creado ningin layout o deseamos crear el diseo en un nuevo archivo, dentro de la propia carpeta "layout" hacemos clic derecho y pulsamos "New" - "Other" - "Android XML File". Nos aparecer una pantalla en la que debemos indicar el tipo de archivo que crearemos y el nombre del mismo. Podemos dejar la opcin por defecto "LinearLayout" e indicar el nombre de archivo que nos apetezca. IMPORTANTE: Debemos indicar la extensin ".xml" en el nombre de nuestro Layout para poder crear el archivo. NUNCA deben crearse los archivos con lestras en Mayscula, si se desea diferenciar dos palabras debemos usar el guin bajo ( _ ).

2. Insertar los elementos en nuestro layout.xml

Ttulo de la aplicacin: TextView Mensaje de bienvenida: TextView Botn "Nuevo Evento": Button Botn "Calendario": Button Botn "Contactos": Button Botn "Opciones": Button Pie de pantalla 1: TextView Pie de pantalla 2: TextView

En primer lugar debemos insertar los elementos citados anteriormente, que sern los que aparecern en la pantalla:

Por defecto, los elementos en nuestra interfaz los definimos dentro de un LinearLayout, que es un tipo de estructura que define cmo se ordenan los elementos que contiene en su interior, en el siguiente apartado de este post se explicar de forma ms detallada. Todos los elementos deben formar una estructura en XML, y se suelen crear con las siguientes propiedades: Todas las propiedades se indican comoandroid:nombre_propiedad="contenido_propiedad" ID: Nombre de la variable asociada al elemento que estamos creando layout_width: Ancho mximo ocupado por el elemento. "fill_parent" hace referencia a que el ancho mximo ser lo ocupado por el padre (en este caso el LinearLayout que engloba a todos los elementos) layout_height: Altura mxima. "wrap_content" indica que el elemento puede ocupar el espacio que necesite para mostrarse, por lo que su altura variar segn el tamao de la letra, tipo de elemento, etc. text: Texto que se mostrara en pantalla para dicho elemento. En un botn, hace referencia al nombre representativo del botn. <TextView android:id="@+id/txBienvenida" android:layout_width="fill_parent"

android:layout_height="wrap_content" android:text="AGENDA Y CONTACTOS" />

3. Acoplar los elementos en diferentes estructuras

Una vez tenemos todos los elementos en la pantalla toca estructurarlos en diferentes zonas. Para cada zona utilizaremos un a estructura diferente que afecte a un conjunto de elementos. Segn cmo queramos mostrar los elementos podemos agrupar las vistas de diferentes elementos: De forma linear (LinearLayout), como una tabla (TableLayout), etc.

CONSULTA LOS TIPOS DE ESTRUCTURAS POSIBLES EN UNA VISTA

La estructura de elementos quedara de la siguiente manera LinearLayout principal, que comprende toda la pantalla o LinearLayout - Cabecera TextView - Ttulo TextView - Mensaje de bienvenida o TableLayout - Estructura de botones Fila 1 Button - Nuevo Evento Button - Calendario Fila 2 Button - Contactos Button - Opciones o LinearLayout TextView - Mensaje de pie de pgina

En la pantalla de ejemplo tenemos tres zonas diferenciadas: : La cabecera contiene el ttulo de la pantalla y un mensaje de bienvenida. Estos dos elementos se definirn dentro de un LinearLayout que ordene los elementos verticalmente (de arriba hacia abajo). : Los botones quedan estructurados como una tabla (TableLayout) con cuatro elementos (dos filas y dos columnas), en cada uno de los elementos de la tabla aadimos el botn correspondiente. : Al igual que la cabecera, se usar un LinearLayout que contenga los elementos en orden vertical, ocupando el espacio restante.

Cabecera

Conjunto de botones Pi de pgina

4. Pulir los detalles

Ya definida la estructura, el resto de tareas pendientes son definir correctamente las propiedades de los elementos para aparezcan en pantalla de la forma que queremos, empezando por el tamao de las imgenes, el color del fondo, las imgenes que queremos aadir al botn o el tamao de cada estructura en la pantalla. A continuacin indicare varias propiedades que he usado en cada uno de los elementos, para ver todo al detalle puedes descargarte el proyecto completo. <LinearLayout android:orientation="vertical"

android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="2" android:gravity="center" > (Aqu especificamos el contenido del LinearLayout) </LinearLayout>

layout_weight: Esta propiedad es fundamental para la estructura que queremos disear. Hace referencia al peso que tiene el elemento sobre el resto, dentro de la misma pantalla. Cuanto mayor sea el peso, menor ser su proporcin de tamao en la pantalla. Por ello, a la zona ms importante (en este caso la tabla de botones), le pondremos peso 1 y a la cabecera le pondremos peso 2. Esto quiere decir que el espacio ocupado por la estructura de tipo tabla ocupar el doble de espacio que la cabecera. Si pusieramos relacin 1-3, el tamao de la estructura con peso 1 sera 3 veces mayor que el tamao de la estructura con peso 3. gravity="center": Los elementos que forman parte de la estructura se alinean al centro de la pantalla. padding="20px": El elemento con dicha propiedad tendr un margen del tamao de los pxeles establecidos con todo lo que le rodea. Existen las variantes PaddingTop, PaddingLeft, PaddingButtom y PaddingRight.