A forma de programação para exibir Tabs no Android vem mudando em cada lançamento de uma nova versão do sistema operacional. A partir da API 22 do Android Lollipop surgiu uma nova forma de exibir telas com Tab, que possuem o efeito chamado de "Swipe". Este efeito permite visualizar cada Tab com um movimento horizontal na tela.
Mas e se quisermos utilizar a Tab no formato tradicional onde cada Tab é acessada clicando-se na aba. Ainda é possível montar este layout utilizando as classes TabLayout e ViewPager.
Para mostrar como podemos montar a tela com a apresentação tradicional de tabs, desenvolvi um projeto que exibe três Tabs de acordo com o apresentado na Figura 1.
 |
| Figura 1 |
O arquivo de layout da tela principal activity_main.xml deve ser composto de um TabLayout e de um ViewPager:
<?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" android:orientation="vertical" android:padding="4dip" android:gravity="center_horizontal" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:tabGravity="fill" /> <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"> </android.support.v4.view.ViewPager> </LinearLayout>
As telas de Tabs possuem cada uma somente um TextView para exibir um texto. Segue o código do arquivo xml que foi utilizado para construir a Tab1Fragment.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" android:layout_height="match_parent" android:padding="15dp" tools:context="br.com.romarconsultoria.tabexemplo.Tab1Fragment"> <TextView android:layout_width="match_parent"
android:layout_height="match_parent" android:text="Tela da Tab1" android:textSize="25sp"/> </FrameLayout>
public class Tab1Fragment extends Fragment { public static Tab1Fragment newInstance() { Tab1Fragment fragment = new Tab1Fragment(); return fragment; } public Tab1Fragment() { // Deve existir um construtor vazio // na classe que estende um Fragment } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (getArguments() != null) { } } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_tab1, container, false); } }
Para gerenciar as Tabs é necessário criar uma classe que estende a classe FragmentPagerAdapter responsável pela paginação das Tabs. Criei a classe TabsPagerAdapter e implementei os métodos:
- getItem(int): Retorna a tab que deve ser exibida de acordo com a posição selecionada.
- getCount(): Retorna o número total de tabs.
- getPageTitle(int): Retorna o título da tab de acordo com a posição selecionada.
Os métodos getItem(int) e getCount() são obrigatórios na classe que estende a classe FragmentPagerAdapter.
public class TabsPagerAdapter extends FragmentPagerAdapter { private static final int NUM_TABS = 3; public TabsPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { switch(position){ case 0: return Tab1Fragment.newInstance(); case 1: return Tab2Fragment.newInstance(); default: return Tab3Fragment.newInstance(); } } @Override public int getCount() { return NUM_TABS; } @Override public CharSequence getPageTitle(int position) { if (position == 0){ return "Tab 1"; } if (position == 1){ return "Tab 2"; } return "Tab 3"; } }
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Tabs TabLayout tabs = (TabLayout) findViewById(R.id.tabs); ViewPager pager = (ViewPager) findViewById(R.id.pager); TabsPagerAdapter adapter = new TabsPagerAdapter(getSupportFragmentManager()); pager.setAdapter(adapter); tabs.setupWithViewPager(pager); } }
