Jetpack Compose Navigation
ComposeUI를 공부하면서 어떻게 화면을 이동해야 하는지에 대한 의문이 생겼다..
기존 안드로이드는 Activity 경우는 "startActivity"를 사용해서 화면을 이동을 했고, "Fragment"는 "NavController"을 이용해서 화면이동을 한다고 들었습니다....(제가 마지막으로 안드로이드 한게 안드로이드 이클레어 였어요.. ㅎㅎㅎ)
ComposeUI는 어떻게 화면 이동을 하는지 같이 알아 봅시다.
뭐 "remember, Row, Column..."등등 알아야 할 건 많은데 화면 이동이 궁금하니 먼저 알아 보기로 합시다.
우선 화면 이동을 위한 Navigation을 사용 하려면 빌드 그래들에 디펜던시를 설정해 줘야 합니다.
설정을 끝내고 나면 "NavController"를 얻어 와야 합니다.
그리고 이동을 위한 화면을 아래와 같이 만들어 보겠습니다.
이렇게 만든 화면들이 이동하기 위해서 "NavHost"로 묶어 줍니다.
이렇게 화면들을 묶어주고 각각 route 이름을 설정해줍니다. 나중에 이걸 사용해서 화면을 이동하게 됩니다.
"NavHost"의 파라미터인 "startDestination"을 "first" 로 설정을 하면 시작시 초기 화면은 "FirstView()" 가 된다는게 짐작이 가시죠?
이렇게 화면 이동을 위한 준비는 끝났습니다.
이제 각 화면에 버튼을 추가해서 화면 이동을 할 수 있도록 해보겠습니다.
짜잔~~~!!!
뷰를 3개 만들었습니다. 화면은 거의 동일한데요. 세번째 화면은 파라미터를 받아서 보여주는 부분이 다르긴 합니다.
파라미터도 한번 넘겨보면 잼있자나요..
이렇게 한다고 해서 화면이동이 되는건 아니구요..
각화면에 "NavController"를 전달하고, 이걸 이용해서 화면이동을 합니다.
"NavController"에 "navigate()"라는 함수를 이용하는데 이것에 아까 "NavHost"에서 설정한 "route" 이름을 명시해 줍니다.
그리고 화면 이동했을때 뒤로가기 위한 버튼도 추가 되었습니다.
아래와 같이요~
보시는 것과 같이 각 버튼 액션에 화면이동을 위해 "navigate()"를 설정해 두었습니다.
자세히 보시면 두번째 화면과 세번째 화면의 뒤로가기 버튼의 액션에 "navController.popBackStack()"과 "navController.navigationUp()"로 다르게 설정을 했는데요 동작은 동일 하다고 합니다.
조금더 자세히 공부해서 차이점을 알게되면 다시 말씀드리겠습니다.
여기 까지 해서 실행을 해보시면 화면 이동이 잘되는것을 보실 수 있습니다.
이제 마지막으로 세번째 화면에 파라미터를 전달하는 방식을 알아 보겠습니다.
지금 까지는 파라미터를 고정해서 보여주고 있었습니다.
원하는 파라미터를 전달하기 위해서는 텍스트필드를 이용해서 동적으로 값을 전달 할 수 있지만 이번에는 하드코딩한 변수를 전달하는 것으로 마무리 하도록 하겠습니다.
먼저 "FirstView()"에서 "navigate()"를 호출할때 route 이름에 파라미터를 붙여서 전달을 합니다. 그러면 "NavHost"의 "ThirdView" 설정 부분에서 route 이름에 동일한 형식으로 파라미터를 받는다고 명시합니다.
그리고 "composable()" 의 "backStackEntry"를 이용해서 전달된 값을 전달 받아서 "ThirdView"로 값을 넘겨줍니다. (생각보다 복잡하네.. Intent 짱!!)
이렇게 되면 ThirdView()에서는 받은 값을 화면에 뿌려줍니다.
어찌어찌 되어서 저만 이해가 된지 모르겠지만.. 화면 이동은 끝이 났습니다.
소스파일을 올릴려고하는데 요량이 안맞아서 안 올라간다네요..
Github에 올려서 받으실수 있도록 최대한 빨리 진행이 보겠습니당..
고생하셨어요~