Android组件化开发(三)--图片加载组件封装

🔥 Hi,我是小余。

本文已收录到 GitHub · Androider-Planet 中。这里有 Android 进阶成长知识体系,关注公众号 小余的自习室,在成功的路上不迷路!

前言

前面一篇文章我们做了一个组件化网络请求库:lib_network的封装

相关文章:
Android组件化开发(二)–网络请求组件封装

今天我们来封装一个图片加载库lib_image_loader

其实封装思想都是一样的:
主要还是根据三步走:

  • 1.需求分析
  • 2.技术选型
  • 3.根据1和2进行类库封装

1.需求分析

  • 1.首先他是一个图片加载库

那就要考虑到我们需要加载哪些种类的图片?pngjpggifwebp?balabala。。

  • 2.具体到我们项目中:

常见图片加载场景

   - 1.对ImageView设置src?
   - 2.对View或者ViewGroup设置背景色。?
   - 3.对目标对象设置图片,设置到一个Target中,设置通知栏的图片信息?
   - 4.设置通知栏的图片信息
   - 5.显示圆角图片
  • 3.多张图片可以并发加载

  • 4.图片自适应我们的控件

  • 5.api使用简单,侵入性低

2.技术选型

有了第一步的需求分析:我们再来选择对应的技术

如何选择合适的类库进行封装?

一般图片加载库,有GlideFrescoPicasso,而GlidePicasso一种升级版本,可以只看Glide就可以,
为了选择合适的类库,本人去Glide和Fresco官网查看了下他们的优缺点:

Fresco最大的优点是在5.0以下机型,将Bitmap的字节数组放在一个特殊的位置,
而不占用中的资源,这样就可以避免OOM的发生,但是目前5.0以下的设备占比已经很少了,所以这个优点可以忽略不计。

其他方面也基本能满足我们的需求,都支持gifwebp格式的图片数据,

但是Glide相比较Fresco来说,api使用简单,对业务代码没有侵入性,而Fresco需要使用他的特定控件才能使用,且需要在application中做初始化操作,有一定的侵入性

基于以上几点,笔者考虑使用Glide来封装我们的类库。

如果有想自己开发一套更加原生的图片加载库的同学,可以参考这篇文章:

面试官:让你设计一套图片加载框架,你会怎么设计?

但是不推荐大家去重复造轮子,没必要,但是你必须了解其内部原理。

封装

有了前两个步骤,我们就可以开始我们的类库封装了。
我们要封装哪些东西呢?还是根据我们的需求来

  • 1.对ImageView设置src
  • 2.对View或者ViewGroup设置背景色
  • 3.对目标对象设置图片,设置到一个Target中或者说是直接回调一个Bitmap给上层
  • 4.设置通知栏的图片信息
  • 5.显示圆角图片

基于以上需求笔者做了以下封装

1.对ImageView设置src
/**创建一个设置ImageView src的接口
     * @param imageView
     * @param url
     */
    public void displayImageForIView(ImageView imageView, String url, CustomRequestListener listener){
        Glide.with(imageView.getContext())
                .load(url)
                .apply(initCommonOptions())
                .into(imageView);
    }
2.对View或者ViewGroup设置背景色
/**创建一个设置View背景的接口
     * @param view
     * @param url
     * @param listener
     */
    public void displayImageForView(final View view, String url,CustomRequestListener listener){
        Glide.with(view.getContext())
                .asBitmap()
                .load(url)
                .listener(listener)
                .apply(initCommonOptions())
                .into(initCustomViewTarget(view));
    }
3.对目标对象设置图片,设置到一个Target中或者说是直接回调一个Bitmap给上层,用户希望自己处理Bitmap显示
/**回调一个Bitmap给上层
     */
    public void displayImageForCallBack(Context context, String url, BitmapRequestListener listener){
        Glide.with(context)
                .asBitmap()
                .load(url)
                .into(new JustReadyTarget(listener));

    }
4.设置通知栏的图片信息,一般用在音乐播放器等场景
/**创建一个给通知栏RemoteViews设置src的接口
     * @param context
     * @param remoteViews
     * @param id
     * @param notification
     * @param notificationId
     * @param url
     */
    public void displayImageForNotification(Context context, RemoteViews remoteViews, int id,
                                            Notification notification,int notificationId,String url){
        Glide.with(context)
                .asBitmap()
                .load(url)
                .apply(initCommonOptions())
                .into(new NotificationTarget(context,id,remoteViews,notification,notificationId));

    }
5.显示圆角图片
/**给ImageVIew设置一个圆形的view
     * @param imageView
     * @param url
     */
    public void displayImageForCircleView(ImageView imageView,String url){
        Glide.with(imageView)
                .asBitmap()
                .load(url)
                .into(new BitmapImageViewTarget(imageView){
                    @Override
                    protected void setResource(Bitmap resource) {
                        RoundedBitmapDrawable drawable = RoundedBitmapDrawableFactory
                                .create(imageView.getResources(),resource);
                        drawable.setCircular(true);
                        imageView.setImageDrawable(drawable);
                    }
                });
    }

这里对常见的一些需求做了封装,完整代码可以看demo

GitHub - ByteYuhb/anna_music_app

总结

此篇文章主要是对组件化框架中功能组件:图片加载框架的封装,

对于大部分类库的封装都可以使用我们上面的思路,再结合maven私服的使用。可以很好的将我们代码作为一个组件共享给开发同事使用

组件化道路长远,到目前为止我们封装两个功能框架:网络请求库和图片加载库,后面会不定期对其他类库进行封装,最后整合成一个完整的组件化框架

组件化开发.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据提供的引用内容,Vue封装图片加载组件的实现原理如下: 1. 首先,通过全局注册组件,将懒加载组件注册到Vue中。这个懒加载组件是一个在页面加载时不立即显示的占位组件,用于提升网页性能和用户体验。 2. 然后,使用自定义指令来实现懒加载功能。这个指令可以应用在需要懒加载图片元素上,例如`<img v-lazy="item.src" alt="" />`。 3. 在指令的逻辑中,使用`useIntersectionObserver`函数来监听图片元素是否在可视区域内。当图片元素进入可视区域时,触发回调函数。 4. 在回调函数中,停止监听,给图片元素设置`src`属性,值为要加载图片的路径。如果加载失败,显示默认的图片。 5. 最后,在Vue的安装方法中,将懒加载组件和指令注册到Vue中,使其可以在整个Vue应用中使用。 综上所述,以上是Vue封装图片加载组件的实现原理。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue中实现图片加载的方法(一)](https://blog.csdn.net/weixin_54145360/article/details/127789692)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [【Vue3】 vue3图片加载-封装自定义指令](https://blog.csdn.net/weixin_46862327/article/details/129035539)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值