[개념] Bottom Navigation

1. Bottom Navigation 코드

따로 설명하기에는 간단한 기능이기 때문에 예제 코드를 위주로 작성을 하겠습니다.

1. menu.xml

2. activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

   <FrameLayout
       android:id="@+id/fram_nav"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/menu_nav"/>

</RelativeLayout>

프래그먼트 영역과 바텀바 영역을 xml에 작성해 줍니다.

3. MainActivity.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val homeFragment = HomeFragment()
        val notificationFragment = NotificationFragment()
        val settingsFragment = SettingsFragment()

        changeFragment(homeFragment)

        val bottom_navigation = findViewById<BottomNavigationView>(R.id.bottom_navigation)

        bottom_navigation.setOnNavigationItemSelectedListener {
            when(it.itemId){
                R.id.menu_home -> changeFragment(homeFragment)
                R.id.menu_notification -> changeFragment(notificationFragment)
                R.id.menu_settings -> changeFragment(settingsFragment)
            }
            true
        }
    }

    private fun changeFragment(fragment: Fragment) {
        supportFragmentManager
            .beginTransaction()
            .replace(R.id.fram_nav, fragment)
            .commit()
    }
}

전체 코드중 일부만 뜯어서 자세히 알아보겠습니다.

        bottom_navigation.setOnNavigationItemSelectedListener {
            when(it.itemId){
                R.id.menu_home -> changeFragment(homeFragment)
                R.id.menu_notification -> changeFragment(notificationFragment)
                R.id.menu_settings -> changeFragment(settingsFragment)
            }
            true
        }

위 코드로 인해서 우리가 xml 파일에 추가한 @+id/menu_home과 같은 아이디값의 버튼을 클릭하면, changeFragement() 함수로 Fragement를 replace 시켜주게 됩니다.

    private fun changeFragment(fragment: Fragment) {
        supportFragmentManager
            .beginTransaction()
            .replace(R.id.fram_nav, fragment)
            .commit()
    }

xml 파일에 추가한 버튼 아이디에 맞는 프레그먼트로 이동을 시켜줍니다.

코드 다운 : https://github.com/ilil1/BottomNavigation

2. reference

https://material.io/components/bottom-navigation