CoordinatorLayout 使用综述系列（二）与AppBarLayout结合上下联动效果

CoordinatorLayout 使用综述系列（二）

在 gradle 文件中引入 meterial design 库：

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

CoordinatorLayout 实现了多种Material Design中提到的滚动效果

CoordinatorLayout 与 AppBarLayout结合使用

图2.1

<?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:id="@+id/main_content"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content">        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/toolbar_layout"            android:layout_width="match_parent"            android:layout_height="wrap_content"            app:layout_scrollFlags="scroll|enterAlways">        <!--        这里写头部移动的布局（例如这里的搜索） -->        </android.support.design.widget.CollapsingToolbarLayout>        <android.support.design.widget.TabLayout            android:id="@+id/tl_home_header_tab"            android:layout_width="match_parent"            android:layout_height="44dp"            android:layout_marginLeft="0dp"            android:layout_marginRight="0dp"            android:background="@color/baseHeaderBackgroundColor"            app:tabIndicatorColor="#fff"            app:tabIndicatorHeight="2dp"            app:tabMode="scrollable"            app:tabSelectedTextColor="#fff"            app:tabTextColor="#d7d7d7"/>    </android.support.design.widget.AppBarLayout>    <android.support.v4.view.ViewPager        android:id="@+id/vp_home_content"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior"/></android.support.design.widget.CoordinatorLayout>

视图层级说明

• 整个视图被包含在 android.support.design.widget.CoordinatorLayout节点中
• 响应滑动事件移动的布局 在 android.support.design.widget.AppBarLayout 节点中
• android.support.design.widget.AppBarLayout 节点中有随着移动而被隐藏的布局，也有固定不动的布局
• 随着移动而被隐藏的布局在 android.support.design.widget.CollapsingToolbarLayout 节点中，CollapsingToolbarLayout 可以理解为子条目布局的封装，需要注意的是，在这里设置了CollapsingToolbarLayout节点的 app:layout_scrollFlags=”scroll|enterAlways” 属性

图2.2

• CollapsingToolbarLayout节点的 layout_scrollFlags属性一般有如下的取值

enterAlways: 一旦向上滚动这个view就可见。enterAlwaysCollapsed: 顾名思义，这个flag定义的是何时进入（已经消失之后何时再次显示）。假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。

图2.1中显示的效果就是 layout_scrollFlags属性值设置为 enterAlways时的效果，一般也同时设置scroll 为响应事件，在这里，CollapsingToolbarLayout节点响应的滑动联动事件是 下面所（所设置app:layout_behavior=”@string/appbar_scrolling_view_behavior”）的视图

当设置 app:layout_scrollFlags=”scroll|enterAlwaysCollapsed” 时，向上滑动时，CollapsingToolbarLayout 节点中布局隐藏，当再下拉时，移动隐藏的布局不会再回到原来的位置 ，而是停留在边缘 如图2.3 中所示效果

图2.3