[Android 기초] 12. 리사이클러뷰 (RecyclerView)

2024. 4. 9. 16:38, 📱Android Study

1. RecyclerView

실무에서 가장 많이 사용하는 뷰
안드로이드 앱에서 리스트 형태의 데이터를 표시하는데 사용되는 위젯
여러 아이템을 스크롤 가능한 리스트로 표현하며, 많은 아이템을 효율적으로 관리하고 보여주는 역할
한정적인 화면에 많은 데이터를 넣을 수 있는 View
Recycle을 한국어로 하면 재활용하다라는 뜻 → View를 재활용해서 사용

02. ListView 와 RecyclerView의 차이점

2-1. ListView

사용자가 스크롤 할 때마다 위에 있던 아이템은 삭제되고, 맨 아래의 아이템은 생성 되길 반복
아이템이 100개면 100번 삭제 및 생성
계속 삭제와 생성을 반복하므로 성능에 좋지 않음

2.2 RecyclerView

사용자가 스크롤 할 때, 위에 있던 아이템은 재활용 돼서 아래로 이동하여 재사용
즉 아이템이 100개여도 10개정도의 View만 만들고 10개를 재활용해서 사용
View를 계속 만드는 ListView의 단점을 보완하기 위해 등장

03. RecyclerView 사용법

💡 Adapter

데이터 테이블을 목록 형태로 보여주기 위해 사용되는 것
데이터를 다양한 형식의 리스트 형식으로 보여주기 위해서 데이터와 RecyclerView 사이에 존재하는 객체
데이터와 RecyclerView 사이의 통신을 위한 연결체

💡 ViewHolder

화면에 표시될 데이터나 아이템들을 저장하는 역할
스크롤 해서 위로 올라간 View를 재활용하기 위해서 이 View를 기억하는 역할

2-1. XML 정의

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView // 리사이클러뷰 XML에 입력
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       />
       
</LinearLayout>

2-2. 어댑터 클래스정의

앞서 정의한 MyItem 타입의 객체들을 ArrayList로 관리하는 MyAdapter클래스를
RecyclerView.Adapter로 파생하여 정의

MyAdapter.kt 


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

    interface ItemClick {
        fun onClick(view : View, position : Int)
    }

    var itemClick : ItemClick? = null

    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(mItems[position].aIcon)
        holder.name.text = mItems[position].aName
        holder.age.text = mItems[position].aAge
    }

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

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

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

2-3. 메인액티비티 정의

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

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

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

        // 데이터 원본 준비
        val dataList = mutableListOf<MyItem>()
        dataList.add(MyItem(R.drawable.sample_0, "Bella", "1"))
        dataList.add(MyItem(R.drawable.sample_1, "Charlie", "2"))
        dataList.add(MyItem(R.drawable.sample_2, "Daisy", "1.5"))
        dataList.add(MyItem(R.drawable.sample_3, "Duke", "1"))
        dataList.add(MyItem(R.drawable.sample_4, "Max", "2"))
        dataList.add(MyItem(R.drawable.sample_5, "Happy", "4"))
        dataList.add(MyItem(R.drawable.sample_6, "Luna", "3"))
        dataList.add(MyItem(R.drawable.sample_7, "Bob", "2"))

        binding.recyclerView.adapter = MyAdapter(dataList)

        val adapter = MyAdapter(dataList)
        binding.recyclerView.adapter = adapter
        binding.recyclerView.layoutManager = LinearLayoutManager(this)

        adapter.itemClick = object : MyAdapter.ItemClick {
            override fun onClick(view: View, position: Int) {
                val name: String = dataList[position].aName
                Toast.makeText(this@MainActivity," $name 선택!", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

✨ 뷰 바인딩을 이용한 최신 예시, 멀티 뷰타입

어댑터

package com.limheejin.camp_standard4.presentation

import android.content.Intent
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.limheejin.camp_standard4.data.CardData
import com.limheejin.camp_standard4.data.priceDecimal
import com.limheejin.camp_standard4.databinding.ItemCard1Binding
import com.limheejin.camp_standard4.databinding.ItemCard2Binding
import com.limheejin.camp_standard4.databinding.ItemCard3Binding

class CardAdapter(private val cardItems: List<CardData>) : // 어댑터 객체를 생성할 때, 만들어놓은 데이터 클래스를 인수로 받아줌
    RecyclerView.Adapter<RecyclerView.ViewHolder>() {  // RecyclerView.Adapter<아래에 만들 뷰홀더 클래스>를 상속 (뷰홀더 패턴으로 구현)

        interface ItemClick {
            fun onClick(view: View, position: Int)
        }

    var itemClick: ItemClick? = null

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder { // 위에서 만든 뷰홀더의 객체를 생성하는 부분, 10번 정도 실행되고 안 됨
        // 아이템을 담은 xml의 뷰 바인딩 객체 생성
        return when(viewType){
                TYPE_1 -> {
                    val binding = ItemCard1Binding.inflate(LayoutInflater.from(parent.context), parent, false)
                    MultiViewHolder1(binding)
                }
                TYPE_2 -> {
                    val binding = ItemCard2Binding.inflate(LayoutInflater.from(parent.context), parent, false)
                    MultiViewHolder2(binding)
                }
                else -> {
                    val binding = ItemCard3Binding.inflate(LayoutInflater.from(parent.context), parent, false)
                    MultiViewHolder3(binding)
                }
        }
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) { // 정보를 바인딩 하는 부분. 처음 어댑터 객체를 생성할 때 인수로 받은 데이터를, 위의 뷰홀더 객체에 어떻게 넣어줄지 결정하는 부분
       //포지션은 리스트에서 어느 위치에 있는지

        var currentItem = cardItems[position]
        when(holder.itemViewType){
            TYPE_1 -> {
                val viewHolder = holder as MultiViewHolder1
                viewHolder.bind(currentItem)
//                holder.itemView.setOnClickListener {
//                    onClick(currentItem)
//                }
            }
            TYPE_2 -> {
                val viewHolder = holder as MultiViewHolder2
                viewHolder.bind(currentItem)
            }
            TYPE_3 -> {
                val viewHolder = holder as MultiViewHolder3
                viewHolder.bind(currentItem)
            }
        }
    }

    override fun getItemViewType(position: Int): Int { // position마다 어떤 뷰타입을 가지고 있는지 연결해줘야 함
        return when (position) {
            0 -> TYPE_1
            1 -> TYPE_2
            2 -> TYPE_3
            else -> {
                throw IllegalAccessException("ERROR")
            }
        }
    }

    override fun getItemCount(): Int { // 데이터가 몇 개인지 변환
        // 리사이클러뷰 아이템 개수는 데이터 리스트의 크기
        return cardItems.size
    }
    // 간단하게 override fun getItemCount(): Int = cardItems.size 한 줄짜리 코드로 입력해도 됨

    inner class MultiViewHolder1(private val binding: ItemCard1Binding) : // 뷰홀더 클래스를 생성, RecyclerView.ViewHolder 클래스를 상속함. binding: 아이템xml이름 + Binding
        RecyclerView.ViewHolder(binding.root) {

        // 뷰 바인딩에서 기본적으로 제공하는 root 변수는 레이아웃의 루트 레이아웃을 의미
        fun bind(card: CardData){
            val context = binding.root.context //안티패턴이라 지워야됨

            binding.tvName.text = card.name
            binding.tvCardNumber.text = card.cardNumber
            binding.tvExpDate.text = card.expDate
            binding.tvPrice.text = priceDecimal(card.price)

            binding.itemCard1.setOnClickListener { // 액티비티에서 구현해야 함
                val intent = Intent(context, DetailActivity::class.java)
                intent.putExtra("CardData", card)
                context.startActivity(intent)
            }

        }
    }

    inner class MultiViewHolder2(private val binding: ItemCard2Binding) : // 뷰홀더 클래스를 생성, RecyclerView.ViewHolder 클래스를 상속함. binding: 아이템xml이름 + Binding
        RecyclerView.ViewHolder(binding.root) {

        // 뷰 바인딩에서 기본적으로 제공하는 root 변수는 레이아웃의 루트 레이아웃을 의미
        fun bind(card: CardData){
            val context = binding.root.context //안티패턴이라 지워야됨

            binding.tvName.text = card.name
            binding.tvCardNumber.text = card.cardNumber
            binding.tvExpDate.text = card.expDate
            binding.tvPrice.text = priceDecimal(card.price)

            binding.itemCard2.setOnClickListener { // 액티비티에서 구현해야 함
                val intent = Intent(context, DetailActivity::class.java)
                intent.putExtra("CardData", card)
                context.startActivity(intent)
            }

        }
    }

    inner class MultiViewHolder3(private val binding: ItemCard3Binding) : // 뷰홀더 클래스를 생성, RecyclerView.ViewHolder 클래스를 상속함. binding: 아이템xml이름 + Binding
        RecyclerView.ViewHolder(binding.root) {

        // 뷰 바인딩에서 기본적으로 제공하는 root 변수는 레이아웃의 루트 레이아웃을 의미
        fun bind(card: CardData){
            val context = binding.root.context //안티패턴이라 지워야됨

            binding.tvName.text = card.name
            binding.tvCardNumber.text = card.cardNumber
            binding.tvExpDate.text = card.expDate
            binding.tvPrice.text = priceDecimal(card.price)

            binding.itemCard3.setOnClickListener { // 액티비티에서 구현해야 함
                val intent = Intent(context, DetailActivity::class.java)
                intent.putExtra("CardData", card)
                context.startActivity(intent)
            }

        }
    }


}

메인페이지

package com.limheejin.camp_standard4.presentation

import android.content.Intent
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import com.limheejin.camp_standard4.data.CardData
import com.limheejin.camp_standard4.data.CardList
import com.limheejin.camp_standard4.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    private val cardList = CardList()

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

        setRecyclerView()
    }


    private fun setRecyclerView() { // 리사이클러뷰 설정
        binding.rvRecyclerview.adapter = CardAdapter(cardList)
        // xml 리사이클러뷰의 어댑터로 위에서 만든 어댑터 설정
        binding.rvRecyclerview.layoutManager = LinearLayoutManager(this)
        // xml 리사이클러뷰의 레이아웃 매니저 설정
    }

//    private fun adapterOnClick(card : Card) {
//        //bundle로 넘기는작업
//        val intent = Intent(this, DetailActivity::class.java)
//        val bundle = Bundle().apply{
//            putParcelable(DetailActivity.EXTRA_CARD, card)
//        }
//        intent.putExtra(bundle)
//        startActivity(intent)
//    }

}

디테일 페이지

package com.limheejin.camp_standard4.presentation

import android.os.Build
import android.os.Bundle
import androidx.annotation.RequiresApi
import androidx.appcompat.app.AppCompatActivity
import com.limheejin.camp_standard4.data.CardData
import com.limheejin.camp_standard4.data.priceDecimal
import com.limheejin.camp_standard4.databinding.ActivityDetailBinding

class DetailActivity : AppCompatActivity() {

    private lateinit var binding: ActivityDetailBinding
//    companion object {
//        const val EXTRA_CARD: String = "extra_card"
//    }

    private val selectedCard by lazy {
        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU){
            intent.getParcelableExtra("CardData", CardData::class.java)
        } else {
            intent.getParcelableExtra("CardData")
        }
    }

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

        selectedCard?.let {
            binding.tvName.text = it.name
            binding.tvCardNumber.text = it.cardNumber
            binding.tvExpDate.text = it.expDate
            binding.tvPrice.text = priceDecimal(it.price)
        }

//        val cardItem = intent.getParcelableArrayExtra<Card>(EXTRA_CARD)
//
//        cardItem?.name 등등
    }
}

xml 상의 리사이클러뷰

<androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv_recyclerview"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:clipToPadding="false"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            tools:listitem="@layout/item_card1" />

저작자표시 비영리 변경금지

💬 C O M M E N T

1. RecyclerView

02. ListView 와 RecyclerView의 차이점

03. RecyclerView 사용법

💡 Adapter

💡 ViewHolder

2-1. XML 정의

2-2. 어댑터 클래스정의

2-3. 메인액티비티 정의

✨ 뷰 바인딩을 이용한 최신 예시, 멀티 뷰타입

티스토리툴바