使用 Glide 和 AndroidSVG 加载 SVG 图片失败的解决方案_技术教程

在 Android 应用中使用 Glide 库加载 SVG 图片时，可能会遇到加载失败的问题，尤其是在使用了 AndroidSVG 库的情况下。本文将详细介绍如何配置 Glide 以正确加载 SVG 图片，并解决常见的 "onLoadFailed" 错误。

1. 添加 Glide 的注解处理器

在使用 Glide 库时，为了使其能够识别和处理自定义的模块（例如，用于 SVG 支持的 SvgDecoder、SvgDrawableTranscoder 和 SvgModule），需要在 build.gradle 文件中添加 Glide 的注解处理器。

dependencies {
    implementation 'com.github.bumptech.glide:glide:4.14.2'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.14.2'
}

添加 annotationProcessor 后，Gradle 会在编译时处理 Glide 的注解，生成必要的代码，使得 Glide 能够识别自定义的模块。

2. 使用 GlideApp 替代 Glide

在配置了自定义的 Glide 模块后，需要使用 GlideApp 替代 Glide 来加载图片。GlideApp 是由 Glide 的注解处理器生成的类，它包含了对自定义模块的支持。

// 错误的做法
// Glide.with(thumbnailImageView.getContext())
//     .as(PictureDrawable.class)
//     .load(glideUrl)
//     .into(thumbnailImageView);

// 正确的做法
GlideApp.with(thumbnailImageView.getContext())
    .as(PictureDrawable.class)
    .load(glideUrl)
    .into(thumbnailImageView);

请确保在项目编译后，GlideApp 类已经生成。如果未生成，请检查 build.gradle 文件中的依赖配置，并尝试重新构建项目。

3. 处理 Placeholder 图片

在使用 placeholder() 方法设置占位图时，可能会遇到一些问题，例如 "bitmap missing the src attribute" 错误。这通常是因为占位图的资源文件配置不正确。

一种解决方法是暂时注释掉 placeholder() 方法，以排除占位图引起的错误。

GlideApp.with(thumbnailImageView.getContext())
    .as(PictureDrawable.class)
    .load(glideUrl)
    // .placeholder(R.color.file_placeholder) // 注释掉 placeholder
    .listener(new RequestListener() {
        @Override
        public boolean onLoadFailed(@Nullable GlideException e, Object model,
                                    Target target, boolean isFirstResource) {
            // 加载失败处理
            return false;
        }

        @Override
        public boolean onResourceReady(PictureDrawable resource, Object model,
                                       Target target, DataSource dataSource,
                                       boolean isFirstResource) {
            // 加载成功处理
            return false;
        }
    })
    .into(thumbnailImageView);

如果需要使用占位图，请确保占位图的资源文件配置正确，并且能够被 Glide 正确加载。

4. 示例代码

下面是一个完整的示例代码，展示了如何使用 GlideApp 加载 SVG 图片。

import com.bumptech.glide.Glide;
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 com.caverock.androidsvg.SVG;

import android.graphics.drawable.PictureDrawable;
import android.net.Uri;
import android.os.Bundle;
import android.widget.ImageView;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private ImageView thumbnailImageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        thumbnailImageView = findViewById(R.id.thumbnailImageView);

        // SVG 文件 URL
        Uri glideUrl = Uri.parse("https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg");

        GlideApp.with(this)
                .as(PictureDrawable.class)
                .load(glideUrl)
                // .placeholder(R.color.file_placeholder) // 注释掉 placeholder
                .listener(new RequestListener() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model,
                                                Target target, boolean isFirstResource) {
                        // 加载失败处理
                        return false;
                    }

                    @Override
                    public boolean onResourceReady(PictureDrawable resource, Object model,
                                                   Target target, DataSource dataSource,
                                                   boolean isFirstResource) {
                        // 加载成功处理
                        ImageView view = ((ImageViewTarget) target).getView();
                        view.setLayerType(ImageView.LAYER_TYPE_SOFTWARE, null);
                        return false;
                    }
                })
                .into(thumbnailImageView);
    }
}