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

如何在CollapsingToolbarLayout中滚动回收器视图

CollapsingToolbarLayout是Android Support Library中的一个控件,用于实现可折叠的工具栏效果。在CollapsingToolbarLayout中,可以通过添加一个RecyclerView或者ListView作为滚动回收器视图,实现滚动时工具栏的展开和折叠效果。

具体实现步骤如下:

  1. 在布局文件中,使用CollapsingToolbarLayout作为顶层容器,并设置app:layout_scrollFlags属性为scroll|exitUntilCollapsed,以实现滚动时工具栏的折叠效果。
代码语言:txt
复制
<android.support.design.widget.CoordinatorLayout
    ...
    >

    <android.support.design.widget.AppBarLayout
        ...
        >

        <android.support.design.widget.CollapsingToolbarLayout
            ...
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <ImageView
                ...
                app:layout_collapseMode="parallax"
                />

            <android.support.v7.widget.Toolbar
                ...
                app:layout_collapseMode="pin"
                />

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        ...
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

</android.support.design.widget.CoordinatorLayout>
  1. 在代码中,设置CollapsingToolbarLayout的标题和折叠状态的监听器。
代码语言:txt
复制
CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapsingToolbarLayout);
collapsingToolbarLayout.setTitle("标题");

AppBarLayout appBarLayout = findViewById(R.id.appBarLayout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        // 根据verticalOffset的值,可以实现滚动时的一些动画效果
    }
});

至于滚动回收器视图(RecyclerView或者ListView),可以根据具体需求进行设置和使用。例如,可以通过RecyclerView的LayoutManager来控制布局方式,通过Adapter来绑定数据,通过ItemDecoration来设置分割线等。

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

  • 腾讯云移动开发服务:https://cloud.tencent.com/product/mws
  • 腾讯云云原生应用引擎:https://cloud.tencent.com/product/ace
  • 腾讯云数据库服务:https://cloud.tencent.com/product/cdb
  • 腾讯云服务器运维服务:https://cloud.tencent.com/product/cvm
  • 腾讯云音视频服务:https://cloud.tencent.com/product/tcvs
  • 腾讯云人工智能服务: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/mu
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CollapsingToolbarLayout使用

所以,CollapsingToolbarLayout 的使用一定离不开 AppBarLayout 和 Toolbar,并且作为 AppBarLayout 的直接子视图使用。...关于CollapsingToolbarLayout的属性在官网上可以查到,这里我只介绍案例我们常用的几个属性:title标题,布局展开时放大显示在图片底部,布局折叠时缩小显示在Toolbar左侧。...attr/colorPrimaryDark",即style样式定义的沉浸式状态栏颜色。...,效果图中所示;contentScrim内容遮罩,上下滚动时图片上面显示和隐藏的遮罩色,Toolbar位置的的背景色;通常这样设置:app:contentScrim="?...当设置为1.0,滚动列表时图片不会折叠移动; 代码实现: 关于CoordinatorLayout作为根布局容器如何协调子控件之间的交互行为,可以参考上一篇文章,这里我介绍一下本例几个新的注意点。

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

    所以Toolbar的上部边缘是不可以往下拉的,只有下部边缘才能往下拉,这样的视觉效果好比Toolbar电影幕布一般缓缓向下展开。...既然二者原本不是一家,那么就得有新的属性用于区分它们内部的行为,新属性在CollapsingToolbarLayout的子视图节点上声明,说明如下: app:layout_collapseMode :...有以下三个取值说明: --pin : 固定模式,当前视图固定不动,不受CollapsingToolbarLayout的折叠影响。...--parallax : 视差模式,随着CollapsingToolbarLayout的收缩与展开,当前视图也跟着收缩与展开。...CollapsingToolbarLayout折叠多少距离,则当前视图也移动多少距离,通俗地说,就是夫唱妇随。

    3.3K30

    CoordinatorLayout使用全解析

    AppBarLayout的子布局有5种滚动标识(上面代码CollapsingToolbarLayout配置的app:layout_scrollFlags属性): scroll:所有想滚动出屏幕的view...exitUntilCollapsed:当你定义了一个minHeight,此布局将在滚动到达这个最小高度的时候折叠。 snap:当一个滚动事件结束,如果视图是部分可见的,那么它将被滚动到收缩或展开。...,它可以控制包含在CollapsingToolbarLayout的控件(:ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端...当然,Behavior无法独立完成工作,必须与实际调用的CoordinatorLayout子视图相绑定。具体有三种方式:通过代码绑定、在XML绑定或者通过注释实现自动绑定。...ThemeOverlay.AppCompat.Light" /> 然后,我们需要定义AppBarLayout与滚动视图之间的联系

    2.1K20

    界面无小事(九): 做个好看的伸缩头部

    ="pin" app:layout_collapseMode="none" 从xml的参数说吧, 来看CollapsingToolbarLayout的折叠模式....参数 效果 scroll 视图滚动滚动事件直接相关. 需要设置此标志才能使任何其他标志生效....如果在此之前的任何兄弟视图没有此标志, 则此值无效. exitUntilCollapsed 退出(滚动屏幕)时, 视图滚动直到“折叠”. 折叠高度由视图的最小高度定义。...snap 在滚动结束时, 如果视图仅部分可见, 则它将被捕捉并滚动到其最近的边缘. enterAlways 当进入(在屏幕上滚动)时, 无论滚动视图是否也在滚动, 视图都将滚动任何向下滚动事件....一旦滚动视图到达其滚动范围的末尾, 该视图的其余部分将滚动视图中. 折叠高度由视图的最小高度定义.

    98320

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

    那么Android5.0也同时给出了相应的解决方案,即推出MaterialDesign库,通过该库的AppBarLayout控件,对Toolbar加以包装,从而实现顶部工具栏的动态变化效果。...NestedScrollView继承自FrameLayout,其用法与ScrollView相似,都必须且只能带一个直接子视图,都是允许视图上下滚动等等。...1、AppBarLayout的滚动依赖于主体视图滚动,与主体视图相对应的,可将AppBarLayout称作头部视图。既然一个页面分为头部和主体两部分,那么就存在谁先滚谁后滚的问题了。...CollapsingToolbarLayout》。...同时声明scroll和enterAlways,滚动效果如下图所示: ? 后面三个标志都与CollapsingToolbarLayout有关,得配合该控件才能观察细节差异。

    2K40

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

    exitUntilCollapsed - 向上滚动时收缩View,但可以固定Toolbar一直在上面。...enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时,你的View只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。...parallax - 设置为这个模式时,在内容滚动时,CollapsingToolbarLayout的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier...它和scrollview 基本上一样  但是它支持嵌套滚动  嵌套滚动默认是启用的。 还有一个属性,不过蛋疼的是这属性要全手打,没提示不知道怎么破。...定义滚动视图是否应该伸展它的内容来填补视窗。

    94130

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

    ,它可以控制包含在CollapsingToolbarLayout的控件在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。...它是设计用于直接AppBarLayout的子视图。...CollapsingToolbarLayout的子View可以设置这两个属性 1、ayout_collapseMode (折叠模式) - 有两个值: pin - 设置为这个模式时,当CollapsingToolbarLayout...parallax - 设置为这个模式时,在内容滚动时,CollapsingToolbarLayout的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier...除此之外,在设计 Toolbar 的时候,Google也留给了开发者很多可定制修改的余地,这些可定制修改的属性在API文档中都有详细介绍,: 设置导航栏图标; 设置App的logo; 支持设置标题和子标题

    2.3K90

    RecyclerView必知必会

    但是RecyclerView的出现会让很多开源项目被废弃,例如横向滚动的ListView, 横向滚动的GridView, 瀑布流控件,因为RecyclerView能够实现所有这些功能。...获取合适的View,在后文的回收机制中会介绍该方法的具体实现。...那么如何在不破坏原有Adapter实现的情况下完成呢? 这里引入装饰(Decorator)设计模式,该设计模式通过组合的方式,在不破话原有类代码的情况下,对原有类的功能进行扩展。...ArrayList[] mScrapViews;: 每个Item Type对应一个列表作为回收站,缓存由于滚动而消失的View,此处的View如果被复用,会以参数的形式传给getView()...为CollapsingToolbarLayout设置app:layout_scrollFlags="scroll|exitUntilCollapsed",其中scroll表示滚动出屏幕,exitUntilCollapsed

    4.7K20

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

    显然,CollapsingToolbarLayout 的 title 覆盖了 Toolbar 的 title。...CollapsingToolbarLayout 可以控制的子 View 滚动模式有 3 种: none 默认,无任何效果 Parallax 视差滚动 pin 固定某个 View 它通过 xml...就是滚动的速度不同,造成的视觉差异效果。也就是说 CollapsingToolbarLayout 中有的 view 滚动的快一些,其它的滚动的慢一些。...Pinned position children 子类的位置固定行为 这个很好理解,将 CollapsingToolbarLayout 某个子 View 固定,无论是否存在滚动事件,只要设置 app:...如果你想监听 AppBarLayout 的滑动位移信息,那么添加相应的监听就好了。 OnOffsetChangedListener 这是 AppBarLayout 定义的监听

    3K30

    RecyclerView 必知必会

    但是RecyclerView的出现会让很多开源项目被废弃,例如横向滚动的ListView, 横向滚动的GridView, 瀑布流控件,因为RecyclerView能够实现所有这些功能。...那么如何在不破坏原有Adapter实现的情况下完成呢? 这里引入装饰(Decorator)设计模式,该设计模式通过组合的方式,在不破话原有类代码的情况下,对原有类的功能进行扩展。...ArrayList[] mScrapViews;: 每个Item Type对应一个列表作为回收站,缓存由于滚动而消失的View,此处的View如果被复用,会以参数的形式传给getView()...CollapsingToolbarLayout: 实现可折叠的ToolBar。 ToolBar: 代替ActionBar。...为CollapsingToolbarLayout设置app:layout_scrollFlags="scroll|exitUntilCollapsed",其中scroll表示滚动出屏幕,exitUntilCollapsed

    4.2K90

    RecyclerView 必知必会

    但是RecyclerView的出现会让很多开源项目被废弃,例如横向滚动的ListView, 横向滚动的GridView, 瀑布流控件,因为RecyclerView能够实现所有这些功能。...那么如何在不破坏原有Adapter实现的情况下完成呢? 这里引入装饰(Decorator)设计模式,该设计模式通过组合的方式,在不破话原有类代码的情况下,对原有类的功能进行扩展。...ArrayList[] mScrapViews;: 每个Item Type对应一个列表作为回收站,缓存由于滚动而消失的View,此处的View如果被复用,会以参数的形式传给getView()...CollapsingToolbarLayout: 实现可折叠的ToolBar。 ToolBar: 代替ActionBar。...为CollapsingToolbarLayout设置app:layout_scrollFlags="scroll|exitUntilCollapsed",其中scroll表示滚动出屏幕,exitUntilCollapsed

    2.6K70

    使用CoordinatorLayout打造各种炫酷的效果

    52858598 CoordinatorLayout简介 CoordinatorLayout是在 Google IO/15 大会发布的,遵循Material 风格,包含在 support Library,...#000" app:tabTextColor="#fff"/> 如果你不想使用Google 帮我们 封装好的控件的话,你也可以自己自定义一个控件,你可以参考我的这一篇博客仿网易新闻的顶部导航指示...简单来说 ,CollapsingToolbarLayout是工具栏的包装,它通常作为AppBarLayout的孩子。...- 对于AppBarLayout,我们主要 讲解了这个属性app:layout_scrollFlags,设置不同 的属性我们可以在滚动的时候显示不同 的效果 - 对于CollapsingToolbarLayout...,我们主要讲解了app:layout_collapseMode这个属性,设置不同的值,我们可以让其子View呈现不同的 炫酷效果,parallax和pin等 CoordinatorLayout的相关用法还有很多

    5K10

    【Flutter 专题】28 图解 ListViewGridView 混用时滑动冲突小尝试

    尝试一:CustomScrollView + sliver Flutter 提供了类似于 Android CollapsingToolbarLayout 的折叠效果,和尚借此了解到 CustomScrollView...sliver 代表具有特定滚动效果的滚动模型,sliver 本身不包含滚动交互模型,需要通过 CustomScrollView 连接为一个整体。...sliver 有众多具体的 Widget,和尚也在尝试过程。 ?...shrinkWrap 常用于内容大小不确定情况,如果滚动视图(ListView/GridView/ScrollView 等)没有收缩包装,则滚动视图将扩展到允许的最大大小。...primary 如果为 true,即使滚动视图没有足够的内容来支撑滚动滚动视图也是可滚动的。否则,默认为 false 情况下,只有具有足够内容的用户才能滚动视图。 ?

    1.4K41

    Android5.0和6.0之后新增的控件说明

    SwipeRefreshLayout Android 5.0 抽屉布局 DrawerLayout Android 5.0 滑动面板布局 SlidingPaneLayout Android 5.0 嵌套滚动视图...Android 5.0 线性布局管理 LinearLayoutManager Android 5.0 网格布局管理 GridLayoutManager Android 5.0 瀑布流网格布局管理...FloatingActionButton Android 5.0 底部弹窗 BottomSheetBehavior Android 6.0 应用栏布局 AppBarLayout Android 5.0 可折叠工具栏布局 CollapsingToolbarLayout...使用v4控件唯一需要注意的地方,是布局文件要引用完整路径的控件名称,抽屉布局android.support.v4.widget.DrawerLayout、下拉刷新布局android.support.v4...这部分控件数量最多,实现的界面特效最丰富,而且互相之间存在依赖关系,design库依赖于appcompat-v7库,部分design控件NavigationView还依赖于recyclerview-v7

    1.3K20

    用 CoordinatorLayout 处理滚动

    掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:Feximin 总览 CoordinatorLayout 扩展了完成 Google's Material Design 的多种滚动效果的能力...创建折叠效果 如果想创建折叠 ToolBar 的效果,我们必须将 ToolBar 包含在 CollapsingToolbarLayout : <android.support.design.widget.AppBarLayout...ViewPager 的 fragment 和一个父 activity 之间使用协调时,你想像这里描述的那样在ViewPager 上添加 app:layout_behavior 属性,认为这样就可以将 pager 滚动事件向上传递然后就可以被...将你的内容包含在 NestedScrollView ,然后在其上添加 app:layout_behavior 就会使你的滚动行为预期工作。...然而,它似乎不影响滚动这篇博文所述。

    4.8K92
    领券