文章思路来自:
https://www.cnblogs.com/lyd447113735/p/8693931.html

首先引包, 套路还是以前的套路, 这里用的是最新版本AndroidStudio(3.4.2)

image.png

搜索design,选择如下的那个包,点击ok,返回出现下图就是ok;

image.png

包引完了, 接下来就是开始使用了

首先是在布局中加入控件

  <com.google.android.material.tabs.TabLayout
        android:id="@+id/mytab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></com.google.android.material.tabs.TabLayout>

之后再MainActivity中开始使用
最开始是声明一下(个人习惯)

private TabLayout mytab;

接下来就是使用

  mytab = (TabLayout) findViewById(R.id.mytab);

        mytab.addTab(mytab.newTab().setText("选项卡一").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡二").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡三").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡四").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡五").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡六").setIcon(R.mipmap.ic_launcher));

代码写到这运行就已经发现可以使用了

但是我怎么会止步于此, 开始优化, 加一些效果让它看起来更好看一些

改变Tab颜色 设置字体默认颜色

  app:tabTextColor="#ffffff"

设置字体被选中后的颜色

app:tabSelectedTextColor="#e40707"

设置指示器颜色

app:tabIndicatorColor="#30e407"

设置指示器高度（如果希望选项卡不显示指示器效果只需要把指示器高度设置为0就行了）

 app:tabIndicatorHeight="2dp"

设置Tab背景颜色（作用效果和Background一样）

app:tabBackground="@color/colorye"

设置Tab滚动方式

可滚动

app:tabMode="scrollable"

固定

app:tabMode="fixed"

然后运行,发现是不是变得好看了

TabLayout的监听事件

选中了某个tab的监听事件OnTabSelectedListener()：

setOnTabSelectedListener() 这个方法已经被抛弃了，现在一般使用 addOnTabSelectedListener\

直接上代码

mytab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //TODO  添加选中Tab的逻辑
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //TODO  添加未选中Tab的逻辑
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                //TODO  再次选中Tab的逻辑
            }
        });

最后实用性比较强的是将TabLayout和ViewPager关联，这种使用方法比较灵活，在实际开发中一般都是这样配合使用

关联TabLayout和ViewPager只需要调用mytab.setupWithViewPager(mViewPager);

这里记录一下通过使用Fragment作为ViewPager的内容，再将ViewPager关联

步骤一、

在布局文件中TabLayout控件的下方添加ViewPager控件（如果需要选项卡位于底部实现类似QQ的那种效果，只需要把ViewPager控件放在TabLayout控件的上面就行了）

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

步骤二、

在MainActivity中中定义两个List集合，一个放TabLayout标题Title，一个放TabLayout内容Fragment

    List<String> mTitle;
    List<Fragment> mFragment;

给这两个集合添加内容

mTitle = new ArrayList<>();
        mTitle.add("选项卡一");
        mTitle.add("选项卡二");
        mTitle.add("选项卡三");
        mTitle.add("选项卡四");

        mFragment = new ArrayList<>();
        mFragment.add(new Fragment());
        mFragment.add(new Fragment());
        mFragment.add(new Fragment());
        mFragment.add(new Fragment());

步骤三、

给ViewPager创建适配器，将Title和Fragment添加进ViewPager中

 mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public int getCount() {
                return mFragment.size();
            }

            @Override
            public Fragment getItem(int position) {
                return mFragment.get(position);
            }
            @Override
            public CharSequence getPageTitle(int position) {
                return mTitle.get(position);
            }
        });

步骤四、

最后一步当然是将ViewPager和TabLayout关联起来了

mytab.setupWithViewPager(mViewPager);

最后补充一点：最好给ViewPager添加上预加载，这样看起来的效果会好一点

预加载界面个数，表示你的预告加载的页面数量的个数,假设我设置为2，当前显示一个,预先加载两个个.这样你在移动前就已经加载了下一个界面,移动时就可以看到已经加载的界面了.

mViewPager.setOffscreenPageLimit(2);

今天做一个项目要实现选项卡的选项不但有文字还要有图片，并且选中的选项中的文字和图片要进行变色。

文字的相关用法上面都写了，但是ViewPager的适配器FragmentPagerAdapter没有和设置图片相关的方法，下面我就记录一下当TabLayout和Fragment和Viewpager进行绑定之后怎么给选项卡添加图片。

我们都知道使用完下面的方法之后TabLayout和ViewPager的绑定就已经完成了，选项卡的效果也已经实现了
tab.setupWithViewPager(mViewPager);

所以在我们需要给选项卡设置图片就需要把选项卡的内容给清空，使用下面的方法

tab.removeAllTabs();

现在我们有几个选项就做几个图片选择器（选择器的作用是当我们选中当前选项时，当前的图片会进行变色），做图片选择器的方法这里就不写了，我另外一篇博客里面有。

然后把这些图片选择器都放到一个集合当中去。

接下来就可以给选项卡设置文字和图片了，这里的方法和一开始写的是一样的。下面的tab是我自定义的TabLayout对象

TabLayout.Tab tt;
for (int i = 0; i < 3; i++) {
tt = tab.newTab();
tt.setText(Tab_title.get(i).toString());
tt.setIcon(getResources().getDrawable((Integer) Tab_Icon.get(i)));
tab.addTab(tt, i);
}