Material Design折叠工具栏

Material Design里折叠工具栏

最近在学习Material Design，今天先学习了一波CollapsingToolbarLayout，现在这种类型的工具栏是App的主流了。

       <?xml version="1.0" encoding="utf-8"?>
           <android.support.design.widget.CoordinatorLayout
           xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto"
          android:orientation="vertical"
         android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.design.widget.AppBarLayout
       android:id="@+id/appbar_layout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content">
       <android.support.design.widget.CollapsingToolbarLayout
           android:id="@+id/collapse_layout"
           android:layout_width="match_parent"
           android:layout_height="250dp"
           app:contentScrim="@color/colorPrimary"
           app:layout_scrollFlags="scroll|exitUntilCollapsed"
           >

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/meizhi"
                app:layout_collapseMode="parallax"
                />

           <android.support.v7.widget.Toolbar
               android:id="@+id/appbar_layout_toolbar"
               android:layout_width="match_parent"
               android:layout_height="?attr/actionBarSize"
               app:title="9999999"
               app:titleTextColor="@color/white"
               app:navigationIcon="@mipmap/navigation_back_white"
               app:layout_collapseMode="pin"
               />
       </android.support.design.widget.CollapsingToolbarLayout>

   </android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="18dp"
        android:text="@string/large_text"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

activity代码：

    final Toolbar toolbar = (Toolbar) findViewById(R.id.appbar_layout_toolbar);
    StatusBarUtils.setTranslucentImageHeader(this,0,toolbar);
    toolbar.setTitleTextColor(Color.TRANSPARENT);
    toolbar.inflateMenu(R.menu.menu_search);
    AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar_layout);

    final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapse_layout);
    collapsingToolbarLayout.setTitle("");
    collapsingToolbarLayout.setCollapsedTitleTextColor(getResources().getColor(R.color.white));
    collapsingToolbarLayout.setExpandedTitleColor(getResources().getColor(R.color.white));
    collapsingToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT);

    appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                                 //这边来判断滑动距离；
                        if(Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()){
                toolbar.setTitleTextColor(getResources().getColor(R.color.white));
                toolbar.setTitle("Uustrong");
            }else{
                collapsingToolbarLayout.setTitle("");
            }
        }
    });

AppBarLayout是一种支持响应滚动手势的app bar布局（比如工具栏滚出或滚入屏幕），CollapsingToolbarLayout则是专门用来实现子布局内不同元素响应滚动细节的布局。

与AppBarLayout组合的滚动布局（Recyclerview、NestedScrollView等）需要设置app:layout_behavior="@string/appbar_scrolling_view_behavior"（上面代码中NestedScrollView控件所设置的）。没有设置的话，AppBarLayout将不会响应滚动布局的滚动事件。

CollapsingToolbarLayout和ScrollView一起使用会有滑动bug，注意要使用NestedScrollView来替代ScrollView。

AppBarLayout的子布局有5种滚动标识(就是上面代码CollapsingToolbarLayout中配置的app:layout_scrollFlags属性)：

1.scroll:将此布局和滚动时间关联。这个标识要设置在其他标识之前，没有这个标识则布局不会滚动且其他标识设置无效。

2.enterAlways:任何向下滚动操作都会使此布局可见。这个标识通常被称为“快速返回”模式。

3.enterAlwaysCollapsed：假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。

4.exitUntilCollapsed：当你定义了一个minHeight，此布局将在滚动到达这个最小高度的时候折叠。

5.snap:当一个滚动事件结束，如果视图是部分可见的，那么它将被滚动到收缩或展开。例如，如果视图只有底部25%显示，它将折叠。相反，如果它的底部75%可见，那么它将完全展开。

CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局的颜色，通过app:statusBarScrim设置折叠时状态栏的颜色。默认contentScrim是colorPrimary的色值，statusBarScrim是colorPrimaryDark的色值。这个后面会用到。

CollapsingToolbarLayout的子布局有3种折叠模式（Toolbar中设置的app:layout_collapseMode）

1.off：这个是默认属性，布局将正常显示，没有折叠的行为。

2.pin：CollapsingToolbarLayout折叠后，此布局将固定在顶部。

3.parallax：CollapsingToolbarLayout折叠时，此布局也会有视差折叠效果。

当CollapsingToolbarLayout的子布局设置了parallax模式时，我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子，值为：0~1。