在前两篇文章的学习中建立的项目之上，这里会继续学习TabLayout的使用

TabLayout与ViewPager一起使用

1.将<android.support.design.widget.TabLayout/>标签和之前的<android.support.v4.view.ViewPager/>标签放在<LinearLayout/>中，把<android.support.v4.view.ViewPager/>中的app:layout_behavior="@string/appbar_scrolling_view_behavior"属性放到其直接父控件中即这里的<LinearLayout/>中

       <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
 
            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:visibility="visible"
                app:tabBackground="@color/colorPrimary"
                app:tabIndicatorColor="@color/colorAccent"
                app:tabIndicatorHeight="2dp"
                app:tabMode="fixed"
                app:tabGravity="fill"
                app:tabSelectedTextColor="@color/colorAccent"
                app:tabTextColor="@color/colorPrimaryDark" />
 
            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>

app:tabBackground="@color/colorPrimary" //设置tab的背景颜色
app:tabIndicatorColor="@color/colorAccent" //设置tab指示线的颜色
app:tabIndicatorHeight="0dp" //设置tab指示线的高度
app:tabMode="fixed" //设置tab指示线的类型，fixed 固定的显示tab，scrollable 自适应超出屏幕滚动显示
app:tabGravity="fill" //设置tab的位置 ,有两个值可选， fill 是tab占满屏幕X方向，center 是tab居中显示
app:tabSelectedTextColor="@color/colorAccent" //设置选中tab的标题文字颜色
app:tabTextColor="@color/colorPrimaryDark" //设置未选中tab标题文字颜色

2.在Activity中通过tabLayout.setupWithViewPager(viewPager);将viewPager与tabLayout关联起来
在FragmentPagerAdapter中重写下面的方法获取设置tab的标题
@Override
public CharSequence getPageTitle(int position) {
return "Main " + position;
}
完成后的效果如图:

当tab的数量较多时，设置TabLayout控件的app:tabMode="scrollable "//设置tab指示线的类型，fixed 平分占满屏幕，scrollable 自适应超出屏幕滚动显示

显示效果如图所示：

为了实现更多的分级效果Activity中的Fragment里面可以继续用ViewPager+Fragment

新建一个类TabLayoutFragment，布局文件为frag_tab_layout.xm：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@color/colorAccent"
        app:tabIndicatorColor="#55fe33"
        app:tabIndicatorHeight="2dp"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="#55fe33"
        app:tabTextColor="#ffffff" />
 
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

在TabLayoutFragment中实现为：

public class TabLayoutFragment extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.frag_tab_layout,null);
    }
 
    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewpager);
        TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
        viewPager.setAdapter(new FragmentPagerAdapter(getChildFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return new FruitFragment();
            }
 
            @Override
            public int getCount() {
                return 6;
            }
 
            @Override
            public CharSequence getPageTitle(int position) {
                return "sub " + position;
            }
        });
        tabLayout.setupWithViewPager(viewPager);
    }
}

这里ViewPager中还是放的FruitFragment类
修改MainActivity中的代码

    /**
     * add Fragment
     */
    private void addFragment() {
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                if (position % 2 == 0) {
                    return new FruitFragment();
                } else {
                    return new TabLayoutFragment();
                }
            }
 
            @Override
            public int getCount() {
                return 3;
            }
 
            @Override
            public CharSequence getPageTitle(int position) {
                return "Main " + position;
            }
        });
        tabLayout.setupWithViewPager(viewPager);
    }

在poition 能被2整除时返回FruitFragment,不能被2整除时就返回TabLayoutFragment，效果如图所示：

3.tabLayout 还可以通过addTab添加Tab按钮
tabLayout.addTab(tabLayout.newTab().setText("test"));

通过addOnTabSelectedListener监听tab选择监听

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
 
    //这里可以根据tab的选择更新内容
}
 
 
@Override
public void onTabUnselected(TabLayout.Tab tab) {
 
 
}
 
 
@Override
public void onTabReselected(TabLayout.Tab tab) {
 
 
}
});

TabLayout的使用很简单，能和ViewPager配合使用或单独使用，非常的方便。下一篇中我们将会学习到CollapsingToolbar和NestedScrollView的使用。