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

版权声明:本文为博主原创文章,未经博主允许不得转载。

TabLayout的简单使用

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

XTabLayoutDemo

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

使用XTablayout实现横向滑动菜单,可以设置文字下面导航栏的宽度

实现效果:tablayout个数为2,并且可以设置导航栏的宽度(tablayout没有这个属性,这里使用XTablayout) 导入依赖: compile 'com.androidku...
  • thw_m
  • thw_m
  • 2018年01月22日 11:18
  • 15

TabLayout:另一种Tab的实现方式

尊重原创转载请注明:From AigeStudio(http://blog.csdn.net/aigestudio)Power by Aige 侵权必究!炮兵 镇楼在5.0以前我们想要实现像网易新闻客...
  • aigestudio
  • aigestudio
  • 2015年07月30日 20:16
  • 31895

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

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

XTabLayout

  • 2017年07月11日 19:17
  • 30.02MB
  • 下载

Android 5.X TabLayout 使用简介

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

设置tablayout下划线长度的方法

写一个java类在目录下,直接复制下面的代码就可以用 public void setIndicator(TabLayout tabs, int leftDip, int rightDip) { ...
  • lovePaul77
  • lovePaul77
  • 2017年04月11日 20:29
  • 8652

android SmartTabLayout——自定义标题带的Android ViewPager

SmartTabLayout是一个自定义Android ViewPager,可以定义ViewPager的标题带,在滑动的时候给用户连续的反馈。   ogaclejapa...
  • jdsjlzx
  • jdsjlzx
  • 2015年11月21日 17:27
  • 8435

TabLayout多种使用方式

一、使用方式 (1)、导入兼容包 compile 'com.android.support:design:23.4.0' (2)新建Activity,自定义Fragment,资源文件 publi...
  • u013231041
  • u013231041
  • 2016年10月11日 18:11
  • 3020
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android——可修改字体大小和指示器长度的XTabLayout
举报原因:
原因补充:

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