[Android] CollapsingToolbarLayout, ViewPager2를 함께 사용시 스크롤 이슈 해결방법

앱을 개발하다가 구글 meterial 라이브러리 중 CollapsingToolbarLayout을 사용했다. 

 

CoordinatorLayout 내부에 상단에 쓸 AppBarLayout 을 쓰고 그 하단에 뷰가 보일 페이지를 구성한다.

나는 하단에 ViewPager2 를 사용하였기 때문에 내부를 NestedScrollView로 감싸고, 그 NestedScrollView에  behavior 옵션을 지정했었다.

app:layout_behavior="@string/appbar_scrolling_view_behavior"

 

아래와 같은 구조로 만들었었는데 스크롤에 이슈가 생겼다.

<androidx.coordinatorlayout.widget.CoordinatorLayout>

	 <com.google.android.material.appbar.AppBarLayout>
     
     	<com.google.android.material.appbar.CollapsingToolbarLayout>
        
         </com.google.android.material.appbar.CollapsingToolbarLayout>
         
     </com.google.android.material.appbar.AppBarLayout>
     
     <androidx.core.widget.NestedScrollView>
     
     	<androidx.viewpager2.widget.ViewPager2/>
        
     </androidx.core.widget.NestedScrollView>
     
</androidx.coordinatorlayout.widget.CoordinatorLayout>

손으로 꾹 누른 상태로 스크롤 하면 상단 AppBar가 움직이지 않고, 스크롤 직후 떼면 관성에 의해서만 AppBar가 동작하는 이슈였다.

 

 

굉장히 많은 삽질과 스택오버플로우의 검색으로 2시간 반만에 문제를 해결했다...😭

무려 7년 7개월 전 스택오버플로우 게시글에서 힌트를 찾을 수 있었다.

 

이 힌트를 보고 구조를 바꾸었다.

 

<androidx.coordinatorlayout.widget.CoordinatorLayout>

	 <com.google.android.material.appbar.AppBarLayout>
     
     	 <com.google.android.material.appbar.CollapsingToolbarLayout>
        
         </com.google.android.material.appbar.CollapsingToolbarLayout>
         
     </com.google.android.material.appbar.AppBarLayout>
     
            <androidx.viewpager2.widget.ViewPager2
                android:id="@+id/view_pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:nestedScrollingEnabled="false"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
    
</androidx.coordinatorlayout.widget.CoordinatorLayout>

ViewPager에 behavior 속성을 넣고 ViewPager 내부에서 사용하는 프래그먼트에 NestedScrollView를 넣었다.

 

fragment.xml

<androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">
        
        ''' 중략 '''
        
</androidx.core.widget.NestedScrollView>

그러자 드디어 원하는대로 동작 성공!!

 

 

 

우선, 두시간 삽질의 원인은 CollapsingToolbarLayout 을 사용하는 xml에 있는 스크롤뷰만 인식한다고 생각했었는데 이게 큰 오산이었다. 뷰페이저에 사용하는 프래그먼트의 스크롤도 인식하도록 구글이 구현해두었을줄이야..

어쨌든 이상한건 밖에 있는 스크롤뷰는 제대로 인식하지 못하고 내부에 있는 스크롤뷰만 제대로 인식하는게 이상하긴 한데 동작해서 좋다.