🔨 Navigation이란

Android JetPack에서 앱에서 탐색 기능을 구현하기 위한 공식 라이브러리입니다. 여기서 탐색이란 공식 문서에 따르면 사용자가 앱 내의 여러 콘텐츠를 탐색하고, 그곳에 들어갔다 나올 수 있게 하는 상호작용을 의미합니다.라고 나와 있는데 하나의 화면에서 다른 화면으로 이동했다가 다시 나오는 그런 의미를 말하는 것 같습니다.

🔨 Navigation 시작하기

1. Safe Args를 사용하여 유형 안전성 보장하기 위해 최상위 build.gradle 파일에 다음의 classpath를 다음과 같이 포함해주세요.

buildscript {
    repositories {
        google()
    }
    dependencies {
        def nav_version = "2.5.3"
        classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"
    }
}

plugins {
    id 'com.android.application' version '8.0.0' apply false
    id 'com.android.library' version '8.0.0' apply false
    id 'org.jetbrains.kotlin.android' version '1.8.0' apply false
}

2. build.gradle(Module:app) 파일에 다음 행을 추가합니다.

plugins {
    id 'com.android.application'
    ...
    id 'androidx.navigation.safeargs.kotlin'
}
dependencies {
    // Navigation
    implementation "androidx.navigation:navigation-fragment-ktx:2.6.0"
    implementation "androidx.navigation:navigation-ui-ktx:2.6.0"
}

이러면 이제 Navigation 을 사용하기 위한 준비가 끝났습니다.

3.Navigation 그래프를 만들어 줍니다.

• 왼쪽에 탭을 보면 리소스매니저라고 적혀져 있는 탭을 클릭합니다.
• 그러면 창이 뜨는데 상단쪽 탭에 Navigation 클릭 후 그 위에 + 버튼을 누르면
• Navigation 리소스 파일을 만들 수 있습니다.
• 저는 my_nav라고 이미 만들어 놨습니다.

4. fragment 만들어 보기

• my_nav에 연결할 fragment를 만들어 봅시다.
• 상단에 직사각형과 초록색 플러스 버튼을 눌러줍니다.
• 그리고 Create new destination을 클릭해 줍니다.
• 그러면 add a Fragment to Mobile 창이 뜨는데 거기서 저는 Fragment(Blank)를 만들어 줬어요
  

5. fragment 선을 연결해 보기

• 선을 연결하는 방법은 저는 3개의 fragmet를 만들었는데 먼저 listfragment 오른쪽을 마우스에 가까이 다가가면 동그라미 가 뜨는데 addFragment 왼쪽 동그라미를 연결해주고 다시 addFragment 오른쪽을 listFragment에 연결해주면 된다.
  

6. activity_main.xml에 연결을 해보기

• app:navGraph="@navigation/my_nav" 이 코드로 연결을 해주면 됩니다.

   <fragment
        android:id="@+id/fragmentContainerView"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5"
        app:navGraph="@navigation/my_nav" />

7. listfragment -> addFragment 이동해 보기

• ViewBindg을 이용해 listfragment에서 fragmentListBinding의 ID를 가져옵니다.
• 그리고 클릭을 하게되면 findNavController() 메서드가 현재 화면의 Navigation Controller를 검색합니다.navigate() 메서드는 Navigation Controller를 통해 다른 화면으로 이동하는 역할을 합니다. 저는 listFragment에서 addFragment로 이동하기위해 매개변수에 넣어줬어요.

class ListFragment : Fragment() {

    lateinit var fragmentListBinding: FragmentListBinding

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {

        fragmentListBinding = FragmentListBinding.inflate(layoutInflater)

        fragmentListBinding.run {
            floatingActionButton.setOnClickListener {
                findNavController().navigate(R.id.action_listFragment_to_addFragment)
            }
        }

        return fragmentListBinding.root
    }
}