Tutorial de fragmentos ViewPagerTabStrip de Android

Última actualización: 3 de septiembre de 2013

En este tutorial, aprenderá cómo crear un PagerTabStrip en su aplicación de Android. PagerTabStrip está diseñado para usarse como una vista secundaria de un widget ViewPager en su diseño XML. PagerTabStrip se usa con mayor frecuencia con fragment, que es una forma conveniente de suministrar y administrar el ciclo de vida de cada fragmento. Crearemos un PagerTabStrip con títulos y pestañas personalizados y al girar hacia la izquierda o hacia la derecha o al hacer clic en la pestaña se mostrarán diferentes fragmentos. Vamos a empezar…

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

Nombre de la aplicación: PagerTabStripTutorial

Nombre del proyecto: PagerTabStripTutorial

Nombre del paquete: com.androidbegin.pagertabstriptutorial

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

Actividad principal .java

paquete com.androidbegin.pagertabstriptutorial;

importar android.os.Bundle;
importar android.support.v4.app.FragmentActivity;
importar android.support.v4.view.ViewPager;

clase pública MainActivity extiende FragmentActivity {

	@Anular
	Vacío protegido onCreate (Paquete de estado de instancia guardado) {
		super.onCreate(estadoDeInstanciaGuardado);
		// Obtener la vista de activity_main.xml
		setContentView(R.diseño.actividad_principal);

		// Localiza el visor en activity_main.xml
		ViewPager viewPager = (ViewPager) findViewById(R.id.pager);

		// Establecer ViewPagerAdapter en ViewPager
		viewPager.setAdapter(nuevo ViewPagerAdapter(getSupportFragmentManager()));
	}

}

En esta actividad, hemos establecido la ubicación y ViewPagerAdapter en ViewPager. Luego pase el administrador de fragmentos de soporte a ViewPagerAdapter para administrar los fragmentos.

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"?>
<android.support.v4.view.ViewPager xmlns_android="http://schemas.android.com/apk/res/android"
    android_id="@+id/localizador"
    android_layout_width="match_parent"
    android_layout_height="match_parent" >

    <android.support.v4.view.PagerTabStrip
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_layout_gravity="superior"
        Android: relleno inferior = "10dp"
        Android: paddingTop = "10dp"
        androide_textColor="#000000" />

</android.support.v4.view.ViewPager>

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. pagertabstriptutorial y haga clic en Finalizar .

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

paquete com.androidbegin.pagertabstriptutorial;

importar android.os.Bundle;
importar android.support.v4.app.Fragment;
importar android.view.LayoutInflater;
importar android.view.View;
importar android.view.ViewGroup;

public class FragmentTab1 extiende Fragmento {

	@Anular
	Public View onCreateView(LayoutInflater inflater, contenedor ViewGroup,
			Paquete guardadoInstanceState) {
		// Obtenga la vista de fragmenttab1.xml
		Ver vista = inflater.inflate(R.layout.fragmenttab1, container, false);
		volver a ver;
	}

}

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. pagertabstriptutorial y haga clic en Finalizar .

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

FragmentTab2 .java

paquete com.androidbegin.pagertabstriptutorial;

importar android.os.Bundle;
importar android.support.v4.app.Fragment;
importar android.view.LayoutInflater;
importar android.view.View;
importar android.view.ViewGroup;

public class FragmentTab2 extiende Fragmento {

	@Anular
	Public View onCreateView(LayoutInflater inflater, contenedor ViewGroup,
			Paquete guardadoInstanceState) {
		// Obtener la vista de fragmenttab2.xml
		Ver vista = inflater.inflate(R.layout.fragmenttab2, container, false);
		volver a ver;
	}

}

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. pagertabstriptutorial y haga clic en Finalizar .

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

FragmentTab3 .java

paquete com.androidbegin.pagertabstriptutorial;

importar android.os.Bundle;
importar android.support.v4.app.Fragment;
importar android.view.LayoutInflater;
importar android.view.View;
importar android.view.ViewGroup;

public class FragmentTab3 extiende Fragmento {

	@Anular
	Public View onCreateView(LayoutInflater inflater, contenedor ViewGroup,
			Paquete guardadoInstanceState) {
		// Obtenga la vista de fragmenttab3.xml
		Ver vista = inflater.inflate(R.layout.fragmenttab3, container, false);
		volver a ver;
	}

}

A continuación, cree una clase de adaptador ViewPager. Vaya a Archivo > Nuevo > Clase y asígnele el nombre ViewPagerAdapter .java. Seleccione su paquete llamado com.androidbegin. pagertabstriptutorial y haga clic en Finalizar .

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

ViewPagerAdapter .java

paquete com.androidbegin.pagertabstriptutorial;

importar android.content.Context;
importar android.support.v4.app.Fragment;
importar android.support.v4.app.FragmentManager;
importar android.support.v4.app.FragmentPagerAdapter;

clase pública ViewPagerAdapter extiende FragmentPagerAdapter {

	final int PAGE_COUNT = 3;
	// Títulos de pestañas
	private String tabtitles[] = new String[] { "Tab1", "Tab2", "Tab3" };
	contexto contexto;

	ViewPagerAdapter público (FragmentManager fm) {
		súper (fm);
	}

	@Anular
	public int getCount() {
		devolver PAGE_COUNT;
	}

	@Anular
	Fragmento público getItem (posición int) {
		interruptor (posición) {

			// Abrir FragmentTab1.java
		caso 0:
			FragmentTab1 fragmenttab1 = new FragmentTab1();
			devolver fragmenttab1;

			// Abrir FragmentTab2.java
		caso 1:
			FragmentTab2 fragmenttab2 = new FragmentTab2();
			devolver fragmenttab2;

			// Abrir FragmentTab3.java
		caso 2:
			FragmentTab3 fragmenttab3 = new FragmentTab3();
			devolver fragmenttab3;
		}
		devolver nulo;
	}

	@Anular
	pública CharSequence getPageTitle (posición int) {
		return tabtitles[posición];
	}
}

En esta clase ViewPagerAdapter, hemos declarado el número de páginas de ViewPager y al cambiar de pestaña o voltear se mostrarán diferentes fragmentos.

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/Fragmento1" />

</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/Fragmento2" />

</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/Fragmento3" />

</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

<?versión xml="1.0" codificación="utf-8"?>
<recursos>

    <string name="app_name">Tutorial de PagerTabStrip</string>
    <string name="action_settings">Configuración</string>
    <string name="hello_world">¡Hola mundo!</string>
    <string name="Fragment1">Este es el Fragmento 1</string>
    <string name="Fragment2">Este es el Fragmento 2</string>
    <string name="Fragment3">Este es el Fragmento 3</string>

</recursos>

En su AndroidManifest.xml , no es necesario realizar cambios .

AndroidManifest.xml

<?versión xml="1.0" codificación="utf-8"?>
<manifiesto xmlns_android="http://schemas.android.com/apk/res/android"
    paquete="com.androidbegin.pagertabstriptutorial"
    android_versionCode="1"
    android_versionName="1.0" >

    <usos-sdk
        android_minSdkVersion="8"
        android_targetSdkVersion="17" />

    <aplicación
        Android: permitir copia de seguridad = "verdadero"
        android_icono="@dibujable/ic_launcher"
        android_etiqueta="@cadena/nombre_aplicación"
        android_tema="@estilo/AppTheme" >
        <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=”7991″ text=”Comprar para descargar el código fuente” style=”button” color=”green”]

Tutorial de fragmentos ViewPagerTabStrip de Android

Tal vez te interese: