Demo7 TabLayout（下）告别过去:简单的Tab

在TabLayout发布之前，要实现选项卡Tab效果，我们可以选择使用TabHost，甚至使用第三方控件SliderLayout，现在的好消息是，design support library发布了新的Tab控件—TabLayout，只需要结合之前ViewPager的内容，短短几行代码就能够实现具有Material design风格的选项卡效果。

因为有了前面ViewPager的基础，今天的内容就轻松许多。首先从布局文件入手，直接把TabLayout放到ViewPager上面，当然啦，首先我们还是得把design组件库导入到我们的项目中。具体布局如下:

main_layout.mxl:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.TabLayout
        android:id="@+id/Main_TabLayout"
        android:layout_width="match_parent"
        android:layout_height="60dp">
    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/Main_ViewPager"
        android:layout_width="match_parent"
     android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>

布局非常简单，接下来就是代码部分，其实里面的很大一部分内容跟之前ViewPager基本一样，其实操作TabLayout只要有了ViewPager的实现就简单很多了，我们先粘出代码，然后再来分析新的知识。

MainActivity.java:

public class MainActivity extends AppCompatActivity {
    private List<View> viewList = new ArrayList<>();        //视图列表
    private String[] title = {"tab1", "tab2", "tab3"};      //Tab标题列表
    private TabLayout tabLayout = null;
    private ViewPager viewPager = null;     //ViewPager

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout);
        //添加视图
       viewList.add(getLayoutInflater().inflate(R.layout.main_sub1_layout, null));
       viewList.add(getLayoutInflater().inflate(R.layout.main_sub2_layout, null));
       viewList.add(getLayoutInflater().inflate(R.layout.main_sub3_layout, null));
        viewPager = (ViewPager)findViewById(R.id.Main_ViewPager);
        viewPager.setAdapter(adapter);

        tabLayout = (TabLayout)findViewById(R.id.Main_TabLayout);
        tabLayout.setupWithViewPager(viewPager);        //把ViewPager与TabLayout关联起来
    }
    //PagerAdapter
    private PagerAdapter adapter = new PagerAdapter() {
        @Override
        public int getCount() {
            return viewList.size();
        }
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(viewList.get(position));
        }
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(viewList.get(position));
            return viewList.get(position);
        }
        @Override
        public CharSequence getPageTitle(int position) {
            return title[position];//页卡标题
        }
    };
}

我们首先看到适配器里面多了一个重写的方法getPageTitle，这个是用于显示Tab标题的方法，这里的title是一个String数组。然后就是在onCreate里面，我们用了两行代码把ViewPager与TabLayout关联起来：

tabLayout = (TabLayout)findViewById(R.id.Main_TabLayout);
tabLayout.setupWithViewPager(viewPager);        //把ViewPager与TabLayout关联起来

其实TabLayout的使用只是在ViewPager的基础上进行加载，仅此而已，非常方便，下面就是本历程的运行结果图。

Demo源码下载地址:Demo7:TabLayout