Uso de FragmentTabHost
A partir del nivel de API 13, TabHost ha sido declarado como obsoleto. Google ha reorientado su jerarquía de clases para introducir el concepto de fragment, de manera que en lugar de TabHost, propone utilizar FragmentTabHost. No obstante, podemos seguir utilizando TabHost sin ningún problema.
La clase FragmentTabHost no aparece hasta la versión 3.0 (API 11). 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 una librería de compatibilidad[1] (android.support). Es añadida por defecto al crear un nuevo proyecto. Gracias a esta librería, podemos usar fragments y clases relacionadas en todas las versiones.
Ejercicio paso a paso: Uso de FragmentTabHost
1. Crea un nuevo proyecto con los siguientes datos
Application name: FragmentTabHost
Package name: org.example.fragmenttabhost
Minimun Requiered SDK: API 8 Android 2.2 (Froyo)
2. Reemplaza el código de activity_main.xml por el siguiente:
<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mi_tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"/>
<FrameLayout
android:id="@+id/contenido"
android:layout_width="match_parent"
android:layout_height="0dp"/>
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
Como puedes observar se ha creado un FragmentTabHost, 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. Observa los valores con los atributos id. El TabWidget se ha utilizado "@android:id/tabs", un identificador fijo definido como recurso del sistema. De esta forma estamos indicando la finalidad que tiene. Para el resto de elementos se han definido nuevos identificadores
3. Abre el fichero MainActivity.java y reemplaza el código por el siguiente:
package com.example.fragmenttabhost;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
public class MainActivity extends FragmentActivity {
private FragmentTabHost tabHost;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabHost = (FragmentTabHost) findViewById(R.id.mi_tabhost);
tabHost.setup(this, getSupportFragmentManager(), R.id.contenido);
tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("Lengüeta 1"),
Tab1.class, null);
tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("Lengüeta 2"),
Tab2.class, null);
tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("Lengüeta 3"),
Tab3.class, null);
}
}
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 fragmnet 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() crear 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 descriptos en la pestaña recién creada.
NOTA:También podremos asignar iconos a las lengüetas con el método setIndicator(). Los iconos disponibles en el sistema y cómo crear nuevos icono será estudiado en el siguiente capítulo.
4. Crea un nuevo layout con nombre tab1.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center vertical/center_horizontal"
android:text="Lengüeta 1"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
5. Crea una nueva clase con Tab1.java:
public class Tab1 extends Fragment {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.tab1, container, false);
}
}
Nota sobre Java: Pulsa Ctrl-Shift-O, para que automáticamente se añadan los paquetes que faltan. Si la clase Fragment es encontrada 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(), si no 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.
{jcomments on}