Google的新底部布局 [英] New Bottom Layout from Google

问题描述

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

First of all, I am sorry to ask a question like this but after I downloaded latest Google IO app,

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

I am just loving the bottom Layout as shown in the following screenshot

对android开发来说是新手，我不知道从哪里开始，有什么想法如何用XML中的圆形星号实现此底部布局?有人知道这种设计叫什么吗?

Being new to android development, I have no clue where to start, Any idea how to achieve this bottom Layout with circle star in XML? Does anyone know what this design is called?

推荐答案

您可以使用新的

You can use the new Material Components for Android and the BottomAppBar component.

使用类似的内容:

 <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 属性.它指定切口周围拐角的圆度

• fabCradleMargin attribute. It increases or decreases the distance between the FloatingActionButton and the BottomAppBar
• fabCradleRoundedCornerRadius attribute. It specifies the roundness of the corner around the cutout

旧的支持库

使用支持库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">

您可以使用以下属性来自定义组件:

You can customize the component using these attributes:

• app:fabAlignmentMode:声明已附加到底部应用程序栏的FAB的位置.可以是end或center

• app:fabAlignmentMode: Declares the position of the FAB which has been attached to the bottom app bar. This can be either end or center

app:fabCradleVerticalOffset:声明要用于附加fab的垂直偏移.默认情况下，该值为0dp.

app:fabCradleVerticalOffset: Declares the vertical offset to be used for the attached fab. By default this is 0dp.

app:backgroundTint:用于在视图背景上添加色调.

app:backgroundTint: Used to apply a tint to the background of the view.

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

Also you you can attach a fab by using app:layout_anchor on the FAB component which you wish to attach, using the ID of the bottom app bar.

这篇关于Google的新底部布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！