[Android] NavigationUI + BottomNavigationView 教學
markdown
## 簡介
Navigation Component 導入了 NavigationUI。通過這篇文章，我們來看看如何使用 NavigationUI 來對App bar和頁面切換進行管理。
## 教學 ### 創建專案 創建專案並選擇 BottomNavigationActivity，目前官方提供的 Sample Code 都已經套用 NavigationUI，可方便建置。
### 建置內容 #### main_navigation.xml 此檔案內容負責管理 Fragment 的互動以及跳轉。  ``` xml
```
#### bottom_nav_menu.xml 此檔案為設定 BottomNavigationView 的項目 ``` xml ```
#### activity_base.xml 其中使用 CoordinatorLayout 並包含 AppBarLayout (Toolbar)、FragmentContainerView、BottomNavigationView，以下再來細分說明各元件的用途。 ![Main View] (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT05yHdiEq5TFVu4Y_zZFj6atdxU7wJGDmnc2lVPzYQ6RHliEmqB5sXEqRq2rbCyA34B8p7IuahbBABAP2b-sVYVelv-1p_e9J5ECkuyVvlOmBcPXq3T6OxgUt6ZQEZfgIVXvR7mTcQFxz2uZQXh0YXoakgXojpAbzpxLcQcvh3AMxzeiSpy4-ZVij/s320/%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%E7%95%AB%E9%9D%A2%202022-09-04%20150414.png)
1. AppBarLayout (Toolbar)：為 App 的 Top Action Bar。 * app:layout_scrollFlags：可實現滑動隱藏 Toolbar。 ``` xml
```
2. FragmentContainerView：為 Fragment 顯示的主區塊 * app:layout_scrollFlags：須設定此項目才可與 Toolbar 組合實現滑動隱藏 Toolbar。 * app:navGraph：指定Navigation Graph的xml檔。 ``` xml
3. BottomNavigationView：為 Bottom Bar 的主體。 * app:layout_behavior：可實現滑動隱藏 BottomNavigationView。 * app:menu：指定 Bottom Bar 項目。 ``` xml
#### BaseActivity.kt ``` kotlin class BaseActivity : AppCompatActivity() { lateinit var binding: ActivityBaseBinding private var nowSelectedPageID: Int? = 0 //region System Function override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = ActivityBaseBinding.inflate(layoutInflater) setContentView(binding.root) this.initNavigation() } //endregion //region NavigateUI Function /** * set Fragment Navigation * @menu/bottom_nav_menu: 底部 Navigation bar * @navigation/main_navigation：主要控管 Fragment 的 Host Navigation */ private fun initNavigation() { val navController = (supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment).navController.apply { this.addOnDestinationChangedListener { _, destination, _ -> if (this@BaseActivity.nowSelectedPageID == destination.id) { return@addOnDestinationChangedListener } this@BaseActivity.nowSelectedPageID = destination.id when (destination.id) { R.id.navigation_index -> { binding.navView.visibility = View.VISIBLE binding.btnClickLeft.visibility = View.GONE binding.btnClickRight.visibility = View.GONE } else -> { binding.navView.visibility = View.GONE binding.btnClickLeft.visibility = View.GONE binding.btnClickRight.visibility = View.GONE } } } } setSupportActionBar(binding.toolbar) // Passing each menu ID as a set of Ids because each // menu should be considered as top level destinations. val appBarConfiguration = AppBarConfiguration(setOf(R.id.navigation_index)) setupActionBarWithNavController(navController, appBarConfiguration) binding.navView.setupWithNavController(navController) } /** * if using setupActionBarWithNavController then also override and config this methods */ override fun onSupportNavigateUp(): Boolean { val navController = (supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment).navController return navController.navigateUp() || super.onSupportNavigateUp() } fun changeBottomNavigationViewItem(pageID: Int) { this.binding.navView.selectedItemId = pageID } //endregion } ```
## 教學 ### 創建專案 創建專案並選擇 BottomNavigationActivity，目前官方提供的 Sample Code 都已經套用 NavigationUI，可方便建置。
### 建置內容 #### main_navigation.xml 此檔案內容負責管理 Fragment 的互動以及跳轉。  ``` xml
#### bottom_nav_menu.xml 此檔案為設定 BottomNavigationView 的項目 ``` xml ```
#### activity_base.xml 其中使用 CoordinatorLayout 並包含 AppBarLayout (Toolbar)、FragmentContainerView、BottomNavigationView，以下再來細分說明各元件的用途。 ![Main View] (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT05yHdiEq5TFVu4Y_zZFj6atdxU7wJGDmnc2lVPzYQ6RHliEmqB5sXEqRq2rbCyA34B8p7IuahbBABAP2b-sVYVelv-1p_e9J5ECkuyVvlOmBcPXq3T6OxgUt6ZQEZfgIVXvR7mTcQFxz2uZQXh0YXoakgXojpAbzpxLcQcvh3AMxzeiSpy4-ZVij/s320/%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%E7%95%AB%E9%9D%A2%202022-09-04%20150414.png)
1. AppBarLayout (Toolbar)：為 App 的 Top Action Bar。 * app:layout_scrollFlags：可實現滑動隱藏 Toolbar。 ``` xml
2. FragmentContainerView：為 Fragment 顯示的主區塊 * app:layout_scrollFlags：須設定此項目才可與 Toolbar 組合實現滑動隱藏 Toolbar。 * app:navGraph：指定Navigation Graph的xml檔。 ``` xml
3. BottomNavigationView：為 Bottom Bar 的主體。 * app:layout_behavior：可實現滑動隱藏 BottomNavigationView。 * app:menu：指定 Bottom Bar 項目。 ``` xml
#### BaseActivity.kt ``` kotlin class BaseActivity : AppCompatActivity() { lateinit var binding: ActivityBaseBinding private var nowSelectedPageID: Int? = 0 //region System Function override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = ActivityBaseBinding.inflate(layoutInflater) setContentView(binding.root) this.initNavigation() } //endregion //region NavigateUI Function /** * set Fragment Navigation * @menu/bottom_nav_menu: 底部 Navigation bar * @navigation/main_navigation：主要控管 Fragment 的 Host Navigation */ private fun initNavigation() { val navController = (supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment).navController.apply { this.addOnDestinationChangedListener { _, destination, _ -> if (this@BaseActivity.nowSelectedPageID == destination.id) { return@addOnDestinationChangedListener } this@BaseActivity.nowSelectedPageID = destination.id when (destination.id) { R.id.navigation_index -> { binding.navView.visibility = View.VISIBLE binding.btnClickLeft.visibility = View.GONE binding.btnClickRight.visibility = View.GONE } else -> { binding.navView.visibility = View.GONE binding.btnClickLeft.visibility = View.GONE binding.btnClickRight.visibility = View.GONE } } } } setSupportActionBar(binding.toolbar) // Passing each menu ID as a set of Ids because each // menu should be considered as top level destinations. val appBarConfiguration = AppBarConfiguration(setOf(R.id.navigation_index)) setupActionBarWithNavController(navController, appBarConfiguration) binding.navView.setupWithNavController(navController) } /** * if using setupActionBarWithNavController then also override and config this methods */ override fun onSupportNavigateUp(): Boolean { val navController = (supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment).navController return navController.navigateUp() || super.onSupportNavigateUp() } fun changeBottomNavigationViewItem(pageID: Int) { this.binding.navView.selectedItemId = pageID } //endregion } ```
留言
張貼留言