想必关于使用自定义 TabLayout 来作为ViewPager 的指示器,大家都已经很熟悉了吧,如果还不了解自定义 TabLayout,可以看看 Showdy 写的 TabLayout之自定义样式 。
本文呢,不再过多的复述如何自定义 TabLayout 的样式相关问题,而是简单说说如何自定义 TabLayout 的分隔符 Divider。
如下图所示,是需要实现的页面效果:
可以看到跟一般的 ViewPager 的Tab 指示器不同,没有文字下方的指示条,取而代之的是 Tab 之间的分隔符,并且这个分隔符是有上下间距要求的。
废话不错说,直接 show me the fxcking code !!!
activity中的tab:
1 2 3 4 5 6 7 8 9 10 11
| <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 文件夹下):
1 2 3 4 5 6 7
| <?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 文件中设置:
1 2 3 4 5 6
| mTabs.setTabMode(TabLayout.MODE_FIXED); mTabs.setTabGravity(TabLayout.GRAVITY_FILL); LinearLayout linearLayout = (LinearLayout) mTabs.getChildAt(0); linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE); linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.drawable.divider_vertical)); linearLayout.setDividerPadding(SizeUtils.dip2px(this, 9));
|
至此我们就实现了自定义 TabLayout 的风格线的方法了,大家是不是也发现了 TabLayout 的强大之处了~本次的文章很短,感觉还是很有用的,如果哪位小伙伴遇到了这样的问题,通过本文帮你解决了疑惑,请点个喜欢吧~