섹션 5. 트로트가수 음악 목록 만들기(2)-리사이클러 뷰

ListView vs RecyclerView

지난 글에서 리스트뷰를 알아봤고 이번에는 리사이클러 뷰를 알아보자

둘은 이런 차이점이 있다.

출처: https://www.crocus.co.kr/1704

리스트뷰와 리사이클러 뷰의 구조는 거의 똑같다.

 

 

 

-리사이클러 뷰 만들기

프로젝트 생성하고

activity_main.xml에 리사이클러 뷰를 만들어준다.

 

그다음 어댑터 만들어주자

코틀린파일 새로 만들기~ 이름은 RVAdapter.kt

 

멤버들 임포트 해주고

inner class ViewHolder 만들어줘서 ViewHolder 빨간줄 없애주기

 

이때 onCreateViewHolder에서 뷰의 아이템을 가져와야 하는데~~

 

 

아직 아이템(recyclerview_item.xml) 안만들었으니까 이제 만들어주기

레이아웃 파일 새로 만들기~ 이름은 rv_item.xml

<LinearLayout>으로 바꿔주고 <TextView> 하나 추가하기

 

 

이제 다시 어댑터로 가서 뷰 아이템 가져오기

 

 

<중간점검

연결 3가지

1️⃣ MainActivity - Adapter (리스트 넘기기)

2️⃣ Adapter - recyclerview_item.xml (아이템 레이아웃에 데이터 하나하나 넣어주기)

3️⃣ recyclerview_item.xml - Activity_main.xml의 recyclerview (메인액티비티레이아웃의 리스트뷰에 아이템레이아웃출력하기)

 

위에서 어댑터에서 뷰의 아이템을 가져오는것을 했으므로 2️⃣연결은 끝났다.

 

이제 메인에서 어댑터로 데이터 넘겨주고(다음사진 31번줄) 아이템을 메인액티비티의 리스트뷰에서 출력하는 나머지 과정들을 순차적으로 해보자.

 

메인액티비티를 다음과 같이 작성해준다.

*리사이클러뷰는 리스트뷰와 다르게 layoutManager를 한 줄 더 추가해야 한다.

 

<실행화면>

rv가 세개로 잘 나온것을 볼 수 있다.(API 레벨 억지로 안낮추고 그냥 권장레벨 23? 정도로 하니까 에러가 안나서 좋다.)

그런데 우리가 원하는 것은 a, b, c가 출력되는 것이다.

2️⃣연결이 끝난 줄 알았더니 아직 어댑터가 아이템에 데이터를 하나하나 넣어주는 과정을 하지 않은 것이다.

데이터 바인딩으로 데이터를 맵핑 해줄 것이다.

 

우선 아이템레이아웃의 텍스트뷰에 아이디를 rvItem 이라고 붙여주고

 

어댑터로~

 

처음 어댑터 선언부에서

class RVAdapter(val items : MutableList<String>)

 이부분에서 데이터가 들어간 items가 넘어왔음

그 다음

override fun onBindViewHolder (생략) {
    holder.bindItems(items[position])
}

 이부분에 item들의 각각의 position이 들어감

 

마지막으로 inner class ViewHolder의

fun bindItems 에서 

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

각각의 아이템의 데이터가 들어간다고 생각하기.

 

어댑터

데이터가 a, b, c 로 잘 들어온 것을 확인할 수 있다. 진짜진짜로 2️⃣ 연결 끝~

 

<좀 더 나아가기>

리스트뷰에서는 메인 액티비티에서 rv.setOnItemClickListener 가 있어서 아이템 클릭을 할 수 있었는데 리사이클러뷰에서는 직접 어댑터에 선언해서 클릭을 만들어야 한다.

 

어떻게 선언하냐면~ 인터페이스 활용!

interface 선언된 17~20 라인과

onBindViewHolder 내부의 25~29 라인이 추가되었다.

 

 

이제 메인액티비티로 가서~ 다음과 같이 추가해준다.

rv가 아닌 rvAdapter를 이용해야 한다. 어댑터에 클릭이벤트를 선언했기 때문!

rvAdapter.itemClick = object : RVAdapter.ItemClick {
}

여기까지 선언하면 object에 필요한 member가 있다고 빨간줄이 뜰것이다. alt+enter 해서 임포트 하듯이 해주면 onClick 함수가 오버라이딩된다.

그 안에 Toast 메시지를 넣어서 아이템이 잘 클릭되는지 확인해보자. 이때 첫번째 매개변수는 this 가 아닌 baseContext를 넣어줘야 한다.

클릭한 아이템에 따라 토스트 메시지가 아주 잘 뜨는 것을 확인할 수 있다.(짝짝)

 

복습하자면 리사이클러뷰는 아이템클릭 이벤트와 같은 것들을 직접 구현해야 해서 조금 번거롭지만, 뷰홀더로 뷰를 재사용해서 성능이 좀 더 좋다는 장점이 있다.

 

끝.