Android Design Support Library (V): Tablayout
Volvemos con nuestra serie de tutoriales donde aprenderemos a utilizar la nueva librería de diseño Android Design Support Library. En esta semana veremos como implementar TabLayout.
TABLAYOUT
Esta view no es más que las ya muy conocidas pestañas, que hasta hace poco y para que tuvieran un estilo coherente al resto de widgets, teníamos que recurrir a librerías de terceros. Finalmente tenemos una manera fácil y cómoda para implementar esto.
SHOW ME THE CODE
Realmente la implementación es bien sencilla, pero dado que este widget se utiliza en combinación con un ViewPager, vamos a tener que insertar un poco más de código. Primero de todo, insertar el widget en el layout: <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/toolbar" android:background="?attr/colorPrimary" android:scrollbars="horizontal" app:layout_scrollFlags="scroll|enterAlways" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/tab_layout"/> Seguidamente el Layout de los Fragment que vamos a utilizar. Dejaremos este lo más sencillo posible, insertando solo un TextView: <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" /> Correspondientemente la clase a juego: public class PageFragment extends Fragment { public static final String ARG_PAGE = "ARG_PAGE"; private int mPage; public static PageFragment newInstance(int page) { Bundle args = new Bundle(); args.putInt(ARG_PAGE, page); PageFragment fragment = new PageFragment(); fragment.setArguments(args); return fragment; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mPage = getArguments().getInt(ARG_PAGE); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_page, container, false); TextView textView = (TextView) view; textView.setText("Fragment #" + mPage); return view; } } Sin olvidarnos que necesitamos un Adapter que nos controle todos los Fragments y las Tabs. Pondremos unos 4 Fragments con sus correspondientes títulos: public class PagerAdapter extends FragmentPagerAdapter { final int PAGE_COUNT = 4; private String tabTitles[] = new String[] { "Tab1", "Tab2", "Tab3", "Tab4" }; private Context context; public PagerAdapter(FragmentManager fm, Context context) { super(fm); this.context = context; } @Override public int getCount() { return PAGE_COUNT; } @Override public Fragment getItem(int position) { return PageFragment.newInstance(position + 1); } @Override public CharSequence getPageTitle(int position) { return tabTitles[position]; } } Y finalmente lo juntamos todo en nuestra clase principal, MainActivity, añadiendo lo siguiente: private void setupTabLayout(){ tabLayout = (TabLayout) findViewById(R.id.tab_layout); tabLayout.setTabMode(TabLayout.MODE_FIXED); viewPager = (ViewPager) findViewById(R.id.viewpager); viewPager.setAdapter(new PagerAdapter(getSupportFragmentManager(), MainActivity.this)); tabLayout.setupWithViewPager(viewPager); } Si os fijáis, he llamado a un método setTabMode(), aquí podremos especificar diferentes modos de visualización de las Tabs, en conjunción con diferentes tipos de gravedad con setTabGravity(). Aquí unos ejemplos de como quedarían: [caption id="attachment_15904" align="aligncenter" width="400"]
MODE_FIXED[/caption] [caption id="attachment_15905" align="aligncenter" width="400"]
MODE_SCROLLABLE[/caption] [caption id="attachment_15906" align="aligncenter" width="400"]
GRAVITY_CENTER[/caption]