Question

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

在我的应用中。我想设置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)

我已经尝试过，但是结果有点奇怪。这就是我所做的。

我从fragmentX（具有绿色的工具栏）---->导航至fragmentY（具有红色的工具栏）。我将红色工具栏设置在fragmentY布局上（而不是在主活动布局中）

在导航到fragmentY之前，在我的主要活动中，将green_toolbar的可见性设置为GONE。我在主要活动中为onDestinationChanged设置了可见性。因此，fragmenyX中的红色工具栏将会显示。

但是结果有点奇怪，不平滑。因为当我从fragmentY导航到fragmentX时，红色的工具栏会在fragmentX中显示一段时间，并且会位于绿色的工具栏下方

这是视频，如您所见，红色工具栏将在绿色工具栏下方消失之前出现：

https://drive.google.com/file/d/1UXbOtxmeoMabsJ-MXVHQzneEkqGYquYA/view

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

我必须在主要活动中制作这两个不同的工具栏吗？还是我必须将fragmentY目标（具有红色工具栏）设置为另一个活动，而不是将其设置为fragment？

或者....我不知道....请帮助：）

Answer 1

以下答案适用于使用底部导航视图的应用程序，如果您使用的是导航抽屉，则使用this anwer

因此根据here的文档，我需要在每个片段中设置工具栏。

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

因此，我们将在每个片段中添加工具栏，而不是在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()
}

要使用AppBarConfiguration类，在gradle应用中，您需要使用navigation-ui-ktx工件，并且需要添加编译选项和像这样的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

如果您的应用程序使用导航抽屉，则使用以下代码；如果使用底部导航视图，则使用this answer

首先，您必须从MainActivity中删除工具栏，并且必须在每个片段xml中设置工具栏。如果您在每个片段中都设置了工具栏，则也可以实现折叠工具栏。从here的文档中得知，

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

从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()
}

要使用AppBarConfiguration类，在gradle应用中，您需要使用navigation-ui-ktx工件，并且需要添加编译选项和像这样的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 3

我终于找到了解决方案。我不知道这是不是正确的方法，但是到目前为止，在我的项目中看起来还很完美。

1。第一步，您只需要为工具栏创建xml ，例如：

toolbar_red.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
                                             android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="#F44336"
            android:theme="?attr/actionBarTheme"
            android:minHeight="?attr/actionBarSize"
            android:id="@+id/toolbarRed"
            app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

</android.support.constraint.ConstraintLayout>

和toolbar_blue.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
                                             android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="#2196F3"
            android:theme="?attr/actionBarTheme"
            android:minHeight="?attr/actionBarSize"
            android:id="@+id/toolbarBlue"
            app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
</android.support.constraint.ConstraintLayout>

2。然后将该工具栏包含在导航主机中（主要活动），那么activity_main.xml将像这样。默认情况下，红色的工具栏可见性可见，而蓝色的可见性消失了。

<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">


    <include
            android:id="@+id/include_toolbarRed"
            layout="@layout/toolbar_red"
            android:visibility="visible"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" android:layout_width="0dp"
            android:layout_height="wrap_content"/>

    <include
            android:id="@+id/include_toolbarBlue"
            layout="@layout/toolbar_blue"
            android:visibility="gone"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" android:layout_width="0dp"
            android:layout_height="wrap_content"/>


   (other elements here)


</android.support.constraint.ConstraintLayout>

3。设置当触发NavController OnDestinationChangedListener时包含工具栏的可见性

因此，基本上，您将更改导航主机（主要活动）中的工具栏，而不是目的地（片段）中的工具

无论目的地何时更改，然后设置包含工具栏的可见性。我的MainActivity.kt文件将是这样

class MainActivity : AppCompatActivity(), NavController.OnDestinationChangedListener {

    lateinit var navController : NavController
    lateinit var redToolbar: Toolbar
    lateinit var blueToolbar: Toolbar

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

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

        redToolbar = findViewById<ConstraintLayout>(R.id.include_toolbarRed).findViewById(R.id.toolbarRed)
        blueToolbar = findViewById<ConstraintLayout>(R.id.include_toolbarBlue).findViewById(R.id.toolbarBlue)


        setupActionBar()
        setupBottomNavMenu()


        // Add Listeners
        navController.addOnDestinationChangedListener(this)


    }

    private fun setupBottomNavMenu() {
        bottom_nav.setupWithNavController(navController)
    }


    private fun setupActionBar() {

        // set destination_home and destination_camera as the top hierarcy destination (destination for tab bar in bottom navigation view)
        val appBarConfiguration = AppBarConfiguration(setOf(R.id.destination_home, R.id.destination_camera))

        if (include_toolbarRed.visibility == View.VISIBLE) {
            setSupportActionBar(redToolbar)
            redToolbar.setupWithNavController(navController,appBarConfiguration)

        } else if (include_toolbarBlue.visibility == View.VISIBLE) {
            setSupportActionBar(blueToolbar)
            blueToolbar.setupWithNavController(navController,appBarConfiguration)
        }



    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return item.onNavDestinationSelected(navController) || super.onOptionsItemSelected(item)
    }



    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.menu_toolbar, menu)
        return true
    }

    override fun onDestinationChanged(controller: NavController, destination: NavDestination, arguments: Bundle?) {


        if (destination.id == R.id.destination_camera) {
            include_toolbarRed.visibility = View.GONE
            include_toolbarBlue.visibility = View.VISIBLE

        } else {

            include_toolbarRed.visibility = View.VISIBLE
            include_toolbarBlue.visibility = View.GONE
        }

        setupActionBar()


    }
}

Answer 4

将MainActivity布局仅留在导航片段中，并在片段布局中定义所需的工具栏会更方便。然后在每个片段onCreateView中：

(activity as AppCompatActivity).setSupportActionBar(toolbar)

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

有关更好的示例，请参见Google如何在Android-Sunflower应用中完成此操作： https://github.com/googlesamples/android-sunflower

Answer 5

您必须在每个片段上设置单独的工具栏，但这有点令人困惑。我用图书馆来解决这个问题。

以相同的方式使用导航组件。对于每个片段，都要这样做。

在布局中创建工具栏

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <Button
            android:id="@+id/btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="20dp"
            android:background="?colorPrimary"
            android:text="Next fragment"
            android:textColor="?android:textColorSecondary" />

    </FrameLayout>

</LinearLayout>

并在片段中使用'setupToolbar'方法

class FirstFragment : Fragment(R.layout.fragment_first) {

    ...

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

    ...

}

并且不要忘记在依赖项上实现lib，但是请注意，该lib不在发布版本，并且可能会更改。

repositories {
    ...
    maven { url 'https://jitpack.io' }
}

dependencies {
    implementation 'com.github.AlexanderGuru:MultipleToolbars:0.0.1-SNAPSHOT'
}

详细信息：https://github.com/AlexanderGuru/MultipleToolbars

如何使用导航控制器组件设置其他工具栏？

5 个答案: