14.3.12

Tutorial Android parte 14: TabLayout con Android

Este tutorial está basado en el tutorial "Hello, views" de la documentación de Android SDK. Podéis encontrar el artículo original en inglés en el siguiente enlace:

http://developer.android.com/resources/tutorials/views/hello-tabwidget.html


El siguiente layout que vamos a aprender nos permitirá crear actividades con el siguiente aspecto.



Los tab layouts son un tipo de layout en el que los elementos se colocan dentro de pestañas.

Hay dos enfoques en los tab layouts:

- las pestañas separan distintas vistas de la misma Actividad o
- usar las pestañas para cambiar entre distintas Actividades.

En este ejemplo crearemos un conjunto de pestañas que permiten cambiar entre distintas Actividades.



Creando la aplicación

Abrimos Eclipse y seleccionamos el workspace que queramos (en mi caso yo selecciono C:\Android\workspaces\0001 prueba\V_0_0_0_0).

Para crear un nuevo proyecto:
- Ir a File -> New -> Project.
- Seleccionar un proyecto "Android Project" y pulsar Next.
- Rellenar los campos con los siguientes valores:

Project name: HelloTabLayout
Build target: (El que queráis, yo en este caso he marcado...) Android 1.5
Application name: Hello, TabLayout!
Package name: com.example.hellotablayout
Create Activity: HelloTabLayout

- Hacer click en Finish.

Ahora vamos a crear 3 clases de Actividad:
- ArtistsActivity
- AlbumsActivity
- SongsActivity

Para crear cada una de estas clases hay que seleccionar el proyecto con el botón derecho y seleccionar New -> Class.

Después introducir los siguientes datos:
SourceFolder: HelloTabLayout/src
Package: com.example.hellotablayout
Name: ArtistsActivity (o la que toque de las tres clases).

Cada una de estas clases representará el contenido de una pestaña. El código de cada clase será:



Cuando creéis las otras dos clases, actualizad la línea donde se pone el contenido del mensaje (textview.setText("This is the Artists tab");) adaptándola a la pestaña que corresponda.




Solo queda añadir estas 3 actividades el archivo de AndroidManifest.xml. Quedando así:



Ahora vamos a agregar los iconos para las pestañas. Podéis generarlos vosotros mismos (son iconos de 32x32) o cogerlos de la web del tutorial de Android SDK.

Yo en mi caso voy a agregar 6 iconos (1 en color claro y 1 en color oscuro para cada una de las 3 pestañas.
Os los pongo a continuación junto con el nombre que les he puesto (los que yo he hecho son los de estilo "minimalista").

ic_tab_albums_grey.png



ic_tab_albums_white.png



ic_tab_artists_grey.png



ic_tab_artists_white.png



ic_tab_songs_grey.png



ic_tab_songs_white.png



Cuando tengamos las seis imágenes las vamos a guardar dentro de res/drawable seleccionando la carpeta y pulsando con el botón derecho sobre ella y luego seleccionando Import (dentro seleccionaremos File System y luego marcaremos las imágenes en la carpeta en la que estén).

Ahora vamos a crear un archivo xml con la lista de imágenes de cada pestaña en la carpeta res/drawable/ con los nombres:
- ic_tab_artists.xml
- ic_tab_albums.xml
- ic_tab_songs.xml

Para crearlo hacemos click con el botón derecho en la carpeta res/drawable y seleccionar New -> File. Luego introducir el nombre del fichero (ic_tab_artists.xml). Y así con los demás.

El contenido de estos ficheros es:

Ic_tab_artists.xml



Ic_tab_albums.xml



Ic_tab_songs.xml



Después vamos a abrir el fichero res/layout/main.xml e insertamos el siguiente código xml:



Este layout desplegará las pestañas en la parte superior y el contenido de la pestaña seleccionado en la parte inferior.
TabHost require un elemento TabWidget y un elemento FrameLayout para desplegar las pestañas y el marco que contendrá el contenido de la pestaña seleccionada.
Se utiliza un LinearLayout para posicionar verticalmente los elementos TabWidget y FrameLayout.

Los nombres "tabs" para el TabWidget y "tabcontent" para el FrameLayout son obligatorios para que el TabHost pueda referenciarlos correctamente y rellenar el FrameLayout con el contenido de la pestaña seleccionada.

Lo siguiente que hay que hacer es abrir HelloTabLayout.java e indicar que herede de la clase TabActivity. Lo hacemos con el siguiente cambio en la declaración de la clase:

import android.app.TabActivity;

public class HelloTabLayout extends TabActivity {

Y modificamos el código del evento OnCreate. Para ello primero vamos a agregar las siguientes librerias:

import android.content.Intent;
import android.content.res.Resources;
import android.widget.TabHost;

Y después insertamos el siguietne código en el evento OnCreate:



De esta forma, sabemos para cada pestaña cuáles son sus archivos de imágenes y la actividad que ejecuta en su contenido.

Tras añadir cada una de las pestañas, con setCurrentTab establecemos cuál de las pestañas es la que estará activa.

Lo que nos queda es abrir el fichero Android Manifest y añadir el theme NoTitleBar a la actividad HelloTabLayout. Con esto se quitará el titulo que paarece en la parte superior de la actividad.



Ahora lanzamos la aplicación con Run –> Run.



La aplicación muestra las pestañas y el contenido de la pestaña seleccionada. También podemos cambiar de una a otra pestaña.




El código fuente del ejemplo podéis descargároslo de la siguiente dirección en nuestro repositorio de código:

Código fuente tutorial Android Parte 14.


Tutorial desarrollado por Grupo Libre y Extremo (Talavera de la Reina).

4 comments:

  1. Gracias por el tutorial ;) Desde Venezuela.

    ReplyDelete
  2. Gracias por el tutorial desde Argentina! :D

    ReplyDelete
  3. Amigo, estoy utilizando tabs en mi aplicación pero en una de las vistas (correspondiente a uno de los tabs) tengo un boton que me debe llevar a otra actividad y por lo tanto otro layout. LA pregunta es: como hago para que en este nuevo layout pueda seguir teniendo acceso a los tabs? o mejor dicho, como cargo este nuevo layout dentro del frame layout?. Muchas gracias

    ReplyDelete
  4. Hola, sé que había algo para poder hacer esto.

    ¿Has mirado en la página oficial para desarrolladores de Android?

    http://developer.android.com/reference/android/widget/TabHost.html

    Siento no poder serte de más ayuda pero ando muy liado por exámenes.

    ReplyDelete