[Android] RecyclerView

리사이클러뷰는 리스트뷰의 성능을 향상시키기 위해 나온 개념이다.

 

리사이클러뷰를 구현하기 위해선 아래가 필요하다.

 

• 메인 액티비티 코틀린 코드, xml
• 데이터 클래스
• 뷰홀더 xml
• 어댑터 클래스

 

메인 액티비티 xml 코드

// activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    ...>
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

recyclerView 위젯을 넣어주면 된다.

 

메인 액티비티 코틀린 코드, 데이터 클래스

일단, recyclerview 화면에 띄울 데이터를 정의해야한다.

데이터는 보통 한개의 값만 들어있지 않기 때문에 따로 data class를 생성하는 것이 좋다.

// MyItem.kt
data class MyItem(val icon:Int, val name:String, val age:String)

// MainActivity.kt (onCreate() 내부)
val dataList = mutableListOf<MyItem>()
dataList.add(MyItem(R.drawable.character1, "Bella", "1"))
...

 

데이터를 생성했으면 이제 어댑터를 만들고 recyclerview의 어댑터와 연결해줘야한다.

// MainActivity.kt (onCreate() 내부)
val adapter = MyAdapter(dataList)
binding.recyclerView.adapter = adapter
binding.recyclerView.layoutManager = LinearLayoutManager(this)

아래에서 recyclerView 생성을 위핸 MyAdapter 클래스 코드를 설명할 것이다.

만든 어댑터를 연결시켜주고, 특히 recyclerview의 경우 layoutManager도 설정해줘야한다.

 

뷰홀더 xml

일단은, recyclerview 위젯 쪽에 배치할 뷰를 만들어야 한다.

// item_recyclerview.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <ImageView
       .../>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:orientation="vertical">
        <TextView
            .../>
        <TextView
            .../>
    </LinearLayout>
</LinearLayout>

item_recyclerview.xml

어댑터 생성

아까 메인액티비티 코틀린 코드에서 있는 MyAdapter 부분을 이제 만들어야 한다. 

아래는 전체 코드이고, 중요한 부분만 다시 꺼내와서 설명하겠다!

class MyAdapter(val dataList: MutableList<MyItem>) : RecyclerView.Adapter<MyAdapter.Holder>() {

    inner class Holder(val binding: ItemRecyclerviewBinding) :
        RecyclerView.ViewHolder(binding.root) {
        val iconImageView = binding.iconItem
        val name = binding.textItem1
        val age = binding.textItem2
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): Holder {
        val binding = ItemRecyclerviewBinding.inflate(
            LayoutInflater.from(parent.context), parent,
            false
        )
        return Holder(binding)
    }


    override fun onBindViewHolder(holder: Holder, position: Int) {
        holder.itemView.setOnClickListener {
            itemClick?.onClick(it, position)
        }
        holder.iconImageView.setImageResource(dataList[position].icon)
        holder.name.text = dataList[position].name
        holder.age.text = dataList[position].age
    }


    override fun getItemId(position: Int): Long {
        return position.toLong()
    }

    override fun getItemCount(): Int {
        return dataList.size
    }
}

 

뷰홀더 정의

inner class Holder(val binding: ItemRecyclerviewBinding) :
        RecyclerView.ViewHolder(binding.root) {
        val iconImageView = binding.iconItem
        val name = binding.textItem1
        val age = binding.textItem2
    }

 

일단은 recyclerView의 경우에는 생성할 Adapter 안에 뷰홀더가 꼭 있어야 한다. binding은 아까 커스텀한 xml 파일을 기반으로 가져오면 된다. 뷰홀더는 데이터를 저장하는 것으로, 바인딩을 통해 xml로부터 데이터를 가져온다.

 

뷰홀더 실제 생성

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): Holder {
        val binding = ItemRecyclerviewBinding.inflate(
            LayoutInflater.from(parent.context), parent,
            false
        )
        return Holder(binding)
    }

 

위에는 뷰홀더를 정의한 것이고, 실제 생성은 onCreateViewHolder에서 한다.

여기서 바인딩을 정의하고 아까 정의한 클래스 내부에 바인딩을 넣어주고 return 하면 된다.

 

실제 데이터를 전체 돌면서 뷰홀더의 값을 보여줌 (가장 중요한 코드)

override fun onBindViewHolder(holder: Holder, position: Int) {
        holder.itemView.setOnClickListener {
            itemClick?.onClick(it, position)
        }
        holder.iconImageView.setImageResource(dataList[position].icon)
        holder.name.text = dataList[position].name
        holder.age.text = dataList[position].age
    }

 

이 코드에서는 실제로 dataList 에서 정의한 Item 데이터 갯수만큼 돌면서 화면에 뷰를 뿌린다.

position은 0부터 시작해서 dataList에 정의된 갯수만큼 돌고,

holder에 정의된 데이터 값들을 position 마다 정해줘서 화면에 보여준다.

 

리사이클러뷰 화면

 

위의 코드를 기반으로 실행한 화면이다! (메이플은 초딩때 좋아했던 게임이라.. 예시로 가져왔다..ㅎㅎ)

리스트뷰보다 효율적인 성능을 가지고 동작할 수 있다.