本文档旨在指导开发者如何使用 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 来加载图片。 遇到问题时，仔细检查配置和代码，并参考常见问题解决方案。
评论（已关闭）
评论已关闭