컴포즈 내비게이션

Jetpack Navigation을 통해서 안드로이드 앱에서의 화면 이동을 쉽게 구현할 수 있다. Jetpack Navigation은 스택구조의 내비게이션 스택을 사용하여 사용자의 경로를 추적한다.

사용자가 현재 위치한 화면들은 내비게이션 스택에 쌓였다가 사용자가 뒤로가는 동작을 실행하면 위에서부터 하나씩 빼는 방식이다.

 

프로젝트에 내비게이션을 추가하려면 먼저 NavHostController 인스턴스를 만들어야 한다.

얘가 내비게이션 스택을 관리하고 현재 위치를 추적한다.

val navController = rememberNavController()

 

이렇게 만든 내비게이션 컨트롤러는 NavHost 인스턴스에 할당해야 한다.

NavHost는 사용자가 이동할 화면의 플레이스홀더 역할을 한다.

NavHost(
	navController = navController,
	startDestination = <시작 경로>
) {
		// 내비게이션 그래프 목적지
}

// ex)
NavHost(
    navController = navController,
    startDestination = "home",
) {
    composable("home") {
        Home()
    }
    composable("customers") {
        Customers()
    }
}

 

화면 이동은 navigation() 함수를 사용해서 구현한다.

navController.navigate(목적지 컴포저블)

 

navigation() 함수는 후행 람다를 받을 수 있다. 여기에는 popUpTo() 함수가 있다. 이는 사용자가 뒤로가기 버튼을 클릭했을 경우 내비게이션 스택에서 맨 위(현재 화면)을 빼고 이전 화면으로 돌아가게 한다.

navController.navigate(목적지 컴포저블) {
	popUpTo(특정 컴포저블)
}

 

launchSingleTop 옵션을 사용하면 동일한 목적지의 인스턴스를 내비게이션 스택 최상단에 중복적으로 추가하는 것을 막을 수 있다.

navController.navigate(목적지 컴포저블) {
	launchSingleTop = true
}

 

예시(3개의 화면을 갖는 프로젝트 만들기)

1. 내비게이션 경로 선언

sealed class NavRoutes(val route: String) {
    object Home : NavRoutes("home")
    object Welcome : NavRoutes("welcome")
    object Profile : NavRoutes("profile")
}

2. 화면 추가

ex)

@Composable
fun Home(navController: NavController) {
    Box(
        modifier = Modifier.fillMaxSize(),
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier.align(Alignment.Center)
        ) {
            Text(
                text = "Home",
            )
            Button(onClick = {}) {
                Text(text = "Welcome")
            }
        }
    }
}

위와 같은 화면을 3개 만들어준다. 아직 화면 이동 동작은 선언하지 않고 UI만 만들어놓은 상황

3. NavController와 NavHost 만들기

MainActivity에 NavController와 NavHost를 추가한다.

@Composable
fun MainScreen() {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = NavRoutes.Home.route
    ) {
        composable(NavRoutes.Home.route) {
            Home()
        }
        composable(NavRoutes.Welcome.route) {
            Welcome()
        }
        composable(NavRoutes.Profile.route) {
            Profile()
        }
    }
}

4. 화면 내비게이션 구현

앞에서 구현했던 화면들의 버튼에 화면 이동 동작을 정의한다.

Home Composable 함수의 Button의 onClick 파라미터를 다음과 같이 선언한다.

navController.navigate(NavRoutes.Welcome.route)

 

 

결과