[AndroidStudio] JetPack Navigation 적용하기

Jetpack Navigation 알아보기

https://developer.android.com/codelabs/android-navigation?hl=ko#1

Jetpack Navigation dependencies

https://developer.android.com/jetpack/androidx/releases/navigation?hl=ko#groovy

dependencies {

    def nav_version = "2.5.3"
    implementation("androidx.navigation:navigation-fragment-ktx:$nav_version")
    implementation("androidx.navigation:navigation-ui-ktx:$nav_version")

}

Jetpack Navigation 구성요소

1. navigation_graph

• app의 모든 위치와 사용자가 앱에서 이동 가능한 모든 정보가 포함된 리소스 파일

2. NavHostFragment

• navigation이 작동할 fragment

3. NavController

• navigation_graph에서 현재 위치를 추적하는 객체
• navigation을 통해 이동 시 NavHostFragment의 화면 전환

Bottom Navigation 적용하기

1. navigation을 통해 이동할 fragment 생성하기

2. navigation_graph.xml
   res - android resource directory - navigation 폴더 생성 -> 리소스 파일을 생성

<?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/navigation_graph.xml"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.jiheon.itemmarket.view.HomeFragment"
        android:label="fragment_home"
        tools:layout="@layout/fragment_home" />
    <fragment
        android:id="@+id/chatFragment"
        android:name="com.jiheon.itemmarket.view.ChatFragment"
        android:label="fragment_chat"
        tools:layout="@layout/fragment_chat" />
    <fragment
        android:id="@+id/mypageFragment"
        android:name="com.jiheon.itemmarket.view.MypageFragment"
        android:label="fragment_mypage"
        tools:layout="@layout/fragment_mypage" />
    <fragment
        android:id="@+id/searchFragment"
        android:name="com.jiheon.itemmarket.view.SearchFragment"
        android:label="fragment_search"
        tools:layout="@layout/fragment_search" />
</navigation>

3. bottom_navigation_menu.xml
   res - android resource directory - menu 폴더 생성 -> 리소스 파일을 생성

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/homeFragment"
        android:icon="@drawable/home_icon_24px"
        android:title="@string/item_home"
        />
    <item
        android:id="@+id/searchFragment"
        android:icon="@drawable/search_icon_24px"
        android:title="@string/item_search"
        />
    <item
        android:id="@+id/chatFragment"
        android:icon="@drawable/chat_icon_24px"
        android:title="@string/item_chat"
        />
    <item
        android:id="@+id/mypageFragment"
        android:icon="@drawable/mypage_icon_24px"
        android:title="@string/item_mypage"
        />

</menu>

4. activity_main.xml 작성하기

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/main_bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.1"
        app:itemRippleColor="@null"
        app:itemActiveIndicatorStyle="@null"
        app:menu="@menu/bottom_navigation_menu" />

</LinearLayout>

5. mainActivity에 navigation 구성요소 사용

• navHostFragment 선언

val navHostFragment = supportFragmentManager.findFragmentById(R.id.fcvMain) as NavHostFragment

• navController 선언

val navController = navHostFragment.navController

• bottom navigation에 navController 연결

activityMainBinding.mainBottomNavigation.run {
            setupWithNavController(navController)
        }

6. 최종 화면