[Kotlin][Android] 안드로이드 RecyclerView(리싸이클러 뷰)의 사용방법

안녕하세요 👋

오늘은 RecyclerView에 대해서 공부한 내용을

포스팅해보려 합니다.

 

RecyclerView(리싸이클러 뷰)란?

---

RecyclerView는 ListView처럼 제한된 화면(Window)에 대용량 데이터 셋을 보여줄 때 사용합니다.

ListView는 새로운 데이터가 생성될 때 View를 계속 새로 생성 하지만 RecyclerView는

미리 생성된 View를 계속 '재활용(Recycle)' 하여 사용합니다.

그러므로 ListView에 비해 메모리 사용적으로

효율적이라고 볼 수 있습니다.

---

RecyclerView.ViewHolder

RecyclerView를 구성하는 View의 ViewHolder로 View의 컴포넌트들을 가지고 있습니다.

RecyclerViewAdapter를 통해 ViewHolder와 List를 bind 하여 RecyclerView의 보여줍니다.

 

RecyclerView.Adapter

RecyclerView에 미리 생성한 ViewModel과 ViewHolder를 bind하여 표시해주는 역할을 합니다.

getItemCount() , onCreateViewHolder() , onBindViewHolder()를 구현하여야 합니다.

---

getItemCount()

RecyclerView가 가지고 있는 item의 갯수를 반환해주기 위한 함수입니다.

 

onCreateViewHolder()

ViewHolder가 생성될때 호출되는 콜백 함수로 생성된 ViewHolder를 반환해주어야 합니다.

 

onBindViewHolder()

생성된 ViewHolder를 RecyclerView에 표시할 때 호출되는 콜백 함수로 View가 업데이트되고

표시되기 전에 처리를 구현하면 좋습니다.

 

---

그렇다면 ViewHolder와 Adapter를 어떻게 구현하는지 코드를 통해 알아보겠습니다. 😎

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_margin="10dp"
        >
        <ImageView
            android:id="@+id/imageView"
            android:src="@mipmap/ic_launcher"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="테스트"
            android:layout_gravity="center_vertical"
            android:gravity="center"
            />
    </LinearLayout>
</RelativeLayout>

1. 먼저 RecyclerView에 담을 레이아웃을 생성합니다.

 

package com.lee.recyclerviewexample.recyclerview

data class RecyclerVO (
    val imageResource : Int ,
    val text : String = ""
)

2. RecyclerView에서 사용할 ViewModel class를 생성해줍니다.

 

package com.lee.recyclerviewexample.recyclerview

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.lee.recyclerviewexample.databinding.RecyclerViewHolderLayoutBinding

class RecyclerViewAdapter : RecyclerView.Adapter<RecyclerViewAdapter.RecyclerViewHolder>() {
    private var mModelList = mutableListOf<RecyclerVO>()

    companion object{ // Singleton으로 반환
        private lateinit var instance : RecyclerViewAdapter
        fun getInstance() : RecyclerViewAdapter{
            if(!::instance.isInitialized){
                instance = RecyclerViewAdapter()
            }
            return instance
        }
    }

    override fun getItemCount() = mModelList.size

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

    override fun onBindViewHolder(holder: RecyclerViewHolder, position: Int) {
        holder.bind(mModelList[position])
    }

    fun setRecyclerViewList(list : MutableList<RecyclerVO>){
        mModelList = list
    }

    inner class RecyclerViewHolder(private val binding : RecyclerViewHolderLayoutBinding) : RecyclerView.ViewHolder(binding.root) {
        fun bind(model : RecyclerVO){
            with(binding){
                textView.text = model.text
                imageView.setImageResource(model.imageResource)
            }
        }
    }

}

3. RecyclerView.Adapter와 ViewHolder를 구현해줍니다.

 

위와 같이 ViewHolder의 경우 inner class로 Adapter class 내부에 선언을 하는 경우가 많습니다.

Adapter의 경우에는 제너릭을 통해 어떤 ViewHolder를 담을 것인지 정하여 구현해주며

위에서 설명한 getItemCount() , onCreateViewHolder() , onBindViewHolder()를 구현하여 사용해줍니다.

 

---

그렇다면 위처럼 구현한 RecyclerView를 어떻게 사용해야 하는 걸까요?? 🤔

아래 코드로 확인해보겠습니다.

 

<?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="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:listitem="@layout/recycler_view_holder_layout"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

1. layout에 RecyclerView를 추가해줍니다.

 

package com.lee.recyclerviewexample

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import com.lee.recyclerviewexample.databinding.ActivityMainBinding
import com.lee.recyclerviewexample.recyclerview.RecyclerVO
import com.lee.recyclerviewexample.recyclerview.RecyclerViewAdapter

class MainActivity : AppCompatActivity() {
    private lateinit var binding : ActivityMainBinding

    private var mList = mutableListOf<RecyclerVO>()
    private lateinit var mRecyclerViewAdapter : RecyclerViewAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater).also {
            setContentView(it.root)
        }
        for(i in 1 .. 10){
            mList.add(RecyclerVO(R.mipmap.ic_launcher_round , i.toString()))
        }
        initRecyclerAdapter()


    }

    private fun initRecyclerAdapter() {
        with(binding){
            mRecyclerViewAdapter = RecyclerViewAdapter.getInstance()
            recyclerView.layoutManager = LinearLayoutManager(this@MainActivity , LinearLayoutManager.VERTICAL , false) // true : 역방향 , false : 정방향 으로 데이터를 추가한다.
            mRecyclerViewAdapter.setRecyclerViewList(mList)
            recyclerView.adapter = mRecyclerViewAdapter
        }
    }
}

2. RecyclerView의 adapter를 구현한 adpter로 설정해주어 사용합니다.

 

실행화면

 

실행결과 위와 같이 10개의 리스트가 추가되는 것을 확인할 수 있습니다.

 

RecyclerView는 현재 매우 많은 곳에서 활용하고 있는 것으로 보이기에

더 공부하여 많이 익숙해져야 할 것 같습니다.

 

이상으로 RecyclerView의 포스팅을 마치겠습니다.

 

오늘도 즐코하세요 :)