[Android]CollapsingToolbarLayout 하위 child view 나열 순서

CollapsingToolbarLayout의 하위 자녀 뷰들의 나열 순서의 의미를 알지 못했다.

예제 코드들을 보면 CollapsingToolbarLayout 안의 맨 마지막에 Toolbar 위젯을 넣던데, 그 이유를 딱히 알 수가 없었다.

이번에 작업하면서 여러 삽질을 하며 알게되었다.

 

시작

처음 진입하면 나오는 화면. 이제 화면을 위로 스크롤하며 비교한다.

 

CollapsingToolbarLayout 안에 pin 고정된 Toolbar 위젯이 최상단의 자녀뷰일 경우

 

        <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/appBar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:elevation="0dp">

                <com.google.android.material.appbar.CollapsingToolbarLayout
                    android:id="@+id/toolbarLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed"
                    app:titleEnabled="false">

					<!--최상단에 위치-->
                    <androidx.appcompat.widget.Toolbar
                        android:id="@+id/toolbar"
                        style="@style/ActionBar.Back"
                        android:layout_width="match_parent"
                        app:layout_collapseMode="pin"
                        app:title="여기" />

                    <androidx.viewpager2.widget.ViewPager2
                        android:id="@+id/banner"
                        android:layout_marginTop="@dimen/toolbar_height"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:minHeight="230dp"/>

                </com.google.android.material.appbar.CollapsingToolbarLayout>

                <com.google.android.material.tabs.TabLayout
                    android:id="@+id/tabLayout"
                    android:layout_width="match_parent"
                    android:layout_height="45dp" />

            </com.google.android.material.appbar.AppBarLayout>

            <androidx.viewpager2.widget.ViewPager2
                android:id="@+id/fragmentContainer"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:visibility="invisible"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        </androidx.coordinatorlayout.widget.CoordinatorLayout>

 

pin 된 툴바 영역만큼 뷰페이저2영역이 보인다.

 

 

 

CollapsingToolbarLayout 안에 pin 고정된 Toolbar 위젯이 최하단의 자녀뷰일 경우

 

       <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/appBar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:elevation="0dp">

                <com.google.android.material.appbar.CollapsingToolbarLayout
                    android:id="@+id/toolbarLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed"
                    app:titleEnabled="false">

                    <androidx.viewpager2.widget.ViewPager2
                        android:id="@+id/banner"
                        android:layout_marginTop="@dimen/toolbar_height"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:minHeight="230dp"/>

                    <!--최하단에 위치-->
                    <androidx.appcompat.widget.Toolbar
                        android:id="@+id/toolbar"
                        style="@style/ActionBar.Back"
                        app:navigationIcon="@color/transparent"
                        android:layout_width="match_parent"
                        app:layout_collapseMode="pin"
                        app:title="여기" />

                </com.google.android.material.appbar.CollapsingToolbarLayout>

                <com.google.android.material.tabs.TabLayout
                    android:id="@+id/tabLayout"
                    android:layout_width="match_parent"
                    android:layout_height="45dp" />

            </com.google.android.material.appbar.AppBarLayout>

            <androidx.viewpager2.widget.ViewPager2
                android:id="@+id/fragmentContainer"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        </androidx.coordinatorlayout.widget.CoordinatorLayout>

pin된 툴바 영역만큼 툴바가 보인다.

 

---

 

CollapsingToolbarLayout이 FrameLayout를 상속받아서 그런가 봄.

 

public class CollapsingToolbarLayout extends FrameLayout {
...
}