Material design library系列——CoordinatorLayout，AppBarLayout，CollapsingToolbarLayout等

最新推荐文章于 2022-10-12 16:44:24 发布

laizhixue

最新推荐文章于 2022-10-12 16:44:24 发布

阅读量197

点赞数

分类专栏： Android

Android 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

CoordinatorLayout

首先我们来看一下官方文档对这个布局的介绍

CoordinatorLayout is intended for two primary use cases:
As a top-level application decor or chrome layout
As a container for a specific interaction with one or more child views

实际上CoordinatorLayout是一个更强大的FrameLayout，从文档上来看就是2点

作为最上层的View
作为一个容器与一个或者多个子View进行交互

比如我们之前说Snackbar弹出的时候FloatingActionButton随之弹起

最外层是FrameLayout

最外层是CoordinatorLayout

我们只是把xml里面最外层的布局从FrameLayout换成了CoordinatorLayout就能达到这个效果，为什么呢？
这就要涉及到CoordinatorLayout的使用核心Behavior了，Behavior就是执行你定制的动作，而我们的FloatingActionButton默认是有一个Behavior的，所以才能达到随着Snackbar弹出而弹起的功能。

FloatingActionButton源码中的静态内部类

当然了，如果你想实现自己的效果的话，就需要自定义Behavior了，这里给大家推荐几篇文章，自定义behavior写的很棒http://blog.csdn.net/huachao1001/article/details/51554608

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2016/0824/6565.html

Toolbar

ToolBar是Android 5.0推出的一个新的导航控件用于取代之前的ActionBar，它具备高度的可定制性、灵活性、具有Material Design风格等优点

1. 要用到toolbar，所以我们要把actionbar去掉，找到我们的styles文件，然后把parent里面的主题改为NoActionBar

2. 在代码中添加我们的toolbar

<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.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"/>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

3. 在代码中设置toolbar

做到这一步，我们就已经用toolbar代替actionbar了。

Toolbar的一些属性

android:background：修改背景色，比如这里背景颜色我设为橙色

app:title：设置标题文字，这里要注意，前面是app，不是android

app:titleTextColor：修改标题文字的颜色
app:titleTextAppearance：修改标题文字的大小
app:subtitle：设置子标题的文字

app:subtitleTextColor：修改子标题文字的颜色
app:subtitleTextAppearance：修改子标题文字的大小
app:navigationIcon：添加导航的图标

这里顺便说一下navigationIcon的点击事件，在代码中设置 toolbar.setNavigationOnClickListener即可。

app:logo：设置logo图标

添加右侧菜单列表

首先在res/menu目录下的xml文件中定义的，要添加几个动作，则在<menu>节点下添加几个item。

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/add"
        app:showAsAction="always"
        android:icon="@drawable/add"
        android:title="add">
    </item>

    <item
        android:id="@+id/message"
        app:showAsAction="never"
        android:icon="@drawable/message"
        android:title="message">
    </item>

    <item
        android:id="@+id/setting"
        app:showAsAction="ifRoom"
        android:icon="@drawable/setting"
        android:title="setting">
    </item>
</menu>

这里跟大家说一下app:showAsAction这个属性，app:showAsAction是用来指定这个动作是放置在操作栏上，还是溢出菜单中。

ifRoom
- 如果操作栏有空间放置，则放置在操作栏上，否则放置到溢出菜单中
always
- 总是放置在操作栏上
never
- 总是放置在溢出菜单中

2.在Activity中重写onCreateOptionsMenu显示菜单

3.重写onOptionsItemSelected给菜单设置点击事件

AppBarLayout

首先通过看源码我们知道AppBarLayout是继承LinearLayout并且默认方向是VERTICAL

这个布局里面给我们提供了一个属性

在xml文件中我们这样写
- app:layout_scrollFlags
在代码中我们这样写
- setScrollFlags（）

对应的几个值

srcoll
- 这个View将会响应Scroll事件
enterAlways
- 下拉的时候，这个View也会跟着滑出。
enterAlwaysCollapsed
- 另一种enterAlways，但是只显示折叠后的高度。
exitUntilCollapsed
- 上拉的时候，这个View会跟着滑动直到折叠。
snap
- 在Scroll滑动事件结束以前，如果这个View部分可见，那么这个View会停在最接近当前View的位置

由于这里还没有说到CollapsingToolbarLayout，所以只能先说scroll，enterAlways和snap这三个，给大家看看效果。

首先是scroll

scroll

RecyclerView往上滑动的时候，toolbar跟着上移，等RecyclerView滑倒顶部的时候，toolbar才开始往下滑动

然后是scroll+enterAlways

scroll+enterAlways

RecyclerView往上滑动的时候，toolbar跟着上移，但是只要RecyclerView往下移动了，toolbar马上开始往下滑动，然后RecyclerView才开始继续滑动

最后是scroll+snap

scroll+snap

大家可以看到，前面基本与单独设置scroll没什么区别，但是到了后面，我特意把toolbar留了一点点，这个时候，snap的属性就出来了，他会自动判断是全部显示还是隐藏。

xml代码是这样的

<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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|snap"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rcv"
        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>

CollapsingToolbarLayout

CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承FrameLayout，给它设置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。
有了CollapsingToolbarLayout之后，我们再来说一下app:layout_scrollFlags其中的2个属性

enterAlwaysCollapsed
- 假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。
exitUntilCollapsed
- 当你定义了一个minHeight，此布局将在滚动到达这个最小高度的时候折叠。

<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="180dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            app:layout_scrollFlags="scroll"
            android:layout_height="match_parent">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rcv"
        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>

首先是scroll

scroll

然后是scroll+enterAlways+enterAlwaysCollapsed

scroll+enterAlways+enterAlwaysCollapsed

最后是scroll+exitUntilCollapsed

scroll+exitUntilCollapsed

这里要注意一下

与AppBarLayout组合的滚动布局（Recyclerview、NestedScrollView等）需要设置app:layout_behavior="@string/appbar_scrolling_view_behavior"（上面代码中NestedScrollView控件所设置的）。没有设置的话，AppBarLayout将不会响应滚动布局的滚动事件。

app:contentScrim：设置折叠时工具栏布局的颜色

statusBarScrim：设置折叠时状态栏的颜色，不过这里我们要先把状态栏透明

1.在相应的Activity中调用执行这段代码。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {//5.0及以上
            View decorView = getWindow().getDecorView();
            int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
            decorView.setSystemUiVisibility(option);
            getWindow().setStatusBarColor(Color.TRANSPARENT);
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {//4.4到5.0
            WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
            localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
        }

2.给CollapsingToolbarLayout和其上的布局都加一条android:fitsSystemWindows="true"即可。

layout_collapseMode，该属性有2个值

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

<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:fitsSystemWindows="true">

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

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

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="fitXY"
                app:layout_collapseMode="parallax"
                android:src="@drawable/pic"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rcv"
        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>

效果还是很棒的吧！

作者：一只快乐的小程序猿丶
链接：https://www.jianshu.com/p/1edd46c08a9f
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

laizhixue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Material design library系列——CoordinatorLayout，AppBarLayout，CollapsingToolbarLayout等

CoordinatorLayout首先我们来看一下官方文档对这个布局的介绍CoordinatorLayout is intended for two primary use cases:As a top-level application decor or chrome layoutAs a container for a specific interaction with one or more...
复制链接

扫一扫