使用Android Jetpack導航組件與Android BottomAppBar

Question

我正在嘗試使用新的Android Bottom App Bar在我的主要活動中實現Jetpack導航，但它不能正常工作。

我已經閱讀了有關導航的說明，似乎沒有找到任何方法將導航噴氣背包集成到新的底部應用欄中。 我試着按照以下方式做到：

我正在使用一個包含4個片段的Activity來在Bottom App Bar的導航抽屜中導航。

當我點擊這個時，預期的輸出應該是：

菜單圖標

它應該像這樣打開一個抽屜：

底部抽屜導航

我應該能夠在片段之間導航。

但是，當我使用以下代碼時

activity_home.xml

<layout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">

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

        <fragment
                android:id="@+id/myNavHostFragment"
                android:name="androidx.navigation.fragment.NavHostFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:defaultNavHost="true"
                app:navGraph="@navigation/bottomappbar_navigation" />

        <androidx.coordinatorlayout.widget.CoordinatorLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            <com.google.android.material.bottomappbar.BottomAppBar
                    android:id="@+id/bottom_app_bar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    app:fabAlignmentMode="center"
                    app:navigationIcon="@drawable/ic_menu_dark"
                    app:menu="@menu/bottomappbar_main_menu"/>


            <com.google.android.material.floatingactionbutton.FloatingActionButton
                    android:id="@+id/fab"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_add_black"
                    android:backgroundTint="@color/colorAccent"
                    app:layout_anchor="@id/bottom_app_bar"/>

        </androidx.coordinatorlayout.widget.CoordinatorLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

導航文件是：

bottomappbar_navigation.xml

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/bottomappbar_navigation" app:startDestination="@id/fragmentGoals">

    <fragment
            android:id="@+id/fragmentGoals"
            android:name="com.th3pl4gu3.lifestyle.ui.FragmentGoals"
            android:label="FragmentGoals"/>

    <fragment
            android:id="@+id/fragmentToDo" 
            android:name="com.th3pl4gu3.lifestyle.ui.FragmentToDo"
            android:label="FragmentToDo"/>
    <fragment
            android:id="@+id/fragmentToBuy" 
            android:name="com.th3pl4gu3.lifestyle.ui.FragmentToBuy"
            android:label="FragmentToBuy"/>
    <fragment
            android:id="@+id/fragmentStatistics" 
            android:name="com.th3pl4gu3.lifestyle.ui.FragmentStatistics"
            android:label="FragmentStatistics"/>
</navigation>

bottomappbar_drawer_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <group android:checkableBehavior="single">
        <item
                android:id="@+id/fragmentGoals"
                android:icon="@drawable/ic_add_black"
                android:title="Goals"/>

        <item
                android:id="@+id/fragmentToDo"
                android:icon="@drawable/ic_add_black"
                android:title="To Do"/>

        <item
                android:id="@+id/fragmentToBuy"
                android:icon="@drawable/ic_add_black"
                android:title="To Buy"/>

        <item
                android:id="@+id/fragmentStatistics"
                android:icon="@drawable/ic_add_black"
                android:title="Statistics"/>
    </group>
</menu>

bottomappbar_main_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">

    <item android:id="@+id/search"
          android:title="Search"
          android:icon="@drawable/ic_search_black"
          app:showAsAction="always"
          android:tooltipText="Search" />

</menu>

然后在我的ActivityHome.kt中：

class ActivityHome : AppCompatActivity() {

    private lateinit var mBinding: ActivityHomeBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        mBinding = DataBindingUtil.setContentView(this, R.layout.activity_home)

        setSupportActionBar(mBinding.bottomAppBar)

        val navController = Navigation.findNavController(this, R.id.myNavHostFragment)

        mBinding.bottomAppBar.setupWithNavController(navController)

        mBinding.bottomAppBar.setOnMenuItemClickListener {  menuItem ->
            menuItem.onNavDestinationSelected(navController)
        }
    }

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        val inflater = menuInflater
        inflater.inflate(R.menu.bottomappbar_main_menu, menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem?): Boolean {
        when(item?.itemId){
            R.id.search -> {Toast.makeText(this, "Search clicked!", Toast.LENGTH_SHORT).show()}
        }

        return true
    }

}

會發生什么是底部應用欄上的菜單圖標消失，如下所示：

產量

我想我沒有正確使用Jetpack導航。

您可以通過提供有關如何使其工作的鏈接或代碼來幫助您嗎？

Answer 1

如下所示更改您的活動和布局

主要活動

class MainActivity : AppCompatActivity() {
   private lateinit var mBinding: ActivityHomeBinding

   override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      mBinding = DataBindingUtil.setContentView(this, R.layout.activity_home)

      val navController = Navigation.findNavController(this, R.id.navFragment)
      mBinding.navigationView.setupWithNavController(navController)

      setSupportActionBar(mBinding.bottomAppBar)

      if (mBinding.navigationView.isShown) {
          mBinding.navigationView.visibility = View.VISIBLE
      } else {
          mBinding.navigationView.visibility = View.GONE
      }

  }

  override fun onCreateOptionsMenu(menu: Menu?): Boolean {
      val inflater = menuInflater
      inflater.inflate(R.menu.bottomappbar_main_menu, menu)
      return true
  }

  override fun onOptionsItemSelected(item: MenuItem?): Boolean {
      when(item?.itemId){
          android.R.id.home -> {
              Log.e("TAG", "Visbility>>>> ${mBinding.navigationView.isShown}")
              if (!mBinding.navigationView.isShown) {
                  mBinding.navigationView.visibility = View.VISIBLE
              } else {
                  mBinding.navigationView.visibility = View.GONE
              }
          }
          R.id.search -> {
              Toast.makeText(this, "Search clicked!", Toast.LENGTH_SHORT).show()
          }
      }

      return true
  }

}

activity_home.xml

<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <fragment
                    android:id="@+id/navFragment"
                    android:name="androidx.navigation.fragment.NavHostFragment"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:defaultNavHost="true"
                    app:navGraph="@navigation/nav_graph"
                    android:layout_marginBottom="60dp"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>


        <com.google.android.material.bottomappbar.BottomAppBar
                android:id="@+id/bottom_app_bar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                app:fabAlignmentMode="center"
                style="@style/Widget.MaterialComponents.BottomAppBar"
                app:menu="@menu/bottomappbar_main_menu"
                android:backgroundTint="@color/colorPrimaryDark"
                app:navigationIcon="@drawable/ic_menu_dark"/>


        <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_add_black"
                android:backgroundTint="@color/colorAccent"
                app:layout_anchor="@id/bottom_app_bar"/>

        <com.google.android.material.navigation.NavigationView
                android:id="@+id/navigation_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_anchor="@id/bottom_app_bar"
                android:background="@android:color/white"
                android:layout_gravity="start"
                app:menu="@menu/bottomappbar_drawer_menu"/>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>


</RelativeLayout>