Interfaz Gráfica: El Layout I

LinearLayout con orientación vertical

En este tutorial nos adentraremos en los conceptos básicos a tener en cuenta al momento de crear una interfaz grafica en android, introduciendo el View, ViewGroup, LinearLayout, TextView, Button ademas de algunos de sus parámetros como id, text, textSize, color, paddingBottom, gravity entre otros.

LinearLayout con orientación horizontal

Lo primero que debemos saber es que en Android podemos crear una interfaz gráfica tanto de manera procedural (manipulando código de java) como de manera declarativa (usando xml). La documentación oficial recomienda el segundo método así que es el que usaremos. Ahora bien, tenemos 2 bloques básicos para construir interfaces gráficas, el View que es el que ocupa un área rectangular en la pantalla y se encarga del dibujado y manejo de eventos (como ejemplos tenemos el ImageView, TextView y Button) y el ViewGroup que es la clase base que se encarga del diseño (al cual usualmente llamamos layout) ademas de contener otros Views o ViewGroups mismos (ejemplos de estos son el LinearLayout o el TableLayout).

Ya que hemos entrado un poco en contexto, crearemos un nuevo proyecto para introducir los conceptos restantes:

Nombre del proyecto: InterfazGraficaA

Target: 1.6

Nombre de la aplicación: Layout A

Nombre del paquete: com.blogspot.cdgandroid.interfazgraficaa

Nombre de la actividad: MainActivity

SDK minimo: 4

En este ejemplo los archivos que modificaremos serán strings.xml y main.xml ya que solo queremos modificar la interfaz gráfica. Primeramente crearemos las cadenas a las que haremos referencia desde el main.xml, para esto modificamos el archivo strings.xml de la siguiente manera:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<resources>
    <string name="app_name">Layout A</string>
    <string name="titulo">JUEGO</string>
    <string name="continuar">CONTINUAR</string>
    <string name="juego_nuevo">JUEGO NUEVO</string>
    <string name="opciones">OPCIONES</string>
    <string name="creditos">CREDITOS</string>
</resources>

Una vez que tenemos las cadenas que necesitamos, dentro de un LinearLayout creamos un TextView y cuatro Button a los que les asociaremos estas cadenas. Ademas de que modificaremos ciertos de sus atributos; el código main.xml a continuación muestra los cambios:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
 <TextView  
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:text="@string/titulo"
     />
 <Button android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="@string/continuar"
     />
 <Button android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="@string/juego_nuevo"
     /> 
 <Button android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="@string/opciones"
     />
 <Button android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="@string/creditos"
     />
</LinearLayout>

Por la  entrada Hola Mundo Android II, ya conocemos gran parte del codigo, lo único que introducimos es la etiqueta Button que es un View que representa botones  los cuales podemos presionar o dar click para ejecutar alguna acción. Ya que tenemos los botones y el texto contenidos en el LinearLayout, correremos el programa para ver el resultado y lo haremos corriendo el archivo MainActivity.java ya que si corremos otro archivo obtendremos un error. Por ejemplo, si por error corrimos el archivo main.xml, el compilador nos marcará errores y ademas en el árbol del proyecto se creará un nuevo archivo llamado main.out.xml, lo que debemos hacer es borrar este archivo y posteriormente correr el archivo MainActivity.java, si el problema persiste vamos a Clean->Project, seleccionamos el proyecto que queremos limpiar y con esto debe ser suficiente. Ya que corrimos el programa obtendremos algo como esto:

Nada mal para unas cuantas lineas de codigo pero para hacerlo mejor agregaremos algunos atributos. Les recomiendo ir corriendo el programa cada que hacen algún cambio.

Al LinearLayout le añadimos:

android:gravity="center"

con esto le pedimos al LinearLayout que ponga su contenido centrado tanto vertical como horizontalment. Si solo quisiéramos uno de los 2 centrados podemos usar center_vertical o center_horizontal como valor del atributo.

Al TextView le agregamos:

android:textSize="30sp"
android:textColor="@android:color/white"
android:gravity="center"
android:paddingBottom="60dp"

textSize es el tamaño de la letra, textColor el color de letra, gravity  centra el TextView y paddingBottom es la distancia que queremos dejar en relación al borde inferior del View; si queremos una distancia general para los cuatro lados del View podemos usar padding.

El color que seleccionamos lo tomamos de los que android maneja por default, por eso hacemos la referencia @android:color (en otra entrada crearemos los nuestros).
dp o también dip son pixeles de densidad independiente, una unidad abstracta basada en la densidad física de la pantalla; en una pantalla de 160 dpi(puntos por pulgada) 1 px = 1 dp (en otra entrada lo veremos con mas detalle). Por su parte sp (pixeles independientes de la escala) es similar a dp solo que este escala dependiendo del tamaño de fuente que prefiere el usuario, es decir, escala texto. Obviamente también podemos fijar medidas en pixel, por ejemplo en textSize pudimos haber puesto 30px pero como android esta soportado en múltiples pantallas lo mas seguro es que algunas de ellas no mostraran correctamente la información. Por lo tanto, al usar dp y sp el re-escalamiento para las múltiples pantallas es automático y asi la aplicación se mostrara de manera correcta dichas pantallas. Concluyendo, traten siempre de usar sp para texto y dp para todo lo demás.

Finalmente, usaremos el atributo id para identificar cada uno de los botones y añadiremos un ID de recursos usando @+id/nombreRecurso. Lo que hemos hecho anteriormente es llamar recursos desde el archivo strings, como por ejemplo @string/titulo, en cambio ahora creamos un recurso dentro del main al cual podemos hacer referencia posteriormente. El código completo quedara así:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    >
 <TextView  
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:text="@string/titulo"
     android:textSize="30sp"
     android:textColor="@android:color/white"
     android:gravity="center"
     android:paddingBottom="60dp"
     />
 <Button android:id="@+id/boton_continuar"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="@string/continuar"      
     />
 <Button android:id="@+id/boton_nuevo"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="@string/juego_nuevo"
     /> 
 <Button android:id="@+id/boton_opciones"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="@string/opciones"
     />
 <Button android:id="@+id/boton_creditos"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="@string/creditos"
     />
</LinearLayout>

Como verán, cada botón ahora tiene su id asociado que nos servirá para distinguir las pulsaciones y saber que botón se presiona y así ejecutar distintas acciones dependiendo del botón que se haya presionado. Nuestro ejemplo quedara asi:

Por ultimo, les sugiero presionar ctrl + F11 mientras están en el emulador y vean que le pasa al layout al poner el emulador en vista panorámica. En nuestra siguiente entrada seguiremos trabajando con el layout, introduciendo nuevos conceptos para solucionar el problema de la vista panorámica.