Android加载svg图片

Android Glide4.0加载svg图片

由于公司要求,需要加载网络请求的svg格式图片,所以研究了半天,百度了不少文档,也没能完成,但贼心不死,始终感觉Glide还是可以解决问题的,于是最终找到了这篇,解决了困扰我半天的问题,在这里感谢大神的文章了.

实现原理

1. Glide项目中给出了加载SVG的示例，通过自定义Module在Registry中注册新的处理对象，使用androidsvg提供的方法来将InputStream转为SVG对象，然后把SVG对象转为PictureDrawable加载到目标target中。

1、添加依赖

dependencies {
    implementation 'com.github.bumptech.glide:glide:4.9.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'
    implementation 'com.caverock:androidsvg-aar:1.3'
    implementation "com.facebook.fresco:animated-webp:1.9.0"
}
1
2
3
4
5
6

2、SVG

1. 自定义ResourceDecoder，将InputStream转为SVG对象：

import android.support.annotation.NonNull;

import com.bumptech.glide.load.Options;
import com.bumptech.glide.load.ResourceDecoder;
import com.bumptech.glide.load.engine.Resource;
import com.bumptech.glide.load.resource.SimpleResource;
import com.caverock.androidsvg.SVG;
import com.caverock.androidsvg.SVGParseException;

import java.io.IOException;
import java.io.InputStream;

/**
 1. Decodes an SVG internal representation from an {@link InputStream}.
 */
public class SvgDecoder implements ResourceDecoder<InputStream, SVG> {

  @Override
  public boolean handles(@NonNull InputStream source, @NonNull Options options) {
    // TODO: Can we tell?
    return true;
  }

  public Resource<SVG> decode(@NonNull InputStream source, int width, int height,
      @NonNull Options options)
      throws IOException {
    try {
      SVG svg = SVG.getFromInputStream(source);
      return new SimpleResource<>(svg);
    } catch (SVGParseException ex) {
      throw new IOException("Cannot load SVG from stream", ex);
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

2. 自定义ResourceTranscoder，将SVG转为Drawable对象

import android.graphics.Picture;
import android.graphics.drawable.PictureDrawable;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;

import com.bumptech.glide.load.Options;
import com.bumptech.glide.load.engine.Resource;
import com.bumptech.glide.load.resource.SimpleResource;
import com.bumptech.glide.load.resource.transcode.ResourceTranscoder;
import com.caverock.androidsvg.SVG;

/**
 1. Convert the {@link SVG}'s internal representation to an Android-compatible one
 2. ({@link Picture}).
 */
public class SvgDrawableTranscoder implements ResourceTranscoder<SVG, PictureDrawable> {
  @Nullable
  @Override
  public Resource<PictureDrawable> transcode(@NonNull Resource<SVG> toTranscode,
      @NonNull Options options) {
    SVG svg = toTranscode.get();
    Picture picture = svg.renderToPicture();
    PictureDrawable drawable = new PictureDrawable(picture);
    return new SimpleResource<>(drawable);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

3. SVG格式不能硬解码，自定义RequestListener，在onResourceReady时设置ImageView为软解码

import android.graphics.drawable.PictureDrawable;
import android.widget.ImageView;

import com.bumptech.glide.load.DataSource;
import com.bumptech.glide.load.engine.GlideException;
import com.bumptech.glide.request.RequestListener;
import com.bumptech.glide.request.target.ImageViewTarget;
import com.bumptech.glide.request.target.Target;

/**
 1. Listener which updates the {@link ImageView} to be software rendered, because
 2. {@link com.caverock.androidsvg.SVG SVG}/{@link android.graphics.Picture Picture} can't render on
 3. a hardware backed {@link android.graphics.Canvas Canvas}.
 */
public class SvgSoftwareLayerSetter implements RequestListener<PictureDrawable> {

    @Override
    public boolean onLoadFailed(GlideException e, Object model, Target<PictureDrawable> target,
                                boolean isFirstResource) {
        ImageView view = ((ImageViewTarget<?>) target).getView();
        view.setLayerType(ImageView.LAYER_TYPE_NONE, null);
        return false;
    }

    @Override
    public boolean onResourceReady(PictureDrawable resource, Object model,
                                   Target<PictureDrawable> target, DataSource dataSource, boolean isFirstResource) {
        ImageView view = ((ImageViewTarget<?>) target).getView();
        view.setLayerType(ImageView.LAYER_TYPE_SOFTWARE, null);
        return false;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

3、创建Module

4. 自定义Module，注册SVG和WebpDrawble
   Glide4.0在包的根路径下创建CustomModule，makeProject后会自动加载Module

@GlideModule
public class CustomModule extends AppGlideModule {
    @Override
    public void registerComponents(@NonNull Context context, @NonNull Glide glide,
                                   @NonNull Registry registry) {

        registry.register(WebpDrawable.class, new WebpDrawableEncoder())
                .append(InputStream.class, WebpDrawable.class, new WebpResourceDecoder(context, glide))
                .append(ByteBuffer.class, WebpDrawable.class, new WebpBytebufferDecoder(context, glide))
                .register(SVG.class, PictureDrawable.class, new SvgDrawableTranscoder())
                .append(InputStream.class, SVG.class, new SvgDecoder());
    }

    // Disable manifest parsing to avoid adding similar modules twice.
    @Override
    public boolean isManifestParsingEnabled() {
        return false;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 加载本地图片
Glide.with(context).load(R.drawable.gif).into(view);
Glide.with(context).load("file:///android_asset/Spinner.svg").into(view);
// 加载网络图片
Glide.with(context).asGif().load("http://xxx.xxx.xxx.gif").into(view);
Glide.with(context).as(PictureDrawable.class)
                    .listener(new SvgSoftwareLayerSetter())
                    .load("http://xxx.xxx.xxx.svg").into(view);
1
2
3
4
5
6
7
8

感觉大神解决了我的难题.抱拳了!!!

作者：灰机_3060
链接：https://www.jianshu.com/p/0b4ceba048bf
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。