탐색 창 구성요소는 사용자가 앱의 다양한 섹션으로 이동할 수 있는 슬라이드 인 메뉴입니다. 사용자는 측면에서 스와이프하거나 메뉴 아이콘을 탭하여 활성화할 수 있습니다.
탐색 창을 구현하는 다음 세 가지 사용 사례를 고려하세요.
- 콘텐츠 구성: 사용자가 뉴스나 블로깅 앱 등 다양한 카테고리 간에 전환할 수 있도록 지원합니다.
- 계정 관리: 사용자 계정이 있는 앱의 계정 설정 및 프로필 섹션으로 연결되는 빠른 링크를 제공합니다.
- 기능 검색: 여러 기능과 설정을 단일 메뉴에 구성하여 복잡한 앱에서 사용자가 쉽게 검색하고 액세스할 수 있도록 합니다.
Material Design에는 두 가지 유형의 탐색 창이 있습니다.
- 표준: 화면 내의 공간을 다른 콘텐츠와 공유합니다.
- 모달: 화면 내 다른 콘텐츠 위에 표시됩니다.
예
ModalNavigationDrawer 컴포저블을 사용하여 탐색 창을 구현할 수 있습니다.
다음 예와 같이 drawerContent 슬롯을 사용하여 ModalDrawerSheet를 제공하고 창 콘텐츠를 제공합니다.
ModalNavigationDrawer(
drawerContent = {
ModalDrawerSheet {
Text("Drawer title", modifier = Modifier.padding(16.dp))
Divider()
NavigationDrawerItem(
label = { Text(text = "Drawer Item") },
selected = false,
onClick = { /*TODO*/ }
)
// ...other drawer items
}
}
) {
// Screen content
}
ModalNavigationDrawer는 다양한 추가 창 매개변수를 허용합니다. 예를 들어 다음 예와 같이 gesturesEnabled 매개변수를 사용하여 창이 드래그에 응답하는지 여부를 전환할 수 있습니다.
ModalNavigationDrawer(
drawerContent = {
ModalDrawerSheet {
// Drawer contents
}
},
gesturesEnabled = false
) {
// Screen content
}
컨트롤 동작
창이 열리고 닫히는 방식을 제어하려면 DrawerState를 사용합니다. drawerState 매개변수를 사용하여 DrawerState를 ModalNavigationDrawer에 전달해야 합니다.
DrawerState를 통해 현재 창 상태와 관련된 속성뿐만 아니라 open 및 close 함수에도 액세스할 수 있습니다. 이러한 정지 함수에는 rememberCoroutineScope를 사용하여 인스턴스화할 수 있는 CoroutineScope가 필요합니다. UI 이벤트에 대한 응답으로 정지 함수를 호출할 수도 있습니다.
val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
drawerState = drawerState,
drawerContent = {
ModalDrawerSheet { /* Drawer content */ }
},
) {
Scaffold(
floatingActionButton = {
ExtendedFloatingActionButton(
text = { Text("Show drawer") },
icon = { Icon(Icons.Filled.Add, contentDescription = "") },
onClick = {
scope.launch {
drawerState.apply {
if (isClosed) open() else close()
}
}
}
)
}
) { contentPadding ->
// Screen content
}
}