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

Question

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

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

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

我尝试使用底部导航视图，主浮动操作按钮被膨胀为菜单项中的操作布局。使用这种方法只允许显示菜单项及其测试，但不显示浮动操作按钮。

什么是最好的使用方法。使用 BottomAppBar 或使用 BottomNavigationView。我正在尝试查看是否可以使用可用的材料组件而无需执行 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

这样做

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

Answer 2

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

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