Material Design Pattern (7) - TabLayout
使用 TabLayout 的方法很簡單。
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
/>
<TextView
android:id="@+id/tv_name"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
在 activity.onCreate()：
TabLayout tabLayout = (TabLayout)findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("TAB 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 4"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 5"));
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
textView.setText(tab.getText());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
這樣轉 tab 時，TextView 會跟著變動。這是透過使用 TabLayout 的 OnTabSelectedListener 去做成一個 tab Activity。但我們通常會使用 TabLayout + ViewPager 去做，這樣彈性較大，也較方便。
TabLayout + ViewPager
ViewPager 是類似換頁的 place holder ，可以根據手勢 gesture 去切換頁面，顯示不同的 fragment。透過 ViewPager 和 TabLayout 的結合，可以更有效的扮演 tab 顯示。
ViewPager 需要一個 FragmentPagerAdapter 去運作，FragmentPagerAdapter 負責提供「內容」給 viewPager 。
public class TabPagerAdapter extends FragmentPagerAdapter {
private static final int PAGE_COUNT = 5;
public TabPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return TabFragment.newInstance("Fragment tab", "No. "+ position);
}
@Override
public int getCount() {
return PAGE_COUNT;
}
@Override
public CharSequence getPageTitle(int position) {
return "Tab " + position;
}
}
為示範， TabFragment 即只是一個簡單的 fragment。
之後將 ViewPager 和 TabPagerAdapter 給合在一起：
ViewPager viewPager = (ViewPager)findViewById(R.id.viewpager);
viewPager.setAdapter(new TabPagerAdapter(getSupportFragmentManager()));
在 Layout 上加上 ViewPager：
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
/>
此時 TabLayout 跟 viewPager 是兩個個體，要將他們連結便要：
TabLayout tabLayout = (TabLayout)findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(viewPager);
這樣便完成了：
tabMode
TabLayout 的 tabMode 可以是 fixed 或 scrollable：
fixed是全部 tab 顯示出來，scrollable即可以滑動顯示。
為標題加上 icon
可以在 TabPagerAdapter.getPageTitle() 做手腳，使用 SpannableString 為標題加上 icon (或其他格式)。
@Override
public CharSequence getPageTitle(int position) {
Drawable icon = context.getResources().getDrawable(R.drawable.ic_add_circle_outline_white);
icon.setBounds(0, 0, icon.getIntrinsicWidth(), icon.getIntrinsicHeight());
ImageSpan iconSpan = new ImageSpan(icon, ImageSpan.ALIGN_BOTTOM);
SpannableString sb = new SpannableString(" " + "Tab " + position);
sb.setSpan(iconSpan, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;
}
但因為 TabLayout 本身的標題 style 設定了 texAllCaps ，令 SpannableString 失效，所以要先自行 disable 它。
<style name="MyTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="textAllCaps">false</item>
</style>
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabTextAppearance="@style/MyTabTextAppearance"
/>
更新 style 後便可以顯示 icon 了。
其他 library - ViewPagerIndicator
除了使用 tabLayout ，其實還可使用歷史悠久的 ViewPagerIndicator，它提供更多顯示設定和類型。
雖然很久沒有更新，但只是因為它功能已經非常完善。
不過因為作者沒有將 viewPagerIndicator 放佈到 gradle 上，所以要以以下方式安裝
repositories {
maven { url "http://dl.bintray.com/populov/maven" }
mavenCentral()
// or jcenter()
}
dependencies {
// ...
compile 'com.viewpagerindicator:library:2.4.1@aar'
// ...
}
使用方法跟 tabLayout 差不多，不另述了，可看行參看 source code。個人習慣使用 ViewPagerIndicator 較多。
Source code:
https://github.com/goofyz/android-material-design-tutorial/tree/part7_tablayout