안드로이드 Navigation Components로 Fragment들을 전환해 보자.

Android Jetpack의 Navigation Component는 안드로이드 앱을 제작 할 때 화면간의 이동을 조금 더 쉽게 구현 할 수 있도록 도와줍니다. Navigation Component는 세 가지 주요 부분으로 구성 됩니다.

 

• Navigation Graph : 모든 Navigation 관련 정보가 모여있는 XML 리소스 입니다. 여기에는 대상이라고 불리는 앱 내의 모든 개별적 콘텐츠 영역과 앱에서 갈 수 있는 모든 이용가능한 path가 포함됩니다.
• NavHost : 탐색 그래프에서 대상을 표시하는 빈 컨테이너 입니다. 대상 구성요소에서는 프래그먼트 대상을 표시하는 기본 NavHost 구현인 NavHostFragment가 포함됩니다.
• NavController : NavHost에서 앱 탐색을 관리하는 객체입니다. NavController는 사용자가 앱 내에서 이동할 때 NavHost에서 대상 콘텐츠의 전환을 오케스트레이션 합니다.

앱을 탐색하는 동안 Navigation Graph에서 특정 경로를 따라 이동할지, 특정 대상으로 직접 이동할지 NavController에게 전달 합니다. 그러면 NavController가 NavHost에 적절한 대상을 표시합니다.

 

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

탐색  |  Android Developers

 

이번 포스팅에서는 구글에서 제공 하는 Android Kotilin Fundametals 03.2 Define Navigation Path를 공부하면서 Navigation Component에 대해 알아보도록 하겠습니다. 

 

https://codelabs.developers.google.com/android-kotlin-fundamentals/

Android Kotlin Fundamentals Course

 

해당 코드랩은 아래의 소스를 다운 받으셔서 시작하시면 됩니다.

https://github.com/google-developer-training/android-kotlin-fundamentals-apps/tree/master/AndroidTriviaFragment

google-developer-training/android-kotlin-fundamentals-apps

 

Step1. Add Navigation Dependencies

---

Navigation 라이브러리를 사용하려면 Navagtion Dependencies를 Gradle 파일에 추가해야 합니다. Project단위의 build.gradle 파일을 엽니다. ext {...} 안에 navigationVersion = '1.0.0-rc02'를 추가해 줍니다. 코드랩을 다 마친 제 gradle파일은 아래와 같이 되어 있네요.

 

 ext {
        kotlin_version = '1.3.11'
        archLifecycleVersion = '1.1.1'
        gradleVersion = '3.4.2'
        supportlibVersion = '1.0.0-rc03'
        navigationVersion = '1.0.0-rc02'
        dataBindingCompilerVersion = gradleVersion // Always need to be the same.
    }

 

다음으로는 module 레벨의 build.gradle 파일을 엽니다. 그런 뒤, navigation-fragment-ktx와 navigation-ui-ktx에 관한 dependencies를 추가 해 줍니다.

 

dependencies {
  ...
  implementation"android.arch.navigation:navigation-fragment-ktx:$navigationVersion"
  implementation "android.arch.navigation:navigation-ui-ktx:$navigationVersion"
  ...
}

 

Stop2: Add a navigation graph to the project

---

이번 스텝에서는 navigation 관련 안드로이드 리소스 파일을 만들 것 입니다. 왼쪽 안드로이드 Pane의 res폴더에서 오른쪽 버튼을 누른 뒤  new > Android Resource File를 선택합니다. 

 

아래와 같이 File name "navigation", Resource type "Navigation" 을 선택해 줍니다. 그리고 OK를 눌러줍니다.

 

그러면 res폴더 안에 navigation 폴더가 생성되었을 것이고, 그 안에 navigation.xml이 생성되었을 것입니다. 이제 navigation파일을 열고 Design탭을 눌러 Navigation Editor로 들어가 봅시다!

 

Task4 : Create the NavHostFragment

---

사용자가 앱 안에서 Navigation할 때 화면은 제작자가 설계한 대로 변경되어야 합니다. Navigation Graph에서 해당 화면에 대한 경로를 설정한다고 하면, 실제로 화면을 담는 것은 "NavHostFragment"에서 담당합니다. 이번 Task에서는 NavHostFragment를 만들어 보겠습니다.

 

위에서 받은 AndroidTriviaFragment 소스에서 TitleFragment를 NavHostFragment로 변경합니다. 그 다음 아래와 같은 단계로 NavHostFragment를 추가해봅시다.

 

1. res > layout > activity_main.xml를 엽니다.
2. activity_main.xml파일 안에 존재하는 fragment의 android:name을 androidx.navigation.fragment.NavHostFragment로 변경합니다.
3. android:id를 myNavHostFragment로 변경합니다.
4. navigation host fragment는 사용하는 navigation graph에 대해 알 필요가 있습니다. app:navGraph에 위에서 생성한 navigation.xml을 연결해줍니다.
5. app:defaultNavHost의 속성을 true로 설정해 줍니다. 그러면 해당 navigation host가 default host가 됩니다. 안드로이드 시스템의 back buttion을 intercept할 수 있게 됩니다.

위의 단계를 다 마치시면 activity_main의 fragment는 아래와 같이 설정되어 있을 것 입니다.

 

<!-- The NavHostFragment within the activity_main layout -->
            <fragment
                android:id="@+id/myNavHostFragment"
                android:name="androidx.navigation.fragment.NavHostFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:navGraph="@navigation/navigation"
                app:defaultNavHost="true" />

 

Task5: Add Fragments to the navigation graph

---

이번 태스크에서는 navigation graph에 fragment들을 추가해 보겠습니다. 우선 navigation.xml파일을 엽니다. 그리고 New Destination 버튼을 클릭 합니다.  여기서 fragment_title을 선택하고, GameFragment도 선택합니다.

 

만약 "Preview Unavailable" 메시지가 뜰 경우 navigation.xml의 text tap으로 들어가 아래와 같이 tools:layout을 추가해 줍니다.

 

<!-- The game fragment within the navigation XML, complete with tools:layout. -->
<fragment
   android:id="@+id/gameFragment"
   android:name="com.example.android.navigation.GameFragment"
   android:label="GameFragment"
   tools:layout="@layout/fragment_game" />

 

titleFragment에서 gameFragment로 드래그하여 두 프래그먼트 사이에 action을 만들어 줍니다. action의 ID가 action_titleFragment_to_gameFragment로 설정 되었는지 확인합니다.

 

 

그러면 둘 사이에 연결된 action을 이용해서 titleFragment의 play 버튼이 눌렸을 때, gameFragment로 이동되게 해봅시다. TitleFragment.kt파일을 열어주세요. onCreateView()안에 아래 코드를 넣어주세요. 

 

//The complete onClickListener with Navigation
binding.playButton.setOnClickListener { view : View ->
       view.findNavController().navigate(R.id.action_titleFragment_to_gameFragment)
}

 

play button에 onClickListener를 달았습니다. view (play button)으로 부터 NavController를 얻어온 뒤 navigate함수를 호출 하네요. 이때 위에서 생성한 action의 ID를 인자값으로 줍니다. 

 

여기 까지 하셨다면, 앱을 한번 실행해서 확인 해보세요. Navigation Graph에서 설정한 action대로 fragment가 전환 된 것을 확인 할 수 있습니다.

 

예전에는 코드만으로 fragment전환을 했어야 했었는데, 이렇게 눈으로 확인 하면서 구현 할 수 있으니 훨씬 편해진것 같습니다.