[Android] 간단한 RecyclerView

✏️ TIL(Today I Learned)

 

RecyclerView를 사용하는 방법을 이해하기 위해 간단한 앱을 만들었다.

activity_main.xml에는 RecyclerView하나만을 넣었다.

<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
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
        
</LinearLayout>

그리고 RecyclerView의 아이템을 나타낼 item_recyclerview.xml을 원하는 형태로 만들었다. 

<?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="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/imageItem"
        android:layout_width="80dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:padding="4dp"
        android:scaleType="centerCrop"
        android:src="@drawable/cat_1" />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="3">

        <TextView
            android:id="@+id/textItem1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:padding="4dp"
            android:hint="Name" />

        <TextView
            android:id="@+id/textItem2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16dp"
            android:padding="4dp"
            android:hint="Age" />

    </LinearLayout>

</LinearLayout>

 

 

그다음, RecyclerView에 표시될 각 항목의 뷰를 생성하고 관리할 Adapter를 만들어줬다.

onBindViewHolder() 메소드를 사용하여 데이터를 해당 뷰에 바인딩했다.

class MyAdapter(val myItems: 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.imageView.setImageResource(myItems[position].aImage)
        holder.name.text = myItems[position].aName
        holder.age.text = myItems[position].aAge
    }

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

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

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

 

MainActivity에서는 샘플 데이터를 넣어주고, MyAdapter의 ItemClick 인터페이스를 구현했다.

RecyclerView의 아이템이 클릭되면, 해당 아이템의 이름을 토스트로 나타나게 했다.

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.cat_1, "Bella", "1"))
        dataList.add(MyItem(R.drawable.cat_2, "Charlie", "2"))
        dataList.add(MyItem(R.drawable.cat_3, "Daisy", "1.5"))
        dataList.add(MyItem(R.drawable.cat_4, "Duke", "1"))
        dataList.add(MyItem(R.drawable.cat_5, "Max", "2"))
        dataList.add(MyItem(R.drawable.cat_6, "Happy", "4"))
        dataList.add(MyItem(R.drawable.cat_7, "Luna", "3"))
        dataList.add(MyItem(R.drawable.cat_8, "Bob", "2"))
        dataList.add(MyItem(R.drawable.cat_9, "Bob", "2"))
        dataList.add(MyItem(R.drawable.cat_10, "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()
            }
        }
    }
}

// MyItem.kt
data class MyItem(val aImage:Int, val aName:String, val aAge:String)

📝 공부한 Kotlin 정리

 

RecyclerView

RecyclerView는 안드로이드 앱에서 리스트 형태의 데이터를 표시하는 데 사용되는 위젯이다. 여러 아이템을 스크롤 가능한 리스트로 표현하며, 많은 아이템을 효율적으로 관리하고 보여주는 역할을 한다.

• 한정적인 화면에 많은 데이터를 넣을 수 있는 View이다.
• 사용자가 스크롤 할 때, 위에 있던 아이템은 아래로 이동하여 재활용된다.
• 예) 아이템이 100개이면 10개 정도의 View만 만들고, 10개를 재활용해서 사용한다.
• View를 계속 만드는 ListView의 단점을 보완하기 위해 만들어졌다.
  (사용자가 스크롤 할 때마다, 위에 있던 아이템은 삭제되고, 맨 아래의 아이템은 생성되길 반복)

ListView /  RecyclerView

 

 

 

Adapter

RecyclerView에서 Adapter는 데이터와 뷰 간의 중개자 역할을 한다. 데이터 테이블을 목록 형태로 보여주기 위해 사용되는 것으로, 데이터를 다양한 형식의 리스트 형식을 보여주기 위해서 데이터와 RecyclerView 사이에 존재하는 객체이다.

• 데이터 바인딩:
  Adapter는 데이터를 뷰에 바인딩하여 화면에 표시되도록 한다. 리스트나 그리드와 같은 형태로 표시할 데이터를 RecyclerView에 제공한다.
• 뷰 생성 및 관리:
  RecyclerView에 표시될 각 항목의 뷰를 생성하고 관리합니다. onCreateViewHolder() 메소드를 사용하여 새로운 뷰를 생성하고, onBindViewHolder() 메소드를 사용하여 데이터를 해당 뷰에 바인딩한다.
  
  
• 데이터 변경 감지:
  데이터가 변경되면, Adapter는 이를 감지하고 RecyclerView에 알려 업데이트가 필요한 부분을 다시 그린다. notifyDataSetChanged()나 notifyItemInserted()와 같은 메소드를 사용하여 데이터 변경을 RecyclerView에 알린다.
  
  
• 아이템 클릭 리스너:
  RecyclerView의 아이템 클릭 이벤트를 처리할 수 있는 리스너를 제공한다. 이를 통해 사용자의 상호작용에 따라 적절한 동작을 수행할 수 있다.

 

ViewHolder

ViewHolder란 화면에 표시될 데이터의 각 항목에 대한 View를 저장하는 역할을 한다. RecyclerView에서 스크롤 해서 위로 올라간 View를 재활용하기 위해서는 해당 View를 기억해야 한다. ViewHolder는 이 역할을 하는 것이다.

일반적으로 RecyclerView의 Adapter에서 ViewHolder 클래스를 정의하고, onCreateViewHolder()에서 새로운 뷰를 생성할 때 이 ViewHolder를 사용한다. 이러면 RecyclerView가 뷰를 스크롤하거나 데이터를 업데이트할 때마다 새로운 뷰를 생성하는 것이 아니라 뷰를 재활용하기 때문에 성능이 향상된다.