viewPager2 사용

ViewPager2는 수직방향 슬라이드, right-to-right, 슬라이딩(좌->우)도 지원한다.

또한 viewPager은 더 이상 유지보수하지 않는다고 하여 viewPager2를 알아야한다.

 

 

tabLayout으로 Fragment를 넘기며 사용하는 방법이 궁금해서 찾아보며 실습한 내용이다.

 

1. xml

TabLayout, ViewPager2를 activity_main에 추가한다.

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        app:layout_constraintTop_toBottomOf="@id/tabLayout"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="0dp"
        android:layout_height="0dp" />

 

3개의 Fragment를 생성

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EFE270"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <TextView
        android:text="3"
        android:textColor="@color/black"
        android:textSize="150dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

이런식으로 3개를 만들어 줬다.

 

 

 

2. FragmentStateAdapter 사용

Fragment를 사용하기 위해 FragmentPagerAdapter나 FragmentStatePagerAdater 대신 FragmentStateAdapter를 사용해야한다.

 

새로운 코틀린 파일로 ViewPagerAdapter를 만들어 주면

class ViewPagerAdapter(private val mainActivity: MainActivity) : FragmentStateAdapter(mainActivity) {
}

 

위에 사진에 두개를 만들어줘야한다.

기본으로 3개의 Fragment로 간단히 index로 구현을 해보면

    override fun getItemCount(): Int {
        return 3
    }

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            0 -> {
                return FirstFragment()
            }
            1 -> {
                return SecondFragment()
            }
            else -> {
                return ThirdFragment()
            }
        }
    }

 

이렇게 간단히 만들었다.

 

 

 

tabLayout과 viewPager2를 연결시키는데 도와주는 것은 TabLayoutMediator이다.

public TabLayoutMediator(
      @NonNull TabLayout tabLayout,
      @NonNull ViewPager2 viewPager,
      @NonNull TabConfigurationStrategy tabConfigurationStrategy) {
    this(tabLayout, viewPager, /* autoRefresh= */ true, tabConfigurationStrategy);
  }

tabLayout과 viewPager와 등을 받는다.

 

MainActivity에서 구현해보자면

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.viewPager.adapter = ViewPagerAdapter(this)

        TabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->
            run{
                tab.text = "$position" //TabLayout에 1 2 3과 같이 번호를 붙여줌
            }
        }.attach()
    }

 

//attach ? Fragment를 Activity에 연결하는 메서드이다.

 

 

 

 

 

결과