“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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
하단에 있는 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
만 추가해주면 된다.
Toolbar를 숨길 방법을 지정하는 속성인데 4가지 종류가 있다.
scroll
View가 사라진다고 지정하며 사용하지 않으면 View는 사라지지 않고 남아있는다.
enterAlways
scroll과 같이 사용되어야하며 아래로 스크롤하면 사라지고 위로 스크롤하면 나타난다.
enterAlwaysCollapsed
enterAlways와 비슷하지만 아래로 스크롤 할 때 리스트의 끝에 도달해야 나타난다. scroll, enterAlways와 같이 사용해야 한다.
exitUntilCollapsed
위로 스크롤 할 때 minHeight에 도달하기 전까진 나타나지 않는다.
그리고 반대로 스크롤 할 때 minHeight까지는 View가 사라지지 않는다.
개인적으로 공부했던 것을 바탕으로 작성하다보니
잘못된 정보가 있을수도 있습니다.
인지하게 되면 추후 수정하겠습니다.
피드백은 언제나 환영합니다.
읽어주셔서 감사합니다.