一、CoordinatorLayout类的继承关系
CoordinatorLayout.png
系统对CoordinatorLayout的注释如下：
系统注释.png
具体说：
- 1.CoordinatorLayout是一个超级的FrameLayout；
- 2.CoordinatorLayout两个主要的用法意图如下：
a.作为一个顶级布局；
b.作为一个容器，用于一个或多个子View的特殊交互； - 3.在同一个父容器内，通过给一个CoordinatorLayout的子views指定CoordinatorLayout.Behavior的behaviors，能够实现出不同的交互效果，那些子Views能够与另一个view相互作用；当使用{@link CoordinatorLayout.DefaultBehavior DefaultBehavior} 注释作为CoordinatorLayout孩子时，view类能够指定一个默认的行为；
- 4.Behaviors通常被用来实现各种各样的交互和来自滑动抽屉、滑动删除元素和按钮关联其他元素产生的额外的布局修改；
- 5.CoordinatorLayout的子view也许会有个anchor（锚点，即view显示在哪块区域）；该视图id必须于CoordinatorLayout的任意后代的id保持一致，但它可能不是固定的孩子本身或固定孩子的后代。 这可以用于相对于其他任意内容长方格放置浮动视图；
- 6.孩子们可以指定{@link CoordinatorLayout.LayoutParams＃insetEdge}来描述视图怎样插入了CoordinatorLayout。 任意的设置躲避相同插入边的子View可通过{@link CoordinatorLayout.LayoutParams＃dodgeInsetEdges}将被适当地移动，以使视图不重叠。
二 来看下Behavior
/**
* Interaction behavior plugin for child views of {@link CoordinatorLayout}.
*
* <p>A Behavior implements one or more interactions that a user can take on a child view.
* These interactions may include drags, swipes, flings, or any other gestures.</p>
*
* @param <V> The View type that this Behavior operates on
*/
public static abstract class Behavior<V extends View> {}
- 1.CoordinatorLayout子view的交互行为插件；
- 2.行为实现用户可以对子视图执行一个或多个交互。这些交互可以包括拖动，滑动，轮流或任何其他手势;
它有四个具体的默认实现：
四个默认的实现.png
1. BottomSheetBehavior
一般用于底部弹出框，类似支付宝支付弹出界面；
2.FloatingActionButton.Behavior
FloatingActionButton默认使用FloatingActionButton.Behavior，同Snackbar一样，唯一需要注意的是根布局必须为CoordinatorLayout。
3.SwipeDismissBehavior
官方实现为Snackbar，已经封装好，唯一的条件是根布局必须为CoordinatorLayout，否则没有效果;
4.ViewOffsetBehavior
官方实现为AppBarLayout中的Beihavior;
三 AppBarLayout详解
**
* AppBarLayout is a vertical {@link LinearLayout} which implements many of the features of
* material designs app bar concept, namely scrolling gestures.
* <p>
* Children should provide their desired scrolling behavior through
* {@link LayoutParams#setScrollFlags(int)} and the associated layout xml attribute:
* {@code app:layout_scrollFlags}.
*
* <p>
* This view depends heavily on being used as a direct child within a {@link CoordinatorLayout}.
* If you use AppBarLayout within a different {@link ViewGroup}, most of it's functionality will
* not work.
* <p>
* AppBarLayout also requires a separate scrolling sibling in order to know when to scroll.
* The binding is done through the {@link ScrollingViewBehavior} behavior class, meaning that you
* should set your scrolling view's behavior to be an instance of {@link ScrollingViewBehavior}.
* A string resource containing the full class name is available.
* @see <a href="http://www.google.com/design/spec/layout/structure.html#structure-app-bar">
* http://www.google.com/design/spec/layout/structure.html#structure-app-bar</a>
*/
@CoordinatorLayout.DefaultBehavior(AppBarLayout.Behavior.class)
public class AppBarLayout extends LinearLayout {
- AppBarLayout是一个垂直的LinearLayout，这个垂直的线性布局实现了许多MaterialDesigns的设计风格概念，也就是说主要应用在滚动的手势操作上；
- 2.子View通过设置LayoutParams#setScrollFlags(int)来表达他们期望的滚动行为方式，在xml中设置方式为：app:layout_scrollFlags；
- 3.AppBarLayout只有用作CoordinatorLayout的直接子类才有效果；如果使用的AppBarLayout在一个不同的ViewGroup中，它的功能很可能不能使用；
- 4.AppBarLayout还需要一个单独的滚动成员，才能知道自己何时滚动；也就是说：你需要设置你的Scrolling view的behavior（app:layout_behavior）为AppBarLayout.ScrollingViewBehavior来通知AppBarLayout什么时候滚动。
a.下面看下layout_scrollFlags的属性说明：
- 1.SCROLL_FLAG_SCROLL：对应xml布局中的scroll，如果要设置其他的滚动flag，这个flag必须要设置，否则无效;collapse时设置该flag的view先全部折叠，expand的时等NestedScrollView滑动到顶部设置该flag的view才会出现。
- 2.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED：对应xml布局中的exitUntilCollapsed，设置该flag的view在向上滑动退出屏幕时，不会完全退出，会保留collapsed height（minHeight）高度,测试时是Toolbar的高度；expand时先让NestedScrollView滑动到顶端，才会使剩余的进入屏幕；
- 3.SCROLL_FLAG_ENTER_ALWAYS：对应xml布局中的enterAlways，只要手指向下滑，设置该flag的view就会直接进入屏幕，不管NestedScrollView是否在滚动。collpase的时候，设置该flag的view先折叠完毕后，NestedScrollView才开始滑动；
- 4.SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED ：对应xml布局中的enterAlwaysCollapsed，是enterAlways的附加flag，使设置该flag的view在进入屏幕时最初只滑动显示到它的collapsed height（minHeight），一旦NestedScrollView滑到顶部，该view再滑动显示剩余的部分。collapsing时先折叠完毕才能使NestedScrollView滚动；单独使用时与只设置scroll flag一样，一般与enter_always一起使用
- 5.SCROLL_FLAG_SNAP：对应xml布局中的snap，设置该flag的view在滚动停止时，如果没有完全显示，会自动滚到到最近的一个边界（顶端、中线和下线）;一般与上面的几种情况一起使用，有阻尼的效果；
四 CollpasingToolbarLayout详解
/**
* CollapsingToolbarLayout is a wrapper for {@link Toolbar} which implements a collapsing app bar.
* It is designed to be used as a direct child of a {@link AppBarLayout}.
* CollapsingToolbarLayout contains the following features:
*
* <h4>Collapsing title</h4>
* A title which is larger when the layout is fully visible but collapses and becomes smaller as
* the layout is scrolled off screen. You can set the title to display via
* {@link #setTitle(CharSequence)}. The title appearance can be tweaked via the
* {@code collapsedTextAppearance} and {@code expandedTextAppearance} attributes.
*
* <h4>Content scrim</h4>
* A full-bleed scrim which is show or hidden when the scroll position has hit a certain threshold.
* You can change this via {@link #setContentScrim(Drawable)}.
*
* <h4>Status bar scrim</h4>
* A scrim which is show or hidden behind the status bar when the scroll position has hit a certain
* threshold. You can change this via {@link #setStatusBarScrim(Drawable)}. This only works
* on {@link android.os.Build.VERSION_CODES#LOLLIPOP LOLLIPOP} devices when we set to fit system
* windows.
*
* <h4>Parallax scrolling children</h4>
* Child views can opt to be scrolled within this layout in a parallax fashion.
* See {@link LayoutParams#COLLAPSE_MODE_PARALLAX} and
* {@link LayoutParams#setParallaxMultiplier(float)}.
*
* <h4>Pinned position children</h4>
* Child views can opt to be pinned in space globally. This is useful when implementing a
* collapsing as it allows the {@link Toolbar} to be fixed in place even though this layout is
* moving. See {@link LayoutParams#COLLAPSE_MODE_PIN}.
*
* <p><strong>Do not manually add views to the Toolbar at run time</strong>.
* We will add a 'dummy view' to the Toolbar which allows us to work out the available space
* for the title. This can interfere with any views which you add.</p>
*
* @attr ref android.support.design.R.styleable#CollapsingToolbarLayout_collapsedTitleTextAppearance
* @attr ref android.support.design.R.styleable#CollapsingToolbarLayout_expandedTitleTextAppearance
* @attr ref android.support.design.R.styleable#CollapsingToolbarLayout_contentScrim
* @attr ref android.support.design.R.styleable#CollapsingToolbarLayout_expandedTitleMargin
* @attr ref android.support.design.R.styleable#CollapsingToolbarLayout_expandedTitleMarginStart
* @attr ref android.support.design.R.styleable#CollapsingToolbarLayout_expandedTitleMarginEnd
* @attr ref android.support.design.R.styleable#CollapsingToolbarLayout_expandedTitleMarginBottom
* @attr ref android.support.design.R.styleable#CollapsingToolbarLayout_statusBarScrim
* @attr ref android.support.design.R.styleable#CollapsingToolbarLayout_toolbarId
*/
public class CollapsingToolbarLayout extends FrameLayout {
-
1.CollapsingToolbarLayout是一个实现了折叠效果的Toolbar的包装；它被设计用来作为AppBarLayout的直接子类来使用；
-
2.CollpasingToolbarLayout包含一下特点：
- CollapsingTitle-折叠的title：在CollapsingToolbarLayout全部展开时，title的显示的大小会比折叠在一起大些，title会随着屏幕的滚动变小；可以通过CollapsingToolbarLayout中的setTitle（）方法改变title的显示内容；title的外观（颜色，大小）可以通过此类对象的collapsedTextAppearance属性改变折叠时的外观，通过expandedTextAppearance属性改变展开时的外观；
-
2.Content scrim-折叠后的背景：CollapsingToolbarLayout完全折叠后的背景；当滚动位置到达一定的阈值，就会隐藏或者显示Toolbar的背景色；
-
3.Status bar scrim-状态栏背景：当滚动到达一定阈值，状态栏背景会隐藏或显示在状态栏后面；可以通过setStatusBarScrim(Drawable)方法改变这个状态栏背景，这个设置仅仅只能在5.0以上的设备并且设置了fitSystemWindows才能有效果；
-
4.Parallax scrolling children-CollapsingToolbarLayout的子view滚动时的视觉效果：CollapsingToolbarLayout子视图可以选择以视差的方式在布局中滚动；通过在xml中设置CollapsingToolbarLayout子View属性的app:layout_collapseMode = "parallax"和app:layout_collapseParallaxMultiplier = "float"来实现；
-
5.Pinned position children-固定CollapsingToolbarLayout子View的位置（一般固定的是Toolbar的位置）：子view能被固定在任何位置；通过在xml中设置：app:layout_collapseMode="pin"来实现；在实际的测试中发现这个设置无效果，只要在CollapsingToolbarLayout中设置app:layout_scrollFlags="scroll|exitUntilCollapsed”才可以使Toolbar固定在最上面的位置；
** 注意：不要在运行时动态人为的给Toolbar添加子View** -
3.CollapsingToolbarLayout中常用来设置的属性
-
1.app:collapsedTitleGravity="left|center_vertical"-折叠时Toolbar的标题显示的位置；
-
2.app:expandedTitleGravity="left|bottom"-展开时Toolbar的标题显示的位置；
-
3.app:collapsedTitleTextAppearance="@style/CollapsingToolbarLayoutTextTheme"-折叠时Toolbar的字体颜色大小设置；与其对应的还有个app:expandedTitleTextAppearance展开属性；具体的style下面的代码展示；
-
4.app:contentScrim="@color/colorPrimary"-Toolbar完全折叠时的背景色；
-
5.app:expandedTitleMarginStart="10dp"-展开时Toolbar距离左边的间距；
-
6.app:scrimAnimationDuration="1000"-设置Toolbar折叠时，颜色变为contentScrim设置的颜色时渐变的时间；
-
7.app:expandedTitleGravity-设置toolbar展开时，title所在的位置；相对的还有collpasedTitleGravity等属性；
- app:titleEnabled="true"--这个属性默认是true，也就是你不设置就是true；如果设置为false，则在展开和折叠时都只有最上方的toolbar显示toolbar中设置的title，不会显示CollapsingToolbarLayout中设置的title；
-
4.在CollapsingToolbarLayout中子View的ImageView中常设置app:layout_collapseParallaxMultiplier="0.8"和app:layout_collapseMode="parallax"两个属性，可以在折叠时给用户一个视差效果；
-
5.layout_collapseMode(折叠模式）-有三个值，如下：
-
1.设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。实际测试中并不好使，只有在CollapsingToolbarLayout中设置了app:layout_scrollFlags="scroll|exitUntilCollapsed"时Toolbar才会固定到最上面；
-
2.parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。
-
3.ayout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子，值为：0~1。
-
4.none:不使用任何模式；
-
6.在CollapsingToolbarLayout中的Toolbar布局的高度（android:layout_height）必须给固定值或者“?attr/actionBarSize”，否则设置的title不会显示；
五 具体布局
<?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.androidwanga.serenitynanian.serenityproject.CollapsingToolbarLayoutActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="200dp">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleGravity="left|center_vertical"
app:expandedTitleGravity="left|bottom"
app:collapsedTitleTextAppearance="@style/CollapsingToolbarLayoutTextTheme"
app:expandedTitleTextAppearance="@style/CollapsingToolbarLayoutTextTheme"
app:contentScrim="@color/colorPrimary"
app:expandedTitleMarginStart="10dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:scrimAnimationDuration="1000"
app:titleEnabled="false"
app:title="列表展示">
<ImageView
app:layout_collapseParallaxMultiplier="0.8"
app:layout_collapseMode="parallax"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/bg01_02" />
<--必须给toolbar的高度设置具体的值或者?attr/actionBarSize，否则title字体不会显示-->
<android.support.v7.widget.Toolbar
app:layout_collapseMode="pin"
app:title="@string/app_name"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/collapsingToolbarLayoutRecycler"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
网友评论