TabLayout自定义总结
文章目录
-
- 1、常用属性
- 2、文字选中加粗
- 3、自定义指示器样式
- 4、自定义Tab样式
- 5、动态修改Tab的标题
-
- 5.1、使用的是原生的Tab：
- 5.2、修改自定义Tab的标题-1:
- 5.3、修改自定义Tab的标题-2：
1、常用属性
1、app:tabMode="scrollable"属性：
能实现滑动均分，当导航不足一屏的时候,去掉app:tabMode="scrollable"才能实现均分展示.
2、取消选中水波纹效果：
app:tabRippleColor=“@android:color/transparent”
3、改变整个TabLayout的背景色：
app:tabBackground=“@color/blue”
4、修改TabItem 字体大小：
app:tabTextAppearance=“@style/kd_enet_TabLayoutTextStyle”
5、圆角指示器：
-
参考：官方文档：
2、文字选中加粗
1、效果：
2、自定义TabItem 布局：kd_enet_tab_item.xml
3、代码控制选中字体的样式（粗细、颜色等）
private void initTab1() {
String[] mTitles1 = {
"业务应用", "指挥调度", "技术赋能"};
TabLayout mTabLayout1 = nViewDataBinding.tabLayout1;
//TabLayout的基本使用
for (int i = 0; i < mTitles1.length; i++) {
TabLayout.Tab tab = mTabLayout1.newTab();
tab.setText(mTitles1[i]);//这里一定要设置，否则不显示
tab.setCustomView(getTabView(i, mTitles1));//使用自定义Item布局
mTabLayout1.addTab(tab);
}
//初始值默认选中
updateTabTextView(mTabLayout1.getTabAt(mTabLayout1.getSelectedTabPosition()),
true, R.color.kd_enet_cl_3F78DF, R.color.kd_enet_cl_333);
mTabLayout1.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
updateTabTextView(tab, true, R.color.kd_enet_cl_3F78DF, R.color.kd_enet_cl_333);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
updateTabTextView(tab, false, R.color.kd_enet_cl_3F78DF, R.color.kd_enet_cl_333);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
/**
* 使用自定义的Item布局
*/
private View getTabView(int currentPosition, String[] strings) {
View view = LayoutInflater.from(getContext()).inflate(R.layout.kd_enet_tab_item, null);
TextView textView = view.findViewById(R.id.tab_item_textview);
textView.setText(strings[currentPosition]);
return view;
}
/**
* 每次选择更新Item样式
*/
private void updateTabTextView(TabLayout.Tab tab, boolean isSelect, int textSelectColor, int textUnSelectColor) {
if (isSelect) {
//选中加粗
TextView tabSelect = tab.getCustomView().findViewById(R.id.tab_item_textview);
tabSelect.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));//加粗
tabSelect.setTextColor(ContextCompat.getColor(getContext(), textSelectColor));//颜色
tabSelect.setText(tab.getText());
} else {
TextView tabUnSelect = tab.getCustomView().findViewById(R.id.tab_item_textview);
tabUnSelect.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
tabUnSelect.setTextColor(ContextCompat.getColor(getContext(), textUnSelectColor));
tabUnSelect.setText(tab.getText());
}
}
注意：如果使用自定义布局，xml中文字相关的设置就不会生效了：
//这些样式设置不会生效了
app:tabSelectedTextColor="@color/kd_enet_cl_3F78DF"
app:tabTextColor="@color/kd_enet_cl_333"
参考：TabLayout选中加粗
3、自定义指示器样式
1、效果图：
2、需求：圆角指示器，控制宽高：
3、自定义样式：R.drawable.kd_enet_indicator_14.xml
-
4、使用：
app:tabIndicator="@drawable/kd_enet_indicator_14"
4、自定义Tab样式
参考：TabLayout使用自定义的图文布局，每个Tab设置不同的背景
1、需求：TabLayout每个Tab选中背景不一样：左侧圆角、中间方块、右侧圆角。
2、页面布局：
3、代码控制每个Item的样式：
private final String[] titleArr = {"待完成", "待提交", "主动检查"};
private final int[] selectedArr = {R.drawable.icon_pending_selected, R.drawable.icon_uncommit_selected, R.drawable.icon_initiative_check_selected};
private final int[] unSelectedArr = {R.drawable.icon_pending_unselected, R.drawable.icon_uncommit_unselected, R.drawable.icon_initiative_check_unselected};
private TabLayout.OnTabSelectedListener onTabSelectedListener;
/**
* 导航栏布局：https://blog.csdn.net/xiaoshuxgh/article/details/80389570
*/
private void initLayout() {
myFragment = new ArrayList<>();
myFragment.add(new PendingFragment());
myFragment.add(new UnCommitFragment());
myFragment.add(new InitiativeCheckFragment());
nViewDataBinding.viewpager.setAdapter(new FragmentPagerAdapter(getChildFragmentManager()) {
@Override
public Fragment getItem(int i) {
return myFragment.get(i);
}
@Override
public int getCount() {
return myFragment.size();
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return titleArr[position];
}
});
nViewDataBinding.viewpager.setOffscreenPageLimit(2);
nViewDataBinding.tablayout.setupWithViewPager(nViewDataBinding.viewpager);
// 注意：这个方法需要放在setupWithViewPager()后面
for (int i = 0; i < nViewDataBinding.tablayout.getTabCount(); i++) {
TabLayout.Tab tabView = nViewDataBinding.tablayout.getTabAt(i);
tabView.setCustomView(getTabView(i));
setTabBackground(tabView, false);
}
onTabSelectedListener = new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//设置选中图标样式
View tabView = tab.getCustomView();
if (tabView == null) {
LegoLog.d("tabView is null");
return;
}
tabView.findViewById(R.id.tabicon).setBackgroundResource(selectedArr[tab.getPosition()]);
//设置选中字体颜色
TextView textView = tabView.findViewById(R.id.tabtext);
textView.setTextColor(ContextCompat.getColor(getContext(), R.color.theme_color));
setTabBackground(tab, true);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
//设置未选中图标样式
View tabView = tab.getCustomView();
if (tabView == null) {
LegoLog.d("tabView is null");
return;
}
tabView.findViewById(R.id.tabicon).setBackgroundResource(unSelectedArr[tab.getPosition()]);
//设置未选中字体颜色
TextView textView = tabView.findViewById(R.id.tabtext);
textView.setTextColor(ContextCompat.getColor(getContext(), R.color.cl_666));
setTabBackground(tab, false);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
};
nViewDataBinding.tablayout.addOnTabSelectedListener(onTabSelectedListener);
setTabBackground(nViewDataBinding.tablayout.getTabAt(DEFAULT_POSITION), true);
}
/**
* 使用自定义的View布局
*
* @param position
* @return
*/
private View getTabView(int position) {
View v = LayoutInflater.from(getContext()).inflate(R.layout.icon_view, null);
ImageView iv = v.findViewById(R.id.tabicon);
TextView tv = v.findViewById(R.id.tabtext);
tv.setText(titleArr[position]);
//设置默认页面
if (position == DEFAULT_POSITION) {
iv.setBackgroundResource(selectedArr[position]);
tv.setTextColor(ContextCompat.getColor(getContext(), R.color.theme_color));
} else {
iv.setBackgroundResource(unSelectedArr[position]);
tv.setTextColor(ContextCompat.getColor(getContext(), R.color.cl_666));
}
return v;
}
/**
* TabLayout每个Tab选中背景不一样。
* https://blog.csdn.net/qq_32606467/article/details/103068611
*
* @param tab
* @param selected
*/
private void setTabBackground(TabLayout.Tab tab, boolean selected) {
Drawable drawable = null;
switch (tab.getPosition()) {
case 0:
if (selected) {
drawable = ContextCompat.getDrawable(getContext(), R.drawable.tab_background_selected_0);
} else {
drawable = ContextCompat.getDrawable(getContext(), R.drawable.tab_background_unselected_0);
}
break;
case 1:
if (selected) {
drawable = ContextCompat.getDrawable(getContext(), R.drawable.tab_background_selected_1);
} else {
drawable = ContextCompat.getDrawable(getContext(), R.drawable.tab_background_unselected_1);
}
break;
case 2:
if (selected) {
drawable = ContextCompat.getDrawable(getContext(), R.drawable.tab_background_selected_2);
} else {
drawable = ContextCompat.getDrawable(getContext(), R.drawable.tab_background_unselected_2);
}
break;
}
ViewCompat.setBackground(tab.view, drawable);
}
5、动态修改Tab的标题
如果TabLayout 已经加载完成，这时候想修改某个Tab的标题；
5.1、使用的是原生的Tab：
nViewDataBinding.tabTodo.getTab(0).setText("");
5.2、修改自定义Tab的标题-1:
如果使用setCustomView()，设置了自定义的Tab；这个时候使用getTab(0).setText(“”);不会生效；
List<String> titleList = new ArrayList<>();
titleList.add("今日");
titleList.add("本周");
titleList.add("本月");
titleList.add("本季");
//TabLayout的基本使用
for (int i = 0; i < titleList.size(); i++) {
TabLayout.Tab tab = nViewDataBinding.tabTodo.newTab();
tab.setText(titleList.get(i));
tab.setCustomView(getTodoTabView(titleList.get(i), 14));
nViewDataBinding.tabTodo.addTab(tab);
}
需要通过getCustomView()获取到自定义的View，再进行值的修改：
TextView textView= nViewDataBinding.tabTodo.getTabAt(index).getCustomView().findViewById(R.id.tab_item_textview);
textView.setText(title + numStr);
5.3、修改自定义Tab的标题-2：
- 先removeAllTabs();
- 再重新添加Tab();
// 初始化Layout
List<String> titleList = new ArrayList<>();
titleList.add("今日");
titleList.add("本周");
titleList.add("本月");
titleList.add("本季");
//TabLayout的基本使用
for (int i = 0; i < titleList.size(); i++) {
TabLayout.Tab tab = nViewDataBinding.tabTodo.newTab();
tab.setText(titleList.get(i));
tab.setCustomView(getTodoTabView(titleList.get(i), 14));
nViewDataBinding.tabTodo.addTab(tab);
}
int selPosition = nViewDataBinding.tabTodo.getSelectedTabPosition();
nViewDataBinding.tabTodo.removeAllTabs();//1、先移除所有Tab
for (TodoCountResult result : todoCountResults) {
String type = result.getType();
String title = "";
if ("today".equalsIgnoreCase(type)) {
title = "今日";
} else if ("week".equalsIgnoreCase(type)) {
title = "本周";
} else if ("month".equalsIgnoreCase(type)) {
title = "本月";
} else if ("quarter".equalsIgnoreCase(type)) {
title = "本季";
} else {
LegoLog.d("未知的类型：" + type);
}
TabLayout.Tab tab = nViewDataBinding.tabTodo.newTab();
tab.setText(title + numStr);// 设置新的标题
tab.setCustomView(getTodoTabView(title + numStr, 14));
nViewDataBinding.tabTodo.addTab(tab);//2、再重新添加Tab
}