Android 如何将新材质BottomAppBar实现为BottomNavigationView

我试图实现新的BottomAppBar，它通常如下所示： 就像Google home应用程序中的BottomNavigationView一样

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

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

如何在这个新的材质栏中添加自定义布局

---

或者，有没有办法实现一个BottomNavigationView，并为Fab按钮“剪切”（保留酷炫的默认动画，如新的BottomAppBar）？

1-在

build.gradle

allprojects {
    repositories {
        jcenter()
        maven {
            url "https://maven.google.com"
        }
    }
}

2-将材质组件依赖项放在您的

build.gradle中。

请记住材质版本正在定期更新

implementation 'com.google.android.material:material:1.0.0-alpha1'

3-将compileSdkVersion和targetSdkVersion设置为针对Android p的最新API版本，即28

4-确保你的应用程序继承了

主题。MaterialComponents

主题，以使

BottomAppBar

使用最新样式。或者，您可以在布局xml文件中的小部件声明中声明

BottomAppBar

的样式，如下所示

style=”@style/Widget.MaterialComponents.BottomAppBar”

5-您可以在布局中包括BottomAppBar，如下所示。BottomAppBar必须是CoordinatorLayout的子级

<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:backgroundTint="@color/colorPrimary"
app:fabAlignmentMode="center"
app:fabAttached="true"
app:navigationIcon="@drawable/baseline_menu_white_24"/>

6-通过在FAB的app:layout\u锚定属性中指定BottomAppBar的id，可以将浮动操作按钮（FAB）锚定到BottomAppBar。BottomAppBar可以用一个成形的背景支撑晶圆厂，或者晶圆厂可以重叠BottomAppBar

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

7-有许多属性可用于配置底部导航栏和晶圆厂图标

8-

---

---

更新：检查

已解决

基本上，我没有尝试将菜单资源强制到我需要的布局，而是使用了这个解决方案，我只是在底部AppBar中使用@dglozano建议的“空”元素放置了一个LinearLayout

使用

？attr/selectableitembackgroundless

我还能够实现与BottomNavigationView非常相似的效果

---

将bottomAppBar放置在透明背景的bottomNavigationView下方。并将空菜单项添加到menu.xml，以释放晶圆厂的空间

XML:

---

实现android材质组件的团队表示，该设计不属于规范的一部分，但他们慷慨地提供了一个简单的解决方案，可以在下面的链接中看到


基本上，需要更改菜单按钮容器的布局参数：

if(bottomAppBar.childCount > 0) {
     val actionMenuView = bottomAppBar.getChildAt(0) as androidx.appcompat.widget.ActionMenuView
     actionMenuView.layoutParams.width = androidx.appcompat.widget.ActionMenuView.LayoutParams.MATCH_PARENT   
}

将它与您的void菜单项相结合，可以避免使用另一个android组件。
这可能有助于实现上述设计。添加空菜单项以调整fab按钮和空间

<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/gray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


     <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottom_bar"
            style="@style/AppTheme.BottomAppBar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:layout_gravity="bottom"
            android:backgroundTint="@color/bottom_bar">

        <com.google.android.material.bottomnavigation.BottomNavigationView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                app:itemIconTint="@color/white"
                app:labelVisibilityMode="unlabeled"
                app:menu="@menu/bottom_menu">

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


    <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/bottom_bar"
            android:src="@drawable/ic_plus"
            android:visibility="visible"
            app:borderWidth="0dp"
            app:fabAlignmentMode="end"
            app:fabCradleMargin="20dp"
            app:fabSize="normal"
            app:layout_anchor="@id/bottom_bar"
            app:maxImageSize="38dp"
            app:tint="@color/white">

    </com.google.android.material.floatingactionbutton.FloatingActionButton>

这应该适合您

结果



到目前为止你有什么？我正在重新设计一个旧应用程序，到目前为止，我有一个带有fab按钮和菜单的一些按钮（来自旧版本的应用程序）的工作底部应用程序栏。从以前的AppBar切换到新的AppBar非常容易，但是现在我一直在尝试改变它里面的布局基本上你想让你的底部AppBar看起来像Google home app？没错。起初，我想制作一个与fab按钮交互的自定义BottomNavigationView，但我想在BottomAppBar中展开自定义布局要容易得多，因为它已经处理了不同的行为和动画谢谢您的回复，不幸的是，我已经遵循了同样的中等职位，我已经有一个工作的底部AppBar。我的问题是，如果我用这种方式放置更多的菜单按钮，它们会对齐到末尾或开始，但我需要的是BottomNavigationView样式，按钮平均分布在条的长度上（避免与fab按钮重叠），正如我所预期的那样，添加空元素的想法并不坏，但它们仍然在最后对齐（即使我在中间对齐它们，在不同的显示尺寸上也不好看。下面是结果i.stack.imgur.com/m1kAS。jpg@Berenluth你能上传你的XML布局文件吗？我认为禁用sifthing模式会很麻烦，因为使用“paddingEnd”设置为16dp？（在LinearLayout内部）老实说，我以前不记得了，但我认为这是因为当您在AppBar中手动插入布局时，布局从一开始就被放置在8dp，通过设置width=“match\u parent”布局在视图外是8dp。通过设置paddingand=“8dp”布局与视图的末端对齐，通过将其设置为16dp，实际上使其与另一侧对称。@默认情况下，底部应用程序栏的Hatzil设置了一些填充
contentInsetStart
，因此您可以将其设置为零，也可以为
contentInsetEnd
设置类似的值
<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/gray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


     <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottom_bar"
            style="@style/AppTheme.BottomAppBar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:layout_gravity="bottom"
            android:backgroundTint="@color/bottom_bar">

        <com.google.android.material.bottomnavigation.BottomNavigationView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                app:itemIconTint="@color/white"
                app:labelVisibilityMode="unlabeled"
                app:menu="@menu/bottom_menu">

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


    <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/bottom_bar"
            android:src="@drawable/ic_plus"
            android:visibility="visible"
            app:borderWidth="0dp"
            app:fabAlignmentMode="end"
            app:fabCradleMargin="20dp"
            app:fabSize="normal"
            app:layout_anchor="@id/bottom_bar"
            app:maxImageSize="38dp"
            app:tint="@color/white">

    </com.google.android.material.floatingactionbutton.FloatingActionButton>

 <androidx.coordinatorlayout.widget.CoordinatorLayout 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"
        android:paddingTop="?attr/actionBarSize">
    
        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottom_bar"
            style="@style/Widget.MaterialComponents.BottomAppBar"
            android:layout_width="match_parent"
            android:layout_gravity="bottom"
            android:layout_height="wrap_content" >
    
            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
    
                <com.google.android.material.bottomnavigation.BottomNavigationView
                    android:id="@+id/nav_view"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center_horizontal"
                    android:layout_margin="0dp"
                    android:background="@drawable/transparent"
                    android:padding="0dp"
                    app:menu="@menu/bottom_nav_menu" />
            </FrameLayout>
    
    
        </com.google.android.material.bottomappbar.BottomAppBar>
    
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_anchor="@id/bottom_bar"/>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>