BottomAppBar 和处理 OnClickNavigation

Question

我正在尝试在我的 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_profile & R.id.historyBtn 在 4 个单独的片段 A、B、C、D 之间导航，要求的一个关键部分是按钮位于屏幕的两侧。

我如何处理每个 imageButton 的 OnClick 以及随后的片段转换？

Answer 1

据我了解，您想向 bottomAppBar 添加一个具有 4 个片段的导航。您可以通过删除 BottomAppBar 中的相对布局来完成并将它作为一个项目包含在这样的菜单中

首先将其添加到依赖项中

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

你的主要Activity

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

你可以这样处理底部的项目

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

您可以使用它来决定打开 activity 时显示的片段输入 onCreate

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

Answer 2

在 Kotlin 中我们也可以这样做

     private lateinit var bottomNavigationView: BottomNavigationView

     bottomNavigationView = binding.bottomNavView!!

     bottomNavigationView.setOnItemReselectedListener {
        when (it.itemId) {
            R.id.navigation_play-> startGame()
        }
    }

这将为您提供结果，但需要点击两次...

有点不同的是（点击一下）

        bottomNavigationView.setOnItemSelectedListener { item ->
           when (item.itemId) {
            R.id.navigation_play-> startGame()
        }
        true
    }

BottomAppBar 和处理 OnClickNavigation

BottomAppBar and handle OnClickNavigation

android

android-bottomappbar