Project Url: JasonGaoH/XTabLayout
Introduction: TabLayout 的增强版,添加 TabLayout Indicator 宽度的自定义,添加仿微博,即刻等导航条的动画效果。
More: Author   ReportBugs   

支持 TabLayout 的 Indicator 的 width 的自定义

新增 Indicator 的仿微博导航条效果


能够自定义 TabLayout 宽度的效果图:

  • 添加 x_tabIndicatorWidth 来支持 TabLayout 的 Indicator 的 width 的自定义,默认宽度 28dp
  • 添加 x_tabIndicatorAnimation 来控制是否支持类似微博的导航条动效,默认 false 不支持
  • 支持在 Tab 上加入红点和红点数字

在对比几种修改 TabLayout 的 Indicator 的 width 的方法后,决定采用修改源码的方法来实现 Indicator 宽度的自定义。(主要因为两种反射版本会压缩 Tab 边距的方式。)

XTabLayout 的属性,在全部支持原生所有属性的情况添加了 x_tabIndicatorWidth 和 x_tabIndicatorAnimation 属性,并且因为是在原生 TabLayout 上的修改,原生 TabLayout 的 API 调用方式都支持。

<declare-styleable name="XTabLayout">
        <attr name="x_tabIndicatorWidth" format="dimension"/>
        <attr name="x_tabIndicatorAnimation" format="boolean"/>
        <attr name="x_tabIndicatorColor" format="color"/>
        <attr name="x_tabIndicatorHeight" format="dimension"/>
        <attr name="x_tabContentStart" format="dimension"/>
        <attr name="x_tabBackground" format="reference"/>
        <attr name="x_tabMode">
            <enum name="scrollable" value="0"/>
            <enum name="fixed" value="1"/>
        <attr name="x_tabGravity">
            <enum name="fill" value="0"/>
            <enum name="center" value="1"/>
        <attr name="x_tabMinWidth" format="dimension"/>
        <attr name="x_tabMaxWidth" format="dimension"/>
        <attr name="x_tabTextAppearance" format="reference"/>
        <attr name="x_tabTextColor" format="color"/>
        <attr name="x_tabSelectedTextColor" format="color"/>
        <attr name="x_tabPaddingStart" format="dimension"/>
        <attr name="x_tabPaddingTop" format="dimension"/>
        <attr name="x_tabPaddingEnd" format="dimension"/>
        <attr name="x_tabPaddingBottom" format="dimension"/>
        <attr name="x_tabPadding" format="dimension"/>

详情请见博客链接:关于 TabLayout 的 indicator 宽度的一次探索





Copyright 2018 JasonGaoH

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at


Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions

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