初探CoordinatorLayout+AppBarLayout

之前在知乎客户端第一次看到CoordinatorLayout+AppBarLayout的时候就被其特效深深吸引，那时我还没入android这个深坑，如今终于一探其奥秘，想想还有点小激动呢~

AppBarLayout以其强大的灵活性接替了枯燥的ActionBar的职位，使得整个应用的头部变得不再单调。

废话不多说，直接来看效果吧。

一、标题栏固定

AppBarLayout有着良好的滚动基因，配上CollapsingToolbarLayout对子布局滚动效果的协助，可谓如虎添翼。

以CoordinaryLayout为根布局，AppBarLayout为被滚动布局，再加上NestedScrollView或者RecycleView作为主动滚动布局，就能实现AppBarLayout的滚动效果。

展开状态

折叠状态

代码如下：

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

            android:id="@+id/appbar_main"
        android:layout_width="match_parent"
        android:layout_height="300dp">

                    android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:titleEnabled="false"
            app:contentScrim="@color/colorPrimary">

                            android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/bar_bg"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.9"/>

                            android:id="@+id/toolbar_main"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:titleTextColor="#fff"
                app:title="Hello World"
                app:titleMarginTop="15dp"/>
        
    


            android:id="@+id/recycle_view_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    

CollapsingToolbarLayout的app:layout_scrollFlags属性有5种滚动标识：

·scroll：最基本的标识，只要你想实现AppBarLayout的滚动效果，就必须加上此标识。

·enterAlways：折叠后，一有下拉动作就展开。

·enterAlwaysCollapsed：①定义了minHeight  ②定义了enterAlways  之后再加上此标识就能使view达到minHeight是就开始显示。

·exitUntilCollapsed：当定义了minHeight后，达到minHeight就折叠。

·snap：使动画完整化，当view未完全展开到一定程度则自动展开或折叠，优化了体验效果。

子布局的app:layout_collapseMode有3种折叠模式：

·none：默认属性，无折叠行为。

·pin：折叠后，此布局固定在顶部。（单独使用无效！必须和exitUntilCollapsed配合才能有此效果）

·parallax：折叠时，布局有视差折叠效果。设置完后还需设app:layout_collapseParallaxMultiplier

关于图片折叠时的渐隐效果，必须在CollapsingToolbarLayout中设置app:contentScrim属性，否则图片不会有渐隐效果，另外Toolbar会显示在图片上。

二、标题栏随动

折叠状态

展开状态

代码如下：

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

            android:id="@+id/appbar_main"
        android:layout_width="match_parent"
        android:layout_height="240dp">

                    android:id="@+id/collapse_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:contentScrim="@color/colorPrimary">

                            android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/bar_bg"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.9"/>

                            android:id="@+id/toolbar_main"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"/>
        
    


            android:id="@+id/recycle_view_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    

改动的地方：

去掉Toolbar的app:layout_collapseMode="pin"以及title相关的设置，改为在控制层代码中动态添加。动态添加代码时最好使用mCollapsingToolbarLayout的方法添加，测试时使用mToolbar发现可以设置标题文字但是颜色不好设置。

mCollapsingToolbarLayout.setTitle("Hello World");  //标题
mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.WHITE);  //折叠时标题颜色
mCollapsingToolbarLayout.setExpandedTitleColor(Color.CYAN);  //展开时标题颜色