一、效果展示

1. 效果图

a. 常用的效果 b. 常用的效果 c. 常用的效果 d. 常用的效果 e.可滚动的 常用的效果 f. 常用的效果 g. 自定义效果

2. 关联ViewPage

关联ViewPage

3. TabLayout固定选项卡或可滚动选项卡

固定选项卡或可滚动选项卡

4. TabLayout动态添加移除选项卡

动态添加移除选项卡

5. 显示选项卡Badge

显示选项卡Badge

二、项目中使用

1. 在Gradle中引入(最新版本)

implementation 'com.liang.jtab:jtablayout:2.1.1'

2. 在Layout.xml中添加JTabLayout(2.x以上版本大多数属性对应原生TabLayout属性)

<com.liang.widget.JTabLayout
    android:id="@+id/tabLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabDividerColor="@android:color/holo_orange_dark"
    app:tabDividerHeight="40dp"
    app:tabDividerWidth="1dp"
    app:tabMode="fixed"
    app:tabScaleTransitionScroll="1.2"
    app:tabIndicator="@drawable/tab_indicator_bg"
    app:tabIndicatorColor="@color/color_tab_bg"
    app:tabIndicatorFullWidth="false"
    app:tabIndicatorHeight="5dp"
    app:tabIndicatorTransitionScroll="true"
    app:tabIndicatorWidth="5dp"
    app:tabTextColor="@drawable/text_color_tab" />

tabDividerColor 分割线颜色
tabDividerHeight 分割高度
tabDividerWidth 分割宽度 (默认为0，不显示分割线)
tabMode="fixed" 固定选项卡(fixed)或可滚动选项卡(scrollable)
tabTextColor 选项卡切换状态时的字体颜色
tabTextColorTransitionScroll 字体颜色改变方式: normal为默认 ,shadow为渐变
tabTextSize 选项卡字体大小
tabTextBold 选项卡选中时字体是否变粗
tabScaleTransitionScroll 选项卡选中时大小
tabIndicator 指示器
tabIndicatorColor 指示器颜色
tabIndicatorFullWidth 指示器宽度是否占满Item
tabIndicatorHeight 指示器高
tabIndicatorTransitionScroll 指示器滚动方式
tabIndicatorWidth 指示器宽
tabIndicatorTier 指示器在Item之上(front)或之下(back)
tabIndicatorAnimationDuration 指示器滚动时间(毫秒)
tabIndicatorGravity 指示器位置
tabIndicatorMargin 指示器外边距(对应tabIndicatorGravity->top 就是MarginTop 其余类似)

3. 添加选项卡(TabView)

1.添加默认TabView

Tab tabItem = tabLayout.newTab();//或 TabView  tabItem  =  new  TabView (context);
tabItem.setIcon(R.mipmap.tab_icon_hall_normal, R.mipmap.tab_icon_hall_selected);
tabItem.setTitle("娱乐");
tabLayout.addTab(tabItem );

2.添加自定义TabView

只是布局的改变可以直接继承TabView，重写initTabView()、setTabTitleView()、 setTabIconView()、setTabBadgeView()这三个方法即可

 public class CustomTabView extends TabView {
      private View  tabView;
      public CustomTabView (@NonNull Context context) {
            super(context);
       }
 
      @Override
      protected View initTabView() {
            tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_menul,null,true);
            return tabView;
      }
 
      @Override
      protected TextView setTabTitleView() {
            TextView title =tabView.findViewById(R.id.navigation_title);
            return title;
      }
 
      @Override
      protected ImageView setTabIconView() {
            return null;
      }

      @Override
      protected BadgeView setTabBadgeView() {
            BadgeView badge =tabView.findViewById(R.id.navigation_badge);
            return badge;
      }
 }

如果是要深度自定义就要继承Tab这个类，重写其对应的方法

4. 添加监听(addOnTabSelectedListener)

 tabLayout.addOnTabSelectedListener(new OnTabSelectedListener() {

      @Override
      public void onTabSelected(int position) {
         当切换时回调
       }
 
      @Override
      public void onTabReselected(int position) {
         当重复选中时回调
      }
 });

5. 添加指示器(这种添加指示器方式会覆盖掉xml中设置的属性)

val indicator = JIndicator()
tabLayout.setIndicator(indicator)

6. 显示角标(BadgeView)

tabLayout.showBadgeMsg(int position);只显示对应选项卡角标为圆点
tabLayout.showBadgeMsg(int position,int count); count大于0显示否则隐藏
tabLayout.showBadgeMsg(int position, String msg); msg不为""显示否则隐藏

三、属性说明

1.TabView

TabView.setIcon(R.mipmap.tab_icon_normal, R.mipmap.tab_icon_selected);选项卡图标
TabView.setTitle("娱乐");选项卡文本
TabView.setObject(Object);选项卡自定义内容
TabView.setTitleColor(); 选项卡切换状态时的字体颜色
TabView.setBackgroundRes(); 选项卡背景
TabView.setSelected(); 选项卡状态
TabView.setTextTransitionMode();字体颜色改变方式
TabView.setBold();选项卡选中时字体是否变粗
TabView.setTextSize();选项卡字体大小
TabView.setBadgeTextColor();选项卡角标的字体颜色
TabView.setBadgeTextSize();选项卡角标的字体大小
TabView.setBadgeColor();选项卡角标的背景颜色
TabView.setBadgeStroke(width,color);选项卡角标的边框宽度和边框颜色

2.JIndicator

JIndicator.setGravity(int gravity);设置Indicator的位置（上、中、下）
JIndicator.setWidthScale(float widthScale);设置Indicator的宽度占选项卡宽度的比列
JIndicator.setWidth(int width);设置Indicator的宽度
JIndicator.setHeight(int height);设置Indicator的高度
JIndicator.setTransitionScroll(boolean transitionScroll);设置Indicator移动方式
JIndicator.setColor(@ColorInt int color);设置Indicator的颜色

此项目根据官方TabLayout实现并进行扩展，项目地址JTabLayout