이 글은 이것이 안드로이드다 with 코틀린(개정판)를 참고하여 작성하였습니다.
작성자 : 박진영
개발환경은 Windows, Android Studio입니다.
1. 뷰페이저를 통해 리사이클러뷰 가로로 넘기기
뷰페이저는 스와이프를 통해 마그네틱 효과를 구현할 수 있으나, 기본적인 리사이클러뷰는 불가능하다.
따라서 뷰페이저를 통해 리사이클러뷰를 구성함으로써, 페이지 단위의 스와이프가 가능하도록 한다.
뷰 페이저와 리사이클러를 연결하여 사용하는 경우에는 주로 클래스 단위의 데이터를 하나의 페이지로 구성하기 위함이다.
1. 뷰페이저 구성
1) 뷰페이저를 메인 레이아웃에 연결한다.
이때, layout_width 와 height 가 0dp 가 되도록 한다.
2) 뷰바인딩을 한다.
gradle -> viewBinding
mainActivity -> binding 생성
3) 각 페이지가 사용할 하나의 아이템 레이아웃을 생성한다.
2. 어댑터 구성
1) 어댑터 클래스 생성 : 리사이클러뷰와 연결할 것이므로 리사이클러뷰를 상속받는다.
* 리사이클러뷰를 상속받는 어댑터 클래스 생성하기
- 홀더 만들기 : 뷰바인딩을 사용하기 때문에 바인딩을 생성자로 받는다.
- 만들어둔 홀더를 사용하는 어댑터 상속받기
- 어댑터에 필수적인 함수들 구현하기 : implement members 를 이용한다.
- getItemCount() 를 통해 뷰페이저가 사용하는 페이지 개수 반환 : 어댑터의 생성자에서 pageList 를 미리 받는다.
-> 리스트에 담을 데이터의 형태는 String 과 사용자 정의 타입(클래스 단위) 모두 가능하다.
- onCreateViewHolder() 를 통해 바인딩 생성
- onBindViewHolder() 를 통해 리스트와 연결하여 위치에 맞는 페이지 구성 : Holder 클래스 내부에 함수를 정의하여 사용한다.
3. 뷰 페이저와 리사이클러뷰 연결하기
1) 사용할 데이터 로드 : listOf() 를 통해 리스트 생성
2) 페이저 어댑터 생성 : 미리 구성해둔 CustomPagerAdapter() 에 데이터를 담은 리스트를 넘겨줌
3) 어댑터와 뷰페이저 연결 : 위에서 생성한 pageAdapter 연결
4. 탭 레이아웃 생성 및 연결하기
(1) 탭 레이아웃 구성하기
- 탭 레이아웃은 뷰 페이저의 위쪽이나 아래쪽에 넣어준다.
- 넣어줄 부분의 constraint 연결을 해제하고, TabLayout 컨테이너를 넣어준다.
- 탭 레이아웃을 넣어줬다면, 뷰페이저와 constraint 연결을 해준다.
- 탭 레이아웃을 구성하는 탭 메뉴는 메인 액티비티의 코드에서 list 형태로 생성하여 저장해둔다.
이미 만들어둔 list 를 사용하므로 생략한다. 생략할 것이 아니라면, listOf() 를 이용하여 만들어준다
(2) 탭 레이아웃과 뷰페이저 연결하기
- TabLayoutMediator() 를 사용하여 탭 레이아웃과 뷰 페이저를 파라미터로 받아온다.
- tab 과 postition 을 받아 해당 position의 제목 리스트에 있는 내용을 tab.text에 넣어준다.
- 함수의 마지막에 attach() 를 연결해준다.
2. 클래스 단위의 데이터 담기
여러 위젯을 동시에 담은 클래스 단위의 데이터를 담은 뷰 페이저를 구성해본다.
1. 각 페이지가 사용할 하나의 아이템 레이아웃을 생성한다.
기존의 item_viewpager.xml 에 TextView 을 추가한다.
2. 해당 데이터가 사용할 클래스를 생성한다.
3. 어댑터 클래스의 파라미터로 넘겨주는 데이터의 단위를 클래스로 구성한다.
기존의 textList 의 제네릭 타입을 Page 로 수정
4. Holder 클래스 내부의 setItem() 함수를 구성하는 데이터의 출력형식을 지정해 준다.
5. 클래스 단위의 데이터를 리스트 형태로 생성하여 넘겨주는 역할을 하기 위한 함수를 생성한다.
6. 데이터 로드하기
클래스 단위의 데이터를 담아 반환하기 위해 위에서 생성 해둔 함수로 데이터를 로드한다.
7. 탭 타이틀 목록 생성하기
이전의 예시와는 달리, 데이터를 로드하는 리스트와 다른 데이터를 가지므로 생성해준다.
이렇게 해주고 실행하면
이런 결과를 얻을 수 있다.
'GDSC HUFS 3기 > Android with Kotlin Team 3' 카테고리의 다른 글
| [3팀] 14-7 화면 구성하기: 커스텀 뷰 이용하기 (0) | 2021.11.14 |
|---|---|
| [3팀] 15 권한처리 permission, 15-2 BaseActivity 설계하기. (0) | 2021.11.14 |
| [3팀] 14-9 화면 구성하기: 탭메뉴 뷰 페이저와 프래그먼트 (0) | 2021.11.14 |
| [3팀] 11. 화면 구성하기_프래그먼트와 프래그먼트끼리 값주고받기 (0) | 2021.11.08 |
| [3팀] 10. 화면 구성하기_리사이클러뷰 (0) | 2021.11.06 |