来自 Google 的新底部布局 [英] New Bottom Layout from Google
问题描述
首先,我很抱歉提出这样的问题,但在我下载了最新的 Google IO
应用程序后,
我只是喜欢底部的布局,如下所示截图
作为 Android 开发的新手,我不知道从哪里开始,知道如何在 XML 中使用圆星实现底部布局吗?有谁知道这个设计叫什么?
您可以使用新的
你必须使用这些属性:
fabCradleMargin
属性.它增加或减少了FloatingActionButton
和BottomAppBar
之间的距离fabCradleRoundedCornerRadius
属性.它指定切口周围拐角的圆度
旧支持库
使用
您可以使用以下属性自定义组件:
app:fabAlignmentMode
: 声明已附加到底部应用栏的FAB的位置.这可以是end
或center
app:fabCradleVerticalOffset
: 声明用于附加晶圆厂的垂直偏移.默认情况下,这是 0dp.app:backgroundTint
: 用于对视图背景应用色调.
您也可以使用 app:layout_anchor
在要附加的 FAB 组件上附加一个 fab,使用底部应用栏的 ID.
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
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.
Use something like:
<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"
../>
You have to use these attributes:
fabCradleMargin
attribute. It increases or decreases the distance between theFloatingActionButton
and theBottomAppBar
fabCradleRoundedCornerRadius
attribute. It specifies the roundness of the corner around the cutout
OLD SUPPORT LIBRARY
With the Support Library 28.0.0, the Design Library contains the BottomAppBar
.
You can use
<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
: Declares the position of the FAB which has been attached to the bottom app bar. This can be eitherend
orcenter
app:fabCradleVerticalOffset
: Declares the vertical offset to be used for the attached fab. By default this is 0dp.app:backgroundTint
: Used to apply a tint to the background of the view.
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屋!