XTabLayout——可修改选中项字体大小和指示器长度的TabLayout
XTabLayout是基于design包中的TabLayout进行了功能的扩展,在保留原有功能的基础上,增加了修改选中项字体大小、修改指示器长度以及限制屏幕显示范围内显示的Tab个数。
![github](https://camo.githubusercontent.com/05b042d55eeea1f13c813b24e26cab28413740108cf0461343bfc9390a58b2f1/687474703a2f2f696d672e626c6f672e6373646e2e6e65742f32303136313232323039353731393333303f77617465726d61726b2f322f746578742f6148523063446f764c324a736232637559334e6b626935755a585176595445314d7a4d314f4467344e6a633d2f666f6e742f3561364c354c32542f666f6e7473697a652f3430302f66696c6c2f49304a42516b46434d413d3d2f646973736f6c76652f37302f677261766974792f536f75746845617374)
在app目录下的build.gradle的dependencies中添加如下引用:
compile 'com.androidkun:XTabLayout:1.1.3'
<com.androidkun.xtablayout.XTabLayout
android:id="@+id/xTablayout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:xTabMode="scrollable"
app:xTabIndicatorColor="#0f0"
app:xTabIndicatorHeight="4dp"
app:xTabIndicatorWidth="15dp"
app:xTabSelectedTextColor="#f00"
app:xTabTextColor="#000"
app:xTabTextSize="15sp"
app:xTabSelectedTextSize="20sp"/>
TabLayout有的属性,在XTabLayout中都会有,属性名称都是前面加个x,后面的t变成大写。
其中增加了xTabIndicatorWidth用于设置指示器长度,xTabTextSize用于设置未选中项的字体大小,xTabSelectedTextSize用于设置选中项的字体大小。
此外1.0.1版本中添加如下属性可以设置屏幕范围内显示的Tab个数
tabLayout.setxTabDisplayNum(3);//需要写在setupWithViewPager前
tabLayout.setupWithViewPager(viewPager);
这里我们限制为3个,则每个tab的宽度为屏幕的1/3,显示效果如下:
![github](https://camo.githubusercontent.com/e44aa14002ec938b51d9dcb232ec145615e493a889a5dc0e16ea04178191b47c/687474703a2f2f696d672e626c6f672e6373646e2e6e65742f32303136313232323135303734333836363f77617465726d61726b2f322f746578742f6148523063446f764c324a736232637559334e6b626935755a585176595445314d7a4d314f4467344e6a633d2f666f6e742f3561364c354c32542f666f6e7473697a652f3430302f66696c6c2f49304a42516b46434d413d3d2f646973736f6c76652f37302f677261766974792f536f75746845617374)
需要注意显示的个数会受Adapter的ItemCount影响,例如ItemCount为3,但是我们设置app:xTabDisplayNum=“4”,那么显示出来的Tab的宽度其实是屏幕的1/3,并非1/4。
XTabLayout的使用方式和TabLayout是一样的,代码如下:
//将TabLayout和ViewPager关联起来。
XTabLayout tabLayout = (XTabLayout) findViewById(R.id.xTablayout);
tabLayout.setupWithViewPager(viewPager);
app:xTabBackgroundColor="#fff"
app:xTabSelectedBackgroundColor="#ff0"
两个属性分别对应Tab未选中和被选中的背景色,效果图如下:
![这里写图片描述](https://camo.githubusercontent.com/954d690e4bfc86c15f505f5fd82f852555b9532532ed4a36b1ec4a576c17779f/687474703a2f2f696d672e626c6f672e6373646e2e6e65742f32303137303332393132323535343138383f77617465726d61726b2f322f746578742f6148523063446f764c324a736232637559334e6b626935755a585176595445314d7a4d314f4467344e6a633d2f666f6e742f3561364c354c32542f666f6e7473697a652f3430302f66696c6c2f49304a42516b46434d413d3d2f646973736f6c76652f37302f677261766974792f536f75746845617374)
增加设置指示器长度随Tab文本内容长度变化的功能。
使用方式:不设置xTabIndicatorWidth属性即可
增加设置标题字母大小写转换功能,默认小写不自动转大写
使用方式:在xml文件中添加app:xTabTextAllCaps="false"或者在代码中调用xTabLayout.setAllCaps(false);
![这里写图片描述](https://camo.githubusercontent.com/5076c82702b1f44f10f4bebeee7d6401476c563b2da6fc0da68a083b49c15199/687474703a2f2f696d672e626c6f672e6373646e2e6e65742f32303137303432363132333833373530343f77617465726d61726b2f322f746578742f6148523063446f764c324a736232637559334e6b626935755a585176595445314d7a4d314f4467344e6a633d2f666f6e742f3561364c354c32542f666f6e7473697a652f3430302f66696c6c2f49304a42516b46434d413d3d2f646973736f6c76652f37302f677261766974792f536f75746845617374)
app:xTabDividerWidth="2dp"
app:xTabDividerHeight="15dp"
app:xTabDividerColor="#000"
app:xTabDividerGravity="center"
不设置xTabDividerHeight属性或者赋值为0时则分割线高度占满
tabLayout.setDividerSize(5,20);
tabLayout.setDividerColor(Color.BLACK);
tabLayout.setDividerGravity(DividerDrawable.CENTER);
setDividerSize方法中第二个参数为高度,如果设置为0时则分割线高度占满
a.明确指定指示器为某个长度则设置xTabIndicatorWidth
b.指定指示器长度跟随文本变化则设置xTabDividerWidthWidthText
c.如果需要指示器长度占满,则两个属性都不设置,默认占满。
![这里写图片描述](https://camo.githubusercontent.com/d22cb8aca310acf964d645ed313b520cdc5f145972c3d0cac3650c4bc127ccf9/687474703a2f2f696d672e626c6f672e6373646e2e6e65742f32303137303631353132333434333137393f77617465726d61726b2f322f746578742f6148523063446f764c324a736232637559334e6b626935755a585176595445314d7a4d314f4467344e6a633d2f666f6e742f3561364c354c32542f666f6e7473697a652f3430302f66696c6c2f49304a42516b46434d413d3d2f646973736f6c76652f37302f677261766974792f536f75746845617374)
<!-- 设置选中Tab的文本是否粗体显示-->
app:xTabTextSelectedBold="true"
<!-- 设置未选中Tab的文本是否粗体显示-->
app:xTabTextBold="true"