简单说说自定义TabLayout的分隔符

想必关于使用自定义 TabLayout 来作为ViewPager 的指示器，大家都已经很熟悉了吧，如果还不了解自定义 TabLayout，可以看看 Showdy 写的 TabLayout之自定义样式。

本文呢，不再过多的复述如何自定义 TabLayout 的样式相关问题，而是简单说说如何自定义 TabLayout 的分隔符 Divider。

如下图所示，是需要实现的页面效果：

页面效果

可以看到跟一般的 ViewPager 的Tab 指示器不同，没有文字下方的指示条，取而代之的是 Tab 之间的分隔符，并且这个分隔符是有上下间距要求的。

废话不错说，直接 show me the fxcking code ！！！

activity中的tab：

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="32dp"
        android:background="#ffffff"   //设置背景色
        app:tabIndicatorHeight="0dp"   //横线指示条高度设为0dp
        app:tabPaddingEnd="20dp"
        app:tabPaddingStart="20dp"
        app:tabSelectedTextColor="#FEDA44" //tab被选中的颜色
        app:tabTextColor="#000000">   //未被选中的文字颜色
    </android.support.design.widget.TabLayout>

分隔符 Divider 的自定义样式文件 divider_vertical.xml（位于 drawable 文件夹下）：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#EDECEB"/>
    <size android:width="1dp"/>
    <padding android:bottom="9dp"/>
    <padding android:top="9dp"/>
</shape>

在 Java 文件中设置：

mTabs.setTabMode(TabLayout.MODE_FIXED); //当Tab较少，且占满整个屏幕时可以使用这种模式；
mTabs.setTabGravity(TabLayout.GRAVITY_FILL); //配合TabMode使用，用于让每个标签平分TabLayout的全部宽度
LinearLayout linearLayout = (LinearLayout) mTabs.getChildAt(0);
linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.drawable.divider_vertical)); //设置分割线的drawable
linearLayout.setDividerPadding(SizeUtils.dip2px(this, 9));   //该方法传入的参数为像素的大小，故需要使用dp转px的方法

至此我们就实现了自定义 TabLayout 的分隔线的方法了，大家是不是也发现了 TabLayout 的强大之处了～本次的文章很短，感觉还是很有用的，如果哪位小伙伴遇到了这样的问题，通过本文帮你解决了疑惑，请点个喜欢吧～

简单说说自定义TabLayout的分隔符

猜你喜欢