[2팀]14-9,10 화면 구성하기: 탭메뉴 뷰페이저와 프래그먼트 & 리사이클러 뷰 어댑터
이 글은 YouTube 한빛미디어 채널의 [코틀린 안드로이드 기초 강의]를 참고하여 작성하였습니다.
작성자 : 강소영
개발환경은 Windows, Android Studio입니다. (본문3)
35. 탭메뉴 뷰페이저(View pager)와 프래그먼트
1. 뷰페이저, 탭 메뉴(레이아웃)
뷰페이저는 화면 전환을 구현하는 것을 말하고, 탭이 구성된 한 라인을 탭 메뉴(레이아웃)이라고 한다.
2. 4개의 프래그먼트를 뷰페이저 안에 넣고, 뷰페이저를 스와이프해서 화면을 이동시켜보기
먼저 프래그먼트 4개를 만들어준다.
New->Fragment->Fragment (Blank)
4개의 프래그먼트를 헷갈리지 않도록 이름을 적절하게 지어주고 텍스트뷰를 생성해준다.
하나를 만든 뒤 복사-붙여넣기를 하면 4개를 빠르게 생성할 수 있다.
Palette->Containers->ViewPager2를 드래그해 화면에 가져다 놓고 Constraint 해준다.
Adapter를 만들어준다.
Adapter생성 시 FragmentPagerAdapter를 이용하는데, 이를 이용하기 위해서는 구현해야 하는 메소드가 있으므로 클릭하여 Implement members를 누른 후 뜨는 메소드들을 불러온다.
코드는 두 줄이면 충분!
뷰페이저 위젯과 adapter, fragmentList 이 세 개를 연결시키기 위해 Gradle에서 viewBinding 설정을 해준 뒤 MainActivity에도 binding을 만들어준다.
MainActivity에 binding 생성 후 코드를 짜주면 된다.
Emulator로 잘 구동되는지 확인해본다.
탭 레이아웃을 뷰페이저와 함께 배치해보기
Containers->TabLayout을 화면에 끌어다 놓고 Constraint 해준 뒤 코드를 짜준다.
Emulator로 잘 구동되는지 확인해본다.
잡기술)with 스코프 함수를 이용해 binding이 반복되는 곳의 코드를 짧게 수정해준다.
잡기술2)인디케이터를 위로 보내고 싶으면 tabindicatorGravity를 top으로 설정해주면 된다.
36. 탭메뉴 뷰페이저(View pager)와 리사이클러 뷰 어댑터
1. 리사이클러 뷰 어댑터란?
앱에서 관리되는 데이터 집합을 화면에 유연하게 표시할 때 사용되는 뷰 그룹(View Group)이며, 화면을 전환할 때 마그네틱과 같은 효과를 주고싶을 때 사용하는 기능이기도 하다.
2. 뷰페이저 생성하기
뷰페이저를 하나 만들어준 뒤 Constraint를 해준다. (이 때 먼저 binding을 해도 된다.)
layout->New에서 새로운 레이아웃을 한 개 생성한 뒤 TextView를 만들고 Constriant 해준다. 이후 코드를 작성해주면 된다.
35에서와 마찬가지로 먼저 Adapter와 관련된 코드를 작성한 뒤 mainActivity에서 binding을 통해 코드를 완성시켜준다.
Amulator로 잘 작동하는지 확인한 후 탭 레이아웃과 연결해준다. 이 과정은 35와 동일하다. 코드는 유동적으로 바꿔서 작성해주면 된다.
이후 TextView를 여러개 생성해보고, List별로 데이터를 load해주는 코드를 작성해준다.
Emulator로 결과 확인
