Android 5.0中CoordinatorLayout的使用技巧

概述CoordinatorLayout实现了多种MaterialDesign中提到的滚动效果。目前这个框架提供了几种不用写动画代码就能工作的方法，这些效果包括：

CoordinatorLayout 实现了多种Material Design中提到的滚动效果。目前这个框架提供了几种不用写动画代码就能工作的方法，这些效果包括：

*让浮动 *** 作按钮上下滑动，为Snackbar留出空间。
*扩展或者缩小Toolbar或者头部，让主内容区域有更多的空间。
*控制哪个vIEw应该扩展还是收缩，以及其显示大小比例，包括视差滚动效果动画。

浮动 *** 作按钮与Snackbar

CoordinatorLayout可以用来配合浮动 *** 作按钮的 layout_anchor 和 layout_gravity属性创造出浮动效果。
当Snackbar在显示的时候，往往出现在屏幕的底部。为了给Snackbar留出空间，浮动 *** 作按钮需要向上移动。

只要使用CoordinatorLayout作为基本布局，将自动产生向上移动的动画。浮动 *** 作按钮有一个 默认的 behavior来检测Snackbar的添加并让按钮在Snackbar之上呈现上移与Snackbar等高的动画。

<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.v7.Widget.RecyclerVIEw  androID:ID="@+ID/rvTodoList"  androID:layout_wIDth="match_parent"  androID:background="#9d9d9d"  androID:layout_height="match_parent"/> <androID.support.design.Widget.floatingActionbutton  androID:ID="@+ID/fab"  androID:layout_wIDth="wrap_content"  androID:layout_height="wrap_content"  androID:layout_gravity="end|bottom"  androID:layout_margin="16dp"  app:layout_anchor="@ID/rvTodoList"  app:layout_anchorGravity="bottom|right|end"/> <!--app:layout_anchor:意思是FAB浮动按钮显示在哪个布局区域。且设置当前锚点的位置 app:layout_anchorGravity:意思FAB浮动按钮在这个布局区域的具体位置。两个属性共同作用才是的FAB 浮动按钮也能折叠消失，出现。 --></androID.support.design.Widget.CoordinatorLayout>

protected voID onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentVIEw(R.layout.activity_main);  findVIEwByID(R.ID.fab).setonClickListener(new VIEw.OnClickListener() {   @OverrIDe   public voID onClick(VIEw v) {    Snackbar.make(v,"test",Snackbar.LENGTH_LONG)      .setAction("Cancel",new VIEw.OnClickListener() {       @OverrIDe       public voID onClick(VIEw v) {        //这里的单击事件代表点击消除Action后的响应事件        Toast.makeText(MainActivity.this,"asdasd",Toast.LENGTH_SHORT).show();       }      }).show();   }  }); }

Toolbar的扩展与收缩

首先需要确保你不是使用已经过时的Actionbar，使用Toolbar作为actionbar。同样，这里也需要CoordinatorLayout作为主布局容器。
我们必须使用一个容器布局： AppbarLayout 来让Toolbar响应滚动事件。响应滚动事件

<androID.support.design.Widget.AppbarLayout  androID:ID="@+ID/appbar"  androID:layout_wIDth="match_parent"  androID:layout_height="@dimen/detail_backdrop_height"  androID:theme="@style/themeOverlay.AppCompat.Dark.Actionbar"  androID:fitsSystemwindows="true"> <androID.support.v7.Widget.Toolbar    androID:ID="@+ID/toolbar"    androID:layout_wIDth="match_parent"    androID:layout_height="?attr/actionbarSize"    app:popuptheme="@style/themeOverlay.AppCompat.light" /> </androID.support.design.Widget.AppbarLayout>

然后，我们需要定义AppbarLayout与滚动视图之间的联系。在RecyclerVIEw或者任意支持嵌套滚动的vIEw比如nestedScrollVIEw上添加app:layout_behavior。support library包含了一个特殊的字符串资源@string/appbar_scrolling_vIEw_behavior，它和AppbarLayout.ScrollingVIEwBehavior相匹配，用来通知AppbarLayout 这个特殊的vIEw何时发生了滚动事件，这个behavior需要设置在触发事件（滚动）的vIEw之上。注意：根据官方的谷歌文档，AppbarLayout目前必须是第一个嵌套在CoordinatorLayout里面的子vIEw。

<androID.support.v7.Widget.RecyclerVIEw  androID:ID="@+ID/rvTodoList"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  app:layout_behavior="@string/appbar_scrolling_vIEw_behavior">

AppbarLayout里面定义的vIEw只要设置了app:layout_scrollFlags属性，就可以在RecyclerVIEw滚动事件发生的时候被触发：当CoordinatorLayout发现RecyclerVIEw中定义了这个属性，它会搜索自己所包含的其他vIEw，看看是否有vIEw与这个behavior相关联。AppbarLayout.ScrollingVIEwBehavior描述了RecyclerVIEw与AppbarLayout之间的依赖关系。RecyclerVIEw的任意滚动事件都将触发AppbarLayout或者AppbarLayout里面vIEw的改变。

<androID.support.design.Widget.AppbarLayout  androID:layout_wIDth="match_parent"  androID:layout_height="wrap_content"  androID:fitsSystemwindows="true"  androID:theme="@style/themeOverlay.AppCompat.Dark.Actionbar">   <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.design.Widget.AppbarLayout>

app:layout_scrollFlags是一个非常重要的属性，它里边的取值主要有五种，下面我分别来解释：

1.scroll 表示CollapsingToolbarLayout可以滚动（不设置的话头部的ImageVIEw将不能折叠），如果想将所有的VIEw能滚动出屏幕，必须设置个flag，若没有设置flag的VIEw，则会被固定在屏幕顶部
2.enteralways 表示底部的滚动控件只要向下滚动，头部就显示出来，设置这个flag时，向下的滚动都会导致该vIEw变为可见。当ScrollVIEw往下滚动时，该VIEw会直接往下滚动。而不用考虑ScrollVIEw是否在滚动。
3.enteralwaysCollapsed 表示当底部滚动控件滚动见顶时，头部显示出来，在ScrollVIEw往上滑动时，首先是VIEw把滑动事件“夺走”，由VIEw去执行滑动，直到滑动最小高度后，把这个滑动事件“还”回去，让ScrollVIEw内部去上滑。
4.exitUntilCollapsed 表示头部折叠到最小高度时（Toolbar的高度），就不再折叠，是enteralways的附加选项，一般跟enteralways一起使用，它是指，VIEw在往下“出现”的时候，首先是enteralways效果，当VIEw的高度达到最小高度时，VIEw就暂时不去往下滚动，直到ScrollVIEw滑动到顶部不再滑动时，VIEw再继续往下滑动，直到滑到VIEw的顶部结束。
5.snap 表示在滑动过程中如果停止滑动，则头部会就近折叠（要么恢复原状，要么折叠成一个Toolbar）
记住，要把带有scroll flag的vIEw放在前面，这样收回的vIEw才能让正常退出，而固定的vIEw继续留在顶部。

制造折叠效果

如果想制造toolbar的折叠效果，我们必须把Toolbar放在CollapsingToolbarLayout中：

<androID.support.design.Widget.CoordinatorLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" xmlns:tools="http://schemas.androID.com/tools" xmlns:app="http://schemas.androID.com/apk/res-auto" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" androID:ID="@+ID/main_content" tools:context="wxt.coordinatorlayout.AppbarLayout"> <androID.support.design.Widget.AppbarLayout  androID:ID="@+ID/appbar"  androID:layout_wIDth="match_parent"  androID:layout_height="wrap_content"  >  <androID.support.design.Widget.CollapsingToolbarLayout   androID:ID="@+ID/collapsing_toolbar"   androID:layout_wIDth="match_parent"   androID:layout_height="match_parent"   androID:fitsSystemwindows="true"   app:contentScrim="?attr/colorPrimary"   app:expandedTitlemarginEnd="64dp"   app:expandedTitlemarginStart="48dp"   app:layout_scrollFlags="scroll|exitUntilCollapsed">   <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.CollapsingToolbarLayout> </androID.support.design.Widget.AppbarLayout> <androID.support.v4.Widget.nestedScrollVIEw  androID:layout_wIDth="match_parent"  androID:layout_height="wrap_content"  app:layout_behavior="@string/appbar_scrolling_vIEw_behavior">  <TextVIEw   androID:layout_wIDth="match_parent"   androID:layout_height="wrap_content"   androID:text="aaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\n" /> </androID.support.v4.Widget.nestedScrollVIEw>

现在效果就成了：

通常，我们我们都是设置Toolbar的Title，而现在，我们需要把Title设置在CollapsingToolbarLayout上，而不是Toolbar。

CollapsingToolbarLayout collapsingToolbar =(CollapsingToolbarLayout) findVIEwByID(R.ID.collapsing_toolbar);
collapsingToolbar.setTitle("Title");

制造视差效果CollapsingToolbarLayout

CollapsingToolbarLayout还能让我们做出更高级的动画，比如在里面放一个ImageVIEw，然后在它折叠的时候渐渐淡出。同时在用户滚动的时候Title的高度也会随着改变。

CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承至FrameLayout，给它设置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageVIEw、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。

使用CollapsingToolbarLayout：

<androID.support.design.Widget.AppbarLayout  androID:layout_wIDth="match_parent"  androID:layout_height="256dp"  androID:fitsSystemwindows="true">  <androID.support.design.Widget.CollapsingToolbarLayout   androID:ID="@+ID/collapsing_toolbar_layout"   androID:layout_wIDth="match_parent"   androID:layout_height="match_parent"   app:contentScrim="#30469b"   app:expandedTitlemarginStart="48dp"   app:layout_scrollFlags="scroll|exitUntilCollapsed">   <ImageVIEw    androID:layout_wIDth="match_parent"    androID:layout_height="match_parent"    androID:scaleType="centerCrop"    androID:src="@mipmap/bg"    app:layout_collapseMode="parallax"    app:layout_collapseParallaxMultiplIEr="0.7" />   <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>

我们在CollapsingToolbarLayout中设置了一个ImageVIEw和一个Toolbar。并把这个CollapsingToolbarLayout放到AppbarLayout中作为一个整体。

1、在CollapsingToolbarLayout中：

其中还设置了一些属性，简要说明一下：

contentScrim - 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。

expandedTitlemarginStart - 设置扩张时候(还没有收缩时)Title向左填充的距离。

2、在ImageVIEw控件中：

我们设置了：

layout_collapseMode (折叠模式) - 有两个值:

pin - 设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。

parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的VIEw（比如ImageVIEw)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplIEr(设置视差因子)搭配使用。

layout_collapseParallaxMultiplIEr(视差因子) - 设置视差滚动因子，值为：0~1。

3、在Toolbar控件中：

我们设置了layout_collapseMode(折叠模式)：为pin。

综上分析：当设置了layout_behavior的控件响应起了CollapsingToolbarLayout中的layout_scrollFlags事件时，ImageVIEw会有视差效果的向上滚动移除屏幕，当开始折叠时CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就会变为我们设置好的背景色，Toolbar也一直会固定在最顶端。

【注】：使用CollapsingToolbarLayout时必须把Title设置到CollapsingToolbarLayout上，设置到Toolbar上不会显示。即：

mCollapsingToolbarLayout.setTitle(” “);

该变Title的字体颜色：

扩张时候的Title颜色：mCollapsingToolbarLayout.setExpandedTitlecolor();

收缩后在Toolbar上显示时的Title的颜色：mCollapsingToolbarLayout.setCollapsedTitleTextcolor();

这个颜色的过度变化其实CollapsingToolbarLayout已经帮我们做好，它会自动的过度，比如我们把收缩后的Title颜色设为绿色。

CoordinatorLayout与CollapsingToolbarLayout:
CollapsingToolbarLayout的作用提供了一个可以折叠的Toolbar,对Toolbar进行再次包装的VIEwGroup,继承FragmentLayout，它需要放在AppbarLayout布局里面，并且作为AppbarLayout的直接子VIEw。CollapsingToolbarLayout主要包括几个功能：
①:折叠Title（Collapsing Title）：当布局内容全部显示出来时，Title是最大的，但是随着VIEw逐步移出屏幕顶部，Title变得越来越小。你可以通过CollapsingToolbarLayout调用setTitle函数来设置Title。

②:内容纱布（Content scrim）：根据滚动的位置是否到达一个阀值，来决定是否对VIEw“盖上纱布”。可以通过setContentScrim(Drawable)来设置纱布的图片.Toolbar被折叠到顶部固定时候的背景，你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。

③:状态栏纱布（Status bar scrim)：根据滚动位置是否到达一个阀值决定是否对状态栏“盖上纱布”，你可以通过setStatusbarScrim(Drawable)来设置纱布图片，调用方法setStatusbarScrim(,l)设置状态栏的背景，但是只能在LolliPOP设备上面有作用。这个只能在AndroID5.0以上系统有效果。

④ollapseMode ：子视图的折叠模式，在子视图设置，有两种，想要明确的看到效果可以给Toolbar设置一个背景颜色
（1）“pin”：固定模式，在折叠的时候最后固定在顶端；
（2）“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变：

（1）:将子VIEw位置固定(Pinned position children)：子VIEw可以选择是否在全局空间上固定位置，这对于Toolbar来说非常有用，因为当布局在移动时，可以将Toolbar固定位置而不受移动的影响。 将app:layout_collapseMode设为pin。

（2）:视差滚动子VIEw(Parallax scrolling children):子VIEw可以选择在当前的布局当时是否以“视差”的方式来跟随滚动。（:其实就是让这个VIEw的滚动的速度比其他正常滚动的VIEw速度稍微慢一点）。将布局参数app:layout_collapseMode设为parallax，值的范围[0.0,1.0]，值越大视察越大。

app:layout_collapseMode=”parallax”表示ImageVIEw的折叠和CollapsingToolbarLayout的折叠不同步，那么这个不同步到底是怎样一个不同步法呢？还有另外一个参数来设置不同步的参数，如下：
app:layout_collapseParallaxMultiplIEr=”0.5”表示视觉乘数，该数值的取值为0～1，数值越大，视觉差越大（如果这里的值为0，则在头部折叠的过程中，ImageVIEw的顶部在慢慢隐藏，底部不动，如果这里的值为1，ImageVIEw的顶部不懂，底部慢慢隐藏，如果这里的取值为0～1之间，则在折叠的过程中，ImageVIEw的顶部和底部都会隐藏，但是头部和底部隐藏的快慢是不一样的，具体速度和视觉乘数有关）
app:layout_collapseMode这个属性还有一个取值，是pin，该属性表示当折叠完成时将该控件放在页面的头部.

最终的代码：

<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=".MainActivity"> <androID.support.design.Widget.AppbarLayout  androID:layout_wIDth="match_parent"  androID:layout_height="256dp"  androID:fitsSystemwindows="true">  <androID.support.design.Widget.CollapsingToolbarLayout   androID:ID="@+ID/collapsing_toolbar_layout"   androID:layout_wIDth="match_parent"   androID:layout_height="match_parent"   app:contentScrim="#30469b"   app:expandedTitlemarginStart="48dp"   app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"   app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"   app:layout_scrollFlags="scroll|exitUntilCollapsed">   <ImageVIEw    androID:layout_wIDth="match_parent"    androID:layout_height="match_parent"    androID:scaleType="centerCrop"    androID:src="@mipmap/bg"    app:layout_collapseMode="parallax"    app:layout_collapseParallaxMultiplIEr="0.7" />   <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> <linearLayout  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  androID:orIEntation="vertical"  app:layout_behavior="@string/appbar_scrolling_vIEw_behavior">  <androID.support.v7.Widget.RecyclerVIEw   androID:ID="@+ID/recyclerVIEw"   androID:layout_wIDth="match_parent"   androID:layout_height="match_parent"   androID:scrollbars="none" /> </linearLayout></androID.support.design.Widget.CoordinatorLayout>

Java代码

Toolbar mToolbar = (Toolbar) findVIEwByID(R.ID.toolbar);  setSupportActionbar(mToolbar);  getSupportActionbar().setdisplayHomeAsUpEnabled(true);  mToolbar.setNavigationOnClickListener(new VIEw.OnClickListener() {   @OverrIDe   public voID onClick(VIEw v) {    onBackpressed();   }  });  //使用CollapsingToolbarLayout必须把Title设置到CollapsingToolbarLayout上，设置到Toolbar上则不会显示  CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findVIEwByID(R.ID.collapsing_toolbar_layout);  mCollapsingToolbarLayout.setTitle("CollapsingToolbarLayout");  //通过CollapsingToolbarLayout修改字体颜色  mCollapsingToolbarLayout.setExpandedTitlecolor(color.WHITE);//设置还没收缩时状态下字体颜色  mCollapsingToolbarLayout.setCollapsedTitleTextcolor(color.GREEN);//设置收缩后Toolbar上字体的颜色

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android 5.0中CoordinatorLayout的使用技巧全部内容，希望文章能够帮你解决Android 5.0中CoordinatorLayout的使用技巧所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。