AppBar가 너무정적이라 웹화면의 여러 툴바들 처럼 앱에서도 AppBar를 동적으로 보이게 만들고 싶을때가 있습니다. 그럴때 AppBarLayout을 사용하면 좀더 동적으로 앱바를 보이게 할수있습니다.
AppBarLayout은 Toolbar를 포함하여 화면의 상단을 더욱 유연하게 조정할 수 있게 해줍니다. AppBarLayout을 사용하면 Toolbar 이외의 요소를 추가하거나, 화면 상단에 이미지를 배치하는 등 다양한 레이아웃을 만들 수 있습니다. 또한 스크롤 이벤트와 함께 동작하여 특정 조건에 따라 화면의 상단을 숨기거나 표시할 수 있습니다.
AppBarLayout또한 Layout이기때문에 뷰를 넣을수있습니다. 툴바 뿐만아니라 ImageView나 TextView를 넣을수도있습니다. Toolbar의 경우 여러 툴바가 있습니다. 툴바를 사용하지 않더라도 따로 레이아웃을 지정하여 사용자에게 보여줄수있습니다.
AppBarLayout은 CoordinatorLayout과 같이 사용한다면 AppBarLayout.ScrollingViewBehavior를 사용할수있게되서 layout_scrollFlags속성을 지정할수있게됩니다.
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!-- Your scrolling content -->
</androidx.core.widget.NestedScrollView>
<com.google.android.material.appbar.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<androidx.appcompat.widget.Toolbar
...
app:layout_scrollFlags="scroll|enterAlways"/>
<com.google.android.material.tabs.TabLayout
...
app:layout_scrollFlags="scroll|enterAlways"/>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
layout_scrollFlags 속성으로 스크롤 여부와 방식을 설정합니다.
scroll : 스크롤 되게 지정
exitUntilCollapesd : view의 minHeight(Toolbar의 세로크기)까지만 스크롤되게 지정
enterAlawaysCollapsed : 스크롤되어 전체가 사라지게 지정
뿐만아니라 AppBarLayout 에서는 offset 상태를 OnOffsetChangeListener 를 통해 제공 합니다.
이 리스너에서 제공하는 verticalOffset의 경우 일반적으로 0에서 시작하여 AppBarLayout이 스크롤될 때 픽셀 단위로 변경됩니다. AppBarLayout이 완전히 축소되면 일반적으로 -AppBarLayout의 높이와 같은 음수 값이 됩니다. AppBarLayout이 완전히 확장되면 0이 됩니다.
binding.appbarLayout.addOnOffsetChangedListener { appBarLayout : AppBarLayout , verticalOffset : Int ->
}
reference
https://developer.android.com/reference/com/google/android/material/appbar/AppBarLayout
https://velog.io/@changhee09/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-AppBarLayout
https://m2.material.io/components/app-bars-top/android
https://blog.naver.com/pistolcaffe/221016672922
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