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

如何像最近的谷歌设计那样让AppBarLayout浮动在内容之上

AppBarLayout是Android Design Support Library中的一个控件,用于实现Material Design风格的应用栏。它可以让应用栏在滚动时具有浮动效果,即当内容滚动时,应用栏可以跟随滚动并浮动在内容之上。

要实现像最近的谷歌设计那样让AppBarLayout浮动在内容之上,可以按照以下步骤进行操作:

  1. 首先,在项目的build.gradle文件中添加Design Support Library的依赖:
代码语言:txt
复制
implementation 'com.android.support:design:28.0.0'
  1. 在布局文件中,将AppBarLayout作为顶层容器,并将内容布局放在NestedScrollView或RecyclerView中,以支持滚动效果。例如:
代码语言:txt
复制
<android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.AppBarLayout>
        <!-- 定义应用栏的内容,如Toolbar、TabLayout等 -->
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView>
        <!-- 定义内容布局 -->
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
  1. 在AppBarLayout中,可以添加Toolbar、TabLayout等作为应用栏的内容。例如:
代码语言:txt
复制
<android.support.design.widget.AppBarLayout>
    <android.support.v7.widget.Toolbar>
        <!-- 定义工具栏的样式和功能 -->
    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout>
        <!-- 定义选项卡的样式和功能 -->
    </android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
  1. 在代码中,可以通过设置AppBarLayout的滚动行为来实现浮动效果。例如:
代码语言:txt
复制
AppBarLayout appBarLayout = findViewById(R.id.appBarLayout);
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams();
AppBarLayout.Behavior behavior = new AppBarLayout.Behavior();
behavior.setDragCallback(new AppBarLayout.Behavior.DragCallback() {
    @Override
    public boolean canDrag(@NonNull AppBarLayout appBarLayout) {
        return false; // 禁止手动拖动AppBarLayout
    }
});
params.setBehavior(behavior);

通过以上步骤,就可以实现类似谷歌设计中的AppBarLayout浮动在内容之上的效果。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云移动开发平台:https://cloud.tencent.com/product/mwp
  • 腾讯云云原生应用引擎:https://cloud.tencent.com/product/tccli
  • 腾讯云音视频处理:https://cloud.tencent.com/product/mps
  • 腾讯云人工智能:https://cloud.tencent.com/product/ai
  • 腾讯云物联网平台:https://cloud.tencent.com/product/iotexplorer
  • 腾讯云存储:https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务:https://cloud.tencent.com/product/baas
  • 腾讯云元宇宙:https://cloud.tencent.com/product/vr
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Material Design中一些趣事

当然了,这个是我完成任务之后又写一个demo,大家可能会想到这里用谷歌极力推荐我们使用一个全新设计语言——Material Design,然后再配上谷歌下拉刷新控件SwipeRefreshLayout...,刷新时候我们还需要注意一点,就是当你把toolbar里面的内容(也就是整个头部)顶上去之后,再下拉,它会立马进行刷新,不会等到你把toolbar中内容拉到正常状态再进行刷新,详细解决方案请参考 CoordinatorLayout...AppBarLayout 结合下拉刷新 上拉加载更多 滑动冲突解决 也就是说我们需要监听appbarlayout滚动 appBarLayout.addOnOffsetChangedListener...,因为我们每次Activity中调用adapter.getItem时候adapter都会创建一个新Fragament对象,然后你之前初始化过一些东西就会没了,然后当你设置数据时候就回空指针了...来看一下我们如何调用set方法: ((Fragment) FragmentPagerAdapter.getItem(position)).setDatas(datas); 这一篇主要讲的是在做这个效果时候所需要注意地方

48110

细说 AppbarLayout,如何理解可折叠 Toolbar 定制

本文涉及内容主要有 AppBarLayout 与 CollapsingToolbarLayout 属性与 API 细节。 内容较多,下面,开始一一道来。...而后来随着 Material Design 设计出现,它又提供了 AppBar 概念,而 AppBarLayout 则是 AppBar Android 中代码实现。 ?...AppBarLayout 基本使用方法 AppBarLayout 是 android support design 这个支持包中类,前面说过它一切效果都建立 CoordinatorLayout 这个父类容器之上...可能大家注意到了上面示例中有 app:layout_scrollFlags 这样属性,大家一定很好奇,它们是如何作用。不要着急,下面就讲这一块内容。...> 布局文件中添加一个图标,然后监听 AppBarLayout 滑动来改变自身透明度。

2.6K30

Material Design 实战 之 第六弹 —— 可折叠式标题栏(CollapsingToolbarLayout) & 系统差异型功能实现(充分利用系统状态栏空间)

1.2 CollapsingToolbarLayout不能独立存在, 它在设计时候就被限定只能作为AppBarLayout直接子布局来使用。...不过CollapsingToolbarLayout不能独立存在,它在设计时候就被限定只能作为AppBarLayout直接子布局来使用。...接下来CollapsingToolbarLayout中定义标题栏具体内容: .........,为了界面更加美观,CardView和TextView上都加了一些边距。...所以这里需要一个系统差异型效果,即 对于Android5.0及之后系统使用背景图和状态栏融合模式; 之前系统中使用普通模式; 背景图和系统状态栏融合,需要借助Android:fitsSystemWindows

2.2K40

Android仿微博个人详情页滚动到顶部实例代码

个人详情页滑动到顶部 最近产品提了个新需求,需要实现点击App内某个按钮跳转到个人详情页并且滑动到顶部,个人详情页页面交互稍微复杂,技术角度上包含了状态栏颜色变换,view滑动联动等问题,技术实现上采用了...目前我们要实现是,进入当前页面时,强制AppBarLayout滑动到顶部,使toolbar悬浮固定不动。...那么该怎么做呢,一种思路是onCreate()方法中,发post任务,页面渲染结束后,执行post任务,post任务是调用AppBarLayoutAPI方法,AppBarLayout往上滑。...CoordinatorLayout这套组件里面体现淋漓尽致。感兴趣可以好好分析下CoordinatorLayout是如何完成事件分发如何子view相互联动。...向上滑动了mCollapsingHeight高度,那么这个高度值是如何计算出来呢。

1.1K20

Google | 机器学习小白教程

对机器如何自学感到很困惑?这里提供对机器学习综述以供参考。 最近谷歌深度学习第二代引擎“TensorFlow”引来众人关注,但也引来了关于人工智能领域疑惑。机器学习究竟是什么?...本例中,结果发现,这些分数与模型并不匹配,有的分数预测趋势线之上,有的分数趋势线之下,如图: ? 现在,是时候机器学习“学习者”登场了。...正如我所说,机器学习来预测测试成绩只是牛刀小试。但是同样系统能够被用来做很复杂事情,例如识别图片中猫。 计算机不能人类那样看事物。那么谷歌如何其识别物体呢? ?...那个画出来一样图片被称为深度梦境(deep dream),它是谷歌发布并公开关于机器学习如何识别物体信息深度梦境代码中产生图片。...谷歌并没有涉及具体细节,事实上,整个讨论过程中并没有提到。但在会谈中提到了之前没有发布内容。 为什么?基本来说,为了竞争。谷歌分享了其中很多机器学习内容,甚至某些领域中涉及到了具体细节。

95770

【CSS】323- 深度解析 CSS 中浮动

对于浮动这篇文章解析狠透彻 ~ 写在最前 习惯性去谷歌翻译看了看 float 解释: ?...从上图会发现,即使图片浮动了,脱离了正常文档流,也覆盖没有浮动元素上了,但是其并没有将文本内容也覆盖掉,这也证实了float这个api在当初被设计出来主要目的:实现文字环绕图片排版功能。...我们可以看到,设置absolute容器,才是意义上完全脱离正常文档流。覆盖在当前位置上所有容器和文本内容之上。对比思考一下,会发现这又证明了float被设计出来主要目的。...这里我故意在伪元素content写了一些文本内容,同时加了背景色,有点基佬色。。。 ---- OK,先看整体效果图吧: ? 不出意外,从上图可以看到,外部矛盾被解决了。...我故意content显示出来,会发现伪元素清除浮动核心原理其实是在给父元素增加块级容器,同时对块级容器设置clear属性,使其能够清除自身浮动,从而正常按照块级容器排列方式那样排列浮动元素下面

96720

算法时代,是什么智能和人类越来越

算法告诉我们该如何思考,而这正在改变我们。随着计算机学会如何模仿,我们是否正开始变得越来越它们呢?...硅谷正越来越多地预测人们会如何回复电子邮件,会对某人 Instagram 照片做出什么样反应,越来越多地决定人们有资格享受哪些政府服务,不久以后,即将到来谷歌语音助理 Google Assistant...早在 2015 年,他们新版 News Feed 信息流设计初衷就是筛选用户订阅内容,使其变成个性化报纸,用户能够看到与他们之前曾点赞、分享和评论内容相关东西。...麦克纳米(Roger McNamee)最近在《时代》(Time)杂志上所写那样,“ Facebook 上,事实不是绝对;它们是一种选择,最初留给用户和他们朋友决定一种选择,但随后被算法放大,以便促进传播和用户互动...有证据表明,算法可能影响了英国公投或 2016 年美国总统大选结果。 “Facebook 算法推崇极端信息,而非中性信息,这会虚假信息凌驾于真实信息之上阴谋论凌驾于事实之上。”

65200

「资深前端工程师总结」前端面试知识点大全—CSS篇

预处理器:less,sass等等(给css其他程序语言一样,加入一些编程元素,css能其他程序语言一样做一些预定处理,然后就有了css预处理器)喜欢Sass,less,stylus。...(2)overflow:hidden;transition:all 1000ms ease; 24、什么是响应式设计?响应式设计基本原理是什么?如何兼容低版本IE?...同理,after是主体内容之后显示。想插入内容出现在其它内容前,使用::before,之后使用::after;代码顺序上,::after生成内容也比::before生成内容靠后。...如果按堆栈视角,::after生成内容会在::before生成内容之上 27、如何修改chrome记住密码后自动填充表单黄色背景 ?...它允许你将一个页面涉及到所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入图片就不会以前那样一幅一幅地慢慢显示出来了。

1.5K30

Material Design Android 中应用

先说说完成这个APP事前准备: 1. 主题 主题是最近非常火「终结者2:审判日」 2. 数据 数据是自己本地写json数据,很是尴尬,然后部署到七牛云上。地址是:WeaponInfo 3....确实,技术分享本来目的不就是为了那些对分享主题不熟悉的人能有个大概了解,能够从中收获到一些自己领域中得到应用技能,这就足够了。因此,分享之前,自己要对分享知识点有个充分了解。...越读越能感受到它妙处,假如你能严格按照它规范进行开发项目,哪怕你不是专业UI设计师,相信你产品一定会不难看。 那接下来就主要介绍一下Material DesingAndroid中应用。。...跟随着15年Android 5.0问世,谷歌设计师们还给我们带来一系列具有Material Design风格控件。这些控件被统一放置support design库中,以供开发中使用。...6、CardView 列表结构写好了,里面内容得优化吧,CardView自带圆角和阴影效果,每个Item看起来就非常自然,正如其名卡片一样,也符合了Material Design特点。

1.2K20

如何做一个好前端重构工程师

Yahoo和Google两栏都未用浮动,唯一不同是Yahoo用了绝对定位方法,而谷歌用了inline-block,Google已经宣布旗下一些产品放弃对IE8 支持,所以Google可以大胆使用...从专业角度: 明确自身定位 目前国内将前端分为重构和JS开发并不多,虽然PS是重构必用一个软件,但要知道重构不是"切图仔",切图只是重构工作内容一部分。...同时也一个城堡各扇门,哪边门造不好,敌人枪火就可以马上攻破,所以打好基础是前端学习更多知识基石。...平时自己工作遇到了一些好工作方法或者对一些新技术研究可以拿出来和大家分享。重构团队氛围很重要,谁都不希望呆在一个整天只管自己写代码团队,那样不管对于个人还是团队都是不利。...作为重构,很多人拿到设计稿之后就是开始埋头切图,用各种"奇技淫巧"实现各种需求,我们甚至不会在拿到设计稿之后仔细做一下分析:如何做一个合理架构、如何抽取合适模块、如何用更优雅方式和轻量代码实现页面中需求

95580

面试必备 css面试必考点

12 一个满屏品字布局如何设计?...补充: static(默认)/relative:简单说就是它父元素内容框(即去掉padding部分) absolute: 向上找最近定位为absolute/relative元素 fixed:...响应式设计基本原理是什么?如何兼容低版本IE? 响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端,而不是为每一个终端做一个特定版本。...可以实现动画效果. webp格式是谷歌2010年推出图片格式,压缩率只有jpg2/3,大小比png小了45%。缺点是压缩时间更久了,兼容性不好,目前谷歌和opera支持。...下可能会出现FOUC现象(即样式失效导致页面闪烁问题) 44 CSS属性overflow属性定义溢出元素内容内容如何处理?

1.1K10

建造一个人造大脑,现在就可以

神经形态研究人员仍然努力研究如何成千上万的人工神经元一起工作,以及如何把类脑活动转变为有效工程应用。 尽管仍有种种困难,这仍带来新曙光:可用于移动和穿戴设备更小芯片,已经距离我们不远。...由于浮动栅极存储器可在很宽范围内编程,与很多纳米器件相比,可以更容易地进行微调,以补偿器件与器件之间制造差异。一些试图将纳米器件集成到设计神经元研究小组,最近正在使用浮动栅极器件。...那么,我们该怎样把这些大脑一样组件组合起来呢?人脑中,神经元和突触混在一起,因此,神经形态芯片设计者也必须采用更加集成方法,将所有神经元件都集成一个芯片上。...事实也正是如此,现在整个行业都建立大脑启发的人工智能和深度学习基础之上,这项技术应用改变了移动设备、金融机构,以及我们互动方式。...宽泛基于大脑工作原理模型上,我们已经走了很远。但神经科学研究能让我们设计出更复杂类脑计算机。 与用我们自己大脑,来学习如何建立新大脑先比,还有什么事能称为更大壮举呢?

68050

50道 CSS 经典面试题(包含答案)

6 如何居中div?如何居中一个浮动元素?如何绝对定位div居中?...响应式设计基本原理是什么?如何兼容低版本IE? 响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端,而不是为每一个终端做一个特定版本。...解决方法: 可以将代码全部写在一排 浮动li中float:left ul中用font-size:0(谷歌不支持);可以使用letter-space:-3px 40 display:inline-block...可以实现动画效果. webp格式是谷歌2010年推出图片格式,压缩率只有jpg2/3,大小比png小了45%。缺点是压缩时间更久了,兼容性不好,目前谷歌和opera支持。...下可能会出现FOUC现象(即样式失效导致页面闪烁问题) 44 CSS属性overflow属性定义溢出元素内容内容如何处理?

95730

50道CSS面试题(附答案)

6 如何居中div?如何居中一个浮动元素?如何绝对定位div居中?...补充: static(默认)/relative:简单说就是它父元素内容框(即去掉padding部分) absolute: 向上找最近定位为absolute/relative元素 fixed:...响应式设计基本原理是什么?如何兼容低版本IE? 响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端,而不是为每一个终端做一个特定版本。...可以实现动画效果. webp格式是谷歌2010年推出图片格式,压缩率只有jpg2/3,大小比png小了45%。缺点是压缩时间更久了,兼容性不好,目前谷歌和opera支持。...下可能会出现FOUC现象(即样式失效导致页面闪烁问题) 44 CSS属性overflow属性定义溢出元素内容内容如何处理?

1.5K30

CSS魔法堂:你一定误解过Normal flow

然后会看到"绝对定位和浮动定位能脱离文档流",从这句可以看到文档流和绝对定位、浮动定位是同一个范畴概念,再后来W3C标准文档找到关于Absolute positioning和Float内容,却怎么也找不到...当我们采用绝对定位或浮动定位时,就没有必要再讨论IFC和BFC了。那么说绝对定位和浮动定位会元素产生新BFC又是怎么说呢?  我是这样理解。...首先绝对定位和浮动定位必须产生新BFC,就想根元素会产生默认BFC那样,供采用常规流块级子孙盒子使用。...但Collapsing margins这种由BFC引起行为特征,由于盒子本身不再受原来BFC影响,自然就不会出现Collapsing margins了。...参与BFC盒子独占一行,我想大家应该没有异议了,但具体是如何独占法呢?看等式吧!

61470
领券