domingo, 3 de agosto de 2014
Uso de TabHost
La 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>
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]
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 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 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 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}
