如何将新材质BottomAppBar实现为BottomNavigationView答案

【问题标题】：How to implement new material BottomAppBar as BottomNavigationView如何将新材质BottomAppBar实现为BottomNavigationView
【发布时间】：2019-05-09 23:13:48
【问题描述】：

我试图实现通常如下所示的新 BottomAppBar： material BottomAppBar 作为一个 BottomNavigationView，就像在 Google Home 应用中一样，看起来像 this。

我的问题是，由于我只能使用菜单资源填充 BottomAppBar，因此我无法理解如何对齐按钮以使其看起来像 BottomNavigationView（但使用 Fab 按钮的“剪切”）而不是对齐所有内容到 BottomAppBar 的一侧。

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

或者，有什么方法可以为 Fab 按钮实现一个带有“cut”的 BottomNavigationView（保持很酷的默认动画，如新的 BottomAppBar）？

【问题讨论】：

到目前为止你有什么？
我正在重新设计一个旧应用程序，到目前为止，我有一个带有 fab 按钮和一些菜单按钮的工作 BottomAppBar（来自旧版本的应用程序）。从以前的 AppBar 切换到新的 AppBar 非常简单，但现在我一直在尝试更改其中的布局
基本上你想让你的底部应用栏看起来像 Google Home 应用？
没错。起初我考虑制作一个与 fab 按钮交互的自定义 BottomNavigationView，但我想在 BottomAppBar 内扩展自定义布局要容易得多，因为它已经处理不同的行为和动画

标签： android material-design android-appbarlayout bottomnavigationview android-bottomappbar

【解决方案1】：

已解决

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

使用?attr/selectableItemBackgroundBorderless 也可以实现与BottomNavigationView 非常相似的效果。

<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:gravity="center"
    app:layout_anchorGravity="start"
    app:hideOnScroll="true"
    app:fabAnimationMode="scale"
    app:fabAlignmentMode="center"
    app:contentInsetEnd="16dp"
    app:contentInsetStart="16dp"
    app:backgroundTint="@color/colorPrimary">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="5">
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_home_white_24dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:tint="@color/secondary_text"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_map_black_24dp"
            android:background="?attr/selectableItemBackgroundBorderless"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@android:color/transparent"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_people_white_24dp"
            android:background="?attr/selectableItemBackgroundBorderless"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_account_circle_24dp"
            android:background="?attr/selectableItemBackgroundBorderless"/>
    </LinearLayout>
</com.google.android.material.bottomappbar.BottomAppBar>

【讨论】：

为什么使用“paddingEnd”设置为16dp？（在线性布局内）
老实说，我不记得了，但我认为这是因为当您在 AppBar 中手动插入布局时，布局从一开始就放置在 8dp 处，并通过设置 width="match_parent"布局在视图之外是 8dp。通过设置 paddingEnd="8dp" 布局与视图的末端对齐，并且通过将其设置为 16dp 它实际上使其与另一侧对称。
@Hatzil 默认情况下，底部应用栏设置了一些填充 contentInsetStart，因此您可以将其设置为零或为 contentInsetEnd 设置类似的值

【解决方案2】：

将bottomAppBar 放在具有透明背景的bottomNavigationView 下。并将空菜单项添加到 menu.xml 以释放 FAB 的空间。

XML：

<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/lt_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:fitsSystemWindows="false">


<ViewPager
    android:id="@+id/main_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="56dp"
    android:layout_above="@+id/bottom_navigation"
    android:layout_alignParentStart="true" />


<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:labelVisibilityMode="labeled"
    android:layout_gravity="bottom"
    android:layout_alignParentBottom="true"
    android:background="@color/transparent"
    app:menu="@menu/bottom_menu" />

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

<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"/>

Result

【讨论】：

【解决方案3】：

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

Is it possible to have the BottomAppBar & FloatingActionButton with menu evenly distributed? #72

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

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 组件。

【讨论】：

【解决方案4】：

1 - 在 build.gradle 中的存储库中包含 Maven

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 - 确保您的应用继承Theme.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_anchor 属性中指定 BottomAppBar 的 id 来将浮动操作按钮 (FAB) 锚定到 BottomAppBar。 BottomAppBar 可以将 FAB 放置在带有形状背景的支架上，或者 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" />

7 - 您可以使用许多属性来配置底部导航栏和 Fab 图标。

8 - Check this medium post for a more complete explanation.

更新：检查the OP answer for the final solution for his particular problem.

【讨论】：

感谢您的回复，不幸的是我已经关注了相同的媒体帖子，并且我已经有了一个工作的 BottomAppBar。我的问题是，以这种方式，如果我放置更多菜单按钮，它们会对齐到末尾或开始，但我需要的是 BottomNavigationView 样式，按钮均匀分布在栏的长度上（避免与 fab 按钮重叠)
正如我所料它没有用，添加一个空元素的想法还不错，但它们仍然对齐到最后（即使我将它们对齐在中心它也没有' t 在不同的显示尺寸上看起来不错。这是结果 i.stack.imgur.com/m1kAS.jpg
@Berenluth 你能上传你的 XML 布局文件吗？我认为禁用筛选模式可以解决问题

【解决方案5】：

这可能有助于某人实现上述设计。添加空菜单项来调整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>

【讨论】：

【解决方案6】：

这应该适合你

结果

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

【讨论】：