CoordinatorLayout的基本用法

CoordinatorLayout是MD中的一个专门用来做滚动特效的一个控件。继承自ViewGroup，并且它被设计成一个top-level的根布局，它本身只是一个ViewGroup，实现了NestedScrollingParent接口。
这里额外需要注意的是:

由于CoordinatorLayout只实现了NestedScrollingParent，所以当CoordinatorLayout嵌套（作为一个子View）的时候会得不到你想要的效果，需要自己写一个CoordinatorLayout去实现NestedScrollingChild接口。
没有实现NestedScrollingChild接口的子View如：ListView，ScrollView在5.0以下版本跟CoordinatorLayout是配合不了的需要使用RecyclerView，NestedScrollView才行。

CoordinatorLayout这个控件很强大，能对其子元素实现多种不同的功能，一个常见的用法就是：给它的一个子元素A设置一个layout_scrollFlags的属性，然后给另外一个子元素B设置一个layout_behavior=”@string/appbar_scrolling_view_behavior”的属性，这个子元素B一般是一个可以滑动的控件，比如RecyclerView、NestedScrollView等，那么当子元素B滑动的时候，子元素A就会根据其layout_scrollFlags的属性值而做出不同的改变，所以我们要为CollapsingToolbarLayout设置layout_scrollFlags属性。

layout_scrollFlags有哪几个属性可以选择：

scroll:所有想要滑动的控件都要设置这个标志位。如果不设置这个标志位，那么View会固定不动。
enterAlways:设置了该标志位后，若View已经滑出屏幕，此时手指向下滑，View会立刻出现，这是另一种使用场景。
enterAlwaysCollapsed:设置了minHeight，同时设置了该标志位的话，view会以最小高度进度屏幕，当滑动控件滑动到顶部的时候才会拓展为完整的高度。
exitUntilCollapsed:向上滑动时收缩当前View。但view可以被固定在顶部。

layout_collapseMode标志位进而产生不同的行为。其实这里也只有两种标志位，分别是：

pin：有该标志位的View在页面滚动的过程中会一直停留在顶部，比如Toolbar可以被固定在顶部
parallax：有该标志位的View表示能和页面同时滚动。与该标志位相关联的一个属性是：layout_collapseParallaxMultiplier，该属性是视差因子，表示该View与页面的滚动速度存在差值，造成一种相对滚动的效果。
Snackbar+FAB的效果图，如下：

Snackbar+FAB.gif

布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_content"
        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.v7.widget.RecyclerView
            android:id="@+id/rvToDoList"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </android.support.v7.widget.RecyclerView>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_margin="16dp"
            android:src="@mipmap/ic_launcher"
            app:layout_anchor="@id/rvToDoList"
            app:layout_anchorGravity="bottom|right|end"/>
    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>

很简单就是一个CoordinatorLayout里面包裹recyclerView和FloatingActionButton。
app:layout_anchor:意思是FAB浮动按钮显示在哪个布局区域。且设置当前锚点的位置
app:layout_anchorGravity:意思FAB浮动按钮在这个布局区域的具体位置。两个属性共同作用才是的FAB 浮动按钮也能折叠消失，出现。

java代码如下：

@Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fab);
        CoordinatorLayout coordinatorLayout = (CoordinatorLayout) findViewById(R.id.main_content);
        FloatingActionButton floatingActionButton =(FloatingActionButton) findViewById(R.id.fab);
        final Snackbar snackbar = Snackbar.make(coordinatorLayout, "这里是Snackbar", Snackbar.LENGTH_LONG)
                .setAction("这里是Snackbar的action", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(FabActivity.this, "你点击了Snackbar", Toast.LENGTH_SHORT).show();
                    }
                })
                .addCallback(new BaseTransientBottomBar.BaseCallback<Snackbar>() {
                    @Override
                    public void onDismissed(Snackbar transientBottomBar, int event) {
                        super.onDismissed(transientBottomBar, event);
                        Toast.makeText(FabActivity.this, "Snackbar消失了", Toast.LENGTH_SHORT).show();
                    }

                    @Override
                    public void onShown(Snackbar transientBottomBar) {
                        super.onShown(transientBottomBar);
                        Toast.makeText(FabActivity.this, "Snackbar显示了", Toast.LENGTH_SHORT).show();
                    }
                });
        floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(snackbar.isShown()){
                    snackbar.dismiss();
                }else{
                    snackbar.show();
                }
            }
        });

    }

这里一眼看上去，对于不知道Snackbar控件的人来说，感觉好复杂，看不懂。这里我简单的说一下Snackbar。简单的用的话，我们只用知道他与Toast类似，不管是用法，还是用途，都类似。不知道的童鞋，想了解的，可以跳转没时间解释了，快使用Snackbar!——Android Snackbar花式使用指南。这篇文章说的很清楚。看完之后，回过头来看这个，超级简单。就是一个Snackbar的显示，跟他的显示，隐藏的回调。

Toolbar效果图如下：

toolbar.gif

布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <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/main_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:fitsSystemWindows="true">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.AppBarLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:layout_margin="15dp"/>

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

布局文件很简单，就是CoordinatorLayout+AppBarLayout+RecyclerView，这里的FAB要不要无所谓。然后AppBarLayout里面包裹一个toolbar。对于AppBarLayout不了解的童鞋，可以去看一下玩转AppBarLayout，更酷炫的顶部栏。这篇文章里面说的很清楚。至于，我这里的java代码没啥好贴的，就是给RecyclerView填充数据，给toolbar设置标题。其他没有啥了。

tablayout联用的效果图，如下：

tablayout.gif

布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFF">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#FFF">

            <LinearLayout
                android:id="@+id/ll"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:id="@+id/header"
                    android:layout_width="match_parent"
                    android:layout_height="260dp"
                    android:scaleType="centerCrop"
                    android:src="@mipmap/guide" />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:background="#00FFFFFF"
                    android:gravity="center"
                    android:textSize="16sp"
                    android:text="哈哈哈哈哈"/>
            </LinearLayout>

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#FBDD9C"
                app:tabGravity="fill"
                app:tabIndicatorColor="#5f00"
                app:tabIndicatorHeight="4dp"
                app:tabMode="fixed"
                app:tabSelectedTextColor="#FFFFFF"
                app:tabTextColor="#FFFFFF" />
        </android.support.design.widget.AppBarLayout>
        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerview_tablayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
        </android.support.v7.widget.RecyclerView>
    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>

布局文件很简单，就是CoordinatorLayout+AppBarLayout+RecyclerView，跟上一个不同的是AppBarLayout里面包裹的内容不是Toolbar，而是一个LinearLayout+TabLayout，LinearLayout设置了：

app:layout_scrollFlags="scroll|exitUntilCollapsed"

至于java代码，就是给RecyclerView、TabLayout填充数据，其他没有什么东西了。

CollapsingToolbarLayout连用的效果图，如下

CollapsingToolbarLayout.gif

CollapsingToolbarLayout常见的xml属性如下：

contentScrim：当Toolbar收缩到一定程度时的所展现的主体颜色。即Toolbar的颜色。
title:当titleEnable设置为true的时候，在toolbar展开的时候，显示大标题，toolbar收缩时，显示为toolbar上面的小标题。
scrimAnimationDuration：该属性控制toolbar收缩时，颜色变化的动画持续时间。即颜色变为contentScrim所指定的颜色进行的动画所需要的时间。
expandedTitleGravity：指定toolbar展开时，title所在的位置。类似的还有expandedTitleMargin、collapsedTitleGravity这些属性。
collapsedTitleTextAppearance：指定toolbar收缩时，标题字体的样式，类似的还有expandedTitleTextAppearance。

布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
    <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:background="@android:color/background_light"
        android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbarlayout"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

                <ImageView
                    android:id="@+id/main.backdrop"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:adjustViewBounds="true"
                    android:fitsSystemWindows="true"
                    android:scaleType="centerCrop"
                    app:layout_collapseParallaxMultiplier="0.7"
                    android:src="@mipmap/guide"
                    app:layout_collapseMode="parallax"/>

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="96dp"
                    android:minHeight="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    android:gravity="top"
                    app:titleMarginTop="15dp"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
            </android.support.design.widget.CollapsingToolbarLayout>

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:background="?attr/colorPrimary"
                app:tabIndicatorColor="@color/colorAccent"
                app:tabIndicatorHeight="4dp"
                app:tabSelectedTextColor="#000"
                app:tabTextColor="#fff"/>
        </android.support.design.widget.AppBarLayout>

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

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:layout_margin="15dp"/>

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

</LinearLayout>

布局文件很简单，就是CoordinatorLayout包括AppBarLayout+RecyclerView+FAB。然后就是AppBarLayout包括CollapsingToolbarLayout+TabLayout。再就是CollapsingToolbarLayout包括ImageView+Toolbar。就是这样。至于java代码，就是给recyclerView、tablayout填充数据，设置标题。
demo下载

到此结束。

最后编辑于：2017.12.10 06:02:43

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

CoordinatorLayout的基本用法

推荐阅读更多精彩内容