前文

现在应该都是使用第三方来实现这个功能的，我只是懒得找第三方，然后花了更多的时间，完成这个以前完成过很多次的UI设计。防止下次再找不到，所以写在这里，下次自己搜索的时候，或许能搜到呢？应该能省很多时间~

正文这里是记录一次自定义的Tab，非自定义的，看这个也能看出来，一举两得^.^ TabLayout属性介绍，copy来的

app:tabIndicatorColor    指示器颜色
app:tabTextColor         tab栏字体颜色
app:tabSelectedTextColor tab栏字体被选颜色
app:tabIndicatorHeight   指示器高度
app:tabBackground        tab背景颜色
app:tabMaxWidth          tab栏最大宽度
app:tabTextAppearance    tab栏字体样式
app:tabMinWidth          tab栏最小宽度
......

XML代码

居中布局
<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:layout_height="44dp"
    app:layout_constraintTop_toBottomOf="@+id/title"
    app:tabGravity="center"
    app:tabIndicatorColor="@color/tab_select"
    app:tabIndicatorGravity="bottom"
    app:tabIndicatorHeight="1dp"
    app:tabMaxWidth="130dp"
    app:tabMinWidth="80dp"
    app:tabMode="scrollable"
    app:tabPaddingBottom="6dp"
    app:tabPaddingEnd="16dp"
    app:tabPaddingStart="16dp"
    app:tabSelectedTextColor="@color/tab_select"
    app:tabTextColor="@color/tab_unselect" />
    
    <androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/rlTop" />
    
    <?xml version="1.0" encoding="utf-8"?>
    
    这个是自定义Tab
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/txContext"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/txUnfinish"
    android:textColor="@color/btn_ok"
    android:layout_marginStart="25dp"
    android:layout_marginEnd="25dp"
    android:textSize="16sp" />

Java代码

private List<String> tabTexs = new ArrayList<>(Arrays.asList("未完成","已完成"));

//禁用预加载
fragmentBinding.viewPager.setOffscreenPageLimit(ViewPager2.OFFSCREEN_PAGE_LIMIT_DEFAULT);

fragmentBinding.viewPager.setAdapter(new FragmentStateAdapter(getActivity().getSupportFragmentManager(),getLifecycle()) {
    @NonNull
    @Override
    public Fragment createFragment(int position) {
        if (position==0) {
            return new UnfinshFragment();
        }else{
            return new FinshFragment();
        }
    }

    @Override
    public int getItemCount() {
        return 2;
    }
});
initTabLayout();

private void initTabLayout(){
//添加tabs
fragmentBinding.tabLayout.addTab(fragmentBinding.tabLayout.newTab());
fragmentBinding.tabLayout.addTab(fragmentBinding.tabLayout.newTab());
//监听变化
fragmentBinding.tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        TextView customView = (TextView) tab.getCustomView();
        //选中设置燕子颜色
        customView.setTextColor(ActivityCompat.getColor(requireContext(), R.color.tab_select));
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        TextView customView = (TextView) tab.getCustomView();
        //为选中设置文字颜色
        customView.setTextColor(ActivityCompat.getColor(requireContext(), R.color.tab_unselect));
    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});
//        fragmentBinding.tabLayout.addTab(getTab(R.layout.item_tablayout, getResources().getString(R.string.txUnfinish)));
//        fragmentBinding.tabLayout.addTab(getTab(R.layout.item_tablayout, getResources().getString(R.string.txFinish)));
    new TabLayoutMediator(fragmentBinding.tabLayout, fragmentBinding.viewPager, new TabLayoutMediator.TabConfigurationStrategy() {
        @Override
        public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
            //初始化自定义tab
            setCustomView(tab, position,position==0);               
        }
    }).attach();

}

private void setCustomView(TabLayout.Tab tab, int position,boolean flag){
    tab.setCustomView(getTextView(R.layout.item_tablayout,position, flag));
}

private TextView getTextView(int resource, int position, boolean flag){
    TextView inflate = (TextView) LayoutInflater.from(requireContext()).inflate(resource, null, false);
    inflate.setText(tabTexs.get(position));
    if (flag) {
        inflate.setTextColor(ActivityCompat.getColor(requireContext(), R.color.tab_select));
    }else{
        inflate.setTextColor(ActivityCompat.getColor(requireContext(), R.color.tab_unselect));
    }
    return inflate;
}

非自定义的tab，会更简单些，不过样式不好控制。

给个第三方的

https://github.com/hackware1993/MagicIndicator
 implementation 'com.github.hackware1993:MagicIndicator:1.6.0' // for support lib
 implementation 'com.github.hackware1993:MagicIndicator:1.7.0' // for androidx

TabLayout+ViewPager使用记录

前文

XML代码

Java代码