来自 Google 的新底部布局

Question

首先，很抱歉问这样的问题，但是在我下载了最新的 Google IO 应用程序后，

我只是喜欢底部的布局，如下所示截图

作为 android 开发的新手，我不知道从哪里开始，知道如何在 XML 中实现带有圆圈星的底部布局吗？有谁知道这个设计叫什么？

Answer 1

我相信是 BottomAppBar，支持库 28.0.0。您可以在这里阅读更多内容：https://medium.com/@lupajz/the-place-for-bottomappbar-31e0db8f70b1

Answer 2

您可以使用新的 Material Components for Android and the BottomAppBar 组件。

使用类似于：

 <com.google.android.material.bottomappbar.BottomAppBar
      android:id="@+id/bar"
      android:layout_gravity="bottom"
      app:fabCradleMargin="8dp"
      app:fabCradleRoundedCornerRadius="8dp"
      app:fabCradleVerticalOffset="0dp"
      ... />

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      app:layout_anchor="@id/bar"
      ../>

您必须使用这些属性：

fabCradleMargin 属性。它增加或减少 FloatingActionButton 和 BottomAppBar
fabCradleRoundedCornerRadius 属性。它指定切口周围角的圆度

旧支持库

对于 Support Library 28.0.0，设计库包含 BottomAppBar。

你可以使用

<android.support.design.bottomappbar.BottomAppBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:backgroundTint="@color/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

您可以使用这些属性自定义组件：

app:fabAlignmentMode: 声明已附加到底部应用栏的 FAB 的位置。这可以是 end 或 center
app:fabCradleVerticalOffset：声明要用于附加晶圆厂的垂直偏移。默认情况下这是 0dp。
app:backgroundTint: 用于对视图的背景应用色调。

您也可以通过在您希望附加的 FAB 组件上使用 app:layout_anchor 附加一个 fab，使用底部应用栏的 ID。

Answer 3

应用栏：底部

Bottom app bars provide access to a bottom navigation drawer and up to four actions, including the floating action button.

Bottom app bars can contain actions that apply to the context of the current screen. They include a navigation menu control on the far left and a floating action button (when one is present). If included in a bottom app bar, an overflow menu control is placed at the end of other actions.

信息enter link description here

<android.support.design.widget.FloatingActionButton
    android:id="@+id/FloatingActionButtonAddEmp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|center_horizontal"
    app:srcCompat="@drawable/ic_save_black_24px"
    app:layout_anchor="@+id/bottom_appbar"/>

<android.support.design.bottomappbar.BottomAppBar
    android:id="@+id/bottom_appbar"
    android:elevation="4dp"
    style="@style/Widget.MaterialComponents.BottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:fabAttached="true"
    app:backgroundTint="@color/io15_grey"/>

来自 Google 的新底部布局

New Bottom Layout from Google

android

layout

material-design

floating-action-button

material-components-android