使用 Android SlidingTab 製作可滑動標籤

SlidingTab

舊式的標籤(Tab)在製作上很繁鎖，操作靈活性也很差。Sliding Tab 讓這些缺點都消失了，要加入一個標籤頁(page)，只要簡單的加入一個新的 Fragment 就能辦到，而且在 Tab 數量很多的情況下，連標籤列本身都能夠左右滑動來顯示。

Sliding Tab 可以很容易的指定該 Tab 被選取時，底線指示器的顏色，而且每個 Tab 都可以指定不同的顏色。

開始之前的說明

本篇文章中的 Sliding Tab 程式碼是由 Android 官方 Sample 檔(SlidingTabsBasic) 修改而來，而經過程式碼的抽取調整後，Tab 的部份可以重覆利用於其他專案，後面文章中會在說明。

如果你想直接使用，也有人把它改寫成套件，可以直接拿來用，請參考 astuetz/PagerSlidingTabStrip。

此文章中的範例會使用 Android 5.x 的 Toolbar，這方面的內容可以參考 如何將 Android ActionBar 轉換到 Toolbar。

layout

首先是主 Activity 的 layout，主要有一個 FrameLayout，用來放置主要的 TabFragment。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/toolbar" />

    <FrameLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="vertical"
          android:id="@+id/content_fragment" />

</LinearLayout>

說明：
這裡先記住 FrameLayout 的 id 是 content_fragment。

frg_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical">

    <com.tonycube.slidingtabsdemo.tab.SlidingTabLayout
          android:id="@+id/tabs"
          android:layout_width="match_parent"
          android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1" />

</LinearLayout>

說明：
這是 TabFragment 的 layout，SlidingTabLayout 是 Sample 中的程式碼，用來顯示 Tab；ViewPager 用來顯示 Fragment，並且讓這些 Fragment 可以左右滑動。

frg_common.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".fragment.BookFragment" >

    <TextView
        android:id="@+id/txtName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="BOOKs"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

說明：
這是一個共用的 fragment layout，正常情況可能是你的每個 Fragment 都會有自己的 layout，這裡為了簡化，所以全都用一樣的，之後會以程式碼設定 text 來顯示不一樣的內容。

MainActivity.java

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initToolbar();
        initTabFragment(savedInstanceState);
    }

    private void initToolbar() {
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        ActionBar actionBar = getSupportActionBar();
        actionBar.setTitle("SlidingTabs Demo");
    }

    private void initTabFragment(Bundle savedInstanceState){
        if (savedInstanceState == null) {
            TabFragment tabFragment = new TabFragment();

            getSupportFragmentManager()
                .beginTransaction()
                .add(R.id.content_fragment, tabFragment)
                .commit();
        }
    }

}

說明：
繼承 ActionBarActivity，使用 R.layout.activity_main，建立 TabFragment 的實體，使用 FragmentManager 加入 R.id.content_fragment 中。

處理 Tab

這裡從 Sample 中取出 SlidingTabLayout.java 及 SlidingTabStrip.java 兩個檔案，可以直接使用。另外，我加入一個 BaseFragment.java，用來讓之後的 Fragment 繼承，方便指定 Tab 的指示器及分隔線的顏色，還有標籤名稱。

BaseFragment.java

public class BaseFragment extends Fragment {

    private String title = "";
    private int indicatorColor = Color.BLUE;
    private int dividerColor = Color.GRAY;

    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public int getIndicatorColor() {
        return indicatorColor;
    }
    public void setIndicatorColor(int indicatorColor) {
        this.indicatorColor = indicatorColor;
    }
    public int getDividerColor() {
        return dividerColor;
    }
    public void setDividerColor(int dividerColor) {
        this.dividerColor = dividerColor;
    }

}

說明：
SlidingTabLayout.java 及 SlidingTabStrip.java 的部份請直接看原始檔，我幾乎沒什麼修改。這 3 個檔案全都放在 tab package 之中，其他專案就可以直接重覆使用。

TabFragmentPagerAdapter.java

public class TabFragmentPagerAdapter extends FragmentPagerAdapter {

    LinkedList<BaseFragment> fragments = null;

    public TabFragmentPagerAdapter(FragmentManager fm, LinkedList<BaseFragment> fragments) {
        super(fm);
        if (fragments == null) {
            this.fragments = new LinkedList<BaseFragment>();
        }else{
            this.fragments = fragments;
        }
    }

    @Override
    public BaseFragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return fragments.get(position).getTitle();
    }

}

說明：
TabFragmentPagerAdapter 繼承 FragmentPagerAdapter。這個檔案也是可以重覆使用的。

TabFragment.java

public class TabFragment extends Fragment {

    private SlidingTabLayout tabs;
    private ViewPager pager;
    private FragmentPagerAdapter adapter;

    public static Fragment newInstance(){
        TabFragment f = new TabFragment();
        return f;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.frg_tab, container, false);
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        //adapter
        final LinkedList<BaseFragment> fragments = getFragments();
        adapter = new TabFragmentPagerAdapter(getFragmentManager(), fragments);
        //pager
        pager = (ViewPager) view.findViewById(R.id.pager);
        pager.setAdapter(adapter);
        //tabs
        tabs = (SlidingTabLayout) view.findViewById(R.id.tabs);
        tabs.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {

            @Override
            public int getIndicatorColor(int position) {
                return fragments.get(position).getIndicatorColor();
            }

            @Override
            public int getDividerColor(int position) {
                return fragments.get(position).getDividerColor();
            }
        });
        tabs.setBackgroundResource(R.color.color_primary);
        tabs.setViewPager(pager);
    }

    private LinkedList<BaseFragment> getFragments(){
        int indicatorColor = Color.parseColor(this.getResources().getString(R.color.color_accent));
        int dividerColor = Color.TRANSPARENT;

        LinkedList<BaseFragment> fragments = new LinkedList<BaseFragment>();
        fragments.add(BookFragment.newInstance("Book", indicatorColor, dividerColor));
        fragments.add(CookFragment.newInstance("Cook", indicatorColor, dividerColor));
        fragments.add(FoodFragment.newInstance("Food", indicatorColor, dividerColor));
        fragments.add(GoodFragment.newInstance("Good", Color.BLUE, dividerColor));
        fragments.add(LookFragment.newInstance("Look", Color.CYAN, dividerColor));
        fragments.add(WoodFragment.newInstance("Wood", Color.MAGENTA, dividerColor));
        return fragments;
    }
}

說明：
這裡就是把前面的東西組合起來。

我們在 getFragments() 方法裡去建立想要呈現的標籤頁。indicatorColor 是底線指示器的顏色，通常會統一一個顏色，當然你也可以各別指定；分隔線的顏色也可以指定，這裡設為透明。

這些 fragments 送給 TabFragmentPagerAdapter 後，再把 TabFragmentPagerAdapter 送給 ViewPager，最後，把 ViewPager 送給 SlidingTabLayout 就完成了。

tabs.setBackgroundResource(R.color.color_primary); 這一行是指定 tab 的背景色，這裡指定為和 Toolbar 相同的主色。

最後呈現的結果： 範例程式碼：github - tony915/SlidingTabDemo
註：如果要在 Tab 上使用圖示，請參考 如何在 Android SlidingTab 加入 Icon 圖示

參考資料

• SlidingTabsBasic
• SlidingTabsColors
• DevByte - Sliding Tabs (Video)
• astuetz/PagerSlidingTabStrip

本文網址：http://blog.tonycube.com/2015/06/android-slidingtab.html
由 Tony Blog 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀