CoordinatorLayout系列（四）CollapsingToolbarLayout

最新推荐文章于 2021-05-26 18:50:15 发布
最新推荐文章于 2021-05-26 18:50:15 发布
阅读量871 收藏 2
点赞数 1
分类专栏： 安卓UI 文章标签： CollapsingToolbarLayout
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whoami_I/article/details/103270894
版权
本文深入解析了Android CoordinatorLayout中的CollapsingToolbarLayout，包括其实现原理和过程。CollapsingToolbarLayout作为FrameLayout的扩展，利用CoordinatorLayout和AppBarLayout实现了滑动效果。文章详细介绍了如何配置和调整布局属性，以达到标题移动、ToolBar透明度变化等效果，并提供了实现沉浸式状态栏和调整 scrim 出现时机的方法。
摘要由CSDN通过智能技术生成

系列文章：
CoordinatorLayout系列（一）：Behavior
CoordinatorLayout系列（二）AppBarLayout
CoordinatorLayout系列（三）AppBarLayout之layout_scrollFlags
CoordinatorLayout系列（四）CollapsingToolbarLayout
CoordinatorLayout系列（五）例子

终于到CollapsingToolbarLayout这个强大而装逼的布局了，这个布局的实现和原理都是非常的简单，比如下面的效果：
在这里插入图片描述
是不是很酷？当然这还是比较简单的，这仅仅是使用到了系统自带的一些功能，通过自定义可以实现更复杂的效果。

demo地址：https://github.com/whoami-I/CoordinatorLayoutExample

先讲实现的方式，再讲实现的过程。

实现原理

通过查看CollapsingToolBarLayout的源代码，发现其实现方式非常简单，源代码加在一起也就1000多行，其实简单的原因有两方面，一是CollapsingToolBarLayout其实是一个FrameLayout；

最低0.47元/天 解锁文章
whoami_I
关注
专栏目录
Android Material Design 系列之 CoordinatorLayout + CollapsingToolbarLayout 开发详解
一名互联网时代苟且偷生的 Android码农
07-28 1347
前言 CoordinatorLayout 遵循 Material 风格，结合 AppbarLayout, CollapsingToolbarLayout 等可产生各种炫酷的效果，本篇博客就将介绍 CoordinatorLayout 的各种酷炫效果。 一、View 介绍 1、CoordinatorLayout 又名协调者布局，它是 support.design 包中的控件。简单来说，CoordinatorLayout 是用来协调其子 view 并以触摸影响布局的形式产生动画效果的一个 super-power
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout
07-16
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar+NestedScrollView+RecyclerView+FloatingActionButton的使用demo，详细说明 http://blog.csdn.net/amazing7/article/details/51918623
Material Design之CollapsingToolbarLayout使用
热门推荐
【博客地址迁移到】：https://zhengxiaoyong.com
07-16 5万+
CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承至FrameLayout，给它设置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。 使
CoordinatorLayout CollapsingToolbarLayout 与滚动的处理
yoyo_0316的博客
07-21 440
谷歌内置了一些关于滚动的动效，先看效果图 链接如下 http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0717/3196.html http://blog.csdn.net/xyz_lmn/article/details/48055919
CoordinatorLayout:CollapsingToolbarLayout折叠效果的布局容器
Zheng
09-20 2026
如果项目中需要这种效果，可以使用CollapsingToolbarLayout(折叠效果的布局容器) 从名字就可以看出是和Toolbar结合使用的； CollapsingToolbarLayout相当于代理了ToolBar,专门给Toolbar使用的； Toolbar可以随着CollapsingToolbarLayout向上滑动 xml布局： <android.support.d
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout讲解
智玲君
11-24 3050
1，CoordinatorLayout协调布局 作用 根据一个layout（Dependency View）的操作来让另一个layout（child View）自动执行相关的操作，该child View具体执行什么相关操作取决于app:layout_behavior属性所指定的behavior类如何编写。 根据概念可以看出，协调布局的使用包含三个部分： 1.Dependency View 2.ch...
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+banner
06-29
在Android开发中，`CoordinatorLayout`、`AppBarLayout`和`CollapsingToolbarLayout`是谷歌推出的`Design Support Library`中的关键组件，用于构建现代化、响应式的用户界面。这些组件结合使用，可以实现类似Google ...
CoordinatorLayout系列（五）例子
whoami_I的博客
11-27 504
这一篇讲两个例子，实现如下效果; demo地址：https://github.com/whoami-I/CoordinatorLayoutExample 第一个是ToolBar能跟随手指的上下滑动而产生渐变的效果，而不是默认的动画，默认效果是达到某个阈值之后，就执行一个动画把ToolBar变成绿色。 实现起来也很简单，就是运用AppBarLayout的OnOffsetChangedListene...
CoordinatorLayout系列（一）：Behavior
whoami_I的博客
11-06 517
CoordinatorLayout是google在Material Design上提出的一个布局样式，这个布局的主要功能就是实现一个view跟随另一个view变化，具体变化逻辑，由Behavior来实现，一个好的跟随效果可以展现出很酷的动画，因此这个系列就从Behavior入手，来剖析CoordinatorLayout的细节。 一、使用方法 首先摆出效果： 功能就是实现一个球跟随另一个球移动，两...
CollapsingToolbarLayout
04-12
android CollapsingToolbarLayout的使用 折叠标题 安卓
CollapsingToolbarLayout折叠布局
12-29
http://blog.csdn.net/qq_34709056/article/details/78929768
android伸缩布局,Android 之协调伸缩CoordinatorLayout,CollapsingToolbarLayout
weixin_35971653的博客
05-26 849
前言#上一篇文章承诺会讲解折叠伸缩的效果,所以废话不多说上gif#Gank2.gif一句话#当你初次看见这样的效果可能会觉得实现起来比较麻烦。而我告诉你，只需要正确的配置XML中的控件即可.上代码#请结合讲解模块一起阅读xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.androi...
Material Design 组件之 CollapsingToolbarLayout
躬行之
07-27 272
CollapsingToolbarLayout 主要用于实现一个可折叠的标题栏，一般作为 AppBarLayout 的子 View 来使用，下面总结一下 CollapsingToolbarLayout 的使用。 Material Design 系列文章： - Material Design 组件之 FloatingActionButton - Material Design 组件之 AppB...
coordinatorlayout+collapsingtoolbarlayout实现仿美团外卖,京东,安居客等搜索框
最新发布
06-23
### 回答1： CoordinatoLayout与CollapsingToolbarLayout是Android开发中常用的两个控件，它们可以实现许多优秀的布局效果。其中，仿美团外卖、京东、安居客等搜索框的效果就可以通过使用这两个控件来实现。 首先，将CoordinatorLayout作为最外层布局，用AppBarLayout包裹CollapsingToolbarLayout和搜索框（Toolbar）的布局。在CollapsingToolbarLayout内部设置要展示的内容，如图片、文字等，以及折叠时隐藏的内容。而AppBarLayout则可以通过监听滚动事件来控制CollapsingToolbarLayout的展开与收缩。 接着，设置搜索框为Toolbar，并在Toolbar中加入EditText等控件来实现搜索功能。为了让搜索框在AppBarLayout的收缩中悬浮在顶部，可以将Toolbar设置为app:layout_scrollFlags="scroll|enterAlways|snap"。 最后，通过设置CollapsingToolbarLayout的collapsedTitleGravity、expandedTitleGravity、collapsedTitleTextAppearance、expandedTitleTextAppearance等属性来调整标题的展示效果，以适应不同的布局要求。 总之，通过使用CoordinatorLayout和CollapsingToolbarLayout这两个强大的布局控件，我们可以实现许多炫酷的布局效果，特别是像搜索框这样的常见功能，能够轻松实现，提高应用的用户体验。 ### 回答2： CoordinatorLayout是一个新的父容器控件，可以让子控件之间产生联动效果。CollapsingToolbarLayout是CoordinatorLayout的一个子控件，可以实现ToolBar折叠效果。 通过使用CoordinatorLayout和CollapsingToolbarLayout可以实现仿美团外卖、京东、安居客等应用的搜索框。我们可以在CollapsingToolbarLayout中添加一个EditText控件作为搜索框，并对其进行样式设置和位置调整。 在CollapsingToolbarLayout中，我们可以为其设置一个折叠模式，在不同的模式下控件的显示样式也会变化。当需要显示搜索框（例如在展开状态）时，我们可以设置一个比较大的折叠模式，使得搜索框完全显示。而当折叠Toolbar时，搜索框会根据预设的模式变为一个小图标，同时不影响其他控件的显示。 总的来说，通过使用CoordinatorLayout和CollapsingToolbarLayout，我们可以实现复杂的联动效果，让UI界面更加高效、美观。而在实现类似搜索框这类单一控件时，只需要在CollapsingToolbarLayout中添加控件，并对其进行相应样式和位置的设置即可。 ### 回答3： CoordinatorLayout是Android Support Design库中新增的一个布局类，它可以协调子View的滑动行为，实现一些复杂的交互效果。其中，CollapsingToolbarLayout是CoordinatorLayout中的一个布局类，通常用于实现可以折叠或扩展的标题栏效果。 在实现仿美团外卖、京东、安居客等搜索框的效果时，我们可以使用CollapsingToolbarLayout来实现。具体步骤如下： 1. 在布局文件中，先将CoordinatorLayout作为父布局，再添加一个AppBarLayout作为子布局。 2. 在AppBarLayout中添加一个CollapsingToolbarLayout作为子布局，并设置app:layout_scrollFlags="scroll|exitUntilCollapsed"属性，表示该子View可以滚动，并在完全收缩前一直存在。 3. 在CollapsingToolbarLayout中添加一个Toolbar作为子布局，这个Toolbar就是我们的标题栏。可以在其中添加搜索框等控件。 4. 在CollapsingToolbarLayout中再添加一个ImageView或其他子View，作为背景图片或其他效果。（可选） 5. 在布局文件中添加一个RecyclerView或其他滑动控件，将其放入CoordinatorLayout中，并设置app:layout_behavior="@string/appbar_scrolling_view_behavior"属性，表示该子View会受到AppBarLayout的滚动行为影响。 这样一来，当用户向下滑动页面时，CollapsingToolbarLayout会慢慢收缩，最后只剩下Toolbar，而背景图片则会消失或变成其他效果。与此同时，RecyclerView会随着滑动而滚动，实现搜索框随着页面滑动的效果。 总之，使用CoordinatorLayout和CollapsingToolbarLayout可以方便地实现一些复杂的交互效果，如此处的仿美团外卖、京东、安居客等搜索框效果。需要注意的是，该效果的实现还需进一步考虑适配、优化等问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值