如何制作底部应用栏或底部导航栏(如google home应用)? [英] how to make bottom app bar or bottom navigation bar like google home app?

问题描述

我想像上面那样进行布局.有人可以帮我怎么做吗?我已经尝试过新材质的底部应用栏.但我无法实现这种观点.

I want to make a layout like above. Can anyone help me how to do that? I have tried the new material bottom app bar. but I couldn't achieve this view.

推荐答案

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

@Artur's solution is a huge kick in the right direction, although it needs more fine tuning as google's material components has evolved.

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>

一些评论:

1. 我不得不将FrameLayout删除为中间人，但进展不顺利.

1. I had to remove the FrameLayout as the middle-man, it didn't go well.

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

My main root is a ConstraintLayout. I only needed to add a coordinator layout for the bottom to behave well. notice that the coordinator's height is match_parent although it is only needed for the bottom app bar.

底部导航视图必须将 android:outlineAmbientShadowColor 和 android:outlineSpotShadowColor 添加为 transparent 以及透明背景或设备运行android q的应用栏底部会绘制奇怪的阴影.

the bottom navigation view had to add android:outlineAmbientShadowColor and android:outlineSpotShadowColor as transparent and also transparent background, or devices running android q will have strange shadows painted on top of the bottom app bar.

底部的应用栏必须添加 app:contentInsetStart 和 app:contentInsetStartWithNavigation 为 0dp ，这样才能获得导航视图

the bottom app bar had to add app:contentInsetStart and app:contentInsetStartWithNavigation to be 0dp so that the navigation view won't get moved aside from the screen's start and look strange.

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

if you will use ConstraintLyaout as the root view, you can't constraint to the bottom navigation view. instaed you will need to constraint's bottom to bottom of parent, and add margin bottom like this: android:layout_marginBottom="@dimen/design_bottom_navigation_height"

这篇关于如何制作底部应用栏或底部导航栏(如google home应用)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！