[ Jetpack ] - Navigation

2018 Google I/O 행사에서 Jetpack Navigation 기능이 소개 되었고,

Android Studio 3.3 Navigation Editor 기능이 생기면서, Apple Xcode 처럼 UI를 통한 Navigation 편집이 가능해졌다.

 

Navigation은 사용자가 탐색할 수 있는 앱의 어느곳에서나 발생한다.

_ 대상은 앱의 다른 콘텐츠 영역이고,

_동작은 사용자가 사용할 수 있는 경로를 나타내는 대상 간의 논리적 연결이다.

 

---

Jetpack을 사용한 Navigation을 구현해보려한다.

 

1. 새 프로젝트 생성하여 Empty Activity를 선택한다.

 

2. 언어는 Kotlin으로 선택한다.

 

3. Gradle을 설정해야 하는데 build.gradle (Module: app)을 선택하고 dependencies에 추가해준다.

-> implementation 'android.arch.navigation:navigation-fragment:1.0.0'

-> implementation 'android.arch.navigation:navigation-ui-ktx:1.0.0'

 

4. Fragment을 생성한다.

MainActivity에 Fragment를 사용하여 화면을 구성할 것이기 때문에

3개의 Fragment를 사용하며 이 Fragment들이 순서대로 순환하며 화면이 이동할 것이다.

 

Fragment에서 paramete는 사용하지 않을 것이기때문에, 코드를 수정한다.

 

class FirstFragment : Fragment() {
     override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?,
           savedInstanceState: Bundle?
     ): View? {
        return inflater.inflate(R.layout.fragment_first, container, false)
     }
}

 

5. Fragment 에서 보여질 화면을 구성한다.

-> 참고로 아래에서 구현할 Navigation Graph 작성을 위해선 Navigation Host가 필요하기 때문에

activity_main.xml에 다음을 추가해준다.

 

-> android:id = "@+id/fragment"

-> android:name = "androidx.navigation.fragment.NavHostFragment"

-> app:defaultNavHost = "true"

-> app:navGraph="@navigation/nav_graph" />

 

6. 이제부터 Nav Graph를 작성할 것이다.

res에서 오른쪽 마우스를 누르고 navigation 폴더를 추가해준다.

생겨난 navitation 폴더에서 새로운 navigation resource file 추가해준 이름을 nav_graph로 해준다.

 

7. nav_graph을 수정해보자.

- 미리 생성한 Fragment 3개를 추가한다.

- Graph Editor를 통해 Navigation 동선을 UI로 구성할 수 있다.

 

- 나머지 두개의 fragment도 넣어준다.

<fragment

  android:id="@+id/firstFragment"

  android:name="com.example.jetpack_navigation.FirstFragment"

  android:label="fragment_first"

  tools:layout="@layout/fragment_first" >

  <action android:id="@+id/action_firstFragment_to_secondFragment"

    app:destination="@id/secondFragment" />

</fragment>

 

8. 이제 Navigation 동작하도록 간단한 OnClickListener 작성을 해보자

- 다음은 FirstFragment이다.

class FirstFragment : Fragment() {

  override fun onCreateView(

       inflater: LayoutInflater, container: ViewGroup?,

       savedInstanceState: Bundle?

       ): View? {

           val view = inflater.inflate(R.layout.fragment_first, container, false)

           view.findViewById<Button>(R.id.button1).setOnClickListener {                   

                Navigation.findNavController(view).navigate(R.id.action_firstFragment_to_secondFragment)

              }

           return view

      }

}

 

-> 나머지 두개의 fragment들도 동일하게 작성해주면, 간단하게 Navigation을 이용하여 만들어 볼 수 있다.

 

작성한 코드는 아래 Git에서 볼 수 있다.

github.com/rhkdhl23/Jetpack_Navigation

rhkdhl23/Jetpack_Navigation