[Android/Kotlin] CollapsingToolbarLayout 만들어보기.

https://velog.io/@bonimddal2/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-CollapsingToolbarLayout%EC%9C%BC%EB%A1%9C-%EC%9B%80%EC%A7%81%EC%9D%B4%EB%8A%94-%EC%83%81%EB%8B%A8%EB%B0%94-%EB%A7%8C%EB%93%A4%EA%B8%B0

[안드로이드] CollapsingToolbarLayout으로 움직이는 상단바 만들기

 

CollapsingToolbarLayout

---

일명 움직이는 상단바로써 상단 앱 바(app bar)내에 

1. 접히는 View (주로 이미지뷰)

2. 고정되는 View (주로 Toolbar)

 

로 구성되는 CollapsingToolbarLayout을 정의한다.

    <androidx.coordinatorlayout.widget.CoordinatorLayout
    
        <com.google.android.material.appbar.AppBarLayout
        
            <com.google.android.material.appbar.CollapsingToolbarLayout

                <!--parallax: 스크롤 시 접히는 부분-->
                <androidx.appcompat.widget.AppCompatImageView
                
                <!--pin : 스크롤 시 고정되는 부분-->
                <androidx.appcompat.widget.Toolbar

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

        </com.google.android.material.appbar.AppBarLayout>
        
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

 

다음과 같은 XML코드가 정의된다.

Attribution

---

CollapsingToolbarLayout에 쓰이는 Attr을 알아보자.

 

<CollapsingToolbarLayout>

'layout_scorollFlags' : scoroll // enterAlways // enterAlwaysCollapsed // exitUnitCollapsed 

-> 보통 scroll 은 기본으로 들어가고, | 와 함께 뒤에 3가지 속성 중 하나가 함께 쓰인다. 

1.scoroll : 해당 뷰가 화면에서 사라질 수 있게 설정. 만약 설정되지 않으면 해당 뷰는 화면에 항상 남아있다.

2.enterAlways : scoroll 옵션과 같이 사용될 때 아래에서 위(↑)로 스크롤 하는 경우 해당 뷰는 사라지고, 위에서 아래(↓)로 스크롤 하는 경우 다시 나타난다.

 

3.enterAlwaysCollapsed : enterAlways랑 유사하지만, 위에서 아래(↓)로 스크롤할 때 다르다.
위에서 아래(↓)로 스크롤 할때 스크롤 되는 리스트의 끝에 도달했을 때만 해당 뷰가 다시 나타난다. 
만약 minHeight 속성이 같이 설정되어있다면, 해당 값에 스크롤이 도달했을 때 뷰가 나타난다. 

사용 예시) layout_scorollFlags = "scoroll | enterAlways | enterAlwaysCollapsed"

 

4.exitUntilCollapsed : 이 값이 설정되면 아래에서 위(↑)로 스크롤하는 동안 해당 뷰는 사라진다. 위에서 아래(↓)로 스크롤 하더라도 뷰 끝까지 올려야 해당 뷰가 나타난다. 

만약 해당 뷰에 minHeight가 정의되어 있다면, Toolbar가 축소될 때 해당 크기 까지만 축소된다.
-> minHeight는 잘모르겠다 적용이안된다.

 

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="?attr/colorPrimary"
                app:collapsedTitleTextColor="@color/white"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

 

 

---

<CollapsingToolbarLayout> 의 Child View

"layout_collapseMode" : parallx // pin

1.pin : CollapsingToolBarLayout이 완전히 축소되면 툴바는 화면위에 고정된다.

2.parallx : 툴바가 축소되는 동안 parallax 모드로 동작한다.

+ layout_collapseParallaxMultipler 속성을 사용하면 transition의 translation Multiplier를 설정 할 수있다.
+ app:contentScrim 속성을 사용하여 최소화 되었을 때 툴바의 색상을 변경할 수 있다.

            <!--parallax: 스크롤 시 접히는 부분-->
                <androidx.appcompat.widget.AppCompatImageView
                    android:src="@drawable/summer"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    app:layout_collapseMode="parallax"/>
                <!--pin : 스크롤 시 고정되는 부분-->
                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    app:title="여름"
                    app:titleTextColor="@color/white"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:menu="@menu/menu_main_activity"
                    app:layout_collapseMode="pin"/>

 

 

 

CoordinatorLayout

---

FrameLayout의 특징을 갖는 레이아웃으로써 자식뷰끼리 겹쳐보일 수 있다.

CoordinatorLayout의 자식뷰에 *behavior를 지정할 수 있다. 

*behavior란?
behavior는 스크롤, 드래그, 스와이프 등 뷰의 다양한 움직임이나 애니메이션에 따른 상호작용을 구현하기 위해 
사용된다.

 

이 CoordinatorLayout의 behavior속성을 이용하여 뷰페이저 스크롤 시에 상단 바가 반응하도록 만들 수 있다.
※만약 layout_behavior가 정의되어 있지 않다면 아무리 스크롤을 해도 상단 앱 바는 아무런 반응을 하지 않는다.

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

 

behavior는 custom 도 가능. 다음 블로그 포스팅 주제로 해보자.

 

소스코드

---

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>

    </data>

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

        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="?attr/colorPrimary"
                app:collapsedTitleTextColor="@color/white"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <!--parallax: 스크롤 시 접히는 부분-->
                <androidx.appcompat.widget.AppCompatImageView
                    android:src="@drawable/summer"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    app:layout_collapseMode="parallax"/>
                <!--pin : 스크롤 시 고정되는 부분-->
                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    app:title="여름"
                    app:titleTextColor="@color/white"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:menu="@menu/menu_main_activity"
                    app:layout_collapseMode="pin"/>

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

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

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewPager2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>

https://github.com/ranseo/CollapsingToolbarLayoutExample.git