Coordinator Layout을 이용해서 툴바 숨기기

지프치프·2022년 5월 10일
1

Android

목록 보기
50/86
post-thumbnail

“Android 로봇은 Google에서 제작하여 공유한 저작물을 복제하거나 수정한 것으로 Creative Commons 3.0 저작자 표시 라이선스의 약관에 따라 사용되었습니다.”


개요

간혹 앱을 사용하다보면 스크롤 할 때
툴바나 혹은 아래의 바가 사라지는 효과를 경험할 때가 있다.
처음엔 애니메이션을 이용해서 hide 시키는 줄 알았는데
Coordinator Layout을 사용하면 손쉽게 이를 구현할 수 있다.

툴바 숨기기

먼저 AppbarLayout을 사용하여 숨길 Toolbar를 지정해줘야 한다.
아래의 코드를 살펴보자

<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=".activity.CoordinatorActivity" >

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/tb_coordinator"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:title="@string/app_name"
            app:titleTextColor="@color/white"
            app:layout_scrollFlags="scroll|enterAlways"/>
    </com.google.android.material.appbar.AppBarLayout>
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_coordinator"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

AppbarLayout을 이용하여 숨길 Toolbar를 지정하고
Toolbar에 app:layout_scrollFlags="scroll|enterAlways" 속성을 작성해준다.
그리고 스크롤할 View를 AppbarLayout과 같은 레벨에 배치하고
app:layout_behavior="@string/appbar_scrolling_view_behavior" 속성을 작성해준다.

  • app:layout_scrollFlags="scroll|enterAlways"
    View가 사라지는 방법을 지정, 자세한 설명은 아래에서 후술
  • app:layout_behavior="@string/appbar_scrolling_view_behavior"
    해당 View에서 스크롤이 발생하면 Toolbar를 숨긴다고 지정해주는 속성

하단 View 숨기기

하단에 있는 View도 숨길 수 있다.
app:layout_behavior속성만 지정해주면 쉽게 처리할 수 있다.

<?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"
    tools:context=".activity.CoordinatorActivity" >

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/tb_coordinator"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:title="@string/app_name"
            app:titleTextColor="@color/white"
            app:layout_scrollFlags="scroll|enterAlways"/>
    </com.google.android.material.appbar.AppBarLayout>
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_coordinator"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="30dp"
        android:text="button"
        android:layout_gravity="bottom"
        app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

숨길 Button을 추가했다.
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior" 속성이 추가된 것을 볼 수 있는데
app:layout_behavior="@string/appbar_scrolling_view_behavior"이 지정된 View에서 스크롤이 감지되면 아래로 사라지게 된다.


프레임이 끊겨보인다면 gif라서 그런거다

만약 툴바없이 하단의 뷰만 가리고 싶다면 AppbatLayout을 사용하지 않고 가리고 싶은 뷰에 app:layout_behavior만 추가해주면 된다.

layout_scrollFlags

Toolbar를 숨길 방법을 지정하는 속성인데 4가지 종류가 있다.

  • scroll
    View가 사라진다고 지정하며 사용하지 않으면 View는 사라지지 않고 남아있는다.

  • enterAlways
    scroll과 같이 사용되어야하며 아래로 스크롤하면 사라지고 위로 스크롤하면 나타난다.

  • enterAlwaysCollapsed
    enterAlways와 비슷하지만 아래로 스크롤 할 때 리스트의 끝에 도달해야 나타난다. scroll, enterAlways와 같이 사용해야 한다.

  • exitUntilCollapsed
    위로 스크롤 할 때 minHeight에 도달하기 전까진 나타나지 않는다.
    그리고 반대로 스크롤 할 때 minHeight까지는 View가 사라지지 않는다.




개인적으로 공부했던 것을 바탕으로 작성하다보니
잘못된 정보가 있을수도 있습니다.
인지하게 되면 추후 수정하겠습니다.
피드백은 언제나 환영합니다.
읽어주셔서 감사합니다.

profile
지프처럼 거침없는 개발을 하고싶은 개발자

0개의 댓글