一、CoordinatorLayout知识梳理

一、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 {
    1. 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包含一下特点:

    1. 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等属性;

    1. 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>

github仓库

相关内容:

一、CoordinatorLayout的梳理与使用

二、Toolbar的梳理与使用

三、TextInputLayout的梳理与使用

四、FloatingActionButton的梳理与使用

五、Snackbar的梳理与使用

六、CardView的梳理与使用

七、BottomSheetDialog的梳理与使用

八、TabLayout的梳理与使用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容