Читать книгу El gran libro de Android - Jesus Tomás Gironés - Страница 80

Los tabs nos van a permitir crear una interfaz de usuario basada en pestañas, donde, de una forma muy intuitiva, podemos ofrecer al usuario diferentes vistas, que son seleccionadas al pulsar una de las pestañas que se muestran en la parte superior:

Para crear en XML una interfaz de usuario con pestañas, es necesario utilizar las etiquetas FragmentTabHost y TabWidget. FragmentTabHost debe ser el nodo raíz para el diseño, que contendrá tanto el TabWidget para la visualización de las pestañas como un FrameLayout para mostrar el contenido. A continuación se muestra el esquema a utilizar:

NOTA: en las primeras versiones de Android se usaba TabHost en lugar de FragmentTabHost. A partir del nivel de API 13, TabHost ha sido declarado obsoleto. Google ha reorientado su jerarquía de clases para introducir el concepto de fragments. No obstante, puedes seguir utilizando TabHost sin ningún problema.

NOTA: hasta la versión 3.0 (API 11) no aparece FragmentTabHost. Entonces, no podría usarse en niveles de API anteriores. Para resolver este problema, y más generalmente para poder usar fragments en versiones anteriores a la 3.0, Google ha creado la librería de compatibilidad¹⁴ (android.support). Se añade por defecto al crear un nuevo proyecto. Por lo tanto, podemos usar fragments y clases relacionadas desde cualquier versión.

NOTA: el siguiente vídeo utiliza TabHost en lugar FragmentTabHost. No obstante, los conceptos que se explican siguen siendo válidos.

Vídeo[tutorial]: La vista TabHost en Android

Ejercicio: Uso de FragmentTabHost

1.Crea un nuevo proyecto y llámalo Tabs.

2.Reemplaza el código de activity_main.xml por el siguiente:

La primera cosa extraña de este código es el nombre de la primera etiqueta. En lugar de indicar simplemente FragmentTabHost, se ha indicado el nombre completo de dominio. Como estudiaremos en el capítulo 4, cada vez que usemos una vista que no sea del sistema (por ejemplo, creada por nosotros o creada en una librería como en este caso) tendremos que indicar la clase donde se crea con su nombre completamente cualificado. Es decir, el nombre de la clase precedida de su paquete.

Como puedes observar, un FragmentTabHost es el nodo raíz del diseño, que contiene dos elementos combinados por medio de un LinearLayout. El primero es un TabWidget para la visualización de las pestañas y el segundo es un FrameLayout para mostrar el contenido asociado de cada lengüeta. En número de lengüetas y su contenido se indicará por código.

3.Abre el fichero MainActivity.java y reemplaza el código por el siguiente:

Observa como la clase creada extiende de FragmentActivity en lugar de Activity. Esto permitirá que la actividad trabaje con fragments; en concreto, vamos a crear un fragment para cada lengüeta. Se han añadido varias líneas en el método onCreate(). Empezamos inicializando la variable tabHost, luego se utiliza el método setup() para configurarla. Para ello indicamos el contexto, manejador de fragments y donde se mostrarán los fragments.

Cada una de las siguientes tres líneas introduce una nueva lengüeta usando el método addTab(). Se indican tres parámetros: un objeto TabSpec, una clase con el fragment a visualizar en la lengüeta y un Bundle por si queremos pasar información a la lengüeta. El método newTabSpec() crea una nueva lengüeta en un TabHost. Se le pasa como parámetro un String, que se utiliza como identificador y devuelve el objeto de tipo TabSpec creado.

Nota sobre Java: dado que el método newTabSpec() devuelve un objeto de tipo TabSpec, tras la llamada podemos llamar al método setIndicator(), que nos permitirá introducir un descriptor en la pestaña recién creada.

NOTA: también podremos asignar iconos a las lengüetas con el método setIndicator(). En el capítulo siguiente se estudiarán los iconos disponibles en el sistema y cómo crear nuevos icono. En las últimas versiones de Android solo podemos visualizar un texto o un icono. Para ver el icono introduce un texto vacío.

4.Crea un nuevo layout y llámalo tab1.xml:

5.Crea una nueva clase con Tab1.java:

Nota sobre Java: pulsa Ctrl-Shift-O para que automáticamente se añadan los paquetes que faltan. Si la clase Fragment se encuentra en más de un paquete, selecciona android.support.v4.app.FragmentTabHost.

Un fragment se crea de forma muy parecida a una actividad. También dispone del método onCreate(), aunque en este ejemplo no se introduce código. Un fragment también tiene asociada una vista, aunque a diferencia de una actividad, no se asocia en el método onCreate(), sino que dispone de un método especial para esta tarea: onCreateView().

6.Repite los dos pasos anteriores para crear tab2.xml y Tab2.java.

7.Repite de nuevo para crear el layout tab3.xml y la clase Tab3.java.

8.Modifica estos ficheros para que cada layout sea diferente y para que cada fragment visualice el layout correspondiente.

9.Ejecuta el proyecto y verifica el resultado.

NOTA: si en uno de los layouts asignados a un fragment has utilizado el atributo onClick, el método indicado ha de ser introducido dentro de la actividad. Si lo introduces dentro del fragment no será reconocido.

Notas al pie

¹³ http://www.androidcurso.com/index.php/31

¹⁴ http://developer.android.com/tools/extras/support-library.html