TabLayout簡單使用

平常在看Android書的時候，覺得這個知識點我已經掌握不需要記錄，或者在看別人寫的blog的時候，發現他所講的知識我已經有了一個印象，下次要用到這個知識的時候，我只有找到這篇blog就可以了，但是往往，這些基礎的部分，因爲內容多且雜，很長時間不用就會忘記，blog上的知識點也是，往往就是這篇blog找不到。so，我還是把在使用過程中遇到的知識點簡單的記錄一下，方便之後如果在忘記的回顧。

從官方教程開始

在官網的TabLayout官方API中對這個TabLayout控件的使用有簡單的說明。我們可以單獨得爲TabLayout添加Tab控件：

 TabLayout tabLayout = ...;
 tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
 tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
 tabLayout.addTab(tabLayout.newTab().setText("Tab 3"))

這樣的效果如圖：

我們能夠，看到在上面三個Tab顯示。但是我們在一般情況下都是和ViewPager這個控件一起使用。在官方指導文檔中，也提供了對應的佈局提示:

 <android.support.v4.view.ViewPager
     android:layout_width="match_parent"
     android:layout_height="match_parent">

     <android.support.design.widget.TabLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_gravity="top" />

 </android.support.v4.view.ViewPager>

但是在個人使用的時候，也可以使用如下佈局：

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>

這兩種佈局簡單的實現出來的效果看起來都是差不多的，具體有什麼不同暫時還不清楚。等之後什麼時候弄清楚了在另行說明。但在僅僅這樣寫佈局還是實現不了上面圖片所示的效果。在官方的文檔上有說需要調用setupWithViewPager(ViewPager)來爲TabLayout設置ViewPager。在調用這個方法後，需要使用setAdapter(PageAdapter)來爲ViewPager設置適配器。

適配器代碼：(比較簡單的實現)

public class ViewPagerAdapter extends FragmentPagerAdapter {
    private List<Fragment>  fragments;
    private List<String> titles;
    /**
     * 構造方法
     * @param manager
     * @param fragments
     */
    public ViewPagerAdapter(FragmentManager manager, List<Fragment> fragments,List<String> titles){
        super(manager);
        this.fragments=fragments;
        this.titles=titles;
    }

    @Override
    public int getCount() {
        if (fragments!=null){
            return fragments.size();
        }
        return 0;
    }

    @Override
    public Fragment getItem(int position) {
        if (fragments!=null){
            return fragments.get(position);
        }
        return null;
    }


    @Override
    public CharSequence getPageTitle(int position) {
        if (titles!=null){
            return titles.get(position);
        }
        return "";
    }

}

MainActivity代碼：

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewPager;
    private TabLayout mTabLayout;
    private FragmentPagerAdapter mAdapter;
    private List<Fragment> fragments;
    private List<String> titles;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mTabLayout = (TabLayout) findViewById(R.id.tablayout);

        mTabLayout.setupWithViewPager(mViewPager);


        fragments = new ArrayList<Fragment>();
        Fragment aFragment = AFragment.getInstance();
        Fragment bFragment = BFragment.getInstance();
        Fragment cFragment = CFragment.getInstance();
        Fragment dFragment = DFragment.getInstance();
        Fragment eFragment = EFragment.getInstance();
        fragments.add(aFragment);
        fragments.add(bFragment);
        fragments.add(cFragment);
        fragments.add(dFragment);
        fragments.add(eFragment);

        titles = new ArrayList<String>();
        titles.add("A");
        titles.add("B");
        titles.add("C");
        titles.add("D");
        titles.add("E");

        mAdapter = new ViewPagerAdapter(getSupportFragmentManager(), fragments, titles);
        mViewPager.setAdapter(mAdapter);
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);
    }

}

所有的Fragment的的佈局非常簡單，就是一個居中的TextView,這樣簡單的代碼就能夠實現如下動圖的效果

so easy ！不是嗎？

錯誤

因爲很久沒有用這個控件了，我一直記得是ViewPager和TabLayout兩個控件的嵌套使用，因此我嘗試把ViewPager嵌套在TabLayout中使用，很高興的去運行了一把，以爲能夠成功，自己還是too young too simple。studio立馬就給我報如下的錯誤：

Binary XML file line #11: Only TabItem instances can be added to TabLayout

錯誤的信息也說得很明白了，在TabLayout控件中只能夠放TabItem控件。

其他姿勢

之前也寫過一片關於FragmentTabLayout控件的簡單使用，在那篇文章中，我說道，在FragmentTabLayout中的Fragment不需要進行懶加載，因爲FragmentTabLayout沒有預加載這一個概念，但是在這個情況下，如果每個界面都有大量的請求，最好還是使用Fragment的懶加載。