탐색 창

탐색 창 구성요소는 사용자가 앱의 다양한 섹션으로 이동할 수 있는 슬라이드인 메뉴입니다. 사용자는 측면에서 스와이프하거나 메뉴 아이콘을 탭하여 활성화할 수 있습니다.

탐색 창을 구현하기 위한 다음 세 가지 사용 사례를 고려해 보세요.

• 콘텐츠 구성: 사용자가 뉴스 또는 블로그 앱 등 다양한 카테고리 간에 전환할 수 있도록 지원합니다.
• 계정 관리: 사용자 계정이 있는 앱에서 계정 설정 및 프로필 섹션으로 연결되는 빠른 링크를 제공합니다.
• 기능 검색: 단일 메뉴에 여러 기능과 설정을 정리하여 복잡한 앱에서 사용자 검색 및 액세스를 용이하게 합니다.

Material Design에는 두 가지 유형의 탐색 창이 있습니다.

• 표준: 화면 내 공간을 다른 콘텐츠와 공유합니다.
• 모달: 화면 내 다른 콘텐츠 위에 표시됩니다.

예

ModalNavigationDrawer 컴포저블을 사용하여 탐색 창을 구현할 수 있습니다.

다음 예와 같이 drawerContent 슬롯을 사용하여 ModalDrawerSheet를 제공하고 창의 콘텐츠를 제공합니다.

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            HorizontalDivider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    // Screen content
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer는 다양한 추가 창 매개변수를 허용합니다. 예를 들어 다음 예와 같이 gesturesEnabled 매개변수를 사용하여 창이 드래그에 응답하는지 여부를 전환할 수 있습니다.

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            // Drawer contents
        }
    },
    gesturesEnabled = false
) {
    // Screen content
}
MaterialLayoutSnippets.kt

제어 동작

창을 열고 닫는 방식을 제어하려면 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
    }
}
MaterialLayoutSnippets.kt