如何使用导航控制器组件设置不同的工具栏? [英] how to setup different toolbar using navigation controller component?

问题描述

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

I am actually not sure, how the correct way or the best practice to set different toolbar using navigation controller component

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

in my app. I want to set 2 different toolbars.

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

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

two toolbars with different colour. this is just to simplify the case, actually I have multiple toolbars

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

I am using navigation controller component. and currently on my Main Activity as the host, I set the green toolbar in my main activity using this code

        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)

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

so what is the best way to set different toolbar using navigation controller component ?

我必须在主要活动中制作这两个不同的工具栏吗?还是我必须将fragmentY目的地(具有红色工具栏)设置为另一个活动，而不是将其设置为片段?

do I have to make those 2 different toolbars in my main activity? or do I have to set fragmentY destination(that has red toolbar) as another activity not as the fragment ?

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

or.... I don't know....please help :)

推荐答案

为此，我添加了一个更好的答案.因此，根据此处的文档，我需要在每个工具栏中设置工具栏片段.

I add a better answer for this. so according the documentation from here , I need to set the toolbar in each fragment.

但是，如果您的顶部应用栏在整个 目的地，然后考虑从您的顶部删除顶部的应用程序栏 活动，并在每个目标片段中对其进行定义.

If, however, your top app bar changes substantially across destinations, then consider removing the top app bar from your activity and defining it in each destination fragment, instead.

因此，我们将在每个片段中添加工具栏，而不是在MainActivity中进行设置.如果您在每个片段中都设置了工具栏，则也可以实现折叠工具栏.

so we will add the toolbar in each fragment instead of set it in MainActivity. if you set toolbar in each fragment, it also will make it possible to implement Collapsing Toolbar.

我假设您还使用了底部导航视图.例如，在您的底部导航菜单中，您将主页，个人资料和搜索片段作为顶级片段(根).

I assume you also use Bottom Navigation View. say for example in your bottom navigation menu you have home, profile and search fragments as top level fragment (root).

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

so in EACH top level fragment set the toolbar using this code in onViewCreated of your fragment.

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，而不仅是在您的家庭中通过.

you have to pass appBarConfiguration to remove back button in your toolbar. so you have to pass appBarConfiguration in each top level fragment (home,search,profile), not only in your home.

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

and for the rest of the fragments you don't need to pass appBarConfiguration, so for the rest of your fragments just pass this code in onViewCreated .

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

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

and if your toolbar has menu, then add this code:

setHasOptionsMenu(true)

(activity as AppCompatActivity).setSupportActionBar(toolbar)

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

要使用AppBarConfiguration类，在gradle应用中，您需要使用navigation-ui-ktx工件，并且需要添加诸如此类的编译选项和kotlin选项

to use AppBarConfiguration class , in gradle app you need to use navigation-ui-ktx artifact and you need to add compile options and kotlin options like this

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

don't forget to add noActionBar in your res value style xml

 <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>

这篇关于如何使用导航控制器组件设置不同的工具栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！