FirestoreのデータをRecyclerViewで表示する[Java]

17446 ワード
Android Firebase Firestore Java AndroidStudio Java テキストリンク

Firestoreのデータが更新されるたびにRecyclerViewの表示も更新されるようなことをやりたかったのですが、日本語で書かれた記事が全然なくて苦戦しました。

この記事ではFirebaseUI for Cloud Firestoreを参考にFirestoreRecyclerAdapterを使ってチャットアプリを作ってみます。

Firestoreでのデータベース作成がまだの人はCloud Firestore を使ってみるを参照してみてください。

表示するデータのモデル

チャットアプリのチャットを構成するデータのモデルです。

Chat.java
public class Chat {
    private String mName;
    private String mMessage;
    private String mUid;
    private Date mTimestamp;

    public Chat() { } // Needed for Firebase

    public Chat(String name, String message, String uid) {
        mName = name;
        mMessage = message;
        mUid = uid;
    }

    public String getName() { return mName; }

    public void setName(String name) { mName = name; }

    public String getMessage() { return mMessage; }

    public void setMessage(String message) { mMessage = message; }

    public String getUid() { return mUid; }

    public void setUid(String uid) { mUid = uid; }

    @ServerTimestamp
    public Date getTimestamp() { return mTimestamp; }

    public void setTimestamp(Date timestamp) { mTimestamp = timestamp; }
}

Firebase UIの準備

まず、FirebaseUI for Cloud Firestoreをインポートします。
FirestoreRecyclerAdapterを使うためです。

app/build.gradle
implementation "com.firebaseui:firebase-ui-firestore:6.2.1"

Queryの作成

"chats"コレクションのqueryを作成します。

MainActivity.java
Query query = FirebaseFirestore.getInstance()
        .collection("chats")
        .orderBy("timestamp")
        .limit(50); //最新の50個を取得

Queryのセット

先ほど作成したqueryを入れていきます。
Chat.classのところには自分で用意したモデルのクラスを入れてください。

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

上のコードではクエリーで取得したデータを自動的に"Chatクラス"に入れてくれますが、何らかの理由で自分で入れたい人は以下のようにしてください。

MainActivity.java

FirestoreRecyclerOptions<Chat> options = new FirestoreRecyclerOptions.Builder<Chat>()
        .setQuery(query, new SnapshotParser<Chat>() {
        @Override
        public Chat parseSnapshot(@NonNull DocumentSnapshot snapshot) {
            /* スナップショットの取得時に行いたい処理を書く */
            name = snapshot.getString("mName");
            message = snapshot.getString("mMessage");
            uid = snapshot.getString("mUid");
            Chat chat = new Chat(name,message,uid);
            return chat;
       }
       })
      .build();

ViewHolderの作成

RecyclerView.ViewHolderを継承したクラスを作成します。

ChatHolder.java
public class ChatHolder extends RecyclerView.ViewHolder {

    public TextView messsageText;
    public TextView nameText;

    public ChatHolder(View itemView) {
        super(itemView);
        messsageText = itemView.findViewById(R.id.message_text);
        nameText = itemView.findViewById(R.id.name_text);
    }

   public void setMessage(String message){
       messsageText.setText(message);
   }

   public void setName(String name){
       nameText.setText(name);
   }
}

アダプターを作成

アダプターはFirestoreRecyclerAdapterを継承して作成します。

MainActivity.java
FirestoreRecyclerAdapter adapter = new FirestoreRecyclerAdapter<Chat, ChatHolder>(options) {
    @Override
    public void onBindViewHolder(ChatHolder holder, int position, Chat model) 
    {
        // ChatHolderにChatクラスのオブジェクトを入れていきます
        holder.setMessage(model.getMessage());
        holder.setName(model.getName());
    }

    @Override
    public ChatHolder onCreateViewHolder(ViewGroup group, int i) {
        // ここではViewHolderのインスタンスを作成します
        View view = LayoutInflater.from(group.getContext())
                .inflate(R.layout.message, group, false);

        return new ChatHolder(view);
    }
};

【忘れずに】リスナーの登録

リスナーをつけないと動きません。僕はここで少しハマりました。。。

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

@Override
protected void onStop() {
    super.onStop();
    adapter.stopListening();
}

以上で完了です！お疲れさまでした！

おわりに

これで行けるはずです！
間違ってる箇所、不明な点があれば教えてください！
Android開発がんばっていきましょう！
よかったらLGTMお願いします。

参考

オープンソース:vue 2とthinkphpで構築された前後端分離プロジェクト
乾物!Python常用データ型の基本操作(長文シリーズ第1編)