谷歌推出新的底部布局设计

Question

首先，很抱歉问这样的问题，但是在我下载了最新的Google IO应用程序之后， 我非常喜欢以下截图中显示的底部布局。

作为一个新手，我不知道从哪里开始进行安卓开发。有什么想法可以在XML中实现这个带有圆形星星的底部布局吗？有人知道这个设计叫什么吗？

- Ali

Answer 1

你可以使用新的Android 材料组件和 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 属性。它指定了切口周围的圆角程度。

旧版支持库

使用支持库 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：声明要用于附加fab的垂直偏移量。默认情况下，这是0dp。

• app:backgroundTint：用于将色调应用于视图的背景。

此外，您还可以通过在要附加的FAB组件上使用app:layout_anchor，并使用底部应用栏的ID来附加fab。

- Gabriele Mariotti

Answer 2

我相信这是“BottomAppBar”，它出现在支持库28.0.0中。您可以在此处阅读更多信息：https://medium.com/@lupajz/the-place-for-bottomappbar-31e0db8f70b1。

- stkent

---

谢谢，你知道支持库28什么时候发布吗？ :) - Ali

你现在可以使用alpha版本，并关注https://developer.android.com/topic/libraries/support-library/revisions?authuser=1获取完整版本的发布信息。不过，目前还不知道具体发布时间 :/ - stkent

加油 - 我正在使用 Xamarin，所以我认为 Xamarin 还没有支持 28 alpha。 - Ali

Answer 3

应用栏：底部

底部应用栏提供访问底部导航抽屉和最多四个操作，包括浮动操作按钮。

底部应用栏可以包含适用于当前屏幕上下文的操作。它们在极左侧包含导航菜单控件和浮动操作按钮（如果有一个）。如果包含在底部应用栏中，则溢出菜单控件放置在其他操作的末尾。

信息 输入链接说明

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

- Adriano J. P. Nascimento