CollapsingToolbarLayout使用

我们来看一下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

时间: 2024-12-21 09:05:27

CollapsingToolbarLayout使用的相关文章

详细解释强力的图片加载框架 Glide的配置(顺便补充下CollapsingToolbarLayout的一些功能)

转载请注明出处:王亟亟的大牛之路 折腾了一天,单位里的网终于好了真是蛋疼,然后今天讲Glide(本来是准备昨天写的,唉) 理论性的介绍就直接从网上扣点来了,从头码字没啥意义,废话不多,开始! 理论性的东西可以看 http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0327/2650.html 这篇是Glide和Picasso的对比,分析的蛮不错的 我们来贴下今天的例子 上图中所有的图片都是异步下载的,虽然图片本身并不大,但是加载的还是很流

Android5.0+ CollapsingToolbarLayout使用详解_Android

CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView.Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端). 使用CollapsingToolbarLayout: <android.support.design.wid

如何在进入页面时表现出collapsingtoolbarlayout是折叠的状态

问题描述 如何在进入页面时表现出collapsingtoolbarlayout是折叠的状态 如何在进入页面时表现出collapsingtoolbarlayout是折叠的状态,而不是进页面就是拉开的状态

Android Design Support Library 02 — CollapsingToolbarLayout&amp;&amp;CardView

Material Design的第二篇更新啦!这次介绍两个控件CollapsingToolbarLayout&&CardView 1.CollapsingToolbarLayout 5.0之后,折叠效果的App出现了,前段时间google在material design的设计中也推出了这个控件. Ok,还是先上视频!  代码如下 复制代码 <android.support.design.widget.AppBarLayout         android:layout_width=

Android折叠式Toolbar使用完全解析(CollapsingToolbarLayout)

简介 在各种不同的应用中,大家可能会经常见到这样一个效果:Toolbar是透明的,有着一个背景图片以及大标题,随着页面向上滑动,其标题逐渐缩放到Toolbar上,而背景图片则在滑动到一定程度后变成了Toolbar的颜色,这种效果也即是折叠式效果.其实这种效果在GitHub上面已经有很多开源库实现了,但是Google在其推出的Design Library库中也给出了一个这种控件,让我们很方便地实现了这种效果.这个控件是CollapsingToolbarLayout,它是一个增强型的FrameLay

Android5.0+ CollapsingToolbarLayout使用详解

CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView.Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端). 使用CollapsingToolbarLayout: <android.support.design.wid

android 实现最新版本 饿了么店铺 页面的效果

问题描述 android 实现最新版本 饿了么店铺 页面的效果 饿了么 商家页面 使用的是CollapsingToolbarLayout 这个吗,如果不是 请大神支招 具体效果 1.上面的布局有一张图片背景,就是商家的icon 2.滑动过程中 店家信息有一个 逐渐消失的动画,完全小时候 titlebar上的标题 逐渐出现. 3.下面的viewpage 是有个回弹效果. 解决方案

玩转AppBarLayout实现更酷炫的顶部栏_Android

上一篇文章<CoordinateLayout的使用如此简单 >对CoordinateLayout的使用做了讲解,今天我们再讲解常常与其一起使用的几个View:AppBarLayout.CollapsingToolbarLayout以及Toolbar.一下子出现3个陌生的View,是不是觉得很慌张~,很多人都写了这几个布局的使用,但是他们却没有有针对性的单独讲解每个View的作用以及如何使用,我看的很多文章都是一上来就把AppBarLayout.CollapsingToolbarLayout以及

CoordinatorLayout的使用如此简单(Android)_Android

曾在网上找了一些关于CoordinatorLayout的教程,大部分文章都是把CoordinatorLayout.AppbarLayout.CollapsingToolbarLayout 以及Toolbar等一起使用来介绍,这让我不知不觉在心中认为把这几个布局要一起使用,而且只是用于那种场景中.其实CoordinatorLayout的功能并不是局限于与AppBarLayout一起使用,它的功能强大着呢,本文主要对CoordinatorLayout的使用进行介绍,后面再写一篇文章将AppBarLa