Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

ViewPager에서 ViewPager2로 이전

ViewPager2는 ViewPager 라이브러리의 개선된 버전으로, 향상된 기능을 제공하고 ViewPager 사용 시 겪는 일반적인 어려움을 해결합니다. 앱에서 이미 ViewPager를 사용하고 있다면 이 페이지를 참고하여 ViewPager2로 이전하는 방법을 자세히 알아보세요.

앱에서 ViewPager2를 사용하고 싶지만 현재 ViewPager를 사용하고 있지 않다면 ViewPager2를 사용하여 프래그먼트 간 슬라이드하기 및 ViewPager2를 사용하여 탭으로 스와이프 뷰 만들기를 참고하세요.

ViewPager2로 이전하여 얻을 수 있는 이점

마이그레이션해야 하는 주된 이유는 ViewPager2가 활성 개발 지원을 받고 있지만 ViewPager는 그렇지 않기 때문입니다. 하지만 ViewPager2는 다른 몇 가지 이점도 제공합니다.

수직 방향 지원

ViewPager2는 기존의 가로 페이징 외에도 세로 페이징을 지원합니다. android:orientation 속성을 설정하여 ViewPager2 요소에 세로 페이징을 사용 설정할 수 있습니다.

<androidx.viewpager2.widget.ViewPager2
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:orientation="vertical" />

setOrientation() 메서드를 사용하여 프로그래매틱 방식으로 이 속성을 설정할 수도 있습니다.

오른쪽에서 왼쪽 지원

ViewPager2는 오른쪽에서 왼쪽(RTL) 페이징을 지원합니다. RTL 페이징은 언어에 따라 적절한 경우 자동으로 사용 설정되지만, android:layoutDirection 속성을 설정하여 ViewPager2 요소에 RTL 페이징을 수동으로 사용 설정할 수도 있습니다.

<androidx.viewpager2.widget.ViewPager2
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layoutDirection="rtl" />

setLayoutDirection() 메서드를 사용하여 프로그래매틱 방식으로 이 속성을 설정할 수도 있습니다.

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

ViewPager2는 수정 가능한 프래그먼트 컬렉션을 통해 페이징을 지원하며, 기본 컬렉션이 변경될 때 notifyDatasetChanged()를 호출하여 UI를 업데이트합니다.

즉, 앱이 런타임에 프래그먼트 컬렉션을 동적으로 수정할 수 있으며 ViewPager2는 수정된 컬렉션을 올바르게 표시합니다.

DiffUtil

ViewPager2는 RecyclerView를 기반으로 빌드되므로 DiffUtil 유틸리티 클래스에 액세스할 수 있습니다. 이렇게 하면 여러 이점이 있지만, 가장 중요한 것은 ViewPager2 객체가 기본적으로 RecyclerView 클래스의 데이터 세트 변경 애니메이션을 활용한다는 점입니다.

ViewPager2로 앱 이전

앱의 ViewPager 객체를 ViewPager2로 업데이트하려면 다음 단계를 따르세요.

XML 레이아웃 파일 업데이트

먼저 XML 레이아웃 파일의 ViewPager 요소를 ViewPager2 요소로 바꿉니다.

<!-- A ViewPager element -->
<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<!-- A ViewPager2 element -->
<androidx.viewpager2.widget.ViewPager2
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

어댑터 클래스 업데이트

ViewPager를 사용할 때는 객체에 새 페이지를 제공하는 어댑터 클래스를 확장해야 했습니다. 사용 사례에 따라 ViewPager는 세 가지 추상 클래스를 사용했습니다. ViewPager2는 두 가지 추상 클래스만 사용합니다.

ViewPager2 객체로 변환하는 각 ViewPager 객체에 대해 다음과 같이 적절한 추상 클래스를 확장하도록 어댑터 클래스를 업데이트합니다.

ViewPager가 PagerAdapter를 사용하여 뷰를 페이징한 경우 ViewPager2와 함께 RecyclerView.Adapter를 사용합니다.
ViewPager가 FragmentPagerAdapter를 사용하여 적은 수의 고정된 프래그먼트를 페이징하는 경우 ViewPager2와 함께 FragmentStateAdapter를 사용합니다.
ViewPager에서 FragmentStatePagerAdapter를 사용하여 크거나 알 수 없는 수의 프래그먼트를 페이징하는 경우 ViewPager2와 함께 FragmentStateAdapter를 사용합니다.

생성자 매개변수

FragmentPagerAdapter 또는 FragmentStatePagerAdapter에서 상속하는 프래그먼트 기반 어댑터 클래스는 항상 단일 FragmentManager 객체를 생성자 매개변수로 허용합니다. ViewPager2 어댑터 클래스에 대해 FragmentStateAdapter를 확장하는 경우 생성자 매개변수에 다음 옵션을 대신 사용할 수 있습니다.

ViewPager2 객체가 있는 FragmentActivity 객체 또는 Fragment 객체입니다. 대부분의 경우 이 옵션을 사용하는 것이 더 좋습니다.
FragmentManager 객체 및 Lifecycle 객체.

RecyclerView.Adapter에서 직접 상속하는 뷰 기반 어댑터 클래스에는 생성자 매개변수가 필요하지 않습니다.

메서드 재정의

또한 어댑터 클래스는 ViewPager에 사용한 것과 다른 메서드를 ViewPager2에 재정의해야 합니다.

getCount()가 아닌 getItemCount()를 재정의합니다. 이름을 제외하고 이 메서드는 변경되지 않습니다.
getItem() 대신 프래그먼트 기반 어댑터 클래스에서 createFragment()를 재정의합니다. 새 createFragment() 메서드가 인스턴스를 재사용하는 대신 함수가 호출될 때마다 항상 새 프래그먼트 인스턴스를 제공하는지 확인합니다.

요약

요약하자면 ViewPager2에서 사용할 수 있도록 ViewPager 어댑터 클래스를 변환하려면 다음과 같이 변경해야 합니다.

뷰를 페이징하려면 상위 클래스를 RecyclerView.Adapter로 변경하고 프래그먼트를 페이징하려면 FragmentStateAdapter로 변경합니다.
프래그먼트 기반 어댑터 클래스에서는 생성자 매개변수를 변경합니다.
getCount()가 아닌 getItemCount()를 재정의합니다.
프래그먼트 기반 어댑터 클래스에서 getItem() 대신 createFragment()를 재정의합니다.

Kotlin

// A simple ViewPager adapter class for paging through fragments
class ScreenSlidePagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {
    override fun getCount(): Int = NUM_PAGES

    override fun getItem(position: Int): Fragment = ScreenSlidePageFragment()
}

// An equivalent ViewPager2 adapter class
class ScreenSlidePagerAdapter(fa: FragmentActivity) : FragmentStateAdapter(fa) {
    override fun getItemCount(): Int = NUM_PAGES

    override fun createFragment(position: Int): Fragment = ScreenSlidePageFragment()
}

자바

// A simple ViewPager adapter class for paging through fragments
public class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
    public ScreenSlidePagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return new ScreenSlidePageFragment();
    }

    @Override
    public int getCount() {
        return NUM_PAGES;
    }
}

// An equivalent ViewPager2 adapter class
private class ScreenSlidePagerAdapter extends FragmentStateAdapter {
    public ScreenSlidePagerAdapter(FragmentActivity fa) {
        super(fa);
    }

    @Override
    public Fragment createFragment(int position) {
        return new ScreenSlidePageFragment();
    }

    @Override
    public int getItemCount() {
        return NUM_PAGES;
    }
}

TabLayout 인터페이스 리팩터링

ViewPager2에서는 TabLayout 통합이 변경되었습니다. 현재 TabLayout 객체와 함께 ViewPager를 사용하여 탐색을 위한 가로 탭을 표시하는 경우 ViewPager2와 통합하려면 TabLayout 객체를 리팩터링해야 합니다.

TabLayout가 ViewPager2에서 분리되었으며 이제 Material 구성요소의 일부로 사용할 수 있습니다. 즉, 이를 사용하려면 build.gradle 파일에 적절한 종속 항목을 추가해야 합니다.

Groovy

implementation "com.google.android.material:material:1.1.0-beta01"

Kotlin

implementation("com.google.android.material:material:1.1.0-beta01")

또한 XML 레이아웃 파일의 계층 구조에서 TabLayout 요소의 위치를 변경해야 합니다. ViewPager를 사용하면 TabLayout 요소가 ViewPager 요소의 하위 요소로 선언되지만, ViewPager2를 사용하면 TabLayout 요소가 ViewPager2 요소 바로 위에 동일한 수준으로 선언됩니다.

<!-- A ViewPager element with a TabLayout -->
<androidx.viewpager.widget.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</androidx.viewpager.widget.ViewPager>

<!-- A ViewPager2 element with a TabLayout -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

마지막으로 TabLayout 객체를 ViewPager 객체에 연결하는 코드를 업데이트해야 합니다. TabLayout는 자체 setupWithViewPager() 메서드를 사용하여 ViewPager와 통합하지만 ViewPager2와 통합하려면 TabLayoutMediator 인스턴스가 필요합니다.

TabLayoutMediator 객체는 TabLayout 객체의 페이지 제목을 생성하는 작업도 처리합니다. 즉, 어댑터 클래스가 getPageTitle()를 재정의할 필요가 없습니다.

Kotlin

// Integrating TabLayout with ViewPager
class CollectionDemoFragment : Fragment() {
    ...
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        val tabLayout = view.findViewById(R.id.tab_layout)
        tabLayout.setupWithViewPager(viewPager)
    }
    ...
}

class DemoCollectionPagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {

    override fun getCount(): Int  = 4

    override fun getPageTitle(position: Int): CharSequence {
        return "OBJECT ${(position + 1)}"
    }
    ...
}

// Integrating TabLayout with ViewPager2
class CollectionDemoFragment : Fragment() {
    ...
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        val tabLayout = view.findViewById(R.id.tab_layout)
        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
            tab.text = "OBJECT ${(position + 1)}"
        }.attach()
    }
    ...
}

자바

// Integrating TabLayout with ViewPager
public class CollectionDemoFragment extends Fragment {
    ...
    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        TabLayout tabLayout = view.findViewById(R.id.tab_layout);
        tabLayout.setupWithViewPager(viewPager);
    }
    ...
}

public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {
    ...
    @Override
    public int getCount() {
        return 4;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return "OBJECT " + (position + 1);
    }
    ...
}

// Integrating TabLayout with ViewPager2
public class CollectionDemoFragment : Fragment() {
    ...
    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        TabLayout tabLayout = view.findViewById(R.id.tab_layout);
        new TabLayoutMediator(tabLayout, viewPager,
                (tab, position) -> tab.setText("OBJECT " + (position + 1))
        ).attach();
    }
    ...
}

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

ViewPager2는 스크롤 뷰가 이를 포함하는 ViewPager2 객체와 동일한 방향을 갖는 경우 중첩된 스크롤 뷰를 기본적으로 지원하지 않습니다. 예를 들어 세로 방향 ViewPager2 객체 내의 세로 스크롤 뷰에서는 스크롤이 작동하지 않습니다.

방향이 동일한 ViewPager2 객체 내에서 스크롤 뷰를 지원하려면 중첩된 요소를 스크롤할 때 ViewPager2 객체에서 requestDisallowInterceptTouchEvent()를 호출해야 합니다. ViewPager2 중첩 스크롤 샘플은 다목적 맞춤 래퍼 레이아웃을 사용하여 이 문제를 해결하는 한 가지 방법을 보여줍니다.

추가 리소스

ViewPager2에 관해 자세히 알아보려면 다음 추가 리소스를 참조하세요.

동영상

페이지 넘기기: ViewPager2로 이전(Android Dev Summit '19)

ViewPager에서 ViewPager2로 이전 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

ViewPager2로 이전하여 얻을 수 있는 이점

수직 방향 지원

오른쪽에서 왼쪽 지원

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

DiffUtil

ViewPager2로 앱 이전

XML 레이아웃 파일 업데이트

어댑터 클래스 업데이트

생성자 매개변수

메서드 재정의

요약

Kotlin

자바

TabLayout 인터페이스 리팩터링

Groovy

Kotlin

Kotlin

자바

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

추가 리소스

동영상

ViewPager에서 ViewPager2로 이전