ViewPager2 중첩 스크롤 문제 해결

안녕하세요? 닉네임간편입니다. 이번 시간에는 ViewPager2의 중첩 스크롤 문제에 대해서 다루겠습니다.

1. 개요

ViewPager2 안에 스크롤뷰가 있거나, 혹은 ViewPager2가 다른 스크롤뷰 안에 포함되어있고 이들의 방향(orientation)이 같은 경우 스크롤이 제대로 작동하지 않는 문제가 있습니다. 기본적으로 ViewPager2는 중첩된 스크롤뷰를 지원하지 않기 때문입니다. 또한 ViewPager2는 final 클래스이기 때문에 다른 커스텀 클래스를 만들어 상속받을 수도 없습니다. 따라서 중첩된 스크롤뷰 문제가 발생할 경우 자체적으로는 해결이 곤란합니다.

2. 해결 방법 - 1

구글 개발자 문서에 나와있는 샘플을 통해 해결할 수 있습니다.

https://github.com/android/views-widgets-samples/blob/master/ViewPager2/app/src/main/res/layout/item_nested_recyclerviews.xml#L43

GitHub - android/views-widgets-samples: Multiple samples showing the best practices in views-widgets on Android.

해당 샘플의 [NestedScrollableHost]를 사용하면 중첩된 스크롤뷰의 문제를 해결할 수 있습니다.

아래처럼 단순히 xml 파일에서 중복되는 스크롤뷰, 또는 ViewPager2를 NestedScrollableHost로 감싸기만 하면 됩니다.

<com.ssacproject.thirdweek.NestedScrollableHost
    android:layout_width="0dp"
    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.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</com.ssacproject.thirdweek.NestedScrollableHost>

그럼 중첩된 스크롤뷰가 원활하게 작동합니다.

3. 해결 방법 -2

스크롤뷰 안에 포함된 스크롤뷰 혹은 리싸이클러뷰에 android:nestedScrollingEnabled 속성을 true로 설정하시면 됩니다.

아래 코드처럼 설정하시면 됩니다.

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewpager_ad"
    android:layout_width="match_parent"
    android:nestedScrollingEnabled="true"
    android:layout_height="wrap_content" />

혹은 프로그래밍적으로 이렇게 설정하셔도 됩니다.

viewpager2.setNestedScrollingEnabled(true)

4. 마무리

이번 시간에는 ViewPager2의 중첩 스크롤 문제에 대해서 다루어봤습니다.

NestedScrollableHost와 setNestedScrollingEnabled 속성은 다른 스크롤뷰 및 리싸이클러뷰에도 적용할 수 있기 때문에, 이번 시간에 잘 정리하셨으면 좋겠습니다.