先看效果
demo
开始使用
1. 引入
compile 'com.android.support:design:27.1.1'
2. 布局结构
<android.support.design.widget.CoordinatorLayout >
<android.support.design.widget.AppBarLayout >
<android.support.design.widget.CollapsingToolbarLayout >
<ImageView />
<android.support.v7.widget.Toolbar />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView >
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton />
</android.support.design.widget.CoordinatorLayout>
-
CoordinatorLayout：用来协调UI中 View 的滚动； -
AppBarLayout：AppBar -
CollapsingToolbarLayout：折叠布局 -
ImageView：背景图片 -
Toolbar：最终被折叠起来的 Toolbar -
NestedScrollView页面的主要内容 -
FloatingActionButton右上角的悬浮按钮
3. 完整布局
<?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"
app:layout_collapseParallaxMultiplier="0.9">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/ctl"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorAccent"
app:expandedTitleMarginEnd="15dp"
app:expandedTitleMarginStart="15dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/iv_cover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/ic_launcher_background" />
<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.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="15dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginBottom="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginBottom="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginBottom="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginBottom="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4" />
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:id="@+id/faBtn"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:src="@android:drawable/sym_action_email"
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
4. 几个重要的属性
-
CoordinatorLayout的属性
-
app:layout_collapseParallaxMultiplier="0.9"：控制滑动时的视觉差，取值范围 0~1
-
AppBarLayout的属性
-
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"：可控制返回按钮以及 title 字体的颜色
-
CollapsingToolbarLayout的属性
-
contentScrim： 折叠后，Toolbar 的背景颜色 -
layout_scrollFlags：CollapsingToolbarLayout 滚动的模式，layout_scrollFlags 有如下几种选项：-
scroll：想要 CollapsingToolbarLayout 滚出屏幕，必须设置该值，否则 CollapsingToolbarLayout 将被固定在屏幕顶部 -
exitUntilCollapsed：上滑，折叠在屏幕顶端，继续上滑，CollapsingToolbarLayout 下面的 View 才会退出屏幕；下滑，CollapsingToolbarLayout 下面的 View 逐渐进入屏幕，继续，CollapsingToolbarLayout 才会展开； -
enterAlwaysCollapsed：与 exitUntilCollapsed 类似，但是折叠后不会固定在屏幕顶部； -
snap：与 enterAlwaysCollapsed 的最终效果一样，但是没有渐变过程，上滑，逐渐滚出屏幕，中间没有停留，下滑，逐渐中展开，中间没有停留； -
enterAlways：上滑，与 enterAlwaysCollapsed 一样的效果，下滑，先展开 CollapsingToolbarLayout，之后其下面的 View 才会进入屏幕； - 常用组合
-
"scroll|exitUntilCollapsed"
"scroll|enterAlwaysCollapsed"
"scroll|snap"
"scroll|enterAlways"
-
app:expandedTitleMarginStart="15dp"：展开时，标题距离屏幕开始的位置，此外还有：
app:expandedTitleMarginStart
app:expandedTitleMargin
app:expandedTitleMarginBottom
app:expandedTitleMarginEnd
Toolbar
-
app:layout_collapseMode="pin"：Toolbar 的折叠模式，有3种取值：-
pin：固定模式，在折叠的时候最后固定在顶端; -
parallax：视差模式，在折叠的时候会有个视差折叠的效果； -
none：随着滑动滚出屏幕；
-
NestedScrollView
-
app:layout_behavior="@string/appbar_scrolling_view_behavior"：通知布局中包含滑动组件，很重要！如果不设置，View 的滚动的将会出现混乱
FloatingActionButton
-
app:layout_anchor="@id/appBar"：锚点 -
app:layout_anchorGravity="bottom|right|end"在锚点的位置
源码：
布局 activity_002_collapsing_toolbar_layout
_002_CollapsingToolbarLayout
