[英]Using Android Jetpack Navigation component with Android BottomAppBar
I am trying to implement Jetpack Navigation with the new Android Bottom App Bar in my main activity but it is not working as it should be. 我正在尝试使用新的Android Bottom App Bar在我的主要活动中实现Jetpack导航,但它不能正常工作。
I've read the notes on navigation and doesn't seem to find any way to integrate navigation jetpack into the new bottom app bar. 我已经阅读了有关导航的说明,似乎没有找到任何方法将导航喷气背包集成到新的底部应用栏中。 I've tried to do it my way as follows:
我试着按照以下方式做到:
I am using an Activity with 4 fragments inside to navigate within the Bottom App Bar's Navigation Drawer. 我正在使用一个包含4个片段的Activity来在Bottom App Bar的导航抽屉中导航。
The expected output should be when i click on this: 当我点击这个时,预期的输出应该是:
it should open a drawer like this: 它应该像这样打开一个抽屉:
Bottom Drawer Navigation 底部抽屉导航
And i should be able to navigate between fragments. 我应该能够在片段之间导航。
However, when i use the following codes below 但是,当我使用以下代码时
activity_home.xml 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>
The Navigation File is: 导航文件是:
bottomappbar_navigation.xml 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 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 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>
Then inside my ActivityHome.kt: 然后在我的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
}
}
What happens is that the menu icon disappears on the Bottom App Bar as show here: 会发生什么是底部应用栏上的菜单图标消失,如下所示:
I think i am not using the Jetpack Navigation correctly. 我想我没有正确使用Jetpack导航。
Can you please help by giving a link or some code on how to make this work? 您可以通过提供有关如何使其工作的链接或代码来帮助您吗?
Change your activity and layout as below 如下所示更改您的活动和布局
MainActivity 主要活动
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 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.