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

当CollapsingToolbarLayout到达顶部时停止AppBarLayout中的ScrollingView扩展

CollapsingToolbarLayout是Android Support库中的一个控件,用于实现可折叠的工具栏效果。它通常与AppBarLayout和NestedScrollView等控件一起使用。

当CollapsingToolbarLayout到达顶部时停止AppBarLayout中的ScrollingView扩展,可以通过设置AppBarLayout的滚动标志位来实现。具体步骤如下:

  1. 在布局文件中,将CollapsingToolbarLayout、AppBarLayout和NestedScrollView等控件嵌套在一个CoordinatorLayout中。
代码语言:txt
复制
<androidx.coordinatorlayout.widget.CoordinatorLayout
    ...>

    <com.google.android.material.appbar.AppBarLayout
        ...>

        <com.google.android.material.appbar.CollapsingToolbarLayout
            ...>

            <!-- 可折叠的工具栏内容 -->

        </com.google.android.material.appbar.CollapsingToolbarLayout>

        <!-- 其他内容,如标题栏、菜单栏等 -->

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        ...
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- 可滚动的内容 -->

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>
  1. 在代码中,通过监听AppBarLayout的OffsetChanged事件,判断CollapsingToolbarLayout是否到达顶部。
代码语言:txt
复制
AppBarLayout appBarLayout = findViewById(R.id.appBarLayout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        if (verticalOffset == 0) {
            // CollapsingToolbarLayout到达顶部
            // 停止NestedScrollView的滚动扩展
            nestedScrollView.setNestedScrollingEnabled(false);
        } else {
            // CollapsingToolbarLayout未到达顶部
            // 允许NestedScrollView的滚动扩展
            nestedScrollView.setNestedScrollingEnabled(true);
        }
    }
});

这样,当CollapsingToolbarLayout到达顶部时,停止NestedScrollView的滚动扩展,即可实现所需的效果。

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

  • 腾讯云官网:https://cloud.tencent.com/
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 人工智能平台(AI Lab):https://cloud.tencent.com/product/ailab
  • 物联网平台(IoT Hub):https://cloud.tencent.com/product/iothub
  • 移动开发平台(移动推送):https://cloud.tencent.com/product/umeng_push
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 区块链服务(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云元宇宙:https://cloud.tencent.com/solution/virtual-universe
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CoordinatorLayout使用全解析

enterAlwaysCollapsed:假设你定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度时候开始显示,并且从这个时候开始慢慢展开,滚动到顶部时候展开完...,它可以控制包含在CollapsingToolbarLayout控件(如:ImageView、Toolbar)在响应layout_behavior事件作出相应scrollFlags滚动事件(移除屏幕或固定在屏幕顶端...pin:CollapsingToolbarLayout折叠后,此布局将固定在顶部。 parallax:CollapsingToolbarLayout折叠,此布局也会有视差折叠效果。...CollapsingToolbarLayout子布局设置了parallax模式,我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子,值为:0~...假设你定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度时候开始显示,并且从这个时候开始慢慢展开,滚动到顶部时候展开完。

1.9K20

CoordinatorLayout与滚动处理

,app:layout_behavior为自定义效果,当下滑,fab消失,上滑fab显示,详情请查看本人博客 Floating Action Button-Android M新控件 运行图 ?...假设你定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度时候开始显示,并且从这个时候开始慢慢展开,滚动到顶部时候展开完。 ?...exitUntilCollapsed: 同样顾名思义,这个flag定义何时退出,当你定义了一个minHeight,这个view将在滚动到达这个最小高度时候消失。...---- Creating Collapsing Effects(制造折叠效果) 如果想制造toolbar折叠效果,我们必须把Toolbar放在CollapsingToolbarLayout: .support.design.widget.CollapsingToolbarLayout...比如AppBarLayout.Behavior 就定义了这两个关键方法。这个behavior用于滚动发生时候让AppBarLayout发生改变。

70320

NestedScrollView 嵌套 ListView 实现滑动折叠效果

android:fitsSystemWindows,经本人代码测试,表示CollapsingToolbarLayout上边界是否扩展到statusbar,这里如果想使用透明statusbar,这里更新下应该该布局根布局该属性为...enterAlways - 实现quick return效果, 向下移动,立即显示View(比如Toolbar). exitUntilCollapsed - 向上滚动收缩View,但可以固定Toolbar...enterAlwaysCollapsed - 当你View已经设置minHeight属性又使用此标志,你View只能以最小高度进入,只有当滚动视图到达顶部才扩大到完整高度。...,其他CollapsingToolbarLayout子view做相应改变如(视差)或pin(不变)。...题外话3 23.2.0在CoordinatorLayout中使用Toolbar ,toolbar无法与顶部对齐,即顶部存在垂直间距。

3.3K50

通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout

假设你定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度时候开始显示,并且从这个时候开始慢慢展开,滚动到顶部时候展开完。...exitUntilCollapsed: 同样顾名思义,这个flag定义何时退出,当你定义了一个minHeight,这个view将在滚动到达这个最小高度时候消失。...,它可以控制包含在CollapsingToolbarLayout控件在响应layout_behavior事件作出相应scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。...CollapsingToolbarLayout子View可以设置这两个属性 1、ayout_collapseMode (折叠模式) - 有两个值: pin - 设置为这个模式CollapsingToolbarLayout...parallax - 设置为这个模式,在内容滚动CollapsingToolbarLayoutView(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier

2.2K90

使用CoordinatorLayout打造各种炫酷效果

遵循Material 风格,包含在 support Library,结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷效果 CoordinatorLayout...,你也可以自己自定义一个控件,你可以参考我这一篇博客仿网易新闻顶部导航指示器 ---- 在看例子结合ViewPager视觉特差之前 ,我们需要先了解CollapsingToolbarLayout这个控件...(这个View到达 CollapsingToolbarLayout底部时候,这个View 将会被放置,即代替整个CollapsingToolbarLayout) 我们有两种方法可以设置这个常量,...layout_collapseMode=”parallax”,表示视差效果,ToolBar app:layout_collapseMode=”pin”,这个TooBar到达 CollapsingToolbarLayout...底部时候,会代替整个CollapsingToolbarLayout显示 接着说明TabLayout变化 从前面的描述我们已经知道 没有指定app:layout_scrollFlags时候,最终

4.9K10

CollapsingToolbarLayout使用

CollapsingToolbarLayout 可以看到,Toolbar标题放大并在下方显示,当我们向上滑动列表顶部Header部分图片向上折叠隐藏,标题向上移动并缩小,同时以渐显式方式显示蓝色主题...关于CollapsingToolbarLayout属性在官网上可以查到,这里我只介绍案例我们常用几个属性:title标题,布局展开放大显示在图片底部,布局折叠缩小显示在Toolbar左侧。...设置为1.0,滚动列表图片不会折叠移动; 代码实现: 关于CoordinatorLayout作为根布局容器如何协调子控件之间交互行为,可以参考上一篇文章,这里我介绍一下本例几个新注意点。...表示控件向上折叠退出并以最小高度停留在顶部;前面介绍CollapsingToolbarLayout属性介绍到了statusBarScrim使用,其实也可以通过android:fitsSystemWindows...和layout_anchorGravity可以控制FloatingActionButtonbehavior和位置,如上图所示,滚动列表是,FAB按钮会随着AppBarLayout而显示和隐藏,并自带缩放动画

2.4K60

【Android】5.x炫酷标题栏动画使用理解

滑动屏幕,子控件都做出了相应行为(滑出屏幕,固定顶端等),这些行为其实就是AppbarLayout提供给它子控件功能。...我们上面的代码,Toolbar是AppBarLayout第一个子控件,虽然设置了scroll值,但也设置了exitUntilCollapsed值,这个作用是,向上滑动,这个控件也会跟着滑出屏幕...,直到它还留在屏幕内高度达到最小高度(没有设置好像默认就是wrap_content)停止。...所以,CollapsingToolbarLayout就是给这些子控件们安排具体滑动细节,例如:ImageView要实现渐变效果;Toolbar标题要能够有收缩/扩展效果;最上面的子控件不动,下面的先滑动等等效果...至于作用其实就是当你一向下滑动屏幕,控件就能马上显示出来,不必滑到顶端。 snap:当你停止滑到屏幕,控件自动恢复原样或者自动滑到底。

1K60

详解android特性之CoordinatorLayout用法探析实例

当我在AS上新建一个module,系统默认最外层布局不再是我们熟悉五大布局一种,而是一个全新布局:CoordinatorLayout。...那么,效果图就像下面展示莪一样: ? 接下来看一个高级点效果,就是标题栏,也就是ToolBar扩展与收缩效果。...假设你定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度时候开始显示,并且从这个时候开始慢慢展开,滚动到顶部时候展开完。...exitUntilCollapsed: 同样顾名思义,这个flag定义何时退出,当你定义了一个minHeight,这个view将在滚动到达这个最小高度时候消失。...滚动发生时候,CoordinatorLayout会尝试触发那些声明了依赖子view。

85841

Material Design之CollapsingToolbarLayout 相关属性和方法介绍

enterAlways - 实现quick return效果, 向下移动,立即显示View(比如Toolbar)。...enterAlwaysCollapsed - 当你View已经设置minHeight属性又使用此标志,你View只能以最小高度进入,只有当滚动视图到达顶部才扩大到完整高度。...一个问题NestedScrollView高度加上顶部AppBarLayout高度没超过屏幕高低滑动有问题(只能在AppBarLayout范围内才能滑动); <?...--layout_collapseMode (折叠模式) - 有两个值: pin - 设置为这个模式CollapsingToolbarLayout完全收缩后,Toolbar...parallax - 设置为这个模式,在内容滚动CollapsingToolbarLayoutView(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier

88130

AppBarLayout学习

AppBarLayout是什么,效果是怎样 使用AndroidStudio建立一个ScrollActivity,模板就是使用AppBarLayout,不过例子里还使用了CollapsingToolbarLayout...滚动最顶层,子View响应滚动事件,直至子View完全显示 exitUtilCollapsed:只要ScrollView向上滚动,子View立即响应滚动,直到达到最小高度 snap:Scrollview...向下滚动ScrollView滚动顶部了,才继续滚动了。 snap snap是一个根据View在屏幕上显示范围进行调整一个属性,看下效果其实就明白是怎么回事了。...(offset) * 1.0f / toolBarHeight } }) 运行效果如下: 向上滑,offset变化是0-->负数;向下滑,负数--->0。...后面会继续学习与CollapsingToolbarLayout一起使用。

1.1K30

高仿支付宝9.9.2版本生活模块界面来讲解CoordinatorLayout,AppBarLayoutCollapsingToolbarLayout

2.AppBarLayout 其次就是AppBarLayout,去除官方解释,简单来说就是它可以让你定制某个可滚动View滚动手势发生变化时,其内部子View实现何种动作。...enterAlways:值设为enterAlwaysView,ScrollView往下滚动,该View会直接往下滚动。而不用考虑ScrollView是否在滚动。...exitUntilCollapsed:值设为exitUntilCollapsedView,这个View要往上逐渐“消逝”,会一直往上滑动,直到剩下高度达到它最小高度后,再响应ScrollView...,View就暂时不去往下滚动,直到ScrollView滑动到顶部不再滑动,View再继续往下滑动,直到滑到View顶部结束。...CollapsingToolbarLayout只要有这方面: 1.title展开是最大,然后随着收缩会越来越少,直到屏幕顶部,通过app:title设置title,不然就默认。

1.1K20

利用 CollapsingToolbarLayout 完成联动动画效果

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

1.6K10

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

AppBarLayout 虽然和 Toolbar 没有直接联系,但是 Toolbar 内置在 AppbarLayout 时候,Toolbar 效果增强了,这使得开发者非常愿意用 AppBarLayout...CoordinatorLayout 是这个库组织容器,一切基于 support design 扩展出来特性都应该发生在 CoordinatorLayout 及它子 View 体系。 2.... AppBarLayout 内容要从 CoordinatorLayout 外面进入内部,我们用 enter 指代这种行为,对应手势就是向下滑动。... AppBarLayout 内容从 CoordinatorLayout 内部向外部方向移动,我们用 exit 指代这种行为,对应手势是向上滑动。...exitUntilCollapsed 前面讲过 AppBarLayout 内容从 CoordinatorLayout 内部向外部方向移动,我们用 exit 指代这种行为,对应手势是向上滑动

2.6K30

Android开发笔记(一百四十四)高仿支付宝头部伸缩动画

Android5.0推出MaterialDesign库包含了处理头部工具栏多个控件,不但允许自定义顶部导航栏,而且导航栏高度是可以伸缩。...如果你熟悉AppBarLayoutCollapsingToolbarLayout的话,也许可以很快做出类似以上简单界面,具体地说,就是定义一个CoordinatorLayout嵌套AppBarLayout...这个内容视图可以是RecyclerView,也可以是NestedScrollView; 2、AppBarLayout嵌套CollapsingToolbarLayout,这是为了定义导航栏下面需要展开和收缩部分视图...; 3、CollapsingToolbarLayout嵌套Toolbar,这是为了定义导航栏上方无论何时都要显示长条区域,其中Toolbar还要定义两个不同样式布局,用于分别显示展开与收缩状态工具栏界面...这个渐变动画其实可分为两段: 1、导航栏从展开状态向上收缩,头部各控件要慢慢向背景色过渡,也就是淡入效果; 2、导航栏向上收缩到一半,顶部工具栏要换成收缩状态下工具栏布局,并且随着导航栏继续向上收缩

1.1K10

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

个人详情页滑动到顶部 最近产品提了个新需求,需要实现点击App内某个按钮跳转到个人详情页并且滑动到顶部,个人详情页页面交互稍微复杂,技术角度上包含了状态栏颜色变换,view滑动联动等问题,技术实现上采用了...上下滑动会引起AppBarLayout联动,悬浮在顶部,或者是跟着viewPager一起滑动以及视差效果之类。...目前我们要实现是,在进入当前页面,强制让AppBarLayout滑动到顶部,使toolbar悬浮固定不动。...那么该怎么做呢,一种思路是在onCreate()方法,发post任务,页面渲染结束后,执行post任务,post任务是调用AppBarLayoutAPI方法,让AppBarLayout往上滑。...,我们页面布局两部分,最上面的是appBarLayout,规定是距离靠近toolbar高度就产生渐变,toolbar开始固定位置,那么就需要按照这个公式计算mCollapsingHeight。

1.1K20

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

那么Android5.0也同时给出了相应解决方案,即推出MaterialDesign库,通过该库AppBarLayout控件,对Toolbar加以包装,从而实现顶部工具栏动态变化效果。...对于大家关心额外功能,则主要有以下几点: 1、支持响应主体页面的滑动行为,即在主体页面上移或者下拉AppBarLayout能够捕捉到主体页面的滚动操作; 2、AppBarLayout捕捉到滚动操作之后...2、AppBarLayout内部高度也可能变化,比如它嵌套了可折叠工具栏布局CollapsingToolbarLayout,有关可折叠工具栏布局详细介绍参见《Android开发笔记(一百三十六)可折叠工具栏布局...同理,拉动AppBarLayout也有类似情况,松开手指后,AppBarLayout得判断要不要继续向上收缩,或是继续向下展开。...5、snap : 在用户手指松开,系统自行判断,接下来是全部向上滚到顶,还是全部向下展开。 点击下载本文用到应用栏布局工程代码 点此查看Android开发笔记完整目录

1.9K40

Android开发笔记(一百三十六)可折叠工具栏布局CollapsingToolbarLayout

可折叠工具栏布局CollapsingToolbarLayout 上一篇博文《Android开发笔记(一百三十五)应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动,那反过来,...这里要明确一点,Toolbar本身是页面顶部工具栏,其上没有本页面的其它控件了,如果Toolbar被拉下来了,那Toolbar上面的空白该显示什么?...下面是CollapsingToolbarLayout属性说明: app:contentScrim : 指定布局内部未展开背景颜色。...上述属性在代码设置方法如下所示: setContentScrim/setContentScrimColor/setContentScrimResource : 设置布局内部未展开背景颜色。...有关滚动标志 上一篇博文《Android开发笔记(一百三十五)应用栏布局AppBarLayout》说过,AppBarLayout子控件共有五个滚动标志,同时提到后面三个标志与CollapsingToolbarLayout

3.1K30

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券