[Android] TIL 34일차

★ 리사이클러 뷰(RecyclerView)

---

* 리사이클러 뷰란?

- 리스트 형태의 데이터를 표시하는데 사용되는 위젯

- View를 재활용해서 사용

 

* 리스트 뷰와 리사이클러 뷰의 차이

 

ListView

• 사용자가 스크롤 할 때마다 위에 있던 아이템 삭제, 맨 아래의 아이템은 생성되는 걸 반복
• 아이템이 100개면 100개 전부 삭제 및 생성되고 반복하여 성능에 좋지 않음

RecylcerView

• 사용자가 스크롤 할 때, 위에 있던 아이템이 재활용돼서 아래로 이동한 후 재사용 함
• 아이템이 100개면 10개정도의 View만 만들고 이 10개를 재활용해서 사용
• 결론적으로 ListView의 단점을 보완한 것

 

Recycler View 사용하기

1. Adapter

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

    2. View Holder

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

 

Recycler View 코드 정리

 

* 어댑터(MyAdapter)

//변수 mItems는 수정가능한 List형태이고, 데이터 클래스인 MyItem 형이다.
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
    }
}

 

1	onCreateViewHolder를 통해 Holder를 생성함
2	Holder는 맨 밑에 inner 클래스를 통해 만듦. 이미지, 이름, 나이 형식을 가짐
3	onBindViewHolder를 통해 클릭이벤트와 mItems 정보를 받아서 View가 만들어짐
4	mItems는 MyItem 클래스에서 정보를 받아옴(= 데이터 원본을 받아옴)

 

* 데이터 클래스(MyItem)

data class MyItem(val aIcon:Int, val aName:String, val aAge:String) {}

 

* MainActivity

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //1. 바인딩
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //2. 데이터 원본 준비
        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"))
        
        //3. 어댑터에 데이터 원본 넘기기
        val adapter = MyAdapter(dataList)
        
        //4.어댑터 연결 및 레이아웃매니저 연결
        binding.recyclerView.adapter = adapter
        binding.recyclerView.layoutManager = LinearLayoutManager(this)
        
        //5. item 클릭 시 해당 아이템의 name이 선택된다는 문구가 뜨도록 Toast 작성
        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()
            }
        }
    }
}

 

1	바인딩 진행
2	데이터 원본 생성(변수 dataList로 선언), 수정가능한 List 형태이고 MyItem을 참조함
3	어댑터(MyAdapter)에 데이터 원본(dataList)을 넘기고 변수(adapter)가 이걸 받음
4	화면에 출력되도록 어댑터와 레이아웃매니저 연결
5	아이템 클릭 시 해당 아이템의 이름(name)이 선택됐다는 문구가 뜨도록 설정 -> 위치(position)을 참조하여 해당 위치의 이름을 찾는 방식

 

 

참고 자료

---

https://velog.io/@24hyunji/AndroidKotlin-RecyclerView-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0

[Android/Kotlin] RecyclerView 사용해보기