[Android] ViewPager 뷰페이저

MSU·2024년 4월 11일

Android

목록 보기

1/36

ViewPager

네이버 앱을 들어가면 좌우 스와이프 기능으로 메뉴가 바뀌는걸 볼 수 있는데
그러한 기능을 구현해 주는 것이 ViewPager이다

각각의 메뉴는 Fragment로 만들고, 어댑터 클래스를 생성하여 MainActivity에서 셋팅해주면 된다.

activity_main.xml에 viewPager 삽입

메뉴 개수만큼의 프래그먼트 생성

4개의 프래그먼트를 먼저 생성해주고 구분을 위해 Page1~4를 텍스트뷰로 표시해준다.

ViewPager Adapter 클래스 작성

리사이클러뷰 어댑터 클래스를 만들 때 RecyclerView 클래스를 상속받는 것처럼
뷰페이저의 어댑터도 마찬가지로 FragmentStateAdapter를 상속받는다

FragmentStateAdapter는 FragmentActivity를 매개변수로 받는데, FragmentActivity는 MainActivity 클래스가 상속받는 AppCompatActivity에서 상속을 받기 때문에

아래와 같이 어댑터를 호출할 때 this를 넘겨주면 된다.

또한 메뉴를 구성할 리스트를 인자값으로 넘겨준다.

class FragmentPagerAdapter(fragmentList:List<Fragment>, fragmentActivity: FragmentActivity)
:FragmentStateAdapter(fragmentActivity){

FragmentStateAdapter를 상속받으면서 메서드2개를 오버라이딩해줘야 한다.

getItemCount()는 보여줄 프래그먼트의 개수를 세주기때문에 매개변수로 받은 fragmentList의 사이즈를 반환해주면 된다.

override fun getItemCount() = fragmentList.size

createFragment(position: Int)는 position번째의 프래그먼트를 보여줘야하기 때문에 매개변수로 받은 fragmentList에서 get메서드로 position번째의 프래그먼트를 꺼내서 반환해준다.

override fun createFragment(position: Int) = fragmentList.get(position)

어댑터 전체 코드

class FragmentPagerAdapter(val fragmentList:List<Fragment>, fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity){

    override fun getItemCount() = fragmentList.size
    
    override fun createFragment(position: Int) = fragmentList.get(position)
    
}

프래그먼트 준비

뷰페이저의 각 페이지를 담당할 프래그먼트를 리스트에 묶어 준비해준다.

val pageList = listOf(
            Page1Fragment(), 
            Page2Fragment(), 
            Page3Fragment(), 
            Page4Fragment()
        )

뷰페이저 어댑터 셋팅

뷰페이저 어댑터를 생성한다.

val pagerAdapter = FragmentPagerAdapter(pageList, this)

생성한 어댑터와 xml의 뷰페이저를 연결한다.

binding.viewPager.adapter = pagerAdapter

TabLayout

네이버 앱을 보면 스와이프 기능으로 메뉴를 이동할 수도 있지만, 상단의 메뉴 버튼을 클릭해서도 이동할 수 있다.
이를 TabLayout이라고 하며 상단에 위치하거나 하단에 위치할 수 있다.

TabLayout 추가

viewPager밑에 TabLayout을 추가해준다.

하단에 위치시키려면 viewPager에 설정된 bottom constraint를 해제해주고 TabLayout을 배치해주면 된다.

TabLayout을 배치해주고 다시 viewPager의 bottom constraint를 TabLayout의 상단에 셋팅해주면 된다.

탭레이아웃을 추가하면 기본적으로 탭아이템 3개가 들어가는데,
xml에서 직접 아이템을 만들어줘도 상관없지만 코드로 작성해준다

TabLayout 셋팅

메뉴 아이템으로 들어갈 제목을 리스트에 담아준다.

val titleList = listOf("Page1","Page2","Page3","Page4")

TabLayout과 ViewPager 연결

TabLayoutMediator를 호출해주는데 첫 번째 인자로 TabLayout을, 두 번째인자로 ViewPager를, 세 번째 인자로는 고차함수를 받기때문에 position번째의 tab에 어떻게 셋팅할지 적어주면 된다.

        with(binding){
            TabLayoutMediator(tabLayout, viewPager){ tab: TabLayout.Tab, position: Int ->
                tab.text = titleList[position]
            }.attach()
        }