为了账号安全,请及时绑定邮箱和手机立即绑定

Android 优化个人封装新闻可滑动标题栏 TabLayout (文字或图标)

标签:
Android

 小菜在向朋友推荐了自己修改封装的顶部滑动标题栏 TabSlideLayout 滑动内容可以是文字也可以是网络图标,其原型为 FlycoTabLayout,但是因为年代很久远,小菜当时技术太渣,存在一些小问题,后期做过一些优化,今天趁机会整理一下。


优化内容:

  1. 网络状态不佳情况下,图片加载缓慢,有时加载不出来,如下图:

  2. 在部分三星手机上展示效果不佳,图片显示很小,如下图:


    webp

  3. 可以动态设置图片是否绘色,因有个别需求用户要展示的是彩色的漂亮图标,强制绘色便是画蛇添足。


问题查找:

      问题一 的出现主要是因为图片加载方式不太合理,小菜以前用的是 Glide 中 BitmapImageViewTarget(iv) 方式,现在更换为 SimpleTarget<Bitmap>() 方式,两者的区别小菜还不能简洁明了的说清楚,有兴趣的朋友可以详细查看一下源码。
      小菜的理解是,BitmapImageViewTarget() 方式优点:对于加载大图的整个过程处理比较好,可以设置加载过程中进度条等展示效果;而且该方式可以加载 Gif 图,也可以对 Gif 图的第一帧图进行绘色,但是没有 Gif 动画效果,就像一张普通的 png 图;缺点则是整体的处理时间较长,在网络状态不佳情况下有可能会加载失败。SimpleTarget() 方式直接优点是图片加载速度快,图片的大小根据 ImagView 来决定,不用重新计算;缺点是直接返回的 Bitmap() 不能加载 Gif 图。综合考虑,小菜觉得 SimpleTarget() 方式较合适。
      问题二 的出现主要针对不同手机的适配,问题同样出在 Glide 图片加载部分,以前小菜用的 BitmapImageViewTarget() 并计算图片的宽高,现更改为 SimpleTarget() 方式解决。
      问题三 的出现只是因为当时考虑不周全,可以在 attrs 中添加一个属性 is_change_color,并在图片绘色过程中处理一下即可,同时设置 set/get 方法,可以根据业务需求动态修改,详情请直接跳转 源码 Demo


      Tips:针对于问题二,图片布局中 ImageView 建议设置为 match_parent 方式,因为我们用户觉得 wrap_content 方式在部分三星手机上图不如华为手机大,小纠结。

webp



解决方案:

  1. Glide 加载方式更换为 SimpleTarget(),如下:

Glide.with(mContext).load(title).asBitmap()
        .placeholder(R.mipmap.top_default_bg).diskCacheStrategy(DiskCacheStrategy.SOURCE)
        .into(new SimpleTarget<Bitmap>() {            @Override
            public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {                if (mChangeColor) {
                    resource = BitmapUtil.tintBitmap(resource, (position == 0) ? mTextSelectColor : mTextUnselectColor);
                }
                iv_tab_title.setImageBitmap(resource);
            }
        });
  1. 在 attrs 中添加是否绘制图片颜色的属性,可以在 xml 或 Java 代码中进行设置:

<!-- 设置是否绘制图片颜色 --><attr name="tl_is_change_color" format="boolean" />
mChangeColor = ta.getBoolean(R.styleable.SlidingTabLayout_tl_is_change_color, true);public boolean isChangeColor() {    return mChangeColor;
}public void setChangeColor(boolean mChangeColor) {    this.mChangeColor = mChangeColor;
}

webp

图标绘制统一颜色


webp

图标不绘制颜色.jpg

      小菜认为,优化是一个漫长的过程,是随着经验的积累与实际效果的反馈共同进行的,在使用过程中发现不合理的地方还请各位多多指教。



作者:老菜和尚


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
移动开发工程师
手记
粉丝
165
获赞与收藏
165

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消