Android CoordinatorLayout的简介与使用

参考文章
CoordinatorLayout 学习(一) - CoordinatorLayout的基本使用
CoordinatorLayout使用详解: 打造折叠悬浮效果

一、概述

CoordinatorLayout顾名思义,协调者布局,它遵循Material风格,包含在 support Library中。这里所谓的协调主要是只协调其子布局(child)之间的联动,就那简书App为例,当我们下拉文章的时候,上面的ActionBar会自动隐藏,而这里就是上面所说的联动。下面将会通过一个简单的例子来实现类似的效果,当然简书实际是怎么实现的我是不知道的 = =,这里只是举个例子。

那么CoordinatorLayout是如何实现child联动的呢,答案是Behavier。在CoordinatorLayout内部,每个child都必须带一个Behavior(其实不携带也行,不携带就不能被协调),CoordinatorLayout就根据每个child所携带的Behavior信息进行协调。
  这里还需要提一句的是,Behavior不仅仅协助联动,而且还接管了child的三大流程,有点类似于RecyclerViewLayoutManager

二、AppBarLayout

AppBarLayout继承于LinearLayout的,默认的方向 是Vertical.如果我们想要实现折叠的ActionBar效果,在CoordinatorLayout中,AppBarLayout绝对是作为首选的控件。
下面先来看一下AppBarLayout的滑动flag

Flag 作用
SCROLL_FLAG_NO_SCROLL 表示该View不能被滑动。也就是说不参与联动
SCROLL_FLAG_SCROLL 表示该View参与联动。具体效果需要跟其他Flag组合
SCROLL_FLAG_EXIT_UNTIL_COLLAPSED 表示当View被推出屏幕时,会跟着滑动,直到折叠到View的最小高度;同时只有在其他View(比如说RecyclerView)滑动到顶部才会展开。
SCROLL_FLAG_ENTER_ALWAYS 不管是View是滑出屏幕还是滑进屏幕,该View都能立即响应滑动事件,跟随滑动。比如说,如果该View是折叠的,当RecyclerView向下滑动时,该View随时都能跟随展开;反之亦然。
SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED SCROLL_FLAG_ENTER_ALWAYS的基础上,增加了折叠到固定高度的限制。在View下拉过程中,首先会将该View显示minHeight的高度,RecyclerView在继续下拉(这里以RecyclerView为例)。注意,FlagSCROLL_FLAG_ENTER_ALWAYS前提下生效
SCROLL_FLAG_SNAP 表示View拥有吸附功能。比如说,当前滑动停止,View离底部更近,那么就会折叠;反之则会展开。

注意:上面的这些flag是设置在其子view上的,例如下面的TextView

<android.support.design.widget.AppBarLayout
        android:id="@+id/bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#FF0000"
            android:gravity="center"
            android:text="Title1"
            android:textSize="16sp"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed" />

    </android.support.design.widget.AppBarLayout>

AppBarLayout必须作为CoordinatorLayout的直接子View,否则它的大部分功能将不会生效,如layout_scrollFlags等。
另外,这个flag是可以使用|来拼接的。

三,使用

首先需要在appbuild.gradle中添加如下依赖:

implementation 'com.android.support:design:28.0.0'

然后是布局文件:

<?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">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#FF0000"
            android:gravity="center"
            android:text="Title1"
            android:textSize="16sp"
            app:layout_scrollFlags="enterAlways|exitUntilCollapsed|snap|scroll|enterAlwaysCollapsed" />

        <TextView
            
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#00FF00"
            android:gravity="center"
            android:text="Title2"
            android:textSize="16sp" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

注意这里RecyclerView设置了一个属性:app:layout_behavior="@string/appbar_scrolling_view_behavior",也就是前面所说的Behavior了,如果不设置这个属性那么RecyclerViewAppBarLayout是不会联动的。关于Behavior后面我会单独写一篇文章进行介绍。
由于RecyclerView中只需要填充一下数据即可,所以这里就不附上代码了,下面直接根据不同的flag附上相应的效果图:

  • SCROLL_FLAG_NO_SCROLL
    不设置layout_scrollFlags即可:
    省略...
    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="no_scroll"
        android:textSize="16sp"/>
    省略...
    

    效果图:


    noscroll.gif
  • SCROLL_FLAG_EXIT_UNTIL_COLLAPSED
    设置layout_scrollFlagsexitUntilCollapsed
    省略...
    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="exitUntilCollapsed"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:textSize="16sp"/>
    省略...
    

    效果图:


    exitUntilCollapsed.gif
  • SCROLL_FLAG_ENTER_ALWAYS
    设置layout_scrollFlagsenterAlways——立即响应滑动事件:
    省略...
    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="enterAlways"
        app:layout_scrollFlags="scroll|enterAlways"
        android:textSize="16sp"/>
    省略...
    

    效果图:


    enterAlaways.gif
  • SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED

设置layout_scrollFlagsscroll|enterAlways|enterAlwaysCollapsed——立即响应滑动事件且先显示最小高度。注意需要同时设置enterAlwaysenterAlwaysCollapsed两个标记位才能实现效果:

省略...
<TextView
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:minHeight="20dp"
    android:background="#FF0000"
    android:gravity="center"
    android:text="enterAlwaysCollapsed"
    app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
    android:textSize="16sp"/>
省略...

效果图:


enterAlwaysCollapsed.gif
  • SCROLL_FLAG_SNAP

设置layout_scrollFlagssnap——吸附效果:

省略...
<TextView
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:minHeight="20dp"
    android:background="#FF0000"
    android:gravity="center"
    android:text="snap"
    app:layout_scrollFlags="scroll|snap"
    android:textSize="16sp"/>
省略...

效果图:


snap.gif

四、总结

  1. AppBarLayout必须作为CoordinatorLayout的直接子View,否则它的大部分功能将不会生效。
  2. AppBarLayout联动的View需要设置layout_behavior属性
  3. 想要实现联动效果,其实只有exitUntilCollapsedenterAlwaysenterAlwaysCollapsedsnap四种效果,且都需要与scroll配合使用才会生效。
  4. enterAlwaysCollapsed还需要和enterAlways同时使用才会生效,否则只会有exitUntilCollapsed的效果。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 228,606评论 6 533
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 98,582评论 3 418
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 176,540评论 0 376
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 63,028评论 1 314
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 71,801评论 6 410
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 55,223评论 1 324
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 43,294评论 3 442
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 42,442评论 0 289
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 48,976评论 1 335
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 40,800评论 3 354
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 42,996评论 1 369
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 38,543评论 5 360
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 44,233评论 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 34,662评论 0 26
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 35,926评论 1 286
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 51,702评论 3 392
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 47,991评论 2 374