XTabLayout的使用

XTabLayout的使用

XTabLayout是基于design包中的TabLayout进行了功能的扩展,在保留原有功能的基础上,增加了修改选中项字体大小、字体粗体、字体和指示器颜色、分割线、指示器长度以及限制屏幕显示范围内显示的Tab个数等功能。先看效果图:


效果图

集成步骤:

1.添加XTabLayout依赖库

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

compile 'com.androidkun:XTabLayout:1.1.3'

compile 'com.androidkun:XTabLayout:1.1.3'

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

<com.androidkun.xtablayout.xtablayout 
   android:id="@+id/xTablayout"
   android:layout_height="50dp"
   android:layout_width="match_parent"
   app:xtabindicatorcolor="#0f0"
   app:xtabindicatorheight="4dp"
   app:xtabindicatorwidth="15dp"
   app:xtabmode="scrollable"
   app:xtabselectedtextcolor="#f00"
   app:xtabselectedtextsize="20sp"
   app:xtabtextcolor="#000"
   app:xtabtextsize="15sp">
</com.androidkun.xtablayout.xtablayout>

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,显示效果如下:

20180507093920536.png

需要注意显示的个数会受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

增加设置字体粗体功能

qweq.png

使用方式:

<!-- 设置选中Tab的文本是否粗体显示-->

`app:xTabTextSelectedBold=``"true"`

<!-- 设置未选中Tab的文本是否粗体显示-->

`app:xTabTextBold=``"true"`

1.1.2

兼容最低SDK版本为8

1.1.3

优化xTabDispalyNum属性功能

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,723评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,003评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,512评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,825评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,874评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,841评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,812评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,582评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,033评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,158评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,789评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2 352

推荐阅读更多精彩内容

  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 10,949评论 6 13
  • 1、需求 TabLayout+Viewpager+Fragment,在tab中显示一个红点,用来标识是否有新消息未...
    陈晓松快点跑阅读 6,015评论 0 1
  • 1、窗体 1、常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体。 ...
    Moment__格调阅读 4,545评论 0 11
  • 一、简述 TabLayout是Android Support Design库的新控件,可以用来实现开源框架View...
    CQ_TYL阅读 1,651评论 0 5
  • 1.午时茶 出门必备。小孩子稍微着凉,打喷嚏,有风寒感冒的症状时,冲一包趁热喝,甜甜的不难下口 2.小儿豉翘清热颗...
    咕噜大人阅读 1,948评论 1 0