Android Navigation Graph Component

Navigation Basic Sample in Kotlin

Jetpack Navigation Component in Android

• Navigation Architecture Component는 앱의 네비게이션 플로우를 가시화 하면서 네비게이션을 구현하는 것을 간단하게 한다.
• Navigation Library를 사용하면 아래와 같은 장점이 있다.

1. 프래그먼트 트랜잭션을 자동으로 핸들링해준다.
2. 기본적으로 앞 뒤 이동 액션을 정확하게 핸들링해준다.
3. 기본적으로 애니메이션과 전환 동작을 제공한다.
4. 딥 링크는 최고 우선순위 작업으로 간주된다.
5. 네비게이션 UI 패턴들(navigation drawers, bottom navigation)을 간편하게 구현할 수 있다.

개요

Navigation Component 3가지 구성요소

1. Navigation Graph(New XML resource)
   • Navigation Graph 리소스는 네비게이션 관련 데이터를 한 곳에서 관리한다.
   • destination이라고 하는 앱의 모든 위치와 사용자가 앱을 통해 이동할 수 있는 경로를 포함한다.
2. NavHostFragment(LayoutXML view)
   • NavHostFragment는 유니크한 위젯이다. 이 위젯은 layout에 포함할 수 있다.
   • 이것은 Navigation Graph에서 다양한 destination들을 보여준다.
3. NavController(Kotlin/Java object)
   • NavController는 Navigation Graph에서 사용자의 위치를 추적할 수 있는 개체이다.
   • Navigation Graph를 통해 이동하면 NavHostFragment에서 destination 콘텐츠의 스왑이 조정된다.

Navigation Graph

Navigation Graph(New XML resource)

• Navigation Graph 리소스는 네비게이션 관련 데이터를 한 곳에서 관리한다.
• destination이라고 하는 앱의 모든 위치와 사용자가 앱을 통해 이동할 수 있는 경로를 포함한다.

Example: navigation/nav_graph.xml

<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_graph"
    app:startDestination="@id/mainFragment">

    <fragment
        android:id="@+id/mainFragment"
        android:name="com.example.navigationbasicsample.MainFragment"
        android:label="MainFragment"
        tools:layout="@layout/fragment_main">

        <action
            android:id="@+id/action_mainFragment_to_redFragment"
            app:destination="@id/redFragment"
            app:enterAnim="@android:anim/fade_in" />
        <action
            android:id="@+id/action_mainFragment_to_greenFragment"
            app:destination="@id/greenFragment"
            app:enterAnim="@android:anim/fade_in" />
    </fragment>

    <fragment
        android:id="@+id/redFragment"
        android:name="com.example.navigationbasicsample.RedFragment"
        android:label="RedFragment"
        tools:layout="@layout/fragment_red">
        <action
            android:id="@+id/action_redFragment_to_greenFragment"
            app:destination="@id/greenFragment"
            app:enterAnim="@android:anim/fade_in" />
    </fragment>

    <fragment
        android:id="@+id/greenFragment"
        android:name="com.example.navigationbasicsample.GreenFragment"
        android:label="GreenFragment"
        tools:layout="@layout/fragment_green">
        <action
            android:id="@+id/action_greenFragment_to_redFragment"
            app:destination="@id/redFragment"
            app:enterAnim="@android:anim/fade_in" />
    </fragment>

</navigation>

• <navigation>: 탐색 그래프의 루트 속성이다. 여기서 <fragment>를 등록하고 <action>을 추가하여 navigation을 통한 프래그먼트들과 이동을 정의할 수 있다.
  • app:startDestination: 처음에 보여질 Fragment를 명시한다.
• <fragment>: Navigation Graph에서 컨트롤할 Fragment를 등록한다.
  • name: 해당 Fragment를 명시하는데, 패키지 주소 + 파일명 형태로 작성된다.
  • label: destination으로 사용할 때 읽기 편한 이름을 지정한다.
  • layout: 해당 Fragment가 사용하는 layout 파일을 지정하면, graph에 UI가 적용된 Fragment를 확인할 수 있다.
  • <action>: Fragment간의 전환을 정의한다.
    • id: action을 사용하기 위해 id를 정의한다.
    • destination: Navigation Graph에 있는 Fragment들 중 이동 위치에 해당하는 id값을 입력한다.
    • enterAnim: Fragment 전환 시 애니메이션을 정의한다.
• nav_graph.xml: NavHostFragment의 속성 값 중 app:navGraph="@navigation/nav_graph"형식으로 등록되어 사용된다.
  • 사용 예제: activity_main.xml 일부

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

 

질문과 잘못된 점에 대해 말씀해주시는 건 언제나 환영입니다.
zero5.two4@gmail.com