Android MaterialDesign系列之CoordinatorLayout实现折叠式菜单栏

一、简述

本文主要是对简易的折叠式菜单栏做个记录，方便以后开发进行比照改进。本文记录的有简单的Material化的折叠式菜单栏的实现，也将呈现一些比较重要的概念，比如 fitSystemWindows 的一些细节。

二、效果

三、使用

1、CoordinatorLayout

CoordinatorLayout即为协调性布局，是一个加强版的FrameLayout,它可以协调子布局及控件，要使用它必须把它设置为整个布局的根ViewGroup。同时，可以通过对“特殊子控件”设置app:appbar_scrolling_view_behavior属性的值，进而来协调子控件在整个布局中的显示位置。需要注意的是这里的“特殊子控件”只有RecyclerView、ViewPager和NewstedScrollView这三种。

2、AppBarLayout

AppBarLayout是一个垂直的LinearLayout，实现了Material Design中AppBar的scrolling gestures特性。AppBarLayout的子View应该声明想要具有的“滚动行为”，这可以通过layout_scrollFlags属性或是setScrollFlags()方法来指定。 
AppBarLayout只有作为CoordinatorLayout的直接子View时才能正常工作， 为了让AppBarLayout能够知道何时滚动其子View，我们还应该在CoordinatorLayout布局中提供一个可滚动View，我们称之为scrolling view。scrolling view和AppBarLayout之间的关联，通过将scrolling view的Behavior设为AppBarLayout.ScrollingViewBehavior来建立。

scrollFlags的属性值	作用
scroll	让AppBarLayout与scrolling view合为一体，当scrolling view滚动时，AppBarLayout也跟着一起滚动。这是“增强”Toolbar的一个必需取值，可以跟其他值一起使用，从而实现不同的“增强”效果。单独使用scroll的话，其效果就类似给ListView加了一个HeaderView。

 ScrollFlags 标志介绍

scrollFlags效果展示：

动图展示app:layout_scrollFlags的5种滑动属性

3、CollapsingToolbarLayout

要实现上图的效果，需要跟AppBarLayout一起使用，CollapsingToolbarLayout的使用很简单，直接包裹Toolbar即可，其中可以增加一个ImageView控件来作为CollapsingToolbarLayout的“背景”，其实CollapsingToolbarLayout本身是一个FrameLayout，所以其子控件的摆放就是从左上角开始，一个个叠加起来。不过，其中的Toolbar默认一开始是隐藏的。

划重点

这里我必须得指出是fitSystemWindows是很重要的，这时候如果没有fitSystemWindows的话，要知道标题栏会覆盖上状态栏的，这其实不是我们想要的。故而需要使用fitSystemWindows来告知标题栏不会被覆盖。

---

4、代码

以下是比较重要的，设置的是AppbarLayout 的滑动监听事件，可以通过使用滑动监听设置标题的透明度来达到一些效果，有必要记录以下的。 

        mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBar, int offset) {
                mTvTitle.setAlpha(Math.abs(offset * 1f / appBar.getTotalScrollRange()));
            }
        });

4. 分析 fitSystemWindows 属性

1. 初始化的效果展示：

// 基础的style
    
    

 好了，这就是初始化的效果展示。

2. 调整主题效果

style.xml
    

style.xml(v19)

    

可以发现确实已经顶上去了，一般这就是我们想要的效果。 

3. 再开看看 fitSystemWindows 会有什么效果

比较不错的 fitSystemWindows

android:fitsSystemWindows=“true” 默认行为就是通过在 View 上设置和系统窗口一样高度的边框（padding ）来确保你的内容不会出现到系统窗口下面。

如上所示，当无脑使用fitSystemWindows = "true"时，那么状态栏会空下来的。多注意该概念，是使得布局不占用系统布局空间。

设置fitSystemWindows=true之后, 设置在这个view上的padding都会失效。

小结：这里由于设置了状态栏为透明色，假如这时候设置布局那么就会直接将布局给顶到状态栏上去，对图固定的图片背景这显然是我们想要的，但是对于文本效果，那么我们仍然需要系统预留出这一部分，是得系统不占用系统的布局空间。

深入分析fitSystemWindows属性

分析见：全屏、沉浸式、fitSystemWindow使用及原理分析：全方位控制“沉浸式”的实现

              从fitSystemWindows说起

 如下为系统默认的根布局样式：

    android:fitsSystemWindows="true"
    android:orientation="vertical">
    
    

 

我的相关系列文章：Android 沉浸式状态栏的设计与实现