Firebase 存储图像检索 RecyclerView

Question

我正在尝试检索一个充满图像的 Firebase 存储：

这些图片应该可以填满我的 recyclerviews，这是我的代码，我正在使用 Glide 加载我的图片（我的 MyGlideAppModule 设置正确）：

public class PicturesAdapter extends RecyclerView.Adapter<PictureViewHolder>
{
    private List<Pictures> pictureList;
    private StorageReference mStorageRef;


    public PicturesAdapter(List<Pictures> pictureList)
    {
        this.pictureList = pictureList;
    }

    @NonNull
    @Override
    public PictureViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType)
    {
        View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.picture_cv,
                parent, false);


        return new PictureViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(@NonNull PictureViewHolder holder, int position)
    {
        Pictures pi = pictureList.get(position);
        FirebaseStorage storage = FirebaseStorage.getInstance();

        mStorageRef = storage.getReference();

        GlideApp.with(holder.itemView.getContext())
                .load(mStorageRef)
                .into(holder.picture);
    }

    @Override
    public int getItemCount() {
        return pictureList.size();
    }
}

我的视图持有者类：

public class PictureViewHolder extends RecyclerView.ViewHolder
{
    public ImageView picture;


    public PictureViewHolder(@NonNull View itemView)
    {
        super(itemView);

        picture = (ImageView) itemView.findViewById(R.id.bobbyBrown);
    }


    public ImageView getPictureContents()
    {
        return picture;
    }
}

在我将图像添加到 firebase 之前，我将每个图像都存储在本地，我会按如下方式调用适配器：

public class PicturesFragment extends Fragment {


    private List<Pictures> pics = null;
    private RecyclerView mRecyclerView;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View v = inflater.inflate(R.layout.fragment_pictures, container, false);

        initializeView();

        mRecyclerView = (RecyclerView) v.findViewById(R.id.picList);
        mRecyclerView.setHasFixedSize(true);
        PicturesAdapter p2 = new PicturesAdapter(pics);

        LinearLayoutManager llm = new LinearLayoutManager(v.getContext());
        llm.setOrientation(LinearLayoutManager.VERTICAL);
        mRecyclerView.setLayoutManager(llm);
        mRecyclerView.setAdapter(p2);


        // Inflate the layout for this fragment
        return v;
    }

    private void initializeView()
    {
        pics = new ArrayList<Pictures>();
        pics.add(new Pictures(R.drawable.firepit1_a));
        pics.add(new Pictures(R.drawable.firepit2_a));
        pics.add(new Pictures(R.drawable.firepit3_a));
        pics.add(new Pictures(R.drawable.firepit4_a));
        pics.add(new Pictures(R.drawable.firepit5_a));
        pics.add(new Pictures(R.drawable.firepit6_a));
        pics.add(new Pictures(R.drawable.pic1));
        pics.add(new Pictures(R.drawable.pic2));
        pics.add(new Pictures(R.drawable.pic3));
        pics.add(new Pictures(R.drawable.pic4));
        pics.add(new Pictures(R.drawable.pic5));
        pics.add(new Pictures(R.drawable.pic6));
        pics.add(new Pictures(R.drawable.pic7));
        pics.add(new Pictures(R.drawable.pic8));
    }
}

如何检索图像并将它们填充到我的适配器中，非常感谢任何指向教程的链接，我还没有找到任何链接。

谢谢

Answer 1

您可以使用下面的代码来显示 firebase image imageview（和在适配器中）-

 String imgPath = IMAGE_NAME or IMAGE_PATH;
                FirebaseStorage mStorage = FirebaseStorage.getInstance();
                StorageReference storageRef = mStorage.child(imgPath);
                storageRef.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
                    @Override
                    public void onSuccess(Uri uri) {
                        Glide.with(context)
                                .load(uri)
                                .fitCenter()
                                .diskCacheStrategy(DiskCacheStrategy.ALL)         //ALL or NONE as your requirement
                                .thumbnail(Glide.with(context).load(R.drawable.ic_image_loading))
                                .error(R.drawable.ic_image_error)
                                .into(myViewHolder.spImg);
                    }
                }).addOnFailureListener(new OnFailureListener() {
                    @Override
                    public void onFailure(@NonNull Exception exception) {
                        // Handle any errors
                        Glide.with(context)
                                .load(R.drawable.ic_image_error)
                                .fitCenter()
                                .into(myViewHolder.spImg);
                    }
                });

Answer 2

请按以下步骤操作：

第 1 步：在您的模型/POJO 类中，您需要为图片 url 添加一个字段和一个用于区分图片的 ID：

class Pictures {

    private String id;

    private String image_url;

    public String getImage_url() {
        return image_url;
    }

    public void setImage_url(String image_url) {
        this.image_url = image_url;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }
}

第 2 步：然后在将图片上传到 Firebase 时，获取当前图片的下载 URL。

Sring mDownloadUrl;
firebaseStorageReference.putFile(resultUri)
        .addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
            @Override
            public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                final Task<Uri> firebaseUri = taskSnapshot.getStorage().getDownloadUrl();
                firebaseUri.addOnSuccessListener(new OnSuccessListener<Uri>() {
                    @Override
                    public void onSuccess(Uri uri) {
                        mDownloadUrl = uri.toString();
                    }
                });

            }
        });

第 3 步： 对于要上传到 Firebase 的每张图片，创建自定义图片对象，并从 Firebase 获取一个推送键作为其唯一 ID；设置它的图片 URL，最后用这个新的 Pictures 对象更新 Firebase 数据库

Picutures pic = new Pictures();
DatabaseReference databaseReference = FirebaseDatabase.getInstance().getReference().child("pictures"); // I chose "pictures", but you may choose a different name

// Getting push key from firebase
String pictureId = databaseReference.push().getKey();
pic.setId(pictureId);
pic.setImage_url(mDownloadUrl);

// update Firebase database with this new Pictures object
databaseReference.child(pictureId).setValue(pic);

第 4 步： 每当您想检索“图片”列表时，请向您的 Firebase 数据库添加一个侦听器；根据您的需要可以是ValueEventListener或ChildEventListener；我在这里实现ValueEventListener；如果您想要ChildEventListener 实施，请随时告诉我；这将从 Firebase 检索整个图片列表，您可以使用这些列表填充您的 RecyclerView 适配器。

DatabaseReference databaseReference = FirebaseDatabase.getInstance().getReference().child("pictures");

List<Pictures> picsList = new ArrayList<>(); // RecyclerView adapter list
PicturesAdapter adapter = new PicturesAdapter(picsList);
recyclerView.setAdapter(adapter);

databaseReference.addValueEventListener(valueEventListener); 

   ValueEventListener valueEventListener = new ValueEventListener() {
            @Override
            public void onDataChange(@NonNull DataSnapshot dataSnapshot) {
                Log.d(TAG, "addValueEventListener: onDataChange()");

                // checking if database contains a non-null value
                if (dataSnapshot.exists()) {

                    for (DataSnapshot singleSnapshot : dataSnapshot.getChildren()) {
                        Pictures picture = singleSnapshot.getValue(Pictures.class);
                        picsList.add(picture);
                    }

                    recyclerView.getAdapter().notifyDataSetChanged();

                } else {
                    Log.d(TAG, "addValueEventListener: No data exists");
                }
            }

            @Override
            public void onCancelled(@NonNull DatabaseError databaseError) {
                Log.d(TAG, "addValueEventListener: onCancelled()");
            }
        };

第 5 步：修改您的 Adapter onBindViewHolder() 以下载图像

private List<Pictures> pictureList;
@Override
public void onBindViewHolder(@NonNull PictureViewHolder holder, int position)
{
    Pictures pi = pictureList.get(position);

    GlideApp.with(holder.itemView.getContext())
            .load(pi.getImage_url())
            .into(holder.picture);
}