안드로이드에서 viewModel, liveData, dataBinding을 이용한 recyclerView 구현하기

recyclerView를 구현할 activity 또는 fragment

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>
        <variable
            name="mainViewModel"
            type="com.mj.recyclerview_sample.MainViewModel" />
    </data>

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

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>


</layout>

recyclerView에 표시될 항목의 레이아웃 구성

item_recyclerview.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>

        <variable
            name="item"
            type="com.mj.recyclerview_sample.RecyclerViewItem" />

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{item.title}"
            tools:text="제목"
            android:textSize="20dp"
            app:layout_constraintBottom_toTopOf="@id/subtitle"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/subtitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{item.subtitle}"
            tools:text="이것은 본문입니다."
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/title" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

항목 레이아웃은 간단하게 제목과 본문 textView 2개만 구현.

recyclerView에 등록할 어댑터 생성

class RecyclerViewAdapter(private var items: LiveData<ArrayList<RecyclerViewItem>>): RecyclerView.Adapter<RecyclerViewAdapter.RecyclerViewViewHolder>() {

    var recyclerViewItems = ArrayList<RecyclerViewItem>()

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerViewViewHolder {
        val binding = ItemRecyclerviewBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        return RecyclerViewViewHolder(binding)
    }

    override fun onBindViewHolder(holder: RecyclerViewViewHolder, position: Int) {
        items.value?.get(position)?.let {
            holder.bind(it)
            println(it.title)
            println(it.subtitle)
        }
    }

    override fun getItemCount(): Int {
        return items.value?.size!!
    }

    fun setData(newRecyclerViewItems: ArrayList<RecyclerViewItem>){
        val diffCallback = DiffCallback(recyclerViewItems, newRecyclerViewItems)
        val diffResult = DiffUtil.calculateDiff(diffCallback)
        recyclerViewItems.clear()
        recyclerViewItems.addAll(newRecyclerViewItems)
        diffResult.dispatchUpdatesTo(this)
    }

    inner class RecyclerViewViewHolder(private val binding: ItemRecyclerviewBinding): RecyclerView.ViewHolder(binding.root) {

        fun bind(recyclerViewItem: RecyclerViewItem) = with(binding) {
            item = recyclerViewItem
        }

    }

    inner class DiffCallback(
        private var oldList: ArrayList<RecyclerViewItem>,
        private var newList: ArrayList<RecyclerViewItem>
    ): DiffUtil.Callback() {
        override fun getOldListSize(): Int = oldList.size

        override fun getNewListSize(): Int = newList.size

        override fun areItemsTheSame(oldItemPosition: Int, newItemPosition: Int): Boolean {
            return oldList[oldItemPosition] == newList[newItemPosition]
        }

        override fun areContentsTheSame(oldItemPosition: Int, newItemPosition: Int): Boolean {
            return oldList[oldItemPosition].id == newList[newItemPosition].id
        }

    }


}

코틀린 코드에서 recyclerView 사용하기

MainActivity.kt

class MainActivity : AppCompatActivity() {

    private var _binding: ActivityMainBinding? = null
    private val binding get() = _binding!!

    private val items = MutableLiveData<ArrayList<RecyclerViewItem>>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        _binding = ActivityMainBinding.inflate(layoutInflater)
        val viewModel = MainViewModel()
        binding.mainViewModel = viewModel
        binding.lifecycleOwner = this
        setContentView(binding.root)

        val recyclerViewItems: ArrayList<RecyclerViewItem> = ArrayList()


        binding.recyclerView.layoutManager = LinearLayoutManager(this)

        val adapter = RecyclerViewAdapter(viewModel.itemList)
        binding.recyclerView.adapter = adapter


        val dataObserver: Observer<ArrayList<RecyclerViewItem>> = Observer {
            items.value = it
            val adapter = RecyclerViewAdapter(items)
            binding.recyclerView.adapter = adapter
        }

        viewModel.itemList.observe(this, dataObserver)

    }

MainViewModel.kt

class MainViewModel: ViewModel() {

    private val _itemList = MutableLiveData<ArrayList<RecyclerViewItem>>()

    val itemList: LiveData<ArrayList<RecyclerViewItem>> get() = _itemList

    init {
        val recyclerViewItems: ArrayList<RecyclerViewItem> = ArrayList()
        recyclerViewItems.add(RecyclerViewItem(1, "title1", "subtitle1"))
        recyclerViewItems.add(RecyclerViewItem(2, "title2", "subtitle2"))
        recyclerViewItems.add(RecyclerViewItem(3, "title3", "subtitle3"))
        recyclerViewItems.add(RecyclerViewItem(4, "title4", "subtitle4"))
        recyclerViewItems.add(RecyclerViewItem(5, "title5", "subtitle5"))

        _itemList.value = recyclerViewItems
    }

    fun setItemList(recyclerViewItems: ArrayList<RecyclerViewItem>) {
        _itemList.value = recyclerViewItems
    }

}