如何将新材料BottomAppBar实施为BottomNavigationView [英] How to implement new material BottomAppBar as BottomNavigationView

问题描述

我试图实现通常如下所示的新BottomAppBar: 材料BottomAppBar 作为BottomNavigationView，就像在Google Home应用中看起来像

I was trying to implement the new BottomAppBar that usually looks like this: material BottomAppBar as a BottomNavigationView like in the Google home app that looks like this.

我的问题是，由于我只能用菜单资源填充BottomAppBar，所以我不明白如何将按钮对齐以使其看起来像BottomNavigationView(但Fab按钮带有"cut")而不是对齐所有内容到BottomAppBar的一侧.

My problem is that since I can fill the BottomAppBar only with a menu resource, I can't understand how to align my buttons to look like a BottomNavigationView (but with the "cut" for the Fab button) instead of align everything to one side of the BottomAppBar.

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

How can I add a custom layout inside this new Material BottomAppBar?

或者，是否可以通过Fab按钮的"cut"实现BottomNavigationView(保留酷炫的默认动画，如新的BottomAppBar)?

Or instead, is there any way to implement a BottomNavigationView with the "cut" for for the Fab button (keeping cool default animations like the new BottomAppBar)?

推荐答案

已解决

基本上，我没有尝试将菜单资源强制设置为所需的布局，而是使用了此解决方案，而是使用@dglozano建议的空"元素，将LinearLayout放入BottomAppBar中.

Basically, instead of trying to force the menu resources to the layout that i needed, i used this solution instead, i just put a LinearLayout inside the BottomAppBar using the "empty" element as @dglozano suggested.

使用?attr/selectableItemBackgroundBorderless，我还可以实现与BottomNavigationView非常相似的效果.

Using ?attr/selectableItemBackgroundBorderless i'm also able to achieve an effect that is really similar to the 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>

这篇关于如何将新材料BottomAppBar实施为BottomNavigationView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！