[Android] ViewPager2에 대해서 feat.RecyclerView

 

 

ViewPager2는 Android 에서 수평 또는 수직 방향으로 스와이프하여 화면을 전환할 수 있는 라이브러리이다.

ViewPager2는 RecyclerView를 기반으로 구현되어 있다. ViewPager2의 구조와 구현 방식은 RecyclerView의 유연성과 효율성을 활용하여 안정적인 페이지 관리와 스와이핑 경험을 제공한다.

RecyclerView2는 내부적으로 RecyclerView를 사용하여 페이지들을 관리하고 표시한다.
=> 뷰를 재사용하고 스크롤링 매커니즘을 활용할 수 있음을 의미함

ViewPager와 ViewPager2는 주로 Fragment를 관리하고 전환하는 데 사용된다.
이 컴포넌트들은 앱 내에서 여러 페이지 또는 탭 간의 스와이프 가능한 인터페이스를 구현하는 데 이상적이다. 각 페이지는 독립적인 Fragment로 구현되며, ViewPager는 이 Fragment들 사이를 부드럽게 전환할 수 있도록 한다. ViewPager는 Fragment의 라이프사이클을 자동으로 관리한다. 

ViewPager를 사용하여 Activity 간을 전환하는 것은 직접적으로 지원되지 않는다. ViewPager와 ViewPager2는 주로 같은 Activity 내에서 다른 컨텐츠 또는 뷰를 전환하는 용도로 설계되었다.

 

 

상속구조

출처 : https://blog.gangnamunni.com/post/viewpager2/

 

ViewPager2 자체는 androidx.viewpager2.widget.ViewPager2 클래스로서 ViewGroup을 상속받는다.

하지만, 그 내부 구현은 RecyclerView를 사용해서 항목을 렌더링하고 관리한다.
결과적으로 ViewPager2의 핵심 기능은 ReyclerView의 Adapter와 ViewHolder 패턴을 이용하여 구현된다.

Adapter는 페이지 데이터를 관리하고, 각 페이지를 나타내는 뷰를 생성하고 바인딩하는 역할을 한다.
ViewPager2에서는 주로 FragmentStateAdapter 또는 RecyclerView.Adapter의 커스텀 구현을 사용한다.

• FragmentStateAdapter : Fragment를 페이지로 사용할 때 적합하다. 이 Adapter는 각 페이지를 Fragment로 관리하며, Fragment의 라이프 사이클을 처리한다.
• RecyclerView.Adapter : 직접 뷰를 관리해야 할 때 사용한다. 이 경우 Adapter는 ViewHolder 패턴을 사용하여 뷰를 관리한다.

즉, 각 페이지를 뷰로 구성하고 싶으면 RecyclerView.Adapter를 직접 상속하면 되며
각 페이지를 프레그먼트로 구성하고 싶으면 FragmentStateAdapter를 상속하면 된다.

 

ViewPager2 내부 동작 원리

RecyclerView에서의 어댑터

ViewPager에서의 어댑터

위 그림을 통해 어댑터(Adapter)의 역할을 쉽게 파악할 수 있을 것이다.

사용자가 정의한 데이터 리스트를 입력으로 받아 화면에 표시할 뷰 아이템을 생성하는 것이 RecyclerView 였다면, ViewPager2에서는 페이지가 되는 것을 알 수 있다.

 

 

ViewPager2의 주요 특징

• 수평 및 수직 스크롤 지원
• RecyclerView 기반
• Fragmenet 및 View 지원 ( FragmentPagerAdapt / RecyclerView.Adapter )
• RTL (Right-to-left) 지원 : 언어 설정에 따른 콘텐츠 방향 전환을 자동으로 지원한다.
• Page 변환 애니메이션 커스터마이징
• DiffUtil을 사용한 효율적인 데이터 업데이트

 

 

사용법

1. 의존성 추가

dependencies {
    implementation ("androidx.viewpager2:viewpager2:1.0.0")
}

 

2. ViewPager2 추가

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

 

3. ViewPager2에 Adapter 설정 ( RecyclerView.Adapter 또는 FragmentStateAdapter)

(1) FragmentStateAdapter 구현 예시

class MyAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {
    override fun getItemCount(): Int = 3 // 페이지 수

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

// ViewPager2에 Adapter 설정
viewPager.adapter = MyAdapter(this)

 

(2) RecyclerView.Adapter 구현 예시

class MyAdapter : RecyclerView.Adapter<MyAdapter.MyViewHolder>() {
    class MyViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        // 뷰 홀더에 뷰 컴포넌트를 바인딩
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.my_page_layout, parent, false)
        return MyViewHolder(view)
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        // 페이지 데이터를 뷰에 바인딩
    }

    override fun getItemCount(): Int {
        // 페이지 수 반환
    }
}

 

4. 어댑터 설정

// 상황에 맞게 코드 작성
viewPager.adapter = RecylerViewAdapter() 
viewPager.adapter = FragmentStateAdapter()

 

 

 

 

 

▼ 공식 문서

https://developer.android.com/develop/ui/views/animations/vp2-migration?hl=ko#java

ViewPager에서 ViewPager2로 이전  |  Views  |  Android Developers

 

▼ ViewPager2 샘플 코드

https://github.com/android/views-widgets-samples/tree/master/ViewPager2