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

CollapsingToolBarLayout和NestedScrollView平滑滚动问题

CollapsingToolbarLayout和NestedScrollView是Android开发中常用的两个组件,用于实现可折叠的标题栏和平滑滚动效果。

  1. CollapsingToolbarLayout(可折叠标题栏布局):
    • 概念:CollapsingToolbarLayout是一个可以实现标题栏折叠效果的布局容器,通常与AppBarLayout一起使用。
    • 分类:属于Android Support Design库中的一个组件。
    • 优势:可以实现动态的标题栏折叠和展开效果,提升用户界面的交互体验。
    • 应用场景:适用于需要在滚动过程中动态改变标题栏的视觉效果的界面,例如新闻详情页、个人主页等。
    • 腾讯云相关产品和产品介绍链接地址:暂无。
  • NestedScrollView(嵌套滚动视图):
    • 概念:NestedScrollView是一个可以嵌套滚动的ScrollView,可以在其中嵌套其他可滚动的视图。
    • 分类:属于Android Support库中的一个组件。
    • 优势:可以实现在一个滚动容器中嵌套多个可滚动的子视图,方便实现复杂的滚动效果。
    • 应用场景:适用于需要在一个滚动容器中嵌套多个可滚动视图的界面,例如长列表页面中嵌套横向滚动的广告栏等。
    • 腾讯云相关产品和产品介绍链接地址:暂无。

总结: CollapsingToolbarLayout和NestedScrollView是Android开发中常用的两个组件,分别用于实现可折叠的标题栏和嵌套滚动效果。CollapsingToolbarLayout可以实现动态的标题栏折叠和展开效果,适用于需要在滚动过程中动态改变标题栏的视觉效果的界面;NestedScrollView可以在一个滚动容器中嵌套多个可滚动的子视图,适用于需要在一个滚动容器中嵌套多个可滚动视图的界面。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

其中, scroll表示CollapsingToolbarLayout会随着水果内容详情的滚动一起滚动, exitUntilCollapsed表示当CollapsingToolbarLayout随着滚动完成折叠之后就保留在界面上...这里在CollapsingToolbarLayout中定义了一个ImageView一个Toolbar,也即这个高级版的标题栏是由普通的标题栏加上图片组合而成的。...> 我们知道ScrollView允许使用滚动的方式来查看屏幕以外的数据, 而NestedScrollView...在此基础之上增加了嵌套响应滚动事件的功能。...由于CoordinatorLayout本身已经可以响应滚动事件了, 因此我们在它的内部就需要使用NestedScrollView或RecyclerView这样可以响应滚动事件的布局。

2.2K40

Android开发笔记(一百三十五)应用栏布局AppBarLayout

RecyclerView是其中一个特工,它可用来替代ListViewGridView;替代ScrollView的则另有其人,它便是嵌套滚动视图NestedScrollView,在Android5.0之后的...> 话说除了RecyclerViewNestedScrollView,还有哪些控件可以触发...首先得弄清楚为什么AppBarLayout划分了这几种滚动行为,所谓知其然,还要知其所以然,才更有利于记忆理解。...1、AppBarLayout的滚动依赖于主体视图的滚动,与主体视图相对应的,可将AppBarLayout称作头部视图。既然一个页面分为头部主体两部分,那么就存在谁先滚谁后滚的问题了。...同时声明scrollenterAlways,滚动效果如下图所示: ? 后面三个标志都与CollapsingToolbarLayout有关,得配合该控件才能观察细节差异。

1.8K40

CoordinatorLayout使用全解析

> 可以发现在官方提供的例子中,出现了许多的控件,这些控件都CoordinatorLayout配合出各种效果,接下来我们就先简单介绍一下这些控件。...AppBarLayout的子布局有5种滚动标识(上面代码CollapsingToolbarLayout中配置的app:layout_scrollFlags属性): scroll:所有想滚动出屏幕的view...当CollapsingToolbarLayout的子布局设置了parallax模式时,我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子,值为:0~...NestedScrollView 在新版的support-v4兼容包里面有一个NestedScrollView控件,这个控件其实普通的ScrollView并没有多大的区别,这个控件其实是Meterial...在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView上添加app:layout_behavior。

1.9K20

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

所以除了使用 NestedScrollView,我们还经常使用 RecyclerView SwipeRefreshLayout 作为配套的嵌套滑动组件,这是其它博文都没有提到的,希望大家注意。...而 enterAlways 这个标志与 scroll 配合使用可以改变这种行为,enterAlways 起作用时,当手指向下滑动时,Toolbar 会 NestedScrollView 一起滑动,它们是同时滑动的...因为有 enterAlways 的存在,Toolbar 会 NestedScrollView 一起响应滑动,但是又因为 enterAlwaysCollapsed 的存在,它的这种行为被限定了。...CollapsingToolbarLayout 可以控制的子 View 滚动模式有 3 种: none 默认,无任何效果 Parallax 视差滚动 pin 固定某个 View 它通过 xml...就是滚动的速度不同,造成的视觉差异效果。也就是说 CollapsingToolbarLayout 中有的 view 滚动的快一些,其它的滚动的慢一些。

2.6K30

学习使用Material Design控件(四)Android实现标题栏自动缩放、放大效果

AppBarLayout 可以让包含在其中的控件响应被标记了ScrollingViewBehavior的View的滚动事件 CollapsingToolbarLayout 可以控制包含在CollapsingToolbarLayout...其中的控件,在响应collapse时是移除屏幕固定在最上面 TabLayout 结合ViewPager,实现多个TAB的切换的功能 NestedScrollView 与ScrollView基本相同...,不过包含在NestedScrollView中的控件移动时才能时AppBarLayout缩放 Layout布局 <?...TabLayout的使用说明可以参考探索新的Android Material Design支持库 代码实现 //Toolbar Toolbar toolbar = (Toolbar) findViewById...后,title需要设置到CollapsingToolbarLayoutCollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout

1.2K31

利用 CollapsingToolbarLayout 完成联动的动画效果

最初的想法是自己去利用 Android 的嵌套滚动机制,去实现上面的嵌套滚动效果.但最后为了开发效率直接利用了 CollapsingToolbarLayout CoordinatorLayout...实现效果的原理十分简单,监听 CollapsingToolbarLayout 收缩扩展的距离,换算成你想要的一个范围比如移动的距离,缩放的比例. 部分源码: <android.support.v4.widget.NestedScrollView...有一点提一下,最初我是把布局嵌入到 CollapsingToolbarLayout 中去的,但是由于 CollapsingToolbarLayout 自身的收缩扩展改变了自身高度,会影响里面的 View...的位置,如果按照静态的起始结束位置计算,加上自身高度对 View 布局的影响,这就复杂了,我没有细研究.采用了一个笨拙的方式,用 FrameLayout 把布局给抽取到顶部,不让他们受到 CollapsingToolbarLayout

1.6K10

CoordinatorLayout使用(四):Toolbar的简单使用

这里Toolbar会一直显示 ---- ToolbarNestedScrollView联动 前面不能联动,是因为没有接收的behavior 我们在Toolbar外面添加一个 android.support.design.widget.AppBarLayout...snap: 代码中枚举SCROLL_FLAG_SNAP 在滚动结束后,如果view只是部分可见,它将滑动到最近的边界。...---- 中场小节 CoordinatorLayout中, 如果NestedScrollView要和Toolbar互动的话(CollapsingToolbarLayout等之后在了解,这里不涉及)...这里前面还不太一样,这里是CollapsingToolbarLayout 所以,我们简单在CollapsingToolbarLayout中,添加一个ImageView(自己从小学就比较崇拜的欧拉)...a5-2.gif 大体就这样了 代码见后面的地址 ---- 简单小节 CoordinatorLayout中,NestedScrollViewToolbar联动 注意Toolbar外面要套AppBarLayout

1.4K30

Flutter入门指北(Part 8)之Sliver 组件及NestedScrollView

,基本上 GridView ListView 的用法差不多,所以这边就不多讲这两个部件了。...SliverAppBar 相信很多 Android 开发的小伙伴会用到 MaterialDesign 的 CollapsingToolbarLayout 来实现折叠头部,既然 Android 有的,那么...SliverPadding 那么在 CustomScrollView 中部件之间如何设置间距呢,可能你会想到用 SliverToBoxAdapter 包裹一个 Padding 来处理,当然没问题。...糟透了的翻译 X 1:一个内部能够嵌套其他滚动部件,并使其滚动位置联结到一起的滚动部件 /// The most common use case for this widget is a scrollable...,显示 SliverAppbar 的阴影,主要用来提醒内部的内容低于 SliverAppBar (相当于给人一种物理层次感,否则很容易被认为,头部内容是连接在一起的) 接下来看下 NestedScrollView

2K30

最能解决你的痛点问题,也是你最需要的,尽在Material Design 系列这篇

这篇文章其实我一直在想,是写还是不写,因为关于讲 CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout,Toolbar,TabLayout 等这些控件的使用...哈哈……这次写这篇是对我上一篇《通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout 》遗留问题的加强修改。...第三个问题 CoordinatorLayout协同布局在一般只结合RecyclerViewNestedScrollView使用,所以你用ListView没有效果,如果你硬要用ListView那就比较麻烦了...你去分析源码可以知道RecyclerViewNestedScrollView它们都实现了一个接口NestedScrollingChild,所以我们可以自定义ListView,实现NestedScrollingChild...这就是Material Design系列第六篇之《Android Material Design系列之CoordinatorLayout,CollapsingToolbarLayout等》。

62380

Flutter 首页必用组件NestedScrollView的示例详解

今天介绍的组件是NestedScrollView,大部分的App首页都会用到这个组件。 可以在其内部嵌套其他滚动视图的滚动视图,其滚动位置是固有链接的。...在普通的ScrollView中, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反的方向滚动(例如,允许用户在标签所代表的页面之间水平滑动,而列表则垂直滚动),则该TabBarView...滚动隐藏AppBar 比如实现如下场景,当列表滚动时,隐藏AppBar,用法如下: NestedScrollView( headerSliverBuilder: (BuildContext context...其他属性 通过scrollDirectionreverse参数控制其滚动方向,用法如下: NestedScrollView( scrollDirection: Axis.horizontal, reverse...: true, ... ) scrollDirection滚动方向,分为垂直水平方向。

3.6K40
领券