Android AppBarLayout

김성환·2024년 4월 7일

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

0개의 댓글