XTabLayout

Introduction: Added support to modify text size and indicator width based on the original TabLayout.
More: Author   ReportBugs   
Tags:

XTabLayout 是基于 design 包中的 TabLayout 进行了功能的扩展,在保留原有功能的基础上,增加了修改选中项字体大小、修改指示器长度以及限制屏幕显示范围内显示的 Tab 个数。

github

集成步骤:

1.添加 XTabLayout 依赖库

在 app 目录下的 build.gradle 的 dependencies 中添加如下引用:

compile 'com.androidkun:XTabLayout:1.1.3'

2.在布局文件中设置 XTabLayout 属性

<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 个数

app:xTabDisplayNum="3"

或者在代码中添加

tabLayout.setxTabDisplayNum(3);//需要写在 setupWithViewPager 前
tabLayout.setupWithViewPager(viewPager);

这里我们限制为 3 个,则每个 tab 的宽度为屏幕的 1/3,显示效果如下:

github

需要注意显示的个数会受 Adapter 的 ItemCount 影响,例如 ItemCount 为 3,但是我们设置 app:xTabDisplayNum=“4”,那么显示出来的 Tab 的宽度其实是屏幕的 1/3,并非 1/4。

3.初始化

XTabLayout 的使用方式和 TabLayout 是一样的,代码如下:

 //将 TabLayout 和 ViewPager 关联起来。
XTabLayout tabLayout = (XTabLayout) findViewById(R.id.xTablayout);
tabLayout.setupWithViewPager(viewPager);

更新日志

1.0.3

修改只有一个 Tab 时 Tab 未占满屏幕的 bug。

1.0.4

增加设置 Tab 背景色的功能。

app:xTabBackgroundColor="#fff"
app:xTabSelectedBackgroundColor="#ff0"

两个属性分别对应 Tab 未选中和被选中的背景色,效果图如下:

这里写图片描述

1.0.5 & 1.0.6

增加设置指示器长度随 Tab 文本内容长度变化的功能。

使用方式:不设置 xTabIndicatorWidth 属性即可

1.0.7

增加设置标题字母大小写转换功能,默认小写不自动转大写

使用方式:在 xml 文件中添加 app:xTabTextAllCaps="false"或者在代码中调用 xTabLayout.setAllCaps(false);

1.0.8

增加设置分割线功能

这里写图片描述

使用方式:

1.xml:

app:xTabDividerWidth="2dp"
app:xTabDividerHeight="15dp"
app:xTabDividerColor="#000"
app:xTabDividerGravity="center"

不设置 xTabDividerHeight 属性或者赋值为 0 时则分割线高度占满

2.java:

tabLayout.setDividerSize(5,20);
tabLayout.setDividerColor(Color.BLACK);
tabLayout.setDividerGravity(DividerDrawable.CENTER);

setDividerSize 方法中第二个参数为高度,如果设置为 0 时则分割线高度占满

1.0.9

优化设置指示器长度功能

使用方式:

a.明确指定指示器为某个长度则设置 xTabIndicatorWidth

b.指定指示器长度跟随文本变化则设置 xTabDividerWidthWidthText

c.如果需要指示器长度占满,则两个属性都不设置,默认占满。

1.1.0

增加设置字体粗体功能

这里写图片描述

使用方式:

    <!-- 设置选中 Tab 的文本是否粗体显示-->
    app:xTabTextSelectedBold="true"
      <!-- 设置未选中 Tab 的文本是否粗体显示-->
    app:xTabTextBold="true"

CSDN 地址

Support Me
Apps
About Me
Google+: Trinea trinea
GitHub: Trinea