BottomAppBar并处理OnClickNavigation

问题描述

到目前为止,我正在尝试在我的Android应用程序中实现BottomAppBar。

MainActivity XML如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <fragment
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_weight="1"
        app:defaultNavHost="true"
        app:navGraph="@navigation/mobile_navigation" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:id="@+id/coordinator"
    android:layout_height="match_parent">
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@drawable/rpurple"
        android:backgroundTint="@color/reallyDarkPurple"
        style="@style/Widget.MaterialComponents.BottomAppBar.PrimarySurface"
        app:menu="@menu/bottom_nav_menu"
        app:tint = "@color/white"
        >
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageButton
                android:id="@+id/navigation_profile"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:src="@drawable/user"
                android:padding="5dp"
                app:tint  = "@color/lightPurple"
                android:scaleType="centerCrop"
                android:background="@android:color/transparent"
                android:adjustViewBounds="true"/>
            <ImageButton
                android:id="@+id/historyBtn"
                android:layout_width="60dp"
                android:padding="5dp"
                android:layout_marginEnd="10dp"
                android:layout_height="60dp"
                android:src="@drawable/clock"
                android:layout_alignParentEnd="true"
                app:tint  = "@color/lightPurple"
                android:scaleType="centerCrop"
                android:background="@android:color/transparent"
                android:adjustViewBounds="true"/>
        </RelativeLayout>


    </com.google.android.material.bottomappbar.BottomAppBar>
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:backgroundTint="@color/lightPurple"
        app:srcCompat="@drawable/addwhite"
        app:tint = "@color/white"
        app:borderWidth="0dp"
        android:adjustViewBounds="true"
        app:fabCustomSize="56dp"
        app:layout_anchor="@id/bottomAppBar"
        />

</androidx.coordinatorlayout.widget.CoordinatorLayout>
</RelativeLayout>

我已经在MainActivity中实现了以下代码

BottomAppBar bottomAppBar = findViewById(R.id.bottomAppBar);
bottomAppBar.replaceMenu(R.menu.bottom_nav_menu);
setSupportActionBar(bottomAppBar);

理想情况下,我想做的是使用BottomAppBar的ImageButtons R.id.navigation_profileR.id.historyBtn在4个单独的片段A,B,C,D之间导航。要求的关键部分是按钮位于屏幕的相对两侧。关于如何处理每个imageButton的OnClick,然后进行后续片段转换的任何帮助?

enter image description here

解决方法

据我了解,您想将一个包含4个片段的导航添加到bottomAppBar。您可以通过删除BottomAppBar中的相对布局来做到这一点 并将其作为一个项目包含在这样的菜单中

首先将其添加到依赖项

  implementation 'androidx.coordinatorlayout:coordinatorlayout:1.1.0'
  implementation 'com.google.android.material:material:1.2.1'

您的主要活动

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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"
tools:context=".MainActivity"
>
<FrameLayout
    android:id="@+id/hostFragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:backgroundTint="#009FFF"

    app:layout_anchor="@id/bottomAppBar"
    app:maxImageSize="35dp"/>

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:fabAlignmentMode="center"
    android:backgroundTint="#3498DB"
    app:fabCradleVerticalOffset="10dp"
    app:fabCradleMargin="8dp"
    app:hideOnScroll="true"
    app:fabCradleRoundedCornerRadius="20dp"
    app:menu="@menu/menu"
    style="@style/Widget.MaterialComponents.BottomAppBar"
    android:theme="@style/AppThemeMaterial"
    >

</com.google.android.material.bottomappbar.BottomAppBar>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

并且菜单文件应该看起来像这样

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<item
    android:id="@+id/menu_home"
    android:title="Home"
    app:showAsAction="always" />
<item
    android:id="@+id/menu_message"
    android:title="Message"
    app:showAsAction="always" />

 </menu>

将此添加到样式文件

  <style name="AppThemeMaterial" 
     parent="Theme.MaterialComponents.Light.DarkActionBar">
     <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

u可以这样处理botoom上的项目

 BottomAppBar bottomAppBar=findViewById(R.id.bottomAppBar) ;
 bottomAppBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            Fragment itemSelected = null ;
            switch (item.getItemId()){
                case R.id.menu_home:
                    itemSelected=new Home();
                    break;
                case R.id.menu_message:
                    itemSelected=new Message();
                    break;
                
            }   getSupportFragmentManager().beginTransaction().replace(R.id.hostFragment,itemSelected).commit();
            return true;
        }

,您可以使用它来决定打开活动时显示的片段 放入onCreate

getSupportFragmentManager().beginTransaction().replace(R.id.hostFragment,new Home()).commit();

希望这个回答您的问题