design包下CoordinatorLayout的使用笔记

要实现各种酷炫的效果，需要CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout结合起来用。

<?xml version="1.0" encoding="utf-8"?>
<!--CoordinatorLayout继承自viewgroup,类似frameLayout-->
<!--直接子布局中添加app:layout_behavior属性能实现一些滚动效果-->
<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">

    <!--AppBarLayout继承自LinearLayout-->
    <!--默认有CoordinatorLayout的layout_behavior属性,所以能实现各种效果-->
    <!--其直接子控件可以设置layout_scrollFlags属性，不同的效果就自己去试吧，实践才是王道-->
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <!--CollapsingToolbarLayout继承自framLayout-->
        <!--它的直接子布局可以使用属性layout_collapseMode控制折叠模式:取值: -->
        <!--1.pin:自己实践吧-->
        <!--2.parallax:视察效果layout_collapseParallaxMultiplier视差因子 0~1之间取值-->
        <!--3.不设置或者设为none:跟随NestedScrollView一起滑动,NestedScrollView滑动多少距离他就会跟着走多少距离-->
        <!--CollapsingToolbarLayout折叠到最顶端时,会处于最上层,包括toolbar在内,所有的布局都会被他盖住,显示不出来，或者可以设置一个透明的背景显示下面的内容-->
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            app:contentScrim="@color/colorAccent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_collapseMode="parallax">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="20dp"
                    android:background="#60f0"
                    android:text="collapseMode=pin"
                    android:textSize="15sp"
                    app:layout_collapseMode="pin" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:background="#61ff"
                    android:text="不设置或者设为none,跟随滑动"
                    android:textSize="25sp"
                    app:layout_collapseMode="none" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:background="#aa66febc"
                    android:text="collapseMode=parallax"
                    android:textSize="20sp"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.5" />

            </LinearLayout>
            <!--只要CollapsingToolbarLayout里面包含有Toolbar那么CollapsingToolbarLayout折叠后最小高度就是toolbar的高度-->
            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                android:layout_gravity="center_vertical"
                android:background="#66FF4081"
                app:layout_collapseMode="pin">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Toolbar"
                    android:textColor="#000"
                    android:textSize="20sp"
                    android:textStyle="bold" />
            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.CollapsingToolbarLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="AppBarLayout之内,CollapsingToolbarLayout之外"
            android:textColor="#0f0" />


    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/n_scroll_view"
        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.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

关于CoordinatorLayout与Behavior的一点分析

使用 CoordinatorLayout 实现复杂联动效果

CoordinatorLayout 自定义Behavior并不难，由简到难手把手带你飞