[4팀] 14-9. 화면 구성하기:탭메뉴 뷰페이저와 프래그먼트

이 글은 이것이 안드로이드다 with 코틀린(개정판)를 참고하여 작성하였습니다.

작성자 : 김준욱

개발환경은 Windows, Android Studio입니다.

 

 

1. 뷰페이저란?

뷰페이저(viewpager)란 손가락으로 스와이프를 통해 여러가지 view를 볼 수 있게 해주는 장치를 뜻합니다.

좌우로 스와이프하며 넘기는 화면

 

각각에 출력되는 화면을 fragment를 통해 만들어보고 이를 뷰페이저로 적용하고, 탭 레이아웃을 통해서도 이동할 수 있는 기능을 만들어 보도록 하겠습니다.

 

2. 뷰페이저 만들기

1) 4개의 fragment를 생성하기

 

4개의 fragment와 xml 파일 생성

2) fragment를 viewpager와 연결해주는 아답터를 정의하기

fragmentList -> fragment들의 집합들

class FragmentPagerAdapter(val fragmentList: List<Fragment>, fragmentActivity: FragmentActivity) 
                                                      : FragmentStateAdapter(fragmentActivity){
    override fun getItemCount() = fragmentList.size

    override fun createFragment(position: Int): Fragment {
        return fragmentList.get(position)
    }

}

 

 

 

3) 메인 뷰페이저 위젯, 아답터, frament 목록을 서로 연결해주기

  (1) 페이지 데이터들 저장하기

val list = listOf(FragmentA(), FragmentB(), FragmentC(), FragmentD())

  (2) 아답터 생성하기

val pagerAdapter = FragmentPagerAdapter(list, this)

  (3) 아답터와 뷰페이저 연결하기

binding.viewPager.adapter = pagerAdapter

 

이제 실행시키면 스와이프를 통해 우리가 만든 4개의 fragment를 볼 수 있습니다.

 

 

3. 탭 레이아웃 만들기 

이번에는 우리가 생성한 뷰페이저를 탭 레이아웃과 연결시켜 보겠습니다.

 

탭 레이아웃 위젯을 끌어온 후 먼저 만들어 둔 뷰페이저와 정렬시켜 줍니다.

그 후 메인 코드로 돌아와서 fragment의 개수만큼 탭 메뉴의 제목들을 리스트(tab_titles)로 만들어 둡니다.

우리는 4개의 fragment를 생성했으니 제목도 4개 생성하면 됩니다.

val titles = listOf("A", "B", "C", "D")

 

마지막으로 탭 레이아웃과 뷰페이저를 연결시켜 줍니다.

TabLayoutMediator는 탭 레이아웃과 뷰페이저를 받으면

탭 레이아웃과 뷰페이저의 개수만큼 스코프를 돌며 탭을 생성하고, 그것이 몇번째 탭인지 알려줍니다.

이를 통해 탭의 이름을 우리가 만들어둔 tab_titles로 지정하면 완성입니다.

TabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->
            tab.text = titles.get(position)
        }.attach()