首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在已有标高的两个布局之间获取浮动操作按钮

在Android开发中,浮动操作按钮(Floating Action Button,简称FAB)是一个常用的UI组件,通常用于执行主要的操作。如果你想在已有标高的两个布局之间添加一个FAB,可以按照以下步骤进行:

1. 添加依赖

首先,确保在你的build.gradle文件中添加了Material Design库的依赖:

代码语言:javascript
复制
dependencies {
    implementation 'com.google.android.material:material:1.4.0' // 请使用最新版本
}

2. 布局文件

在你的布局文件中,可以使用CoordinatorLayout作为根布局,并在其中添加两个子布局以及FAB。例如:

代码语言:javascript
复制
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 第一个布局 -->
    <LinearLayout
        android:id="@+id/layout1"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@color/colorPrimary"
        android:orientation="vertical">

        <!-- 添加你的视图 -->

    </LinearLayout>

    <!-- 第二个布局 -->
    <LinearLayout
        android:id="@+id/layout2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        android:orientation="vertical"
        android:paddingTop="200dp">

        <!-- 添加你的视图 -->

    </LinearLayout>

    <!-- 浮动操作按钮 -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

3. 样式和主题

确保你的应用主题继承自Material Design主题,例如:

代码语言:javascript
复制
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

4. Java/Kotlin代码

在Activity或Fragment中,你可以对FAB进行进一步的配置,例如设置点击事件:

代码语言:javascript
复制
FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        // 处理点击事件
    }
});

或者在Kotlin中:

代码语言:javascript
复制
val fab: FloatingActionButton = findViewById(R.id.fab)
fab.setOnClickListener {
    // 处理点击事件
}

注意事项

  • 确保CoordinatorLayout作为根布局,因为它提供了FAB所需的协调行为。
  • 使用layout_gravity属性来定位FAB,通常设置为bottom|end以便将其放置在屏幕的右下角。
  • 根据需要调整layout_margin以获得合适的间距。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

在 Flutter 中创建可拖动的浮动操作按钮

Flutter 允许您使用FloatingActionButton小部件添加浮动操作按钮。但是,它不允许您拖动按钮。如果你想让它可拖动怎么办。...本教程有一个示例,说明您需要做什么才能创建浮动操作按钮,只要它位于父小部件内,就可以将其拖动到屏幕周围的任何位置。 创建可拖动的浮动操作按钮 我们将为这样的小部件创建一个类。...一个浮动的动作按钮通常可以在点击时执行一个动作,所以我们添加一个名为onPressed( VoidCallback) 的参数作为参数。...所以,我们可以检查内部onPointerUpcallback 仅onPressed在值为_isDraggingis 时调用回调false。 下面是用于创建可拖动浮动操作按钮的类。...您还需要获取父级和按钮的大小,以防止按钮脱离父级框。

5.7K10

【热点盘点】iOS 8增强的自动布局功能

单击第一个按钮即可弹出图中的浮动框,该浮动框与Align子菜单包含的菜单项完全一样,只是通过该按钮可以同时添加多个约束。...第三种:在InterfaceBuilder中通过快捷方式添加。这种方式通常用于添加两个UI控件之间的相对布局关系。...由于在界面上拖出的蓝线为斜线,因此弹出菜单既可设置两个UI控件在水平方向上的相对布局关系,也可设置在垂直方向上的相对布局关系。如果在界面上拖出的蓝线为垂直竖线,那么Xcode将弹出如下图所示的菜单。...可以看出,如果在两个具有兄弟关系的UI控件之间拖出蓝色的水平横线,那么Xcode弹出的菜单将只能设置这两个UI控件在水平方向上的约束关系。...提示:如果在两个具有父子关系的UI控件之间拖出垂直的蓝线,那么Xcode弹出的菜单将只能设置两个UI控件在垂直方向上的布局约束;如果在两个具有父子关系的UI控件之间拖出水平的蓝线,那么Xcode弹出的菜单将只能设置两个

1.2K10
  • BFDrawing智能出图系统说明文档

    § 圆圈直径大小为管道的直径上转弯符号下转弯符号上交管下交管单根竖管剖面1.6 3D可视操作§ 在DESIGN模块,使用3D模型选择出图空间,更加的方便、可靠。...1.7 智能的避让功能,主要是综合考虑以下情况,得到最优位置:§ 整张图纸的稀疏程度§ 标签之间是否重叠§ 标签之间是否对齐§ 引线之间是否交叉§ 引线的长度§ 标签是否覆盖关键点(主要是标签的引出点...1.9 管道引出线的避让和布局§ 按照从上到下、从左到右进行布局和避让。1.10 可扩展性§ 该软件整体的框架采用多层的架构模式,不但运行稳定,而且可以快速的进行功能的开发和定制。...§ 添加模板:点击添加按钮,弹出对话框§ 为避免每一次的重新操作,新建模板是在已有的模板基础上进行修改§ 选中要使用的模板并命名完成之后点击确定按钮图纸已使用的TASKDWG配置文件可调用的TASK调整视图布局删除视图修改视图拷贝视图新建视图图纸比例图纸尺寸模板名称...PML与PML.net的数据接口5.1 总体结构§ 数据的总体结构是一个二维数组。此数组在PML中生成,PML.net通过方法进行获取。

    12910

    HTML+CSS高级

    第二个div用margin-left设置,让其在视觉上不被遮挡           3.2      当浮动元素相邻的下一个块级元素包含文本内容时,浮动元素没有覆盖文本,而是浮动在文本的左边                ...解决浮动造成的布局问题:           2.1     加高。    ...important           1.7     li里子元素都浮动,各个li之间在IE6、7下方会产生4px间隙问题                解决办法:给li加上     *vertical-align...第二个div用margin-left设置,让其在视觉上不被遮挡           3.2      当浮动元素相邻的下一个块级元素包含文本内容时,浮动元素没有覆盖文本,而是浮动在文本的左边                ...important           1.7     li里子元素都浮动,各个li之间在IE6、7下方会产生4px间隙问题                解决办法:给li加上     *vertical-align

    5.9K61

    【QT】:QMainWindow 窗口

    menubar() 函数原型如下: QMenuBar* menuBar() const (2)方式二 – 在堆上创建 如果是获取到已经存在的 QMenuBar,那么这里的设置就是 自己替换自己,仍然在对象树上...; } 结果如下: 三、在菜单项之间添加分割线 在菜单项之间可以添加分割线。...四、添加快捷键 一般来说菜单都会有对应的快捷键,方便我们更好操作,因此我们也可以 在设置菜单的 title 时,在字母前加 & 符号 示例: QMenuBar* menuBar = new QMenuBar...(2)在 “mainwindow.cpp” 文件中创建菜单和中央控件,并且给 action 添加一些动作 创建一个菜单栏,一个菜单 两个菜单项:保存,加载 创建一个 QTextEdit 作为窗口的中央控件...窗口布局 之前我们在 [QT 控件](【QT】控件 – 多元素类 | 容器类 | 布局类-CSDN博客)里已经讲过了大部分的布局类,现在我们来了解来自 QMainWindow 的窗口类布局,如下: 浮动窗口

    8510

    【Flutter】Flutter 拍照示例 ( 浮动按钮及点击事件 | 底部显示按钮组件 | 手势检测器组件 | 拍照并获取当前拍摄照片 | 从相册中选择图片 )

    文章目录 一、浮动按钮及点击事件 二、底部显示按钮组件 三、手势检测器组件 四、image_picker 完整代码示例 一、浮动按钮及点击事件 ---- 一般使用 Scaffold 组件作为界面的根布局组件...字段 ; floatingActionButton: FloatingActionButton(), ) 浮动按钮点击事件 : 浮动按钮点击事件就是 FloatingActionButton 组件的..., 可以是任何组件 , 如 Column ; 这里在底部显示的是一个 Container 组件 , Container 组件内部包含了一个 Column 组件 ; /// 浮动按钮点击事件 /// 点击浮动按钮...final picker = ImagePicker(); /// 获取摄像头图像的方法 Future getImageFromCamera() async { /// 菜单按钮消失.../// 点击浮动按钮 , 弹出一个菜单 /// 菜单有两个按钮 , 分别是 拍照 / 选择图片 showModalBottomSheet(

    1.6K30

    Material Design — 按钮( Buttons)

    Button 按钮能传达用户触摸它们时发生的操作。 Buttons被按时被触发墨水扩散效果。 他们可能会显示文字,图像或两者都有。 平面按钮和浮动按钮是最常用的类型。...卡片 按钮最好放在卡的左侧以增加其可见度。 但是,由于卡片具有灵活的布局,因此可以将按钮放置在适合内容和上下文的位置,同时保持产品内的一致性。...可以在以下位置使用扁平按钮: ·在 toolbars上 ·在提示框中,将按钮操作与对话框内容统一起来 ·Inline, with padding,因此用户可以轻松找到它们 ?...点击时的动画效果可以去网站观看 ---- 浮动按钮(Raised button) 用法 浮动按钮增加了大部分平面布局的海拔。 强调在拥挤的或者较大的空间的功能。 ?...背景比较嘈杂的时候使用浮动按钮 浮动按钮就像一块放在另一张纸上的材料 - 点击时浮起并填充颜色。 ? 按钮海拔 浮动按钮的默认海拔为2dp。 在桌面上,浮动按钮可以在悬停时获得此海拔。 ?

    3.9K160

    Material的布局原则

    这些布局可通过缩放来适应任何屏幕大小,这简化了创建可扩展应用的过程。 纸片工作原理 在 Material Design 中,纸片的物理特性被转移到了屏幕中。...应用的背景类似于一张平坦、不透明质地的纸片,应用的行为也模仿纸片,可以改变大小、拖动及把多个纸片粘合在一起。 在本规范中,构成应用的表面被成为材料或材料片。...两片材料的接缝 阶层 两个 Z 轴位置不同的材料片重叠时,会形成阶层。这两个材料会相互独立移动。 两片重叠的材料构成的阶层 浮动操作按钮 浮动操作按钮 浮动操作按钮是和工具栏分离的圆形纸片。...它表示单个被提升的操作。 如果它和阶层中的内容创建有关,则可以跨越一个阶层。 跨阶层的浮动操作按钮 如果浮动操作按钮与两个材料的内容都有关,则可以跨越接缝。...不要引入一个装饰用的接缝,来为浮动操作按钮提供锚点。 跨接缝的浮动操作按钮

    1.1K40

    深入理解视觉格式化模型( VISUAL FORMATTING MODEL)

    现介绍两个绝对定位的使用技巧: 1. 绝对定位元素,水平方向(top和bottom)或和垂直方向(left和right)的定位值不设置时,其位置受其前面的兄弟元素影响,如同其在常规流中的位置。...下面这个实例要求蓝色购买按钮水平居中,其后跟随一个链接。为了达到自适应布局,我们不能假设父级容器宽度固定,也不能假设蓝色按钮的文案固定,所以链接元素的位置也是根据上下文环境改变的。... 另一个案例是用以实现下拉菜单,下拉菜单通常由触发按钮和下拉列表组成,下拉列表的位置位于触发按钮的下方。...这些框的布局由以下因素决定: 框尺寸和类型 定位方案(常规流、浮动和绝对定位) 文档树中元素之间的关系 外部信息(比如viewport尺寸、图像的固有尺寸等) 9.1.2 Containing blocks...精确地讲,一个元素的静态top值,是指包含块顶部边沿与该元素的假想框的顶部margin边沿之间的距离。

    63630

    深入理解视觉格式化模型

    现介绍两个绝对定位的使用技巧: 1. 绝对定位元素,水平方向(top和bottom)或和垂直方向(left和right)的定位值不设置时,其位置受其前面的兄弟元素影响,如同其在常规流中的位置。...这种看似毫无用处的技巧,却能帮助我们解决一些项目实际问题。我们总希望我们的布局是自适应的,即不依赖与所处环境,当环境改变时,仍能完美工作。下面这个实例要求蓝色购买按钮水平居中,其后跟随一个链接。...为了达到自适应布局,我们不能假设父级容器宽度固定,也不能假设蓝色按钮的文案固定,所以链接元素的位置也是根据上下文环境改变的。...这些框的布局由以下因素决定: 框尺寸和类型 定位方案(常规流、浮动和绝对定位) 文档树中元素之间的关系 外部信息(比如viewport尺寸、图像的固有尺寸等) 9.1.2 Containing blocks...精确地讲,一个元素的静态top值,是指包含块顶部边沿与该元素的假想框的顶部margin边沿之间的距离。

    92490

    Floating Action Button-Android M新控件

    概述 浮动操作按钮是Material Design 中推出的控件之一 浮动操作按钮 (简称 FAB) 是: “一个特殊的promoted操作案例。...因为一个浮动在UI之上的圆形图标而显得格外突出,同时它还具有特殊的手势行为” 比如,如果我们在使用email app,在列出收件箱邮件列表的时候,promoted操作可能就是新建一封邮件。 ? ?...浮动操作按钮代表一个屏幕之内最基本的额操作。关于FAB按钮的更多信息和使用案例请参考谷歌的官方设计规范。 运行效果 ?...CoordinatorLayout帮助我们协调它所包含的子view之间的交互,这一点在我们后面讲如何根据滚动的变化让按钮动画隐藏与显示的时候有用。...---- 浮动操作按钮的动画 官方效果图 ?

    1.5K40

    QT入门学习——从信号和槽到对话框,各种控件以及自定义控件

    引出QT入门学习——从信号和槽到对话框,各种控件以及自定义控件qt的使用//类名首字母大写,单词和单词之间首字母大写//函数名变量名称首字母小写,单词和单词之间首字母大写//快捷键//注释ctrl +/...); setWindowTitle("第一个窗口");}myWidget::~myWidget(){}对象树概念4对像树4.1 当创建的对象在堆区时候,如果指定的父亲是QObject派生下来的类或者...QObject子类派生下来的类,可以不用管理释放的操作,将对象会放入到对象树中。...connect(btnclose,&QPushButton::clicked, this,[=](){ myWidget->close(); }); // 一个按钮控制两个窗口...widget进行布局,水平布局、垂直布局、栅格布局给用户名、密码、登陆、退出按钮进行布局:默认窗口和控件之间有9间隙,可以调整layoutLeftMargin利用弹篝进行布局默认框框有9像素输入框密码的输入

    42310

    iOS 与 Android 的APP 设计差异

    iOS的两种常见导航形式,分段控制和底部标签栏 虽然在两个操作系统中都有类似的功能(切换标签和分段控制,底部导航和标签栏),但导航形式仍然是iOS和Android之间的主要区别之一。...左边是标准的Android按钮;右边是标准的iOS按钮 还有一种非常有特点的按钮类型——在Android上叫做浮动按钮,在iOS上叫做活动按钮。浮动按钮用来展示应用的主要操作。...例如,在邮件APP中写邮件,或者在社交APP中发状态都会用到这个浮动按钮。...而在iOS中与之类似的按钮则叫做活动按钮,通常会放在底部导航的中间 左边是标准的iOS活动按钮;右侧是标准的Android浮动按钮 IOS与Android底部操作视图的差异 在Android中有两种不同类型的底部操作视图...模态视图又有两种不同类型:具有不同操作内容的模态列表和用户点击“共享”图标后显示的应用列表。在iOS上也能找到类似的组件,但是在设计风格和布局上差异比较大。

    3.5K10

    【前沿】基于SLAM点云数据的BIM模型重建

    常规的建模技术需要具体的原始数据作为参考,即对已有建筑的“实际复制”,根据现实中已经存在的建筑进行数据采集和建模等。...现在应用广泛的原始数据获取手段主要是无人机航飞、RTK实测、激光点云扫描等方法,在实际的应用过程中也都各有利弊。...Ø 可使用移动通讯设备(如手机、平板)等进行操作,简单方便; Ø 可实现室内外、地上地下空间的一体化、连续化地扫描作业。...然后建立标高和轴网,标高用以确定建筑物的高度,为建筑物层高、室内外高差、屋顶标高等主体构建提供高度参照。...轴网是用于建筑物平面结构位置的确定,如梁板、门和窗户等,可以通过标高和轴网进行建筑物模型的整体布局。

    84510

    前端面试题-每日练习(3)

    c、表单按钮:包括提交按钮,复位按钮和一般按钮;用于将数据传送到服务器上的 CGI 脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。...在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。...碰到几率:20% 解决方案:使用float属性为img布局 备注 :因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。...:0,对于兼容的,一般的做法就是在书写css样式的将2个都写上就行,就能实现兼容 12.请列举几种清除浮动的方法(至少两种)?...;如果页面浮动布局多,就要增加很多空div,让人感觉很不好 建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法 (3)、父级div定义 伪类:after 和 zoom 原理:IE8以上和非

    15420

    Bootstrap 响应式框架 第四集

    8、组件 - 导航条 1、基本导航条的实现 1、最外层 由nav并且引用 navbar navbar-default 两个类选择器来组成的 2、nav中必须添加一个...navbar-right 处理左或右浮动 4、导航条中的按钮 按钮需要增加 .navbar-btn 来处理按钮在导航条中的位置 5、导航条中的文本 文本需要增加....navbar-text 来处理文本在导航条中的位置 6、导航条中的浮动方式 通过 navbar-left 实现元素左浮动 通过 navbar-right实现元素右浮动...注意: 9、JS 插件 - Plugins 插件 - 提供了一组操作的行为 每种行为基本上都有两种的调用方式: 1、data-* ex:...$("#nav") : 获取页面中ID为nav的元素 $(".container") : 获取页面中class为container的元素

    1.4K20

    Flutte部件目录-Material Components 顶

    实现Material Design指南的视觉,行为和运动丰富的小部件。 应用程序结构和导航 按钮 输入和选择 对话框,弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录中的更多小部件。...应用程序结构和导航 Scaffold Appbar 上面两个在基本部件中已经讲过。 BottomNavigationBar ? 底部导航栏可轻松浏览并在单次点击之间在顶层视图之间切换。...一个显示在应用底部的材质小部件,用于在少量视图中进行选择,通常介于3到5之间。 底部导航栏由文本标签,图标或两者的多个项目组成,并放置在一块材料的顶部。 它提供了应用程序顶级视图之间的快速导航。...FloatingActionButton 浮动操作按钮是一个圆形图标按钮,它悬停在内容上以提升应用程序中的主要操作。...浮动动作按钮最常用于Scaffold.floatingActionButton字段。 ? FlatButton 平面按钮是在材料组件部件上打印的部分,通过填充颜色对触摸作出反应。 ?

    9.5K40

    【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )

    ; ClipRRect : 裁剪布局组件 , 可以将布局裁剪成方形 ; PhysicalModel : 将布局显示成不同的形状 ; Align : 布局设置组件 , 一般设置布局居中操作 ; Padding...: 设置内边距的组件 ; SizeBox : 用于约束布局大小的组件 ; FractionallySizedBox : 约束布局水平 / 垂直方向的平铺操作 ; MultiChildRenderObjectWidget..., Row 组件是水平方向的线性布局 , Wrap 组件是在 Row 组件的基础上的水平线性布局 , 多了一个换行功能 , Wrap 组件可以有多行水平线性布局 ; 这是照片墙实现的主要组件 , Wrap...、Stack 布局组件 六、按钮组件组合 ---- 关闭按钮首先由按键功能 , 在最外围使用 GestureDetector 组件 , 监听器 onTap 点击事件 , 点击时删除对应的图片文件 , 并更新整体布局.../// 点击浮动按钮 , 弹出一个菜单 /// 菜单有两个按钮 , 分别是 拍照 / 选择图片 showModalBottomSheet(

    8.4K20

    css应知应会 第三集

    4、在不确定每列大小时优先使用 2、固定表格布局 1、单元格的大小由设定的值来决定的 2、...加载时速度较快(优点) 3、灵活性太低(缺点) 4、在确定每列大小时使用 4、浮动 1、定位 所谓的定位指的就是页面元素在页面中的位置...4、定位 - 浮动定位 1、解决的问题 多个块级元素在一行内的显示问题 2、什么是浮动定位 & 特点 将元素设置为浮动定位的话...,那么将具备以下几个特点: 1、浮动元素会被排除在文档流之外,即脱离文档流,不占据页面空间,后续元素要上前补位 2、浮动元素会停靠在父元素的左边 或 右边...左侧已有的浮动元素的边缘上 3、right 右浮动,让元素停靠在父元素的右边 或 右侧已有的浮动元素的边缘上 4

    1.6K20
    领券