原生TabLayout实现指示符固定宽度+圆角，兼容Android 5.0 & 5.1系统

需求

实现以下UI效果，指示符宽度为10dp，高度为4dp，圆角为2dp

image

通常的做法如下：

• 定义指示符tab_indicator.xml

• 定义TabLayout，设置 app:tabIndicator="@drawable/tab_indicator"

在Android 6.0及以上系统的展示效果如下：

image

在Android 5.1的机器上展示效果如下：

image

在Android 5.1的机器上指示符的宽度和文本的宽度一样长，而不是我们想要的10dp

问题排查

检查了一下代码，发现xml文件中layer-list节点下android:width/height属性在Android 6.0以下系统无效，当我们把光标放在tab_indicator.xml布局文件里会有这样的提示: Attribute width is only used in API level 23 and higher (current min is 21)

image

解决方案

在代码中动态设置指示符宽度，添加一个TabLayout的扩展方法，如下：

/**
 * 设置指示符固定宽度
 */
fun TabLayout.setSelectedTabIndicatorFixWidth(width: Float) {
    setSelectedTabIndicator(object : DrawableWrapper(tabSelectedIndicator) {
        override fun setBounds(left: Int, top: Int, right: Int, bottom: Int) {
            var realLeft = left
            var realRight = right
            if ((right - left).toFloat() != width) {
                val center = left + (right - left).toFloat() / 2
                realLeft = (center - width / 2).toInt()
                realRight = (center + width / 2).toInt()
            }
            super.setBounds(realLeft, top, realRight, bottom)
        }
    })
}

使用

tab_indicator.xml

布局文件

tabLayout.setSelectedTabIndicatorFixWidth(dp2px(10f))

最终效果

• Android 5.0 & 5.1

image

• Android 6.0+

image

作者：孔鹏飞
链接：https://www.jianshu.com/p/e559809b7697
来源：
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。