Añadir pestañas (tabs) deslizantes

En la entrada anterior hablaba sobre cómo añadir pestañas a nuestra aplicación, accesibles mediante “lengüetas” en la parte superior de la pantalla.

En esta entrada explicaré como  crear pestañas deslizantes: en la que podremos cambiar de pestaña deslizando el dedo de un lado a otro.

Para ello primero crearemos una clase para gestionar los “fragments” (pestañas como las estamos llamando) y que cuando llamemos a la actividad  cargue las pestañas correctamente.

En este ejemplo uso las 3 pestañas del ejemplo anterior (con las clases Tab1, Tab2 y Tab3, con sus respectivos layouts).

class PagerAdapter extends FragmentPagerAdapter {
public PagerAdapter(android.support.v4.app.FragmentManager fm) {
super(fm);
}
public Fragment getItem(int arg0) {
switch (arg0) {
case 0:
return new Tab1();
case 1:
return new Tab2();
case 2:
return new Tab3();
default:
return null;
}
}
public int getCount() {
return 3;
}
}

Ahora crearemos el layout (en mi caso lo llamaré “tabs_swipe.xml”) en el que irán las pestañas. Contendrá simplemente el código:

<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />

Y creo su clase  (CrearTabsSwipe) con el código:

public class CrearTabsSwipe extends FragmentActivity {
protected void onCreate(Bundle arg0) {
super.onCreate(arg0);
setContentView(R.layout.tabs_swipe);
PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager());
ViewPager mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(adapter);
}
}

Ya tendríamos nuestras pestañas deslizantes. En el ejemplo para acceder a la actividad con el layout que las contiene creo un botón que accede a ella (Tabs deslizantes) en la actividad principal.

En el código llamo al nuevo layout “tabs_swipte” y en el ejemplo lo nombro como tabs_swipe para tener el ejemplo más claro.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s