Android

[Android] RecyclerView(리사이클러뷰)

JunsuKim 2022. 8. 20.
728x90

RecyclerView란?

스마트폰을 사용하다 보면, 여러 가지 항목들이 나열돼있는 목록 화면들을 볼 수 있다.

이러한 목록 화면을 만들 때 사용하는 것이 RecyclerView이다.

 

RecyclerView를 정의해보자면,

사용자가 관리하는 데이터 집합을 각각의 아이템 단위로 구성하며 대량의 데이터 목록을 동적으로 표현해주는 뷰이다.

Recycler를 해석해보면 재사용이듯이, RecyclerView는 재사용성이 좋다.

RecyclerView의 구성 요소

RecyclerView를 이용하여 목록을 만들 때, RecyclerView 클래스만으로는 화면에 아무것도 출력되지 않는다.

다음과 같은 구성 요소를 이용해야만 원하는 목록을 만들 수 있다.

  • ViewHolder : 항목에 필요한 뷰 객체를 갖는다.
  • Adapter : 항목을 구성한다.
  • LayoutManager : 항목을 배치한다.

이해를 돕기 위해 다음을 보자.

이는 유튜브 뮤직의 창이다. 이 또한 RecyclerView를 사용하여 원하는 노래들을 계속하여 추가시킨다.

이처럼 ViewHolder는 각 항목을 구성하는 뷰 객체를 갖는다.

Adapter는 ViewHolder에 있는 뷰 객체를 이용하여 항목(item)을 구성한다.

이제 완성된 항목을 LayoutManager의 정렬 기준에 따라 배치해 출력해주게 된다.

 

LayoutManager는 RecyclerView에 항목(item)을 어떻게 정렬할지 정해주는 역할을 한다.

  • LinearLayoutManager: 가장 많이 쓰이는 레이아웃이다. 수평, 수직 스크롤을 제공하는 목록을 만들 수 있다.
  • GridLayoutManager: 격자 형식의 레이아웃을 만들 수 있다. ex) 사진첩
  • StaggeredGridLayoutManager: 격자 형식의 레이아웃이나, GridLayoutManager와는 다르게 너비와 높이를 자유롭게 변경 가능하다.

RecyclerView를 화면에 올린 후, 3가지 작업 중 가장 먼저 해야 하는 것이 LayoutManager를 결정하는 것이다.

이는 다음과 같은 형식으로 적용시킨다.

// LinearLayoutManager 적용
recyclerView.layoutManager = LinearLayoutManager(this)

// GridLayoutManager 적용
recyclerView.GridLayoutManager(this)

// StraggeredGridLayoutManager 적용
recyclerView.StaggeredGridLayoutManager(this)

 

Adapter와 ViewHolder 구현

레이아웃을 어떻게 배치할지 정했으면, Adapter와 ViewHolder를 구현해야 한다.

ViewHolder에서는 위에서도 봤듯이 뷰 객체들을 갖는다.

class ViewHolder(view: View): RecyclerView.ViewHolder(view) {
    val numberText: TextView = view.findViewById(R.id.number_text)
    val nameTextView: TextView = view.findViewById(R.id.name_text)
}

Adapter는 ViewHolder의 View에 데이터를 출력해 각 항목(item)을 만든다고 하였다.

RecyclerView를 위한 어댑터는 RecyclerView.Adapter를 상속받아 작성하여야 한다.

Adapter에는 재정의해야 하는 3가지 함수가 있다.

  • getItemCount(): 항목(item)의 개수가 몇 개인지를 알기 위해 호출한다.
  • onCreateViewHolder(): 항목(item)의 뷰를 가지는 ViewHolder를 준비하기 위해 호출한다.
  • onBindViewHolder(): ViewHolder의 뷰에 데이터를 출력하기 위해 호출한다.
class ItemAdapter: RecyclerView.Adapter<ItemAdapter.ViewHolder>() {
	override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    	TODO(". . .")
    }
    
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    	TODO(". . .")
    }
    
    override fun getItemCount(): Int {
    	TODO(". . .")
    }
}

항목 동적 추가, 제거

RecyclerView에서 항목(item)을 추가 및 삭제해야 할 일은 없을 수 없다.

이때 notifyDataSetChanged() 함수를 호출하면 된다.

위의 Adapter 코드에 추가로 써보겠다.

class ItemAdapter: RecyclerView.Adapter<ItemAdapter.ViewHolder>() {
	private val list = mutableListOf()
    
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    	TODO(". . .")
    }
    
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    	TODO(". . .")
    }
    
    override fun getItemCount(): Int {
    	TODO(". . .")
    }
}

fun addData(data: ItemData) {
    list.add(data)
    notifyDataSetChanged()
}

RecyclerView를 이용한 데이터 입력

https://github.com/junsu1023/Android-Study/tree/recyclerview

 

GitHub - junsu1023/Android-Study: Android 공부

Android 공부. Contribute to junsu1023/Android-Study development by creating an account on GitHub.

github.com

전체적인 코드는 위 링크인 깃허브에서 확인하면 된다.

구현

  • 이름 입력 후 +버튼 클릭 시 RecyclerView에 번호와 이름 추가
    - 이름을 입력하지 않고 +버튼을 누르면 아무 일도 일어나지 않는다.
  • 항목(item)의 이름 칸을 짧게 클릭 시 다이얼로그와 함께 수정을 할 수 있게 해 준다.
  • 항목(item)의 이름 칸을 길게 클릭 시 다이얼로그와 함께 삭제를 할 수 있게 해 준다.

728x90

댓글