从Recycler中的Firebase存储加载图像显示图像更改

时间:2018-04-29 23:46:43

标签: android firebase android-recyclerview firebase-storage

我正在使用recyclerview从fire base存储加载我的图像,但是当我加载时让图像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);
    }
}

}

2 个答案:

答案 0 :(得分:3)

我建议您先获取图片网址列表然后转到适配器,然后使用Picasso进行加载。现在发生了什么,当回收者视图滚动时,你可能会先获得第三个位置而不是第一个位置,这可能会导致你意想不到的结果。

答案 1 :(得分:0)

如果您使用的是 Glide Library,则可以创建 GlideModule 类并使用 Firebase Ui Storage依赖性。感谢 Firebase Ui 存储库,您不必使用 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);
    }