Uso de TabHost

La vista TabHost nos va a permitir crear un interfaz de usuario basado en pestaas. Este permite de una forma muy intuitiva ofrecer al usuario diferentes vistas, sin ms que seleccionar una de las pestaaas que se muestran en la parte superior:

Para crear una interfaz de usuario con pestaas, es necesario utilizar FragmentTabHost y TabWidget. ElFragmentTabHost debe ser el nodo raz para el diseo, que contendr tanto el TabWidget para la visualizacin de las pestaas, como un FrameLayout para mostrar el contenido. A continuacin se muestra el esquema a utilizar: Nota: En las primeras versiones de Android se usaba TabHost en lugar FragmentTabHost. A partir del nivel de API 13, TabHost ha sido declarado como obsoleto. Google ha reorientado su gerarquia de clases para introducir el concepto de fragments. No obstante, puedes seguir utilizando TabHost sin ningn problema. Nota: Hasta la vesin 3.0 (API 11) no aparece FragmentTabHost. Entonces, no podra usarse en niveles de API anteriores. Para resolver este problema, y ms generalmente para poder usar fragments en versiones anteriores a la 3.0, Google ha creado la librera de compatibilidad[1] (android.support).. Es aadida por defecto al crear un nuevo proyecto. Poe lo tanto, podemos usar Fragments y clases relacionadas desde versiones <android.support.v4.app.FragmentTabHost android:id="@android:id/tabhost" /> <LinearLayout > <TabWidget android:id="@android:id/tabs" /> <FrameLayout android:id="@android:id/tabcontent" > <PrimerLayout /> <SegundoLayout /> <TercerLayout /> </FrameLayout> </LinearLayout> </TabHost>

[1]http://developer.android.com/tools/extras/support-library.html

Puedes implementar el contenido de dos maneras: usando las pestaas para intercambiar puntos de vista dentro de la misma actividad, o puedes utilizar las pestaas para cambiar entre actividades totalmente independientes.

En este apartado, vamos a crear una interfaz de usuario con pestaas que utiliza una nica actividad. Para hacerlo con diferentes actividades para cada pestaa puedes seguir el tutorial: Nota: El siguiente vdeo utiliza TabHost en lugar FragmentTabHost. No obstante, los conceptos que se explican siguen siendo vlidos.

Puedes ver algunos aspectos relacionados en formato poli[Media]

La vista TabHost en Android

Ejercicio paso a paso: Uso de TabHost

1. Crea un nuevo proyecto con los siguientes datos
Application name: TabHost Package name: org.example.tabhost Minimun Requiered SDK: API 7 Android 2.1 (Eclair) Activity Name: TabHostActivity Layout Name: activity_main.xml

2. Reemplaza el cdigo de activity_main.xml por el siguiente:

<android.support.v4.app.FragmentTabHostxmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TabWidget android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/tab1" android:orientation="vertical" android:layout_height="wrap_content" android:layout_width="match_parent"> <TextView android:layout_width="match_parent"

android:layout_height="match_parent" android:text="esto es una pestaa" /> <EditText android:layout_height="wrap_content" android:layout_width="match_parent"/> </LinearLayout> <TextView android:id="@+id/tab2" android:layout_width="match_parent" android:layout_height="match_parent" android:text="esto es otra pestaa" /> <TextView android:id="@+id/tab3" android:layout_width="match_parent" android:layout_height="match_parent" android:text="esto es la tercera pestaa" /> </FrameLayout> </LinearLayout> </android.support.v4.app.FragmentTabHost>

Como puedes observar se ha creado un FragmentTabHost debe ser el nodo raz para el diseo, que contiene dos elementos combinados por medio de un LinearLayout. El primero es un TabWidget para la visualizacin de las pestaas y el segundo es un FrameLayout para mostrar el contenido de la ficha. Dentro de este FrameLayout hay tres elementos, cada uno de los cuales contendr las vistas a mostrar para cada una de las lengetas. Tienes que tener especial cuidado con los atributos id. El FragmentTabHost debe llamarse siempre "@android:id/tabhost", mientras que elTabWidget ha de llamarse "@android:id/tabs". De esta forma el sistema conocer la finalidad de cada uno de estos elementos. Por otra parte, cada una de las vistas de contenido introducidas dentro del FrameLayout han de tener un id asignado por ti, como "@+id/tab1". 3. Para que un FragmentTabHost funcione resulta imprescindible introducir el siguiente cdigo. Abre el ficheroMainActivity.java y reemplaza el cdigo por el siguiente.
public class MainActivity extends FragmentActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TabHost tabHost = getTabHost(); tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator( "Ttulo 1", null).setContent(R.id.tab1Layout)); tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator( "Ttulo 2", null).setContent(R.id.tab2Layout)); tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator( "Ttulo 3", null).setContent(R.id.tab3Layout)); } }

Observa como la clase creada extiende de TabActivity en lugar de Activity. Adems, se han aadido varias lneas al final del mtodo onCreate(). La primera lnea obtiene la actividad que muestra las pestaas mediante getTabHost(). Luego aadimos tantas pestaas como nos interese. Para cada una se crea indicando un tag (newTabSpec()), se le asocia un ttulo y un icono (setIndicator()) y se indica donde est el contenido (setContent()). NOTA: Los iconos disponibles en el sistema y cmo crear nuevos icono ser estudiado en el siguiente captulo. 4. Ejecuta el proyecto y verifica el resultado.

Uso de la etiqueta <include> en Layouts

Un diseo basado en TabHost puede requerir ficheros xml muy extensos. Para organizar correctamente el trabajo y reutilizar diseos previos puede ser de gran ayuda la etiqueta <include>

Ejercicio paso a paso: Uso de la etiqueta <include> en Layouts

1. Empezaremos realizando una copia del fichero MasVistas/res/layout/main.xml aTabLayout/res/layout/boton_rojo.xml. Para ello selecciona el primer fichero y pgalo en la carpeta MasVistas/res/layout. Te pedir un nuevo nombre escribe boton_rojo.xml. Arrastra el nuevo fichero hasta la carpeta TabLayout/res/layout. 2. Realiza el mismo proceso con uno de los Layout creado en la prctica Uso de Layouts, donde se diseaba el teclado de una calculadora. En nuestro proyecto ha de llamarse calculadora.xml 3. Realiza el mismo proceso con el Layout creado en el ejercicio paso a paso Creacin visual de vistas. En nuestro proyecto ha de llamarse primer_layout.xml. 4. Aade el atributo android:id="@+id/tab1Layout" en el LineraLayout raz de botn_rojo.xml. Aade el atributo android:id="@+id/tab2Layout" en calculadora.xml y "@+id/tab3Layout" en prime r_layout.xml. 5. Abre el fichero main.xml y reemplaza el FrameLayout por:
<FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent"> <include layout="@layout/boton_rojo"/> <include layout="@layout/calculadora"/> <include layout="@layout/primer_layout"/> </FrameLayout>

6. Ejecuta el proyecto y verifica el resultado. Ojo: si pulsas alguno de los botones es posible que no funcione. Recuerda que no hemos copiado el cdigo. Has podido comprobar cmo hemos conseguido un diseo muy complejo sin la necesidad de crear un xml demasiado grande. De esta forma, tenemos el cdigo xml separado en cuatro ficheros diferentes. Adems ha sido muy sencillo reutilizar diseos previos.

{jcomments on}

https://polimedia.upv.es/visor/?id=b4a69883-864e-5c46-be58-549d4c323312