섹션 5. 트로트 가수 음악 목록 앱 만들기(1)-리스트뷰 복습

-ListView vs RecyclerView

비슷해보이지만 역할이 다르다

후자가 구현하기 좀 더 어렵지만 성능이 더 좋다.

 

리스트뷰 복습겸 하나 더 만들어보자

-리스트뷰 만들기

액티비티에서 어댑터로 리스트 데이터를 넘기고

어댑터에서 값을 하나하나 아이템에 넣어준 다음

그 아이템들을 액티비티의 리스트뷰에 넣어준다.

<필요한 연결들>

1️⃣ 메인액티비티-어댑터

2️⃣ 어댑터-아이템레이아웃

3️⃣ 아이템레이아웃-메인레이아웃의 리스트뷰

 

이번에는 아이템들을 하나하나 클릭하면 어떻게 되는지도 알아보자

 

먼저, 메인 액티비티 레이아웃에 리스트뷰를 넣어주자.

 

(메인 액티비티 레이아웃 파일 없을 때 레이아웃 만드는 법)

 

리스트뷰 만들기

 

그 다음, 리스트뷰의 아이템 레이아웃 만들기

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

전체를 <LinearLayout>으로 하고 텍스트뷰 넣기

아이디도 넣어줘야 함! 사진엔 없지만 listviewItemText라고 만들어줬음.

 

리스트뷰와 리스트 아이템 레이아웃을 만들었으니 그 둘을 연결해줄 어댑터를 만들자

코틀린 파일 만드는법:.kt로 끝나는 소스파일 있는 디렉토리 우클릭-New-Kotlin Class/File

이름은 ListViewAdapter

 

그 다음

어댑터가 리스트를 받아오도록 함

순서

ListViewAdapter 밑줄로 빨갛게 뜨는거 alt+enter 해서 멤버 다 임포트 해주고

각 멤버들 사용방법은 그냥 알아만 두고

중요한건 getItem()으로 리스트뷰 사이즈 정하기, getView()로 텍스트뷰 가져오기

 

convertView라는 변수 생성해서 변수가 비어있으면 뷰 가져오도록 함

findViewById로 아이템 레이아웃의 텍스트 영역을 아이디로 가져옴.

그리고 그 부분에 리스트의 데이터를 각각 넣어주도록 함.

 

<중간점검

<필요한 연결들>

1️⃣ 메인액티비티-어댑터

2️⃣ 어댑터-아이템레이아웃

3️⃣ 아이템레이아웃-메인레이아웃의 리스트뷰

 

지금 2️⃣에서 데이터를 넘겨주는 것만 함. />

 

이제 메인액티비티로 가서~

리스트 만들고 아이템들 집어넣고

어댑터 만들고 어댑터에 리스트 넣어주고 ➡️ 1️⃣번연결 완료

 

 

이제 3️⃣ 아이템레이아웃-메인레이아웃의 리스트뷰 연결할 차례

activity_main.xml의 리스트뷰에 아이디 추가해서

findViewById로 리스트뷰를 객체로 가져옴

그 리스트뷰의 자체 어댑터에, 내가 만든 어댑터를 연결해줌 ➡️ 3️⃣번연결 완료.

 

<강의에서의 실행화면>(내껀 오류 있어서 안됨)

리스트의 데이터를 잘 출력한 것을 알 수 있음

 

각 아이템 클릭 인식이 잘 되는지도 확인해보도록 하자

setOnItemClickListener를 추가해줘서 클릭된 아이템의 데이터를 토스트메시지로 띄워보자

<강의의 실행화면>

잘 된다.

 

 

 

조금 더 나아가기

A, B, C 와 같은 각각의 데이터 말고 데이터 '덩어리'를 넣어서 리스트뷰로 출력해보자

데이터 덩어리 : 데이터 모델

 

데이터 모델 파일 만들자.

코틀린 소스파일 새로 만들기

.kt로 끝나는 소스파일들 있는 디렉터리 우클릭-New-Kotlin Class/File

 

class가 아닌 data class, 괄호 모양도 중괄호{} 말고 소괄호()로 바꿔주기

 

리스트 새로 생성해서 ListViewModel 타입의 데이터 삽입해주고 그 데이터를 그대로 어댑터에 삽입해줘라

그런데 어댑터에 가보면, 어댑터가 리스트를 받게 했었던 부분에서 

String을 ListViewModel 이라는 데이터 타입으로 다시바꿔줘야한다.

 

ListViewAdapter 가 List를 받겠다고 했을 때 ListViewModel로 데이터가 들어갔으므로 

List는

List = [
         ListViewModel("a", "b"),
         ListViewModel("c", "d"),
         ListViewModel("e", "f")
         ]

이렇게 덩어리져서 들어갔다는 걸 의미한다.

 

아까 ListViewModel.kt 파일에서 데이터 모델 만들 때 첫번째 데이터는 text1, 두번재 데이터는 text2라고 이름지었으므로

각 데이터를 이용하고 싶으면 각 데이터 이름을 따로 이용해야 한다.

 

-둘다 이용하고 싶으니까 텍스트뷰를 하나 더 만들어주자.

텍스트뷰 하나 더 만들어주고

 

어댑터로 가서~

데이터 모델 ListViewModel text1 을 출력했던 것처럼

findViewById로 텍스트뷰를 객체로 가져오고

그 객체에 List의 text2를 출력하도록 하면 된다~

 

이런식으로 리스트뷰에 데이터모델을 넣을 수 있고... 아이템 각각을 클릭할수도 있다~