[Kotlin] RecyclerView 맛보기

RecyclerView란?

1. 정의

안드로이드 공식 문서에서는 다음과 같이 정의하고 있습니다.

A flexible view for providing a limited window into a large data set.

 

직역해 보자면,

아주 큰 데이터 셋을 제한된 창에 보여주기 위한 유연한 뷰

 

라고 볼 수 있습니다.

 

거기에 더해서 이름에 Recycler가 들어가는 이유는 명확합니다.

아이템 뷰라는 것을 통해서 뷰를 재활용하기 때문입니다.

 

2. ListView와의 차이점

ListView는 리스트 항목이 갱신될 때마다, 매번 아이템 뷰를 새로 구성해야 하는데 반면에 RecyclerView는 쓰지 않는(사용자에게 보이지 않는) 뷰를 재사용해서 사용자에게 보여주는 방식이다.

 

이미지로 비교한 걸 보면 더 쉽게 이해할 수 있다.

 

 

3. 구성요소

1. RecyclerView

사용자의 데이터를 리스트 형태로 화면에 표시하는 컨테이너 역할

2. Adapter

사용자의 데이터 리스트로부터 아이템뷰를 만드는 역할을 합니다.

3.LayoutManager

리사이클러뷰가 아이템을 화면에 표시할 때 배치되는 형태를 관리하는 요소

 

1. LinearLayoutManager : vertical(수직) 또는 horizontal(수평) 방향으로 아이템뷰 배치
2. GridLayoutManager : 비율이 같은 격자 형태로 배치
3. StaggeredGridLayoutManger : 엇갈린 격자 형태로 배치

4.ViewHolder

화면에 표시될 아이템뷰를 저장하는 객체

어댑터에 의해 관리되고 필요에 따라 어댑터에서 생성

 

---

RecyclerView 구현

순서는 간단합니다.

리사이클러뷰 추가 > 아이템뷰 레이아웃 추가 > 어댑터 구현 > 리사이클러뷰에서 어댑터, 레이아웃 매니저 지정

 

1. RecyclerView

리사이클러뷰를 보여줄 곳에 추가합니다.

  <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/recyclerView"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       />

 

 

2. itemView

재사용 itemView 파일을 layout 폴더에 만들어줍니다.

<?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="100dp"
    android:orientation="horizontal">
    
    <TextView
        android:id="@+id/textViewNumber"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:textSize="50sp"
        android:textStyle="bold"
        android:gravity="center"
        android:text="0등"
        />

    <TextView
        android:id="@+id/textViewName"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"
        android:textSize="50sp"
        android:textStyle="bold"
        android:gravity="center"
        android:text="아무개"
        />

</LinearLayout>

 

 

저는 이런 식으로 만들어봤습니다.

 

3. data class

아주아주 간단하게 만들어봤습니다.

data class RankData(val number:Int , val name:String)

 

 

4.ViewHolder

Adapter.kt 클래스 안의 내부 클래스로 만들면 된다.

뷰 바인딩을 사용해서 보여주기 때문에 binding을 받아서 전역으로 사용할 예정

상속받는 ViewHolder 생성자에는 꼭 binding.root를 전달해야 한다.

inner class MyViewHolder(private val binding: ItemViewBinding) : RecyclerView.ViewHolder(binding.root){
    fun binding(rankData: RankData){
        binding.textViewNumber.text = rankData.number.toString()
        binding.textViewName.text = rankData.name
    }
}

 

5. Adapter

어댑터의 코드전체는 다음과 같습니다.

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

    var datalist = mutableListOf<RankData>()//리사이클러뷰에서 사용할 데이터 미리 정의 -> 나중에 MainActivity등에서 datalist에 실제 데이터 추가


    inner class MyViewHolder(private val binding: ItemViewBinding) : RecyclerView.ViewHolder(binding.root){
        fun binding(rankData: RankData){
            binding.textViewNumber.text = rankData.number.toString()
            binding.textViewName.text = rankData.name
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        //레이아웃을 객체형태로 변환(inflate)하고 반환해준다.
        val binding=ItemViewBinding.inflate(LayoutInflater.from(parent.context),parent,false)
        return MyViewHolder(binding)
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
       holder.binding(datalist[position])
    }

    override fun getItemCount(): Int = datalist.size
}

 

6. MainActivity

데이터는 임의로 넣어서 만들었고 

순서는 어댑터에 데이터를 넣어주고 그걸 리사이클러뷰에 연결해 주고 레이아웃 매니저를 설정해 주면 된다.

class MainActivity : AppCompatActivity() {

    lateinit var binding:ActivityMainBinding
    lateinit var adapter:MyAdapter

    val mDatas=mutableListOf<RankData>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        initRecyclerView()
        initializelist()

    }

    fun initRecyclerView(){
        val adapter= MyAdapter() //어댑터 객체 만듦
        adapter.datalist=mDatas //데이터 넣어줌
        binding.recyclerView.adapter = adapter //리사이클러뷰에 어댑터 연결
        binding.recyclerView.layoutManager = LinearLayoutManager(this) //레이아웃 매니저 연결
    }

    fun initializelist(){ //임의로 데이터 넣어서 만들어봄
        with(mDatas){
            add(RankData(1,"harry1"))
            add(RankData(2,"harry2"))
            add(RankData(3,"harry3"))
            add(RankData(4,"harry4"))
            add(RankData(5,"harry5"))
            add(RankData(6,"harry6"))
            add(RankData(7,"harry7"))
            add(RankData(8,"harry8"))
            add(RankData(9,"harry9"))
            add(RankData(10,"harry10"))
            add(RankData(11,"harry11"))
            add(RankData(12,"harry12"))

        }
    }
}

 

 

7. 결과

 

짜잔~~

야무진 리사이클러뷰 맛보기 완료!

 

끝!