RecyclerView 로 listview 구현 방법 마스터하기

모바일 앱을 만들면서 매우 중요한 listView를 만들 때 필요한 것이,

바로 RecyclerView인데요.

오늘은 RecycleView를 구현하는 방법에 대해 정리해 보겠습니다.

최종적으로 만들려고 하는 형태는 다음과 같습니다.

 

 

1. 라이브러리 implement

역시나 Library부터 설정하고 가겠습니다.

Dependencies에서 recyclerview로 검색하셔서 파란색 하이라이트된 라이브러리를 선택해 추가하시면 됩니다.

 

implementation "androidx.recyclerview:recyclerview:1.3.2"

 

2. 데이터 클래스 생성

여러 데이터를 화면에 보여주기 위해서는,

그 데이터들의 모델클래스를 먼저 생성해 주어야 합니다.

간단한 Student 클래스를 만들도록 하겠습니다.

 

data class Student(
    val id: Int,
    val name: String,
    val score: Int
)

 

 

3. 데이터를 그려낼 UI생성

데이터를 그려줄 UI를 작성해 줍니다.

간단하게 위아래로 텍스트 두개가 들어가는 형태입니다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="16sp"/>

    <TextView
        android:id="@+id/tvScore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"/>
</LinearLayout>

 

4. ViewHolder 생성

이제 ViewHolder를 작성해 줍니다.

 

뷰홀더는 뷰를 가지고 있다가,

UI를 반복시킬 때 사용합니다.

RecyclerView의 Recycle은 뷰들을 재활용한다는 의미도 가지고 있습니다.

bind함수가 아이템과 뷰를 묶어 주고,

클릭리스너도 설정해줍니다.

 

class StudentViewHolder(
    private val binding: ItemStudentBinding,
    private val onItemClick: (Student) -> Unit
) : RecyclerView.ViewHolder(binding.root) {
    
    fun bind(student: Student) {
        binding.apply {
            tvName.text = student.name
            tvScore.text = "${student.score}점"
            root.setOnClickListener { onItemClick(student) }
        }
    }
}

 

 

이에 관해서는 아래 글을 참조해주세요.

 

>> ViewBinding 구현방법 마스터하기

ViewBinding 구현방법 마스터하기

 

5.  Adapter 생성

Adapter클래스는 UI와 데이터를 연결시켜 줍니다.

 

5-1. DiffUtil구현

Adapter를 구현하기 전에,

Adapter에 전달할,

Diff유틸을 먼저 구현해 주겠습니다.

 

class StudentDiffCallback : DiffUtil.ItemCallback<Student>() {
    override fun areItemsTheSame(oldItem: Student, newItem: Student): Boolean {
        return oldItem.id == newItem.id
    }

    override fun areContentsTheSame(oldItem: Student, newItem: Student): Boolean {
        return oldItem == newItem
    }
}

 

5-2. Adpater구현

리스트의 아이템을 클릭할 때, 

클릭리스너를 설정해야 하므로,

Adapter클래스의 인자로 리스너를 하나 받고요.

 

추상 클래스인 ListAdapter<>클래스를 상속받아 구현하였습니다.

이 ListAdapter은 예전에 Adapter 구현할 때 상속받던, Adapter<ViewHolder>를 상속받고 있습니다.

리스트와 DiffUtil을 전달해 주면 됩니다.

 

 

구현해야할 사항들은 다음과 같습니다.

• onCreateViewHolder(): 위에서 생성한 ViewHolder구현에 관한 부분
• onBindViewHolder(): 위의 ViewHolder의 bind함수를 이용해,
  adapter의 데이터와 ViewHolder를 이어줍니다.

예전에 구현하던 방법에서는,

내부 리스트에 대한 부분을 구현했어야 했는데요.

이 부분은 ListAdapter가 대신 처리해 줍니다.
아이템에 접근하는 방법은,

getItem(position)을 해주면 됩니다.

 

class StudentAdapter(
    private val onItemClick: (Student) -> Unit
) : ListAdapter<Student, StudentViewHolder>(StudentDiffCallback()) {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): StudentViewHolder {
        return StudentViewHolder(
            ItemStudentBinding.inflate(
                LayoutInflater.from(parent.context),
                parent,
                false
            ),
            onItemClick
        )
    }

    override fun onBindViewHolder(holder: StudentViewHolder, position: Int) {
        holder.bind(getItem(position))
    }
}

 

 

 

6. Activity에서 RecyclerView 배치

Activity의 xml에 recyclerView를 배치해 줍니다.

 

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

7. Acitivty에서 구현

이제 Activity에서 실제 데이터를 넣고,

Adapter의 객체를 생성하면서,

클릭할 경우의 액션에 대해서 구현해 주고요.

 

binding으로 recyclerView에 접근해서,

생성한 adapter와 LayoutManger를 넣어줍니다.

 

마지막으로 adapter에 데이터를 넣어주기만 하면 되는데요.

예전에는 Adapter에 addAll()같은 함수를 직접 생성해서 데이터를 받았는데,

이제는 그냥 submitList()함수를 사용하기만 하면 됩니다.

 

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

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        initAdapter()
        setupRecyclerView()
        loadStudents()
    }

    private fun initAdapter() {
        studentAdapter = StudentAdapter { student ->
            Toast.makeText(
                this,
                "${student.name}님의 점수는 ${student.score}점입니다.",
                Toast.LENGTH_SHORT
            ).show()
        }
    }

    private fun setupRecyclerView() {
        binding.recyclerView.adapter = studentAdapter
        binding.recyclerView.layoutManager = LinearLayoutManager(this@MainActivity)
    }

    private fun loadStudents() {
        val studentList = listOf(
            Student(1, "김지원", 85),
            Student(2, "이원희", 92),
            Student(3, "박이지", 78),
            Student(4, "정지영", 95),
            Student(5, "이수한", 88)
        )
        studentAdapter.submitList(studentList)
    }
}

 

이상으로 Android RecyclerView 로 listview 구현하는 방법에 대해 정리해 보았습니다.