初探CoordinatorLayout+AppBarLayout 初探CoordinatorLayout+AppBarLayout

之前在知乎客户端第一次看到CoordinatorLayout+AppBarLayout的时候就被其特效深深吸引，那时我还没入android这个深坑，如今终于一探其奥秘，想想还有点小激动呢~
【初探CoordinatorLayout+AppBarLayout】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="https://www.it610.com/article/@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="https://www.it610.com/article/@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); //展开时标题颜色