[Android] ViewPager2

ViewPager2는 스와이프 동작으로 view나 fragment를 교체할 수 있도록 해주는 라이브러리다. TabLayout과 연결하여 스와이프가 가능한 탭 화면을 구현할 수 있다.

ViewPager2는 외부 라이브러리임으로, build.gradle 파일의 dependencies에 패키지명을 명시하여 프로그램 내부에 라이브러리를 다운로드 받는다.

implementation "androidx.viewpager2:viewpager2:1.0.0"

ViewPager2 설정 방법

1. ViewPager2를 사용할 Activity나 Fragment에 배치한다.

<androidx.viewpager2.widget.ViewPager
	android:id="@+id/view_pager
	android:width="match_parent"
	android:height="500dp" />

2. FragmentStateAdapter를 사용하여 Fragment간 교체 적용

class ViewPagerAdapter(fragmentActivity: FragmentActivity): 
	FragmentStateAdapter(fragmentActivity) {
	// 페이지 갯수 설정
	overrdie fun getItemCount: Int = 3

	// 불러올 Fragment 정의
	override fun createFragment(position: Int): Fragment{
		return when(position) {
        	//Fragment 이름들
			0 -> OneFragment()
			1 -> TwoFragment()
			2 -> ThreeFragment()
			else -> OneFragment   
		}
	}
}

3. ViewPager2를 배치한 Activity나 Fragment에서 Adapter 연결

/*
ViewPagerAdapter가 fragmentActivity를 매개변수로 받으므로,
fragment의 경우 getActivity를 사용하거나 
매개변수를 fragmentFragment 타입으로 바꾼다
*/
val mainTabVPAdapter = MainTabVPAdapter(this)
viewBinding.vpMain.adapter = mainTabVPAdapter

(번외) TabLayout과 같이 사용하기

ViewPager가 추가된 Activity나 Fragment의 xml 파일에 TabLayout 추가

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorFullWidth="false"
    app:tabSelectedTextColor="#3f3fff"
    app:tabIndicatorColor="#3f3fff"
    app:tabRippleColor="#00ff0000"/>

Tablayout이 추가된 Activity나 Fragment의 클래스 파일에 TabLayoutMediator를 선언하여 TabLayout과 ViewPager를 연결

TabLayoutMediator(binding.tab_layout, binding.view_pager){
		// tab, position -> 적용하고 싶은 이벤트 or 명령들 작성
		tab, position -> tab.text = tabTextList[position]
}.attach()