如何同时使用导航抽屉和底部导航 - 导航架构组件 [英] How to use Navigation Drawer and Bottom Navigation simultaneously - Navigation Architecture Component
问题描述
我有如下屏幕，在同一屏幕上包含导航抽屉和底部导航:
I have screen like below which contain a navigation drawer and bottom navigation on same screen:
我正在使用 Jetpack 导航架构组件.
I am using Jetpack Navigation Architecture Component.
当前问题和我尝试了什么?
点击第二个和第三个底部导航项在工具栏上显示后退箭头?
Clicking on the 2nd and 3rd bottom nav item shows back arrow on toolbar?
尝试过:将与第二和第三底部导航相关的片段设置为顶级目的地
Tried: setting fragments associated with 2nd and 3rd bottom nav to top level destinations
appBarConfig = AppBarConfiguration(setOf(R.layout.fragment_star, R.layout.fragment_stats, R.layout.fragment_user))
代替
appBarConfig = AppBarConfiguration(navController.graph, drawerLayout)
没有用.
非常感谢任何帮助！
我的代码如下所示.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<layout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.drawerlayout.widget.DrawerLayout
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<fragment
android:id="@+id/navHostFragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:defaultNavHost="true"
app:navGraph="@navigation/nav_graph" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="@menu/menu_bottom" />
</LinearLayout>
<!-- gives navDrawer material look-->
<com.google.android.material.navigation.NavigationView
android:id="@+id/navView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/nav_drawer_menu"
app:headerLayout="@layout/nav_header"
android:fitsSystemWindows="true"
/>
</androidx.drawerlayout.widget.DrawerLayout>
</layout>
menu_bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/starFragment"
android:icon="@drawable/ic_star_green_48dp"
android:title="@string/bottom_nav_title_star"/>
<item
android:id="@+id/statsFragment"
android:icon="@drawable/ic_stats_green_48dp"
android:title="@string/bottom_nav_title_stats"/>
<item
android:id="@+id/userFragment"
android:icon="@drawable/ic_user_green_48dp"
android:title="@string/bottom_nav_title_user"/>
</menu>
nav_graph.xml
<?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_main"
app:startDestination="@id/starFragment">
<fragment
android:id="@+id/starFragment"
android:name="com.example.app.ui.StarrFragment"
android:label="Star"
tools:layout="@layout/fragment_star">
</fragment>
<fragment
android:id="@+id/statsFragment"
android:name="com.example.app.StatsFragment"
android:label="fragment_stats"
tools:layout="@layout/fragment_stats" />
<fragment
android:id="@+id/userFragment"
android:name="com.example.app.UserFragment"
android:label="fragment_user"
tools:layout="@layout/fragment_user" />
</navigation>
ActivityMain.kt
class MainActivity : AppCompatActivity() {
private lateinit var drawerLayout: DrawerLayout
private lateinit var appBarConfig: AppBarConfiguration
private lateinit var navController: NavController
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
setSupportActionBar(toolbar)
drawerLayout = binding.drawerLayout
navController = this.findNavController(R.id.navHostFragment)
binding.bottomNav.setupWithNavController(navController)
NavigationUI.setupActionBarWithNavController(this, navController, drawerLayout)
appBarConfig = AppBarConfiguration(navController.graph, drawerLayout)
// lock drawer when not in start destination
navController.addOnDestinationChangedListener { nc, nd, _ ->
if(nd.id == nc.graph.startDestination){
drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED)
}
else{
drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED)
}
}
NavigationUI.setupWithNavController(binding.navView, navController)
}
override fun onSupportNavigateUp(): Boolean {
// replace navigation up button with nav drawer button when on start destination
return NavigationUI.navigateUp(navController, appBarConfig)
}
}
推荐答案
无需编写单独的代码来将后退按钮替换为抽屉图标.
No need of writing separate code to replace the back button with the drawer icon.
在 AppBarConfiguration 中传递片段 ID(来自 nav_graph)，您将使用它从底部导航和导航抽屉.(P.S fragments 及其相关图标应该具有相同的 id)
In AppBarConfiguration pass the fragment ids (from nav_graph) which you are using to navigate from both bottom navigation & navigation drawer. (P.S fragments and its associated icon should have same ids)
对于您的情况，AppBarConfiguration 应如下所示:
For your case the AppBarConfiguration should look like this :
appBarConfig = AppBarConfiguration.Builder(R.id.starFragment, R.id.statsFragment, R.id.userFragment)
.setDrawerLayout(drawerLayout)
.build()
设置操作栏:
setSupportActionBar(toolbar)
setupActionBarWithNavController(navController, appBarConfig)
现在为底部导航和导航设置 navcontroller导航视图:
Now setup navcontroller for both bottom navigation & navigation view :
navView.setupWithNavController(navController)
bottomNav.setupWithNavController(navController)
onSupportNavigateUp 函数应该是:
onSupportNavigateUp function should should be :
override fun onSupportNavigateUp(): Boolean {
return navController.navigateUp(appBarConfig)
}
如果抽屉是打开的，应该处理后退按钮:
Back button press should be handled if drawer is open :
override fun onBackPressed() {
if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
drawerLayout.closeDrawer(GravityCompat.START)
} else {
super.onBackPressed()
}
}
奖金
默认情况下，当您依次单击 icon_1、icon_2 和 icon_3 顺序中的底部导航图标，然后按后退按钮，它将导航回到图标_1 的主页图标
By default when you click bottom navigation icon in the order icon_1 then icon_2 then icon_3 and from there you press back button it will navigate back to home icon that's icon_1
如果您想以与单击图标相反的顺序返回(返回堆栈方式)，请将 android:menuCategory="secondary" 添加到菜单中的项目.所以你的菜单会是这样的:
If you want to navigate back in the reverse order in which you have clicked the icons (back stack manner) then add android:menuCategory="secondary" to the item in the menu. So your menu will be like :
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/starFragment"
android:icon="@drawable/ic_star_green_48dp"
android:title="@string/bottom_nav_title_star"
android:menuCategory="secondary"/>
<item
android:id="@+id/statsFragment"
android:icon="@drawable/ic_stats_green_48dp"
android:title="@string/bottom_nav_title_stats"
android:menuCategory="secondary"/>
<item
android:id="@+id/userFragment"
android:icon="@drawable/ic_user_green_48dp"
android:title="@string/bottom_nav_title_user"
android:menuCategory="secondary"/>
</menu>
希望后退按钮图标现在能解决:)
Hope the back button icon will be solved now :)
这篇关于如何同时使用导航抽屉和底部导航 - 导航架构组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
