Bottom sheets are surfaces containing supplementary contents that are anchored to the bottom of the screen. 바텀 시트는 화면 바닥에 연결되어 추가적인 콘텐츠를 담고 있는 화면입니다. (내 뇌)
[출처] : Google Material Design 2
처음 지도 화면을 만들겠다고 하고 나서, Reference로 봤던 지도 앱들에서 가장 눈에 띄었던 컴포넌트 였다.
바닥에 연결되어 있으면서, 지도에 있는 핀을 터치하면 올라오고, 다른 곳을 터치하면 또 내려가는 그런 동작을 하는 컴포넌트.
이런 신기한 컴포넌트가 있다니! 당장 구글링을 시작했다.
그런데 나에게 돌아온 건 Google Developer 문서가 아닌 Material 문서였다.
새로 정의하는게 아니라 그냥 스타일이라고?
정확하게는 다른 것을 정의해 주는 것이었다. 그래서 머터리얼 공식 문서를 하나씩 읽어보면서 어떻게 하는 건지 알아봤다.
Material Component이기 때문에 의존성을 추가해주어야 한다.
build.gradle에 두 가지를 설정해주도록 하자.
repositories {
google() // Material 은 구글에서 제공하는 라이브러리이기 때문
mavenCentral()
}
dependencies {
implementation 'com.google.android.material:material:<version>'
}
Bottom Sheet에는 세 가지 종류가 있다.
**Standard Bottom Sheet**
**Modal Bottom Sheet**
**Expanding Bottom Sheet**
스탠다드 타입은 메인 화면과 바텀 시트를 동시에 보여주고 상호작용 할 때 사용할 수 있다.