탐색 메뉴

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

탐색 메뉴를 사용하면 사용자가 앱에서 대상 간에 전환할 수 있습니다. 탐색 메뉴는 다음과 같은 경우에 사용해야 합니다.

• 동일한 중요도의 대상 3~5개
• 좁은 창 크기
• 앱 화면 전반에서 일관된 대상

이 페이지에서는 관련 화면과 기본 탐색을 사용하여 앱에 탐색 메뉴를 표시하는 방법을 보여줍니다.

API 노출 영역

NavigationBar 및 NavigationBarItem 컴포저블을 사용하여 대상 전환 로직을 구현합니다. 각 NavigationBarItem는 단일 대상을 나타냅니다.

NavigationBarItem에는 다음과 같은 주요 매개변수가 포함됩니다.

• selected: 현재 항목이 시각적으로 강조 표시되는지 여부를 결정합니다.
• onClick(): 사용자가 항목을 클릭할 때 실행할 작업을 정의하는 필수 람다 함수입니다. 여기에서 일반적으로 탐색 이벤트를 처리하거나, 선택한 항목 상태를 업데이트하거나, 상응하는 콘텐츠를 로드합니다.
• label: 항목 내에 텍스트를 표시합니다. 선택사항입니다.
• icon: 항목 내에 아이콘을 표시합니다. 선택사항입니다.

예: 하단 탐색 메뉴

다음 스니펫은 사용자가 앱의 여러 화면 간에 이동할 수 있도록 항목이 있는 하단 탐색 메뉴를 구현합니다.

@Composable
fun NavigationBarExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}
Navigation.kt

핵심사항

• NavigationBar는 각 항목이 Destination에 해당하는 항목 모음을 표시합니다.
• val navController = rememberNavController()은 NavHost 내에서 탐색을 관리하는 NavHostController의 인스턴스를 만들고 저장합니다.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }는 현재 선택된 항목의 상태를 관리합니다.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }는 현재 선택된 항목의 상태를 관리합니다.
  • startDestination.ordinal는 Destination.SONGS enum 항목의 숫자 색인 (위치)을 가져옵니다.
• 항목을 클릭하면 navController.navigate(route = destination.route)이 호출되어 상응하는 화면으로 이동합니다.
• NavigationBarItem의 onClick 람다는 클릭된 항목을 시각적으로 강조 표시하도록 selectedDestination 상태를 업데이트합니다.
• AppNavHost 컴포저블을 호출하여 navController 및 startDestination를 전달하여 선택한 화면의 실제 콘텐츠를 표시합니다.

결과

다음 이미지는 이전 스니펫의 결과로 생성된 탐색 메뉴를 보여줍니다.

추가 리소스

• Material 3 - 탐색 메뉴
• Compose를 통한 탐색