可自定义图片指示器并支持自定义Tab宽度的TabLayout

最新推荐文章于 2025-07-06 16:04:17 发布

原创

最新推荐文章于 2025-07-06 16:04:17 发布 · 置顶 · 6.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#今日头条 #tablayout #自定义tab宽度

本文介绍了如何自定义TabLayout，包括使用图片作为指示器和动态调整Tab的宽度。通过继承TabLayout并监听ViewPager滑动，实现图片指示器的绘制。此外，文章提供了两种方法来修改Tab宽度：一是利用反射修改内部final变量；二是异步修改TabView的参数。文章还解决了TabLayout中气泡显示完整的问题，并提供了完整的项目源码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布

Tab栏是APP中最常用的组件，如果我们没有太多个性化需求，直接用TabLayout就可以轻松实现。

但是如果我们的产品大大说不想用一条线作指示器了，想用个图片。或者像我们产品一样，想在主页展示4个半Tab（一共5个）时，原生TabLayout就不能满足了。

而前面我发过一篇，自定义三角下标的tablayout，来实现类似于今日头条tab效果，同时还有三角下标。

那时候我是继承HorizontalScrollView，但是滑动过程中有一些bug，因为要自己处理“什么时候该滑动”和“滑动多少”，后来在项目中逻辑太复杂，就想重新推翻重写一个。

当时也想过用TabLayout，但是TabLayout的滑动指示器是矩形，项目中要使用自定义图片，所以最开始就没继续思考，直接用了HorizontalScrollView。

现在回头想想，我真是傻，我直接继承TabLayout，把图片指示器画上去不就OK了，而且绘制图片指示器的逻辑跟自定义三角下标的tablayout一文里的逻辑一样！文末会贴上工程源码。

先看看这次的整体效果：

这里写图片描述

这里再简单说一下绘制三角下标的原理。

自定义图片指示器

初始化指示器坐标：

 private void initTranslationParams(LinearLayout llTab, int screenWidth) {
        //mSlideIcon 是图片指示器
        if (mSlideIcon == null) {
            return;
        }
        tabWidth = (int) (screenWidth / (mTabVisibleCount + mLastTabVisibleRatio));
        View firstView = llTab.getChildAt(0);
        if (firstView != null) {
            //初始位置：第一个tab正下方
            this.mInitTranslationX = (firstView.getLeft() + tabWidth / 2 - this.mSlideIcon.getWidth() / 2);
            this.mInitTranslationY = (getBottom() - getTop() - this.mSlideIcon.getHeight());
        }
    }