Compose Navigation 간단 정리

Compose Navigation 을 사용하여 화면 이동을 간단히 구현해보자

1. dependency 추가

androidx.navigation:navigation-compose

2. NavController 선언

NavGraph composable 내부에 navController를 선언한다.

// NavGraph.kt
@Composable
fun NavGraph(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
}

 

NavController는 화면 간 이동을 처리한다.

3. 각 화면 생성

화면을 별로 route 및 UI를 만든다.

// HomeScreen.kt
@Serializable 
object HomeRoute

@Composable
fun HomeScreen(){ ... }

// DetailScreen.kt
@Serializable 
data object DetailRoute

@Composable
fun DetailScreen(){ ... }

각 화면에 접근하기 위한 serializable 객체를 route로 선언한다.

4. NavHost

NavHost를 선언하고 composable로 만든 route들을 추가한다.

// NavGraph.kt
@Composable
fun NavGraph() {
    NavHost(
        navController = navController,
        startDestination = HomeRoute
    ) {
        composable<HomeRoute> {
            HomeScreen()
        }
        composable<DetailRoute> {
            DetailScreen()
        }
    }
}

5. 화면 이동 추가하기 (navigate)

// NavGraph.kt
@Composable
fun NavGraph() {
    NavHost(
        navController = navController,
        startDestination = HomeRoute
    ) {
        composable<HomeRoute> {
            HomeScreen(
                onNavigateToDetail = { navController.navigate(DetailRoute) }
            )
        }
        composable<DetailRoute> {
            DetailScreen()
        }
    }
}

 

navController 의 navigate 함수를 통해 이동한다.

navController는 컴포저블로 직접 전달하지 않고 위와 같이 이벤트 형태로 전달해야 한다.

5-2. 화면 이동 시 변수를 전달하는 경우

route 객체에 필요한 변수를 추가한다.

// DetailScreen.kt

@Serializable 
data class DetailRoute(val id: Int)

 

navigate 함수에 변수를 전달한다.

navController.navigate(DetailRoute(id)}

---

 

간단한 화면 이동 구현은 위의 과정으로 끝난다.

이후에 화면 전환 애니메이션, 딥링크 등은 따로 정리보자

 

참고

https://developer.android.com/guide/navigation/use-graph/navigate?hl=ko

https://developer.android.com/guide/navigation/design?hl=ko#compose

https://github.com/android/nowinandroid

탐색 그래프 설계  |  Android Developers

 

 

대상으로 이동  |  Android Developers