🔥TIL🔥스파르타 | BottomNavigation + NavGraph

📌 MainActivity위에 SearchFragment/FavoritesFragment 올리기

1. nav_graph 추가

navigation/nav_graph

<?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/mobile_navigation"
    app:startDestination="@id/navigation_search">

    <fragment
        android:id="@+id/navigation_search"
        android:name="com.example.navgraph.SearchFragment"
        android:label="search_fragment"
        tools:layout="@layout/fragment_search">
        <action
            android:id="@+id/action_navigation_search_to_navigation_track_detail"
            app:destination="@id/navigation_favorites" />
    </fragment>

    <fragment
        android:id="@+id/navigation_favorites"
        android:name="com.example.navgraph.FavoritesFragment"
        android:label="favorites_fragment"
        tools:layout="@layout/fragment_favorites">
        <action
            android:id="@+id/action_navigation_track_detail_to_navigation_search"
            app:destination="@id/navigation_search" />
    </fragment>

</navigation>

2. nav_menu 추가

menu/nav_menu

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

    <item
        android:id="@+id/navigation_search"
        android:icon="@drawable/ic_search"
        android:title="노래 검색" />
    <item
        android:id="@+id/navigation_favorites"
        android:icon="@drawable/ic_favorites"
        android:title="내 보관함" />

</menu>

3. activity_main.xml 추가

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <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:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/nav_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

Navigation Component와 관련된 중요한 설정 2가지

1.app:defaultNavHost="true"
2.app:navGraph="@navigation/nav_graph"

• app:defaultNavHost="true"
  : 이 속성은 현재 FragmentContainerView가 앱 내의 기본 네비게이션 호스트로 작동해야 함을 나타냄
  즉, 사용자가 Android 기기의 백 버튼을 누르거나, 액션 바의 'Up' 버튼을 사용할 때, Navigation Component가 정의한 대로 프래그먼트 간 탐색이 이루어집니다.
• app:navGraph="@navigation/nav_graph"
  : 이 속성은 FragmentContainerView에 사용할 네비게이션 그래프를 지정

반드시 동시에 사용할 필요는 없지만, 일반적으로 함께 사용됩니다. 이 두 속성이 함께 작동할 때, FragmentContainerView 또는 NavHostFragment가 앱 내의 네비게이션 흐름을 효율적으로 관리할 수 있기 때문

4. MainActivity 수정

class MainActivity : AppCompatActivity() {

    private val binding: ActivityMainBinding by lazy {
        ActivityMainBinding.inflate(layoutInflater)
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(binding.root)

        val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
        val navController = navHostFragment.navController
        binding.bottomNavigation.setupWithNavController(navController)

    }
}

• setupWithNavController
  : BottomNavigationView와 NavController를 연결하는 역할
  BottomNavigationView의 항목 선택이 NavController의 네비게이션 액션과 동기화되어, 사용자가 하단 탭을 클릭할 때 해당하는 프래그먼트로 자동으로 탐색

1. 탐색 연결 : BottomNavigationView의 각 메뉴 항목이 NavController의 네비게이션 그래프에 정의된 목적지와 연결
2. 자동 탐색 처리 : 사용자가 BottomNavigationView의 항목을 선택하면, NavController는 해당 목적지로 자동으로 탐색
3. 탐색 상태 반영 : NavController의 현재 네비게이션 상태가 변경되면, BottomNavigationView는 이를 반영하여 현재 선택된 항목을 강조 표시

❗ 주의할 점

1.각 메뉴 항목의 id가 네비게이션 그래프의 목적지 id와 일치해야 함

<?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/mobile_navigation"
    app:startDestination="@id/navigation_search">

    <fragment
        android:id="@+id/navigation_search"
        android:name="com.example.navgraph.SearchFragment"
        android:label="search_fragment"
        tools:layout="@layout/fragment_search">
        <action
            android:id="@+id/action_navigation_search_to_navigation_track_detail"
            app:destination="@id/navigation_favorites" />
    </fragment>

    <fragment
        android:id="@+id/navigation_favorites"
        android:name="com.example.navgraph.FavoritesFragment"
        android:label="favorites_fragment"
        tools:layout="@layout/fragment_favorites">
        <action
            android:id="@+id/action_navigation_track_detail_to_navigation_search"
            app:destination="@id/navigation_search" />
    </fragment>

</navigation>

위의 코드에서 id, navigation_search와 navigation_favorites가 아래 코드에서 id랑 같아야 함

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

    <item
        android:id="@+id/navigation_search"
        android:icon="@drawable/ic_search"
        android:title="노래 검색" />
    <item
        android:id="@+id/navigation_favorites"
        android:icon="@drawable/ic_favorites"
        android:title="내 보관함" />

</menu>

2.name, defaultNavHost, navGraph 속성 입력

android:name="androidx.navigation.fragment.NavHostFragment"
이랑
app:defaultNavHost="true"
app:navGraph="@navigation/nav_graph"
입력해줘야 함

깃허브 링크