Android - FragmentContainerView와 BottomNavigation item으로 fragment넘기기

탐색  |  Jetpack  |  Android Developers

위에 공식문서에서 버전 참고

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

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />

 

공식문서를 통해 기본을 잡아준다.

 

앗 참고로 res -> navigation폴더 생성 -> nav_graph 생성까지 해준다.

 

이제 bottomNavigation을 생성해줘야한다.

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="0dp"
        android:layout_height="wrap_content"/>

 

내가 만들려는 것은 메인화면을 제외하고 fragment로 로그인화면과 홈화면 두개가 필요해서 생성해줬다.

 

이런식으로 두개를 만들어준 뒤 새로 생성했으니 아까 생성한 nav_graph로 돌아가서 추가해줘야한다!

 

 

만든 2개의 fragment를 생성해준다.

코드가 필요할까봐 올려본다

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

<fragment
android:id="@+id/homeFragment"
android:name="com.example.kotlin_sai.HomeFragment"
android:label="HomeFragment"
tools:layout="@layout/fragment_home" />
<fragment
android:id="@+id/authFragment"
android:name="com.example.kotlin_sai.AuthFragment"
android:label="AuthFragment"
tools:layout="@layout/fragment_auth" />
</navigation>

 

두개 생성을 마친 뒤 두개를 연결해줘야하는데 공식문서를 보면 서로 이어만 주면 된다고 한다!

 

 

 

 

이어주면 위에처럼 바뀌고 action 이라는 코드가 생성됐다.

    <fragment
        android:id="@+id/AuthFragment"
        생략...
        >
        <action
            android:id="@+id/action_authFragment_to_homeFragment"
            app:destination="@id/homeFragment" />
            
        생략...

 

.

공식문서로 진행을 계속 해보면

Safe Args를 사용하여 유형 안정성 보장(한국어로 바꿔서 가져왔다.) 부분이 있다.

대상 간 이동을 위해 사용하는 것이 좋다고 나와있어서 바로 추가 !!

//project 수준의 build.gradle
id("androidx.navigation.safeargs.kotlin") version "2.7.7" apply false

//app수준의 build.gradle
id("androidx.navigation.safeargs.kotlin")

 

 

다음으로 nav_graph에서 만든 action을 가져온다. 위에 공식문서처럼!

나는 로그인에 성공하면 넘어가도록 만들 예정이다.

 

++fragment를 이동할 부분에 넣어주면된다.

val action = AuthFragmentDirections.actionAuthFragmentToHomeFragment()
findNavController().navigate(action)

 

이렇게하면 해당 fragment로 넘어간다.

위에 코드는 넘어가는 방식을 임시로 해본 것이다.

 

이것을 잘 활용해서 bottomNavigation의 아이콘을 선택했을 때 넘어가는 것을 구현할 것이다.

일단 bottomnavigation의 item과 이어주어야 한다.

공식문서

 

앗 대박

nav_graph에 있는 fragment의 아이디와 item의 아이디가 같으면 알아서 처리해준다고 한다.

 

 

res -> menu폴더 생성 -> menu_main 생성

자세한 설명은 그림으로 대체

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/homeFragment"
        android:icon="@drawable/icon_home"
        android:title="홈"/>
    <item
        android:id="@+id/authFragment"
        android:icon="@drawable/icon_user"
        android:title="내 정보"/>
</menu>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        
        생략 ...
        
        app:menu="@menu/menu_main" />

bottomNavigation에 menu를 연결해주고

 

공식문서

FragmentContainerView와 BottomNavigationView를 연결해주는 코드를 작성해주면된다.

위에 공식문서 참고

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

 

복붙한다면

import androidx.navigation.fragment.NavHostFragment
import androidx.navigation.ui.setupWithNavController

import를 잘해주자. 혹시라도 안된다면 맨 위에 공식문서의 링크에서 gradle에서 implementation을 확인

 

 

 

코드 간결화

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

 

위에서 임시로 넣었던 action과 코드를 지우고 실행

  

 

 

 

결과

---

 

 

 

 

 

ref

 

NavigationUI를 사용하여 UI 구성요소를 NavController에 연결  |  Android 개발자  |  Android Developers

 

 

공식문서가 너무 잘나와있다!!!