CollapsingToolbarLayout / AppBarLayout / CoordinatorLayout / FloatingActionB

效果展示

CollapsingToolbarLayout：可展开可折叠Toolbar

属性:

app:layout_scrollFlags=”” 该属性表示CollapsingToolbarLayout的滚动标签，共有5个取值：
1> scroll 表示可以滚动
2> enterAlways 表示地步的ScrollView只要向下滚动，头部就显示出来
3> enterAlwaysCollapsed 表示ScrollView滚动见顶时，头部显示出来
4> exitUntilCollapsed 表示头部折叠到最小高度是（Toolbar高度），就不在折叠
5> snap 表示滑动过程中如果停止滑动，头部会就近折叠

app:contentScrim=”@color/colorPrimary” 表示当头部折叠完成时显示的颜色

app:layout_collapseMode=”” 表示控件的折叠模式，有两种取值：
1> parallax 表示控制的折叠和CollapsingToolbarLayout的折叠不同步
2> pin 表示折叠完成时将该控件停放在顶部

app:laouy_collapseParallaxMultiplier=”” 视觉乘数（设置视觉差，取值0-1，数值越大，视觉差越大）

app:title=”Title” 属性会覆盖Toolbar中的title（推荐将Title写在这里）

app:expandedTitleMarginXXXXX 设置Title的边距

app:collapsedTitleGravity=”right” 折叠之后文本的位置

app:expandedTitleGravity=”right|bottom” 展开之后文本的位置

---

AppBarLayout：向上滚动隐藏指定的View

支持手势滑动操作（需要跟CoordinatorLayout配合使用），默认的AppBarLayout是垂直方向的，它的作用是把AppBarLayout包裹的内容都作为AppBar。

---

CoordinatorLayout：协调子View

添加依赖：compile ‘com.android.support:design:23.1.1’

---

FloatingActionButton：浮动操作按钮用于一种特殊类型的推广行动

app:elevation（控制悬浮高度）

app:layout_anchor=”@id/app_bar” （设置悬浮参考位置(该属性在CoordinatorLayout容器中才有效果)）

app:layout_anchorGravity=”bottom|right” （设置控件显示位置(该属性在CoordinatorLayout容器中才有效果)）

app:fabSize=”mini” 设置控件大小，要自定义，在dimens文件中重新定义，示例如下：

    <dimen name="design_fab_size_mini">100dp</dimen>
    <dimen name="design_fab_size_normal">200dp</dimen>

添加依赖：compile 'com.android.support:design:23.1.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.lenovo.day38_coordinatorlayout.MainActivity">

    <!--设置标头高度，控制CollapsingToolbarLayout折叠展开-->

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbarlayout"
        android:layout_width="match_parent"
        android:layout_height="180dp">

        <!--属性上面有介绍，app:layout_scrollFlags 需要手动添加-->

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:collapsedTitleGravity="left"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleGravity="right|bottom"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlwaysCollapsed|snap"
            app:title="My App">

            <!--app:layout_collapseMode 和 app:layout_collapseParallaxMultiplier 需要手动添加 -->

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/header_bg"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <!--app:layout_collapseMode 需手动添加-->

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?android:actionBarSize"
                android:title="My_App"
                app:layout_collapseMode="pin" />

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

    <!--app:layout_behavior 需手动添加，文字内容写在values资源文件夹/strings文件里-->

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/book_content" />

    </android.support.v4.widget.NestedScrollView>

    <!--属性上面有介绍-->

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="5dp"
        android:src="@android:drawable/ic_input_add"
        app:backgroundTint="@color/colorPrimaryDark"
        app:fabSize="normal"
        app:layout_anchor="@id/appbarlayout"
        app:layout_anchorGravity="bottom|right" />

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