Glide图片加载loading——超简单实现

使用<animated-rotate>设置占位图即可；

弊端：不能实现加载进度展示；

小米6真机测试正常；虚拟机网速太快，没有动画，应该是没来得做动画，有问题可留言讨论

 val options = RequestOptions()
                    .error(R.mipmap.icon_default_img)
                    //关键是这个占位图，使用<animated-rotate/>标签;
                    //设置帧动画资源也可以，不过需要代码开启动画;
                    .placeholder(R.drawable.loading_anim)
            
            Glide.with(context)
                    .applyDefaultRequestOptions(options)
                    .load(imgUrl)
                    .into(imageView)
                   //当设置帧动画资源时自定义ImageTarget,可以实现打开帧动画；（我懒得验证,理论上可以实现）
                   //.into(LoaderImageViewTarget<Drawable>(imageView))

文件：loading_anim;该文件主要实现图片旋转动画

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/image_loader_loading"
    android:duration="200"
    android:fromDegrees="0.0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:pivotX="50.0%"
    android:pivotY="50.0%"
    android:repeatMode="restart"
    android:toDegrees="360">
</animated-rotate>

图片：image_loader_loading;

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="40dp"
    android:viewportWidth="40"
    android:viewportHeight="40">

  <path
      android:fillColor="#229EF8"
      android:fillAlpha="0.2"
      android:strokeAlpha="0.2"
      android:strokeWidth="1"
      android:pathData="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
  <path
      android:fillColor="#03A9F4"
      android:pathData="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z" />
</vector>

解题思路：

需求：图片加载时，展示loading

查资料：发现都是些自定义http拦截器，计算加载进度，自定义ProgressBar等等看着头大

思考：通过自定义ImageView实现；

查看源码：发现Glide将ImgaeView控件绑定ViewTarget；实现占位图，错误图，真图的切换；有破绽~！！！

思考：Drawable有各种Animated扩展，但是需要代码开启动画，可以通过自定义ViewTarget开启Drawable动画;so easy

进阶：用AnimatedDrawable也可以，但是不管是帧动画还是SVG动画，都是需要多张图片，这内存占用好大啊~！我这就简单的转圈圈，太浪费了！灵光一闪<animated-rotate></animated-rotate>,ImageView设置该内容后，自动开始动画；完美！

反思：原来不需要自定义ViewTarget，就可以实现简单的loading；兜了好大一个圈啊

 

扩展：既然了解了ViewTarget,那么也可以其他一些不可描述的事情；比如通过设置error占位图，实现单击重新加载功能；