CoordinatorLayout & CollapsingToolbarLayout

💻 CoordinatorLayout & CollapsingToolbarLayout 사용 이유 및 코드 (A-2 5번)

CoordinatorLayout, CollapsingToobar 사용 코드

activity_list.xml

해당 xml 파일로 이동 ☁

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.ListActivity" >

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbarlayout_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingtoolbarlayout_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:title="2020년 12월"
            app:expandedTitleMarginStart="24dp"
            app:expandedTitleMarginBottom="16dp"
            app:collapsedTitleGravity="center"
            app:expandedTitleTextAppearance="@style/TextAppearance.App.CollapsingToolbar.Expanded"
            app:collapsedTitleTextAppearance="@style/TextAppearance.App.CollapsingToolbar.Collapsed"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

						<!-- collaps 될 이미지 혹은 layout이 들어갈 부분 -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="112dp"
                android:background="@color/white"
                app:layout_collapseMode="parallax"/>

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar_list"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                app:titleTextAppearance="@style/TextAppearance.App.CollapsingToolbar.Collapsed"
                android:elevation="0dp"
                app:contentInsetStart="0dp"
                app:titleMarginStart="?android:attr/actionBarSize"
                app:contentInsetStartWithNavigation="0dp"
                android:textAlignment="center"
                app:layout_collapseMode="pin">

            </androidx.appcompat.widget.Toolbar>

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

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

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:requiresFadingEdge="vertical"
        android:fadingEdgeLength="150dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        ...

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

• 스크롤에 따라 expand/collaps 되는 toolbar를 구현하기 위해 사용
• 하나 이상의 자식 뷰와 상호작용 하기 위해 CoordinatorLayout을 컨테이너로 사용
• CollapsingToolbarLayout을 AppBarLayout의 direct 자식 뷰에 배치
• CollapsingToolbarLayout 안에 Toolbar를 넣어 Toolbar가 collaps되는 효과를 구현

구조

<CoordinatorLayout>
       <AppBarLayout>
              <CollapsingToolbarLayout>
                     <ImageView/> ← collaps/expand될 layout
                     <Toolbar/>
              </CollapsingToolbarLayout>
       </AppBarLayout>
       <NestedScrollView/>
</CoordinatorLayout>