Android——可修改字体大小和指示器长度的XTabLayout

原创 2016年12月22日 10:09:45

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

这里写图片描述

集成步骤:

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

这里写图片描述

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

1.1.2

兼容最低SDK版本为8

1.1.3

优化xTabDispalyNum属性功能

——————————————————————————————————————

如果对你有帮助,请点击下方Source到GitHub给个Star,谢谢!

Source

Demo

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a1533588867/article/details/53810409

XTabLayout的使用

http://blog.csdn.net/a1533588867/article/details/53810409添加依赖compile 'com.androidkun:XTabLayout:1.1....
  • wangjialinAndroid
  • wangjialinAndroid
  • 2018-03-03 11:21:35
  • 153

XTabLayout

This is a TabLayout. Its extra feature is to get the navigation bar icon out of his Parent.(这是一个增强版本...
  • mp624183768
  • mp624183768
  • 2018-02-24 18:57:37
  • 110

TabLayout的简单使用

我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合。达到很漂亮的效果。但是TabPageIndicator是第三方的,而且比较老了,当然了现在很多大神都已经开始自...
  • chenguang79
  • chenguang79
  • 2015-09-29 11:16:05
  • 138298

XTabLayout.setOnTabSelectedListener不切换fragment

项目中使用XTabLayout+ViewPager实现选项卡,XTab支持定义下滑指示器的长度,给个地址 ...
  • qq_27073205
  • qq_27073205
  • 2017-11-15 15:33:31
  • 993

Android TabLayout使用以及自定义TabLayout的item

前言TabLayout是属于Android Design Support Library中的一个控件,顶部或者底部水平的Tab布局,滑动或者点击切换的功能,今天我们简单讲解TabLayout的使用,重...
  • qiao0809
  • qiao0809
  • 2016-12-07 14:54:11
  • 14471

TabLayout简单使用

TabLayout的简单使用
  • u010846177
  • u010846177
  • 2017-02-09 21:48:57
  • 2329

XTabLayoutDemo

  • 2016年12月27日 17:47
  • 447KB
  • 下载

Tablayout的简单使用

在项目中使用viewpager的时候大多数都是和TabPagerIndicator结合使用,TabPagerIndicator是第三方的,使用起来比较繁琐; 2015谷歌大会官方发布了TabLayou...
  • Zheng_Jiao
  • Zheng_Jiao
  • 2016-09-21 22:27:28
  • 2499

Android 5.X TabLayout 使用简介

TabLayout 在开发中一般是作为选项卡,一般结合ViewPager和Frament使用。只是说明下使用的步骤,没有原理上的分析,因为这玩意真的会忘,之前刚开始用的时候,感觉自己已经会用了,但是时...
  • baidu_31956557
  • baidu_31956557
  • 2016-12-12 17:16:10
  • 363

widget.TabLayout 改变字体大小

当你看到这篇文章的时候,你也应该遇到了和我当时同样的困境,可以修改字体颜色,却无法修改字体大小,网上有很多介绍修改字体大小的方法,.其实我也找过,但是那几篇教你的,都是骗你点击量的, 这个TabLay...
  • wolfking0608
  • wolfking0608
  • 2017-09-01 17:19:12
  • 343
收藏助手
不良信息举报
您举报文章:Android——可修改字体大小和指示器长度的XTabLayout
举报原因:
原因补充:

(最多只允许输入30个字)