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

如何将FAB锚定到有边际的BottomSheet?

要将FAB(Floating Action Button)锚定到有边际的BottomSheet,可以使用以下步骤:

  1. 首先,确保你的应用中已经使用了BottomSheet组件,并且已经设置了相应的边际。BottomSheet是一个可以从底部弹出的可交互面板。
  2. 在布局文件中,将FAB放置在BottomSheet的外部容器中,而不是BottomSheet内部。这样FAB就可以保持在底部面板之上。
  3. 使用CoordinatorLayout作为根布局,以确保FAB与BottomSheet等其他组件可以正确协调。CoordinatorLayout是一个能够协调子视图之间交互行为的布局容器。
  4. 将FAB的layout_anchor属性设置为BottomSheet的id,以将其锚定到BottomSheet上。这将确保FAB相对于BottomSheet的位置正确。
  5. 为FAB设置layout_anchorGravity属性,以指定FAB在BottomSheet中的位置。根据需要,可以选择不同的位置,如底部居中、右下角等。

下面是一个示例代码片段,展示了如何将FAB锚定到有边际的BottomSheet:

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

    <!-- BottomSheet布局 -->
    <LinearLayout
        android:id="@+id/bottomSheet"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_margin="16dp"
        android:background="@android:color/white"
        android:orientation="vertical"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

        <!-- BottomSheet内容 -->

    </LinearLayout>

    <!-- FAB -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/bottomSheet"
        app:layout_anchorGravity="bottom|end" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

请注意,这只是一个简单示例,实际的布局结构和属性可能因你的应用需求而有所不同。根据具体情况,你可能需要调整布局和属性来满足你的需求。

推荐的腾讯云相关产品:腾讯云移动开发套件,包括云函数、移动推送、移动直播、移动分析等,可帮助开发者构建高效稳定的移动应用。具体产品介绍请参考:腾讯云移动开发套件

相关搜索:我有一个FAB锚定在底部的酒吧,有一个窃听的行为如何将图例锚定到Tableau中的浮动图表?如何将SVG行锚定到可变高度容器的底部?如何将Reality Composer (RealityKit)场景锚定到检测到的图像如何将页面部分锚定到滚动显示的导航栏的底部?在D3散点图中,如何将可变大小的图像锚定到坐标/点的中心如何将一个div锚定到另一个div并保持它们的响应性如何将函数(有自己的参数)作为参数传递到函数中?如何将"innerText“复制到有多个文本的剪贴板?如何将图片设置到文本视图的右下边缘,周围有流动的文本?如何将内部有字符串的抽屉传递到下一个屏幕如何将excel中的空值插入到有唯一键的列中,并作为NULL输入?如何将现有的React Native App升级到新的React native版本?我们有什么文档吗?我有一个800px宽的相对css位置的网站-如何将其扩展到移动设备如果我的清单文件有一个预先存在的android:name,如何将branch.io集成到应用程序?我有字节数组中的数据,它使用UTF8编码,由0到255之间的值表示。如何将数据转换为原始格式?如何将文本文件转换为netcdf文件?我有一个气象站在1980到2018年间的观测数据集我有一个关于Xamarin.Forms导航的问题。如何将变量值从一个页面传递到另一个页面?[ RDP - Lync ]如何将桌面或应用程序共享到Lync客户端或服务器?是否有实现RDP协议的第三方库?如何将值从一个类传递到另一个类,其中第一个类有来自第二个类的对象,但反之亦然?
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 入门指北之弹窗和提示(干货)

,请注意看 fab 和值变化: ?...BottomSheet BottomSheet 看命名就知道是从底部弹出菜单,展示 BottomSheet 两种方式,分别是 showBottomSheet 和 showModalBottomSheet...,两种方式只有在展示类型上差别,方法调用无差,而且 showBottomSheet 和 fab 组合动画,showModalBottomSheet 则没有,看下实际例子吧。...在 ListView 中增加一个 BottomSheet 按钮,因为 BottomSheet 需要 context 也不能是 Scaffold 下 context,所以需要通过 Builder 进行包裹一层...可以看到 showBottomSheet 会充满整个屏幕,然后 fab 会跟随一起 AppBar 底部位置,而 showModalBottomSheet 展示高度不会超过半个屏幕高度,但是 fab

2.2K20
  • JetPack Material Design 组件简单介绍

    主要是要注意涉及小红点 val mBnv = findViewById(R.id.bnv) val badgeDrawable...BottomSheetDialog.gif 7.MaterialButton 这个相对简单,没啥介绍,唯一亮点地方就是含有iconbutton,但其实这些一般都会在项目里面有,而且也用不到那么多功能...8.MaterialCardView 这个和CardView差别也不大,主要是背景色设置区别,是app开头属性 9.MaterialCheckBox 这个和CheckBox可以说完全没有区别,继承自...cornerSize表示设置大小,RelativeCornerSize和AbsoluteCornerSize,RelativeCornerSize构造方法接收一个百分比,范围0-1;AbsoluteCornerSize...CornerFamily,它表示处理方式,ROUNDED和CUT两种,ROUNDED是圆角,CUT是直接将圆角部分裁切掉. setAllCornerSizes(ShapeAppearanceModel.PILL

    1.9K20

    Android 之BottomsheetDialogFragment仿抖音评论底部弹出对话框效果(实例代码)

    FrameLayout bottomSheet = dialog.getDelegate().findViewById(R.id.design_bottom_sheet); if (bottomSheet...) bottomSheet.getLayoutParams(); layoutParams.height = getPeekHeight(); //修改弹窗最大高度,不允许上滑(默认可以上滑) bottomSheet.setLayoutParams...; i++) { ShareItem item = new ShareItem(); item.setIcon(imgArry[i%4]); mShareList.add(item); } } } 以下几点需要注意...) bottomSheet.getLayoutParams(); layoutParams.height = getPeekHeight(); //修改弹窗最大高度,不允许上滑(默认可以上滑) bottomSheet.setLayoutParams...getSupportFragmentManager(), "dialog"); } }); 到此这篇关于Android 之BottomsheetDialogFragment仿抖音评论底部弹出对话框效果(实例代码)文章就介绍这了

    4.9K61

    BottomSheetDialog 使用详解,设置圆角、固定高度、默认全屏等

    其实细分来说,是BottomSheet、BottomSheetDialog、BottomSheetDialogFragment 2.BottomSheet 与主界面同层级关系,可以事件触发,如果有设置显示高度的话...默认无此状态(可通过app:behavior_hideable 启用此状态),启用后用户将能通过向下滑动完全隐藏 bottom sheet 3.BottomSheetDialog 可以看到弹出来之后是一个半透明蒙层...behavior = BottomSheetBehavior.from(view) //设置弹出高度 behavior.peekHeight = 350 } 一个...behavior.addBottomSheetCallback(bottomSheetCallback); behavior.setHideable(cancelable); } return container; } 这里...8.设置默认全屏显示 既然了上面的方法,是不是思路了,那有人说了,我把高度设置全屏不就完事了吗 事实上还真不行,BottomSheetDialogFragment只会显示实际高度,即布局有效高度,即使根布局高度

    4K30

    Android:最新版浮动按钮制作

    UI设计给我出了个难题:在一个界面上设计一个始终位于屏幕右下角浮动按钮 翻阅好多博客(几乎都是几年前):都是说要导入这么一个依赖 compile ‘com.getbase:floatingactionbutton...几经摸索,也没找到最新版Floatactionbutton正确依赖。...突然想到,新建项目个Basic Activity,里面正好有这么个玩意,如图可见 于是新建项目,研究源码,果然适用SDK最新版本。 当然还有各种各样坑,也顺便记录一下。...app:fabSize条件浮动按钮大小,normal正常大小,mini迷你大小。 android:layout_gravity:控制按钮位置。...最后一个问题,如何将按钮浮动到其他页面上,Basic项目是这么做。 先设计按钮界面,然后通过 include引入底层页面,完美解决。 示例源码: <?

    97420

    建站四部曲之移动端篇(Android+上线)

    兴趣看源码吧 有关材料设计,我写过一个系列:详见--Android材料设计Material Design 开篇前言 3.1:BottomNavigationBar使用: 为了方便起见,我写了一个...} ---- 3.4:BottomSheet与FloatingActionButton结合 mBottomSheetBehavior = BottomSheetBehavior.from(mBottomSheet..., boolean show) { //获取fab头顶高度 int hatHeight = coordinatorLayout.getBottom() - fab.getBottom...ttt.png ---- 3.上线 好吧,不是上传到各大市场,毕竟现在个人app很难上去 在前端界面上提供下载地址,很简单,拷服务器上就行了,然后访问就能下载了 ?...下载2.png ---- 基本上点都讲到了,虽然不是面面俱,整体hold住就差不多了 源码在最后,兴趣可以看看,总结以下,到此为止,用了五天时间做了以下事: 1.使用SpringBoot

    77530

    Flutter lesson 7: Flutter组件之基础组件(三)

    icon图标 }) 属性很多,能用到也就那么几个,大部分都是使用默认值。...除了onPressed是必选以外,其余属性基本上用不是特别的多,一些没有涉及属性,兴趣可以自己下来了解。..., this.backgroundColor, this.heroTag = const _DefaultHeroTag(), //hero效果使用tag,系统默认会给所有FAB使用同一个tag...bottomSheet 底部划出组件,一般很少直接使用,而是使用showModalBottomSheet弹出,比如从底部弹出分享框。...总结 Flutter基础组件就讲到这里,涉及大都是常用组件,部分东西没有涉及或者说没有详细说明,可能是因为我认为不用过多说明,可能是因为没有太多时间,也可能是因为我自己也不看明白,如果你不懂

    1.5K50

    处理视觉冲突 | 手势导航 (二)

    在上一篇文章中,我们介绍了如何将应用构建全面屏设备。然而有些交互可能导致应用某些视图被系统栏遮盖,导致用户无法看见或操作。本文正是为帮助您解决这个问题而撰写——如何判断安全交互区域。...我们来看一个使用系统窗口区域例子。我们一个悬浮操作按钮 (FAB),它位于屏幕右下角,距离屏幕边缘 16dp (这符合设计指南中要求)。...具体本例中,FAB 位于底部右侧边缘附近,因此我们可以使用 systemWindowInsets.bottom 和 systemWindowInsets.right 值来增加 FAB 下方和右方边距...这里让我们仍然使用 FAB 来举例: 注意看上图,在导航栏模式下,FAB 不会进入导航栏占据高度 (48dp)。...从屏幕底部开始向上滑动,可以让用户切换最近使用应用 (Recent)。 在系统手势区域中,系统手势操作优先于应用自己手势操作。您可能已经注意系统手势区域两个获取方法。

    2.8K30

    Android Socket通讯 之 表情列表优化、业务逻辑优化

    效果如下图所示: 正文   本文优化,从逻辑、UI和功能三个方向上进行,之前代码实际上是一些逻辑问题。...= null 在发送消息客户端时候对这个线程池进行初始化,并且执行子线程,修改sendToClient()函数,代码如下: fun sendToClient(msg: String) {...= null 在发送消息服务端时候对这个线程池进行初始化,并且执行子线程,修改sendToServer()函数,代码如下: fun sendToServer(msg: String) {...① BottomSheet使用   Android中布局可以实现这样功能,因为底部是一样,所以可以写在一起,目前我们先这么来写,后续可能会有改动。...,这里我把它抽离这个函数中。

    91610

    一种更优雅Flutter Dialog解决方案

    pop页面方法,会把跳转页面pop掉 上面是一种很常见场景,涉及复杂场景更加难以预测,解决方法也有:定位页面栈栈顶是否是Loading弹窗,选择性Pop,实现麻烦 上面这些痛点,简直个个致命,当然...bottomSheet; final bool?...return false; } return true; } else { return true; } } } 几个问题解决方案 穿透背景 穿透背景俩个解决方案...很明显translucent是希望,尝试了几次,然后成功实现了想要效果 注意,这边几个坑点,提一下 务必使用Listener控件来使用behavior属性,使用GestureDetector中behavior...区分 最后 这个库花了一些时间去构思和实现,算是解决几个很大痛点 如果大家对返回事件什么好处理思路,麻烦在评论里告知,谢谢!

    3.6K41

    管理经济学 读书笔记 一

    锚定效应:消费者将专注于商品价格牌,轻易被零售商提供折扣所吸引 Anchoring: Consumers anchor on the list price and are attracted by...性质 自身价格弹性是一个负数 自身价格弹性是一个纯数值 自身价格弹性范围是从0无穷大 3 弹性/刚性需求 价格弹性:如果某种产品价格上涨1%导致其需求量下降超过1%,我们就说产品需求是价格弹性...(price elastic)或相对于价格弹性。...绝对值大于1 需求相对于价格弹性:某种产品价格一定比例上涨导致其需求量更大比例下降,我们也称该产品需求相对于价格弹性。...直观因素 可用生产能力,有生产能力 弹性 时间调整。

    2.7K31

    消费机器人走入家庭,这次啥不一样?

    消费型机器人(Consumer Robots)已经出现在我们生活中——虽然比有些人预期时间缓慢,但这样情势即将发生改变。 机器人来了!这是我们早已知道事了。...主要用于装配线工业机器人已经存在几十年了,但其应用仍呈指数级成长。另一方面,消费型机器人则以较缓慢步伐出现在我们生活中,但这样情况即将发生改变。...市调公司Juniper Research预测,2020年,全美10%家庭至少会有一个机器人,较2016年4%微幅增加。 ?...在 《零边际成本社会》(The Zero Marginal Cost Society)这本畅销书中,作者Jeremy Rifkin指出:“透过3D打印机,产品也能客制化,以最低成本创造出量身定做单一产品或小量生产...(来源:Juniper Research) 机器人专家不必再受到现成可用组件束缚,他们现在可以在舒适办公室、家庭或附近工作坊(Fab Lab),随时设计与打印自已想要组件。

    51470

    真的不值得重视吗?ETH Zurich博士重新审视贝叶斯深度学习先验

    近年来,如何将模型与深度学习相结合也引发了研究者兴趣。...贝叶斯建模主要思想是使用一些观察数据 D 来推断模型参数θ后验分布,采用贝叶斯定理如下: 其中 p(D|θ)是似然,p(D)是边际似然(或证据),而 p(θ)是先验,D * 是未见过新数据...但相比先验,人们注意力更多地集中在后验预测性质上,比如预估以上等式积分或使用边际似然进行贝叶斯模型选择。...遵循先验错误指定考量,作者建议考虑 BNN 替代先验并在论文中回顾了在权重空间和函数空间中定义先验,还展示了如何将这些思想扩展神经网络(贝叶斯)合奏。...而且,在某些情况下,甚至可以仅从数据中学习这些模型有用先验。

    34110
    领券