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

CoordinatorLayout 을 사용하면

스크롤에 따라 애니메이션으로 AppBar를 숨길 수 있다.

 

 

Appbar 만들기

테마 변경하기

툴바를 사용하기 위해 테마를 NoActionBar로 변경해준다.

 

메뉴 만들기

<?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/search"
        android:icon="@drawable/ic_baseline_search_24"
        android:title="검색"
        app:showAsAction="ifRoom" />

</menu>

툴바 기능을 위한 메뉴 xml을 만들어준다.

예시로 검색 버튼만 만들어 보았다.

 

CoordinatorLayout 사용하기

이제 메인액티비티의 레이아웃을 CoordinatorLayout으로 변경해준다.

 

AppBarLayout 안에 MaterialToobar를 배치해주고, 아까 생성해준 메뉴를 추가해준다.

AppBarLayout은 스크롤뷰 (리사이클러뷰 등..) 와 연결되어 스크롤뷰의 동작에 따라 행동하게 할 수 있도록 한다.

 

여기서 fitsSystemWindows 속성은 뷰가 차지하는 영역을 Statusbar 영역을 제외한 영역까지 확장해주는 역할을 하여 Statusbar 가 툴바를 가리는 것을 방지해준다.

 

MaterialToobar 에서 

layout_scrollFlags 속성을 확인할 수 있는데, 스크롤 동작에 따른 행동을 결정해주는 속성으로,

 

• scroll : 스크롤 이벤트에 반응할 모든 view에 설정
• enterAlways : 아래쪽 방향으로 스크롤 할 때 마다 보여짐
• enterAlwaysCollapsed : 스크롤뷰가 맨위에 위치할 때 보여짐
• exitUntilCollapsed : 뷰의 minHeight가 정의되어 있을 경우, 뷰가 해당 크기까지만 축소됨
• snap : 뷰의 일부만 스크롤 되었을 때 가까운 쪽으로 자동 스크롤됨 (반올림 느낌)

 

등의 속성을 사용할 수 있다.

 

scroll 속성은 필수로 사용해야 하며, 위에 코드에서는 snap과 enterAlways를 추가로 사용하여 다시 스크롤을 살짝이라도 올릴 때 마다 툴바가 표시되도록 하였다.

 

이제 앱바에 연결할 스크롤뷰를 추가해주어야 한다.

스크롤뷰를 사용해도되고, 리사이클러뷰를 사용해도 된다.

여기서는 리사이클러뷰를 사용했으며, 리사이클러뷰 구현과정은 생략하였다.

 

app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"

 

 

속성을 사용하여 앱바와 연결해주어야 한다.

연결된 리사이클러뷰가 스크롤되면, 앱바가 layout_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.MaterialToolbar
                android:id="@+id/toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:menu="@menu/menu_toolbar"
                app:layout_scrollFlags="scroll|snap|enterAlways">

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


    </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>

 

setSupportActionBar(findViewById(R.id.toolbar))

여기선 툴바의 기능은 추가하지 않았지만 기능을 사용하기 위해선

setSupportActionBar로 이 앱의 액션바로 설정해주어야 한다.

 

 

스크롤시 툴바가 사라지고 나타나는 것을 확인할 수 있다.

 

 

 

https://github.com/HanYeop/AndroidStudio-Practice2/tree/master/CoordinatorLayoutEx

GitHub - HanYeop/AndroidStudio-Practice2: (2021.05.20~) 안드로이드 학습 내용 저장소