코틀린 CollapsingToolbarLayout으로 움직이는 appbar만들

status bar와 toolbar가 위 그림처럼 있을때 화면을 아래로 스크롤하면 toolbar가 없어지고

위로 스크롤 하면 다시 생기도록 움직이는 toolbar를 만들어 보겠습니다.

 

 

 

activity_app_bars_top.xml 만들기

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:fitsSystemWindows="true">

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

	<!-- layout_scrollFlags속성으로 toolbar가 움직임 -->
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/CollapsingToolbarLayout"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways">

            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/topAppBar"
                style="@style/Widget.MaterialComponents.Toolbar.Primary"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:menu="@menu/app_bars_top_item"
                app:navigationIcon="@drawable/menu_24">

            </com.google.android.material.appbar.MaterialToolbar>
        </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"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:background="#6B66FF">

        <!-- Scrollable content -->
        
        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">


            <!-- 높이를 wrap으로 해야 스크롤 됨-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

				<!-- 스크롤 효과를 보기 위한 임시 뷰-->
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="300dp"
                    android:background="@color/black"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="300dp"
                    android:background="@color/cardview_light_background"/>

            </LinearLayout>
        </ScrollView>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

layout_scrollFlags 속성

화면을 스크롤 할 때, CollapsingToolbarLayout을 얼마나 가리고 보일 것인지 정하는 속성입니다.

scroll|enterAlways을 입력 하면 스크롤시 toolbar가 움직입니다.

 

navigationIcon 속성

toolbar왼쪽의 햄버거 버튼 이미지를 설정합니다.

 

menu 속성

app_bars_top_item.xml을 추가하여 toolbar오른쪽에 메뉴를 추가합니다.

 

 

 

 

app_bars_top_item.xml 만들기

res폴더에 android resource directory를 클릭하여 menu폴더를 만들어줍니다.

menu폴더에 app_bars_top_item.xml 파일을 만들어줍니다.

 

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/favorite"
        android:icon="@drawable/favorite_24"
        android:title="@string/favorite"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/search"
        android:icon="@drawable/search_24"
        android:title="@string/search"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/more"
        android:icon="@drawable/more_24"
        android:title="@string/more"
        app:showAsAction="ifRoom"/>
</menu>

icon에 쓰일 이미지는 vector asset에서 만들수 있습니다.

 

 

메뉴 클릭이벤트 만들기

        var topAppBar = findViewById<MaterialToolbar>(R.id.topAppBar)

	// 네비게이션 클릭리스너
        topAppBar.setNavigationOnClickListener {
            // todo 
        }

	// 메뉴 클릭리스너
        topAppBar.setOnMenuItemClickListener { menuItem ->
            when (menuItem.itemId) {
                R.id.favorite -> {
                    // todo 
                    true
                }
                R.id.search -> {
                    // todo 
                    true
                }
                R.id.more -> {
                    // todo 
                    true
                }
                else -> false
            }
        }