CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar

最近在看这几个神奇的布局,网上有很多文章介绍这几个东西的组合使用了,自己梳理一下,记录几个容易忽视的点。

CoordinatorLayout

简介

CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar
这是CoodinatorLayout的类继承关系图,就叫它“协调布局”吧。
官方介绍
协调布局是一个增强型的FrameLayout,主要有两个使用场景:

  1. As a top-level application decor or chrome layout(作为根视图)
  2. As a container for a specific interaction with one or more child views(作为一个容器用于和一个或多个子view进行交互)

还有Behaviors和anchor两个重要的概念。

比FrameLayout厉害在哪?

FrameLayout里面的子View相互之间没有关系,子View的位置也仅仅是相对于父容器的。

CoordinatorLayout的每一个view的所有属性, 坐标, 样式, 状态等一切都可以依赖于另一个view, 因此使得parentView和所有childView之间都可以互相联动起来.

这就很厉害了,某一个View的状态、坐标、属性都能随着另外一个View的变化而变化,想起来都应该能做到很多牛逼的事。

AppBarLayout

简介

CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar是vertical方向的LinearLayout,实现了很多MaterialDesign的设计理念。子view需要通过setScrollFlags(int)或app:layout_scrollFlags的方式设置它们需要的滑动行为。AppBarLayout强烈的依赖于CoordinatorLayout,如果把AppBarLayout放在别的ViewGroup中,AppBarLayout的很多功能特性都将失效。

重点参数介绍

CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar

FLAG_ENTER_ALWAYS:当view进入屏幕,会响应向下的滑动事件,不管别的滚动视图的滚动。通常被称作“快速返回”模型。
FLAG_ENTER_ALWAYS_COLLAPSED:另一种enterAlways,返回的view滑动至折叠后的高度,这个高度由最小高度决定。
FLAG_EXIT_UNTIL_COLLAPSED:当view离开屏幕,view会滑动至折叠,折叠高度由最小高度决定。
FLAG_SCROLL:这个view会响应滑动事件。如果别的flag想要生效,必须设置这个flag,如果这个view之前的view没有设置这个属性,那么这个属性就不生效了。
FLAG_SNAP:当滑动结束时,如果view部分可见,会自动滑动至最近的边缘。

CollapsingToolbarLayout

简介

CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+ToolbarCollapsingToolbarLayout继承自FrameLayout,是ToolBar的包装器,被用作AppbarLayout的直接子view。包含以下特性:

  • Collapsing title,折叠title,完整视图时字很大,折叠时,字变小。可设置。
  • Content scrim,内容装饰,当滑动至一定阈值时,内容装饰将被展示或隐藏,内容装饰可以是颜色,也可以setContentScrim(Drawable)
  • Status bar scrim,状态栏装饰,滑动至一定阈值时,状态栏改变。(Lollipop)
  • Parallax scrolling children,子view以视差的形式进行滚动。
  • Pinned position children,子view被固定住。

三个重要的常量


  • COLLAPSE_MODE_OFF:The view will act as normal with no collapsing behavior.这个view政策显示,无折叠效果。
  • COLLAPSE_MODE_PIN:当滚动至CollapsingToolbarLayout底部时,该view将被固定住。
  • COLLAPSE_MODE_PARALLAX:视差模式。与setParallaxMultiplier(float)配合使用,参数为0.0-1.0。

A value of 0.0 indicates no movement at all, 1.0f indicates normal scroll movement.
当滑动时,该view会被下面的内容盖住一部分,并且该view会向上移出屏幕一部分,这两部分共同组成了滑动距离。这里的百分比设置的是当滚动时,该view被下面的内容遮挡的距离占总滑动距离的百分比。当0.0时,意味着滚动时下面的内容不遮挡该view,即下面内容与该view的相对位置不变,顶着view往上走。当1.0时,意味着滚动距离全部体现在下面的内容对view对遮挡上,因此view位置不变,下面的内容逐渐将view覆盖。
因此,官方解释的那句话意思就是,当0.0时,上下视图相对位置不变,1.0时,正常滚动的样子。
手机屏幕被一分为二,红色为下方内容,蓝色为AppBarLayout中CollapsingToobarLayout中的视图,哈哈,其实一般就是做视差用的一个ImageView,设置为COLLAPSE_MODE_PARALLAX,
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar

setParallaxMultiplier(0.0)
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar

setParallaxMultiplier(1.0)
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar

总结

这里仅仅是记录了使用上要注意的属性,离把这几个神奇的布局发挥出他们的作用还差的远。

  • 对于AppBarLayout,主要介绍了它的子view需要设置的app:layout_scrollFlags,设置不同 的属性我们可以在滚动的时候显示不同 的效果。
  • 对于CollapsingToolBarLayout,主要介绍了它的子view需要设置的app:layout_collapseMode这个属性,设置不同的值,子view呈现不同的折叠效果。

参考文章使用CoordinatorLayout打造各种炫酷的效果