탐색 레일

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

Rails는 대형 화면이 있는 기기에서 실행되는 앱의 대상에 대한 액세스를 제공합니다. 탐색 레일은 다음과 같은 경우에 사용해야 합니다.

• 앱의 모든 위치에서 액세스해야 하는 최상위 대상
• 3~7개의 주요 대상
• 태블릿 또는 데스크톱 레이아웃

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

API 노출 영역

NavigationRailItem와 함께 NavigationRail 컴포저블을 사용하여 애플리케이션에 레일을 구현합니다. NavigationRailItem는 레일 열의 단일 레일 항목을 나타냅니다.

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

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

예: 레일 기반 탐색

다음 스니펫은 사용자가 앱의 여러 화면 간에 이동할 수 있도록 탐색 레일을 구현합니다.

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

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

핵심사항

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

결과

다음 이미지는 이전 스니펫의 결과를 보여줍니다.

추가 리소스

• Material 3 - 탐색 레일
• Compose를 통한 탐색