神奇ProgressBar——添加一个,显示四个,这是什么鬼?
神奇ProgressBar——添加一个,显示四个,这是什么鬼?
微笑的江豚 发表于3个月前
神奇ProgressBar——添加一个,显示四个,这是什么鬼?
  • 发表于 3个月前
  • 阅读 17
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: 之前产品找我,说是在🔨T1手机上有个页面会同时显示4朵菊花,其他手机正常。我略看了一下,4寸小屏幕,安卓4.0系统,出问题我也懒得管了。今天产品又找我,新买的三星S6又出了这问题!尼玛S6是前年旗舰啊,这问题就严重了,可是我明明只向页面上添加了一个progressBar啊,这是什么鬼?

定位bug:

1.确认我确实是在布局文件里面添加了一个PB,并没有从代码里动态添加,这就排除了动态添加错误问题。

2.PB是添加在fragment中的,通过调试,确认了以下结果:

  • 只new了一个activity出来
  • activity只走了一遍生命周期
  • 只new了一个fragment出来
  • fragment只走了一遍生命周期

这又排除了多容器创建和页面多次重绘导致PB被重复创建的问题。

3.这个PB根据需要,做成了类似ios上那种菊花样式(Ios的UI以现在来看是在太丑而且恶俗),实现原理为:

 <ProgressBar
        android:id="@+id/pb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:indeterminateDrawable="@drawable/loading" />

loading.xml

<?xml version="1.0" encoding="UTF-8"?>
<animation-list android:oneshot="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:duration="150" android:drawable="@drawable/loading_01" />
    <item android:duration="150" android:drawable="@drawable/loading_02" />
    <item android:duration="150" android:drawable="@drawable/loading_03" />
    <item android:duration="150" android:drawable="@drawable/loading_04" />
    <item android:duration="150" android:drawable="@drawable/loading_05" />
    <item android:duration="150" android:drawable="@drawable/loading_06" />
    <item android:duration="150" android:drawable="@drawable/loading_07" />
    <item android:duration="150" android:drawable="@drawable/loading_08" />
    <item android:duration="150" android:drawable="@drawable/loading_09" />
    <item android:duration="150" android:drawable="@drawable/loading_10" />
    <item android:duration="150" android:drawable="@drawable/loading_11" />
    <item android:duration="150" android:drawable="@drawable/loading_12" />
</animation-list>

这里面的loading_01到loading_12都是各个时间段的菊花图片,这里的意思就是每个图片显示150毫秒后换到下一张图片。这样的显示效果是最像ios菊花的。

我尝试把android:indeterminateDrawable="@drawable/loading"属性去掉后,这个PB就恢复了android默认样式,而且在垃圾牌S6手机上显示就正常了,所以我就定位bug的源头就在这个属性。

经过搜索,了解到indeterminateDrawable这个属性与ProgressDrawable属性相对立,这个属性的意思就是设置「忽略PB的【进度】功能」的图片或动画,而ProgressDrawable属性则是设置「进度」图片和动画。

研究bug:

经过以上bug定位三步走,我定位到了引发bug的代码,但是为什么设置indeterminateDrawable属性在其他手机上正常而在垃圾S6上就出bug?

经过观察,发现在S6上PB要比在其他手机上小很多,我给PB加了一个红色背景,然后把wrap_content改为定值,从40dp开始逐渐加大,发现layout_width越大,里面的菊花就越多,而且菊花的尺寸并不随PB的尺寸一起变化,那么就可以知道是菊花图片尺寸的问题导致的。从而断定,loading.xml里面的item,并不是每150毫秒会以下一张图片替换上一张,也不是覆盖上一张,而是每150毫秒就会添加下一张图片,这些图片是替换、堆叠还是并列,都是由图片的容器PB来决定的!

那么为什么其他手机(小米、华为、乐视、oppo)显示正常呢,经过百度,原来我手里的这些国产手机屏幕的分辨率是1080P的全高清屏,分辨率为1080*1920,而出问题的这个垃圾6的分辨率为:2560*1440,属于非主流屏幕,我从网上下载的菊花图都是适配主流屏幕的,放到非主流屏幕上就会显示不正常!

解决bug:

终于找到了bug原因,下一步是考虑怎么解决:

  • 首先通过源码,了解到PB并没有提供让图片拉伸、居中这类scale方法,不能像ImageView一样方便的设置图片展示。
  • 然后考虑是否让UI妹子照猫画虎给我重做?这样她需要做好多尺寸让我一个个试,然后再用试好的尺寸弄出12朵菊花。。这种下流的事不能让妹子干,而且为了非主流的垃圾6改图会影响到主流屏幕适配。
  • 最后考虑换种方式实现ios菊花样式,于是有了:
<?xml version="1.0" encoding="UTF-8"?>
<!--<animation-list android:oneshot="false"-->
    <!--xmlns:android="http://schemas.android.com/apk/res/android">-->
    <!--<item android:duration="150" android:drawable="@drawable/loading_01" />-->
    <!--<item android:duration="150" android:drawable="@drawable/loading_02" />-->
    <!--<item android:duration="150" android:drawable="@drawable/loading_03" />-->
    <!--<item android:duration="150" android:drawable="@drawable/loading_04" />-->
    <!--<item android:duration="150" android:drawable="@drawable/loading_05" />-->
    <!--<item android:duration="150" android:drawable="@drawable/loading_06" />-->
    <!--<item android:duration="150" android:drawable="@drawable/loading_07" />-->
    <!--<item android:duration="150" android:drawable="@drawable/loading_08" />-->
    <!--<item android:duration="150" android:drawable="@drawable/loading_09" />-->
    <!--<item android:duration="150" android:drawable="@drawable/loading_10" />-->
    <!--<item android:duration="150" android:drawable="@drawable/loading_11" />-->
    <!--<item android:duration="150" android:drawable="@drawable/loading_12" />-->
<!--</animation-list>-->

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <rotate
            android:drawable="@drawable/loading_01"
            android:fromDegrees="0.0"
            android:pivotX="50.0%"
            android:pivotY="50.0%"
            android:toDegrees="1000" />
    </item>

</layer-list>

原理就是用动画让一张菊花不停的转,这样实现的效果其实更顺滑,也有更低的资源消耗,只是效果上不像真正的iOS菊花动起来那种一卡一卡的感觉。

此时在垃圾6上只会显示一朵菊花,而且这张图片也会自动在PB里填充居中,效果比较满意!

共有 人打赏支持
微笑的江豚
粉丝 23
博文 423
码字总数 47615
作品 2
×
微笑的江豚
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: