eoe 移动开发者论坛

 找回密码
 加入eoe

QQ登录

只需一步,快速开始

查看: 180|回复: 0
收起左侧

[Android实例] android XTabLayout自定义tab标签样式

[复制链接]

签到天数: 1 天

连续签到: 1 天

[LV.1]初来乍到

4

主题

100

帖子

263

e币
发表于 2017-7-14 23:41:54 | 显示全部楼层 |阅读模式

没有eoe的账号,级别还太低,出门如何吹牛逼?

您需要 登录 才可以下载或查看,没有帐号?加入eoe

x
本帖最后由 mfx_199002 于 2017-7-14 23:56 编辑

XTabLayout——可修改选中项字体大小和指示器长度的TabLayoutXTabLayout是基于design包中的TabLayout进行了功能的扩展,在保留原有功能的基础上,增加了修改选中项字体大小、修改指示器长度以及限制屏幕显示范围内显示的Tab个数。集成步骤:1.添加XTabLayout依赖库在app目录下的build.gradle的dependencies中添加如下引用:      compile 'com.androidkun:XTabLayout:1.1.2'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,显示效果如下:
需要注意显示的个数会受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.明确指定指示器为某个长度则设置xTabIndicatorWidthb.指定指示器长度跟随文本变化则设置xTabDividerWidthWidthTextc.如果需要指示器长度占满,则两个属性都不设置,默认占满。1.1.0增加设置字体粗体功能
使用方式:   

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




*滑动验证:
您需要登录后才可以回帖 登录 | 加入eoe

本版积分规则

推荐阅读
赞助商们

QQ|联系我们|小黑屋|手机版|eoe 移动开发者论坛 ( 京ICP备11018032 京公网安11010802020210  

GMT+8, 2017-11-24 20:41 , Processed in 0.552799 second(s), 40 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表
关闭

扫一扫 关注eoe官方微信