CoodinatorLayout 实现 banner沉浸式+滚动视差+悬浮搜索框+标题置顶复杂联动效果


1.开门见上,先上效果图

                 

                                        代码传送门


2.CoodinatorLayout及相关控件简介

      CoordinatorLayout遵循Material Design风格,包含在 support Library中,结合AppBarLayout, CollapsingToolbarLayout,NestScrollView等 可 产生各种炫酷的折叠悬浮效果。作为一个容器可与一个或多个子View进行交互。

      AppBarLayout继承自LinearLayout,布局方向为垂直方向。所以你可以把它当成垂直布局的LinearLayout来使用。AppBarLayout是在LinearLayou上加了一些材料设计的概念,它可以让你定制当某个可滚动View的滚动手势发生变化时,其内部的子View实现何种动作。

       CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup,主要是用于实现折叠的App Bar效果。它需要放在AppBarLayout布局里面,并且作为AppBarLayout的直接子View。CollapsingToolbarLayout主要属性:

       (1) layout_scrollFlags

  • scroll - 想滚动就必须设置这个。

  • enterAlways - 实现quick return效果, 当向下移动时,立即显示View(比如Toolbar)。

  • exitUntilCollapsed - 向上滚动时收缩View,但可以固定Toolbar一直在上面。

  • enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时,你的View只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。

  • contentScrim - 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。

  • expandedTitleMarginStart - 设置扩张时候(还没有收缩时)title向左填充的距离。

        (2) layout_collapseMode (折叠模式) - 有两个值:

  • pin -  设置为这个模式时,当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上。

  • parallax - 设置为这个模式时,在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。

        (3) layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子,值为:0~1。

        Toolbar主要是用来替换ActionBar的,换句话说,ActionBar能做的,Toolbar都能做。如果你对ActionBar的使用比较熟悉,你会发现Toolbar使用起来非常简单。ok,既然是替换,当然用Toolbar的时候就得先去把ActionBar给隐藏掉。隐藏掉ActionBar方法有多种,我是直接在application的主题里面设置成