android TabLayout自定义指示器样式和长度,通过自定义setCustomView()方式的封装

1.描述

viewpager+tabLayout+fragment非常常见,但google只给出了改变tabLayout中的tab IndicatorHeight的方法,其宽度是填充满整个tab的,且不能更改。在网上看了很多关于改变indicator的长度的方式,大多集中与反射和setCustomView()的方式,个人更倾向于后者。

2.实现

1.效果

Screenshot_2019-07-23-13-35-38-385_com.summer.tab.png

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

你可能感兴趣的:(android TabLayout自定义指示器样式和长度,通过自定义setCustomView()方式的封装)