android - 如何制作底部应用栏或底部导航栏(如google home应用)？

我想做一个像上面这样的布局。有人可以帮我怎么做吗？我已经尝试过新 Material 的底部应用栏。但我无法实现这种观点。

最佳答案

@Artur的解决方案朝着正确的方向迈出了一大步，尽管随着Google的 Material 组件的发展，它需要进行更精细的调整。

我的解决方案的屏幕截图:



build.gradle的依赖项:

implementation 'com.google.android.material:material:1.1.0-alpha10'
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta2'

layout/activity_main.xml文件:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".ui.main.MainActivity"
        android:background="@color/orange_500"
        >

        <!-- blah blah blah other content...   -->
        <!--         android:visibility="gone" -->

        <androidx.coordinatorlayout.widget.CoordinatorLayout
                android:id="@+id/coordinator_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="false"
                android:clickable="false"
                android:focusable="false"
                >


                <com.google.android.material.bottomappbar.BottomAppBar
                        android:id="@+id/bottom_bar"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom"
                        android:background="@android:color/transparent"
                        android:clickable="false"
                        app:fabAlignmentMode="center"
                        app:contentInsetStart="0dp"
                        app:contentInsetStartWithNavigation="0dp"
                        >

                        <com.google.android.material.bottomnavigation.BottomNavigationView
                                android:background="@color/clear"
                                android:id="@+id/bottom_navigation"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                app:menu="@menu/menu_bottom_navigation_main"
                                android:outlineAmbientShadowColor="@android:color/transparent"
                                android:outlineSpotShadowColor="@android:color/transparent"
                                />

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

                <com.google.android.material.floatingactionbutton.FloatingActionButton
                        android:id="@+id/fab"
                        style="@style/Widget.Design.FloatingActionButton"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        app:layout_anchor="@id/bottom_bar"
                        android:src="@drawable/ic_add_white_24dp"
                        android:tint="@color/white"
                        />
        </androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

menu/menu_bottom_navigation_main.xml文件:

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

    <item
            android:id="@+id/action_view_all_expenses"
            android:enabled="true"
            android:icon="@drawable/ic_list_black_24dp"
            android:title="View All"
            app:showAsAction="always" />


    <item
    android:enabled="false"
    android:title="Add Expense"
    app:showAsAction="always"
            android:checkable="false"
            android:checked="false"
            />


    <item

            android:id="@+id/action_view_dashboard"
            android:enabled="true"
            android:icon="@drawable/ic_dashboard_black_24dp"
            android:title="Dashboard"
            app:showAsAction="withText" />
</menu>

几点评论:

我必须删除FrameLayout作为中间人，但进展不顺利。

我的主要根是ConstraintLayout。我只需要添加一个协调器布局即可使底部表现良好。请注意，协调器的高度为match_parent，尽管仅底部应用栏才需要。

底部导航 View 必须将android:outlineAmbientShadowColor和android:outlineSpotShadowColor添加为transparent和透明背景，否则运行android q的设备将在底部应用栏上方绘制奇怪的阴影。

底部的应用程序栏必须添加app:contentInsetStart和app:contentInsetStartWithNavigation作为0dp，以便导航 View 不会从屏幕的开始移开并且看上去很奇怪。

如果将ConstraintLyaout用作根 View ，则不能约束到底部导航 View 。插入后，您将需要约束父对象的底部到底部，并像下面这样添加边距底部:android:layout_marginBottom="@dimen/design_bottom_navigation_height"