一豪直、效果展示
1. 效果圖
a.
2. 關(guān)聯(lián)ViewPage
3. TabLayout固定選項(xiàng)卡或可滾動(dòng)選項(xiàng)卡
4. TabLayout動(dòng)態(tài)添加移除選項(xiàng)卡
5. 顯示選項(xiàng)卡Badge
二木人、項(xiàng)目中使用
1. 在Gradle中引入(最新版本)
implementation 'com.liang.jtab:jtablayout:2.1.1'
2. 在Layout.xml中添加JTabLayout(2.x以上版本大多數(shù)屬性對(duì)應(yīng)原生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 分割寬度 (默認(rèn)為0，不顯示分割線)
tabMode="fixed" 固定選項(xiàng)卡(fixed)或可滾動(dòng)選項(xiàng)卡(scrollable)
tabTextColor 選項(xiàng)卡切換狀態(tài)時(shí)的字體顏色
tabTextColorTransitionScroll 字體顏色改變方式: normal為默認(rèn) ,shadow為漸變
tabTextSize 選項(xiàng)卡字體大小
tabTextBold 選項(xiàng)卡選中時(shí)字體是否變粗
tabScaleTransitionScroll 選項(xiàng)卡選中時(shí)大小
tabIndicator 指示器
tabIndicatorColor 指示器顏色
tabIndicatorFullWidth 指示器寬度是否占滿Item
tabIndicatorHeight 指示器高
tabIndicatorTransitionScroll 指示器滾動(dòng)方式
tabIndicatorWidth 指示器寬
tabIndicatorTier 指示器在Item之上(front)或之下(back)
tabIndicatorAnimationDuration 指示器滾動(dòng)時(shí)間(毫秒)
tabIndicatorGravity 指示器位置
tabIndicatorMargin 指示器外邊距(對(duì)應(yīng)tabIndicatorGravity->top 就是MarginTop 其余類似)
3. 添加選項(xiàng)卡(TabView)
1.添加默認(rèn)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("娛樂(lè)");
tabLayout.addTab(tabItem );
2.添加自定義TabView
只是布局的改變可以直接繼承TabView涡贱，重寫initTabView()、setTabTitleView()威兜、 setTabIconView()坑夯、setTabBadgeView()這三個(gè)方法即可
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這個(gè)類，重寫其對(duì)應(yīng)的方法
4. 添加監(jiān)聽(addOnTabSelectedListener)
tabLayout.addOnTabSelectedListener(new OnTabSelectedListener() {
@Override
public void onTabSelected(int position) {
當(dāng)切換時(shí)回調(diào)
}
@Override
public void onTabReselected(int position) {
當(dāng)重復(fù)選中時(shí)回調(diào)
}
});
5. 添加指示器(這種添加指示器方式會(huì)覆蓋掉xml中設(shè)置的屬性)
val indicator = JIndicator()
tabLayout.setIndicator(indicator)
6. 顯示角標(biāo)(BadgeView)
tabLayout.showBadgeMsg(int position);只顯示對(duì)應(yīng)選項(xiàng)卡角標(biāo)為圓點(diǎn)
tabLayout.showBadgeMsg(int position,int count); count大于0顯示否則隱藏
tabLayout.showBadgeMsg(int position, String msg); msg不為""顯示否則隱藏
三纽帖、屬性說(shuō)明
1.TabView
TabView.setIcon(R.mipmap.tab_icon_normal, R.mipmap.tab_icon_selected);選項(xiàng)卡圖標(biāo)
TabView.setTitle("娛樂(lè)");選項(xiàng)卡文本
TabView.setObject(Object);選項(xiàng)卡自定義內(nèi)容
TabView.setTitleColor(); 選項(xiàng)卡切換狀態(tài)時(shí)的字體顏色
TabView.setBackgroundRes(); 選項(xiàng)卡背景
TabView.setSelected(); 選項(xiàng)卡狀態(tài)
TabView.setTextTransitionMode();字體顏色改變方式
TabView.setBold();選項(xiàng)卡選中時(shí)字體是否變粗
TabView.setTextSize();選項(xiàng)卡字體大小
TabView.setBadgeTextColor();選項(xiàng)卡角標(biāo)的字體顏色
TabView.setBadgeTextSize();選項(xiàng)卡角標(biāo)的字體大小
TabView.setBadgeColor();選項(xiàng)卡角標(biāo)的背景顏色
TabView.setBadgeStroke(width,color);選項(xiàng)卡角標(biāo)的邊框?qū)挾群瓦吙蝾伾?2.JIndicator
JIndicator.setGravity(int gravity);設(shè)置Indicator的位置（上宠漩、中、下）
JIndicator.setWidthScale(float widthScale);設(shè)置Indicator的寬度占選項(xiàng)卡寬度的比列
JIndicator.setWidth(int width);設(shè)置Indicator的寬度
JIndicator.setHeight(int height);設(shè)置Indicator的高度
JIndicator.setTransitionScroll(boolean transitionScroll);設(shè)置Indicator移動(dòng)方式
JIndicator.setColor(@ColorInt int color);設(shè)置Indicator的顏色
此項(xiàng)目根據(jù)官方TabLayout實(shí)現(xiàn)并進(jìn)行擴(kuò)展懊直，項(xiàng)目地址JTabLayout
