Android 네비게이션 UI

유저가 버튼을 눌러서 이동하는 선형적인 네비게이션 구조에서는 필요없겠지만, 일반적인 경우 네비게이션 UI에 네비게이션 그래프를 결합해서 사용한다.

바텀 네비게이션 바를 만든 상황을 가정하자.

avtivity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/root"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/navHostFragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginBottom="50dp"
        app:navGraph="@navigation/nav_graph">
    </androidx.fragment.app.FragmentContainerView>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavi"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:menu="@menu/menu_bottm"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

네비게이션 그래프

home, post, setting 세가지 화면을 바텀 네비게이션에서 클릭된 아이템에 따라 보여줄 것이다.

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

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.test.HomeFragment"
        android:label="HomeFragment" />
    <fragment
        android:id="@+id/postFragment"
        android:name="com.example.test.PostFragment"
        android:label="PostFragment" />
    <fragment
        android:id="@+id/settingFragment"
        android:name="com.example.test.SettingFragment"
        android:label="SettingFragment" />
</navigation>

메뉴

바텀 네비게이션바에 표시된 메뉴아이템들의 아이디는 네비게이션 그래프에서 각 프레그먼트의 아이디와 일치시켜야 한다.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/homeFragment"
        android:title="home"/>
    <item
        android:id="@+id/postFragment"
        android:title="post"/>
    <item
        android:id="@+id/settingFragment"
        android:title="setting"/>

</menu>

메뉴 선택에 따른 프레그먼트 전환

액티비티 코드에서 네비게이션 메뉴 선택에 따른 프레그먼트 전환을 구현하자.

class MainActivity : AppCompatActivity() {
    lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.bottomNavi.setOnItemSelectedListener {
            val navController = binding.navHostFragment.findNavController()
            it.onNavDestinationSelected(navController)
        }
    }
}

바텀네비게이션 바에 대해서는 특별하게 setupWithNavController 함수를 이용할 수 있다.

class MainActivity : AppCompatActivity() {
    lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val navFragment =  supportFragmentManager
            .findFragmentById(R.id.navHostFragment) as NavHostFragment
        val navController = navFragment.navController
        binding.bottomNavi.setupWithNavController(navController)
    }
}