Android(安卓)material Design 之CoordinatorLayout详解

一.CoordinatorLayout是design包里功能最为强大的一个新控件，搭配其他控件可以实现比较复杂的动画和布局效果。
一.参考官方文档：CoordinatorLayout是一个作为顶级布局的Viewgroup，是一个加强版的framlayout,既然说了是framlayout，那么就要记住framlayout的特性，那就是CoordinatorLayout如果不使用
AppBarLayout，NestedScrollView那么他的控件就会重叠。可能会得不到你想要的结果
根据官方的谷歌文档，AppBarLayout目前必须是第一个嵌套在CoordinatorLayout里面的子view。

CoordinatorLayout还提供了layout_anchor和layout_anchorGravity属性一起配合使用，可以用于放置floating view，比如FloatingActionButton与其他View的相对位置。

<?xml version="1.0" encoding="utf-8"?>.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"    android:background="@android:color/white"    android:orientation="vertical">    .support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:fitsSystemWindows="true">        .support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@color/blueStatus"            android:minHeight="?attr/actionBarSize"            app:layout_scrollFlags="scroll|enterAlways"            app:navigationIcon="?attr/homeAsUpIndicator"            app:theme="@style/Theme.AppCompat.NoActionBar">        .support.v7.widget.Toolbar>        "wrap_content"            android:layout_height="wrap_content">

上面的代码实现了悬停的效果：

Behavior对象是用来给CoordinatorLayout的子view们进行交互用的。
Behavior接口拥有很多个方法，我们拿AppBarLayout为例。

这里还可以设置

 android:minHeight="40dip"

来控制下拉时toolbar展示的最小空间

AppBarLayout中有两个Behavior，一个是拿来给它自己用的，另一个是拿来给它的兄弟结点用的

而NestedScrollingParent的方法，也就是对CoodinatorLayout进行的一个代理（Proxy），
即CoordinatorLayout自己不对这些消息进行处理，而是传递给子view的Behavior，进行处理。

利用这样的方法，实现了view和view之间的交互和视觉的协同（布局、滑动）当用户滚动RecyclerView，AppBarLayout可以这样响应滚动事件：根据子view的**滚动标志（scroll flag）来控制它们如何进入（滚入屏幕）与退出（滚出屏幕）。

Flag包括：

    *scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。*    enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。    enterAlwaysCollapsed: 顾名思义，这个flag定义的是何时进入（已经消失之后何时再次显示）。    假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。                  exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。snap：会使子控件有自定贴靠向最终动画的功能

注意一点：所有使用scroll flag的view都必须定义在没有使用scroll flag的view的前面，这样才能确保所有的view从顶部退出，留下固定的元素。

需要注意的是，后面两种模式基本只有在CollapsingToolbarLayout才有用，而前面两种模式基本是需要一起使用的，也就是说，这些flag的使用场景，基本已经固定了。
例如我们前面例子中的，也就是这种模式：

app:layout_scrollFlags=scroll|enterAlways

PS : 所有使用scroll flag的view都必须定义在没有使用scroll flag的view的前面，这样才能确保所有的view从顶部退出，留下固定的元素。

然后，我们需要定义AppBarLayout与滚动视图之间的联系。在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView上添加app:layout_behavior。support library包含了一个特殊的字符串资源@string/appbar_scrolling_view_behavior，它和AppBarLayout.ScrollingViewBehavior相匹配，用来通知AppBarLayout 这个特殊的view何时发生了滚动事件，这个behavior需要设置在触发事件（滚动）的view之上。

.support.v7.widget.RecyclerViewandroid:id="@+id/rvToDoList"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior">

当CoordinatorLayout发现RecyclerView中定义了这个属性，它会搜索自己所包含的其他view，看看是否有view与这个behavior相关联。AppBarLayout.ScrollingViewBehavior描述了RecyclerView与AppBarLayout之间的依赖关系。RecyclerView的任意滚动事件都将触发AppBarLayout或者AppBarLayout里面view的改变。

2.CollapsingToolbarLayout：
重要属性：app:layout_collapseMode
取值：parallax：视差滚动
pin:固定在屏幕的顶部
使用app:layout_collapseParallaxMultiplier=”0.7”来设置视差因子
这是一个伸缩布局，配合CoordinatorLayout使用。

经过我的测试，CollapsingToolbarLayout应该要有toolbar才会留出一定高度的空间，若没有toolbar 将会全部收缩。

CollapsingToolbarLayout**子view**如果有属性

app:layout_collapseMode="pin"

这里使用了CollapsingToolbarLayout的app:layout_collapseMode=”pin”来确保Toolbar在view折叠的时候仍然被固定在屏幕的顶部。还可以做到更好的效果，当你让CollapsingToolbarLayout和Toolbar在一起使用的时候，title会在展开的时候自动变得大些，而在折叠的时候让字体过渡到默认值。必须注意，在这种情况下你必须在CollapsingToolbarLayout里设置Title，而不是在Toolbar上，这样折叠后的Title才会正确显示。

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

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

app:layout_anchor=”@id/rvToDoList”//这个属性可以制定一个参照点控制位置
app:layout_anchorGravity=”bottom|right|end”、、控制相对于锚点的位置
app:layout_scrollFlags

最后，这是利用以上知识做的一个demo：
效果图：

补充一点，目前还没有找到很好的方法来设置 CollapsingToolbarLayout的Title 收拢后的Margin，系统只给了设置Gravity的方法，但是我知道这个方法是无法精确控制title的位置的，所以我为了让收拢的Title能靠下一些，我把toolbar的高度设置大一点，再让通知栏透明,这样就显得好看一些了。

这是源代码：
https://github.com/shangguansb/CoordinatorLayoutUserInfoShowPage
欢迎Fork 和Star！

更多相关文章

随机推荐