30. Navigation Component

안드로이드 개발에서 화면 간 이동을 구현하는데 도움을 주는 라이브러리인 Navigation Component 에 대해 알아보자.

 

 

* 자세한 사용 방법은 공식문서에 잘 설명되어 있다. 이 게시물에서는 3가지의 구성 요소를 중심으로 설명한다.

탐색  |  Android 개발자  |  Android Developers

 

 

Navigation component 는 3가지 주요 요소로 이루어져 있다.

 

 

Navigation graph

 

모든 Navigation  관련 정보를 포함하고 있는 리소스 파일이다. 리소스 파일의 하위 요소로는 destination 과 action 이 있는데, 이는 각각 activity / fragment 등의 화면과 이동하는 루트를 의미한다. 

 

<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/nav_home">
    
    <fragment
        android:id="@+id/nav_home"
        android:name="package.name.HomeFragment"
        android:label="fragment_home"
        tools:layout="@layout/fragment_home" >
        <action
            android:id="@+id/action_home_to_setting"
            app:destination="@id/nav_setting" />
    </fragment>

    <fragment
        android:id="@+id/nav_setting"
        android:name="package.name.SettingFragment"
        android:label="fragment_setting"
        tools:layout="@layout/fragment_setting" >
        <action
            android:id="@+id/action_setting_to_home"
            app:destination="@id/nav_home" />
    </fragment>

</navigation>

 

위의 코드는 graph xml 파일의 예시이다. 다음과 같이 설정하면 home fragment 와 setting fragment 간의 이동을 구현하기 위한 기본 설정이 완료되었다고 생각하면 된다. 

 

action 요소 하위에 backstack 과 관련한 pop 옵션 역시 추가할 수 있다. 

 

app:popUpTo="@id/nav_home"
app:popUpToInclusive="true"

 

• popUpTo : backstack 에서 어디까지 pop 할 것인지 결정 → 설정한 destination 이 나올 때까지 backstack 을 pop.
• popUpToInclusive : 위에서 지정한 fragment 까지 pop 할지 여부를 boolean 으로 설정.

 

 

 

 

NavHost

 

fragment 를 나타낼 activity 의 xml 파일에 추가할 수 있따. 즉 graph 로부터 destination 을 보여주는 빈 컨테이너로, 아래와 같이 추가할 수 있다. 

 

// activity_main.xml 파일 

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

 

• android:name : 구현 클래스의 이름을 포함한다.
• android:navGraph :  위에서 만든 graph 와 연결한다.
• android:defaultNavHost :  true  일 경우, NavHostFragment가 시스템 뒤로 가기 버튼을 가져간다. 즉 스택에 쌓여서 뒤로가기 버튼을 눌렀을 때 이전 destination 으로 돌아가게 한다.

 

 

 

NavController

 

NavHost 에는 각각에 해당하는 자체 NavController 가 존재한다. 이는 유저가 앱 내에서 이동할 때 NavHost 안에 보여질 컨텐츠를 조정하게 하며, 적절한 목적지를 표시해주는 역할을 한다.

 

// NavController 탐색
val navHostFragment =
        supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
val navController = navHostFragment.navController

 

---

 

 

Navigation Component 의 기본적인 구성 요소에 대해서 살펴보았다. 라이브러리의 존재를 모르고 fragment transaction 으로 화면 이동을 구현해오던 나에게는 정말 신기한 내용이었다. 더 편리하게 화면 간의 이동을 구현하고 싶다면 도입해보면 좋을 것이다.