TabLayout基本使用

1、导入依赖：

 implementation 'com.android.support:design:27.1.1'
 implementation 'com.android.support:support-v4:27

2、xml布局文件中使用

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.mdtablayout.MainActivity">
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabTextColor="@android:color/black"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabMode="scrollable"
        app:tabGravity="fill"/>
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

tablayout提供了很多的属性可以设置：

app:tabSelectedTextColor tab栏字体被选颜色
app:tabIndicatorHeight   指示器高度
app:tabBackground        tab背景颜色
app:tabMaxWidth          tab栏最大宽度
app:tabTextAppearance    tab栏字体样式
app:tabMinWidth          tab栏最小宽度
app:tabIndicatorColor    tab中滚动的指示横线颜色
app:tabSelectedTextColor 被选中的tab子项的文本颜色
app:tabTextColor         tab子项默认的文本颜色

这些属性可以下xml中设置，也可以使用代码进行设置；需要注意这两个属性：

• 1、app:tabMode="";有scrollable和fixed两个属性值

scrollable:可滑动;

fixed:不能滑动，平分tabLayout宽度;

• 2、app:tabGravity="";有center和fill两个属性值

fill:tabs平均填充整个宽度;

center:tab居中显示;

设置tablayout和viewpager，并将tablayout和viewpager进行关联

在设置tablayout和viewpager，并将tablayout和viewpager进行关联有两中方式可以实现：

方式一：

• 1、TabLayout和Viewpager关联

tablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //tab被选的时候回调
                viewpager.setCurrentItem(tab.getPosition(),true);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //tab未被选择的时候回调
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                //tab重新选择的时候回调
            }
        });

• 2、ViewPager滑动关联tabLayout

viewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tablayout));

• 3、设置tabLayout的标签来自于PagerAdapter

tablayout.setTabsFromPagerAdapter(tabAdapter);

• 4、ViewPager设置适配器

viewpager.setAdapter(tabAdapter);

方式二：

• 1、viewpager设置适配器

viewpager.setAdapter(tabAdapter);

• 2、tablayout和viewpager相互关联，并设置tablayout文字

tablayout.setupWithViewPager(viewpager);

使用第二种方式需要注意的是setupWithViewPager();方法的调用必须在viewpager设置完适配器后调用，如果在设置适配器之前调用会抛异常，至于为什么会抛异常，后面tablayout的源码会说到；这样tab栏切换效果就实现了：

image