안드로이드 ViewPager에서 ViewPager2로의 이전

ViewPager2란?

• ViewPager2는 AndroidX 라이브러리에 포함된 화면 간 스와이프 기반 위젯
• ViewPager의 개선된 버전으로, 성능 및 기능 면에서 개선
• ViewPager와 다르게 RecyclerView를 기반으로 만들어진 컴포넌트라는것을 확인할 수 있다.
  

ViewPager2로 이전하는 이유

• ViewPager2는 AndroidX 라이브러리의 지원을 받고 있어 적극적으로 개발 및 업데이트
• 향상된 기능을 제공하며 ViewPager에서 발생하는 일반적인 문제를 해결

ViewPager2의 향상된 기능

1. 세로 방향 지원

• ViewPager2는 가로 스와이프 뿐만 아니라 세로 스와이프도 지원

        android:orientation="vertical"

2. 오른쪽에서 왼쪽(RTL) 지원

• ViewPager2는 오른쪽에서 왼쪽(RTL) 방향으로 페이징을 지원
• 오른쪽에서 왼쪽으로 텍스트를 사용하는 언어나 레이아웃 방향을 변경할 필요가 있는 경우 유용

        android:layoutDirection="rtl"

3. 수정 가능한 프래그먼트 컬렉션

• ViewPager2는 수정 가능한 프래그먼트 컬렉션을 통해 동적으로 프래그먼트를 추가, 제거 또는 순서를 변경
• 앱은 런타임 중에 컬렉션을 동적으로 조작할 수 있으며 UI를 적절하게 업데이트

4. DiffUtil

• ViewPager2는 RecyclerView를 기반으로 구축되어, DiffUtil 유틸리티 클래스를 활용할 수 있다
• 데이터 세트의 변경을 효과적으로 관리하고 변경 사항을 시각적으로 나타내는데 사용

5. 중첩된 스크롤 가능 요소 지원

• ViewPager2는 스크롤 뷰와 중첩된 상황에서 스크롤이 올바르게 작동하도록 지원
• ViewPager2를 스크롤 가능한 뷰와 함께 사용하는 경우 유용

6. 뷰바인딩(View Binding) 지원

• ViewPager2는 뷰바인딩(View Binding)을 활용할 수 있도록 지원
• 레이아웃 리소스와 뷰 요소를 쉽게 Binding

ViewPager2 사용해보기

각각 다른 배경색을 가진 Fragment를 슬라이드 해보기

1. build.gradle 설정

dependencies {
    implementation 'androidx.viewpager2:viewpager2:1.0.0'
}

2. Layout file ViewPager2 설정

    <androidx.viewpager2.widget.ViewPager2
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

    <me.relex.circleindicator.CircleIndicator3
        android:id="@+id/vp_indicator"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        app:ci_drawable="@drawable/gr_radius"
        app:ci_drawable_unselected="@drawable/black_radius" />

Indicator : https://github.com/ongakuer/CircleIndicator

radius.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/green"/>
</shape>

3. 슬라이드 할 Fragment 설정

ViewPager2와 함께 사용하여 각 페이지를 나타내며, 페이지의 배경을 동적으로 설정.
페이지의 위치에 따라 다른 배경색을 표시하며, ViewPager2에서 페이지가 슬라이드될 때 각 페이지의 배경색을 표시
빨강 - 파랑 - 노랑 - 초록 - 하늘

class ViewPagerScreenFragment(val position: Int) : Fragment() {

    lateinit var fragmentViewPagerScreenFragment: FragmentViewPagerScreenBinding
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        fragmentViewPagerScreenFragment = FragmentViewPagerScreenBinding.inflate(inflater)

        when(position) {
            0 -> fragmentViewPagerScreenFragment.root.setBackgroundResource(R.color.red)
            1 -> fragmentViewPagerScreenFragment.root.setBackgroundResource(R.color.blue)
            2 -> fragmentViewPagerScreenFragment.root.setBackgroundResource(R.color.yellow)
            3 -> fragmentViewPagerScreenFragment.root.setBackgroundResource(R.color.green)
            4 -> fragmentViewPagerScreenFragment.root.setBackgroundResource(R.color.sky)
            else -> fragmentViewPagerScreenFragment.root.setBackgroundResource(R.color.black)
        }

        return fragmentViewPagerScreenFragment.root
    }
}

4. adapter설정

• getItemCount() : 페이지의 총 수를 반환. ViewPager2에게 표시할 Fragment의 수
• createFragment(position: Int) : 페이지의 위치(position)를 기반으로 해당 위치에 표시할 Fragment를 생성. 아래 코드는 ViewPagerScreenFragment를 생성하고 위치를 인수로 전달

class ViewPagerAdapter(fragmentManger: FragmentActivity, private val count: Int): FragmentStateAdapter(fragmentManger) {
    override fun getItemCount(): Int {
        return count
    }

    override fun createFragment(position: Int): Fragment {
        return ViewPagerScreenFragment(position)
    }
}

5. ViewPager 연결

class ViewPagerFragment : Fragment() {
    lateinit var fragmentViewPagerFragment: FragmentViewPagerBinding
    lateinit var mainActivity: MainActivity
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        fragmentViewPagerFragment = FragmentViewPagerBinding.inflate(inflater)
        mainActivity = activity as MainActivity

        fragmentViewPagerFragment.run {
            viewPager.run {
                adapter = ViewPagerAdapter(mainActivity, 5) // 5: page 수
                orientation = ViewPager2.ORIENTATION_HORIZONTAL // 스크롤방향 가로 
                adapter!!.registerAdapterDataObserver(vpIndicator.adapterDataObserver)
                // ViewPager2 어댑터와 ViewPager2와 연결된 Indicator를 동기화
            }
            vpIndicator.setViewPager(viewPager) // ViewPager2와 연결된 Indicator 설정
        }
        return fragmentViewPagerFragment.root
    }
}

6. 결과

가로 스크롤

세로 스크롤

참고자료
https://developer.android.com/training/animation/vp2-migration?hl=ko
https://medium.com/google-developer-experts/exploring-the-view-pager-2-86dbce06ff71
https://blog.gangnamunni.com/post/viewpager2/