섹션 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를 출력하도록 하면 된다~
이런식으로 리스트뷰에 데이터모델을 넣을 수 있고... 아이템 각각을 클릭할수도 있다~