Material Design CoordinatorLayout

本文的主要介绍的是用Coordinator实习的两种基本的效果如图。

第一种 

第二种

话不多说，让我们进入正题！先简单的介绍一下CoordinatorLayout的作用主要是作为顶布局协调子布局。先来实现第一个效果

<?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="wrap_content">        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            app:layout_scrollFlags="scroll|enterAlways"></android.support.v7.widget.Toolbar>    </android.support.design.widget.AppBarLayout>    <android.support.v7.widget.RecyclerView        android:id="@+id/recyclerview"        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>

上面的代码的主要思路就是:Coordinator作为顶布局协调子布局中的控件，然后通过在Toolbar中设置app:layout_srcollFlags的属性控制Toolbar来滚动进出界面,最后需要在RecyclerView中设置app:layout_behavior的属性。注意：为了有这种滚动的效果，必须需要有能够滚动的控件，同时禅设置layout_behavior的属性。这里重点来介绍一下app:layout_scrollFlags**scroll: 所有想滚动出屏幕的view都需要设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。enterAlways: 设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”。enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。**第二中效果的代码

<?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"    android:fitsSystemWindows="true">    <android.support.design.widget.AppBarLayout        android:id="@+id/appbar"        android:layout_width="match_parent"        android:layout_height="260dp"> <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/collapsing_toolbar"            android:layout_width="match_parent"            android:layout_height="match_parent"            app:contentScrim="?attr/colorPrimary"            app:layout_scrollFlags="scroll|exitUntilCollapsed">            <ImageView                android:id="@+id/backdrop"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:fitsSystemWindows="true"                android:scaleType="centerCrop"                android:src="@mipmap/chorong"                app:layout_collapseMode="parallax" />            <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.v7.widget.Toolbar>        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <android.support.v7.widget.RecyclerView        android:id="@+id/recyclerview"        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.FloatingActionButton        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@mipmap/ic_launcher"        app:layout_anchor="@id/appbar"        app:layout_anchorGravity="bottom|right|end" /></android.support.design.widget.CoordinatorLayout>

上面代码与第一个效果的最主要区别就是加了CollapsingToolbarLayout这个控件，这个作用就是滚动到顶部的时候将Toolbar折叠起来。上面代码主要用到了CollapsingToolbarLayout的以下属性。layout_collapseMode:子视图的折叠模式，在子视图设置，有两种  。“pin”：固定模式，在折叠的时候最后固定在顶端；“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。contentScrim:ToolBar被折叠到顶部固定时候的背景，你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。layout_anchor 和layout_anchorGravity:用来放置与其他视图关联在一起的悬浮视图（如 FloatingActionButton）。这里我们关联了AppBarLayout使FloatingActionButton一起滚动隐藏出现。这样，两种效果就已经完成了。