如何从firestore检索图像到recyclerview

Question

我正在尝试从 Firebase Firestore 检索图像。我能够成功检索 RecyclerView 中的文本，但是我不确定如何检索图像。

不幸的是，我看过类似的问题，但没有任何帮助。

我的主类

 package com.harsh.preacher.ui.HomeToDestination;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.app.ProgressDialog;
import android.os.Bundle;
import android.util.Log;

import com.google.firebase.firestore.DocumentChange;
import com.google.firebase.firestore.DocumentSnapshot;
import com.google.firebase.firestore.EventListener;
import com.google.firebase.firestore.FirebaseFirestore;
import com.google.firebase.firestore.FirebaseFirestoreException;
import com.google.firebase.firestore.QuerySnapshot;
import com.harsh.preacher.R;
import com.squareup.picasso.Picasso;

import java.util.ArrayList;

public class MustHaveEquipment extends AppCompatActivity {
    DocumentSnapshot documentSnapshot;
    RecyclerView recyclerView;
    ArrayList<ProductModel> productModelArrayList ;
    ProductAdapter productAdapter;
    FirebaseFirestore db;
    ProgressDialog progressDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_must_have_equipment);
         progressDialog = new ProgressDialog(this);
         progressDialog.setCancelable(false);
         progressDialog.setMessage("Loading Products");
         progressDialog.show();

         recyclerView = findViewById(R.id.recyclerView);
         recyclerView.setHasFixedSize(true);
         recyclerView.setLayoutManager(new LinearLayoutManager(this));
         db = FirebaseFirestore.getInstance();
         productModelArrayList = new ArrayList<ProductModel>();
         productAdapter = new ProductAdapter(MustHaveEquipment.this,productModelArrayList);
         recyclerView.setAdapter(productAdapter);
         EventChangeListner();
    }

    private void EventChangeListner() {
        db.collection("Products")
                .addSnapshotListener(new EventListener<QuerySnapshot>() {
                    @Override
                    public void onEvent(@Nullable @org.jetbrains.annotations.Nullable QuerySnapshot value, @Nullable @org.jetbrains.annotations.Nullable FirebaseFirestoreException error) {
                        if(error!=null){
                            if(progressDialog.isShowing())
                                progressDialog.dismiss();
                            Log.e("No Internet Connection",error.getMessage());
                        }
                        for (DocumentChange dc : value.getDocumentChanges()){

                            if(dc.getType() == DocumentChange.Type.ADDED){
                                productModelArrayList.add(dc.getDocument().toObject(ProductModel.class));
                            }
                            productAdapter.notifyDataSetChanged();
                            if(progressDialog.isShowing())
                                progressDialog.dismiss();
                        }
                    }
                });
    }
}

我的适配器类

package com.harsh.preacher.ui.HomeToDestination;

import android.content.Context;
import android.os.Build;
import android.transition.AutoTransition;
import android.transition.TransitionManager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.RequiresApi;
import androidx.recyclerview.widget.RecyclerView;

import com.google.android.gms.tasks.OnSuccessListener;
import com.google.firebase.FirebaseAppLifecycleListener;
import com.google.firebase.FirebaseOptions;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.firestore.DocumentReference;
import com.google.firebase.firestore.DocumentSnapshot;
import com.google.firebase.firestore.FirebaseFirestore;
import com.harsh.preacher.R;
import com.squareup.picasso.Picasso;

import org.jetbrains.annotations.NotNull;
import org.w3c.dom.Document;

import java.util.ArrayList;

public class ProductAdapter extends RecyclerView.Adapter<ProductAdapter.ProductViewHolder> {
    DocumentSnapshot documentSnapshot;

    Context context;
    ArrayList<ProductModel> productModelArrayList;

    public ProductAdapter(Context context, ArrayList<ProductModel> productModelArrayList) {
        this.context = context;
        this.productModelArrayList = productModelArrayList;
    }

    @NonNull
    @NotNull
    @Override
    public ProductAdapter.ProductViewHolder onCreateViewHolder(@NonNull @NotNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.epupiment_design,parent,false);
        return new ProductViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull @NotNull ProductAdapter.ProductViewHolder holder, int position) {
        ProductModel productModel = productModelArrayList.get(position);
        holder.productName.setText(productModel.ProductName);
        holder.aboutProduct.setText(productModel.AboutProduct);
        holder.productDescription.setText(productModel.ProductUse);






    }

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

    public static class ProductViewHolder extends RecyclerView.ViewHolder {
        TextView aboutProduct,productName,productDescription;
        RelativeLayout expandable,card;
        ImageView showmore,productImage;

        public ProductViewHolder(@NonNull @NotNull View itemView) {
            super(itemView);


            aboutProduct = itemView.findViewById(R.id.productDescription);
            productName = itemView.findViewById(R.id.productName);
            productDescription = itemView.findViewById(R.id.aboutProduct);
            productImage = itemView.findViewById(R.id.productImage);
            expandable = itemView.findViewById(R.id.expandable);
            card = itemView.findViewById(R.id.cardeshwar);
            showmore = itemView.findViewById(R.id.showMore);
            showmore.setOnClickListener(new View.OnClickListener() {
                @RequiresApi(api = Build.VERSION_CODES.KITKAT)
                @Override
                public void onClick(View view) {
                    if (expandable.getVisibility() == View.VISIBLE) {
                        TransitionManager.beginDelayedTransition(card,
                                new AutoTransition());
                        expandable.setVisibility(View.GONE);
                        showmore.setImageResource(R.drawable.showmore);
                    } else {
                        TransitionManager.beginDelayedTransition(card,
                                new AutoTransition());
                        expandable.setVisibility(View.VISIBLE);
                        showmore.setImageResource(R.drawable.showless);
                    }

                }
            });

        }
    }

}

我的模型课

package com.harsh.preacher.ui.HomeToDestination;

import android.widget.ImageView;

public class ProductModel {
    String ProductName, ProductUse, AboutProduct;
    ImageView ProductImage;

    public ProductModel(){}


    public ProductModel(String productName, String productUse, String aboutProduct,ImageView productImage){
        ProductName = productName;
        ProductUse = productUse;
        AboutProduct = aboutProduct;
        ProductImage = productImage;



    }

    public String getProductName() {
        return ProductName;
    }

    public void setProductName(String productName) {
        ProductName = productName;
    }

    public String getProductUse() {
        return ProductUse;
    }

    public void setProductUse(String productUse) {
        ProductUse = productUse;
    }

    public String getAboutProduct() {
        return AboutProduct;
    }

    public void setAboutProduct(String aboutProduct) {
        AboutProduct = aboutProduct;
    }
    public ImageView getProductImage() {
        return ProductImage;
    }

    public void setProductImage(ImageView productImage) {
        ProductImage = productImage;
    }




}

Here is the structure of my database

Answer 1

按照这些步骤在 RecyclerView 中显示图像

1. 从ProductModel 中删除ImageView
2. 将String imageUrl 添加到ProductModel 并使用Firestore 中的图像URL 设置其值（我从屏幕截图中看到它被命名为“Image”）。
3. 在来自ProductAdapter 的onBindViewHolder 中，使用提供的position 从productModelArrayList 检索适当的ProductModel，并将其imageUrl 值传递给ProductViewHolder。
4. 在ProductViewHolder 中，使用imageUrl 将图像加载到ImageView。 （Glide 和Picasso 是两个常用的图片加载库）

PS：永远不要在你的模型中添加UI elements。将来会导致生命周期问题。

如果您有任何问题，请告诉我。