web-dev-qa-db-ja.com

AndroidのRecyclerViewでFirestoreのデータを表示する方法

Androidを使用してRecyclerViewで既存のFirestoreデータベースのデータを表示する最良の方法は何ですか？

これは回答の完全な説明としてはカバーされていないため、コメントでリンクできるように、このQ＆Aスタイルを追加しました。

javaandroidfirebaseandroid-recyclerviewgoogle-cloud-firestore
8
Alex Mamo

次のようなFirestoreデータベース構造があるとします。

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

次のようなモデルクラス：

_public class ProductModel {
    private String productName;

    public ProductModel() {}

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

    public String getProductName() {return productName;}
}
_

そして、次のようなRecyclerViewを含む_.XML_ファイル：

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

すべての製品名を表示するには、次の手順に従ってください。

まず、アクティビティでRecyclerViewを見つけて、LinearLayoutManagerを次のように設定する必要があります。

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

次に、Firestoreデータベースのルート参照と次のようなQueryオブジェクトを作成する必要があります。

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

次に、次のようなFirestoreRecyclerOptionsオブジェクトを作成する必要があります。

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

アクティビティクラスで、次のようなholderクラスを作成します。

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

次に、グローバルとして宣言されているadapterを作成します。

_private FirestoreRecyclerAdapter<ProductModel, ProductViewHolder> adapter;
_

そして、このようにあなたの活動でそれをインスタンス化してください：

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

最後に、次の2つのメソッドをオーバーライドして、変更のリスニングを開始することを忘れないでください。

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

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

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

結果はこれです：

enter image description here

編集：

ユーザーがアイテムをクリックしたときにトーストメッセージを表示したい場合は、ProductViewHolderクラスのsetProductName()メソッド内に次のコード行を追加してください。

_textView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Toast.makeText(getApplicationContext(), productName, Toast.LENGTH_SHORT).show();
    }
});
_
32
Alex Mamo