CoordinatorLayout系列(一):基本使用

准备

这是Google官方的文档(请自备梯子)
CoordinatorLayout

CoordinatorLayout is a super-powered FrameLayout.
CoordinatorLayout is intended for two primary use cases:
1.As a top-level application decor or chrome layout
2.As a container for a specific interaction with one or more child views

总结一下就是，CoordinatorLayout是加强版的FrameLayout,但并不是直接继承，基本的布局方式跟FrameLayout是一样的。

加强的点是CoordinatorLayout可以给它的child之间提供各种交互特性，简单来说就是一个child可以根据另一个child的状态来相应的更新自己的状态，大部分情况都是位置的更新。所以应该叫协调布局？？？

先看几个Demo，自己感受一下，看一下这个疗效怎么样


1.gif

3.gif

这里所有的代码都已经放在Github

开始

CoordinatorLayout主要提供了三种方式来实现child之间的互动:

  1. 通过anchor实现
  2. 通过insetEdge实现
  3. 通过Behaviors实现

那么我们依次来看一下这三种方式是怎么使用的
提示:TouchView是一个可以自由拖动的View

1. anchor

关键词：layout_anchor和layout_anchorGravity

简单说明：child B通过layout_anchor 设置child A为anchor，再通过layout_anchorGravity来根据需要设置属性，这样B就可以A的位移相应的位移了。

使用步骤:

  1. 先设置一个被观察的child A的id
<com.xugter.cooridnatorlayoutstudy.other.TouchView
    android:id="@+id/view_host"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_gravity="center"
    android:background="@color/colorPrimary"
    app:layout_insetEdge="top" />
  1. 然后在另一个观察的child B的设置两个参数，layout_anchor和layout_anchorGravity
<View
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:background="@color/colorAccent"
    app:layout_anchor="@id/view_host"
    app:layout_anchorGravity="bottom|end" />

效果如下，B就会随着A的移动而跟着移动


anchor.gif

2. insetEdge

关键词：layout_insetEdge和layout_dodgeInsetEdges

简单说明：child A 通过layout_insetEdge来设置插入CoordinatorLayout的方向，child B通过设置layout_dodgeInsetEdges来躲避来自相同方向的A，这样就可以避免产生重叠。

使用步骤:

  1. 先在被观察的child A中设置参数layout_insetEdge
<com.xugter.cooridnatorlayoutstudy.other.TouchView
    android:id="@+id/view_host"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_gravity="center"
    android:background="@color/colorPrimary"
    app:layout_insetEdge="top" />
  1. 在观察的child B中设置参数layout_dodgeInsetEdges
<View
    android:layout_width="100dp"
    android:layout_height="50dp"
    android:layout_margin="20dp"
    android:background="@android:color/black"
    app:layout_dodgeInsetEdges="top" />

效果如下如上面的那个黑块

另外介绍两个特殊的控件跟insetEdge有关
FloatingActionButton和Snackbar

这两个控件可以产生如下的交互


insetEdge.gif

原因是FloatingActionButton自带app:layout_dodgeInsetEdges="bottom"，
而Snackbar自带app:layout_insetEdge="bottom"，所以当Snackbar出现的时候FloatingActionButton能发生躲避行为

我们还可以自己加一个View来验证一下Snackbar是自带app:layout_insetEdge="bottom"

<View
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_gravity="bottom"
    android:background="@android:color/holo_blue_bright"
    app:layout_dodgeInsetEdges="bottom" />

这个view加入了app:layout_dodgeInsetEdges="bottom就可以产生和FloatingActionButton一样的行为，效果参考上面的蓝块

3. Behaviors

Behaviors的功能就强大很多，后面会重点介绍。这里先简单介绍几个Google官方提供的几个使用了Behavior的控件。

便于理解我采用了最简单的结构，AppBarLayout+NestedScrollView,其中NestedScrollView可以由其他实现了NestedScrollingChild的控件代替

如下:
几个已经实现了NestedScrollingChild的控件

其中我们最常用的大概就是下面这两货了，注意ScrollView是不可以的

  • NestedScrollView
  • RecyclerView

注意:一定要在NestedScrollView设置

app:layout_behavior="@string/appbar_scrolling_view_behavior"

不然达不到效果，具体原因会在以后分析Behaviors里在说明。

下面方便起见，称NestedScrollView为滚动View吧

AppBarLayout

AppBarLayout继承自LinearLayout，所以基本布局方式跟LinearLayout是一样的

主要代码:

<android.support.design.widget.CoordinatorLayout ...>
    <android.support.design.widget.AppBarLayout
        ...
        >
        <ImageView
        ...
            app:layout_scrollFlags="scroll|enterAlways" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        ...
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

使用AppBarLayout的关键点是，在Child里面设置属性layout_scrollFlags

layout_scrollFlags可以设置下面这5个参数
scroll
snap
enterAlways
enterAlwaysCollapsed
exitUntilCollapsed

  • scroll
    这参数是其他四个参数的基础，即只有设置了这个参数，其他参数才会生效。相应的Child才会对滚动view的滚动才会响应。
app:layout_scrollFlags="scroll"
  • snap
    这个参数的作用是让Child具有吸附效果，抬手后会根据距离向上或向下滑动
app:layout_scrollFlags="scroll|snap"
  • enterAlways
    这个参数的作用是滑动Child在任何位置向下滑动时都触发该Child的向下滑动
app:layout_scrollFlags="scroll|enterAlways"
  • enterAlwaysCollapsed
    这个参数是enterAlways的附加值，滚动View向下滚动(未在顶部)，先显示最小高度，然后是enterAlways的滚动效果，最后显示最大高度。除了设置
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

为了有最大高度需要另外设置

android:minHeight="100dp"
  • exitUntilCollapsed
    这个参数表示滚动view向上滚动时，保留最小高度
app:layout_scrollFlags="scroll|exitUntilCollapsed"

CollapsingToolbarLayout

CollapsingToolbarLayout继承自FrameLayout所以布局特性和FrameLayout一样。谷歌官方的解释总结一下就是，带有视差动效的toolbar，是放在AppBarLayout中的一个直接子View。

主要代码：

<android.support.design.widget.CoordinatorLayout
    ...>
    <android.support.design.widget.AppBarLayout
        ...>
        <android.support.design.widget.CollapsingToolbarLayout
            ...
            app:collapsedTitleTextAppearance="@style/AppTheme.TextAppearance"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                ...
                app:layout_collapseParallaxMultiplier="0"
                app:layout_collapseMode="parallax" />
            <android.support.v7.widget.Toolbar
                ...
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.CollapsingToolbarLayout>
        <android.support.design.widget.TabLayout
            .../>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        ...
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

下面简单介绍一下CollapsingToolbarLayout的几个属性

  • collapsedTitleTextAppearance，expandedTitleTextAppearance
    这两个可以定制标题收起和展开的字体样式
  • contentScrim
    可以设置Content scrim，参数可以是color和drawable，简单来说就是收起状态Toolbar的背景
  • layout_collapseMode
    说明CollapsingToolbarLayout的child可以设置为两种模式parallax和pin
    • pin
      就是简单的固定模式
    • parallax
      表示视差模式，可以根据需要搭配layout_collapseParallaxMultiplier食用，layout_collapseParallaxMultiplier的数值是0~1
      0表示滚动没有视差，意思就是完全跟着下面的滚动view，1表示不动
      0.gif
1.gif

哦~~~谷歌文档里还提醒，不要在toolbar运行时手动添加view到toolbar里面

总结

这篇文章主要讲了CoordinatorLayout的特色，以及使用的几个方法。
介绍了一下跟CoordinatorLayout配合使用的几个控件的基本使用方法。但是这样的基本搭配很有可能无法达到开发者的需求，很多细节还是需要自己定制。要达到这样的要求，就需要去掌握Behaviors的使用了。

代码:Github

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 200,738评论 5赞 472
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,377评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 147,774评论 0赞 333
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,032评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,015评论 5赞 361
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,239评论 1赞 278
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,724评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,374评论 0赞 255
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,508评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,410评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,457评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,132评论 3赞 316
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,733评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,804评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,022评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,515评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,116评论 2赞 341