仿MomoTablayout走过的坑,生命不息,走坑不止

306 阅读3分钟

项目中要实现Momo tab的滑动效果,在滑动的过程中,文字逐渐变大的效果

但是UI说tab有抖动,要改

我就搜资料, SLIDINGSCALETABLAYOUT(2):解决标题文字变化抖动的问题

文章讲到,因为字号不同,文字变大宽度发生变化,看起来像是抖动,将文字装成bitmap,然后用图片展示,图片逐渐变大的过程中抖动会小很多。

在项目中实现后,效果改善不明显,图片更占用内存,不建议用图片

文字的变化只能一个像素一个像素的变化, 我自己写了一个demo

分别设置文字宽度为16.0sp 16.1sp ... 16.9sp 17.0sp

效果如下图

image.png

16.0sp和16.1sp显示的是一样的宽度是一样的 16.2sp、16.3sp、16.4sp显示的效果是一样的

打印宽度(

tv.getTextSize()

) 得到如下

2021-07-22 11:49:07.608 22068-22068/? D/FirstFragment: tv0 = 48.0
2021-07-22 11:49:07.608 22068-22068/? D/FirstFragment: tv1 = 48.0
2021-07-22 11:49:07.608 22068-22068/? D/FirstFragment: tv2 = 49.0
2021-07-22 11:49:07.608 22068-22068/? D/FirstFragment: tv3 = 49.0
2021-07-22 11:49:07.608 22068-22068/? D/FirstFragment: tv4 = 49.0
2021-07-22 11:49:07.608 22068-22068/? D/FirstFragment: tv5 = 50.0
2021-07-22 11:49:07.608 22068-22068/? D/FirstFragment: tv6 = 50.0
2021-07-22 11:49:07.608 22068-22068/? D/FirstFragment: tv7 = 50.0
2021-07-22 11:49:07.609 22068-22068/? D/FirstFragment: tv8 = 50.0
2021-07-22 11:49:07.609 22068-22068/? D/FirstFragment: tv9 = 51.0
2021-07-22 11:49:07.609 22068-22068/? D/FirstFragment: tv10 = 51.0

tv0和tv1 的宽度 确实是一样的,至于为啥是48.0,是因为16还要乘以像素密度3

16.03 = 48
16.1
3 = 48.3

16.2*3 = 48.6 四舍五入就成了49.0

所以文字最小变化单位是1像素,滑动的过程中,一个像素一个像素变化,就是抖动的效果了,当然UI说ios为啥不抖动,晕不晕。

因为其他android app的tab也是这种效果,UI就不说啥了,最后就说滑动的最后,文字还有一下抖动

我仔细看了一下,刚开始滑动时,有一点点抖动,滑动到最后页有一点点抖动

在同事的帮助下 解决方案:

  1. 将宽度由wrap_content,改成固定宽度 因为刚开始滑动时,文字变化导致了宽度变化,导致相邻的tab有左移的效果,自身也有一个缩小的效果 修改宽度显示后,可以解决该问题

  2. 因为虽然滑动结束后,文字的变化要略微之后于滑动结束,导致有抖动 改动方案:在滑动到90%时,就直接设置滑动结束的效果,这样看起来是一个同步的效果,抖动问题可解决