안드로이드 리사이클러뷰(RecyclerView) 사용하기

 

영어 한국어 일본어 중국어 (간체) 중국어 (번체) 베트남어 인도네시아어 태국어 독일어 러시아어 스페인어 이탈리아어 프강스어

복사하기

 

이 확장을 지원합니다

ㅇ

이번 글에서는 RecyclerView를 사용하는 방법에 대해서 알아보도록 하자.

 

RecyclerView

---

안드로이드에서 어떤 항목들의 리스트를 보여줄 때에는 ListVIew와 RecyclerView를 사용할 수 있다.

둘의 차이점에 대해서는 아래 링크에서 확인해 볼 수 있다.

https://angangmoddi.tistory.com/287

리스트뷰(List View) vs 리사이클러뷰(Recycler View)

 

RecyclerView를 사용하기 위해선 Adapter와 ViewHolder를 정의해주어야 하는데,

이 둘에 대한 설명도 위 글에 적혀있으니 확인해보길 바란다.

 

Item XML

---

먼저 리스트의 각 아이템이 어떤 형태로 보여질지 Xml파일을 작성해보도록 하자.

이번 글에선 간단하게 텍스트만 보여주는 리스트를 만들것이기 때문에

아래와 같이 TextView가 하나 있는 XML파일을 작성해주도록 하자.

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

    <TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:textSize="25dp"
        android:gravity="center" />

</FrameLayout>

 

 

Adapter, ViewHolder

---

다음으로 Adapter와 ViewHolder를 정의해주도록 하자.

class AnimalAdapter(
    private val animalList: ArrayList<String>
): Adapter<AnimalViewHolder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): AnimalViewHolder {
        val binding = ItemAnimalBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        return AnimalViewHolder(binding)
    }

    override fun onBindViewHolder(holder: AnimalViewHolder, position: Int) {
        val item = animalList[position]
        holder.binding.textView.text = item
    }

    override fun getItemCount(): Int = animalList.count()
}

class AnimalViewHolder(val binding: ItemAnimalBinding): ViewHolder(binding.root)

가장 먼저 Adapter의 onCreateViewHolder에선 ViewHolder객체를 만들어서 반환해주어야 한다.

 

그 다음 onBindViewHolder에서 각 아이템에 접근할 수 있는데,

이 글에선 animalList라는 데이터 리스트에서 각 아이템 위치에 있는 데이터를 뽑은 뒤

이를 View에 있는 TextView의 text로 넣어주는 작업을 한다.

 

마지막으로 getItemCount는 화면에 보여줄 리스트 아이템의 갯수를 반환해주면 되는데,

간단하게 입력된 데이터의 크기를 반환해주면 된다.

위에서는 데이터를 list로 받았기 때문에 list.count()를 사용해 반환해주었다.

 

ViewHolder에선 화면에 보여줄 각 아이템의 View를 argument로 주어야 하기 때문에

binding을 parameter로 받은 뒤 상속받는 ViewHolder클래스에 binding.root를 argument로 주었다.

 

 

MainActivity

---

마지막으로 MainActivity에서 RecyclerView와 Adapter를 연결해서 화면에 보여주도록 해보자.

MainActivity의 코드는 아래와 같이 되어있는데, Adapter를 생성할 때 animalList를 생성하여서 arguemt로 주고 이를 recyclerView의 adapter로 지정해준다.

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

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

        binding.recyclerView.adapter = AnimalAdapter(
            arrayListOf("호랭이", "곰", "사자", "기린", "하마", "고양이", "쥐", "뱀", "강아지", "코뿔쏘", "코끼리", "치타", "늑대", "춘식이")
        )
    }
}

 

XML파일도 RecyclerView만 있는 간단한 뷰로 만들었다.

RecyclerView에서 layoutManager는 아이템을 어떠한 형식으로 보여줄건지 지정해 줄 수 있다.

이 글에선 LinearLayoutManager를 사용하였고, orientation을 vertical로 지정해주었기 때문에

각 아이템들이 세로로 나열되어서 화면에 보여진다.

 

추가로 listItem에 RecyclerView에 보여줄 Item View를 넣으면 화면에 어떻게 보이는지 Design에서 확인해 볼 수 있다.

<?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/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:listitem="@layout/item_animal"/>

</androidx.constraintlayout.widget.ConstraintLayout>