CoordinatorLayout打造折叠悬浮效果

一、CoordinatorLayout

是一个ViewGroup，遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的折叠悬浮效果。

二、AppBarLayout

是一个vertical的LinearLayout，其子View应通过下面两种方式来提供他们的Behavior。

1.代码方式：

setScrollFlags(int)

2.xmL方式:

app:layout_scrollFlags

具体的app:layout_scrollFlags有这么几个： scroll, exitUntilCollapsed, enterAlways, enterAlwaysCollapsed, snap

常量	常数值	解释
SCROLL_FLAG_ENTER_ALWAYS	4（0x00000004）	当进入（在屏幕上滚动）时，无论滚动视图是否也在滚动，视图都将滚动任何向下滚动事件。这通常被称为“快速返回”模式。
SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED	8（0x00000008）	enterAlways的另一个标志，它修改返回的视图，最初只回滚到它的折叠高度。一旦滚动视图到达其滚动范围的末尾，该视图的其余部分将滚动到视图中。折叠高度由视图的最小高度定义。
SCROLL_FLAG_EXIT_UNTIL_COLLAPSED	2（0x00000002）	退出（滚动屏幕）时，视图将滚动直到“折叠”。折叠高度由视图的最小高度定义。
SCROLL_FLAG_SCROLL	1（0x00000001）	视图将滚动与滚动事件直接相关。需要设置此标志才能使任何其他标志生效。如果在此之前的任何兄弟视图没有此标志，则此值无效
SCROLL_FLAG_SNAP	16（0x00000010）	在滚动结束时，如果视图仅部分可见，则它将被捕捉并滚动到其最近的边缘。例如，如果视图仅显示其底部25％，则它将完全滚出屏幕。相反，如果它的底部75％是可见的，那么它将完全滚动到视图中。

上面解释是官方翻译的，不好理解，可以直接看运行效果演示gif。

他必须严格地是CoordinatorLayout的子View，不然他一点作用都发挥不出来。

三、AppBarLayout下方的滑动控件

比如RecyclerView，NestedScrollView（与AppBarLayout同属于CoordinatorLayout的子View,并列的关系）,必须严格地通过在xml中指出其滑动Behavior来与AppBarLayout进行绑定。通常这样：

app:layout_behavior=\"@string/appbar_scrolling_view_behavior\" 

四、CollapsingToolbarLayout

是一个专门用来包裹Toolbar的控件，里面可以放置一个imageView和一个toolbar然后轻松地实现：随着滑动，图片和toolbar的标题也有动画。

内部的子View一般都要加上属性：

app:layout_collapseMode=""

常用的是parallax，pin。

parallax是视差滚动，用在imageView, pin是固定，用在toolbar。

用setContentScrimColor(int)或者setContentScrim(drawable)来设置内容纱布，就是当折叠到只剩下Toolbar的时候，用一个另外的图片或者颜色来设置toolbar的背景。

五、Toolbar

他的title如果需要带有CollapsingToolbarLayout的动画的话，就要用collapsingToolbarLayout.setTitle(); 否则是没有动画的，其他的和toolbar平时一样。

六、代码

下面通过代码的方式看看效果

首先看看xml布局

activity里面

public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar;
    private CollapsingToolbarLayout collapsingToolbarLayout;

    /**
     * @param savedInstanceState
     */
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = findViewById(R.id.toolbar);
        collapsingToolbarLayout = findViewById(R.id.collapsingToolbar);
        toolbar.setNavigationIcon(R.drawable.back);
        collapsingToolbarLayout.setTitle("科比背打科比哈哈哈哈哈哈哈");

    }

七、运行效果

1. app:layout_scrollFlags=”scroll|exitUntilCollapsed”

2. app:layout_scrollFlags=”scroll|enterAlways”

3. app:layout_scrollFlags=”scroll|enterAlwaysCollapsed”

4. app:layout_scrollFlags=”scroll|snap”

最后，附上Demo地址：https://github.com/Kanghanbin/CoordinatorLayoutDemo