이 글은 이것이 안드로이드다 with 코틀린(개정판)를 참고하여 작성하였습니다.
작성자 : 박진영
개발환경은 Windows, Android Studio입니다.
1. 탭 레이아웃과 뷰페이저란?
이게 '탭 레이아웃'이고
이게 '뷰 페이저'이다.
2. 탭 레이아웃과 뷰 페이저를 연결해서 스와이프를 통해 화면 전환 해보기.
(1) 프래그먼트 4개 만들기
복사, 붙여넣기를 통해 a, b, c, d 4개를 만든다.
(2) activity_main.xml 에서 ViewPager2을 넣고 constraint을 연결한다.
(3) FragmentPagerAdapter 클래스를 생성한다.
뷰 페이저에 4개의 fragment을 데이터라고 생각하고 뿌려주기 위해선 adapter 클래스 생성이 필요하다.
MainActivity.kt 에서 생성한다.
이 클래스는 FragmentStateAdapter 클래스를 상속받는다.
상속을 받기 위해서는 부모 클래스의 생성자를 호출해야 하는데 fragmentActivity을 호출한다.
FragmentPagerAdapter는 꼭 2개의 추상 메서드를 꼭 구현해야 하는데
- getItemCount() : 아이템의 개수를 가져오는 메서드
- createFragment(): onCreateView와 비슷하게 페이지 하나를 그려주는 메서드
이렇게 두 개이다.
Implement members을 통해 구현한다.
FragmentPagerAdapter가 생성될 때 같이 넘겨주는 Fragment에 담을 목록이 있어야 하는데
fragmentList:List<Fragment> 을 추가해 만들어준다.
Adapter 생성은 이렇게 마무리할 수 있지만 메서드 안에서 return이 한 줄이므로
-> 이런 식으로 줄여서 사용할 수 있다.
3. Activity_maim.xml 과 adapter, fragment 목록 연결하기
먼저 Gradle에서 viewBinding 설정 후 MainActivity.kt에서 binding을 생성한다.
그 후 페이지 데이터를 로드하고 아답터를 생성 후 아답터와 뷰페이저를 연결하면
스와이프를 통해 fragment A, B, C, D로 넘어가는 화면을 구성할 수 있다.
4. 탭 레이아웃 구성하기
먼저 activity_main.xml에서 TabLayout을 가져오고, 좌우하의 constraint을 연결해준다.
여기서 주의 할 점은 양쪽이 constraint가 있을 경우 꼭 layout_width을 0dp 즉 match constraint로 설정해주어야 한다.
그 후 viewPager의 아래쪽 constraint을 당겨서 tablayout에 연결한다.
다시 코드로 돌아와
아답터와 뷰페이저 연결, 텝 메뉴와 개수만큼 제목을 목록으로 생성 후 텝 레이아웃과 뷰페이저를 연결하면
이런 식으로 탭에서 눌러도 화면이 넘어가고 스와이프해도 화면이 넘어가는 화면을 구성할 수 있다.
* 주의할 것 = 마지막에 .attach() 꼭 붙이기!
-> 위와 같이 with 스코프 함수를 사용해서 코드를 깔끔하게 만들 수 있다.
tabIndicatorGravity 속성을 bottom -> top으로 바꿈으로서 indicator을 위로 가게 해 더 잘보이게 할 수 있다.
'GDSC HUFS 3기 > Android with Kotlin Team 3' 카테고리의 다른 글
| [3팀] 15 권한처리 permission, 15-2 BaseActivity 설계하기. (0) | 2021.11.14 |
|---|---|
| [3팀] 14-10 화면 구성하기: 탭메뉴 뷰페이저와 리사이클러뷰 (0) | 2021.11.14 |
| [3팀] 11. 화면 구성하기_프래그먼트와 프래그먼트끼리 값주고받기 (0) | 2021.11.08 |
| [3팀] 10. 화면 구성하기_리사이클러뷰 (0) | 2021.11.06 |
| [3팀] 9. 화면 구성하기_스피너 (0) | 2021.11.06 |