리사이클러뷰(RecyclerView)

1. 안드로이드 리사이클러뷰

"큰 데이터 집합에 대한 제한된 창을 제공하기 위한 유연한 보기"

안드로이드 공식문서에 있는 리사이클러뷰에 대한 정의를 번역한 내용이다.

 

간단한 설명을 덧붙이자면

사용자가 관리하는 ArrayList의 요소들을 서로 다른 아이템으로 생성하고

리스트로 한눈에 볼 수 있도록 하는 뷰이다.

 

리사이클러뷰 이전에는 리스트뷰로 여러 아이템들을 표현해주었다.

 

리사이클러뷰가 리스트뷰의 기능을 이어받아 그 기능을 담당하는 것인데

Recycle 이라는 용어가 붙은 이유는 아래의 그림으로

두 위젯이 동작하는 방식을 살펴보면 단번에 이해할 수 있다.

리스트뷰는 스크롤 할 때마다 화면에서 사라지는 가장위의 아이템을 삭제하고

가장 아래에 새로운 아이템을 생성한다. 이런 삭제 및 생성 횟수가 늘어날수록 사용량이 매우 높아지게 된다.

 

반면 리사이클러뷰는 가장위의 아이템을 삭제하는것이 아니라 재활용해서 맽 밑으로 옮기는 구조다.

아이템의 데이터만 수정하고 View는 재활용하는 구조이기 때문에 리사이클러뷰라는 이름이 붙었다.

즉 새로운 View 를 만드는게 아닌 리스트뷰 대비 좋은 효율을 낼 수 있다.

 

 

2. 리사이클러뷰의 구성 요소

리사이클러뷰는 ArrayList의 요소를 아이템 단위 View로 생성해서 화면에 표시하기 위해 Adapter를 사용한다.

Adapter에 의해 생성된 itemView를 어떤 방식으로 나열할지 결정하기 위해서 Layout Manager를 이용한다.

이 Layout Manager가 제공하는 형태로 Adpater가 생성한 itemView를 ViewHolder 객체에 저장되어 화면에 표시하게 된다.

 

간단한 예제를 보면서 알아보자.

 

 

 

3. 리사이클러뷰 예제

간단한 리사이클러뷰를 만들어보면서 위에 내용을 이해해보자면

학생 클래스의 학생객체를 만들어 리사이클러뷰에 띄워주는 예제를 만들어보 겠다.

 

먼저 메인 액티비티의 레이아웃 이다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="학생"
        android:textSize="30sp"/>

    <androidx.recyclerview.widget.RecyclerView
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        android:id="@+id/recyclerViewStudent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

 

 

그리고 아래쪽에 xml이 리사이클러뷰에 들어갈 itemVIew의 코드이다.

<?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:padding="20dp"
    android:orientation="horizontal">

    <TextView
        android:layout_gravity="left"
        android:id="@+id/textViewStudentName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:textColor="@color/black"
        android:textStyle="bold"
        android:text="학생 이름" />

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <TextView
        android:layout_gravity="center"
        android:id="@+id/textViewStudentAge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="학생 나이"/>

</LinearLayout>

 

 

Student 클래스(Data 클래스)

package com.example.rvtest

data class Student(var name: String,var age: Int)

 

 

메인 액티비티

package com.example.rvtest

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {

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

        // 리사이클러뷰 초기화
        val recyclerView: RecyclerView = findViewById(R.id.recyclerViewStudent)

        // 학생클래스 어레이리스트 초기화
        val studentList: ArrayList<Student> = ArrayList()

        // 학생 객체 3개를 임의로 만들어주고 어레이 리스트에 add 해준다.
        val student1 = Student("sam",19)
        val student2 = Student("oscar",17)
        val student3 = Student("harry",18)

        studentList.add(student1)
        studentList.add(student2)
        studentList.add(student3)

        // 리사이클러뷰에 연결될 어댑터를 초기화 해준다.
        val adapter = Adapter()

        // 어댑터에 전역변수에 선언되어 있는 ArrayList를 액티비티에서 만들어준
        // ArrayList와 연결해준다.
        adapter.studentList = studentList

        // 리사이클러뷰에 어댑터를 연결해준다.
        recyclerView.adapter = adapter

    }

}

 

 

 

어댑터 클래스

package com.example.rvtest

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import java.util.ArrayList

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

    lateinit var studentList: ArrayList<Student>
    
    // onCreateViewHolder 메서드는 뷰가 만들어질때 호출된다.
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {

        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_view,parent,false)

        return MyViewHolder(view)

    }

    // 리스트의 길이를 리턴해주는 메서드
    override fun getItemCount(): Int {

        return studentList.size

    }

    // onBindViewHolder는 뷰가 바인드 될때 호출되는 메서드다.
    // onCreateViewHolder에서 뷰가 만들어 졌다면
    // onBindViewHolder는 뷰가 초기화되는 메서드다.
    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {

        // onBind 메서드를 통해 아이템뷰의 뷰의 값을 지정해준다.
        holder.onBind(studentList[position])

    }

    // ViewHolder는 어댑터 클래스 외부 혹은 내부에 RecyclerView.ViewHolder 클래스를 상속받는다.
    // ViewHolder 내부 클래스에서 itemView의 View들을 연결해준다.
    class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

        private val textViewStudentName: TextView = itemView.findViewById(R.id.textViewStudentName)
        private val textViewStudentAge: TextView = itemView.findViewById(R.id.textViewStudentAge)

        fun onBind(student: Student){

            textViewStudentName.text = student.name
            textViewStudentAge.text = student.age.toString()

        }

    }

}

 

 

실행 결과

 

위에 예제 코드를 잘 따라왔다면 이런 리사이클러뷰를 구현할 수 있다.

필요한 내용은 주석으로 간단하게 정리해놨으니

어렵지 않게 리사이클러뷰를 구현할 수 있다.