안드로이드 화면 전환: Navigation 기능 사용법 및 예제

안드로이드 화면 전환: 네비게이션 기능

안드로이드 애플리케이션 개발에서 화면 전환은 사용자 경험을 개선하는 중요한 요소입니다.

이번글에서는 먼저 네비게이션 기능을 소개하고,

네비게이션 컴포넌트를 사용하여 화면 전환을 구현하는 방법과 예제를 통해 이를 살펴보려고 합니다.

 

 

 

 

네비게이션 기능 소개

안드로이드의 네비게이션 컴포넌트는 Jetpack 라이브러리의 일부로 애플리케이션 내에서 화면 전환을 쉽게 처리할 수 있도록 도와줍니다. 이 기능은 명확한 구조를 제공하며 코드의 복잡성을 줄여 줍니다.

 

주요 구성 요소

• NavHostFragment: 네비게이션 그래프의 목적지(Fragment)를 표시하는 컨테이너입니다.
• Navigation Graph: XML 파일로 애플리케이션의 네비게이션 구조를 정의합니다.
• NavController: 네비게이션 그래프 내에서 전환을 제어하는 객체입니다.

 

 

 

네비게이션 예제

 

FragmentA, FragmentB, FragmentC를 생성하고 각 프래그먼트에서 다음 프래그컨트로 이동하는 버튼을 추가하여 네비게이션 동작 예제를 살펴보려고 합니다.

 

화면 전환(Fragment A -> Fragment B -> Fragment C -> Fragment A)

안드로이드 화면 전환: 네비게이션 예제

네비게이션 동작 화면

안드로이드 화면전환: 네비게이션 예제

 

 

네비게이션 라이브러리 추가

build.gradle 파일에 네비게이션 라이브러리를 추가해 줍니다.

2024년 7월 기준 최신 버전은 2.7.7입니다.

dependencies {

    ....

    // Navigation
    implementation("androidx.navigation:navigation-fragment-ktx:2.7.7")
    implementation("androidx.navigation:navigation-ui-ktx:2.7.7")
}

 

NavHostFragment 작성

MainActivity 레이아웃 파일에 NavHostFragment를 추가합니다.

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

 

Navigation Graph 작성

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

    <fragment
        android:id="@+id/fragmentA"
        android:name="com.example.navigationex.FragmentA"
        android:label="Fragment A"
        tools:layout="@layout/fragment_a">
        <action
            android:id="@+id/action_fragmentA_to_fragmentB"
            app:destination="@id/fragmentB" />
    </fragment>

    <fragment
        android:id="@+id/fragmentB"
        android:name="com.example.navigationex.FragmentB"
        android:label="Fragment B"
        tools:layout="@layout/fragment_b">
        <action
            android:id="@+id/action_fragmentB_to_fragmentC"
            app:destination="@id/fragmentC" />
    </fragment>

    <fragment
        android:id="@+id/fragmentC"
        android:name="com.example.navigationex.FragmentC"
        android:label="Fragment C"
        tools:layout="@layout/fragment_c">
        <action
            android:id="@+id/action_fragmentC_to_fragmentA"
            app:destination="@id/fragmentA" />
    </fragment>
</navigation>

NavController 작성

각 프래그먼트에 다음 프래그먼트 이동하는 버튼을 추가합니다.

 

FragmentA.kt

class FragmentA : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        val binding: FragmentABinding =
            DataBindingUtil.inflate(inflater, R.layout.fragment_a, container, false)

        binding.btnNavigateB.setOnClickListener {
            findNavController().navigate(R.id.action_fragmentA_to_fragmentB)

            // 화면 전환 및 백스택 Fragment A 제거
            // findNavController().navigate(
            //     R.id.action_fragmentA_to_fragmentB,
            //     null,
            //     NavOptions.Builder().setPopUpTo(R.id.fragmentA, true).build()
            // )
        }

        return binding.root
    }
}

 

FragmentB.kt

class FragmentB : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        val binding: FragmentBBinding =
            DataBindingUtil.inflate(inflater, R.layout.fragment_b, container, false)

        binding.btnNavigateC.setOnClickListener {
            findNavController().navigate(R.id.action_fragmentB_to_fragmentC)

            // 화면 전환 및 백스택 Fragment B 제거
            // findNavController().navigate(
            //     R.id.action_fragmentB_to_fragmentC,
            //     null,
            //     NavOptions.Builder().setPopUpTo(R.id.fragmentB, true).build()
            // )
        }

        return binding.root
    }
}

 

FragmentC.kt

class FragmentC : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        val binding: FragmentCBinding =
            DataBindingUtil.inflate(inflater, R.layout.fragment_c, container, false)

        binding.btnNavigateA.setOnClickListener {
            findNavController().navigate(R.id.action_fragmentC_to_fragmentA)

            // 화면 전환 및 백스택 Fragment C 제거
            // findNavController().navigate(
            //     R.id.action_fragmentC_to_fragmentA,
            //     null,
            //     NavOptions.Builder().setPopUpTo(R.id.fragmentC, true).build()
            // )
        }

        return binding.root
    }
}

 

기본적으로 네비게이션 컴포넌트는 백스택에 현재 프래그먼트를 추가합니다.
뒤로 가기 버튼을 누르면 이전 화면으로 돌아갑니다.
백스택에 쌓이는 걸 원하지 않는다면 setPopUpTo 메서드를 활용할 수 있습니다.

 

 

 

 

마무리

 

이 예제를 통해 안드로이드 네비게이션 컴포넌트를 사용하여 프래그먼트 간의 화면 전환을 쉽게 구현할 수 있습니다. 이 코드는 기본적인 화면 전환을 다루지만 애니메이션 추가나 복잡한 네비게이션 로직 구현도 가능합니다. 애니메이션을 통해 전환 효과를 더 부드럽게 만들고, Deep Linking 및 다중 백스택 관리와 같은 고급 기능을 활용하여 더욱 강력한 네비게이션을 구현할 수 있습니다.

 

 

참고자료

Android Developer - Navigation

탐색  |  Android Developers