1.描述
viewpager+tabLayout+fragment非常常见,但google只给出了改变tabLayout中的tab IndicatorHeight的方法,其宽度是填充满整个tab的,且不能更改。在网上看了很多关于改变indicator的长度的方式,大多集中与反射和setCustomView()的方式,个人更倾向于后者。
2.实现
1.效果
2.setCustomView的使用方式
或许大概可能都知道吧,还是记录一下
for(int i=0;i
网上通常的做法是通过以上循环来添加,其中layout_extend_tab是自定义customView的布局,在此处有一点小坑(我被坑了反正),此处的LayoutInflater.from(getContext()).inflate(R.layout.layout_extentd_tab, (LinearLayout) tabView, false)
必须这样用,我通常加载布局是使用LayoutInflater.from(getContext()).inflate(R.layout.layout_extentd_tab, null)
,如果这样加载的话大家可能会发现无论如何设置的customView根本不能填充满tabView。如果每个需要用到tabLayout+viewpager+fragment的地方都这样使用,有点繁琐。
3.封装
在tabLayout中addTab()有四个重载方法,但无论显示调用哪一个,最终都会调用到public void addTab(@NonNull Tab tab, int position, boolean setSelected)
估重写此方法来加载coustomView,具体代码如下:
@Override
public void addTab(@NonNull Tab tab, int position, boolean setSelected) {
tab.setCustomView(createTabCustomView(tab.getText(), tab.view));
super.addTab(tab, position, setSelected);
}
/**
* 设置tab
*/
private View createTabCustomView(CharSequence text, View tabView) {
View view = LayoutInflater.from(getContext()).inflate(R.layout.layout_extentd_tab, (LinearLayout) tabView, false);
TextView textView = view.findViewById(R.id.layout_extend_tab_tv_content);
textView.setText(text);
textView.setTextColor(getTabTextColors());
View indicator = view.findViewById(R.id.layout_extend_tab_indicator);
ConstraintLayout.LayoutParams params = (ConstraintLayout.LayoutParams) indicator.getLayoutParams();
params.height = indicatorHeight;
params.leftMargin = indicatorMarginStart;
params.rightMargin = indicatorMarginEnd;
indicator.setLayoutParams(params);
indicator.setBackgroundColor(indicatorSelectColor);
indicator.setBackground(createStateListDrawable());
return view;
}
/**
* 创建StateListDrawable
*
* @return
*/
private StateListDrawable createStateListDrawable() {
StateListDrawable stateListDrawable = new StateListDrawable();
stateListDrawable.addState(new int[]{android.R.attr.state_selected}, new ColorDrawable(indicatorSelectColor));
stateListDrawable.addState(new int[]{}, new ColorDrawable());
return stateListDrawable;
}
最后附上layout_extentd_tab.xml
完整代码查看https://github.com/lijheng/tabLayout