LinuxParty

Si está desarrollando una aplicación para Android con múltiples pantallas, una gran opción de navegación son las pestañas (Tabs). Aquí son particularmente útiles si sus pantallas tienen todas en una jerarquía semejante, por ejemplo proporcionando diferentes puntos de vista de una información similar. Si usted tiene una estructura muy jerárquica, las pestañas (Tabs) pueden tener sentido menos lógico y usted pueden preferir hacer clic más profundamente en la actividad.

Android: navegación de Pestañas (Tabs)

Dado que en Android 3.0, la mejor forma de hacerlo es utilizando el vínculo Fragments. Fragments permite dividir sus actividades en piezas modulares, para que pueda combinar y reutilizar múltiples fragmentos en múltiples actividades. Usted puede pensar en un Fragmento como una especie de actividad de sub, gestionado en parte por su actividad principal. No vamos a entrar en el uso de fragmentos en detalle aquí, pero vamos a ver a su utilización para crear una aplicación básica con pestañas (Tabs).

App y configuración layout

Crear un nuevo proyecto, TabTest, en Eclipse, recordando que tendrá que ser dirigida a Android 3.0 o superior. (Yo usé 4.0.3.) Asegúrese de que utiliza el tema "ActionBar". (with Action Bar)

Nuestra actividad principal, TabTestActivity, configura la Barra de acciones ActionBar:

public class TabTestActivity extends Activity {
	ActionBar.Tab tab1, tab2, tab3;
	Fragment fragmentTab1 = new FragmentTab1();
	Fragment fragmentTab2 = new FragmentTab2();
	Fragment fragmentTab3 = new FragmentTab3();
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_test);
        
        ActionBar actionBar = getActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        
        tab1 = actionBar.newTab().setText("1");
        tab2 = actionBar.newTab().setText("2");
        tab3 = actionBar.newTab().setText("3");
        
        tab1.setTabListener(new MyTabListener(fragmentTab1));
        tab2.setTabListener(new MyTabListener(fragmentTab2));
        tab3.setTabListener(new MyTabListener(fragmentTab3));
        
        actionBar.addTab(tab1);
        actionBar.addTab(tab2);
        actionBar.addTab(tab3);
    }

ActionBar.Tab es, como era de esperar, una ficha en la barra de acción, y crea tres de ellos. También creamos tres fragmentos para mantener el contenido de nuestras tres pestañas (Tabs). Vamos a crear las subclases FragmentTab en un momento.

Hemos creado el layout (diseño), como de costumbre (ver sección más adelante para el XML) , tome el Barra de acciones, y establezca el modo de navegación de pestañas. Los otros modos de navegación son List, que ofrece un menú de la lista , y Standard ( sólo tiene un logo de "home" y el texto del título). A continuación, crear tres nuevas pestañas en la ActionBar, asignándolos a los miembros de la clase ActionBar.Tab , y establecer el texto del título para cada uno. Considere también usesetIcon(R.drawable.image) para establecer un icono de imagen.

Por último , creamos una nueva TabListener para cada uno, y luego añadimos las tres a la Barra de acciones. Un TabListener proporciona una interfaz de devolución de llamada para manejar las acciones aplicadas a las pestañas, incluyendo enfoque, agregarlos o eliminarlos. ActionBar.TabListener es una interfaz, por lo que vamos a necesitar para poner en práctica con la clase MyTabListener personalizado.

Tenga en cuenta que como estamos usando android.app.Fragment (no android.app.v4.support.Fragment ) . También debemos editar AndroidManifest.xml para establecer el SDK mínimo a 13.

La creación de las fichas

Habiendo escrito la actividad principal, tenemos que crear las clases de ficha. FragmentTab1.java se ve así:

public class FragmentTab1 extends Fragment {
  public View onCreateView(LayoutInflater inflater, ViewGroup container, 
                           Bundle savedInstanceState){
	View view = inflater.inflate(R.layout.tab, container, false);
	TextView textview = (TextView) view.findViewById(R.id.tabtextview);
	textview.setText(R.string.One);
	return view;
  }
}

Esta clase debe extender Fragment ya que se trata como un fragmento en la construcción de la Barra de acciones. Es bastante sencillo; en su mayoría sólo inflar su trazado. También establecemos el contenido de la TextView (tendrás que editar los valores / strings.xml en consecuencia para proporcionar este recurso de cadena). También puede realizar otros cambios en la ficha, como color de fondo, aquí.

FragmentTab2.java y FragmentTab3.java son casi idénticos, excepto que la cadena de texto será R.string.Two y R.string.Three respectivamente. (Usted se dará cuenta de que esto podría usar un poco de refactorización para evitar la repetición de código. Usted puede configurar los Fragments de utilizar las cadenas de texto como argumentos en un paquete, pero que está más allá del alcance de este tutorial.)

Crear el TabListener

El último bit de código activo antes de pasar a los archivos XML es la clase MyTabListener:

public class MyTabListener implements ActionBar.TabListener {
	Fragment fragment;
	
	public MyTabListener(Fragment fragment) {
		this.fragment = fragment;
	}
	
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
		ft.replace(R.id.fragment_container, fragment);
	}
	
	public void onTabUnselected(Tab tab, FragmentTransaction ft) {
		ft.remove(fragment);
	}
	
	public void onTabReselected(Tab tab, FragmentTransaction ft) {
		// nothing done here
	}
}

FragmentTransaction proporciona la API para diversas operaciones de fragmentos . Cada conjunto de cambios a un fragmento de su actividad ( de retirarlo, reemplazándolo con otro fragmento, añadiendo que , y así sucesivamente ) se llama una transacción y se gestiona a través FragmentTransaction. Además de lo que permite realizar una serie de cambios a la vez , también puede añadir las transacciones a la pila de retroceso, lo que permite a los usuarios naveguen hacia atrás a través de los cambios que han hecho. Sin embargo, en este caso gestionamos directamente las operaciones a nosotros mismos, sólo añadir algo a una transacción de la que la actividad principal (y la Barra de acciones ) gestionarán para nosotros.

Así que para cada devolución de llamada del proceso Listener, añade la transacción adecuada al FragmentTransaction en el momento. Si se selecciona la pestaña, el fragmento actual sustituye a la anterior en el contenedor del fragmento, y si es seleccionada, se elimina. Esto podría, por supuesto, ser mucho más complicado si el código lo requiera.

Layouts (Presentaciones)

Después de escribir todo el código, tenemos que crear nuestros diseños XML. La disposición principal, activity_tab_test.xml , es sólo un contenedor para los fragmentos de la ficha :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Este es el R.id.fragment_container se refiere el código MyTabListener, que cada fragmento será reemplazado en como se selecciona en su ficha. Es sólo un único fotograma, que cubre toda la pantalla (los títulos de las fichas van en la Barra de acciones que tienen su propio diseño generado por Android).

Lo siguiente que necesitamos la ficha de presentación, tab.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
    <TextView
        android:id="@+id/tabtextview" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        />
</RelativeLayout>

Otro diseño simple: éste sólo tiene un único TextView, en el cual ponemos nuestro recurso de cadena en las clases FragmentTab*class. Si querías tus tabs más diferentes entre sí, se pueden crear varios diseños y usar uno diferente en cada clase de tabulación. Esta disposición se dejó caer en el FrameLayout del principal XML Activity.

Todas las piezas de su código ya están juntos; ejecútelo y usted obtendrá una actividad con Pestañas (Tabs) que se parece un poco a la captura de pantalla, arriba.

Como siempre, este es un ejemplo simple de una estructura que puede ser más complicado si usted lo desea. Experimentar más y ver lo simple y opciones de diseño más complejas que puede configurar y cómo se pueden gestionar los diferentes aspectos de su aplicación en un contexto de tabulación. Aquí cuando se usan apropiadamente pueden proporcionar una gran interfaz de usuario, por lo que son bien vale la pena llegar a enfrentarse con elllo

Este artículo concluye nuestra serie sobre Android desarrollo de aplicaciones para los principiantes. Para el artículo anterior de esta serie , véase:

Cómo construir un menú de contexto en el desarrollo de Android App

Para empezar en la visita que comienza :

Programación Android para principiantes: Parte 1