AppbarLayout最详细使用说明(实现折叠导航栏)

        AppbarLayout是Material Design的一个控件,目的是为了实现一些酷炫到爆的效果,比如之前的折叠导航栏可以费劲心血的写出来,现在利用Appbarlayout非常容易的就可以实现出来,当然需要配合其他几个来控件实现,这个我们待会再说.

最最简单用法

        最最简单的用法,你可以用他来包裹一个Toolbar来用,如下图,这是一个没有被包裹的ToolBar,很简单

没有被包裹的ToolBar

        然后下图是一个被包裹的ToolBar

 

这是被包裹的

    颜色是默认的(你color文件中定义的colorPrimary颜色),最主要的是浮层效果,立体感的效果,这是你只是用toolbar没有的效果,当然如果这个幅度太大,你先调小或者不要,可以在AppbarLayout中设置,如下:

 

记住是app开头的属性,不是android开头的那个

 

效果没了

app:expanded="true"  这个属性是配合CoordinatorLayout来使用的

正经用法

然后我们就来学习一下这个控件的正经用法,其实他的最主要特点是滑动,他需要配合俩个控件一起使用,那就是 CoordinatorLayout和CollapsingToolbarLayout。

CoordinatorLayout

官方文档的第一句话就非常醒目：CoordinatorLayout is a super-powered FrameLayout,非常直白，CoordinatorLayout 继承于ViewGroup,它就是一个超级强大Framelayout。说白了就是可以通过Behavior 协调子View 。

CollapsingToolbarLayout

官方文档的介绍

CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout. 

CollapsingToolbarLayout是一个包装Toolbar，实现了一个折叠的应用程序栏。它的目的是作为一个直接的孩子使用AppBarLayout

他能实现一下效果:

折叠标题

当布局完全可见时更大的标题，但随着布局滚动屏幕而折叠并变小。您可以将标题设置为通过显示setTitle(CharSequence)。标题外观可以通过collapsedTextAppearance和expandedTextAppearance属性进行调整。

内容蒙纱

滚动位置达到一定阈值时显示或隐藏内容。你可以通过改变这个setContentScrim(Drawable)。

状态栏蒙纱

当滚动位置已经达到一定的阈值时，状态栏显示或隐藏。你可以通过改变这个setStatusBarScrim(Drawable)。

视差滚动

子视图可以选择以视差方式在此布局内滚动。

固定位置的view

子View可以选择全局固定在空间。这在实现折叠时非常有用，因为Toolbar即使布局正在移动，它也可以固定到位。

结合使用

AppbarLayout要实现酷炫的滑动效果必须依赖于CoordinatorLayout使用,作为CoordinatorLayout的直接子view,如果父view是其他的viewGroup是没有效果的.滑动的特效用如下俩种方式设置

setScrollFlags

app:layout_scrollFlags

layout_scrollFlags有5种动作，分别是scroll,enterAlways,enterAlwaysCollapsed,exitUntilCollapsed,snap

1,scroll,子View 添加layout_scrollFlags属性 的值scroll 时，这个View将会随着可滚动View（如：ScrollView,以下都会用ScrollView 来代替可滚动的View ）一起滚动，就好像子View 是属于ScrollView的一部分一样。

 

布局

 

scroll

    注意:ScrollFlags是设置给AppbarLayout的子View的,他可以有很多子View,你给那个子View设置,那个子View就会有效果,如下图,我们有俩个ToolBar,一个设置ScrollFlags,一个没有设置.

2,enterAlways,子View 添加layout_scrollFlags属性 的值有enterAlways 时, 当ScrollView 向下滑动时，子View 将直接向下滑动，而不管ScrollView 是否在滑动。注意：要与scroll 搭配使用，否者是不能滑动的。

 

 

注意：这一看跟scroll没啥区别啊，scroll是作为类似于一个header的形式存在的，当你欢动view的时候他会跟着一起往上滑，当先往下滑额时候他也会往下滑，直到view滑倒底部，他才会出现，而enterAlways是作为一个导航栏的东西，虽然向上滑动的时候它也会向上滑动，但他只是滑出界面，当你view向下滑动的时候，即使view已经滑动到底部，它也会立即滑动出来，而不会像单纯的scroll一样必须view滑倒头部才出来。

3,enterAlwaysCollapsed, enterAlwaysCollapsed 是对enterAlways 的补充，当ScrollView 向下滑动的时候，滑动View（也就是设置了enterAlwaysCollapsed 的View）下滑至折叠的高度，当ScrollView 到达滑动范围的结束值的时候，滑动View剩下的部分开始滑动。这个折叠的高度是通过View的minimum height （最小高度）指定的。

注意：app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

必须这样三个一起用才会有想要的效果， enterAlwaysCollapsed是 enterAlways扩展， enterAlways又必须依赖于 scroll，你可以 enterAlwaysCollapsed和 scroll用，但是只有scroll的效果

4,exitUntilCollapsed, 当ScrollView 滑出屏幕时（也就时向上滑动时），滑动View先响应滑动事件，滑动至折叠高度，也就是通过minimum height 设置的最小高度后，就固定不动了，再把滑动事件交给 scrollview 继续滑动。

注意：exitUntilCollapsed是独立的，只依赖scroll，当然你可以和enterAlways或者enterAlwaysCollapsed一起用，但是效果还是以exitUntilCollapsed为主，并且效果会有一丝的卡顿和古怪，所以应该没人这么干

5,snap,意思是：在滚动结束后，如果view只是部分可见，它将滑动到最近的边界。比如，如果view的底部只有25%可见，它将滚动离开屏幕，而如果底部有75%可见，它将滚动到完全显示。

snap

注意：这个效果其实就是类似我们侧拉菜单的一个效果，可以回弹。还有这个效果是可以和其他几个一起使用的，效果即使几个的结合如下图：

 

scroll|enterAlways|enterAlwaysCollapsed|snap

 

scroll|exitUntilCollapsed|snap

        以上便是appbarlayout五种scrollFlag的特效介绍，基本可以满足日常开发需要，如果设计师比较鬼畜，那么打他！！！

其他方法介绍

addOnOffsetChangedListener当AppbarLayout 的偏移发生改变的时候回调，也就是子View滑动。

getTotalScrollRange返回AppbarLayout 所有子View的滑动范围

removeOnOffsetChangedListener移除监听器

setExpanded (boolean expanded,  boolean animate)设置AppbarLayout 是展开状态还是折叠状态，animate 参数控制切换到新的状态时是否需要动画

setExpanded (boolean expanded)设置AppbarLayout 是展开状态还是折叠状态,默认有动画

但看解释好像不明白，我们详细来看一下这几个方法

1，addOnOffsetChangedListener

这是官方的解释，其实很明白了

Called when theAppBarLayout's layout offset has been changed. This allows child views to implement custom behavior based on the offset (for instance pinning a view at a certain y value).

在AppBarLayout的布局偏移量发生改变时被调用。这个方法允许子view根据偏移量实现自定义的行为（比如在特定Y值的时候固定住一个View）

下面来举个例子来看一下这个方法能作甚们

如图我们搞一个这个样子的布局

布局

 

java代码

 

日志

        可见当appbarlayout最大的时候偏移量为0，网上滑动的时候，偏移量向负数方向增大，下面是效果图，只是展示了可以做的一些事情，实际项目中可以根据偏移量随意操作，比如可以做个透明度的动画等等

 

效果图

2，getTotalScrollRange，这个方法返货的是一个滑动的范围，也可以理解为党appbarlayout滑动到最小值时候的一个值得绝对值，这个值是不变的，是以appbarlayout为基础的其所有子view的一个范围值，如下，我们在addOnOffsetChangedListener方法中加入以下代码，然后滑动得到的值全都是288。有这个方法，我们可以在addOnOffsetChangedListener方法中做什么事情之前做一个精准的判断。

 

 

3，removeOnOffsetChangedListener  ，移除监听器，这个没什么好说的，移除掉偏移量监听，某些情况下，你可能需要根据偏移量做些神门事情，但是某些情况下，你有不想做神门，所以只好把他移除掉。

4，setExpanded (boolean expanded, boolean animate)设置AppbarLayout 是展开状态还是折叠状态，animate 参数控制切换到新的状态时是否需要动画

setExpanded (boolean expanded)设置AppbarLayout 是展开状态还是折叠状态,默认有动画

这俩个方法，就像他的解释一样

 

false为关闭状态，true为展开状态

 

打开时的状态

CollapsingToolbarLayout 

CollapsingToolbarLayout是对子view的包装,并且实现了折叠app bar效果，使用时，要作为 AppbarLayout 的直接子View。

1,Collapsing title(折叠标题)当布局全部可见的时候，title 是最大的，当布局开始滑出屏幕，title 将变得越来越小，你可以通过setTitle（CharSequence） 来设置要显示的标题。

注意：Toolbar 和CollapsingToolbarLayout 同时设置了title时，不会显示Toolbartitle而是显示CollapsingToolbarLayout 的title，如果要显示Toolbar 的title，你可一在代码中添加如下代码：

collapsingToolbarLayout.setTitle("")

注意:你得给CollapsingToolbarLayout设置一个值,你来个wrap_parent是不起作用的,或者你把toolbar设置一个值来撑大CollapsingToolbarLayout也是不可以的

 

布局

 

效果图

2,Content scrim(内容纱布)当CollapsingToolbarLayout滑动到一个确定的阀值时将显示或者隐藏内容纱布，可以通过setContentScrim(Drawable)来设置纱布的图片。

 

布局

 

效果图

3,Status bar scrim（状态栏纱布）当CollapsingToolbarLayout滑动到一个确定的阀值时，状态栏显示或隐藏纱布，你可以通过setStatusBarScrim(Drawable)来设置纱布图片。

4,Pinned position children（固定子View的位置）子View可以固定在全局空间内，这对于实现了折叠并且允许通过滚动布局来固定Toolbar 这种情况非常有用。在xml 中将collapseMode设为pin

 

布局

 

5,Parallax scrolling children（有视差地滚动子View）让CollapsingToolbarLayout 的子View 可以有视差的滚动，需要在xml中用 添加如下代码：

app:layout_collapseMode="parallax"

注意:app:layout_collapseParallaxMultiplier="0.7" 这个参数是设置视差范围的,0-1,越大视差越大

 

布局

 

效果图

        以上就是appbarlayout的全部特点,在项目中使用几次就会了,各种scrollFlag与CollapsingToolbarLayout的搭配使用,可以做出很多非常酷炫的效果,基本满足各种需求,如果设计师太鬼畜,那么打她,打她,打她!!!!!!!  打不过?请用behavior,behavior,.behavior!!!