CoordinatorLayout配合AppBarLayout、CollapsingToolbarLayout、Toolbar使用（包含沉浸式）

效果如图：

c8f2bb64469bae61739745241ba7b8a1.gif

首先介绍上述几个控件在使用的时候的注意点：

• CoordinatorLayout：

  • 是一个FrameLayout

• AppBarLayout：

  • 是一个vertical的LinearLayout，其子View应通过setScrollFlags(int)或者xmL中的app:layout_scrollFlags来提供他们的Behavior。
  • 具体的app:layout_scrollFlags有这么几个： scroll, exitUntilCollapsed, enterAlways, enterAlwaysCollapsed, snap

    • scroll:
      子View如果设置layout_scrollFlags属性的值为scroll，这个View会随着Scrolling View一起滚动，当向上滚动的时候，Toolbar会滚出屏幕外，如果不设置，那么Toolbar会固定不动。

    • enterAlways:
      使用这个flag，当Scrolling View 向下滑动时，子View 将直接向下滑动，而不管Scrolling View 是否在滑动。注意：要与scroll 搭配使用，否则是不能滑动的。(上图演示的效果，正是scroll和enterAlways两个flag同时使用产生的效果，即向上滚动,Toolbar滚出屏幕，向下滚动，Toolbar重新进入屏幕)。

    • enterAlwaysCollapsed:
      enterAlwaysCollapsed 是对enterAlways 的补充，当Scrolling View 向下滑动的时候，滑动View（也就是设置了enterAlwaysCollapsed 的View）下滑至折叠的高度，当Scrolling View 到达滑动范围的结束值的时候，滑动View剩下的部分开始滑动。这个折叠的高度是通过View的minimum height （最小高度）指定的。（要配合scroll｜enterAlways 一起使用）

    • exitUntilCollapsed:
      当Scrolling View 滑出屏幕时（也就时向上滑动时），滑动View先响应滑动事件，滑动至折叠高度，也就是通过minimum height 设置的最小高度后，就固定不动了，再把滑动事件交给 Scrolling view 继续滑动。

    • snap
      在滚动结束后，如果view只是部分可见，它将滑动到最近的边界。比如，如果view的底部只有25%可见，它将滚动离开屏幕，而如果底部有75%可见，它将滚动到完全显示。

• CollapsingToolbarLayout
  它是AppBarLayout下的子控件，CollapsingToolbarLayout可以看成一个可折叠的toolbar，里面包含一个imageView和一个toolbar当它缩到最小的时候就是一个普通的toolbar，它可以实现：随着滑动，图片逐渐缩小最后只剩下toolbar。必须在CollapsingToolbarLayout设置layout_scrollFlags属性才可以跟随其他view缩放，至于它的属性后面介绍。
  它内部的子View一般都要加上属性：app:layout_collapseMode=""，常用的是parallax，pin。
  ▪ parallax是视差滚动，用在imageView
  ▪ pin是固定，用在toolbar

  • 其他属性：
    • app:contentScrim：代表CollapsingToolbarLayou缩到最小后的背景颜色(即toolbar背景)
    • app:statusBarScrim：代表CollapsingToolbarLayou缩到最小后的状态栏的背景颜色
    • app:expandedTitleMarginStart：CollapsingToolbarLayou还没开始收缩时距离左边的距离，上面我们设置未0，所以文字在最左边。

• 内容控件：
  我们需要和AppBarLayout同一级下添加一个内容控件，并添加

app:layout_behavior="@string/appbar_scrolling_view_behavior" 

他们的层次关系如下图（图是网上扣来的）

image.png

以下是我自己写的布局

如果想需要实现沉浸式：

image.png

给相对应的activity设置主题

image.png

android:theme="@style/TranslucentTheme"

• AppBarLayout的监听事件

tabLay.addOnOffsetChangedListener(this)

override fun onOffsetChanged(bar: AppBarLayout?, height: Int) {
        val heghtScroll = abs(height)
        val oneHeight = oneView.height
        val twoHeight = twoView.height
        val threeHeight = threeView.height
        val fourHeight = tabContent.height
        if (heghtScroll == 0){
            Log.e("tag","$height******头部")
            initView()
        }else if (heghtScroll in 1..oneHeight){
            Log.e("tag","$height******第一部分0~300")
            topView.setBackgroundColor(resources.getColor(R.color.colorPrimary))
        }else if (heghtScroll in (oneHeight+1) ..  (oneHeight+twoHeight)){
            Log.e("tag","$height******第二部分300~600")
            topView.setBackgroundColor(resources.getColor(R.color.colorPrimaryDark))
        }else if (heghtScroll in (oneHeight+twoHeight+1) until (oneHeight+twoHeight+threeHeight)){
            Log.e("tag","$height******第三部分600~900")
            topView.setBackgroundColor(resources.getColor(android.R.color.holo_green_dark))
        }else if (heghtScroll == oneHeight+twoHeight+threeHeight){
            Log.e("tag","$height******第四部分900以上")
            topView.setBackgroundColor(resources.getColor(android.R.color.holo_purple))
        }else{
            Log.e("tag","******$height******")
        }
    }

根据滑动来改变状态栏的颜色(项目需求)
效果图：

a38767dd1db315b16f714f49296e624c.gif