CollapsingToolbarLayout使用

简介: 我们来看一下CollapsingToolbarLayout的使用场景。 CollapsingToolbarLayout 可以看到,Toolbar的标题放大并在下方显示,当我们向上滑动列表时,顶部Header部分的图片向上折叠隐藏,标题向上移动并缩小,同时以渐显式的方式显示蓝色主题,直至高度缩为Toolbar的高度并成为Toolbar的背景色;向下滑动列表时,He

我们来看一下CollapsingToolbarLayout的使用场景。


CollapsingToolbarLayout

可以看到,Toolbar的标题放大并在下方显示,当我们向上滑动列表时,顶部Header部分的图片向上折叠隐藏,标题向上移动并缩小,同时以渐显式的方式显示蓝色主题,直至高度缩为Toolbar的高度并成为Toolbar的背景色;向下滑动列表时,Header部分逐渐显示。这个效果就是利用了CollapsingToolbarLayout控件,在讲解案例代码前,先来介绍一下CollapsingToolbarLayout。

CollapsingToolbarLayout在 CollapsingToolbarLayout 的 Children 布局上,可以按照 FrameLayout 的属性来拍版,因为它本身继承于 FrameLayout :CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout.从官方对CollapsingToolbarLayout的介绍上可以看出,CollapsingToolbarLayout 是对 Toolbar 的一个包装,以达到折叠 AppBar 的交互视觉效果。所以,CollapsingToolbarLayout 的使用一定离不开 AppBarLayout 和 Toolbar,并且作为 AppBarLayout 的直接子视图使用。关于CollapsingToolbarLayout的属性在官网上可以查到,这里我只介绍案例中我们常用的几个属性:title标题,布局展开时放大显示在图片底部,布局折叠时缩小显示在Toolbar左侧。注意,没有设置这个属性时,默认使用Toolbar的标题;statusBarScrim顶部视图折叠状态下,状态栏的遮罩色。通常这样设置:app:statusBarScrim="?attr/colorPrimaryDark",即style样式中定义的沉浸式状态栏颜色。这个属性要和getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);(支持API19及以上版本,位于setContentView语句前面)一起使用,使顶部视图展开时图片能够延伸到状态栏位置显示,如效果图中所示;contentScrim内容遮罩,上下滚动时图片上面显示和隐藏的遮罩色,Toolbar位置的的背景色;通常这样设置:app:contentScrim="?attr/colorPrimary",即显示为Toolbar颜色,应用的主题色;layout_collapseMode折叠模式,设置其他控件滚动时自身的交互行为,有两种取值:parallax,折叠视差效果,比如上述效果图中的图片;pin,固定别针效果,比如上图中的Toolbar;layout_collapseParallaxMultiplier不折叠视差系数,配合parallax模式使用,取值有点类似alpha(不透明度),在0.0 ~ 1.0之间,默认值为0.5。当设置为1.0,滚动列表时图片不会折叠移动;

代码实现:



关于CoordinatorLayout作为根布局容器如何协调子控件之间的交互行为,可以参考上一篇文章,这里我介绍一下本例中几个新的注意点。作为AppBarLayout的直接子控件,CollapsingToolbarLayout包裹Header部分的ImageView和Toolbar,并分别设置二者的折叠模式。这个例子,我们给CollapsingToolbarLayout的layout_scrollFlags属性值设为:scroll|exitUntilCollapsed,其中exitUntilCollapsed表示控件向上折叠退出并以最小高度停留在顶部;前面介绍CollapsingToolbarLayout属性时介绍到了statusBarScrim的使用,其实也可以通过android:fitsSystemWindows和values-v21中style样式的statusBarColor和windowDrawsSystemBarBackgrounds属性来完成状态栏的背景色变化,详情参考源码即可;通过layout_anchor和layout_anchorGravity可以控制FloatingActionButton的behavior和位置,如上图所示,当滚动列表是,FAB按钮会随着AppBarLayout而显示和隐藏,并自带缩放动画。

示例源码我在GitHub上建立了一个Repository,用来存放整个Android Material Design系列控件的学习案例,会伴随着文章逐渐更新完善,欢迎大家补充交流,

代码地址:github.com/xiangzhihong/MDStudySamples

目录
相关文章
|
11月前
|
XML IDE Java
Android gradle.properties 基础使用和常规配置
Gradle 是一个开源构建自动化工具,其设计足够灵活,可以构建几乎任何类型的软件。
|
Android开发
解决圆形进度条ProgressBar的几个问题
Android自带的Progressbar默认就是圆形的,可以通过设置style属性 style="?android:attr/progressBarStyleHorizontal" 复制代码 这样就能变成条状进度条,如下: <ProgressBar android:layout_width="match_parent" android:layout_height="wrap_content" style="?android:attr/progressBarStyleHorizontal"/>
999 0
|
Android开发
【RecyclerView】 五、RecyclerView 布局 ( 瀑布流 | 交错网格局管理器 StaggeredGridLayoutManager )
【RecyclerView】 五、RecyclerView 布局 ( 瀑布流 | 交错网格局管理器 StaggeredGridLayoutManager )
514 0
【RecyclerView】 五、RecyclerView 布局 ( 瀑布流 | 交错网格局管理器 StaggeredGridLayoutManager )
|
11月前
|
XML Android开发 数据格式
Android 底部导航栏(三、ViewPager+TabLayout+Fragment)简单易懂
底部导航栏在Android应用中随处可见,今天使用ViewPager+TabLayout+Fragment这三个控件来实现此功能。 前面使用了另外两个方法来实现导航栏,不过我还是更喜欢Viewpager,代码也少,毕竟前两个不能左右滑动。
|
7月前
|
数据安全/隐私保护
深入解析 curl:掌握命令行的网络传输利器
当我们使用 `curl` 进行网络请求时,了解如何有效地使用参数是非常重要的。`curl` 提供了许多参数,用于控制请求的行为和配置。在这篇博客文章中,我们将详细解释一些常用的 `curl` 参数,帮助你更好地理解如何利用这个强大的工具。
164 2
深入解析 curl:掌握命令行的网络传输利器
|
8月前
|
分布式计算 Hadoop Java
Hadoop的环境搭建以及配置(wordcount示例)(一)
Hadoop的环境搭建以及配置(wordcount示例)
151 0
|
XML IDE Java
Android studio项目中的gradle.properties详解
在使用Android Studio新建Android项目之后,在项目根目录下会默认生成一个gradle.properties文件,我们可以在里面做一些Gradle文件的全局性的配置,也可以将比较私密的信息放在里面,防止泄露。 下面我们就来分析下IDE自动生成的gradle.properties文件,及其常见的用法。
|
12月前
|
算法 Java Unix
Android音频架构
我们上面介绍的四个层面的音频API实现均在Framework层,其他各层音频相关有哪些功能?当我们调用某一API时最终是怎么驱动硬件工作的呢?下面我们先看看系统各层音频相关模块及功能。
487 0
|
11月前
|
机器学习/深度学习 分布式计算 Cloud Native
带你读《云原生机密计算最佳实践白皮书》——Occlum: 基于Intel SGX的轻量级LibOS
带你读《云原生机密计算最佳实践白皮书》——Occlum: 基于Intel SGX的轻量级LibOS
290 0
|
Android开发
Android自定义控件(七)——ShapeDrawable实现放大镜效果
Android自定义控件(七)——ShapeDrawable实现放大镜效果
417 0
Android自定义控件(七)——ShapeDrawable实现放大镜效果