Android 배워보자 Compose! -(3)

이전 글

Android 배워보자 Compose! (2)

 

오늘은 Android 에서 화면 전환을 도와주는 Navigation 을 Compose 를 이용한 개발 환경에 적용해보도록 하겠습니다.

 

본 내용에 앞서 Navigation 의 3요소와 대략적인 개념을 미리 정리하면 아래와 같습니다.

1. NavController : 화면 간 이동을 제어
2. NavGraph : 이동할 대상을 매핑
3. NavHost : NavGraph 에서 매핑 된 대상을 표기하는 Container 

이 요소들을 Composable 로 구현해내면 될 것 같군요.

 

Navigation-Compose

우선 Module 레벨의 Gradle 에 Navigation-Compose 의존성을 추가해줍시다.

implementation("androidx.navigation:navigation-compose:2.7.6")

 

Destinations

Navigation 을 관리할 Navigation.kt 를 생성한 후 사용할 화면(Destination)과 각 화면에 대한 id 값을 적절히 할당해줍니다.

object Destinations{
    const val ROUTE_FIRST_SCREEN = "page_1"
    const val ROUTE_SECOND_SCREEN = "page_2"
}

NavController

Compose 환경에서는 NavHostController 를 아래와 같이 rememberNavController() 를 통해 가져올 수 있습니다

navController: NavHostController = rememberNavController()

 

NavHost & Screens

이제 NavHost 와 각 Screen 을 구현해봅시다

 

Screen

좌측 하단과 우측 하단에 버튼을 놓고 중앙에 페이지 번호를 확인할 수 있는 간단한 화면을 구성하였습니다.

Parameter 로 화면에 띄울 String 과 Button Click Event 를 받아오는 식으로 구현해서 이 Composable 을 재활용할겁니다.

@Composable
fun NavigationScreen(
    pageTitle:String,
    left: String,
    onClickLeft: ()->Unit,
    right: String,
    onClickRight: ()->Unit,
    ){
    Box(modifier = Modifier.fillMaxSize()){
        Text(text = "$pageTitle 입니다",
            modifier = Modifier.align(Alignment.Center))
        Button(onClick = {onClickLeft()},
            modifier = Modifier
                .align(Alignment.BottomStart)
                .padding(12.dp)) {
            Text(text = "$left 으로 가기")
        }
        Button(onClick = {onClickRight()},
            modifier = Modifier
                .align(Alignment.BottomEnd)
                .padding(12.dp)) {
            Text(text = "$right 으로 가기")
        }
    }
}

 

NavHost & NavGraph

위에 구성해둔 Screen 을 사용하여 NavGraph 에 화면을 아래와 같이 지정해줍니다.

@Composable
fun PageNavHost(navController: NavHostController = rememberNavController()){
    NavHost(
        navController = navController,
        startDestination = FIRST_SCREEN_ROUTE
    ){
        composable(FIRST_SCREEN_ROUTE) {
            NavigationScreen(pageTitle = "1번 화면",
                left = "3번 화면",
                onClickLeft = { navController.navigate(THIRD_SCREEN_ROUTE) },
                right = "2번 화면",
                onClickRight = { navController.navigate(SECOND_SCREEN_ROUTE) })
        }
        composable(SECOND_SCREEN_ROUTE) {
            NavigationScreen(pageTitle = "2번 화면",
                left = "1번 화면",
                onClickLeft = { navController.navigate(FIRST_SCREEN_ROUTE) },
                right = "3번 화면",
                onClickRight = { navController.navigate(THIRD_SCREEN_ROUTE) })
        }
        composable(THIRD_SCREEN_ROUTE) {
            NavigationScreen(pageTitle = "3번 화면",
                left = "2번 화면",
                onClickLeft = { navController.navigate(SECOND_SCREEN_ROUTE) },
                right = "1번 화면",
                onClickRight = { navController.navigate(FIRST_SCREEN_ROUTE) })
        }
    }
}

 

 

이제 동작을 한번 확인해볼까요?

 

조잡하긴 해도 원하던 동작이 잘 이루어지는군요

 

원하던 동작대로 잘 작동하네요 ㅎ_ㅎ