草帽团长
草帽团长

CoordinatorLayout、AppbarLayout、CollapsingToolbarLayout实现酷炫标题栏

一、前言

依赖关系：
CollapsingToolbarLayout > AppbarLayout > CoordinatorLayout

CollapsingToolbarLayout，用来包装Toolbar实现可折叠标题栏，必须作为AppbarLayout的直接子view使用；AppbarLayout又要作为CoordinatorLayout的直接子view使用，否则功能不能正常使用。

三者都是design包中的，使用需要导入design包

compile 'com.android.support:design:25.3.1'

二、CoordinatorLayout

1. 简介

CoordinatorLayout，design包提供的一个加强版的FrameLayout，可以监听子控件的各种事件，自动协调作出最合理的响应。

2. 要点

  • app:layout_behavior （用于child view）

布局示例：
根部局CoordinatorLayout，子视图 Toolbar + NestedScrollview

因为 CoordinatorLayout 实际上是 FrameLayout，所以 NestedScrollview 会覆盖遮挡 Toolbar。

解决办法：

  1. NestedScrollview 加上 MarginTop 属性，值为 Toolbar 高度。

但是，CoordinatorLayout 为我们提供了更好的解决办法：

  1. 为Toolbar包裹一层AppbarLayout
  2. 为NestedScrollview添加属性app:layout_behavior="@string/appbar_scrolling_view_behavior"
  • 子视图为滚动视图

子视图为滚动控件时，要选择实现NestedScrollingChild接口的控件，如NestedScrollview 或 Recyclerview ； 如果用listview 或 scrollview联动有问题

三、AppbarLayout

1. 简介

AppbarLayout继承自LinearLayout，是个垂直的线性布局，严重依赖CoordinatorLayout。

2. 要点

app:layout_scrollFlags （用于child view）

AppbarLayout通过child view设置的这个属性获知它们需要的滚动行为。共有5种常量值：scroll，enterAlways，enterAlwaysCollapsed，snap，exitUntilCollapsed。

代码设置：

AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) toolbar.getLayoutParams();
params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL| AppBarLayout.LayoutParams.SCROLL_FLAG_SNAP);

xml设置：
  • scroll

滚动模式，此属性将会让child view直接与滚动事件关联，随着scroll view滚动而滚动，优先滚动scroll view。

注意：

  1. 使用其他常量值，必须结合使用scroll常量值，否则不起作用
  2. 使用此常量值的子view，如果前面还有其他子view，也要使用此常量值，否则不起作用

[图片上传失败...(image-ef5f3-1545206955442)]

  • enterAlways
    快速返回模式，向下滚动时优先滚动child view至完全显示，再去滚动scroll view。
image
  • enterAlwaysCollapsed
    快速返回折叠标题栏的最小高度，enterAlaways的附加值，向下滚动时优先滚动child view至最小高度，再滚动scroll view 至完全显示，最后滚动child view 至完全显示。
image
  • exitUntilCollapsed
    滚出屏幕至折叠处（最小高度），向上滚动时child view 随 scroll view滚动出屏幕直到最小高度后不再滚动；向下滚动时优先滚动scroll view 至完全显示，再滚动child view至完全显示。
image
  • snap
    吸附模式，根据child view在我们滑动中松开手指时的滑动高度决定child view 要么完全显示，要么完全不显示。
image

上图因为结合使用了exitUntilCollapsed，toolbar最少显示为最小高度，不能完全不显示

四、CollapsingToolbarLayout

1. 简介

CollapsingToolbarLayout继承自FrameLayout，用来包装Toolbar实现折叠标题栏，必须在AppbarLayout中使用。

2. 要点

  • theme （用于自身）
    为实现更高级的toolbar效果，theme属性要提到collapsingtoolbarlayout上，否则collapsingtoolbarlayout使用的是应用的主题。
CoordinatorLayout、AppbarLayout、CollapsingToolbarLayout实现酷炫标题栏_第1张图片
13

上图，只给toolbar设置了theme：

app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

应用主题: