[Kotlin] MVVM Room Database : RecyclerView Adapter에 ViewModel LiveData 적용하기 - 간단한 저장소 만들기 3편

지난 포스트

[Kotlin] MVVM Room Database 2편 : 간단한 저장소 만들기 - Navigation Graph, NavHostFragment, Insert 구성하기

 

목표

 

홈화면/update화면/add화면

이 포스트는 총 5편으로 이루어져 있습니다. 밑줄 친 항목이 이번 포스트에서 다룰 항목 입니다. 

 

RoomDatabase 개념

• Roomdatabase의 기본 요소인 Entity, Database, Dao 개념/구현 (1편)
• LiveData, ViewModel, Repository를 이용하여 MVVM 아키텍처 구성(1편)

Insert 구성

• Navigation Graph , NavHostFragment추가(2편)
• 각 list, update, add fragment의 layout 및 프래그먼트 구현(2편)
• Add Fragment를 여는 플로팅 버튼 추가 (2편)
• DB browser를 통해 database 확인(2편)
• RecyclerView에 들어갈 ItemLayout과 ListAdapter 추가(3편)
• RecyclerView와 LiveData 적용하기(3편)
• 위와 같이 Room database에 저장된 값을  Recyclerview와 연결하기 (3편)

Update 구성

• Update layout 생성(4편)
• Update Layout Navigation Graph에 연결(4편)
• Navigation Argument 추가하기(4편)
• 데이터베이스에 수정된 값 업데이트(4편)

Delete 구성

• 제거 버튼 Action bar에 추가(5편)
• 선택한 데이터 삭제(5편)
• 모든 데이터 삭제(5편)

 

 

RecyclerView에 들어갈 ItemLayout과 ListAdapter 추가

 

 

RecyclerView ItemLayout 생성

 

listFragment에 있는 Recyclerview에 데이터베이스 데이터들을 불러오게 되는데 이 데이터를 UI로 어떻게 보여질것인지, RecyclerAdapter로 데이터베이스 데이터와 UI를 연결해주어야합니다. 

 

그러기위해서 먼저, Recyclerview안에있는 list의 xml을 만들어 주겠습니다. 

 

 

• res/layout/custom_row

<?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"
    android:padding="24sp"
    android:id="@+id/rowLayout">

    <TextView
        android:id="@+id/id_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/firstName_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:text="John"
        app:layout_constraintBottom_toBottomOf="@+id/id_txt"
        app:layout_constraintStart_toEndOf="@+id/id_txt"
        app:layout_constraintTop_toTopOf="@+id/id_txt"
        app:layout_constraintVertical_bias="0.0" />

    <TextView
        android:id="@+id/lastName_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="@+id/age_txt"
        app:layout_constraintStart_toEndOf="@+id/firstName_txt"
        app:layout_constraintTop_toTopOf="@+id/age_txt"
        app:layout_constraintVertical_bias="0.0" />

    <TextView
        android:id="@+id/age_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="@+id/firstName_txt"
        app:layout_constraintStart_toEndOf="@+id/lastName_txt"
        app:layout_constraintTop_toTopOf="@+id/firstName_txt"
        app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

 

RecyclerView Adapter 생성

 

RecyclerView에 들어갈 ListAdapter를 생성해줍니다. 

• ListAdapter 클래스를 list패키지 아래에 생성해줍니다.

 

• ListAdapter

**코멘트를 확인해주세요**

 

class ListAdapter: RecyclerView.Adapter<ListAdapter.MyViewHolder>() {

    private var userList = emptyList<User>() //

    class MyViewHolder(itemView: View):RecyclerView.ViewHolder(itemView){

    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        return MyViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.custom_row,parent,false))
        //위에서 만든 custom_row 레이아웃을 연결해줍니다.
    }

    override fun getItemCount(): Int {
        return userList.size //userList에 사이즈를 리턴합니다.
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        //UI와 전달받은 userList에 데이터베이스 데이터를 연결해줍니다.
        val currentItem = userList[position]
        holder.itemView.id_txt.text = currentItem.id.toString()
        holder.itemView.firstName_txt.text = currentItem.firstName
        holder.itemView.lastName_txt.text = currentItem.lastName
        holder.itemView.age_txt.text = currentItem.age.toString()

        holder.itemView.rowLayout.setOnClickListener{
            val action = ListFragmentDirections.actionListFragmentToUpdateFragment(currentItem)
            holder.itemView.findNavController().navigate(action)
        }
    }

    fun setData(user:List<User>){
        //유저리스트가 변경 되었을때, 업데이트해줍니다.
        this.userList = user
        notifyDataSetChanged()
    }




}

 

 

RecyclerView에 LiveData 적용하기

 

 

RecyclerView List Fragment 적용하기/ ViewModel recyclerview와 연결하기

 

만들어준 RecyclerviewView Adapter를 ListFragment에 적용해야합니다. 

 

그후에 mUserViewModel에서 데이터 추가되거나 수정되었을때 UI에 업데이트하기위해 ViewModel.Observe를 통해, 라이브데이터가 바뀔때마다 adapter에서 만들어준 setData를 실행시켜줍니다. 

 

• list/ListFragment

 

class ListFragment : Fragment() {

    private lateinit var mUserViewModel: UserViewModel

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        //레이아웃 연결
        val view = inflater.inflate(R.layout.fragment_list, container, false)

        //리사이클러뷰 
        val adapter = ListAdapter()
        val recyclerView = view.recyclerview
        recyclerView.adapter = adapter
        recyclerView.layoutManager = LinearLayoutManager(requireContext())

        //뷰모델 연결
            //뷰모델을 불러옵니다.
        mUserViewModel = ViewModelProvider(this).get(UserViewModel::class.java)
        mUserViewModel.readAllData.observe(viewLifecycleOwner, Observer { user-> 
            //ViewModel에 Observe를 활용하여 mUserViewModel에 ReadAllData 라이브 데이터가 바뀌었을때 캐치하여, adapter에서 만들어준 setData함수를 통해 바뀐데이터를 UI에 업데이트 해줍니다.
            adapter.setData(user)
        })

        view.floatingActionButton.setOnClickListener{
            findNavController().navigate(R.id.action_listFragment_to_addFragment) //플로팅 버튼을 누르면 addFragment로 화면전환합니다.
        }
        
        //menu 추가
        setHasOptionsMenu(true)
        return view
        
 }

 

이제 실행 시켜보겠습니다. 

Recyclerview와 데이터베이스 데이터들을 연결해주기전에는 Recyclerview에 아무것도 뜨지않았지만, 이제 데이터베이스 정보들을 불러오는것을 확인하실수있습니다. 

 

 

다음 포스트에서 이어서 다뤄보겠습니다.  

 

[Kotlin] MVVM Room Database 4편 : 간단한 저장소 만들기 - @Update로 Database 데이터 수정