Android ActionbarTutorial de pestañas de fragmentos anidados de Sherlock

Última actualización: 20 de septiembre de 2013

En este tutorial, aprenderá cómo implementar ActionbarSherlock Nested Fragment Tabs en su aplicación de Android. Fragmento anidado le permite incrustar fragmentos dentro de fragmentos. Lo que significa que puede colocar componentes de interfaz de usuario dinámicos y reutilizables en un componente de interfaz de usuario que en sí mismo es dinámico y reutilizable. Crearemos pestañas principales con fragmentos y dentro del fragmento principal habrá pestañas secundarias con fragmentos 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 ABSNestedFragTab.

Nombre de la aplicación: ABSNestedFragTab

Nombre del proyecto: ABSNestedFragTab

Nombre del paquete: com.androidbegin. absnestedfragtab

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

Actividad principal .java

paquete com.androidbegin.absnestedfragtab;

importar com.actionbarsherlock.app.SherlockFragmentActivity;

importar android.support.v4.app.FragmentTabHost;
importar android.os.Bundle;

clase pública MainActivity extiende SherlockFragmentActivity {
	// Declarar Variables	
	FragmentoTabHost mTabHost;

	@Anular
	Vacío protegido onCreate (Paquete de estado de instancia guardado) {
		super.onCreate(estadoDeInstanciaGuardado);
		// Establecer la vista desde main_fragment.xml
		setContentView(R.layout.main_fragment);

		// Localice android.R.id.tabhost en main_fragment.xml
		mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);

		// Crea las pestañas en main_fragment.xml
		mTabHost.setup(this, getSupportFragmentManager(), R.id.tabcontent);

		// Crear tabulador padre1
		mTabHost.addTab(mTabHost.newTabSpec("parent1").setIndicator("Parent1"),
				FragmentParentTab1.clase, nulo);

		// Crear tabulador padre2
		mTabHost.addTab(mTabHost.newTabSpec("parent2").setIndicator("Parent2"),
				FragmentParentTab2.class, nulo);

	}
}

En esta actividad, hemos creado dos pestañas principales con FragmentTabHost y cada pestaña abrirá un fragmento diferente.

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 main_fragment.xml y pegue el siguiente código.

fragmento_principal .xml

<LinearLayout xmlns_android="http://schemas.android.com/apk/res/android"
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android:orientación="vertical" >

    <android.support.v4.app.FragmentTabHost
        android_id="@android:id/tabhost"
        android_layout_width="match_parent"
        android_layout_height="match_parent" >

        <FrameLayout
            android_id="@+id/contenido de tabulación"
            android_layout_width="match_parent"
            android_layout_height="match_parent" />
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

A continuación, cree la pestaña principal del primer fragmento. Vaya a Archivo > Nuevo > Clase y asígnele el nombre FragmentParentTab1 .java. Seleccione su paquete llamado com. Androidbegin . absnestedfragtab y haga clic en Finalizar .

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

FragmentoParentTab1 .java

paquete com.androidbegin.absnestedfragtab;

importar com.actionbarsherlock.app.SherlockFragment;

importar android.os.Bundle;

importar android.view.LayoutInflater;
importar android.view.View;
importar android.view.ViewGroup;

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

}

A continuación, cree la pestaña principal del segundo fragmento. Vaya a Archivo > Nuevo > Clase y asígnele el nombre FragmentParentTab2 .java. Seleccione su paquete llamado com. Androidbegin . absnestedfragtab y haga clic en Finalizar .

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

FragmentoParentTab2 .java

paquete com.androidbegin.absnestedfragtab;

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

clase pública FragmentParentTab2 extiende SherlockFragment {
	FragmentoTabHost mTabHost;

	@Anular
	Public View onCreateView(LayoutInflater inflater, contenedor ViewGroup,
			Paquete guardadoInstanceState) {

		mTabHost = new FragmentTabHost(getSherlockActivity());

		mTabHost.setup(getSherlockActivity(), getChildFragmentManager(),
				R.layout.fragmentparenttab2);

		// Crear tabulador secundario1
		mTabHost.addTab(mTabHost.newTabSpec("child1").setIndicator("Child1"),
				FragmentChildTab1.class, nulo);

		// Crear Child Tab2
		mTabHost.addTab(mTabHost.newTabSpec("niño2").setIndicator("Niño2"),
				FragmentChildTab2.class, nulo);
		volver mTabHost;
	}

	@Anular
	vacío público onDestroyView () {
		super.onDestroyView();
		mTabHost = nulo;
	}
}

En este fragmento, hemos creado dos pestañas secundarias con FragmentTabHost y cada pestaña abrirá un fragmento diferente.

A continuación, cree un diseño gráfico XML para la pestaña principal 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 fragmentparenttab1.xml y pegue el siguiente código.

fragmentoparenttab1 .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/FragmentParentTab1" />

</RelativeLayout>

A continuación, cree un diseño gráfico XML para la pestaña principal del segundo 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 fragmentparenttab2.xml y pegue el siguiente código.

fragmentoparenttab2 .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" >

</RelativeLayout>

A continuación, cree la pestaña secundaria del primer fragmento. Vaya a Archivo > Nuevo > Clase y asígnele el nombre FragmentChildTab1 .java. Seleccione su paquete llamado com. Androidbegin . absnestedfragtab y haga clic en Finalizar .

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

FragmentChildTab1 .java

paquete com.androidbegin.absnestedfragtab;

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

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

}

A continuación, cree la segunda pestaña secundaria del fragmento. Vaya a Archivo > Nuevo > Clase y asígnele el nombre FragmentChildTab2 .java. Seleccione su paquete llamado com. Androidbegin . absnestedfragtab y haga clic en Finalizar .

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

FragmentChildTab2 .java

paquete com.androidbegin.absnestedfragtab;

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

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

}

A continuación, cree un diseño gráfico XML para la pestaña secundaria del primer fragmento. Vaya a res > diseño > Haga clic con el botón derecho en diseño > Nuevo > Archivo XML de Android
Asigne un nombre a su nuevo archivo XML fragmentchildtab1.xml y pegue el siguiente código.

fragmentchildtab1 .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/FragmentChildTab1" />

</RelativeLayout>

A continuación, cree un diseño gráfico XML para la pestaña secundaria del segundo fragmento. Vaya a res > diseño > Haga clic con el botón derecho en diseño > Nuevo > Archivo XML de Android
Asigne un nombre a su nuevo archivo XML fragmentchildtab2.xml y pegue el siguiente código.

fragmentchildtab2 .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/FragmentChildTab2" />

</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">Tutorial de pestañas de fragmentos anidados de ABS</string>
    <string name="hello_world">¡Hola mundo!</string>
    <string name="menu_settings">Configuración</string>
    <string name="title_activity_main">Tutorial de pestañas de fragmentos anidados de ABS</string>
    <string name="FragmentParentTab1">Esta es la pestaña principal de fragmento 1</string>
    <string name="FragmentChildTab1">Esta es la pestaña secundaria de fragmento 1</string>
    <string name="FragmentChildTab2">Esta es la pestaña secundaria de fragmento 2</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.absnestedfragtab"
    android_versionCode="1"
    android_versionName="1.0" >

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

    <aplicación
        android_icono="@dibujable/ic_launcher"
        android_etiqueta="@cadena/nombre_aplicación"
        android_tema="@estilo/Tema.Sherlock" >
        <actividad
            android_nombre=".Actividad principal"
            android_label="@cadena/título_actividad_principal" >
            <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=”7999″ text=”Comprar para descargar el código fuente” style=”button” color=”green”]

Android ActionbarTutorial de pestañas de fragmentos anidados de Sherlock

Tal vez te interese: