[JetPack] Navigation

 

https://developer.android.com/guide/navigation

탐색  |  Android 개발자  |  Android Developers

 

Navigation이란?

화면전환을 위한 Android Jetpack 라이브러리입니다

프래그먼트에서 화면 전환은 번거로웠고 코드도 길어졌습니다 

이 라이브러리 사용으로 정말 간단하게 구현할 수 있습니다

데이터 전달도 가능합니다

 

 

구성요소

NavigationGraph

화면 간 이동 관계를 나타내는 XML 리소스

 

NavHost

NavigationGraph로 부터 모든 목적지를 표시하는 빈 컨테이너

 

NavController

NavHost 내에서 사용자의 액션에 의해 목적지를 변경하는 것을 관리한다.

 

 

사용해보기

프래그먼트 두개를 만들어줍니다

 

MainFragment, SecondFragment

버튼이랑 텍스트뷰만 넣어보겠습니다

버튼을 클릭했을때 화면을 넘어가게 해볼게요

 

그리고 리소스 파일을 하나 만들어줍니다

타입을 Navigation으로 선택해주시고

이름은 nav_graph로 할게요

 

nav_graph

그럼 만들어진 NavigationGraph 파일을 보면

저는 지금 프래그먼트를 추가해놔서 저렇게 나오지만 처음에는 빈화면입니다

저기 왼쪽 상단에 보시면 휴대폰 모양의 플러스 버튼이 있습니다

거기를 보시면 아까 만들었던 Main Fragment와 Second Fragment가 있는데 클릭해서 추가해 주시면 됩니다

 

그리고 화면을 클릭하시면 위와 같이 동그라미가 보입니다

클릭해서 옆 화면으로 드래그 앤 드랍을 해주시면 화살표가 생겨요

 

이제 MainActivity 레이아웃에서 NavHost를 추가해 줄 겁니다

왼쪽 상단의 검색창에 navHost를 검색해서 추가해 주세요

그러면 스크린샷처럼 좀 전에 추가 했던 NavigationGraph가 나옵니다

선택 해서 ok 누르면 MainFragment가 MainActivity에 포함됩니다

 

https://developer.android.com/guide/navigation/navigation-ui

NavigationUI로 UI 구성요소 업데이트  |  Android 개발자  |  Android Developers

 

이제 액션바와 연동을 해볼겁니다

안드로이드 디벨로퍼 사이트에 있는 저 코드를 MainActivity에 추가 해 줍니다

다시 nav_graph로 와서 오른쪽을 보면 label이라고 있는데 저 부분이 액션바의 이름이 될 부분입니다

위에 코드를 추가하면 액션바의 백버튼 기능도 작동을합니다.

 

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        button.setOnClickListener {
            findNavController().navigate(R.id.action_mainFragment_to_secondFragment)
        }
    }

MainFragment에는 onViewCreated에 버튼을 누르면 화면을 전환하는 코드를 작성 해 줍니다

 

그리고 이제 데이터 전달을 할텐데 Safe Args를 사용할겁니다

 

https://developer.android.com/guide/navigation/navigation-pass-data

대상 간 데이터 전달  |  Android 개발자  |  Android Developers

Safe Args는 안드로이드 내비게이션 간 안정적인 매개변수 사용을 위해 쓰이는 라이브러리로

Bundle 인스턴스를 통해 파라미터를 전달했던 과정을 쉽게 처리할 수 있게 해 줍니다

 

위에 링크에서 Gradle 추가 해 줍니다

 

 

다시 nav_graph로 와서 데이터를 받을 화면을 클릭하고 오른쪽 보면 Arguments가 있습니다

플러스 버튼 누르면 이렇게 Add Arguments창이 나옵니다

여기서 변수 이름과 타입을 선택할 수 있습니다

 

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        button.setOnClickListener {

            val action = MainFragmentDirections.actionMainFragmentToSecondFragment("Hello!!!")
            findNavController().navigate(action)
        }
    }

MainFragment입니다 action을 만들어줬어요

Hello라는 text를 담아서 보낼겁니다 아까는 navigate()안에 SecondFragment의 id가 있었지만

지금은 action 변수가 있습니다

 

이제 SecondFragment에 추가 할 코드입니다

args라는 것을 만들어주고

onViewCreated 안에는 textView에 args.text로 추가해주시면 

 

이렇게 Hello가 잘 나오는 것을 확인할 수 있습니다!