Android :: JetPack - AAC Navigation Component 사용법

💡Navigation

 

Navigation

Android JetPack 의 AAC 컴포넌트 중 네비게이션은 앱 내의 화면 이동 구현을 도와주는 컴포넌트이다.

시각적으로 view들이 어떻게 연결되어 있는지 알 수 있어 앱의 전반적인 흐름을 파악하기 쉽고, flow 수정이 용이하다.

따라서, single Activity - multiple Fragment 구조를 구현하기 쉽게 해준다.

 

Navigation을 사용하여 할 수 있는 것들

• Fragment 트랜잭션을 관리할 수 있다.
• Up, Back 버튼의 작업 등(백 스택 관리)을 간단하게 처리
• 화면 전환 시, Animation이나 Transition을 위한 표준화된 리소스를 제공
• 딥링크 구현 및 처리를 쉽게 할 수 있다.
• Navigation UI 패턴을 사용한 Navigation drawers, Bottom Navigation의 연동을 쉽게 구현 가능하게 지원
• fragment 간의 이동 시 안전하게 데이터 전달 가능
• Navigation Editor를 통해 화면 흐름을 시각적으로 관리할 수 있다.
• ViewModel - Navigation Graph에 대한 ViewModel을 확인해 그래프 대상 사이에 UI 관련 데이터를 공유할 수 있다.
• 기존 FragmentManager, Intent, Bundle 등의 사용을 대체할 수 있다.

 

Navigation의 구성요소

• Navigation Graph : 모든 Navigation 관련 정보가 하나의 중심 위치에 모여 있는 XML 리소스이다. 즉, 사용자가 앱에서 갈 수 있는 모든 플로우를 보여주고 앱 내의 Fragment를 한 눈에 확인할 수 있다. Destination 목록을 갖고 있는 부분.
• NavHost : Navigation Graph에서 대상을 표시하는 빈 컨테이너. (NavController를 갖고 있는 컨테이너) 대상 구성요소에는 프래그먼트 대상을 표시하는 기본 NavHost 구현인 NavHostFragment가 포함된다.
• NavController : NavHost에서 App Navigation을 관리하는 객체. 사용자가 앱 내에서 이동할 때 NavHost에서 대상 콘텐츠의 전환을 조종하는 역할을 한다. 즉, Navigation Graph를 다루는 부분.

 

=> Navigation Graph에서 특정 경로를 따라 이동할지, 특정 대상으로 직접 이동할지 NavController에게 전달하고, NavController가 NavHost에 적절한 대상을 표시해주는 방식

Navigation Interface Overview

 

FragmentNavigator / ActivityNavigator / NavGraphNavigator

 

 

0. dependency

dependencies {
  
  // Kotlin
  implementation("androidx.navigation:navigation-fragment-ktx:$nav_version")
  implementation("androidx.navigation:navigation-ui-ktx:$nav_version")

}

 

* Safe Args 추가 (Optional)

// 최상위 build.gradle
buildscript {
    ext {
        nav_version = '2.4.1'
    }
    repositories {
        google()
    }
    dependencies {
        classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"
    }
}

// app or module build.gradle
plugins {
    id 'androidx.navigation.safeargs.kotlin'
}

 

1. Navigation Graph

모든 네비게이션 관련된 정보를 가진 res/navigation 폴더의 XML resource 파일이다.

화면 이동에 대한 모든 정보(Action, 화면 이동 시 파라미터, 화면 단위)를 정의하는 곳이다.

각각의 스크린들은 대상(Destination / 목적지가 되는 하나의 화면)이라는 이름을 갖고 있고, 가고싶은 곳으로 연결할 수 있다.

 

[ Navigation xml 에서 사용할 수 있는 기본 태그 ]

• <navigation> : NavGraph의 기본 태그
• <fragment> or <Activity> or <Dialog> 등의 Destination
• <action> : 화면 이동에 대한 액션 정의, 그래프에서는 화살표로 표현된다.
• <argument> : 화면 이동에 대한 파라미터 정의
• <deeplink> : 딥링크에 대한 내용을 정의

 

[ 실습 ]

1) res > New > Android Resource File

2) File name 입력

3) Resource type > Navigation > OK

4) fragment 생성

5) nav_graph에서 Fragment를 드래그해서 다른 Fragment에 연결

 

 

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_library"
    app:startDestination="@id/homeViewPagerFragment">

    <fragment
        android:id="@+id/homeViewPagerFragment"
        android:name="com.example.libraryproject.HomeViewPagerFragment"
        android:label="fragment_view_pager"
        tools:layout="@layout/fragment_view_pager" >
        <action
            android:id="@+id/action_homeViewPagerFragment_to_bookDetailFragment2"
            app:destination="@id/bookDetailFragment" />
    </fragment>
    <fragment
        android:id="@+id/bookDetailFragment"
        android:name="com.example.libraryproject.BookDetailFragment"
        android:label="fragment_book_detail"
        tools:layout="@layout/fragment_book_detail" >
        <action
            android:id="@+id/action_bookDetailFragment_to_libraryFragment2"
            app:destination="@id/libraryFragment" />
    </fragment>
    <fragment
        android:id="@+id/libraryFragment"
        android:name="com.example.libraryproject.LibraryFragment"
        android:label="fragment_library"
        tools:layout="@layout/fragment_library" />
</navigation>

 

2. NavHost

Navigation Graph에 정의된 화면들을 보여주는 컨테이너의 역할을 한다.

화면이동에 대한 액션은 모두 NavHost라는 Fragment에게 위임된다.

일반 Fragment의 Name에 NavHostFragment를 정의해주고, 연결되는 navGraph도 정의해주어야한다.

 

[ 실습 ]

1) activity_main.xml 파일에 NavHostFragment 추가

2) name / defaultNavHost / navGraph 속성 추가

<androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_library"/>

여기까지 하면 이제 하나의 액티비티 + 여러 개의 프래그먼트 구조가 만들어진 것이다.

 

3. NavController

화면이동에 대한 컨트롤러 역할을 한다.

NavHost에서 얻을 수 있으며, 아래와 같은 방법을 통해 사용할 수 있다.

예를 들어 버튼을 통해 화면을 이동하는 경우, 버튼에 setOnClickListener를 사용해주는 '액션'을 수행하는 것이다.

<!--navController fragment,activity,view에서 find -->
 val navController = findNavController()
 
 <!--navController navhost id로 가져오기 -->
 val navController = findNavController(R.id.nav_container)
 
 <!--navController - navhost에서 가져오기 -->
 val host: NavHostFragment = supportFragmentManager
                .findFragmentById(R.id.my_nav_host_fragment) as NavHostFragment? ?: return
 val navController = host.navController

binding.toolbar.setNavigationOnClickListener { view ->
    view.findNavController().navigateUp()
}