Android Design - 可折叠的ToolBar

先看效果

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. 几个重要的属性

1. CoordinatorLayout 的属性

• app:layout_collapseParallaxMultiplier="0.9" ：控制滑动时的视觉差，取值范围 0~1

2. AppBarLayout 的属性

• android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" ：可控制返回按钮以及 title 字体的颜色

3. 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

4. Toolbar

• app:layout_collapseMode="pin" ：Toolbar 的折叠模式，有3种取值：
  • pin ：固定模式，在折叠的时候最后固定在顶端;
  • parallax ：视差模式，在折叠的时候会有个视差折叠的效果；
  • none ：随着滑动滚出屏幕；

5. NestedScrollView

• app:layout_behavior="@string/appbar_scrolling_view_behavior" ：通知布局中包含滑动组件，很重要！如果不设置，View 的滚动的将会出现混乱

6. FloatingActionButton

• app:layout_anchor="@id/appBar" ：锚点
• app:layout_anchorGravity="bottom|right|end" 在锚点的位置

---

源码：
布局 activity_002_collapsing_toolbar_layout
_002_CollapsingToolbarLayout