Android: 实现自定义下划线滚动/样式 TabLayout/Animation

Regina Mills

已于 2023-05-29 17:33:18 修改

阅读量867

点赞数

文章标签： android 学习

于 2023-03-14 11:27:25 首次发布

本文链接：https://blog.csdn.net/weixin_44790378/article/details/129498196

版权

b（￣▽￣）d　每日从需求学习新知识之《TabLayout实现下划线滚动》

需求描述

需要从原来的普通点击高亮下划线变更为点击下划线具有滚动效果
like this ：
在这里插入图片描述

设计思路

Animation

因为项目原本的布局是Button，并不想修改原来的布局，所以我的设计思路是放个ImageView做下划线动画，点哪移哪，具体实施为写死X轴做平移动画（因为是车载固定位置，其他慎用）。然后找另外一个界面的大哥同步

    private void moveIndicator(int targetX, int originalX) {
        Log.d(TAG, "moveIndicator originalX: " + originalX + " targetX: " + targetX);
        //参数设置原始XY轴位置以及目标XY轴位置
        Animation animation = new TranslateAnimation(originalX, targetX, 0, 0);
        animation.setFillAfter(true);
        animation.setDuration(500);
        indicator_ll.startAnimation(animation);
    }

开发前辈👨：“会不会太复杂（ruozhi）了，用tabLayout就行”

/(ㄒoㄒ)/~~ 虽然已经用低级的方法实现了但还是选择适配一下tabLayout

TabLayout

先总结一下被坑点
① sdk版本过低使用TabLayout 无法自定义下划线（自定义导致滚动失效）
② 使用 TabLayout 字体大小失效（大小不一）

（一）初见

由于项目sdk为27，甚至无法添加这个依赖

implementation 'com.google.android.material:material:1.1.0'

在面向百度编程后，了解到必须升级到sdk28之后才能使用，但升级项目版本呢是不可能的，于是找到了另外一种可以支持sdk27使用的（以为是好的开始结果是深渊）

implementation 'com.android.support:design:27.0.0'

但使用时会出现报错信息：
Caused by: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.

解决方案：https://lizhong.blog.csdn.net/article/details/92978943

（二）又见

当引入依赖写了几个简单布局发现可以实施滚动效果之后，我就决定先把对应的逻辑代码一起改了适配，但UI给的效果图下划线是圆角的，天真的我想着方变圆能有多难啊！还是先把逻辑改了吧。
此处遇到一个文字大小不一的问题，具体解决方案为设置tabLayout的内边距为0或者负数
原理参考：https://www.jianshu.com/p/2375c27613dd

    <style name="tabLayout_item">
        <item name="tabPaddingStart">-5dp</item>
        <item name="tabPaddingEnd">-5dp</item>
    </style>

    <android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    style="@style/tabLayout_item"
    android:layout_width="600px"
    android:layout_height="84px"
    app:tabGravity="fill"
    app:tabIndicatorColor="@color/blue77"
    app:tabIndicatorHeight="4px"
    app:tabMinWidth="200px"></android.support.design.widget.TabLayou>

（三）不见

终于到最后一步：把下划线换成圆角，只需要写好对应的样式，添加以下属性

        app:tabIndicator="@drawable/xxx"

然鹅
为什么没有 tabIndicator 属性啊！？Σ(っ °Д °;)っ
我只能找到以下两个有关于修改indicator的属性，第一个是颜色，第二个是高度

    <app:tabIndicatorColor="@color/blue77"-->
    <app:tabIndicatorHeight="4px"-->

查阅资料后发现只有sdk28版本之后的支持自定义indicator样式
那真的没有办法了吗！ヽ(*。>Д<)o゜
—— 是的，没办法了（反正我是没办法了）想低版本实现的不用往后看了，如果有方法的朋友可以一起讨论一下

（四）爱见不见

在发现没有办法设置indicator样式之后我还在持续的做无用功

到底是为什么一条横线方变圆会那么难 (╯°□°）╯︵ ┻━┻

肯定有办法不升级sdk又能设置indicator样式的！我这样安慰自己┳━┳ ノ( ゜-゜ノ)

在网上查阅的资料里，无一例外的都需要设置tabIndicator去定义下划线的样式
但因为sdk版本问题，我无法设置这个属性已经想开摆了(￣_￣|||)

 app:tabIndicator="@drawable/xxx"

或者是

mTabalyout.setSelectedTabIndicator()

然后我找到了一篇利用反射的方式设置Indicator宽度的文章

既然可以设置indicator的宽度，那自然设置个样式也不难吧！于是我学着大佬的模样打开了源码，一人一杯茶一下午，拿到的属性都只能对TabView做操作，那方方的下划线是雷打不动。我恨自己不看完文章就贸然实施 (￣ ‘i ￣;)

源码分析：https://www.jianshu.com/p/83922d08250b

Indicator的宽度决定于TabView的宽度，而TabView的宽由其中的TextView决定，实质上其实是在对TextView做操作，跟下划线是一点关系没有啊！

（五）下次再见

有其他方法可以自定义下划线样式，但会使下划线滚动失效
可我就是想要滚动的效果啊不然干嘛换TabLayout (╯‵□′)╯︵┻━┻

但由于暂时没辙了所以先告一段落，恢复了最开始鸡肋的实施

放几个允许更换sdk版本的情况下的实施参考：
https://juejin.cn/post/6844903860587200526
https://blog.csdn.net/YX_BB/article/details/105925368