Tabs nunca foram tão fáceis — TabLayout
Como adicionar abas em seu layout
(apressado) ? demo :Se alguma vez você já tentou utilizar tabs em seu aplicativo, você já deve ter se deparado com exemplos como este, ou este. Nestas horas que pensamos, Google porque você não me ajuda?
Bom, algum desenvolvedor do robozinho verde deve ter ouvido nossas preces pois juntamente com a biblioteca “Support Design”, lançada durante a I/O 2015, foi introduzido a view TabLayout.
Esta view veio para, justamente, simplificar a criação de tabs que se integrassem com o ViewPager, já conhecido por muitos por ser responsável por criar páginas de navegação, nas quais o usuário interage através de gestos na horizontal.
Após as devidas apresentações, vamos à implementação.
Inclusão da biblioteca
O primeiro passo é a inclusão da biblioteca “Support Design”. Abra o seu arquivo “build.gradle” e insira a seguinte dependência:
Layout
Logo, vamos criar nosso arquivo de layout. Em sua Activity ou Fragment, defina um xml com a seguinte estrutura:
Importante notar a presença do widget TabLayout, abaixo da Toolbar. Este representa as nossas tabs, que possuem dois atributos importantes:
- tabMode: define qual será o modo de apresentação das tabs, “fixed”, para quando se deseja espaçar as tabs igualmente na largura da tela do smartphone, e “scrollable”, que, como o nome indica, define o comportamento no qual as tabs possuem um número indefinido, podendo o usuário realizar um scroll horizontal para acessar todo o conteúdo.
- tabGravity: define como as tabs serão apresentadas na tela. A propriedade pode apresentar dois valores, “fill” no qual as tabs ocupam todo o espaçamento horizontal disponível, ou “center”, que centraliza todo o conteúdo.
Além disso, logo abaixo desta view encontra-se o ViewPager. Este será o container de um ou mais Fragments, que serão apresentados através de gestos de swipe.
Adapter
Assim como o RecyclerView ou ListView, o ViewPager também necessita de um adapter, para o gerenciamento dos fragments que farão parte do layout. O ViewPager suporta dois tipos de adapters:
- FragmentpagerAdapter: este adapter armazena em memória os fragments presentes em cada uma das páginas do ViewPager, se mostrando ideal para as situações nas quais o componente apresenta um número pequeno de páginas.
- FragmentStatePager: ao contrário do anterior, caso o Fragment não esteja mais visível para o usuário, este adapter irá destruí-lo, com o intuito de poupar recursos do aparelho. Desta forma, caso você deseje criar um ViewPager com muitas páginas, aliado ao TabLayout em modo “scrollable”, este adapter é a melhor opção.
Um exemplo de implementação do FragmentpagerAdapter seria:
Importante perceber que este adapter deve apresentar três métodos:
- getItem(int position): retorna o Fragment de acordo com o número da página do ViewPager;
- getCount(): retorna o número de Fragments que o componente irá gerenciar;
- getPageTitle(int position): retorna o título referente a página selecionada. Método importante para indicar ao TabLayout o texto que será apresentado em cada uma das tabs.
Além disso, é importante criar uma estrutura de dados para armazenar uma lista de Fragments e de títulos, que serão definidos nas Activities/Fragments, e referenciados no adapter.
Juntando Tudo
Feito tudo isso, vamos finalmente atrelar todos estes componentes. Primeiramente, em nossa Activity ou Fragment, vamos criar uma lista de Fragments e relacionar cada um deles à um título. Logo, vamos instanciar o adapter, indicar a ele a lista na qual ele deve gerenciar e por último, conectá-lo ao ViewPager. Bom, e o tal do TabLayout? Como definido no início do texto, esta nova view apresenta uma integração muito grande com o ViewPager através do método setupWithViewPager(ViewPager viewPager). Um exemplo de implementação em uma Activity seria:
Um detalhe importante é com relação a inicialização do FragmentpagerAdapter. Caso o seu ViewPager se encontre dentro de um Fragment, você estará em uma situação de “nested fragments”. Logo, o construtor do adapter deve ser modificado para receber o getChildFragmentManager() e não o getFragmentManager(), para evitar problemas.
Demo
Feito todos estes passos, seu aplicativo deverá apresentar a seguinte cara:
Referências
Novamente, artigo baseado no projeto do Chris Banes, que demostra todo o poder da biblioteca Support Design. Sugiro seguir o seu trabalho, uma vez que se trata de um desenvolvedor Google/Android de bastante respeito.
Imagens:
