본문 바로가기

Programming/Kotlin

CollapsingToolbarLayout 와 Viewpager2 호환문제

728x90
반응형
<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/main_appbar"
            app:elevation="0dp"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/Theme.MatchingBox.AppBarOverlay">
            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:statusBarScrim="@android:color/transparent"
                android:fitsSystemWindows="true"
                app:layout_scrollFlags="scroll|enterAlways">
                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/main_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:layout_collapseMode="parallax"
                    android:theme="@style/Theme.MatchingBox.AppBarOverlay">
                    <RelativeLayout
                        android:id="@+id/titleBar"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">
                        <ImageView
                            android:id="@+id/logoImage2"
                            android:layout_width="78dp"
                            android:layout_height="20dp"
                            android:layout_centerInParent="true"
                            android:src="@drawable/ic_logo_text" />
                        <ImageView
                            android:id="@+id/logoImage1"
                            android:layout_width="78dp"
                            android:layout_height="20dp"
                            android:layout_centerInParent="true"
                            android:src="@drawable/ic_logo_text_white" />
                    </RelativeLayout>
                </androidx.appcompat.widget.Toolbar>
            </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>

다음과같이 CollapsingToolbarLayout 와 NestedScrollView 로 스크롤되는 View를 만들던중 Viewpager 영역에 손을대고 스크롤을 하면 툴바가 사라지지 않는 오류가 있었다.

 

아무리 찾아봐도 관련글도없고 Viewpager를 쓰지말아야하나 고민하던 찰나에 다행히 글하나를 발견

 

 

https://stackoverflow.com/questions/71502803/how-to-use-viewpager2-with-collapsibletoolbar-layout

 

How to use ViewPager2 with CollapsibleToolbar layout

I am trying to achieve something with collapsible toolbar layout and I have 2 tabs with a viewPager2 Below are two images for example for the case of expanded screenshot and collapsed screenshot. B...

stackoverflow.com

 

요악하자면 Viewpager는 자체적으로 스크롤 중첩을 활성화하기때문에 NestedScrollView내에서 제대로 동작하지 못한다.

 

때문에 CollapsingToolbar와의 호환이아니라 NestedScrollView와의 호환이 문제있기때문에 툴바가 사라지지않는것이 원인이다. 떄문에 Viewpager의 중첩스크롤을 비활성화 시키면 정상적으로 동작한다.

 

viewPager.children.find { it is RecyclerView }?.let {
    (it as RecyclerView).isNestedScrollingEnabled = false
}

 

728x90
반응형