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

如何正确使用CoordinatorLayout折叠列表标题(无工具栏)

CoordinatorLayout是Android Support Library中的一个布局容器,用于实现复杂的交互效果和协调子视图之间的行为。它可以用于实现折叠列表标题的效果,即当列表滚动时,标题可以随着滚动而折叠或展开。

要正确使用CoordinatorLayout实现折叠列表标题,可以按照以下步骤进行操作:

  1. 导入依赖库:在项目的build.gradle文件中,添加以下依赖库:implementation 'com.android.support:design:28.0.0'
  2. 创建布局文件:在XML布局文件中,使用CoordinatorLayout作为根布局,并在其中添加包含列表和标题的子视图。例如:<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical" /> <TextView android:id="@+id/titleTextView" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="标题" android:textSize="24sp" android:gravity="center" android:background="@color/colorPrimary" android:textColor="@android:color/white" /> </android.support.design.widget.CoordinatorLayout>
  3. 设置滚动行为:在标题TextView的布局参数中,添加app:layout_behavior属性,并设置为@string/appbar_scrolling_view_behavior。这将告诉CoordinatorLayout该视图具有滚动行为。例如:<TextView android:id="@+id/titleTextView" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="标题" android:textSize="24sp" android:gravity="center" android:background="@color/colorPrimary" android:textColor="@android:color/white" app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  4. 处理滚动事件:在Activity或Fragment中,找到标题TextView并设置滚动监听器。根据滚动的距离来调整标题的大小或透明度。例如:RecyclerView recyclerView = findViewById(R.id.recyclerView); final TextView titleTextView = findViewById(R.id.titleTextView); recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { // 根据dy的值来调整标题的大小或透明度 // 例如:根据滚动距离来缩放标题的大小 float scale = 1 - Math.abs(dy) / (float) titleTextView.getHeight(); titleTextView.setScaleX(scale); titleTextView.setScaleY(scale); } });

通过以上步骤,就可以正确使用CoordinatorLayout实现折叠列表标题的效果。当列表滚动时,标题将根据滚动距离进行相应的变化。

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

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

相关·内容

【翻译】MotionLayout实现折叠工具栏(Part 2)

本系列教程中,我会讲解如何使用 MotionLayout 来创建一个我们已经非常熟悉的动画行为:一个折叠工具栏动画( a Collapsing Toolbar )。...通过上一篇文章我们了解了基本的折叠工具栏动画行为,使用的是 MotionLayout ,第一次尝试的效果与在 CoordinatorLayout使用 CollapsingToolbarLayout...让我们先看下 CoordinatorLayout 版本的实现效果,注意图片在工具栏几乎快要完全折叠之前是不会开始渐变到主色彩动画的: ?...最终标题文本会走在工具栏折叠动画之前,接着在折叠完全结束的时候直接回落到正确的位置上: ?...虽然这只是弃用 CoordinatorLayout 过渡动画的一个开始,但是恰恰通过这个例子告诉了我们,如何使用关键帧来帮助我们动态地进行过渡动画修改,实现在同样的过渡中产生不同的动画效果。

1.7K30

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

折叠工具栏布局CollapsingToolbarLayout 上一篇博文《Android开发笔记(一百三十五)应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动,那反过来,...下面是演示折叠模式使用的布局文件例子: <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com...要实现图片的折叠渐变,其实很简单,只需在Toolbar节点前面加个ImageView节点的声明即可,下面是演示折叠模式使用的布局文件例子: <android.support.design.widget.CoordinatorLayout...3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化的工具栏,不会完全看不到工具栏。具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。...> 点击下载本文用到的可折叠工具栏布局的工程代码 点此查看Android开发笔记的完整目录

3.3K30
  • 【翻译】MotionLayout实现折叠工具栏(Part 1)

    本系列教程中,我会讲解如何使用 MotionLayout 来创建一个我们已经非常熟悉的动画行为:一个折叠工具栏动画( a Collapsing Toolbar )。...在我们开始之前,有必要在这里澄清一下:在 CoordinatorLayout使用 CollapsingToolbarLayout 来实现折叠工具栏是没任何问题的。...举个例子,一个折叠工具栏应该根据用户的滚动进行展开和折叠,所以实际动画的运行应该时刻跟随用户的拖拽进行。这也是那些框架办不到的地方。 废话不多说,让我们看下我们所要尝试模拟做到的行为动作。...这里的代码展示了一个折叠工具栏,应用了 Material Components Library 库里的 CollapsingToolbarLayout 和 CoordinatorLayout 布局。...如果我们使用该布局来代替一开始我们就使用CoordinatorLayout 布局来实现,那么我们将会得到这样的行为: ?

    1.9K31

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

    特别喜欢稀土掘金个人界面的样子,那我们就来看看如何实现这个效果吧,要想实现这个效果,肯定需要的是Material Design风格,那就需要学会使用以下控件:CoordinatorLayout,AppBarLayout...”基本实现两个功能: 作为顶层布局 调度协调子布局 CoordinatorLayout使用新的思路通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。...使用CoordinatorLayout需要在Gradle加入Support Design Library: compile 'com.android.support:design:22.2.1' 具体的怎么协调子控件的...这是在收缩时Title文字特点外形的设置 app:expandedTitleTextAppearance 同理这是在展开时Title文字特点外形的设置 app:contentScrim 这是toolbar 标题工具栏停留在顶部时候背景的设置...我在做这里的时候遇到一个问题,那就是CollapsingToolbarLayout里的Title的问题,一般默认是显示的,即使你不写,它也有会一个默认值一直显示在那里,等折叠收缩完的时候,停留在标题工具栏

    2.3K90

    Android之MaterialDesign应用技术2-仿支付宝上滑搜索框缓慢消失

    上滑 顶部背景图片缓慢消失,标题悬浮 在标题 上栏加入布局,放一些搜索框 输入框TextInputEditText的使用 1:上滑 顶部背景图片缓慢消失,标题悬浮 ?...1.1:CoordinatorLayout中设置   前面的添加依赖,在上一篇中已经说过,在这就不在重复了,协调者布局中这次又加入了一个新的布局CollapsingToolbarLayout(折叠工具栏布局...),很明显上面的效果图中的工具栏上滑的同时把图片折叠进去了,这是一个动画效果,如果不是MaterialDesign库的强大,这都是我们自己写。...竟然折叠的部分是toolbar和背景图片,这就理所应当的把这两个空间写在CollapsingToolbarLayout中,因为上面协调者布局和appbar布局很简单,这里就不在写了,只贴出折叠布局代码(...2:在标题 上栏加入布局,放一些搜索框 ?

    1.6K100

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

    scroll|enterAlways",声明工具栏的滚动行为标志; 6、演示页面的主体页面使用RecyclerView控件,并给该控件节点添加行为属性app:layout_behavior="@string...2、AppBarLayout内部的高度也可能变化,比如它嵌套了可折叠工具栏布局CollapsingToolbarLayout,有关可折叠工具栏布局的详细介绍参见《Android开发笔记(一百三十六)可折叠工具栏布局...所以本文只做下面三个标志的概念解释,有关的效果图参见《Android开发笔记(一百三十六)可折叠工具栏布局CollapsingToolbarLayout》。...3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化的工具栏,不会完全看不到工具栏。具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。...4、enterAlwaysCollapsed:该标志一般跟enterAlways一起使用,它与enterAlways区别在于有折叠操作,而单独的enterAlways没有折叠

    2K40

    自定义 Behavior,实现嵌套滑动、平滑切换周月视图的日历

    简介 先上个小米日历的图,让大家知道要做一个什么效果: [strip] 这是小米日历的效果,在用户操作列表的时候,将日历折叠成周视图,扩大列表的显示区域,同时也不影响日历部分的功能使用,有趣且实用。...用 CoordinatorLayout 作为根布局,就可以协调它子控件之间的联动效果,至于如何联动,是由它的内部类 Behavior 实现的。...为了降低复杂程度,我将所有折叠操作都放到 CalendarBehavior 里做,而 CalendarScrollBehavior 里面做一件事,就是把列表置于日历之下。...分析一下这个折叠效果。滚动时,日历也向上滚动,最多到当前选中日期那一行,滚动范围和当前选中日期有关。...上面效果可以看到,显示星期的标题也一起向上移动了,而且 MaterialCalendarView 是没办法隐藏这个标题的。

    3.3K10

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

    而AppBarLayout又必须是CoordinatorLayout的子布局; 1.3 水果详情界面布局框架: CoordinatorLayout下分三部分:水果标题栏、水果详情栏...而AppBarLayout又必须是CoordinatorLayout的子布局。 本文来做一个额外的活动作为水果的详情展示界面,当点击水果列表卡片的时候就进入这个界面。...首先实现标题栏部分,这里使用CoordinatorLayout来作为最外层布局(我们在讲监测snackbar弹出,解决其遮挡悬浮按钮问题的时候用到过这个布局),如下: <android.support.design.widget.CoordinatorLayout...这是由于用户想要查看水果的内容详情,此时界面的重点在具体的内容上面,因此标题栏就会自动进行折叠,从而节省屏幕空间。 继续向上拖动,直到标题栏变成完全折叠状态,效果如图: ?...在 CoordinatorLayout(外层监听框架)、 AppBarLayout(水果详情界面标题栏外层)、 CollapsingToolbarLayout(水果详情界面标题栏)这种嵌套结构的布局中

    2.3K40

    CollapsingToolbarLayout使用

    CollapsingToolbarLayout 可以看到,Toolbar的标题放大并在下方显示,当我们向上滑动列表时,顶部Header部分的图片向上折叠隐藏,标题向上移动并缩小,同时以渐显式的方式显示蓝色主题...关于CollapsingToolbarLayout的属性在官网上可以查到,这里我只介绍案例中我们常用的几个属性:title标题,布局展开时放大显示在图片底部,布局折叠时缩小显示在Toolbar左侧。...注意,没有设置这个属性时,默认使用Toolbar的标题;statusBarScrim顶部视图折叠状态下,状态栏的遮罩色。通常这样设置:app:statusBarScrim="?...,比如上述效果图中的图片;pin,固定别针效果,比如上图中的Toolbar;layout_collapseParallaxMultiplier不折叠视差系数,配合parallax模式使用,取值有点类似alpha...当设置为1.0,滚动列表时图片不会折叠移动; 代码实现: 关于CoordinatorLayout作为根布局容器如何协调子控件之间的交互行为,可以参考上一篇文章,这里我介绍一下本例中几个新的注意点。

    2.5K60

    为任意屏幕尺寸构建 Android 界面

    这意味着在平板电脑、可折叠设备和 Chrome OS 设备上,有超过 2.5 亿台大屏幕设备运行着 Android 系统,而关于可折叠设备的使用数量也在不断增长,同比增长超过 250%,因此,"大屏"...详情组件包裹在交叉渐变动画中,这让用户点击列表打开文章时看到带有动画过渡的转换效果。 要正确构建列表/详情结构,除了实际布局之外我们还需要解决几个问题。...其中比较有趣的一点是思考应用如何在不同尺寸布局之间转换,例如对于可折叠手机,应用可能会从较大的屏幕变为较小的屏幕。...△ 可折叠手机上布局转换 为了正确处理如何列表和详情窗口折叠成单窗口层次结构,当在较小的屏幕上时,我们需要知道用户最后与哪个窗口交互,为此,我们实现了一个简单的自定义修饰符来记录最后一次交互,并以此决定...例如我们有一张卡片,当在列表中因为空间的限制只展示标题和副标题,而有更多空间时,则调整为显示图像。

    4.2K20

    CoordinatorLayout 处理滚动

    通常,我们会设置 Toolbar 的标题。现在,我们需要在 CollapsingToolBarLayout 而不是 Toolbar 上设置标题。...创建视差动画 CollapsingToolbarLayout 可以让我们做出更高级的动画,例如使用一个在折叠的同时可以渐隐的 ImageView。在用户滑动时,标题的高度也可以改变。 ?...Foursquare BottomSheet Tutorial - 概述如何用第三方底部表来实现在老版本的 Foursquare 中使用的效果。...如果你在使用 behavior 时遇到了问题,请查看下面的建议: 关于如何高效使用 CoordinatorLayout 的例子请仔细参考 cheesesquare 源码。...在一个使用了内部有 items 列表的 ViewPager 的 fragment 和一个父 activity 之间使用协调时,你想像这里描述的那样在ViewPager 上添加 app:layout_behavior

    4.8K92

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

    本文的目的就是详细地介绍怎么样通过 AppBarLayout 与 CoordinatorLayout 的配合使用,去定制一个可折叠的 Toolbar。...AppBarLayout 内部的子 View 不一定非要是 Toolbar,它可以是任何 View,比如,你可以放置进去一张图片、一个列表、一个 ViewPager 等等。...Collapsing Title 可折叠标题 Content Scrim 内容纱布 Status bar scrim 状态栏纱布 Parallax scrolling children 子 View...Collapsing title 可折叠标题 我们新建一个 Activity,简单试验一下,Collapsing Title 是怎么样一个概念。...它还有一个特别的地方就是,它只作用在 SDK 5.0 版本之后,并且需要正确配置。 所谓的正确配置其实是说它需要一个 system inset 的矩形,什么意思呢?

    3K30

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

    int SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED 另一种enterAlways,但是只显示折叠后的高度。...int SCROLL_FLAG_EXIT_UNTIL_COLLAPSED ((exiting) / (scrolling off screen))上拉的时候,这个View会跟着滑动直到折叠。...简单来说 ,CollapsingToolbarLayout是工具栏的包装器,它通常作为AppBarLayout的孩子。...主要实现以下功能 - Collapsing title(可以折叠标题 ) - Content scrim(内容装饰),当我们滑动的位置 到达一定阀值的时候,内容 装饰将会被显示或者隐藏...的相关用法还有很多,有兴趣 了解的请自行阅读: 官方文档地址 ---- 题外话 CoordinatorLayout这个控件真的很强大,使用它可以实现各种炫酷的效果,简化了开发者的许多工作,有能力的话可以去研究一下源码

    5K10

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

    这篇文章其实我一直在想,是写还是不写,因为关于讲 CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout,Toolbar,TabLayout 等这些控件的使用...,以前写过一篇,那就是《通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout 》,一直关注和看公众号的关注者应该看到过,上一篇的推送也特别讲了 CoordinatorLayout...哈哈……这次写这篇是对我上一篇《通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout 》遗留问题的加强和修改。...《通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout 》(可点击)这篇文章,因为这次我们主讲怎么把上次大家给我提问的问题进行修改和加强,优化等。...原图fragment中有列表,你的没有,为什么我放上ListView之后,标题栏不能折叠等等 现在我们就从以上三个问题,进行修改和加强,优化,在讲之前,先看效果图对比,如果感觉好,你们再继续往下看。

    65280

    android 设置标题栏背景颜色_状态栏菜单栏都在哪

    同一个Activity需要动态变换标题栏和状态栏文字字体色值,该如何实现? 2....设置沉浸式状态栏,各个android版本之间差别如何,那么多flag,长得都一样,都有什么区别? 真相,带着这几个问题,先上两张我实现的效果图。...+Toolbar+NestedScrollView来实现,之前我也写过类似的博文来介绍CoordinatorLayout使用方法。...感兴趣的小伙伴可以参下:android沉浸式状态栏、fitsSystemWindows、标题折叠 下面我们说说怎么在界面滑动时,修改状态栏和标题栏文字颜色。...这个主要通过监听AppBarLayout滑动的距离,向上滑动,如果大于标题栏的高度,则要动态改变标题栏文字颜色,当标题折叠时,改变状态栏文字颜色及返回铵钮图标,同时状态栏文字颜色变成暗色。

    2.2K10
    领券