Anteriormente vimos cómo crear nuestra primera aplicación. A partir de ahora seguiremos el proceso de desarrollo de una aplicación, intentando profundizar en los aspectos más importantes desde el punto de vista de un novato en el tema.

Como siempre que se desarrolla una aplicación tenemos que tener en cuenta tanto las funcionalidades como el aspecto gráfico. Después de pensar y revisar las opciones gráficas disponibles optaremos por crear una aplicación con pestañas (TabHost). [tweetmeme]

¿Qué es esto?

Éste tutorial muestra cómo crear una aplicación con 3 pestañas (TabWidget) en un TabHost.

¿Qué voy a aprender?

• Utilizar XML para crear el aspecto gráfico de una aplicación.
• Modificar el AndroidManifest.
• Crear una aplicación con 3 pestañas en las que cada una de ellas tiene su propio XML.
• Guardar la pestaña activa para mostrarla cuando volvamos a abrir la aplicación.
  
• Utilizar los recursos Drawable y Strings.

¿Cómo quedará?

Pasos a seguir:

Empezaremos con una visión global de lo que necesitamos. Para empezar necesitamos que nuestra Activity principal extienda la clase TabActivity. Ésta clase es la que nos permitirá añadir pestañas a nuestra aplicación. La razón por la que utilizamos pestañas es para mostrar los datos y opciones de una manera mucho más limpia, por lo tanto, vamos a intentar hacerlo de la manera más limpia posible.

Lo primero es crear el XML de la Activity principal que es donde alojaremos nuestras pestañas. Fijaros que el componente principal es un TabHost y dentro de el colocaremos un LinearLayout donde colgaremos cada una de las pestañas y un FrameLayout donde aparecerá el contenido de cada pestaña. De ésta manera el TabHost es quien se encargará de gestionar el movimiento entre pestañas.

main.xml:

< ?xml version="1.0" encoding="utf-8"?>

<tabhost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<linearlayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<tabwidget android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:background="#f048"
android:layout_height="68dip"
android:paddingLeft="1dip"
android:paddingRight="1dip"
android:paddingTop="4dip" />

<framelayout android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" />

</linearlayout>

</tabhost>

Para el propósito de éste tutorial no vamos a crear pestañas con muchos contenidos, pero cabe decir que como cada pestaña tiene su propio XML dentre de ellos podríamos poner cualquier componente, como ya veréis en entradas futuras. Por ahora vamos a crear 3 pestañas iguales donde mostraremos un texto diferente en cada una de ellas.

tab1.xml:

< ?xml version="1.0" encoding="utf-8"?>

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/settings"
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/tab1_content"
/>
</linearlayout>

Como podéis ver en el campo android:text del TextView indicamos que veremos el contenido de la variable tab1_content que se encuentra dentro del recurso string. Dentro de la carpeta res/values encontraréis el strings.xml, éste recurso se utiliza para guardar todas las variables de texto constantes de la aplicación. La finalidad del recurso values no se limita simplemente a los string, se pueden crear tantos ficheros como se quiera y guardar los valores que necesiteis: meses de una año, dias de la semana, valores numéricos, etc…

strings.xml:

< ?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, MainActivity!</string>
<string name="app_name">TabHost - mobiledev</string>
<string name="tab1">Tab 1</string>
<string name="tab2">Tab 2</string>
<string name="tab3">Tab 3</string>
<string name="tab1_content">Esto es el contenido de la pestaña 1</string>
<string name="tab2_content">Esto es el contenido de la pestaña 2</string>
<string name="tab3_content">Esto es el contenido de la pestaña 3</string>
</resources>

Bien, ya tenemos los XML  creados, ahora sólo falta que la aplicación los muestre. Para ello vamos al código de la Activity principal, desde allí vamos a llamar a 3 funciones que se encargarán de añadir las pestañas al TabHost. También añadiremos el icono a cada pestaña, normalmente se guardan dentro de res/drawables. Ése es el recurso donde se guardan los iconos o imágenes que necesitaremos en la aplicación.

MainActivity.java:

/*
* Pestaña 1
*/

private void añadirTab1() {

Intent intent = new Intent(this, Tab1.class);

TabSpec spec = mTabHost.newTabSpec(TAG_TAB_1);
spec.setIndicator(mResources.getString(R.string.tab1), mResources
.getDrawable(R.drawable.tab1));
spec.setContent(intent);

mTabHost.addTab(spec);
}

Hemos creado 3 nuevas clases, una para cada pestaña. Hasta el momento tenemos los recursos visuales, hemos añadido las 3 pestañas al TabHost pero falta indicar a cada pestaña que debe mostrar su contenido. Como sólo vamos a mostrar un texto la clase Tab sólo extenderá Activity (que es la actividad básica de Android), pero no habría problema en extender cualquier otra clase existente.

Tab1.java:

package com.mobiledev;

import android.app.Activity;
import android.os.Bundle;

public class Tab1 extends Activity{

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tab1);
}
}

Parece que ya lo tenemos todo, el aspecto visual, las clases que utilizaremos pero falta una última cosa por hacer. Cada vez que añadamos una nueva clase al Proyecto debemos indicarselo al AndroidManifest. El manifesto provee información esencial sobre la aplicación que el sistema debe tener antes de ejecutar el código de la aplicación, también es el encargado de indicar los permisos que tienen las clases para acceder a las diferentes API. Aquí es donde tenemos que indicar que nuestra aplicación tiene 3 clases más.

AndroidManifest.xml:

< ?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.mobiledev"
android:versionCode="1"
android:versionName="1.0">
<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".MainActivity"
android:label="@string/app_name">
<intent -filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent>
</activity>
<activity android:name="Tab1" android:label="@string/tab1"></activity>
<activity android:name="Tab2" android:label="@string/tab2"></activity>
<activity android:name="Tab3" android:label="@string/tab3"></activity>
</application>
<uses -sdk android:minSdkVersion="3" />
</manifest>

Ahora si, ya estamos listos para ejecutar la aplicación.

Código fuente: [tweetmeme]

download: TabHost (53.36KB) added: 30/10/2009 clicks: 367 description: Ejemplo de utilización de un TabHost con 3 pestañas, cada pestaña con su propia Activity y XML.

Entradas relacionadas:

1. Primeros pasos con Android
2. Creando la primera aplicación con Android
3. Ciclo de vida de una Activity (Lifecycle)
4. Tratamiento de ficheros XML con Android
5. Google Maps con Threads