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

이전 글에서 내비게이션 버튼을 클릭하는 클릭이벤트를 통해 프래그먼트의 화면을 전환하는 법을 구현해봤다.

이번에는 그 화면에 그 가수의 트로트 목록을 출력하도록 리사이클러 뷰를 이용해보자.

 

우선 액션바를 없애주려면(내꺼엔 이미 없음)

res-values-themes-themes.xml을 열자

<style> 태그 안에

<item name"windowNoTitle">true</item>

태그를 추가해주자

 

 

그다음 리사이클러 뷰를 레이아웃에 만들어주자.

상단에 텍스트뷰도 만들어주고

그만큼 간격 띄운 리사이클러 뷰도 만들어주자 (태그 />로 닫아야 함)

TextView에 빨간줄 뜬건 ConstraintView때문이니 점을 끌어서 parent에 맞춰주도록 하자.

 

 

<리사이클러 뷰 복습

1️⃣ 메인액티비티가 리스트를 어댑터에 전달하고

2️⃣ 어댑터가 리스트의 데이터를 아이템구성레이아웃에 하나하나 넣어준다.

3️⃣ 그리고 그 아이템구성 레이아웃을, 목록출력화면의 리사이클러뷰에서 출력한다. />

 

 

이제 어댑터를 만들어보자.

소스파일 새로 만들기~

소스파일 있는 디렉터리-New-Kotlin Class/File 클릭! 이름은 RVAdapter~

 

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

어댑터 이렇게 작성해준 다음

RVAdapter 빨간밑줄 뜨는거 alt+enter 해서 멤버 다 임포트 해주고

 

어댑터 안에

뷰 홀더도 만들어주자

inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

}

 

아직 itemView 안만들어줬으니까 이제 만들어주자

 

layout 우클릭-New-Layout Resource File 으로 새로운 레이아웃 파일 생성

이름은 rv_item

이런식으로 margin이랑 textStyle이랑  Id랑 등등 설정해주고~

 

이 아이템뷰를 어댑터에 연결해주자(2️⃣번연결, but 아이템에 하나하나 데이터 넣는 과정은 따로 구현)

 

어댑터와 아이템뷰를 연결해서 아이템을 하나하나 넣어주는 것까지 해줬으니,

목록출력화면의 액티비티(여기서는 각 트로트 가수의 프래그먼트에 연결)에서 리스트를 어댑터로 전달하도록 하자(1️⃣번 연결)

 

이전에 프래그먼트 만들던 주석과 섞여있어서 약간 어지럽다.

강의에서 만든 순서를 정리하자면

1. 36~43번 줄에서, 해당 프래그먼트의 레이아웃 뷰 객체를 생성했던 것을 가지고,

다시 그 안의 리사이클러 뷰의 뷰 객체를 생성한다.

내가 만든 어댑터를 불러온다.

 

2. 31~34번줄

리스트를 만들고 아이템 넣어준다.

 

3. 45~47번줄

위에서 만든 리사이클러 뷰 객체의 자체 어댑터에 내가 만든 어댑터를 연결한다.

그 아래 줄은 무슨 역할인지 잘 모르겠다. 일단 넘어가자.

 

여기까지 했으면 실행화면이 다음과 같이 나와야 한다.

<강의에서의 실행화면>

 

리사이클러 뷰에 아이템이 잘 담겨져 나오는 것을 확인할 수 있다.

데이터를 마저 제대로 넣어주고 출력하면 다음과 같이 나온다.

 

프래그먼트 2와 프래그먼트 3의 리사이클러 뷰도 마저 만들어주도록 하자.

프래그먼트1 레이아웃의 제목쪽 텍스트뷰와 리사이클러 뷰를 복붙~ 다른거레이아웃에 붙여주기~

프래그먼트 파일도 복붙해주기~ 드래그한 영역을 onCreateView 안에 넣어주기!

드래그된곳 복붙해주기

잘 실행됐으면 다음과 같이 나와야 한다.

 

리사이클러 뷰는 원래 어려운거니까 10번정도는 만들어보면서 익숙해져야 한다.

 

끝