Uso de TabHostLa vista TabHost nos va a permitir crear un interfaz de usuario basado en pestañas. Este

permite de una forma muy intuitiva ofrecer al usuario diferentes vistas, sin más que

seleccionar una de las pestaañas que se muestran en la parte superior:

Para crear una interfaz de usuario con pestañas, es necesario

utilizar FragmentTabHost y TabWidget. ElFragmentTabHost 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

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

ningún problema.

Nota: Hasta la vesió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[1] (android.support).. Es

añadida 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 pestañas

para intercambiar puntos de vista dentro de la misma actividad, o puedes

utilizar las pestañas para cambiar entre actividades totalmente

independientes. 

 

En este apartado, vamos a crear una interfaz de usuario con pestañas que

utiliza una única actividad. Para hacerlo con diferentes actividades para

cada pestaña puedes seguir el tutorial:

Nota: El siguiente vídeo utiliza TabHost en lugar FragmentTabHost. No

obstante, los conceptos que se explican siguen siendo válidos.

 

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 datosApplication name: TabHostPackage name: org.example.tabhostMinimun Requiered SDK: API 7 Android 2.1 (Eclair)Activity Name: TabHostActivityLayout Name: activity_main.xml

2.     Reemplaza el código 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 pestaña" />             <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 pestaña" />          <TextView android:id="@+id/tab3"             android:layout_width="match_parent"             android:layout_height="match_parent"             android:text="esto es la tercera pestaña" />       </FrameLayout>   </LinearLayout></android.support.v4.app.FragmentTabHost>

Como puedes observar se ha creado un FragmentTabHost debe ser el nodo

raíz para el 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 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 lengüetas. 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 código. Abre el ficheroMainActivity.java y reemplaza el código 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(           "Título 1", null).setContent(R.id.tab1Layout));       tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator(           "Título 2", null).setContent(R.id.tab2Layout));       tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator(           "Título 3", null).setContent(R.id.tab3Layout));   }}

Observa como la clase creada extiende de TabActivity en lugar de Activity.

Además, se han añadido varias líneas al final del método onCreate(). La

primera línea obtiene la actividad que muestra las pestañas

mediante getTabHost(). Luego añadimos tantas pestañas como nos interese.

Para cada una se crea indicando un tag (newTabSpec()), se le asocia un

título  y un icono (setIndicator()) y se indica donde está el contenido

(setContent()). NOTA: Los iconos disponibles en el sistema y cómo crear nuevos icono será

estudiado en el siguiente capítulo.

4.     Ejecuta el proyecto y verifica el resultado.Uso de la etiqueta <include> en Layouts

Un diseño basado en TabHost puede requerir ficheros xml muy extensos. Para organizar

correctamente el trabajo y reutilizar diseños previos puede ser de gran ayuda la etiqueta

<include>

Ejercicio paso a paso: Uso de la etiqueta <include> en Layouts1. Empezaremos realizando una copia del

fichero MasVistas/res/layout/main.xml aTabLayout/res/layout/boton_rojo.xml. Para ello selecciona el primer fichero y pégalo 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 práctica Uso de Layouts, donde se diseñaba 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 Creación visual de vistas. En nuestro proyecto ha de llamarse primer_layout.xml.

4. Añade el atributo android:id="@+id/tab1Layout" en el LineraLayout raíz de botón_rojo.xml. Añade el atributo android:id="@+id/tab2Layout" en calculadora.xml y "@+id/tab3Layout" en primer_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 código.Has podido comprobar cómo hemos conseguido un diseño muy complejo sin la necesidad de crear un xml demasiado grande. De esta forma, tenemos el código xml separado en cuatro ficheros diferentes. Además ha sido muy sencillo reutilizar diseños previos.

{jcomments on}

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