准备工作:引入design库,活动主题设置为NoActionBar,设置xml中toolbar到setSupportActionBar
先上折叠标题栏代码:
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="256dp">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="@color/colorPrimary"
app:expandedTitleMarginStart="100dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:src="@mipmap/ic_launcher"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
根布局必须是CoodinatorLayout,这个布局具备处理各个子组件交互的能力。根布局下有一个AppBar(必须作为coodinatorlayout直接子元素才可正常工作)和一个可滑动的view(这是是recyclerview)。
AppBarLayout包含一个CollapsingToolbarLayout,从字面意思可以看出,这是专门处理可折叠标题栏的,其包含一个展开后显示的view以及折叠后显示的toolbar。
接下来就是设置属性了,首先给recyclerview设置layout_behavior(coordinatorlayout中的一个核心属性,用以建立各个组件之间的依赖关系),这个值表示滑动将传递给appbarlayout。
然后设置collapsingtoolbarlayout,contentScrim表示收起后显示的背景颜色(这里也就是toolbar的背景颜色),布局根据这个颜色封装了一个渐变效果。expandedTitleMarginStart(以及其他margin)表示展开时标题的margin。
最重要的就是layout_scrollFlags,这个属性并非collapsingtoolbarlayout专属,表示对滑动的处理。
layout_scrollFlags 的取值可以为以下几种。
-
scroll
设成这个值的效果就好比本 View 和 Scrolling view 是“一体”的,如果只设置这个值的话滑动会很呆滞,就好像标题栏变成了列表的第一项。其他的滚动行为生效,必须同时指定 Scroll 和相应的标记。
-
exitUntilCollapsed
当本 View 离开屏幕时,会被“折叠”直到达到其最小高度。而只有列表完全到达顶部之后本view才可以向下滑动展开。
-
enterAlways
当 Scrolling view 向下滚动时,本 View 会一起跟着从屏幕顶端向下滚动显示。相比于简单的scroll效果好了一些,只要scrolling view往下滑本view就会显示出来。
-
enterAlwaysCollapsed
从名字上就可以看出,这是在 enterAlways 的基础上,加上了“折叠”的效果。当我们开始向下滚动 Scrolling View 时,本 View 会一起跟着滚动直到达到其“折叠高度”(即最小高度)。然后当 Scrolling View 滚动至顶部内容完全显示后,再向下滚动 Scrolling View,本 View 会继续滚动到完全显示出来。 也就是两段滑动。
-
snap
在一次滚动结束时,本 View 很可能只处于“部分显示”的状态,加上这个标记能够达到“要么完全隐藏,要么完全显示”的效果。这个完全隐藏是指留出toolbar高度或者完全不显示。
最后要为imageview和toolbar设置layout_collapseMode。有两个值,parallax表示视差滑动,也就是imageview折叠的过程中图片会比原滑动移动的慢一点。配合着一个视差参数使用。pin表示一直显示在顶部,也就是折叠后显示在顶部。
明白了折叠标题栏,那么随滑动移入移出的标题栏就很简单了,不需要使用collapsingtoolbarlayout,直接把toolbar设置为appbar子项,处理滑动属性设置成scroll|enterAlways就可以了。想要避免不完全显示的话就加一个snap