使用 BottomAppBar 或 BottomNavigationView 创建自定义底部视图

Question

我想为测试 android 应用程序创建下面的视图。这些是我创建视图所遵循的当前步骤：

创建了以协调器布局为根元素的布局文件。
添加了底栏并将其固定在底部。
添加了一个浮动操作按钮并将其固定在底部栏中。
创建了一个包含三个菜单项的菜单资源文件。
将菜单项添加到底部栏。

当我运行应用程序时，视图如下图所示：

我试过使用 Bottomnavigationview，主要的浮动操作按钮被放大为菜单项中的操作布局。使用这种方法只允许显示菜单项及其测试，但不显示浮动操作按钮。

最好的使用方法是什么。使用 BottomAppBar 或使用 BottomNavigationView。我想看看我是否可以使用可用的 material 组件而无需执行 hack。

XML个文件如下：

activity_main

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

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/bar"
        app:srcCompat="@mipmap/sharp_local_atm_black_24" />

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabAlignmentMode="center"
        app:fabCradleRoundedCornerRadius="0dp"
        app:fabCradleMargin="0dp"
        app:fabAnimationMode="slide"
        app:labelVisibilityMode="labeled"
        app:fabCradleVerticalOffset="8dp"
        app:menu="@menu/app_bar_menu"
       />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

菜单XML:

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

    <item
        android:id="@+id/app_bar_home"
        android:icon="@mipmap/sharp_home_black_24"
        android:title="@string/home"
        app:showAsAction="always"/>

    <item
        android:id="@+id/app_bar_wallet"
        android:icon="@mipmap/sharp_account_balance_wallet_black_24"
        android:title="@string/wallet"
        app:showAsAction="always"/>

    <item
        android:id="@+id/app_bar_atm"
        android:title="CASH"
        app:showAsAction="always"/>

    <item
        android:id="@+id/app_bar_cart"
        android:icon="@mipmap/sharp_shopping_cart_black_24"
        android:title="@string/cart"
        app:showAsAction="always"/>

    <item
        android:id="@+id/app_bar_more"
        android:icon="@mipmap/sharp_menu_black_24"
        android:title="@string/more"
        app:showAsAction="always"/>
</menu>

Answer 1

我建议使用 BottomNavigationView，因为它更适合您的情况。您将根据需要在菜单项之间传播，这不会出现在 BottomAppBar 中（据我所知）。

要实现 FAB 居中外观，您只需使用 CoordinatorLayout 在 BottomNavigationView 的中间对齐 FAB 自定义视图即可。

Answer 2

这样做

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    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"
        app:backgroundTint="@color/colorBottomBar"
        app:fabCradleRoundedCornerRadius="16dp"
        app:fabAlignmentMode="center"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                style="?android:attr/borderlessButtonStyle"
                android:id="@+id/wall_share"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/ic_ripple"
                android:drawableTop="@drawable/ic_share"
                android:gravity="center"
                android:orientation="vertical"
                android:text="@string/share"
                android:fontFamily="@font/lato"
                android:textAllCaps="false"
                android:textColor="@color/colorIconMain">
            </TextView>

            <TextView
                style="?android:attr/borderlessButtonStyle"
                android:id="@+id/wall_stats"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/ic_ripple"
                android:drawableTop="@drawable/ic_stats_main"
                android:gravity="center"
                android:orientation="vertical"
                android:text="@string/stats"
                android:fontFamily="@font/lato"
                android:textAllCaps="false"
                android:textColor="@color/colorIconMain">
            </TextView>

            <TextView
                style="?android:attr/borderlessButtonStyle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/ic_ripple"
                android:drawableTop="@drawable/ic_blur"
                android:gravity="center"
                android:orientation="vertical"
                android:textColor="@color/colorIconMain"
                android:fontFamily="@font/lato"
                android:textAllCaps="false"
                android:visibility="invisible">
            </TextView>

            <TextView
                style="?android:attr/borderlessButtonStyle"
                android:id="@+id/wall_blur"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/ic_ripple"
                android:drawableTop="@drawable/ic_blur"
                android:gravity="center"
                android:orientation="vertical"
                android:text="@string/blur"
                android:fontFamily="@font/lato"
                android:textAllCaps="false"
                android:textColor="@color/colorIconMain">
            </TextView>

            <TextView
                style="?android:attr/borderlessButtonStyle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/ic_ripple"
                android:drawableTop="@drawable/ic_filter"
                android:gravity="center"
                android:orientation="vertical"
                android:text="@string/filters_title"
                android:fontFamily="@font/lato"
                android:textAllCaps="false"
                android:textColor="@color/colorIconMain">
            </TextView>

        </LinearLayout>

    </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"
        android:src="@drawable/ic_save"
        app:tint="@color/colorFabTint"
        app:backgroundTint="@color/colorAccentX"
        app:layout_anchor="@id/bottomAppBar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

结果

您可以调整 app:fabCradleRoundedCornerRadius 并添加 TextView 以获得您想要的外观。

应 OP 的要求，我发布了我的 ic_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/colorRipple">
<item
    android:id="@android:id/mask"
    android:gravity="center">
    <shape android:shape="rectangle">
        <solid android:color="@color/colorRipple"/>
        <corners android:radius="@dimen/card_round"/>
    </shape>
</item>

使用 BottomAppBar 或 BottomNavigationView 创建自定义底部视图

Using BottomAppBar or BottomNavigationView to create custom bottom view

android

bottomnavigationview

android-bottomappbar