协调者布局 CoordinatorLayout

参考链接:

写在前面:

继承关系:

特性:

一、AppBarLayout

二、CollapsingToolbarLayout

三、NestedScrollView

四、FloatingActionButton

五、Behavior

基本使用:

何时使用:

参考链接:

Android Developer之CoordinatorLayout

写在前面:

在 2015 年的 I/O 开发者大会上,Google 介绍了一个新的 Android Design Support Library,该库可以帮助开发者在应用上使用 meterial design。它包含了许多重要的 meterial design 的构建块,并且它支持 API 7 及以上的版本。

在库中所有好的东东之间,看起来真正有趣的是 CoordinatorLayout(协调者布局),它本质上是一个 FrameLayout。从它的名字中或许已经猜到:该布局的强大在于,能够协调子元素之间的依赖关系。你需要做的就是把 View 包含在 CoordinatorLayout 中。

换句话说,CoordinatorLayout 是用来协调其子 view 并以触摸影响布局的形式产生动画效果的一个 super-powered FrameLayout。

CoordinatorLayout 存在的意义就是通过自定义 Children 的 Behaviors(行为)来实现控件之间的交互动画效果。而像前文所提到的 FloatingActionButton 和 AppBarLayout 都有自己的 DefaultBehavior(默认行为)

继承关系:

ava.lang.Object ↳ android.view.View ↳ android.view.ViewGroup ↳ android.support.design.widget.CoordinatorLayout

CoordinatorLayout 继承于 viewGroup,其直接父类就是 viewGroup,所以通常在使用的过程中是做为顶级 ViewGroup 来使用的。

特性:

一、AppBarLayout

AppBarLayout 必须是 CoordinatorLayout 的直接子 View,它是继承于 LinearLayout 的,默认的方向是 Vertical,它主要是为了实现 “Material Design” 风格的标题栏的特性,比如:滚动。标题栏会随着视图的滚动:显示和隐藏。

AppBarLayout 是一个实现了很多材料设计特性的垂直的 LinearLayout,它能响应滑动事件。必须在它的子 view 上设置 app:layout_scrollFlags 属性或者是在代码中调用 setScrollFlags() 设置这个属性。

这个类的特性强烈依赖于它是否是一个 CoordinatorLayout 的直接子 view,如果不是,那么它的很多特性不能够使用。AppBarLayout 需要一个具有滑动属性的兄弟节点 view(比如 RecyclerView、NestedScrollView),并且在这个兄弟节点 View 中指定 behavior 属性为 AppBarLayout.ScrollingViewBehavior 的类实例,可以使用一个内置的string 表示这个默认的实例 @string/appbar_scrolling_view_behavior。

这个字符串用来通知 AppBarLayout 该 view 何时发生了滚动事件,这个 behavior 需要设置在触发滚动事件的 view 之上。AppBarLayout 里面定义的 view 只要设置了 app:layout_scrollFlags 属性,就可以在 RecyclerView 滚动事件发生的时候被触发。

AppBarLayout 的子布局有4种滚动标识( app:layout_scrollFlags 属性):

效果图,参考链接: CoordinatorLayout

  • scroll:所有想滚动出屏幕的 view 都需要设置这个 flag, 没有设置这个 flag 的 view 将被固定在屏幕顶部
  • enterAlways:这个 flag 让任意向下的滚动都会导致该 view 变为可见,启用快速“返回模式”
  • enterAlwaysCollapsed:假设你定义了一个最小高度(minHeight),同时 enterAlways 也定义了,那么 view 将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,当滚动到顶部的时候展开完
  • exitUntilCollapsed:当你定义了一个 minHeight,此布局将在滚动到达这个最小高度的时候折叠。

二、CollapsingToolbarLayout

作用是提供一个可以折叠的Toolbar,继承自 FrameLayout,给它设置layout_scrollFlags,它可以控制包含在 CollapsingToolbarLayout 中的控件(如:ImageView、Toolbar)在响应 layout_behavior 事件时作出相应的 scrollFlags 滚动事件(移除屏幕或固定在屏幕顶端)。

CollapsingToolbarLayout 可以通过 app:contentScrim 设置折叠时工具栏布局的颜色,通过 app:statusBarScrim 设置折叠时状态栏的颜色。默认 contentScrim 是 colorPrimary 的色值,statusBarScrim 是 colorPrimaryDark 的色值。

CollapsingToolbarLayout 的子布局有3种折叠模式(Toolbar 中设置的 app:layout_collapseMode)

  • off:默认属性,布局将正常显示,无折叠行为
  • pin:CollapsingToolbarLayout 折叠后,此布局将固定在顶部
  • parallax:CollapsingToolbarLayout 折叠时,此布局也会有视差折叠效果。(移动过程中两个 View 的位置产生了一定的视觉差异)

当 CollapsingToolbarLayout 的子布局设置了 parallax 模式时,我们还可以通过 app:layout_collapseParallaxMultiplier 设置视差滚动因子,值为:0~1。

三、NestedScrollView

在新版的 support-v4 兼容包里面有一个 NestedScrollView 控件,这个控件其实和普通的 ScrollView 并没有多大的区别,这个控件其实是 Meterial Design 中设计的一个控件,目的是跟 MD 中的其他控件兼容。

应该说在 MD 中,RecyclerView 代替了 ListView,而 NestedScrollView 代替了 ScrollView,他们两个都可以用来跟 ToolBar 交互,实现上拉下滑中 ToolBar 的变化。在 NestedScrollView 的名字中其实就可以看出他的作用了,Nested 是嵌套的意思,而 ToolBar 基本需要嵌套使用。

四、FloatingActionButton

FloatingActionButton(FAB) 就比较简单了,就是一个漂亮的按钮,其本质是一个 ImageView。

CoordinatorLayout 提供了两个属性用来设置 FAB 的位置:

  • layout_anchor:设置 FAB 的锚点,我们熟悉的 PopupWindow 也有类似概念
  • layout_anchorGravity:设置相对锚点的位置,如 bottom|right 表示 FAB 位于锚点的右下角

<?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" android:id="@+id/contentView" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/anchorView" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"/> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_anchor="@id/anchorView" app:layout_anchorGravity="bottom|right" android:onClick="onClick" android:layout_marginRight="10dp" android:layout_marginBottom="10dp"/> </android.support.design.widget.CoordinatorLayout>

五、Behavior

CoodinatorLayout 并不知道 FloatingActionButton 和 AppBarLayout 的工作原理,这其中充当中间桥梁的就是 CoordinatorLayout.Behavior,比如 FloatingActionButton,查看源码发现它的类注解是这样的:FloatingActionButton.Behavior 的主要作用就是防止被 Snackbar 盖住

@CoordinatorLayout.DefaultBehavior(FloatingActionButton.Behavior.class) public class FloatingActionButton extends VisibilityAwareImageButton { // DO SOMETHING }

再比如:AppBarLayout.Behavior

@CoordinatorLayout.DefaultBehavior(AppBarLayout.Behavior.class) public class AppBarLayout extends LinearLayout { // DO SOMETHING }

Behavior 是 Android 新出的 Design 库里新增的布局概念。Behavior 只有是 CoordinatorLayout 的直接子 View 才有意义。只要将 Behavior 绑定到 CoordinatorLayout 的直接子元素上,就能对触摸事件(touch events)、window insets、measurement、layout 以及嵌套滚动(nested scrolling)等动作进行拦截。

Design Library 的大多功能都是借助 Behavior 的大量运用来实现的。当然,Behavior 无法独立完成工作,必须与实际调用的 CoordinatorLayout 子视图相绑定。

具体有三种方式:通过代码绑定、在 XML 中绑定或者通过注解实现自动绑定。

基本使用:

CoordinatorLayout 把整个页面分成了两部分,上半部分固定设置为 AppBarLayout 布局,上半部分的作用就是可以进行折叠;下半部分可以为两种布局 RecyclerView 和 NestedScrollView 的其中一种,下半部分的作用是可以滑动,对上部分进行折叠操作。

由于 app:layout_behavior 属性也是有许多的坑,所以只要记住在 CoordinatorLayout 布局中的下半部分的控件当中设置该属性即可:app:layout_behavior="@string/appbar_scrolling_view_behavior"

何时使用:

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(作为协调子 View 之间交互的容器)
全部评论

相关推荐

点赞 收藏 评论
分享
牛客网
牛客企业服务