Este artículo es una continuación del que explica el desarrollo de aplicaciones Android con Cambio de vistas con arrastre lateral (Swipe Views). En este caso se va a ampliar la funcionalidad que tenía la aplicación, para que se pueda cambiar entre los distintos Fragments que contiene la Activity usando las típicas pestañas que se encuentran en multitus de aplicaciones. De esta manera el usuario podrá mostrar el contenido de un Fragment u otro arrastrando lateralmente o bien pulsando sobre la pestaña correspondiente.

El layout que ya teníamos de la Activity debe ampliarse con el código que se muestra a continuación. Ya se había utilizado el elemento ViewPager que aparece en la parte final, por lo que hay reestructurar el layout con los siguientes elementos:

• CoordinatorLayout: Se utilizará como contenedor principal del resto de los elementos, sin que tenga ninguna otra función.
  • AppBarLayout: Crea el espacio (azul) bajo la barra del título reservando ese espacio para las pestañas que se van a crear con el siguiente elemento.
    • TabLayout: Es la estructura que mostrará las pestañas que deseamos.
  • ViewPager: Es el contenedor donde se mostrarán las distintas páginas (Fragment).

Observa que se ha añadido un comportamiento (behavior) al ViewPager de tipo appbar_scrolling_view_behavior para evitar que el espacio ocupado por el contenido de los Fragment se sitúe superpuesto encima de las pestañas, es decir, para que aparezce el contenido justo debajo de las pestañas.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    <!-- appbar_scrolling_view_behavior Sirve para evitar que el contenido de las páginas se sitúe encima de las pestañas -->

</android.support.design.widget.CoordinatorLayout>

El código Java de la Activity debe ampliarse con el código destacado. Observa que se hace referencia al id proporcionado al TabLayout anteriormente. En el método getPageTitle, sobreescrito de la clase FragmentStatePagerAdapter, se debe retornar el nombre correspondiente a cada pestaña, tal como se desee que aparezca en la ejecución de la aplicación.

package es.javiergarciaescobedo.ejemplotabs;

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        MyPagerAdapter myPagerAdapter =
                new MyPagerAdapter(
                        getSupportFragmentManager());
        ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
        viewPager.setAdapter(myPagerAdapter);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
    }
}

class MyPagerAdapter extends FragmentStatePagerAdapter {

    public MyPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int i) {
        Fragment fragment;
        switch(i) {
            case 0:
                fragment = new Fragment1();
                break;
            case 1:
                fragment = new Fragment2();
                break;
            default:
                fragment = null;
        }
        return fragment;
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return "SECTION 1";
            case 1:
                return "SECTION 2";
        }
        return null;
    }

}