Android TabLayout切换改变字体大小与颜色，以及下划线长度

如图

552116006090575777.jpg

1.思路：只能想办法给选中tab定制TextView,再根据监听TabLayout的选中状态设置该TextView的显示样式。

注解 BindView

@BindView(R.id.tab_layout)
TabLayout tabLayout;
@BindView(R.id.view_pager)
ViewPager viewPager

2.tablayout与viewpager的使用

ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager(), fragmentList, titleList);
viewPager.setAdapter(adapter);

默认选中第一条，字体颜色改变

viewPager.setCurrentItem(0); //默认第一条数据
viewPager.setOffscreenPageLimit(size);
for (int i = 0; i <tabLayout.getTabCount() ; i++) {
TabLayout.Tab tabAt = tabLayout.getTabAt(i);
if(tabAt!=null){
tabAt.setCustomView(getTabView(i));
}
if(i==0){ //默认选中第一条，字体变大
TextView viewByIdtext = tabAt.getCustomView().findViewById(R.id.tab_item_textview);
viewByIdtext.setSelected(true);
viewByIdtext.setTextSize(18);
viewByIdtext.setTextColor(Color.parseColor("#2F75F8"));
}
}

下面是tablayout 监听是否滑动 事件

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//在这里可以设置选中状态下 tab字体显示样式
// viewPager.setCurrentItem(tab.getPosition());
View view = tab.getCustomView();
if (null != view && view instanceof TextView) {
((TextView) view).setTextSize(18);
((TextView) view).setTextColor(ContextCompat.getColor(mActivity, R.color.coloresBules));
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) { //未选中状态
View view = tab.getCustomView();
if (null != view && view instanceof TextView) {
((TextView) view).setTextSize(14);
((TextView) view).setTextColor(ContextCompat.getColor(mActivity, R.color.text_69));
}
}
@Override
public void onTabReselected(TabLayout.Tab tab) { //选定的
}
});

3. 需要设置 自定义tablayout的view

private View getTabView(int currentPosition) {
View view = LayoutInflater.from(mContext).inflate(R.layout.layout_tab, null);
TextView textView = (TextView) view.findViewById(R.id.tab_item_textview);
textView.setText(categoryList.get(currentPosition).getName());
return view;
}

layout_tab.xml文件也很简单 只有一个textView

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tab_item_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
android:typeface="sans"
</TextView>

最后，改变tablayout下划线长度,会根据内容长度 反射来控制下划线的长度

需要一个工具类

public void setIndicator(TabLayout tabs, int leftDip, int rightDip) {
Class<?> tabLayout = tabs.getClass();
Field tabStrip = null;
try {
tabStrip = tabLayout.getDeclaredField("mTabStrip");
} catch (NoSuchFieldException e) {
e.printStackTrace();
}
tabStrip.setAccessible(true);
LinearLayout llTab = null;
try {
llTab = (LinearLayout) tabStrip.get(tabs);
} catch (IllegalAccessException e) {
e.printStackTrace();
}
int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics());
int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics());
for (int i = 0; i < llTab.getChildCount(); i++) {
View child = llTab.getChildAt(i);
child.setPadding(0, 0, 0, 0);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
params.leftMargin = left;
params.rightMargin = right;
child.setLayoutParams(params);
child.invalidate();
}
}

需要在tablayout方法当中调用

tabLayout.post(new Runnable() {
@Override
public void run() {
// setIndicator(tabLayout,30,30); 值可更改
}
});