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