[TIL-230606] 화면 이동을 위한 NavigationController 구현

안녕하세요

이전에 지도위에 검색창을 출력하는 포스팅에 이어,

검색창 클릭 시 검색할 수 있는 화면으로 이동하는 코드를 구현해보겠습니다.

 

---

 

화면 이동을 위한 Navigation Controller 구현

이전 포스팅에서 Google Map 위에 검색창을 클릭하면 검색 화면으로 이동하기 위해

화면 이동을 위한 Navigation Controller 구현이 필요합니다.

우선 app모듈의 build.gradle 파일에 아래와 같이 선언합니다.

dependencies {

    implementation "androidx.navigation:navigation-compose:2.5.3"

}

위의 선언으로 navigation 관련 라이브러리를 설치한 다음, 

const val Main = "MainScreen"
const val Search = "SearchScreen"

@Composable
fun Navigation(){
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = Main){
        composable(Main){
            MainScreen(navController = navController)
        }
        composable(Search){
            SearchScreen(navController = navController)
        }
    }
}

 

코드 설명

- navController

• 각 화면의 상태 및 백스택을 추적하기 위한 NavController을 선언합니다.
• rememberNavController() 이용합니다.

- NavHost

• 각각의 navController는 NavHost와 연결되어야 합니다. NavHost를 통해 최초 목적지를 정해줍니

- composable

• NavHost 내부에서 선언하여 routing 이후 화면에 출력할 작업을 정의하는 Scope입니다.

 

예제 앱 구현 상세

이전 포스팅에서는 메인 화면 및 메인 화면 상단에 검색창을 구현했다면,

이번 포스팅에서는

• 검색창 클릭시 임시 검색화면으로 진입
• 임시 검색화면에서 취소키 클릭 시 다시 메인화면으로 이동

을 구현해보았습니다.

 

메인화면 > 검색화면으로 이동

Row(
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier
    	.fillMaxSize()
        .padding(5.dp)
        .clickable(
       		interactionSource = interactionSource,
            indication = null
         ) {
         	navController.navigate(Search)
         }
)

위의 코드 중 검색바인 Row요소에 .clickable을 구현하여 클릭시 검색화면으로 이동합니다.

이동을 위해서는 이전 Navigation코드 .composable() 에서 전달받은 parameter인 navController를 사용하여
navController.navigate(Search)를 호출해줍니다.

이후 Navigation 함수 내 .composable() 로 이동하게되고, 구현해놓은 SearchScreen을 호출하여 검색화면을 구성합니다.

 

검색화면 > 메인화면으로 이동

Scaffold(
        modifier = Modifier.fillMaxSize(),
        topBar = { SearchTextField(navController) }) {
        Box(modifier = Modifier.padding(10.dp)) {
            Text(text = "SearchScreen")
        }
    }

 

이동한 검색화면에 Scaffold를 사용하여 검색창을 topBar로 구현하였습니다.

Material 구성요소 및 레이아웃  |  Jetpack Compose  |  Android Developers

 

추가로 검색창 옆 IconButton 및 취소키 클릭시 다시 메인화면으로 이동합니다.

IconButton(
	onClick = { navController.popBackStack() }) {
    	Icon(Icons.Default.ArrowBack, "", Modifier.padding(10.dp))
}

취소키는 자동으로 Main화면으로 이동하지만, IconButton 클릭시에는 navController의 메소드를 사용합니다.
navController.navigate를 사용할 수 있겠지만,

navigate는 현재 화면에서 최상단에 다음 화면을 출력하고, 이전 화면은 pop하지 않기에

취소키와 유사한 액션을 수행하는 popBackStack()을 호출합니다.

NavController  |  Android Developers

 

결과

위의 코드 및 기타 추가한 코드로 아래의 예제를 구현하였습니다.

메인 > 검색창 > 아이콘 클릭하여 메인 이동

 

Navigation으로 간단한 화면이동을 구현해보았습니다.

잘못된 내용이 있다면 댓글 부탁드리고, 내용이 좋았다면 공감, 구독 부탁드려요!