Está en la página 1de 3

Creación de pestañas

1. Principio
Las pestañas permiten cambiar de vista fácilmente y mejorar, de este modo, la experiencia de usuario
de una aplicación.

Existen tres tipos de pestañas:

Pestañas scrollables (por ejemplo, las que se usa en Google Play):

Pueden contener un gran número de pestañas.

La navegación entre pestañas se realiza deslizando un dedo de izquierda a derecha o en


sentido inverso.

Pestañas fijas (por ejemplo, las de la aplicación Contactos):

Las pestañas se muestran unas al lado de las otras.

Puede haber un máximo de tres pestañas.

Pestañas apiladas (por ejemplo, las de la aplicación Youtube):

Permiten separar o fusion ar pestañas con una ActionBar (véase el capítulo Creación de
interfaces sencillas - ActionBar).

2. Implementación de pestañas scrollables


Este componente se puede usar mediante la clase ViewPager, disponible en el Compatibility
Package. Este último se puede descargar en la sección extras del SDK Android (véase el capítulo El
entorno de desarrollo - SDK Android).

Una vez descargado, debe integrar la librería descargada en el proyecto mediante el archivo jar
que se encuentra en la carpeta extras de su SDK Android.

El primer paso consiste en integrar el ViewPager en una interfaz XML.

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#fff" >

<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/viewPager"/>

</LinearLayout>

Puede comprobar que el ViewPager no es un elemento nativo del SDK sino que proviene
delCompatibility Package.

El próximo paso consiste en crear un adapter personalizado para la clase ViewPager. Este adapter
debe heredar de la clase PagerAdapter e implementar los siguientes métodos:

getCount: devuelve el número de vistas disponibles en la interfaz.

instantiateItem: crea la página situada en una posición determinada.

destroyItem: elimina una página situada en una posición determinada.

isViewFromObject: determina si la vista está asociada a un objeto.

finishUpdate: se invoca cuando se han realizado todas las actualizaciones de la página


actual.

restoreState: restaura el estado de una página.

saveState: guarda el estado de una página.

startUpdate: se invoca para actualizar la página actual.

private class ViewPagerAdapter extends PagerAdapter {

@Override
public int getCount() {
return NUMBER_OF_PAGES;
}

@Override
public Object instantiateItem(View collection, int position) {
TextView tv = new TextView(ViewPagerExempleActivity.this);
tv.setText("Pág. número: " + position);
tv.setTextColor(Color.BLACK);
tv.setTextSize(30);

((ViewPager) collection).addView(tv, 0);


return tv;
}

@Override
public void destroyItem(View collection, int position,
Object view) {
((ViewPager) collection).removeView((TextView) view);
}

@Override
public boolean isViewFromObject(View view, Object object) {
return view==((TextView)object);
}

@Override
public void finishUpdate(View arg0) {}

@Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {}
@Override
public Parcelable saveState() {
return null;
}

@Override
public void startUpdate(View arg0) {}

A continuación se muestran algunas explicaciones sobre el adapter que se acaba de crear:

El método getCount debe devolver el número de páginas disponibles en el adapter.

instantiateItem: permite instanciar la vista actual. En el ejemplo, se crea un campo de texto


en el que hay que mostrar el número de página. Después, este campo de texto se añade
alViewPager.

destroyItem: permite destruir el elemento actual.

isViewFromObject: compara la vista actual con el objeto que se recibe como parámetro.

Con lo que se obtendrá:

También podría gustarte