本文档旨在指导开发者如何使用 Glide 库在 Android 应用中加载 SVG 图片。内容涵盖 Glide 的配置、SVG 支持模块的集成、加载 SVG 图片的示例代码，以及解决常见问题的方案，帮助开发者顺利实现 SVG 图片的加载和显示。
Glide 与 AndroidSVG 集成：加载 SVG 图片的完整指南
Glide 是一个强大的 Android 图片加载库，可以轻松地从各种来源加载、缓存和显示图片。虽然 Glide 本身并不直接支持 SVG 格式，但通过集成 AndroidSVG 库，我们可以让 Glide 具备加载和显示 SVG 图片的能力。
1. 添加依赖
首先，需要在 build.gradle 文件中添加必要的依赖项。除了 Glide 库本身，还需要添加 AndroidSVG 库以及 Glide 的注解处理器。
dependencies {
implementation 'com.github.bumptech.glide:glide:4.14.2'
annotationProcessor 'com.github.bumptech.glide:compiler:4.14.2'
implementation 'com.caverock:androidsvg-aar:1.4' // AndroidSVG
}注意: 确保 annotationProcessor 使用与 implementation 相同的 Glide 版本。
2. 创建 SVG 支持模块
为了让 Glide 能够处理 SVG 图片，我们需要创建几个自定义类：
- SvgDecoder: 解码器，负责将 SVG 数据转换为 SVG 对象。
- SvgDrawableTranscoder: 转换器，负责将 SVG 对象转换为 PictureDrawable 对象，以便 Glide 可以显示它。
- SvgModule: Glide 模块，用于注册 SVG 解码器和转换器。
以下是这些类的示例代码（参考 Glide 官方示例）：
SvgDecoder.java
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;
public class SvgDecoder implements ResourceDecoder<InputStream, SVG> {
@Override
public boolean handles(InputStream source, Options options) {
// TODO: Consider adding a way to check if the InputStream is SVG.
// We could check the file extension, or even more reliably check the XML header.
return true;
}
@Override
public Resource<SVG> decode(InputStream source, int width, int height, Options options)
throws IOException {
try {
SVG svg = SVG.getFromInputStream(source);
return new SimpleResource<>(svg);
} catch (SVGParseException e) {
throw new IOException("Cannot load SVG from stream", e);
}
}
}SvgDrawableTranscoder.java
import android.graphics.Picture;
import android.graphics.drawable.PictureDrawable;
import androidx.annotation.NonNull;
import androidx.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;
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);
}
}SvgModule.java
import android.content.Context;
import android.graphics.drawable.PictureDrawable;
import androidx.annotation.NonNull;
import com.bumptech.glide.Glide;
import com.bumptech.glide.Registry;
import com.bumptech.glide.annotation.GlideModule;
import com.bumptech.glide.module.AppGlideModule;
import com.caverock.androidsvg.SVG;
import java.io.InputStream;
@GlideModule
public class SvgModule extends AppGlideModule {
@Override
public void registerComponents(@NonNull Context context, @NonNull Glide glide, @NonNull Registry registry) {
registry.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;
}
}注意: @GlideModule 注解是必须的，它告诉 Glide 框架这是一个 Glide 模块。
3. 使用 Glide 加载 SVG
完成以上步骤后，就可以使用 Glide 加载 SVG 图片了。 需要使用 GlideApp (而不是 Glide)，GlideApp 是由注解处理器根据 SvgModule 自动生成的。
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;
import androidx.annotation.Nullable;
// 假设 thumbnailImageView 是你的 ImageView 控件
ImageView thumbnailImageView = findViewById(R.id.thumbnailImageView);
GlideApp.with(thumbnailImageView.getContext())
.as(PictureDrawable.class)
.load("https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg")
.listener(new RequestListener<PictureDrawable>() {
@Override
public boolean onLoadFailed(@Nullable GlideException e, Object model,
Target<PictureDrawable> target, boolean isFirstResource) {
// 加载失败处理
return false;
}
@Override
public boolean onResourceReady(PictureDrawable resource, Object model,
Target<PictureDrawable> target, DataSource dataSource,
boolean isFirstResource) {
// 加载成功处理
return false;
}
})
.into(thumbnailImageView);4. 常见问题及解决方案
- onLoadFailed 回调被触发: 检查是否正确添加了 AndroidSVG 依赖和 Glide 注解处理器。 确保 GlideApp 被正确使用。 检查 SVG 文件 URL 是否有效并且可以访问。
- 图片显示不正确: 确保 ImageView 的 layerType 设置正确。 对于复杂的 SVG 图片，可能需要将 layerType 设置为 LAYER_TYPE_SOFTWARE。 可以在 onResourceReady 回调中设置：
@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;
}- 编译错误：找不到 GlideApp: 确保在 build.gradle 中添加了 annotationProcessor 'com.github.bumptech.glide:compiler:4.14.2' 并且已经成功构建项目。 GlideApp 是由注解处理器自动生成的，如果缺少注解处理器或构建失败，则无法生成。
- 占位符错误：Bitmap missing src attribute: 某些占位符可能会与 SVG 加载冲突。 暂时移除占位符进行测试，如果问题解决，则需要更换合适的占位符资源。
总结
通过以上步骤，你可以成功地使用 Glide 加载和显示 SVG 图片。 关键在于正确配置依赖项、创建 SVG 支持模块，并使用 GlideApp 来加载图片。 遇到问题时，仔细检查配置和代码，并参考常见问题解决方案。
