實現(xiàn)步驟，只需5步：
1.導(dǎo)入依賴包：
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里面設(shè)置：
<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();
? ? }
}
到這里開發(fā)就結(jié)束了，可以看看效果。
另外 TabLayout 的一些屬性介紹：
app:tabTextColor="@color/bt_1"? ? ? //設(shè)置Tab未被選中時的文字顏色
app:tabSelectedTextColor="@color/colorPrimary"? ?//設(shè)置選中項中的字體顏色
app:tabBackground="@color/bt_1"? ? //設(shè)置Tab背景
app:tabIndicatorColor="@color/bt_1"? ? //設(shè)置指示器的顏色
app:tabIndicatorHeight="10dp"? ? //設(shè)置指示器的高度
app:tabMode="fixed"? ?//固定的，不能滑動，很多標(biāo)簽的時候會被擠壓（默認(rèn)是fixed）
app:tabMode="scrollable"? ? //可以滑動的
app:tabGravity="fill"? ? //充滿屏幕，默認(rèn)是fill，且只有當(dāng)tabMode為fixed時才有效
app:tabGravity="center"? ?//居中
app:tabIndicatorFullWidth="false"? ?//指示器是否占滿整個寬度（默認(rèn)為true）
app:tabIndicatorGravity="bottom"? ?//設(shè)置指示器的方位（默認(rèn)指示器在下方），取值有top：指示器在上方，bottom：指示器在下方，center：指示器在中間，stretch：指示器沾滿整個布局
app:tabIndicatorAnimationDuration="5000"? ?//設(shè)置指示器動畫時間
app:tabInlineLabel="true"? //設(shè)置圖標(biāo)和文件的方向（默認(rèn)為false）
app:tabRippleColor="@color/bt_1"? ?//設(shè)置點擊效果水波紋的顏色
app:tabUnboundedRipple="true"? ?//設(shè)置點擊效果水波紋是否有邊界（默認(rèn)有邊界），如果為true，則無邊框
app:tabIconTint="@color/bt_1"? //設(shè)置文字上面圖標(biāo)的顏色
app:tabIconTintMode="src_in"? //文字上的圖標(biāo)和文字上圖標(biāo)區(qū)域的顏色之間的圖像混合模式，它的取值有：src_atop、src_over、add、screen、src_in、multiply
tabMaxWidth：設(shè)置tab項最大的寬度
tabMinWidth：設(shè)置tab項最小的寬度
tabContentStart：設(shè)置TabLayout開始位置的偏移量
paddingStart，paddingEnd：設(shè)置整個TabLayout的內(nèi)邊距
tabPadding，tabPaddingStart，tabPaddingEnd，tabPaddingTop，tabPaddingBottom：設(shè)置tab項的內(nèi)邊距
參考：
