CoordinatorLayout+Behavior讲解

最新推荐文章于 2024-08-15 13:29:08 发布

程序编织梦想

最新推荐文章于 2024-08-15 13:29:08 发布

阅读量2.1w

点赞数 18

分类专栏： Material Design 文章标签： Coordinato behavior 协调者

本文链接：https://blog.csdn.net/mffandxx/article/details/69223021

版权

Material Design 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章开始前奉送上代码，方便大家对照学习

1.前言

CoordinatorLayout是在Google I/O 15上，谷歌发布了一个新的 support library中的控件，它是support library中最重要的控件之一，所以大家要掌握它！
Coordinator在英文中是“协调者”的意思，所以我把CoordinatorLayout叫做“协调者布局“。

2 本章内容

本章主要讲解如下内容：

 1. 基本使用
    1.1 CoordinatorLayout+FloatingActionButton
    1.2 CoordinatorLayout+AppBarLayout
        1.2.1 AppBarLayout嵌套TabLayout
        1.2.2 AppBarLayout嵌套CollapsingToolbarLayout
        1.2.3 AppBarLayout与FloatingActionButton
 2.自定义Behavior
     2.1自定义Behavior
     2.2滚动监听

3 具体使用介绍

我们从简单到复杂，一点点深入。

3.1 CoordinatorLayout+FloatingActionButton

这个是最简单的用法，先来看看效果图：
这里写图片描述
大家可能疑问这个效果有什么好看的，一个Snackbar显示而已。仔细看，Snackbar显示的时候会把FloatingActionButton推上去而不是覆盖它。
代码如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_floatingaction"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/faBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="10dp"
        />
</android.support.design.widget.CoordinatorLayout>

3.2 CoordinatorLayout+AppBarLayout

先看看效果图：
这里写图片描述
代码如下：

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways"
            app:title="ToolBar" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="30dp"
                android:text="测试数据1"
                android:textSize="20sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="30dp"
                android:text="测试数据2"
                android:textSize="20sp" />


        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

我们在CoordinatorLayout加入了AppBarLayout，AppBarLayout中有一个toolbar，这里我们对AppBarLayou做一下讲解：

1.AppbarLayout：继承了LinearLayout(默认的AppBarLayout是垂直方向)，它是为了Material Design设计的App Bar，它的作用是把AppBarLayout包裹的内容都作为AppBar。说白了它的出现就是为了和CoordinatorLayout搭配使用，实现一些炫酷的效果的。没有CoordinatorLayout，它和Linearlayout没区别。

2.app:layout_scrollFlags=”scroll|enterAlways”
AppBarLayout的直接子控件可以设置的属性:layout_scrollFlags

scroll|exitUntilCollapsed 如果AppBarLayout的直接子控件设置该属性,该子控件可以滚动,向上滚动NestedScrollView出父布局(一般为CoordinatorLayout)时,会折叠到顶端,向下滚动时NestedScrollView必须滚动到最上面的时候才能拉出该布局
scroll|enterAlways:只要向下滚动该布局就会显示出来,只要向上滑动该布局就会向上收缩
scroll|enterAlwaysCollapsed:向下滚动NestedScrollView到最底端时该布局才会显示出来
如果不设置改属性,则改布局不能滑动

3.细心的朋友可能在NestedScrollView中发现这么一条属性,这是干什么用的呢？

app:layout_behavior="@string/appbar_scrolling_view_behavior"

@string/appbar_scrolling_view_behavior是一个系统字符串，值为：android.support.design.widget.AppBarLayout$ScrollingViewBehavior。
唯一的作用是把自己（使用者）放到AppBarLayout的下面。（不能理解为什么叫ScrollingViewBehavior）所有View都能使用这个Behavior。大家可以把这句话去掉再试试效果。

为了节省篇幅，NestedScrollView中的TextView我删除了很多，大家测试的时候，拷贝上几个。

注意：要注意扩展，我们可以在AppBarLayout包含Toolbar和TableLayout.然后只给 Toolbar设置app:layout_scrollFlags=”scroll|enterAlways”属性，TableLayout不设置。这个大家自己试试效果吧，这里就不给代码了，给大家效果图看一下：
这里写图片描述

3.3 AppBarLayout+CollapsingToolbarLayout

接着3.2讲解的内容，我们继续往下深入。我们在AppBarLayout中添加CollapsingToolbarLayout。

Collapsing是折叠的意思。见名知意，CollapsingToolbarLayout的作用是提供了一个可以折叠的Toolbar，它继承至FrameLayout。
我们先来看一下效果图：
这里写图片描述
代码如下：

<?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:fitsSystemWindows="true"
    tools:context="mystudy.czh.com.mystudy.CollapsingToolBarActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.NoActionBar.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="170dp"
            app:contentScrim="@color/colorAccent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="@string/app_name">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/toolbar_bg" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.NoActionBar.PopupOverlay"
                app:title="toolBar" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@color/colorAccent" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

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

1.大家一定要弄清楚，它们之间的包含关系：
AppBarLayout >CollapsingToolbarLayout>Toolbar
2.CollapsingToolbarLayout作为AppBarLayout的直接子控件，也要设置app:layout_scrollFlags属性
3.app:layout_collapseMode属性是折叠模式，它是CollapsingToolbarLayout的直接子控件需要设置的,它的取值如下：

pin:在滑动过程中,此自布局会固定在它所在的位置不动,直到CollapsingToolbarLayout全部折叠或者全部展开
parallax:视察效果,在滑动过程中,不管上滑还是下滑都会有视察效果,不知道什么事视察效果自己看gif图(layout_collapseParallaxMultiplier视差因子 0~1之间取值,当设置了parallax时可以配合这个属性使用,调节自己想要的视差效果)
不设置:跟随NestedScrollView的滑动一起滑动,NestedScrollView滑动多少距离他就会跟着走多少距离
上面这几个属性大家如果看不懂，自己设置一下看看就明白了。

3.4 AppBarLayout与FloatingActionButton

说不多说，我们来看一下效果图：
这里写图片描述
代码如下：

<?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:fitsSystemWindows="true"
    tools:context="mystudy.czh.com.mystudy.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.NoActionBar.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.NoActionBar.PopupOverlay" />

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

    <android.support.v4.widget.NestedScrollView 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/text_margin"
        android:text="@string/large_text" />

</android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="bottom|right"
        app:srcCompat="@android:drawable/ic_dialog_email" />

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

这个就不解释了。大家可以把这段代码试试。

3 注意事项

本段参考地址，点击进入

最后说一下使用注意事项:
CoordinatorLayout继承自viewgroup,但是使用类似于framLayout,有层次结构,后面的布局会覆盖在前面的布局之上,但跟behavior属性也有很大关系,的app:layout_behavior属性,只有CoordinatorLayout的直接子布局才能响应,所以不要做徒劳无功的事

CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout结合起来才能产生这么神奇的效果,不要想当然的光拿着CoordinatorLayout就要玩出来(刚接触的时候我也有这种想法),累死你

AppBarLayout:继承自lineLayout,使用时其他属性随lineLayou,已经响应了CoordinatorLayout的layout_behavior属性,所以他能搞出那么多特效来

AppBarLayout的直接子控件可以设置的属性:layout_scrollFlags ：

1.scroll|exitUntilCollapsed如果AppBarLayout的直接子控件设置该属性,该子控件可以滚动,向上滚动NestedScrollView出父布局(一般为CoordinatorLayout)时,会折叠到顶端,向下滚动时NestedScrollView必须滚动到最上面的时候才能拉出该布局 
2.scroll|enterAlways:只要向下滚动该布局就会显示出来,只要向上滑动该布局就会向上收缩 
3.scroll|enterAlwaysCollapsed:向下滚动NestedScrollView到最底端时该布局才会显示出来 
4.如果不设置改属性,则改布局不能滑动

CollapsingToolbarLayout,字面意思是折叠的toolbar,它确实是起到折叠作用的,可以把自己的自布局折叠继承自framLayout,所以它的直接子类可以设置layout_gravity来控制显示的位置,它的直接子布局可以使用的属性:app:layout_collapseMode(折叠模式):可取的值如下:

1.pin:在滑动过程中,此自布局会固定在它所在的位置不动,直到CollapsingToolbarLayout全部折叠或者全部展开 
2.parallax:视察效果,在滑动过程中,不管上滑还是下滑都会有视察效果,不知道什么事视察效果自己看gif图(layout_collapseParallaxMultiplier视差因子 0~1之间取值,当设置了parallax时可以配合这个属性使用,调节自己想要的视差效果) 
3.不设置:跟随NestedScrollView的滑动一起滑动,NestedScrollView滑动多少距离他就会跟着走多少距离

toobar最好是放在CollapsingToolbarLayout,也不是没有其他用法,但是在这套系统中一般只能放在CollapsingToolbarLayout里面,才能达到好的效果,这里toolbar同时设置layout_gravity和app:layout_collapseMode时有一些比较复杂的情况.不一一作介绍,因为一般我们只会把toolbar放在最上面(不用设置layout_gravity属性,默认的),并且设置app:layout_collapseMode为pin,让他固定在最顶端,有兴趣的自己试试其他情况,

告你一个惊天大幂幂:只要CollapsingToolbarLayout里面包含有toolbar那么CollapsingToolbarLayout的折叠后高度就是toolbar的高度,相当于CollapsingToolbarLayout设置了minHeight属性,

再告诉你一个惊天大咪咪:CollapsingToolbarLayout折叠到最顶端时,它就是老大,会处于最上层,包括toolbar在内,所有的布局都会被他盖住,显示不出来.

CollapsingToolbarLayout 自己的属性说明（不是直接子布局可用的,是自己可以用的属性）：

contentScrim折叠后的颜色也是展开时的渐变颜色,效果超赞. 
title标题,如果设置在折叠时会动画的显示到折叠后的部分上面,拉开时会展开,很好玩的 
expandedTitleMargin当title文字展开时文字的margin,当然还有marginTop等属性,脑补吧 
app:collapsedTitleTextAppearance=”@style/Text”折叠时title的样式里面可以定义字体大小颜色等 
app:collapsedTitleTextAppearance=”@style/Text1”折叠时title的样式里面可以定义字体大小颜色等 
当然还有一些,自己试试吧,现在的这些已经完全够用了

还有最后一个问题:怎么实现固定表头,这个也简单,写一个布局放在CollapsingToolbarLayout之后,AppBarLayout之内即可,xml文件中自己找找看吧.你要是问如果放在CollapsingToolbarLayout之前,AppBarLayout之内会怎么样?这样折叠布局就不起作用了.不会折叠了.