Android TabLayout 选中改变字体大小颜色、指示线
1 思路分析
在本次项目中，交互设计要求实现 TabLayout 的点击效果，包括字体大小、颜色、指示线的样式等效果。
2 实现思路
2.1改变 tab 字体大小、颜色
我希望在代码中实现这个效果。首先在 colors.xml添加点击前后的颜色值：
<color name="home_tab_selected">#303233</color>
<color name="home_tab_unselected">#A2A2A2</color>
然后为 TabLayout 设置 addOnTabSelectedListener事件，监听 tab 选择状态的改变，从而改变 tab 字体的颜色和大小：
tabLayout.addOnTabSelectedListener(new TabLayout.BaseOnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
String type = tab.getText().toString();
EventBus.getDefault().post(new LoginEvent(type));
// 获取 tab 组件
View view = tab.getCustomView();
if (null != view && view instanceof TextView) {
// 改变 tab 选择状态下的字体大小
((TextView) view).setTextSize(22);
// 改变 tab 选择状态下的字体颜色
((TextView) view).setTextColor(ContextCompat.getColor(getContext(), R.color.home_tab_selected));
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
View view = tab.getCustomView();
if (null != view && view instanceof TextView) {
// 改变 tab 未选择状态下的字体大小
((TextView) view).setTextSize(18);
// 改变 tab 未选择状态下的字体颜色
((TextView) view).setTextColor(ContextCompat.getColor(getContext(), R.color.home_tab_unselected));
}
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
};
2.2 改变 tab 指示线
我们要实现 tab 选择时指示线的圆角+长度修改+颜色修改效果，但是Tablayout 原生只提供了改变指示线颜色的方法，而没有提供修改指示线长度、圆角等样式的方法，远不能满足我们的需求。网络上的教程多数也是使用反射实现的，个人感觉比较繁琐。
因此，这里采用了 一种替换背景实现指示线样式修改的方法。
隐藏 TabLayout 原生的 tabIndicator
<android.support.design.widget.TabLayout
...
app:tabIndicatorHeight="0dp"
...
/>
替换 tabBackground
<android.support.design.widget.TabLayout
...
app:tabBackground="@drawable/tab_selector"
...
/>
selector 代码如下
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/tab_selected" android:state_selected="true" />
<item android:drawable="@color/white" />
</selector>
其中的选中 tab_selected 代码
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 整个背景色-->
<item>
<shape>
<solid android:color="@color/white" />
</shape>
</item>
<!-- 底部圆角,参数是固定的 -->
<item
android:width="20dp"
android:height="3dp"
android:gravity="bottom|center_horizontal">
<shape>
<solid android:color="@color/colorPrimary" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
很好理解，就是当 tab 被选中时替换背景为自定义的圆角+颜色+长度的背景，未选中时则替换为白色背景，很好地实现了这种效果。
完
扫描二维码关注公众号，回复：
8972366 查看本文章
