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的懒加载。