标签: android-bottomappbar

我正在尝试实现通常如下所示的新BottomAppBar：将 BottomAppBar用作BottomNavigationView，就像在Google home应用中这样。

我的问题是，因为我只能用菜单资源填充BottomAppBar，所以我不明白如何将按钮对齐以使其看起来像BottomNavigationView（但Fab按钮带有“ cut”），而不是将所有内容都对齐到一侧BottomAppBar的

如何在此新的Material BottomAppBar中添加自定义布局？

或者，是否可以通过Fab按钮的“ cut”实现BottomNavigationView（保留酷炫的默认动画，如新的BottomAppBar）？

我想使用FloatingActionButton以及锚定在BottomNavigationView顶部的BottomAppBar上时的行为。

我想出了一个相当“ hacky”的技巧，将其BottomNavigationView放置在BottomAppBar的顶部而不提供背景，从而使其透明。

乍一看，这似乎很好用，但是我发现只有在触摸按钮的上半部分时才能单击fab按钮（因此BottomNavigationView顶部没有透明的地方）。

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_gravity="bottom"
        app:layout_constraintBottom_toBottomOf="parent">

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:focusable="true"
            app:layout_anchor="@id/bar" />

        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bar"
            android:layout_width="match_parent"
            android:layout_height="58dp"
            android:layout_gravity="bottom"
            android:backgroundTint="@color/colorPrimaryDark" />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:itemIconTint="@android:color/darker_gray"
            app:itemTextColor="@android:color/white"
            app:labelVisibilityMode="labeled"
            app:menu="@menu/navigation" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

有什么办法可以实现我完全可以点击的想法FloatingActionButton？

我正在使用BottomAppBar来自谷歌的这样的：

 <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/vNavigationBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

自定义底栏是平的，我需要在底栏上添加圆角（图像示例如下）

我该怎么做才能以这种方式工作？

我BottomAppBar在我的应用程序中使用，但它有一个额外的左填充。如何删除这个填充？我的 xml 代码是：

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:backgroundTint="@color/spark_secondary_color"
        >

        <LinearLayout
            android:id="@+id/bottom_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:background="@color/white"
            android:orientation="horizontal"
            >

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@android:drawable/ic_menu_search"
                    android:background="?attr/selectableItemBackground"
                    />
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center">

                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@android:drawable/ic_menu_send"
                    android:background="?attr/selectableItemBackground"
                    />

            </LinearLayout>

        </LinearLayout>

    </com.google.android.material.bottomappbar.BottomAppBar>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

结果是：

在图片中我想做什么。

我有两个menu.xml文件。如何在顶部应用程序栏添加第一个菜单，在底部应用程序栏添加第二个菜单？我可以在一个活动中执行此操作，还是应该使用顶部应用程序栏+底部应用程序栏创建片段？谢谢。

如何为 fab + 底部应用栏使用菱形样式？在网站https://material.io/tools/theme-editor/上的草图文件中有这样的样式 fab：

查看所有可能的样式和标签...

我有一个带有 navGraph 的活动和一个带有 2 个菜单项的底部导航栏。我的问题是我的底部导航栏到处出现，detailFragment、aboutFragment、signInFragment等等。

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

        val appBarConfiguration = AppBarConfiguration.Builder(
            R.id.contactsFragment,
            R.id.profileFragment
        ).build()

        NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration)

        val navView: BottomNavigationView = findViewById(R.id.nav_view)
        NavigationUI.setupWithNavController(navView, navController)

我如何限制它只显示在我的菜单项上的 2 个片段上？

这就是我解决它的方法

    navController.addOnDestinationChangedListener{ _, nd: NavDestination, _->
        if(nd.id == R.id.contactsFragment || nd.id == R.id.profileFragment){
            navView.visibility = View.VISIBLE
        }else{
            navView.visibility = View.GONE
        }

我想使用 CoordinatorLayout 在屏幕底部包含一个 BottomAppBar，并在剩余空间中显示一些内容（例如使用 ConstraintLayout）。

如果我向 CoordinatorLayout 添加一个 ConstraintLayout，然后我添加一个放置在 ConstraintLayout 底部的按钮，则该按钮被 BottomAppBar 覆盖。

我希望 ConstraintLayout 用完所有垂直空间，除了 BottomAppBar 所在的位置，这样按钮就不会被覆盖。

我尝试在 ConstraintLayout 中包含 app:layout_behavior="@string/appbar_scrolling_view_behavior"，正如某些网站所建议的那样，但它不起作用。另外，在BottomAppBar 中设置app:layout_insetEdge="bottom"，然后在ConstraintLayout 中设置app:layout_dodgeInsetEdges="bottom" 也不能正常工作，因为ConstraintLayout 然后在屏幕顶部溢出（但底部没有被覆盖）不再）。

下面是 xml 布局文件，其中BottomAppBar 覆盖了按钮。谢谢

    <?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:id="@+id/coordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="top"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <Button
        android:id="@+id/myButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom" />    
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

这是我的设计师为我们的项目制作的导航。底部导航的高度为70dp。

到目前为止我已经尝试过的。

首先，我从设计中下载了一个矢量可绘制背景并将其设置为 BottomNavigationView 的背景

<com.google.android.material.bottomnavigation.BottomNavigationView
                android:layout_gravity="bottom"
                app:labelVisibilityMode="labeled"
                app:itemIconTint="@drawable/bnv_tab_item_foreground"
                app:itemTextColor="@drawable/bnv_tab_item_foreground"
                android:id="@+id/bottom_nav"
                android:layout_width="match_parent"
                android:layout_height="70dp"
                app:menu="@menu/menu_bottom_main"
                android:background="@drawable/background_bottom_navigation"/>

结果

正如您所看到的，曲线不如设计中的那么好。由于不同的 Android 屏幕尺寸，这种方法永远不会起作用。

我的第二次尝试是基于 Phillip Lackner 的教程 https://www.youtube.com/watch?v=x6-_va1R788&t=830s

我将 BottomNavigationView 放在 BottomAppBar 内。然后我创建了 FloatingActionButton 并将其layout_anchor属性设置为BottomAppBar

<com.google.android.material.bottomappbar.BottomAppBar
                app:fabCradleRoundedCornerRadius="20dp"
                android:backgroundTint="@color/blue_menu2"
                android:id="@+id/bottom_app_bar"
                android:layout_gravity="bottom"
                android:layout_width="match_parent"
                android:layout_height="56dp">
                <com.google.android.material.bottomnavigation.BottomNavigationView
                    app:labelVisibilityMode="labeled"
                    app:itemIconTint="@drawable/bnv_tab_item_foreground"
                    app:itemTextColor="@drawable/bnv_tab_item_foreground"
                    android:id="@+id/bottom_nav"
                    app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"
                    android:layout_marginEnd="16dp"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@android:color/transparent"
                    app:menu="@menu/menu_bottom_main" />
            </com.google.android.material.bottomappbar.BottomAppBar>

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:scaleType="center"
                app:maxImageSize = "56dp"
                android:id="@+id/home_floating_button"
                app:layout_anchor="@id/bottom_app_bar"
                android:layout_width="56dp"
                android:layout_height="80dp">
            </com.google.android.material.floatingactionbutton.FloatingActionButton>

结果

正如你所看到的，曲线不够“深”。BottomAppBar 有属性 fabCradleVerticalOffset 但不幸的是你不能输入负值。

是否可以使用贝塞尔曲线尝试在底部导航中绘制自定义形状。我还没有尝试过。我不确定它是否适用于这个特定的底部导航设计。https://proandroiddev.com/how-i-drew-custom-shapes-in-bottom-bar-c4539d86afd7

如何创建这个弯曲的底部导航？

我想要实现的就像这个图像(虽然没有顶部NavigationView)但Toolbar菜单+ BottomAppBar菜单+ BottomNavigationDrawerFragment完全像材料设计:

我可以BottomAppBar通过replace()(我的答案)管理菜单:

val bottomBar = findViewById<BottomAppBar>(R.id.bottomAppBar)
bottomBar.replaceMenu(R.menu.menu_main)

这让我膨胀的菜单为BottomAppBar以下代码加使用onCreateOptionsMenu()的Toolbar菜单和setSupportActionBar():

val toolbar = findViewById<Toolbar>(R.id.myToolbar)
setSupportActionBar(toolbar)

问题的关键是,在该教程(例如)时,他使用setSupportActionBar(bottom_app_bar)用于设置SupportActionBar在BottomAppBar.所以,如果我们使用setSupportActionBar(bottom_app_bar)了BottomAppBar,它会显示BottomNavigationDrawerFragment+菜单是在底侧handlable.

但是,Toolbar菜单怎么样？ Toolbar如果我们使用,+菜单项将无法处理或显示setSupportActionBar(bottomAppbar).

我测试的东西是:

• 可能听起来有些可笑,但用了两个setSupportActionBar()两个Toolbar和BottomAppBar
• 甚至尝试通过onCreateOptionsMenu()方法膨胀两个菜单但没有工作.

问题是,我们如何才能将Top ToolbarMenu + BottomAppBarMenu …