TUTORIAL: Desarrollo de aplicaciones para Android (IX)

Siguiendo con el curso, vamos a ver hoy el Tab Widget.
El Tab Widget nos permite crear pestañas en nuestra interfaz de usuario.
Para crear una interfaz con pestañas (tabs) necesitamos un TabHost y un TabWidget.

Un TabHost es un contenedor para vista con pestañas. Tiene dos hijos: un conjunto de etiquetas donde el usuario hace clic para seleccionar una pestaña, y un FrameLayout que muestra el contenido de esa pestaña.

El TabWidget muestra una lista de etiquetas de pestañas que representan todas las páginas de la colección de etiquetas del padre. El contenedor de este widget es TabHost. Cuando el usuario selecciona una etiqueta, el objeto envía un mensaje al contenedor padre, TabHost, para pedirle que cambie la página mostrada.

En este tutorial crearemos una interfaz de usuario con pestañas, en la que cada pestaña tendrá una Activity diferente, pero las pestañas también se pueden usar para cambiar entre Views de una misma actividad.

1. Creamos un proyecto Android llamado HolaTabWidget. En"Package name" pon por ejemplo "com.ej.holatab". En "Activity" puedes poner también "HolaTabWidget".

2. Ahora creamos 3 clases Activity con los nombres siguientes: ArtistsActivity, AlbumsActivity, SongsActivity. Sustituimos el código por defecto de cada clase por el del paso 2 de esta página, poniendo el nombre de clase correspondiente y un texto diferente para setText() en cada caso. Por ejemplo en ArtistsActivity podemos poner "Esta es la pestaña de artistas". Si miramos el código veremos que estas actividades no usan ningún layout.

3. Vamos a necesitar un icono para cada pestaña, y dos imágenes para cada icono que representen si la pestaña está seleccionada o no. Por ejemplo, de las imágenes siguientes, la primera podría representar que la pestaña no está seleccionada y la segunda que sí:

Para este ejemplo, podéis copiar las dos imágenes en la carpeta res/drawable/ de vuestro proyecto (creamos la carpeta si no existe),  llamando a la imagen blanca ic_tab_artists_white.png y a la gris ic_tab_artists_grey.png. Ahora tenemos que crear un Drawable (que representa algo que puede ser dibujado) en XML que especifique que imagen usar para cada estado.
Creamos un nuevo fichero en res/drawable/ llamado ic_tab_artists.xml e insertamos el código siguiente del paso 3 de esta página.
Repetimos el proceso para albums y para songs, creando los ficheros ic_tab_albums.xml e ic_tab_songs.xml. Como en este ejemplo sólo usaremos dos imágenes (ic_tab_artists_white.png y ic_tab_artists_grey.png), no hace falta editar los ficheros creados.
Cuando el estado de la imagen cambie, la imagen se cambiará automáticamente por la otra definida en estos XML.

4. Abrimos el fichero res/layout/main.xml y sustituimos el código por el del del paso 4 de esta página. Este es el layout que mostrará las pestañas y que permitirá navegar entre las 3 actividades creadas antes.

5. Ahora abrimos HolaTabWidget y hacemos que herede de TabActivity poniendo:

public class HolaTabWidget extends TabActivity {

6. En el método onCreate() de HolaTabWidget ponemos el código de la parte 6 de esta página.

7. Ahora abrimos el fichero AndroidManifest.xml y escribimos estas líneas (clic para ampliar):

Lo que hacemos es añadir el tema NoTitleBar a la etiqueta de HolaTabWidget. Esto eliminará el título por defecto de la aplicación de la parte de arriba del layout, dejando más espacio para las pestañas.
Además, añadimos una actividad para cada pestaña. Esto no está en el tutorial original y causa que la aplicación genere un error y se cierre.

8. Ejecutamos la aplicación y veremos algo parecido a esto:


En la próxima parte del curso veremos el último tipo de ViewGroup, el List View.

SOLUCIÓN (Proyecto Android)

Siguiente parte del tutorial