准备
这是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,自己感受一下,看一下这个疗效怎么样
这里所有的代码都已经放在Github
开始
CoordinatorLayout主要提供了三种方式来实现child之间的互动:
- 通过anchor实现
- 通过insetEdge实现
- 通过Behaviors实现
那么我们依次来看一下这三种方式是怎么使用的
提示:TouchView是一个可以自由拖动的View
1. anchor
关键词:layout_anchor和layout_anchorGravity
简单说明:child B通过layout_anchor 设置child A为anchor,再通过layout_anchorGravity来根据需要设置属性,这样B就可以A的位移相应的位移了。
使用步骤:
- 先设置一个被观察的child A的id
- 然后在另一个观察的child B的设置两个参数,layout_anchor和layout_anchorGravity
效果如下,B就会随着A的移动而跟着移动
2. insetEdge
关键词:layout_insetEdge和layout_dodgeInsetEdges
简单说明:child A 通过layout_insetEdge来设置插入CoordinatorLayout的方向,child B通过设置layout_dodgeInsetEdges来躲避来自相同方向的A,这样就可以避免产生重叠。
使用步骤:
- 先在被观察的child A中设置参数layout_insetEdge
- 在观察的child B中设置参数layout_dodgeInsetEdges
效果如下如上面的那个黑块
另外介绍两个特殊的控件跟insetEdge有关
FloatingActionButton和Snackbar
这两个控件可以产生如下的交互
原因是FloatingActionButton自带app:layout_dodgeInsetEdges="bottom",
而Snackbar自带app:layout_insetEdge="bottom",所以当Snackbar出现的时候FloatingActionButton能发生躲避行为
我们还可以自己加一个View来验证一下Snackbar是自带app:layout_insetEdge="bottom"
这个view加入了app:layout_dodgeInsetEdges="bottom就可以产生和FloatingActionButton一样的行为,效果参考上面的蓝块
3. Behaviors
Behaviors的功能就强大很多,后面会重点介绍。这里先简单介绍几个Google官方提供的几个使用了Behavior的控件。
便于理解我采用了最简单的结构,AppBarLayout+NestedScrollView,其中NestedScrollView可以由其他实现了NestedScrollingChild的控件代替
如下:其中我们最常用的大概就是下面这两货了,注意ScrollView是不可以的
- NestedScrollView
- RecyclerView
注意:一定要在NestedScrollView设置
app:layout_behavior="@string/appbar_scrolling_view_behavior"
不然达不到效果,具体原因会在以后分析Behaviors里在说明。
下面方便起见,称NestedScrollView为滚动View吧
AppBarLayout
AppBarLayout继承自LinearLayout,所以基本布局方式跟LinearLayout是一样的
主要代码:
使用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。
主要代码:
下面简单介绍一下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
- pin
哦~~~谷歌文档里还提醒,不要在toolbar运行时手动添加view到toolbar里面
总结
这篇文章主要讲了CoordinatorLayout的特色,以及使用的几个方法。
介绍了一下跟CoordinatorLayout配合使用的几个控件的基本使用方法。但是这样的基本搭配很有可能无法达到开发者的需求,很多细节还是需要自己定制。要达到这样的要求,就需要去掌握Behaviors的使用了。
代码:Github