Implementación de pestañas de fragmentos ActionBarSherlock en Android

En este tutorial, aprenderá cómo implementar pestañas de fragmentos ActionBarSherlock en su aplicación de Android. Las pestañas permiten al usuario navegar entre pantallas hermanas seleccionando el indicador de pestaña apropiado disponible en la parte superior de la pantalla. Crearemos pestañas que permitan a los usuarios navegar entre fragmentos que contienen un texto en particular usando ActionBarSherlock Library. Vamos a empezar…

Prepare su proyecto importando la biblioteca ActionBarSherlock . Consulte el tutorial Implementación de ActionBarSherlock en Android .

Cree un nuevo proyecto en Eclipse File > New > Android Application Project. Complete los detalles y nombre su proyecto ABSFragmentTabs .

Nombre de la aplicación: ABSFragmentTabs

Nombre del proyecto: ABSFragmentTabs

Nombre del paquete: com.androidbegin.absfragmenttabs

Abra su MainActivity .java y pegue el siguiente código.

Actividad principal .java

paquete com.androidbegin.absfragmenttabs;

importar com.actionbarsherlock.app.ActionBar;
importar com.actionbarsherlock.app.SherlockFragmentActivity;
importar android.os.Bundle;
importar android.support.v4.app.Fragment;

clase pública MainActivity extiende SherlockFragmentActivity {

	ActionBar.Tab Tab1, Tab2, Tab3;
	Fragmento fragmentoTab1 = nuevo FragmentoTab1();
	Fragmento fragmentoTab2 = nuevo FragmentoTab2();
	Fragmento fragmentoTab3 = nuevo FragmentoTab3();

	@Anular
	public void onCreate (Paquete guardadoInstanceState) {
		super.onCreate(estadoDeInstanciaGuardado);
		setContentView(R.diseño.actividad_principal);

		ActionBar actionBar = getSupportActionBar();

		// Ocultar icono de la barra de acción
		actionBar.setDisplayShowHomeEnabled(falso);

		// Ocultar título de la barra de acciones
		actionBar.setDisplayShowTitleEnabled(falso);

		// Crear pestañas de la barra de acción
		actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

		// Establecer icono de pestaña y títulos
		Tab1 = actionBar.newTab().setIcon(R.drawable.tab1);
		Tab2 = actionBar.newTab().setText("Tab2");
		Tab3 = actionBar.newTab().setText("Tab3");

		// Establecer oyentes de pestañas
		Tab1.setTabListener(nuevo TabListener(fragmentoTab1));
		Tab2.setTabListener(nuevo TabListener(fragmentoTab2));
		Tab3.setTabListener(nuevo TabListener(fragmentoTab3));

		// Agregar pestañas a la barra de acciones
		actionBar.addTab(Tab1);
		actionBar.addTab(Tab2);
		actionBar.addTab(Tab3);
	}

}

Hemos creado tres pestañas con detectores de pestañas y configuramos la barra de acción en las pestañas del modo de navegación. Para la primera pestaña, hemos configurado un icono de pestaña personalizado y los otros dos con título de texto. Hemos preparado un ícono de pestaña de muestra para este tutorial. Inserte el ícono de la pestaña de muestra descargado en su res > drawable-hdpi .

Icono de pestaña de muestra

[wpfilebase tag=ID de archivo=29 tpl=botón de descarga/]

A continuación, cree un diseño gráfico XML para MainActivity. Vaya a res > diseño > Haga clic con el botón derecho en el diseño > Nuevo > Archivo XML de Android

Nombre su nuevo archivo XML activity_main.xml y pegue el siguiente código.

actividad_principal .xml

<?versión xml="1.0" codificación="utf-8"?>
<FrameLayout xmlns_android="http://schemas.android.com/apk/res/android"
    android_id="@+id/fragmento_contenedor"
    android_layout_width="match_parent"
    android_layout_height="match_parent" />

A continuación, cree una clase de escucha de pestañas. Vaya a Archivo > Nuevo > Clase y asígnele el nombre TabListener .java. Seleccione su paquete llamado com. androidbegin .absfragmenttabs y haga clic en Finalizar .

Abra su TabListener .java y pegue el siguiente código.

TabListener .java

paquete com.androidbegin.absfragmenttabs;

importar com.actionbarsherlock.app.ActionBar;
importar com.actionbarsherlock.app.ActionBar.Tab;

importar android.support.v4.app.Fragment;
importar android.support.v4.app.FragmentTransaction;

la clase pública TabListener implementa ActionBar.TabListener {

	fragmento fragmento;

	público TabListener (fragmento de fragmento) {
		// TODO stub de constructor generado automáticamente
		este.fragmento = fragmento;
	}

	@Anular
	public void onTabSelected(Tab tab, FragmentTransaction ft) {
		// TODO stub de método generado automáticamente
		ft.replace(R.id.fragment_container, fragmento);
	}

	@Anular
	public void onTabUnselected(Tab tab, FragmentTransaction ft) {
		// TODO stub de método generado automáticamente
		ft.remove(fragmento);
	}

	@Anular
	public void onTabReselected(Tab tab, FragmentTransaction ft) {
		// TODO stub de método generado automáticamente

	}
}

Esta clase de escucha de pestañas administra los clics de pestañas seleccionados y muestra o elimina un fragmento.

A continuación, cree la primera pestaña de fragmento. Vaya a Archivo > Nuevo > Clase y asígnele el nombre FragmentTab1 .java. Seleccione su paquete llamado com. androidbegin .absfragmenttabs y haga clic en Finalizar .

Abra su FragmentTab1 .java y pegue el siguiente código.

FragmentTab1 .java

paquete com.androidbegin.absfragmenttabs;

importar android.os.Bundle;
importar android.view.LayoutInflater;
importar android.view.View;
importar android.view.ViewGroup;
importar com.actionbarsherlock.app.SherlockFragment;

clase pública FragmentTab1 extiende SherlockFragment {
    @Anular
    Public View onCreateView(LayoutInflater inflater, contenedor ViewGroup,
            Paquete guardadoInstanceState) {
        Ver rootView = inflater.inflate(R.layout.fragmenttab1, container, false);
        volver rootView;
    }

}

A continuación, cree la segunda pestaña de fragmento. Vaya a Archivo > Nuevo > Clase y asígnele el nombre FragmentTab2 .java. Seleccione su paquete llamado com. androidbegin .absfragmenttabs y haga clic en Finalizar .

Abra su FragmentTab2 .java y pegue el siguiente código.

FragmentTab2 .java

paquete com.androidbegin.absfragmenttabs;

importar android.os.Bundle;
importar android.view.LayoutInflater;
importar android.view.View;
importar android.view.ViewGroup;
importar com.actionbarsherlock.app.SherlockFragment;

clase pública FragmentTab2 extiende SherlockFragment {
    @Anular
    Public View onCreateView(LayoutInflater inflater, contenedor ViewGroup,
            Paquete guardadoInstanceState) {
        Ver rootView = inflater.inflate(R.layout.fragmenttab2, container, false);
        volver rootView;
    }

}

A continuación, cree la pestaña del tercer fragmento. Vaya a Archivo > Nuevo > Clase y asígnele el nombre FragmentTab3 .java. Seleccione su paquete llamado com. androidbegin .absfragmenttabs y haga clic en Finalizar .

Abra su FragmentTab3 .java y pegue el siguiente código.

FragmentTab3 .java

paquete com.androidbegin.absfragmenttabs;

importar android.os.Bundle;
importar android.view.LayoutInflater;
importar android.view.View;
importar android.view.ViewGroup;
importar com.actionbarsherlock.app.SherlockFragment;

clase pública FragmentTab3 extiende SherlockFragment {
    @Anular
    Public View onCreateView(LayoutInflater inflater, contenedor ViewGroup,
            Paquete guardadoInstanceState) {
        Ver rootView = inflater.inflate(R.layout.fragmenttab3, container, false);
        volver rootView;
    }

}

A continuación, cree un diseño gráfico XML para la pestaña del primer fragmento. Vaya a res > diseño > Haga clic con el botón derecho en el diseño > Nuevo > Archivo XML de Android

Nombre su nuevo archivo XML fragmenttab1.xml y pegue el siguiente código.

fragmenttab1 .xml

<RelativeLayout xmlns_android="http://schemas.android.com/apk/res/android"
    xmlns_herramientas="http://esquemas.android.com/herramientas"
    android_layout_width="match_parent"
    android_layout_height="match_parent" >

    <Vista de texto
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_centerHorizontal="verdadero"
        android_layout_centerVertical="verdadero"
        android_text="@cadena/Fragmenttab1"/>

</RelativeLayout>

A continuación, cree un diseño gráfico XML para la segunda pestaña del fragmento. Vaya a res > diseño > Haga clic con el botón derecho en el diseño > Nuevo > Archivo XML de Android

Nombre su nuevo archivo XML fragmenttab2.xml y pegue el siguiente código.

fragmenttab2 .xml

<RelativeLayout xmlns_android="http://schemas.android.com/apk/res/android"
    xmlns_herramientas="http://esquemas.android.com/herramientas"
    android_layout_width="match_parent"
    android_layout_height="match_parent" >

    <Vista de texto
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_centerHorizontal="verdadero"
        android_layout_centerVertical="verdadero"
        android_text="@cadena/Fragmenttab2"/>

</RelativeLayout>

A continuación, cree un diseño gráfico XML para la pestaña del tercer fragmento. Vaya a res > diseño > Haga clic con el botón derecho en el diseño > Nuevo > Archivo XML de Android

Nombre su nuevo archivo XML fragmenttab3.xml y pegue el siguiente código.

fragmenttab3 .xml

<RelativeLayout xmlns_android="http://schemas.android.com/apk/res/android"
    xmlns_herramientas="http://esquemas.android.com/herramientas"
    android_layout_width="match_parent"
    android_layout_height="match_parent" >

    <Vista de texto
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_centerHorizontal="verdadero"
        android_layout_centerVertical="verdadero"
        android_text="@cadena/Fragmenttab3"/>

</RelativeLayout>

Cambie el nombre de la aplicación y fragmente los textos de la vista de texto en strings.xml . Abra su strings.xml y pegue el siguiente código. Vaya a res > valores > cadenas.xml

cadenas.xml

<recursos>

    <string name="app_name">Pestañas de fragmentos ABS</string>
    <string name="hello_world">¡Hola mundo!</string>
    <string name="menu_settings">Configuración</string>
    <string name="Fragmenttab1">Este es el Fragmento 1 de ActionBarSherlock</string>
    <string name="Fragmenttab2">Este es el Fragmento 2 de ActionBarSherlock</string>
    <string name="Fragmenttab3">Este es el Fragmento 3 de ActionBarSherlock</string>

</recursos>

En su AndroidManifest.xml , debemos cambiar el estilo del tema a » Theme.Sherlock » y establecer la versión SDK mínima de Android que prefiera. Abra su AndroidManifest.xml y pegue el siguiente código.

AndroidManifest.xml

<manifiesto xmlns_android="http://schemas.android.com/apk/res/android"
    paquete="com.androidbegin.absfragmenttabs"
    android_versionCode="1"
    android_versionName="1.0" >

    <usos-sdk
        android_minSdkVersion="1"
        android_targetSdkVersion="15" />

    <aplicación
        android_icono="@dibujable/ic_launcher"
        android_etiqueta="@cadena/nombre_aplicación"
        android_tema="@estilo/Tema.Sherlock" >
        <actividad android_name=".MainActivity" >
            <intent-filter>
                <acción android_name="android.intent.action.MAIN" />

                <categoría android_name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </actividad>
    </aplicación>

</manifiesto>

Producción :

Código fuente

[purchase_link id=”7866″ text=”Comprar para descargar el código fuente” style=”button” color=”green”]

Tal vez te interese: