TabLayout + ViewPager实现仿微信左右滑动切换页面功能详解（含TabLayout美化）

简单实现

添加依赖

在build.gradle(Module:app)文件中的dependency中添加

implementation 'com.android.support:design:28.0.0'

定义布局文件

很简单的，一个TabLayout和一个ViewPager，
注意：TabLayout不要选成自带的那个TabLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp"/>

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

</LinearLayout>

创建Fragment

我就直接随便新建了两个，连接上XML布局文件就行

public class FragmentOne extends Fragment {
    
    

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    
    
        View view = inflater.inflate(R.layout.frag_1, container, false);

        return view;
    }
}

实例化FragmentPagerAdapter

这里我是直接实例化了FragmentPagerAdapter ，你也可以自己写一个类继承FragmentPagerAdapter 来写一个自己的Adapter

		List<Fragment> fragments = new ArrayList<>();
        fragments.add(new FragmentOne());
        fragments.add(new FragmentTwo());
		FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
    
    
            @NonNull
            @Override
            public Fragment getItem(int position) {
    
    
                return fragments.get(position);
            }

            @Override
            public int getCount() {
    
    
                return fragments.size();
            }
        };

实现ViewPager

这里我们已经实例化了FragmentPagerAdapter，那么就差设置到ViewPager上去了
到了这里我们已经是实现了可以左右滑动页面的功能了

viewPager.setAdapter(adapter);

关联TabLayout并设置标签

同样很简单，一行代码就可以把ViewPager和TabLayout关联上

tabLayout.setupWithViewPager(viewPager);

ViewPager和TabLayout关联上以后，是没有便签的，所以这里我们需要给它设置标签
这里如果你有很多的标签的话，可以考虑用for循环和数组的方式添加，但是一定要注意TabAt不能越界，否则会报错

tabLayout.getTabAt(0).setText("第一页");
tabLayout.getTabAt(1).setText("第二页");

至此，一个简单的（很丑的）可以左右滑动、有标签的就实现了！

TabLayout美化

作为一枚精致的程序猿，怎么能忍受得了做出来的东西不好看？盘它！

滚动的便签

app:tabMode=“fixed” 默认情况下是不滚动（不需要滚动的情况下就直接省略不写了）
app:tabMode=“scrollable” 可以滚动
XML布局文件中设置

app:tabMode="scrollable"

Java后台中设置

tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

添加小图标

这个和设置标签是一样的，只是把.setText()换成了setIcon()

tabLayout.getTabAt(0).setIcon(R.mipmap.baoma);
tabLayout.getTabAt(1).setIcon(R.mipmap.benchi);

小图标和标签的相对位置

tabInlineLabe：小图标和便签是否在同一条线上
默认情况（设置为false）

设置为true

XML布局设置

app:tabInlineLabel="true"

Java后台设置

tabLayout.setInlineLabel(true);

TabLayout的字体美化

tabTextColor:字体默认的颜色
tabSelectedTextColor：字体选中时的颜色
XML布局设置

app:tabTextColor="@color/colorAccent"
app:tabSelectedTextColor="@color/colorPrimary"

Java后台设置

//第一个是默认颜色，第二个是选中时的颜色
tabLayout.setTabTextColors(Color.RED,Color.YELLOW);

TabLayout的下划线美化

tabIndicatorHeight：下划线的宽度
tabIndicatorFullWidth：下划线是否充满tab的宽度（这里设置成false的话，下划线的长度就会和便签长度一样）
tabIndicatorColor：下划线颜色
tabIndicatorGravity：下划线的位置
XML布局设置

	app:tabIndicatorHeight="10dp"
    app:tabIndicatorFullWidth="false"
    app:tabIndicatorColor="@color/colorPrimaryDark"
    app:tabIndicatorGravity="top"

Java后台设置

		tabLayout.setSelectedTabIndicatorHeight(10);
        tabLayout.setTabIndicatorFullWidth(false);
        tabLayout.setSelectedTabIndicatorColor(Color.GREEN);
        tabLayout.setSelectedTabIndicatorGravity(TabLayout.GRAVITY_CENTER);