Criando abas no Android com TabLayout

Em muitos tipos de aplicações necessitamos criar abas para melhor dividir o conteúdo do aplicativo e permitir uma navegação mais fluida. Para facilitar nossa vida foi adicionado na biblioteca “Support Design” uma view para facilitar a criação de abas que se integram com ViewPager.

Vamos então a implementação, para começar devemos adicionar a biblioteca de “Supoort Design” ao nosso projeto no arquivo “build.gradle“.

dependencies { 
    ... 
    compile 'com.android.support:design:26.1.0' 
}

Já com a biblioteca adicionada vamos ao layout da nossa tela. Nela será colocado o TabLayout, onde será apresentado “os títulos das abas” e o ViewPager, onde o “conteúdo” será apresentado, sendo este algum Fragment.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="botecodigital.info.abastest.MainActivity">
 
 
    <android.support.design.widget.TabLayout
        android:id="@+id/abas"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMode="fixed"/>
 
 
    <android.support.v4.view.ViewPager
        android:id="@+id/abas_view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
</LinearLayout>

No TabLayout temos dois atributos importantes:

tabMode: configura o modo de comportamento para as abas. Os valores válidos para este atributo são “fixed” utilizado quando se deseja espaçar que todas as abas tenham um espaçamento igual, então se todos os títulos não couberem no espaço eles podem ser cortados, sendo mais interessante utilizar quando temos poucas abas. O valor “scrollable” é utilizado quando temos mais abas e desejamos permitir a “rolagem horizontal” das abas.

tabGravity: configura como os títulos das abas serão apresentados. Com o valor “fill” as abas ocupam todo o espaçamento horizontal. Com o valor “center” ele centraliza os títulos.

Como já falamos o ViewPager irá conter o conteúdo das abas, sendo este um ou mais Fragments que podem ser trocados por gestos de swipe. Para o gerenciamento dos Fragments é necessário ter um Adapter, e o ViewPager suporta dois tipos de adapters, o FragmentPagerAdapter que mantêm todos os Fragments na memória, mais indicado quando temos poucos fragments e o FragmentStatePager que ao um Fragment não estar mais visível é destruído para poupar recursos, sendo mais indicado para um número maior de fragments.

Vamos então criar um FragmentPagerAdapter de exemplo:

public class AbasAdapter extends FragmentPagerAdapter {
 
    private List<Fragment> fragments = new ArrayList<>();
    private List<String> titulos = new ArrayList<>();
 
    public AbasAdapter(FragmentManager fm) {
        super(fm);
    }
 
    public void adicionar(Fragment fragment, String tituloAba){
        this.fragments.add(fragment);
        this.titulos.add(tituloAba);
    }
 
    @Override
    public Fragment getItem(int position) {
        return this.fragments.get(position);
    }
 
    @Override
    public int getCount() {
        return this.fragments.size();
    }
 
    @Override
    public CharSequence getPageTitle(int position){
        return this.titulos.get(position);
    }
}

A ideia deste adapter é conter todos os Fragments em ordem que irão compor as abas, para isso temos dois ArrayList um contendo todos os Fragments e outro com todos os títulos das abas. Criamos neste adapter o método adicionar para adicionar o Fragment da aba juntamente com seu título, colocando cada um em seu respectivo ArrayList na mesma posição para manter a relação. Depois sobrescrevemos os métodos getItem que dada a posição da página do ViewPager ele retorna o Fragment correspondente. O método getPageTitle é igual ao getItem só que retorna o título da aba. O método getCount simplesmente retorna o total de fragments, consequentemente de abas.

Agora vamos configurar o TabLayout, para isso primeiro criamos o objeto Adapter e colocamos os Fragments de nossas abas nele, depois recuperamos o ViewPager e adicionamos nosso Adapter nele. Seguindo, recuperamos o TabLayout e atribuímos o ViewPager para ele através do método setupWithViewPager.

AbasAdapter adapter = new AbasAdapter( getSupportFragmentManager() );
adapter.adicionar( new PrimeiroFragment() , "Primeira Aba");
adapter.adicionar( new SegundoFragment(), "Segunda Aba");
adapter.adicionar( new TerceiroFragment(), "Terceira Aba");
 
ViewPager viewPager = (ViewPager) findViewById(R.id.abas_view_pager);
viewPager.setAdapter(adapter);
 
TabLayout tabLayout = (TabLayout) findViewById(R.id.abas);
tabLayout.setupWithViewPager(viewPager);

Segue um dos Fragments utilizados no exemplo.

public class PrimeiroFragment  extends Fragment {
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
 
        View view = inflater.inflate(R.layout.primeiro_fragment, container, false);
 
        TextView tv = view.findViewById(R.id.text1);
        tv.setText("Você está na primeira aba");
 
        return view;
    }
 
}

Para baixar o exemplo clique aqui.

Bom era isso T+