[Android开发] TabLayout 选中改变字体大小颜色、指示线

Android TabLayout 选中改变字体大小颜色、指示线

1 思路分析

在本次项目中，交互设计要求实现 TabLayout 的点击效果，包括字体大小、颜色、指示线的样式等效果。

2 实现思路

2.1改变 tab 字体大小、颜色

我希望在代码中实现这个效果。首先在 colors.xml添加点击前后的颜色值：

  <color name="home_tab_selected">#303233color>
  <color name="home_tab_unselected">#A2A2A2color>

然后为 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 代码如下

<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 代码

<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 被选中时替换背景为自定义的圆角+颜色+长度的背景，未选中时则替换为白色背景，很好地实现了这种效果。

2.3 实现效果