[Android / Kotlin] Navigation 사용하기 2 (Bottom Navigation)

 

우선 1편을 안보신 분들은 1편을 봐주고 오세요~ (gradle 설정은 skip 하겠습니다) 

 

https://jangstory.tistory.com/50

[Android / Kotlin] Navigation 사용하기!

 

 

Bottom navigation은 1편보다 훨씬 간단합니다! 

 

바텀 네비게이션으로 사용할 프래그먼트를 만들어줍니다.

저는 HomeFragment , ChatFragment, MyPageFragment 를 만들었습니다. 

 

resource - New - Android Resource Directory - name : menu (만들 파일이름) , type: menu 

 

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

    <item android:id="@+id/homeFragment"
        android:title="@string/menu_home"
        android:icon="@drawable/home"/>
    <item android:id="@+id/chatFragment"
        android:title="@string/menu_chat"
        android:icon="@drawable/chat"/>
    <item android:id="@+id/myPageFragment"
        android:title="@string/menu_my"
        android:icon="@drawable/settings"/>
</menu>

 

(레이아웃은 알아서 설정하세요.)

<androidx.fragment.app.FragmentContainerView
    android:id="@+id/fragmentContainerView"
    android:layout_below="@+id/toolbar_layout"
    android:layout_above="@+id/bottom_main"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="true"
    app:navGraph="@navigation/nav_graph" />  < -- 우리가 만들 navigation 이름


<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_main"
    app:menu="@menu/menu"        <--- 이 부분이 위에서 만든 파일  
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    />

 

resouce 파일을 하나 더 추가해줍니다.

res -> Android Resouce Directory 추가 -> name : nav_graph (만들 파일 이름) ,type : navigation 

 

 

 

nav_graph로 들아가서 Design 탭으로 가줍니다 .

상단에 보이는 초록색 플러스 버튼을 눌러줍니다. 그리고 우리가 만들었던 3개의 프래그먼트를 더블클릭하여 추가해줍니다.

 

 

여기서 중요한 부분이 남아있습니다. 

현재 nav_graph에 있는 Fragment 들의 id를 위의 메뉴 이름과 동일하게 설정을 해줘야합니다.

(예 : nav_graph의 homeFragment 의 id를 menu에서 적었던 item의 아이디와 똑같이 변경 , 반대로해도 무관)

 

 

MainActivity Class

 

class MainActivity : AppCompatActivity() {
    private lateinit var binding : ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        setNavigation()
    }

    private fun setNavigation(){
    
    	activity_main.xml 의 FragmentContainerView 의 id 
        val navHostFragment = supportFragmentManager.findFragmentById(R.id.fragmentContainerView) as NavHostFragment
        val navController = navHostFragment.navController
        
        activity_main.xml 의 BottomNavigationView 의 id 
        findViewById<BottomNavigationView>(R.id.bottom_main).setupWithNavController(navController)
    }

}

 

 

끝입니다 . 이상으로 AndroidX Jetpack의 Navigation을 사용해봤습니다!