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

前言

马上就国庆了,提前祝大家国庆快乐,中秋快乐,不知道小伙伴们准备去哪里玩(看)呢(人)?

有没有小伙伴能看出来这是哪里?

Material design系列也写了6篇了,今天一次性把最后的写完吧,免得自己国庆出去玩心里总有事压着,玩的也不愉快!

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图标
添加右侧菜单列表
  1. 首先在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>

效果还是很棒的吧!

总结

Material design系列的文章到此结束了,正好国庆也快到了,给自己好好放个假,出去玩一趟!今天写的比较多,如果有什么遗漏或者错误希望大家指出,我会及时更正的!
祝大家国庆快乐,中秋快乐啊,如果觉得文章写的不错,忍不住要给我送盒月饼我也是不介意的,23333~~~


以上纯属于个人平时工作和学习的一些总结分享,如果有什么错误欢迎随时指出,大家可以讨论一起进步。

推荐阅读更多精彩内容