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

查看:28
本文介绍了来自 Google 的新底部布局的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

作为 Android 开发的新手,我不知道从哪里开始,知道如何在 XML 中使用圆星实现底部布局吗?有谁知道这个设计叫什么?

解决方案

您可以使用新的

你必须使用这些属性:

  • fabCradleMargin 属性.它增加或减少了 FloatingActionButtonBottomAppBar
  • 之间的距离
  • fabCradleRoundedCornerRadius 属性.它指定切口周围拐角的圆度

旧支持库

使用

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

  • app:fabAlignmentMode: 声明已附加到底部应用栏的FAB的位置.这可以是 endcenter

  • 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 the FloatingActionButton and the BottomAppBar
  • 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 either end or center

  • 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆