상단 앱 바에서 이동

이 가이드에서는 상단 앱에서 탐색 아이콘을 만드는 방법을 보여줍니다. 바는 탐색 작업을 실행합니다.

예

다음 스니펫은 인기 앱을 구현하는 방법에 관한 간단한 예입니다. 탐색 메뉴 아이콘을 표시합니다. 이 경우 아이콘을 클릭하면 앱 내 이전 목적지인

@Composable
fun TopBarNavigationExample(
    navigateBack: () -> Unit,
) {
    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = {
                    Text(
                        "Navigation example",
                    )
                },
                navigationIcon = {
                    IconButton(onClick = navigateBack) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
            )
        },
    ) { innerPadding ->
        Text(
            "Click the back button to pop from the back stack.",
            modifier = Modifier.padding(innerPadding),
        )
    }
}
AppBar.kt

코드에 대한 핵심 사항

이 예에서는 다음 사항에 유의하세요.

  • 컴포저블 TopBarNavigationExample는 navigateBack 매개변수를 정의합니다. () -> Unit 유형입니다.
  • navigationIcon 매개변수에 navigateBack를 전달합니다. CenterAlignedTopAppBar입니다.

따라서 사용자가 상단 앱에서 탐색 아이콘을 다시 클릭할 때마다 navigateBack()를 호출합니다.

함수 전달

이 예에서는 아이콘에 뒤로 화살표를 사용합니다. 따라서 navigateBack()는 사용자를 이전 대상으로 안내해야 합니다.

이렇게 하려면 TopBarNavigationExample에 호출을 전달합니다. NavController.popBackStack() 이 작업은 배포된 리소스에 대한 탐색 그래프의 텍스트도 볼 수 있습니다. 예를 들면 다음과 같습니다.

NavHost(navController, startDestination = "home") {
    composable("topBarNavigationExample") {
        TopBarNavigationExample{ navController.popBackStack() }
    }
    // Other destinations...

추가 리소스

앱에서 탐색을 구현하는 방법에 관한 자세한 내용은 다음을 참고하세요. 다음 가이드 시리즈를 참조하세요.