Android- ViewPager2

ViewPager2

viewpager2는 viewpager의 향상된 버전이고 기존 viewpager에서 생기는 문제들을 해결해줄 수 있다.

뷰 페이저는 화면을 스와이프로 밀어서 화면 전환을 하는 구성을 할 때 사용한다.
뷰 페이저는 RecyclerView기반이다.

dependencies

implementation 'andoirdx.viewpager2:viewpager2:1.0.0'

ViewPager2 XML

activity_main 혹은 viewpager를 이용할 곳에 ViewPager2태그를 작성합니다.

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

Adapter

어댑터는 RecyclerView.Adapter를 사용해도 되고 FragmentStateAdapter를 사용해도 된다.

// MyFramgentPagerAdapter.kt
class MyFragmentPagerAdapter(activity: FragmentActivity): FragmentStateAdapter(activity) {
    val fragments: List<Fragment>
    init {
        fragments = listOf(OneFragment(), TwoFragment(), ThreeFragment())
    }
    override fun getItemCount(): Int = fragments.size

    override fun createFragment(position: Int): Fragment = fragments[position]
}

// MainActivity.kt
class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMainBinding.inflate(layoutInflater)
        binding.viewPager.adapter = MyFragmentPagerAdapter(this)

        setContentView(binding.root)
        setSupportActionBar(binding.toolbar)
    }
}

viewPager의 orientation속성을 이용해서 vertical 스와이프 구성으로 만들 수 있다.

binding.viewPager.orientaion = ViewPager2.ORIENTATION_VERTICAL

TabLayout 적용

TabLayout을 적용하면 탭을 시각적으로 볼 수 있다.

<!--activity_main.xml-->
<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/toolbar"/>

TabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->
            tab.text = "Tab ${position+1}"
        }.attach()