图片加载告别龟速：Glide4加载图片添加进度条！

图片加载的痛点：

在移动开发中，图片加载是一个至关重要的环节，它直接影响到用户的体验和应用的性能。然而，传统图片加载方式往往面临以下痛点：

• 加载速度慢，卡顿严重
• 没有进度反馈，用户体验差

Glide4的救赎：

Glide4作为一款强大的图片加载框架，为我们带来了福音。它不仅优化了图片加载算法，还提供了灵活的扩展机制，允许我们自定义加载流程。

为Glide4添加进度条：

要为Glide4添加进度条，我们需要以下步骤：

1. 添加依赖：

implementation 'com.github.bumptech.glide:annotations:4.13.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.13.0'

2. 创建自定义AppGlideModule：

@GlideModule
public final class CustomAppGlideModule extends AppGlideModule {
    @Override
    public void registerComponents(Context context, Glide glide) {
        glide.register(GlideUrl.class, InputStream.class, new ProgressModelLoaderFactory());
    }
}

3. 创建自定义ModelLoader：

public class ProgressModelLoader extends ModelLoader<GlideUrl, InputStream> {

    public ProgressModelLoader(Context context) {
        super(context, GlideUrl.class, InputStream.class);
    }

    @Override
    public LoadData<InputStream> buildLoadData(GlideUrl model, int width, int height, Options options) {
        return new ProgressLoadData(model, new OkHttpUrlLoader(OkHttp.getInstance()), options);
    }
}

4. 创建自定义LoadData：

public class ProgressLoadData implements LoadData<InputStream> {

    private final GlideUrl model;
    private final OkHttpUrlLoader okHttpUrlLoader;
    private final Options options;

    public ProgressLoadData(GlideUrl model, OkHttpUrlLoader okHttpUrlLoader, Options options) {
        this.model = model;
        this.okHttpUrlLoader = okHttpUrlLoader;
        this.options = options;
    }

    @Override
    public InputStream load(Priority priority) throws IOException {
        InputStream inputStream = okHttpUrlLoader.load(model, options);
        return new ProgressInputStream(inputStream, model, options);
    }
}

5. 创建自定义ProgressInputStream：

public class ProgressInputStream extends InputStream {

    private final InputStream inputStream;
    private final GlideUrl model;
    private final Options options;

    private int totalBytes;
    private int loadedBytes;

    public ProgressInputStream(InputStream inputStream, GlideUrl model, Options options) {
        this.inputStream = inputStream;
        this.model = model;
        this.options = options;
    }

    @Override
    public int read() throws IOException {
        int result = inputStream.read();
        if (result != -1) {
            loadedBytes++;
            // 更新进度条，这里使用EventBus发送更新消息
            EventBus.getDefault().post(new ProgressEvent(model, totalBytes, loadedBytes));
        }
        return result;
    }

    @Override
    public int read(byte[] b) throws IOException {
        int result = inputStream.read(b);
        if (result != -1) {
            loadedBytes += result;
            // 更新进度条，这里使用EventBus发送更新消息
            EventBus.getDefault().post(new ProgressEvent(model, totalBytes, loadedBytes));
        }
        return result;
    }
}

使用进度条：

// 监听Glide加载进度
EventBus.getDefault().register(this);

// 加载图片并监听进度
Glide.with(this)
        .load(imageUrl)
        .listener(new RequestListener<Drawable>() {
            @Override
            public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
                return false;
            }

            @Override
            public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                // 加载完成，取消监听
                EventBus.getDefault().unregister(this);
                return false;
            }
        })
        .into(imageView);

// 更新进度条
@Subscribe(threadMode = ThreadMode.MAIN)
public void onProgressEvent(ProgressEvent event) {
    // 更新进度条显示
    progressBar.setProgress(event.getProgress());
}

结语：

通过为Glide4添加进度条，我们可以有效解决图片加载慢、没有进度反馈的问题，提升图片加载性能，优化用户体验。希望这篇文章能给正在开发Android应用的你带来帮助，让你的应用图片加载如丝般顺滑！