从Firebase存储加载图像在Recycler中显示时，图片不断变化

Question

我正在使用RecyclerView从Firebase Storage中加载我的图片。然而，当我加载像A这样的图像并滚动到该图像视图被回收并用于显示图像B时，我仍然可以短暂地看到图像A，然后才会更改为图像B。

有没有办法避免这种情况发生？

以下是我的适配器代码：

public class ComicRecyclerAdapter extends RecyclerView.Adapter<ComicRecyclerAdapter.ComicHolder> {


public ComicRecyclerAdapter(ArrayList<Comic> comicsInSection) {
    this.mComicsInSection = comicsInSection;
}

@Override
public ComicHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    //Bind the Comic object to the ComicHolder
    View comicView = LayoutInflater.from(parent.getContext())
            .inflate(R.layout.layout_grid_comic, parent, false);

    return new ComicRecyclerAdapter.ComicHolder(comicView);
}

@Override
public void onBindViewHolder(final ComicHolder holder, int position) {
    Comic currentComic = mComicsInSection.get(position);

    storageRef.child(currentComic.getTitle() + "/"
            + currentComic.getCoverImage()).getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
        @Override
        public void onSuccess(Uri uri) {
            //Load image using Picasso
            Picasso.get()
                    .load(uri)
                    .fit()
                    .into(holder.coverImage, new Callback() {
                        @Override
                        public void onSuccess() {
                            //image loaded stop loading icon
                            holder.loadingComic.setVisibility(View.GONE);
                        }

                        @Override
                        public void onError(Exception e) {

                        }
                    });
        }
    });
}

@Override
public int getItemCount() {
    return (null != mComicsInSection ? mComicsInSection.size() : 0);
}

public void addAll(ArrayList<Comic> comicsToAdd) {
    mComicsInSection.addAll(comicsToAdd);
    notifyDataSetChanged();
}

public void clear() {
    mComicsInSection.clear();
    notifyDataSetChanged();
}

static class ComicHolder extends RecyclerView.ViewHolder {
    //Find all views needed
    @BindView(R.id.comic_cover_image)
    ImageView coverImage;
    @BindView(R.id.loading_comic)
    ProgressBar loadingComic;

    public ComicHolder(View itemView) {
        super(itemView);
        ButterKnife.bind(this, itemView);
    }
}

}

- Reshaud Ally

---

嗨 @RishabhSaxena，我主要将它放在那里以便在回收视图中显示，因为我的类仅存储图像名称的最后一部分 "imageA.jpg"，有更好的方法可以做到这一点吗？ - Reshaud Ally

我建议您首先获取图像URL列表，然后转到适配器并简单地使用Picasso进行加载。现在的情况是，当RecyclerView滚动时，可能会首先获取第三个位置的URL而不是第一个位置，这可能会导致意外结果。 - Rishabh Saxena

嗨 @RishabhSaxena 我会尝试这个，然后告诉你结果如何。 - Reshaud Ally

嗨，@RishabhSaxena，那个完美地运行了，谢谢！！ - Reshaud Ally

让我们在聊天中继续这个讨论。 - Rishabh Saxena

Answer 1

我建议您先获取图片URL列表，然后转到适配器并简单地使用Picasso进行加载。目前的情况是，在滚动RecyclerView时，可能会首先收到第三个位置的URL，而不是第一个位置，这可能会导致意外结果。

- Rishabh Saxena

Answer 2

如果您正在使用Glide Library，您可以创建GlideModule类并使用Firebase Ui Storage依赖项。由于Firebase Ui Storage库的存在，您不必使用getDownloadUrl()方法，该方法在处理大数据时速度太慢，并且当您在适配器类的onBindViewHolder方法中使用它时，所有图像都会重新加载/洗牌。

请在应用程序gradle中添加这些依赖项：

// Find the latest Glide releases
implementation 'com.github.bumptech.glide:glide:4.x'
// If you're using Kotlin (and therefore, kapt), use kapt instead of annotationProcessor
annotationProcessor 'com.github.bumptech.glide:compiler:4.x'

创建一个新的GlideModule类：

@GlideModule
public class MyAppGlideModule extends AppGlideModule {

    @Override
    public void registerComponents(Context context, Glide glide, Registry registry) {
        // Register FirebaseImageLoader to handle StorageReference
        registry.append(StorageReference.class, InputStream.class,
                new FirebaseImageLoader.Factory());
    }
}

在您的适配器类中直接使用Firebase图像引用链接：

  // top level variable
     FirebaseStorage storage = FirebaseStorage.getInstance();
    
     @Override
        public void onBindViewHolder(@NonNull final BuildingAdapter.BuildingViewHolder holder,
                                     int position) {
 // create imagePath for Glide library. ImagePath = server url + image name
     StorageReference storageRef = storage.getReferenceFromUrl(FIREBASE_STORAGE_MAIN_LINK + "/"+ data.get(position).getImageName());
    
            Glide.with(context)
                    .load(storageRef)
                    .apply(new RequestOptions()
                            .placeholder(R.drawable.image_not_found)
                            .fitCenter())
                    .into(holder.im);
    }

- TeachMeJava