Kotlin TIL(18) [RecyclerView]

jxxn_a·2023년 8월 25일
0

TIL

목록 보기
18/28

🌻 RecyclerView(리사이클러뷰) 🌻

RecyclerView란?

1) 한정된 화면에 많은 데이터를 넣을 수 있는 view이다.
2) view를 재활용해서 사용하겠다는 말이다.

ListView와 RecyclerView의 차이점

📑 ListView
1) 사용자가 스크롤 할 때마다 위에있던 아이템은 삭제되고, 맨 아래의 아이템은 생성되는 것이 반복된다.
2) 아이템이 100개면 100이 삭제되고, 생성된다. 즉, 삭제와 생성이 반복되므로 성능에 좋지 않다.

🔃 RecyclerView
1) 사용자가 스크롤 할 때, 위에 있던 아이템은 재활용되어 아래로 이동하며 재 사용한다.
2) 아이템이 100개여도 10개정도의 View만 만들고 10개를 재활용하여 사용한다.
3) ListView의 단점을 보완하기 위해 나왔다.

RecyclerView 사용하기

📌 Adapter
1) Adapter란 데이터 테이블을 목록 형태로 보여주기 위해 사용되는 것이다.
2) 데이터를 다양한 형식의 리스트로 보여주기 위해서 데이터와 RecyclerView 사이의 통신을 위한 연결체이다.

📌 ViewHolder
1) ViewHolder는 화면에 표시될 데이터나 아이템들을 저장하는 역할이다.
2) RecyclerView의 개념을 적용하기 위해선 스크롤해서 위로 올라간 view를 재활용하기 위해서 이 view를 기억하고 있어야하는데, 이 역할을 ViewHolder가 한다.

RecyclerView 만들어보기 (예제)

[MainActivity]

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val items = mutableListOf<String>()

        items.add("가")
        items.add("나")
        items.add("다")
        items.add("라")
        items.add("마")
        items.add("바")
        items.add("사")

        val rv = findViewById<RecyclerView>(R.id.rv)

        val rvAdapter = RVAdapter(items)

        rv.adapter = rvAdapter
        rv.layoutManager = LinearLayoutManager(this)

        rvAdapter.itemClick = object : RVAdapter.ItemClick {
            override fun onClick(view: View, position: Int) {
                Toast.makeText(baseContext, items[position], Toast.LENGTH_LONG).show()
            }
        }
    }
}

[activity_main.xml]

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

[RVAdapter.kt]

class RVAdapter(val items : MutableList<String>) : RecyclerView.Adapter<RVAdapter.ViewHolder>(){

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RVAdapter.ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.rv_item,parent, false)

        return ViewHolder(view)
    }

    interface ItemClick {
        fun onClick(view: View, position: Int)
    }
    var itemClick : ItemClick? = null

    override fun onBindViewHolder(holder: RVAdapter.ViewHolder, position: Int) {
        if(itemClick != null) {
            holder.itemView.setOnClickListener{ v ->
            itemClick?.onClick(v, position)
            }
        }
       holder.bindItems(items[position])
    }

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

    inner class ViewHolder(itemView : View) : RecyclerView.ViewHolder(itemView){
        fun bindItems(item: String) {
            val rv_text = itemView.findViewById<TextView>(R.id.rvItem)
            rv_text.text = item
        }
    }
}

[rv_item.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="80dp">

    <TextView
        android:id="@+id/rvItem"
        android:text="rv"
        android:textSize="20sp"
        android:layout_margin="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

</LinearLayout>

2개의 댓글

comment-user-thumbnail
2023년 8월 25일

회원님~ 어제 배우신 뷰바인딩은 어디로 갔을까요 ~ ^^
다음주엔 리사이클러뷰와 뷰바인딩을 결합한 TIL 기대할게요 ^^~

1개의 답글