如何使用导航控制器组件设置不同的工具栏？

Question

我实际上不确定，如何使用导航控制器组件设置不同工具栏的正确方法或最佳实践

在我的应用程序中。我想设置 2 个不同的工具栏。

1. 绿色工具栏
2. 红色工具栏

两个不同颜色的工具栏。这只是为了简化案例，实际上我有多个工具栏

我正在使用导航控制器组件。目前在我的主活动中作为主持人，我使用此代码在主活动中设置了绿色工具栏

        setSupportActionBar(green_toolbar)
        supportActionBar?.setDisplayShowTitleEnabled(false)

        // set up top hierarchy destination
        val appBarConfiguration = AppBarConfiguration(setOf(
            R.id.destination_home,
            R.id.destination_search,
            R.id.destination_user_control,
            R.id.destination_create_event)
        )

        green_toolbar.setupWithNavController(navController,appBarConfiguration)

那么使用导航控制器组件设置不同工具栏的最佳方法是什么？

我必须在我的主要活动中制作这两个不同的工具栏吗？或者我是否必须将 fragmentY 目的地（具有红色工具栏）设置为另一个活动而不是片段？

或者....我不知道....请帮忙:)

Answer 1

下面的答案适用于使用底部导航视图的应用程序，如果您使用的是导航抽屉，请使用此答案

所以根据这里的文档，我需要在每个片段中设置工具栏。

但是，如果您的顶部应用栏在不同目的地之间发生了重大变化，那么请考虑从您的 Activity 中移除顶部应用栏并在每个目的地片段中定义它。

所以我们将在每个片段中添加工具栏，而不是在 MainActivity 中设置它。如果在每个片段中设置工具栏，也可以实现折叠工具栏。

例如，在您的底部导航菜单中，您将主页、个人资料和搜索片段作为顶级片段（根），如下所示

因此，在每个顶级片段中，使用片段中的此代码设置工具栏onViewCreated。

val toolbar = view.findViewById<androidx.appcompat.widget.Toolbar>(R.id.toolbarInYourFragment)
val appBarConfiguration = AppBarConfiguration(setOf(
    R.id.destination_home,
    R.id.destination_profile  // set all your top level destinations in here
    R.id.destination_search)
)

val navHostFragment = NavHostFragment.findNavController(this);
NavigationUI.setupWithNavController(toolbar, navHostFragment,appBarConfiguration)

您必须通过appBarConfiguration删除工具栏中的后退按钮。因此，您必须传入appBarConfiguration每个顶级片段（主页、搜索、个人资料），而不仅仅是在您的家中。

对于其余的片段，您不需要传递appBarConfiguration，因此对于其余的片段，只需将此代码传入onViewCreated.

val toolbar = view.findViewById<androidx.appcompat.widget.Toolbar>(R.id.toolbarInYourFragment)
val navHostFragment = NavHostFragment.findNavController(this);
NavigationUI.setupWithNavController(toolbar, navHostFragment)

如果您的工具栏有菜单，请添加以下代码：

setHasOptionsMenu(true)

(activity as AppCompatActivity).setSupportActionBar(toolbar)

toolbar.setNavigationOnClickListener { view ->
    view.findNavController().navigateUp()
}

要使用AppBarConfigurationclass ，在 gradle app 中你需要使用navigation-ui-ktxartifact 并且你需要像这样添加编译选项和 kotlin 选项

android {
   

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = JavaVersion.VERSION_1_8.toString()
    }

}


dependencies {

    def nav_version = "2.3.0-alpha04"
    implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
    implementation "androidx.navigation:navigation-ui-ktx:$nav_version"
}

不要忘记在 res 值样式 xml 中添加 noActionBar

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">


        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>


    </style>


  

Answer 2

如果您的应用使用导航抽屉，请使用下面的代码，如果您使用底部导航视图，则使用此答案

首先，您必须从 MainActivity 中删除工具栏，并且必须在每个片段 xml 中设置工具栏。如果在每个片段中设置工具栏，也可以实现折叠工具栏。从这里的文档，据说

但是，如果您的顶部应用栏在不同目的地之间发生了重大变化，那么请考虑从您的 Activity 中移除顶部应用栏并在每个目的地片段中定义它。

从 MainActivity 中删除工具栏。像这样设置你的 MainActivity xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <fragment
            android:id="@+id/nav_host_fragment"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:defaultNavHost="true"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:navGraph="@navigation/main_graph" />


    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_drawer_header"
        app:menu="@menu/nav_drawer_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

例如，我的应用程序将是这样的

它有 3 个顶级目的地：消息、聊天和分享

然后像这样设置你的 MainActivity

class MainActivity : AppCompatActivity() {

    lateinit var navController : NavController
    lateinit var appBarConfiguration: AppBarConfiguration


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

        appBarConfiguration = AppBarConfiguration(setOf(
            R.id.destination_share,
            R.id.destination_message, // set all your top level destinations in here
            R.id.destination_chat), // don't forget the parentheses
            drawer_layout // include your drawer_layout
        )


        navController = Navigation.findNavController(this,R.id.nav_host_fragment)

    }


    override fun onSupportNavigateUp(): Boolean {
        return NavigationUI.navigateUp(navController,appBarConfiguration)
    }

    
}

在每个顶级片段中，使用下面的代码设置它

class ChatFragment : Fragment() { // for Message and Share Fragment, will be the same

    lateinit var mActivity : FragmentActivity

    override fun onAttach(context: Context) {
        super.onAttach(context)

        activity?.let { mActivity = it }

    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_chat, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        setUpToolbar()
        
    }

    private fun setUpToolbar() {

        val mainActivity = mActivity as MainActivity
        val navigationView: NavigationView = mActivity.findViewById(R.id.navigation_view)

        mainActivity.setSupportActionBar(toolbar)
        val navController = NavHostFragment.findNavController(this)
        val appBarConfiguration = mainActivity.appBarConfiguration
        NavigationUI.setupActionBarWithNavController(mainActivity,navController,appBarConfiguration)
        NavigationUI.setupWithNavController(navigationView,navController)

    }


}

在子片段中，即如果你想在片段中显示后退按钮而不是汉堡按钮，那么使用与上面相同的代码，除了setToolbar方法会有所不同，像这样

private fun setUpToolbar() {

        val mainActivity = mActivity as MainActivity
        val navigationView: NavigationView = mActivity.findViewById(R.id.navigation_view)

        mainActivity.setSupportActionBar(toolbar)
        val navController = NavHostFragment.findNavController(this)
        NavigationUI.setupActionBarWithNavController(mainActivity,navController)
        NavigationUI.setupWithNavController(navigationView,navController)

    }

如果您的工具栏有菜单，则在setToolbar方法中添加此代码：

setHasOptionsMenu(true)

toolbar.setNavigationOnClickListener { view ->
    view.findNavController().navigateUp()
}

要使用AppBarConfigurationclass ，在 gradle app 中你需要使用navigation-ui-ktxartifact 并且你需要像这样添加编译选项和 kotlin 选项

android {
   

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = JavaVersion.VERSION_1_8.toString()
    }

}


dependencies {

    def nav_version = "2.3.0-alpha04"
    implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
    implementation "androidx.navigation:navigation-ui-ktx:$nav_version"
}

不要忘记在 res 值样式 xml 中添加 noActionBar

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">


        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>


    </style>