[안드로이드] 파이어베이스 파이어스토어의 데이터를 리사이클러뷰에 나타내기

동현·2020년 9월 3일

안드로이드 코틀린

인스타그램 클론 코딩 강좌를 따라 하면서 파이어스토어의 데이터를 리사이클러뷰에 표현하는 것을 보고 예제를 만들어 따로 기록해두면 좋겠다는 생각으로 포스트를 작성하기로 했다.

1. 프로젝트 생성

Empty Activity를 선택해 프로젝트를 생성해준다. 사용할 언어의 경우 이 포스트에서는 Kotlin이다.

다음과 같이 프로젝트가 생성된다.

2. 파이어베이스 연동과 파이어스토어 추가

상단의 Tools-Firebase를 누르면 오른쪽에 이러한 창이 뜰 것이다.
Firestore를 누르고 Read and write documents with Cloud Firestore를 눌러주자.

그 후 Connect to Firebase를 눌러준다.

프로젝트를 추가를 누르고 순서대로 일련의 절차에 따라 프로젝트를 추가한다.

이제 파이어베이스와 프로젝트의 연결이 끝났다.

Add Cloud Firestore in your app을 누르고 Accept Changes를 누르면 gradle에 다음 내용이 추가되고 Gradle build가 시작된다.

3. 리사이클러뷰 추가

우선 app수준의 build.gradle에 가서 다음 내용을 추가해준다. 추가해주고 위에 뜨는 Sync now를 눌러주면 된다.

implementation 'androidx.recyclerview:recyclerview:1.1.0'

레이아웃에 이제 리사이클러뷰를 추가해주자

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

activity_main.xml

4. 데이터 클래스 만들기

리사이클러뷰의 각 아이템에 표시할 데이터를 담을 데이터 클래스를 만들어준다.
간단한 예시로 사람 이름과 전화번호가 나오도록 할 것이다.

package com.example.samplerecyclerview

data class Person(var name : String? = null, var phoneNumber : String? = null)

Person.kt

5. 아이템 만들기

리사이클러뷰의 항목에 해당하는 아이템을 만들어줄 것이다. 포인트를 주기 위해 카드뷰 형태로 만들 것이다.

아까와 마찬가지로 app 수준의 build.gradle에 가서 다음 내용을 추가해주고 Sync now를 눌러준다.

implementation 'androidx.cardview:cardview:1.0.0'

이제 리사이클러뷰의 각 항목이 될 아이템 레이아웃을 만들어준다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="10dp"
        app:cardElevation="5dp"
        app:cardUseCompatPadding="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:id="@+id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="이름"
                android:textSize="24sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/phoneNumber"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="전화번호"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/name" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>

item.xml

6. 파이어베이스 파이어스토어에 데이터 추가

firebase console에 들어가서 Cloud Firestore를 선택해준다.

데이터베이스 만들기를 눌러주자.

인증을 구현안한 채로 단순히 연습용으로 만드는 것이기 때문에 테스트 모드에서 시작을 선택하고 만든다.

데이터탭에서 컬렉션 시작을 눌러 컬렉션을 만들어주고

4단계에서 만들었던 데이터 클래스의 형태와 같이 문서를 만들어준다.

리사이클러뷰에 여러 항목을 표시할 것이 때문에 똑같은 방식으로 여러 문서를 만든다.

7. 리사이클러뷰 어댑터 만들고 MainActivity에 추가

package com.example.samplerecyclerview

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.google.firebase.firestore.FirebaseFirestore
import kotlinx.android.synthetic.main.activity_main.*
import kotlinx.android.synthetic.main.item.view.*

class MainActivity : AppCompatActivity() {

    var firestore : FirebaseFirestore? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 파이어스토어 인스턴스 초기화
        firestore = FirebaseFirestore.getInstance()

        recyclerview.adapter = RecyclerViewAdapter()
        recyclerview.layoutManager = LinearLayoutManager(this)
    }

    inner class RecyclerViewAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
        // Person 클래스 ArrayList 생성성
       var telephoneBook : ArrayList<Person> = arrayListOf()

        init {  // telephoneBook의 문서를 불러온 뒤 Person으로 변환해 ArrayList에 담음
            firestore?.collection("telephoneBook")?.addSnapshotListener { querySnapshot, firebaseFirestoreException ->
                // ArrayList 비워줌
                telephoneBook.clear()

                for (snapshot in querySnapshot!!.documents) {
                    var item = snapshot.toObject(Person::class.java)
                    telephoneBook.add(item!!)
                }
                notifyDataSetChanged()
            }
        }

        // xml파일을 inflate하여 ViewHolder를 생성
        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
            var view = LayoutInflater.from(parent.context).inflate(R.layout.item, parent, false)
            return ViewHolder(view)
        }

        inner class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        }

        // onCreateViewHolder에서 만든 view와 실제 데이터를 연결
        override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
            var viewHolder = (holder as ViewHolder).itemView

            viewHolder.name.text = telephoneBook[position].name
            viewHolder.phoneNumber.text = telephoneBook[position].phoneNumber
        }

        // 리사이클러뷰의 아이템 총 개수 반환
        override fun getItemCount(): Int {
            return telephoneBook.size
        }
    }
}

MainActivity.kt