[Android] CoordinatorLayout 사용하기 - (2) CollapsingToolbar 활용

2021.08.19 - [안드로이드/기본] - [Android] CoordinatorLayout 사용하기 - (1) AppBar 숨기기

[Android] CoordinatorLayout 사용하기 - (1) AppBar 숨기기

CoordinatorLayout 을 사용하면 스크롤에 따라 애니메이션으로 AppBar를 숨길 수 있다. Appbar 만들기 테마 변경하기 툴바를 사용하기 위해 테마를 NoActionBar로 변경해준다. 메뉴 만들기

hanyeop.tistory.com

에서 이어지는 글입니다.

코디네이터레이아웃을 사용할 때

CollapsingToolbar 를 사용하면 뭉개지는 애니메이션을 사용하여 좀 더 역동적이고, 이미지도 넣어서 UI를 좀 더 풍성하게 만들 수 있다.

이전글에서 다룬 코드에서

CollapsingToolbar 를 추가해준다.

CollapsingToolbar 는 AppBarLayout 안에 위치하며

그 안에 이미지뷰와 기존의 툴바를 넣어주면 된다.

그 후 scrollFlags 속성을 CollapsingToolbar 로 옮겨주면 된다.

여기서 collapseMode 속성을 pin 으로 설정해주었는데

이 속성이 적용된 뷰는 스크롤 되어 뭉개질때에도 유지된다.

아예 가려지게 하고 싶다면 저 속성을 제외해주고 scrollFlags 속성을 변경해주면 된다.

activity_main.xml 전체코드

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:fitsSystemWindows="true"
            app:title="안녕하세요"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <ImageView
            android:id="@+id/app_bar_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:src="@drawable/cat"
            android:scaleType="centerCrop" />

            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"
                app:menu="@menu/menu_toolbar">
            </com.google.android.material.appbar.MaterialToolbar>

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

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

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:src="@android:drawable/ic_input_add"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>