实现步骤，只需5步：
1.导入依赖包：
implementation 'com.android.support:design:28.0.0'
2.布局xml代码：
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="@color/gray_666666"
app:tabSelectedTextColor="@color/white"
app:tabBackground="@color/transparent"
app:tabIndicatorColor="@color/white"
app:tabIndicatorHeight="2dp"
app:tabTextAppearance="@style/tabLayoutStyle"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabIndicatorFullWidth="false"
app:tabIndicatorGravity="bottom"
app:tabIndicatorAnimationDuration="500"
/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
3.res/values文件夹下styles.xml里面设置：
<style name="tabLayoutStyle">
<item name="android:textSize">16sp</item>
<item name="android:textColor">@color/white</item>
<item name="textAllCaps">false</item>
</style>
4.使用代码：
ArrayList fragmentArray;
public void fetchData() {
tabLayout.addTab(tabLayout.newTab().setText("Tab1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab3"));
fragmentArray =new ArrayList<>();
fragmentArray.add(new TabLayoutFragmentTest());
fragmentArray.add(new TabLayoutFragmentTest2());
fragmentArray.add(new TabLayoutFragmentTest3());
viewpager.setAdapter(new BaseMainAdapter(getSupportFragmentManager(), fragmentArray));
viewpager.setCurrentItem(0);
viewpager.setOffscreenPageLimit(3);
viewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//添加选中Tab的逻辑
int position = tab.getPosition();
viewpager.setCurrentItem(position);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
//添加未选中Tab的逻辑
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
//再次选中tab的逻辑
}
});
}
5.Adapter代码：
public class BaseMainAdapterextends FragmentPagerAdapter {
ListlistFragment ;
public BaseMainAdapter(FragmentManager fm, List listFragment) {
super(fm);
this.listFragment = listFragment;
}
@Override
public FragmentgetItem(int position) {
return listFragment.get(position);
}
@Override
public int getCount() {
return listFragment.size();
}
}
到这里开发就结束了，可以看看效果。
另外 TabLayout 的一些属性介绍：
app:tabTextColor="@color/bt_1" //设置Tab未被选中时的文字颜色
app:tabSelectedTextColor="@color/colorPrimary" //设置选中项中的字体颜色
app:tabBackground="@color/bt_1" //设置Tab背景
app:tabIndicatorColor="@color/bt_1" //设置指示器的颜色
app:tabIndicatorHeight="10dp" //设置指示器的高度
app:tabMode="fixed" //固定的，不能滑动，很多标签的时候会被挤压（默认是fixed）
app:tabMode="scrollable" //可以滑动的
app:tabGravity="fill" //充满屏幕，默认是fill，且只有当tabMode为fixed时才有效
app:tabGravity="center" //居中
app:tabIndicatorFullWidth="false" //指示器是否占满整个宽度（默认为true）
app:tabIndicatorGravity="bottom" //设置指示器的方位（默认指示器在下方），取值有top：指示器在上方，bottom：指示器在下方，center：指示器在中间，stretch：指示器沾满整个布局
app:tabIndicatorAnimationDuration="5000" //设置指示器动画时间
app:tabInlineLabel="true" //设置图标和文件的方向（默认为false）
app:tabRippleColor="@color/bt_1" //设置点击效果水波纹的颜色
app:tabUnboundedRipple="true" //设置点击效果水波纹是否有边界（默认有边界），如果为true，则无边框
app:tabIconTint="@color/bt_1" //设置文字上面图标的颜色
app:tabIconTintMode="src_in" //文字上的图标和文字上图标区域的颜色之间的图像混合模式，它的取值有：src_atop、src_over、add、screen、src_in、multiply
tabMaxWidth：设置tab项最大的宽度
tabMinWidth：设置tab项最小的宽度
tabContentStart：设置TabLayout开始位置的偏移量
paddingStart，paddingEnd：设置整个TabLayout的内边距
tabPadding，tabPaddingStart，tabPaddingEnd，tabPaddingTop，tabPaddingBottom：设置tab项的内边距
参考：
