小菜在向朋友推荐了自己修改封装的仿网易顶部滑动标题栏 TabSlideLayout 滑动内容可以是文字也可以是网络图标,其原型为 FlycoTabLayout,但是因为年代很久远,小菜当时技术太渣,存在一些小问题,后期做过一些优化,今天趁机会整理一下。
优化内容:
- 网络状态不佳情况下,图片加载缓慢,有时加载不出来,如下图:
-
在部分三星手机上展示效果不佳,图片显示很小,如下图:
- 可以动态设置图片是否绘色,因有个别需求用户要展示的是彩色的漂亮图标,强制绘色便是画蛇添足。
问题查找:
问题一 的出现主要是因为图片加载方式不太合理,小菜以前用的是 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 方式在部分三星手机上图不如华为手机大,小纠结。
解决方案:
- 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);
}
});
- 在 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;
}
小菜认为,优化是一个漫长的过程,是随着经验的积累与实际效果的反馈共同进行的,在使用过程中发现不合理的地方还请各位多多指教。
下面的是小菜的公众号,欢迎闲来吐槽哦~