ViewPager2

1.dependancy 추가

implementation 'androidx.viewpager2:viewpager2:1.0.0'

 

2.ViewPager2 xml 추가

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

android:orientation 가로 세로 스크롤 방향 지정 (default, 가로 방향)

-vertical, 세로 방향

 

3.Adapter 생성

 

RecyclerView.Adapter

이미지 데이터 출력과 같이 정적 정보만 표시할 경우 사용

 

FragmentStateApdater

Fragment와 같이 각 페이지의 생명주기를 고려해야할 경우 사용

class MainPager(fm: FragmentActivity) : FragmentStateAdapter(fm){
    private val fragments: ArrayList<Fragment> = ArrayList()
    //몇 개로 구성할 것
    override fun getItemCount(): Int = 6 
    //각 구성원의 정보를 생성
    override fun createFragment(position: Int): Fragment {
        var fragment = when(position){
            0 -> MainFrag1()
            else -> MainFrag2()
        }
        fragments.add(fragment)
        return fragment
    }
}

 

4. Adapter 연결 및 pager 사용

pager = MainPager(this)
        binding.viewPager.adapter = pager
        binding.viewPager.isUserInputEnabled = false
        binding.viewPager.registerOnPageChangeCallback(object: ViewPager2.OnPageChangeCallback(){
            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)
            }
        })

 

isUserInputEnabled 스와이프를 이용하여 페이지 넘김 가능 여부

registerOnPageChangeCallback 페이지가 변경될때 마다 호출되는 콜백 함수

 

5.TabLayout xml 추가

<com.google.android.material.tabs.TabLayout
                    android:id="@+id/tab"
                    android:layout_width="0dp"
                    android:layout_height="60dp"
                    android:elevation="10dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:tabBackground="@drawable/bg_tab_selected_color"
                    app:tabIndicatorColor="@null"
                    app:tabMode="fixed"
                    app:tabSelectedTextColor="@color/white"
                    app:tabTextColor="@color/primary" />

app:tabMode, 탭 표시 방식

-fixed, 탭 고정하여 모든 탭이 한화면에 보이도록 지정

-scrollable, 탭이 스크롤 가능하도록 지정

 

app:tabGravity, 탭의 정렬

-fill, 동일 너비 간격으로 정렬

-center, 가운데 정렬

 

app:tabBackground, 탭 배경색 변경

app:tabTextColor, 탭 기본 글자색 변경

app:tabSelectedTextColor, 탭 선택시 글자색 변경

app:tabIndicatorColor, 탭 선택시 인데케이터색 변경

app:tabIconTinit, 아이콘 색 변경

 

app:tabIndicatorHeight, 탭 하단의 인디케이터 높이 지정

 

6.tablayout 사용

TabLayoutMediator, ViewPager와 TabLayout연결

TabLayoutMediator(
            binding.tab,
            binding.viewPager,
            true,
            TabLayoutMediator.TabConfigurationStrategy{tab, position ->

            }
        ).attach()
        
binding.tab.addOnTabSelectedListener(object: TabLayout.OnTabSelectedListener{
            override fun onTabSelected(tab: TabLayout.Tab?) {
            }

            override fun onTabUnselected(tab: TabLayout.Tab?) {
            }

            override fun onTabReselected(tab: TabLayout.Tab?) {
            }
        })

TabConfigureationStrategy 탭 설정 정보 셋팅

addOnTabSelectedListener 탭이 변경될때 마다 호출되는 콜백 함수

 

+기존 ViewPager와 차이점

https://developer.android.com/training/animation/vp2-migration?hl=ko 

ViewPager에서 ViewPager2로 이전  |  Android 개발자  |  Android Developers