Comment afficher les données de Firestore dans une RecyclerView avec Android?

Question

Quelle est la meilleure façon d'afficher les données d'une base de données Firestore existante dans un RecyclerView à l'aide d'Android?

Ce n'est pas couvert comme explication complète dans une réponse, j'ai donc ajouté ce style de Q&R afin qu'il puisse être lié dans les commentaires.

Answer 1

En supposant que vous ayez une structure de base de données Firestore qui ressemble à ceci:

Firestore-root
    |
    --- products (collection)
           |
           --- documentIdOne (document)
           |        |
           |        --- productName: "Milk"
           |
           --- documentIdTwo (document)
           |        |
           |        --- productName: "Soy Milk"
           |
           --- documentIdThree (document)
                    |
                    --- productName: "Bacon"

Une classe modèle qui ressemble également à ceci:

public class ProductModel {
    private String productName;

    public ProductModel() {}

    public ProductModel(String productName) {this.productName = productName;}

    public String getProductName() {return productName;}
}

Et un fichier .XML Qui contient un RecyclerView qui ressemble également à ceci:

<Android.support.v7.widget.RecyclerView
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:id="@+id/recycler_view"/>

Pour afficher tous les noms de produits, veuillez suivre les étapes suivantes.

Tout d'abord, vous devez trouver le RecyclerView dans votre activité et définir le LinearLayoutManager comme ceci:

RecyclerView recyclerView = findViewById(R.id.recycler_view);
recyclerView.setLayoutManager(new LinearLayoutManager(this));

Ensuite, vous devez créer la référence racine de votre base de données Firestore et un objet Query comme ceci:

FirebaseFirestore rootRef = FirebaseFirestore.getInstance();
Query query = rootRef.collection("products")
        .orderBy("productName", Query.Direction.ASCENDING);

Ensuite, vous devrez créer un objet FirestoreRecyclerOptions comme ceci:

FirestoreRecyclerOptions<ProductModel> options = new FirestoreRecyclerOptions.Builder<ProductModel>()
        .setQuery(query, ProductModel.class)
        .build();

Dans votre classe d'activité, créez une classe holder qui ressemble à ceci:

private class ProductViewHolder extends RecyclerView.ViewHolder {
    private View view;

    ProductViewHolder(View itemView) {
        super(itemView);
        view = itemView;
    }

    void setProductName(String productName) {
        TextView textView = view.findViewById(R.id.text_view);
        textView.setText(productName);
    }
}

Créez ensuite un adapter qui est déclaré global:

private FirestoreRecyclerAdapter<ProductModel, ProductViewHolder> adapter;

Et instanciez-le dans votre activité comme ceci:

adapter = new FirestoreRecyclerAdapter<ProductModel, ProductViewHolder>(options) {
    @Override
    protected void onBindViewHolder(@NonNull holder productViewHolder, int position, @NonNull ProductModel productModel) {
        holder.setProductName(productModel.getProductName());
    }

    @NonNull
    @Override
    public ProductViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_product, parent, false);
        return new ProductViewHolder(view);
    }
};
recyclerView.setAdapter(adapter);

En fin de compte, n'oubliez pas de remplacer les deux méthodes suivantes et de commencer à écouter les modifications:

@Override
protected void onStart() {
    super.onStart();
    adapter.startListening();
}

@Override
protected void onStop() {
    super.onStop();

    if (adapter != null) {
        adapter.stopListening();
    }
}

Le résultat est le suivant:

Modifier:

Si vous souhaitez afficher un message toast lorsque l'utilisateur clique sur un élément, veuillez ajouter les lignes de code suivantes dans la méthode setProductName() de la classe ProductViewHolder:

textView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Toast.makeText(getApplicationContext(), productName, Toast.LENGTH_SHORT).show();
    }
});