Android Bottom AppBar 사용하기
Material 2.0에 소개된 신기능 파헤치기
Bottom App Bar란?
Material 2.0에서 소개된 바텀앱바는 특정한 한두가지의 주요한 동작(액션)이 있는 앱에 사용하기 적합한 UI입니다. 예를들어 TO-DO리스트 혹은 노트처럼 할일만들기, 노트생성과 같은 기능이 명확할때 사용하기 좋습니다. 사용자에게 보여주어야할 메뉴가 많은경우에는 Drawer, 4~5가지 정도의 범주로 나누어진다면 Bottom Navigation View 혹은 TabLayout + Viewpager가 적합합니다.
개인적으로 생각할때 바텀앱바의 가장 큰 장점은 스크롤을 보여주지 않아도 사용자에게 스크롤 해야함을 알려줄 수 있습니다. 동그란 Floating App Bar와 Bottom App Bar 사이에 빈 공간을통해 컨텐츠를 일부분 노출함으로써 직관적으로 스크롤을 내려야 더 많은 컨텐츠를 볼 수 있다고 알려줍니다.
주의할점은 Toast나 Snackbar가 AppBar를 가릴 수 있으니 미리 레이아웃을 짤때 이 점을 염두해두어야합니다.
또 큰 장점중의 하나는 스크롤 시 하단 부분을 가려 전체화면과 동일한 레이아웃효과를 제공합니다.
앱바 구현하기
레이아웃구성
바텀앱바는 CoordinatorLayout과 함께 사용해야하며 안드로이드 스튜디오 3.2 이하버전에서는 레이아웃이 제대로 표현되지 않을 수 있습니다.
앱바의 속성 살펴보기
FAB Alignment(app:fabAlignmentMode)
앱바의 정렬 위치를 설정할 수 있습니다.
보통 오른손에 스마트폰을 들고있기때문에 오른쪽 앱바에 뒤로가기 버튼을 두면 사용하기가 한결쉽습니다. 다른 Framgent로 이동한다거나 화면전환이 발생할때 간단히 아래와 같은 코드로 애니메이션을 구현할 수 있습니다.
app_bar.fabAlignmentMode = BottomAppBar.FAB_ALIGNMENT_MODE_END
FAB Attached
바텀앱바와 플로팅버튼이 떨어져있을지 붙어있을지 설정할 수 있습니다. false로 한다면 아래와같은 형태로 볼 수 있습니다.
fabCradleRoundedCornerRadius
플로팅버튼과 AppBar사이의 간격을 조절할 수 있습니다.
네비게이션
플로팅 앱바를 제외하고 바텀앱바는 크게 2가지의 메뉴로 이루어져있습니다. 왼쪽의 네비게이션 아이콘과 오른쪽의 메뉴아이콘입니다. 주로 왼쪽은 DrawrLayout처럼 여러 아이콘을 보여줄때 사용합니다.
주로 BottomSheetDialog를 통해 구현하현합니다. 반면 오른쪽메뉴는 즐겨찾기, 검색과같이 사용자의 사용빈도가 조금 더 많은 메뉴들을 구현할때 사용합니다. 클릭될 경우 아래와 아래와 같은 리스너를 사용해 구현합니다.
bottomAppBar.setNavigationOnClickListener오른쪽메뉴는 replaceMenu 메서드를 통해 구현할 수 있습니다.
bottom_app_bar.replaceMenu(R.menu.menu_bottom_nav)
bottom_app_bar.setOnMenuItemClickListener({
//구현부분
})
