java - ¿Cómo mostrar datos de Firestore en un RecyclerView con Android?

firebase android-recyclerview

Question

¿Cuál es la mejor manera de mostrar datos de una base de datos de Firestore existente en un RecyclerView con Android?

Esto no se cubre como una explicación completa en una respuesta, por lo que he agregado este estilo de preguntas y respuestas para que pueda vincularse en los comentarios.

Answer 1

Suponiendo que tiene una estructura de base de datos de Firestore que se ve así:

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

Una clase de modelo que también se ve así:

public class ProductModel {
    private String productName;

    public ProductModel() {}

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

    public String getProductName() {return productName;}
}

Y un archivo .XML que contiene un RecyclerView que también se ve así:

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

Para mostrar todos los nombres de productos, siga los siguientes pasos.

Primero, necesita encontrar el RecyclerView en su actividad y configurar el LinearLayoutManager esta manera:

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

Luego, debe crear la referencia raíz de su base de datos de Firestore y un objeto Query como este:

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

Luego tendrá que crear un objeto FirestoreRecyclerOptions como este:

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

En su clase de actividad, cree una clase de holder que se vea así:

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);
    }
}

Luego cree un adapter que se declare como global:

private FirestoreRecyclerAdapter<ProductModel, ProductViewHolder> adapter;

Y ejemplifícalo en tu actividad así:

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);

Al final, no olvide anular los siguientes dos métodos y comenzar a escuchar los cambios:

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

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

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

El resultado es este:

Editar:

Si desea mostrar un mensaje brindis cuando el usuario hace clic en un elemento, agregue las siguientes líneas de código dentro del método setProductName() de la clase ProductViewHolder :

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