我们来看一下CollapsingToolbarLayout的使用场景。...这个效果就是利用了CollapsingToolbarLayout控件，在讲解案例代码前，先来介绍一下CollapsingToolbarLayout。...attr/colorPrimary"，即显示为Toolbar颜色，应用的主题色；layout_collapseMode折叠模式，设置其他控件滚动时自身的交互行为，有两种取值：parallax，折叠视差效果...当设置为1.0，滚动列表时图片不会折叠移动； 代码实现： 关于CoordinatorLayout作为根布局容器如何协调子控件之间的交互行为，可以参考上一篇文章，这里我介绍一下本例中几个新的注意点。...属性来完成状态栏的背景色变化，详情参考源码即可；通过layout_anchor和layout_anchorGravity可以控制FloatingActionButton的behavior和位置，如上图所示，当滚动列表是
下面是CollapsingToolbarLayout的属性说明： app:contentScrim : 指定布局内部未展开时的背景颜色。...app:collapsedTitleTextAppearance : 指定未展开时的标题文字字体。 app:collapsedTitleTextColor : 指定未展开时的标题文字颜色。...声明工具栏的滚动行为标志； 其实真正运行的时候，Toolbar的高度是固定不变的，变化高度的是CollapsingToolbarLayout。...有关的滚动标志 上一篇博文《Android开发笔记（一百三十五）应用栏布局AppBarLayout》说过，AppBarLayout的子控件共有五个滚动标志，同时提到后面三个标志与CollapsingToolbarLayout...现在就针对CollapsingToolbarLayout，重新演示看看五种标志分别对应的效果图。 1、scroll : 头部与主体一起滚动。
exitUntilCollapsed - 向上滚动时收缩View，但可以固定Toolbar一直在上面。...parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier...layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子，值为：0~1。...它和scrollview 基本上一样 但是它支持嵌套滚动 嵌套滚动默认是启用的。 还有一个属性，不过蛋疼的是这属性要全手打，没提示不知道怎么破。...定义滚动视图是否应该伸展它的内容来填补视窗。
对比scroll和scroll | enterAlways设置，发生向下滚动事件时，前者优先滚动Scrolling View，后者优先滚动Child View，当优先滚动的一方已经全部滚进屏幕之后，另一方才开始滚动...这里涉及到Child View的高度和最小高度，向下滚动时，Child View先向下滚动最小高度值，然后Scrolling View开始滚动，到达边界时，Child View再向下滚动，直至显示完全。...发生向上滚动事件时，Child View向上滚动退出直至最小高度，然后Scrolling View开始滚动。也就是，Child View不会完全退出屏幕。...属性contentScrim 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。...在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier
通常AppBarLayout和CollapsingToolbarLayout是一起使用的，也就是CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout...下只能有一个控件，而CollapsingToolbarLayout需要包裹Toolbar外，还支持包裹其他控件，比如ImageView。...CollapsingToolbarLayout的使用方法也比较固定，AppBarLayout包裹CollapsingToolbarLayout，由于需要伸缩Toolbar，所以它使用的app:layout_scrollFlags...，可是设定app:layout_collapseMode属性，其中parallax表示随着滑动控件的滚动，最终该控件会消失，pin则表示，最终不会消失，废话不多说，来看下xml <?...的setTitle方法才能设置标题 private CollapsingToolbarLayout collapsingtoolbarlayout; collapsingtoolbarlayout.setTitle
AppBarLayout的子布局有5种滚动标识(上面代码CollapsingToolbarLayout中配置的app:layout_scrollFlags属性)： scroll：所有想滚动出屏幕的view...exitUntilCollapsed：当你定义了一个minHeight，此布局将在滚动到达这个最小高度的时候折叠。 snap：当一个滚动事件结束，如果视图是部分可见的，那么它将被滚动到收缩或展开。...，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端...当CollapsingToolbarLayout的子布局设置了parallax模式时，我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子，值为：0~...，这个behavior需要设置在触发事件（滚动）的view之上。
Scroll: 表示向下滚动时,这个View会被滚出屏幕范围直到隐藏. enterAlways: 表示向上滚动时,这个View会随着滚动手势出现,直到恢复原来的位置. enterAlwaysCollapsed...所以我们就在AppBarLayout里面的CollapsingToolbarLayout进行了如下设置： CollapsingToolbarLayout...CollapsingToolbarLayout的介绍 CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承至FrameLayout，给它设置layout_scrollFlags...，它可以控制包含在CollapsingToolbarLayout中的控件在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。...parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier
也就是说 snap 代表一种吸附的行为，当一个滑动事件结束后，Toolbar 会向最接近它的边缘自行滚动。那什么是最近的概念呢？比如向上滑动时，如果滑过了一半它就向上滚动，否则滚动回原来的地方。...CollapsingToolbarLayout 可以控制的子 View 滚动模式有 3 种： none 默认，无任何效果 Parallax 视差滚动 pin 固定某个 View 它通过 xml...就是滚动的速度不同，造成的视觉差异效果。也就是说 CollapsingToolbarLayout 中有的 view 滚动的快一些，其它的滚动的慢一些。...可以通过 setParallaxMultiplier(float) 方法来设置滚动的速度因子。...Pinned position children 子类的位置固定行为 这个很好理解，将 CollapsingToolbarLayout 中某个子 View 固定，无论是否存在滚动事件，只要设置 app:
然后，我们需要定义AppBarLayout与滚动视图之间的联系。...，这个behavior需要设置在触发事件（滚动）的view之上。...此时，你应该注意到我们的Toolbar能够响应滚动事件了。 ?...---- Creating Collapsing Effects（制造折叠效果） 如果想制造toolbar的折叠效果，我们必须把Toolbar放在CollapsingToolbarLayout中： .support.design.widget.CollapsingToolbarLayout...CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar
CollapsingToolbarLayout 1.1 CollapsingToolbarLayout是一个作用于Toolbar基础之上的布局，由DesignSupport库提供。...其中， scroll表示CollapsingToolbarLayout会随着水果内容详情的滚动一起滚动， exitUntilCollapsed表示当CollapsingToolbarLayout随着滚动完成折叠之后就保留在界面上....widget.NestedScrollView> 我们知道ScrollView允许使用滚动的方式来查看屏幕以外的数据...， 而NestedScrollView在此基础之上增加了嵌套响应滚动事件的功能。...由于CoordinatorLayout本身已经可以响应滚动事件了， 因此我们在它的内部就需要使用NestedScrollView或RecyclerView这样可以响应滚动事件的布局。
当我们引入RecyclerView的时候，恰好是压死骆驼的最后一根稻草，故不得不采用其他方案来代替RecyclerView 和 CollapsingToolbarLayout实现的折叠效果。...app:contentScrim 表示CollapsingToolbarLayout折叠以后，toolbar的颜色。...app:layout_scrollFlags="scroll|exitUntilCollapsed" 表示CoordinatorLayout的依赖元素滚动的时候，进行折叠。...scroll - 想滚动就必须设置这个。...enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
要想Toolbar跟随Listview的滑动扩展或者是收缩这中联动效果,需要在ListView中配置如下属性: android:nestedScrollin...
从图中我们可以知道 layout_scrollFlags=”scroll|enterAlways， 前面已经说到layout_scrollFlags=scroll的时候，这个View会 跟着 滚动...那如果当我们的toolBar 等于 app:layout_scrollFlags=”scroll|snap”的时候 ， layout_scrollFlags=scroll的时候，这个View会 跟着 滚动...这个控件 CollapsingToolbarLayout ?...（当这个View到达 CollapsingToolbarLayout的底部的时候，这个View 将会被放置，即代替整个CollapsingToolbarLayout） 我们有两种方法可以设置这个常量,...- 对于AppBarLayout，我们主要 讲解了这个属性app:layout_scrollFlags，设置不同 的属性我们可以在滚动的时候显示不同 的效果 - 对于CollapsingToolbarLayout
CollapsingToolbarLayout android:id="@+id/toolbar_layout" android...="pin" app:layout_collapseMode="none" 从xml中的参数说吧, 来看CollapsingToolbarLayout的折叠模式....参数 效果 scroll 视图将滚动与滚动事件直接相关. 需要设置此标志才能使任何其他标志生效....snap 在滚动结束时, 如果视图仅部分可见, 则它将被捕捉并滚动到其最近的边缘. enterAlways 当进入(在屏幕上滚动)时, 无论滚动视图是否也在滚动, 视图都将滚动任何向下滚动事件....一旦滚动视图到达其滚动范围的末尾, 该视图的其余部分将滚动到视图中. 折叠高度由视图的最小高度定义.
控制哪一个 view 以何种速率进行展开或收起，包括视差滚动效果动画。 ?...现在，我们需要在 CollapsingToolBarLayout 而不是 Toolbar 上设置标题。...CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar...间的滚动和视差效果。...然而，它似乎不影响滚动，如这篇博文所述。
最初的想法是自己去利用 Android 的嵌套滚动机制,去实现上面的嵌套滚动效果.但最后为了开发效率直接利用了 CollapsingToolbarLayout 和 CoordinatorLayout...实现效果的原理十分简单,监听 CollapsingToolbarLayout 收缩和扩展的距离,换算成你想要的一个范围比如移动的距离,缩放的比例. 部分源码: CollapsingToolbarLayout...有一点提一下,最初我是把布局嵌入到 CollapsingToolbarLayout 中去的,但是由于 CollapsingToolbarLayout 自身的收缩和扩展改变了自身高度,会影响里面的 View...的位置,如果按照静态的起始和结束位置计算,加上自身高度对 View 布局的影响,这就复杂了,我没有细研究.采用了一个笨拙的方式,用 FrameLayout 把布局给抽取到顶部,不让他们受到 CollapsingToolbarLayout
2、AppBarLayout内部的高度也可能变化，比如它嵌套了可折叠工具栏布局CollapsingToolbarLayout，有关可折叠工具栏布局的详细介绍参见《Android开发笔记（一百三十六）可折叠工具栏布局...CollapsingToolbarLayout》。...同时声明scroll和enterAlways，滚动效果如下图所示： ? 后面三个标志都与CollapsingToolbarLayout有关，得配合该控件才能观察细节差异。...所以本文只做下面三个标志的概念解释，有关的效果图参见《Android开发笔记（一百三十六）可折叠工具栏布局CollapsingToolbarLayout》。...具体的滚动说明如下所示： 向上滚动：头部先往上收缩，一直滚到折叠的最小高度。然后头部与主体先一起滚动，头部滚到位后，主体继续向上。 向下滚动：头部与主体先一起滚动，一直滚到头部折叠的最小高度。
fangzhifubao.gif 是不是很像支付宝的效果呢，我们今天就要通过讲解android5.0新出的控件CoordinatorLayout，AppBarLayout，CollapsingToolbarLayout...2.AppBarLayout 其次就是AppBarLayout，去除官方解释，简单来说就是它可以让你定制当某个可滚动View的滚动手势发生变化时，其内部的子View实现何种动作。...enterAlways:值设为enterAlways的View,当ScrollView往下滚动时，该View会直接往下滚动。而不用考虑ScrollView是否在滚动。...3.CollapsingToolbarLayout 是用来对Toolbar进行再次包装的ViewGroup，主要是用于实现折叠的App Bar效果。...CollapsingToolbarLayout只要有这方面： 1.title展开时是最大的，然后随着收缩会越来越少，直到屏幕的顶部，通过app:title设置title,不然就默认。
CoordinatorLayout是在 Google IO/15 大会发布的，遵循Material Design风格控件，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout...该类可以自定义封装，我们一般需求使用Google提供的app:layout_behavior="@string/appbar_scrolling_view_behavior"就够用了 CollapsingToolbarLayout...内部的子View一般都要加上属性：app:layout_collapseMode=""，常用值是parallax（视差滚动），pin（固定）。...CollapsingToolbarLayout使用app:contentScrim="@color/titleBarColor2"来设置内容纱布，就是当折叠到只剩下Toolbar的时候，用另外一个的图片或者颜色来设置...dp_200" app:title="应用标题" /> CollapsingToolbarLayout
AppBarLayout是什么，效果是怎样的 使用AndroidStudio建立一个ScrollActivity，模板就是使用的AppBarLayout，不过例子里还使用了CollapsingToolbarLayout...滚动最顶层时，子View响应滚动事件，直至子View完全显示 exitUtilCollapsed：只要ScrollView向上滚动，子View立即响应滚动，直到达到最小高度 snap：当Scrollview...滚动到最顶层时，子View响应滚动事件。...： 此时可以看到，向上滚动，没有区别；向下滚动时，由于ImageView设置了enterAlways，因此首先滚动，直至出现了，然后ScrollView滚动，最后才是ToolBar显示。...后面会继续学习与CollapsingToolbarLayout一起的使用。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
