玩转AppBarLayout实现更酷炫的顶部栏

概述上一篇文章《CoordinateLayout的使用如此简单》对CoordinateLayout的使用做了讲解，今天我们再讲解常常与其一起使用的几个View：AppBarLayout、CollapsingToolbarLayout以及Toolbar。一下子出现3个陌生的View，是不是

上一篇文章《CoordinateLayout的使用如此简单 》对CoordinateLayout的使用做了讲解，今天我们再讲解常常与其一起使用的几个VIEw：AppbarLayout、CollapsingToolbarLayout以及Toolbar。一下子出现3个陌生的VIEw，是不是觉得很慌张~，很多人都写了这几个布局的使用，但是他们却没有有针对性的单独讲解每个VIEw的作用以及如何使用，我看的很多文章都是一上来就把AppbarLayout、CollapsingToolbarLayout以及Toolbar写到一个布局里面去，然后一个一个布局属性去说，一下子感觉好混乱，本文是从Toolbar开始说起，最终让你把这3个VIEw彻底掌握下来！

其实，这三个VIEw都是针对我们以往常用的Actionbar的，就是针对我们的App的顶部的bar玩各种花样~我们往下看，看看他们把我们的App的”顶部栏”玩出个什么花样！

1 Toolbar

Toobar主要是用来替换Actionbar的，换句话说，Actionbar能做的，Toolbar都能做。如果你对Actionbar的使用比较熟悉，你会发现Toolbar使用起来非常简单。ok，既然是替换，当然用Toolbar的时候就得先去把Actionbar给隐藏掉啦~

隐藏Actionbar的方法有很多，可以通过代码的方式隐藏，也可以通过配置文件的方式，我们主要是通过配置文件的方式来隐藏。在我们的styles.xml文件中的Apptheme标签中加入如下两行：

<item name="windowActionbar">false</item>
<item name="windowNoTitle">true</item>

当然了，你也可以新建一个<style>标签，将上面两行代码加入，并且将这个新建的标签作为<application>的theme。还可以选择通过将Apptheme的parent设置为theme.AppCompat.light.NoActionbar的方式。方法很多，可以自己随便选。

接下来就是将Toolbar放入到布局文件（没啥好解释的）：

 <androID.support.v7.Widget.Toolbar androID:ID="@+ID/toolbar" androID:layout_wIDth="match_parent" androID:background="?attr/colorPrimary" androID:layout_height="?androID:attr/actionbarSize" />

最后将Toobar作为“Actionbar”来用

 Toolbar toolbar = (Toolbar) findVIEwByID(R.ID.toolbar); toolbar.setTitle("这里是Title"); toolbar.setSubTitle("这里是子标题"); toolbar.setlogo(R.drawable.icon);  setSupportActionbar(toolbar);

可以对Toolbar设置logo、标题、子标题等等~还有很多其他的设置，自己去慢慢玩，这里不提啦~。当然了，也可以在布局文件中设置这些，在布局文件设置就不写啦，hongyang大神有篇博客写的挺好的《 AndroID 5.x theme 与 Toolbar 实战 》可以去参考一下。

看看效果：

如果Toolbar仅仅是用来对以往的Actionbar做一次替换，那也太没创意啦！完全没必要去替换了，因为它们表现出来的都是一样的，而且并没有让我们觉得用起来比Actionbar方便。那为啥要替换呢，总应该有他的理由吧：Actionbar是固定在顶部，并不能移动，我觉得这是最大的不好，而我们的Toolbar可以让我们随便摆放，就就可以带来很多灵活性和效果啦！

正如你所看的这样，Toolbar根本就不够看的，一点都不复杂。接下来我们继续学习在Toolbar上面再套一层父VIEw，让Toolbar更有互动性。

2 AppbarLayout

AppbarLayout继承自linearLayout，布局方向为垂直方向。所以你可以把它当成垂直布局的linearLayout来使用。AppbarLayout是在linearLayou上加了一些材料设计的概念，它可以让你定制当某个可滚动VIEw的滚动手势发生变化时，其内部的子VIEw实现何种动作。 

请注意：上面提到的某个可滚动VIEw，可以理解为某个ScrollVIEw。怎么理解上面的话呢？就是说，当某个ScrollVIEw发生滚动时，你可以定制你的“顶部栏”应该执行哪些动作（如跟着一起滚动、保持不动等等）。那某个可移动的VIEw到底是哪个可移动的VIEw呢？这是由你自己指定的！如何指定，我们后面说。

2.1 AppbarLayout子VIEw的动作

内部的子VIEw通过在布局中加app:layout_scrollFlags设置执行的动作，那么app:layout_scrollFlags可以设置哪些动作呢？分别如下：

（1） scroll:值设为scroll的VIEw会跟随滚动事件一起发生移动。
什么意思呢？简单的说，就是当指定的ScrollVIEw发生滚动时，该VIEw也跟随一起滚动，就好像这个VIEw也是属于这个ScrollVIEw一样。

一张gif足以说明：

对应的布局文件

<androID.support.design.Widget.AppbarLayout androID:layout_wIDth="match_parent" androID:layout_height="wrap_content"> <androID.support.v7.Widget.Toolbar androID:ID="@+ID/toolbar" androID:layout_wIDth="match_parent" androID:layout_height="?androID:attr/actionbarSize" androID:background="?attr/colorPrimary" app:layout_scrollFlags="scroll" /></androID.support.design.Widget.AppbarLayout>

（2） enteralways:值设为enteralways的VIEw,当ScrollVIEw往下滚动时，该VIEw会直接往下滚动。而不用考虑ScrollVIEw是否在滚动。 

看个动画片（Y(^o^)Y）（Toolbar高度设为：?androID:attr/actionbarSize,app:layout_scrollFlags="scroll|enteralways"）：

（3） exitUntilCollapsed：值设为exitUntilCollapsed的VIEw，当这个VIEw要往上逐渐“消逝”时，会一直往上滑动，直到剩下的的高度达到它的最小高度后，再响应ScrollVIEw的内部滑动事件。 

怎么理解呢？简单解释：在ScrollVIEw往上滑动时，首先是VIEw把滑动事件“夺走”，由VIEw去执行滑动，直到滑动最小高度后，把这个滑动事件“还”回去，让ScrollVIEw内部去上滑。看个gif感受一下（图中将高度设的比较大:200dp，并将最小高度设置为?androID:attr/actionbarSize,app:layout_scrollFlags="scroll|exitUntilCollapsed"）：

（4） enteralwaysCollapsed：是enteralways的附加选项，一般跟enteralways一起使用，它是指，VIEw在往下“出现”的时候，首先是enteralways效果，当VIEw的高度达到最小高度时，VIEw就暂时不去往下滚动，直到ScrollVIEw滑动到顶部不再滑动时，VIEw再继续往下滑动，直到滑到VIEw的顶部结束。 

来个gif感受一下（图中将高度设的比较大:200dp，并将最小高度设置为?androID:attr/actionbarSize,app:layout_scrollFlags="scroll|enerAlways|enteralwaysCollapsed"）：

 

2.2 将AppbarLayout与ScrollVIEw关联起来

前面说了一直反复说“当ScrollVIEw发生滚动时”，那么怎么将AppbarLayout与ScrollVIEw关联起来呢？我们注意到，AppbarLayout与ScrollVIEw之间动作“相互依赖”，这不就是我们上一篇《CoordinateLayout的使用如此简单 》所学的内容吗？把ScrollVIEw和AppbarLayout作为CoordinateLayout的子VIEw，然后编写一个Behavior，在这个Behavior里面判断当前的 *** 作是应该让ScrollVIEw时刻保持在AppbarLayout之下（即只要改变AppbarLayout的位置就可以一起滑动），还是应该让ScrollVIEw内部滚动而不让AppbarLayout位置发生变化等等这些需求，都是可以在Behavior里面处理的。你可以去针对你的ScrollVIEw编写Behavior。然而，我们看到我们的AppbarLayout事先的功能比较复杂，如果我们自己去定义这样的效果，代码非常复杂，还要考虑很多方面，好在AndroID帮我们写好啦，我们直接用就是了，这个ScrollVIEw就是nestedScrollVIEw，请注意，它并没有继承ScrollVIEw，它继承的是FrameLayout，但是它实现的效果把它可以看成是ScrollVIEw。

把nestedScrollVIEw放入到我们的layout文件里面就可以啦~~~，很方便~

 <androID.support.v4.Widget.nestedScrollVIEw androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_vIEw_behavior"> <!--将你的内容放在这里--> </androID.support.v4.Widget.nestedScrollVIEw>

有没有注意到有个属性：app:layout_behavior="@string/appbar_scrolling_vIEw_behavior",它就是指定Behavior的，appbar_scrolling_vIEw_behavior对应的类的名称是：androID.support.design.Widget.AppbarLayout$ScrollingVIEwBehavior感兴趣的可以去分析源码。

好了，我们现在会用AppbarLayout啦~是不是发现用起来so easy!接下来我们把剩下CollapsingToolbarLayout的给”消化”掉！

3 CollapsingToolbarLayout

CollapsingToolbarLayout是用来对Toolbar进行再次包装的VIEwGroup，主要是用于实现折叠（其实就是看起来像伸缩~）的App bar效果。它需要放在AppbarLayout布局里面，并且作为AppbarLayout的直接子VIEw。CollapsingToolbarLayout主要包括几个功能（参照了官方网站上内容，略加自己的理解进行解释）：

(1) 折叠Title（Collapsing Title）：当布局内容全部显示出来时，Title是最大的，但是随着VIEw逐步移出屏幕顶部，Title变得越来越小。你可以通过调用setTitle函数来设置Title。

(2)内容纱布（Content scrim）：根据滚动的位置是否到达一个阀值，来决定是否对VIEw“盖上纱布”。可以通过setContentScrim(Drawable)来设置纱布的图片.

(3)状态栏纱布（Status bar scrim)：根据滚动位置是否到达一个阀值决定是否对状态栏“盖上纱布”，你可以通过setStatusbarScrim(Drawable)来设置纱布图片，但是只能在LolliPOP设备上面有作用。

(4)视差滚动子VIEw(Parallax scrolling children)：子VIEw可以选择在当前的布局当时是否以“视差”的方式来跟随滚动。（PS:其实就是让这个VIEw的滚动的速度比其他正常滚动的VIEw速度稍微慢一点）。将布局参数app:layout_collapseMode设为parallax

(5)将子VIEw位置固定(Pinned position children)：子VIEw可以选择是否在全局空间上固定位置，这对于Toolbar来说非常有用，因为当布局在移动时，可以将Toolbar固定位置而不受移动的影响。 将app:layout_collapseMode设为pin。 

了解这些概念后，我们来看看布局吧~

<?xml version="1.0" enCoding="utf-8"?><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.design.Widget.CollapsingToolbarLayout androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" app:expandedTitlemarginEnd="64dp" app:expandedTitlemarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageVIEw androID:ID="@+ID/main.backdrop" androID:layout_wIDth="wrap_content" androID:layout_height="300dp" androID:scaleType="centerCrop" androID:src="@drawable/material_img" app:layout_collapseMode="parallax" /> <androID.support.v7.Widget.Toolbar androID:ID="@+ID/toolbar" androID:layout_wIDth="match_parent" androID:layout_height="?androID:attr/actionbarSize" app:layout_collapseMode="pin" /> </androID.support.design.Widget.CollapsingToolbarLayout> </androID.support.design.Widget.AppbarLayout> <androID.support.v4.Widget.nestedScrollVIEw androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:paddingtop="50dp" app:layout_behavior="@string/appbar_scrolling_vIEw_behavior"> <TextVIEw androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:text="@string/my_txt" androID:textSize="20sp" /> </androID.support.v4.Widget.nestedScrollVIEw></androID.support.design.Widget.CoordinatorLayout>

上面的都看得懂吧，每个陌生的属性都是讲过的哦，忘记了的话回头看，稍微解释一下，图片被设置为有视差的滑动，Toolbar设置为固定不动，另外，CollapsingToolbarLayout会对Title进行放大和缩小，我们看看效果吧~

如果你希望拖动过程中状态栏是透明的，可以在CollapsingToolbarLayout中加 app:statusbarScrim=”@androID:color/transparent”，并且在onCreate中调用getwindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)将状态栏设置为透明就好啦~

献上源码，请笑纳：http://xiazai.jb51.net/201609/yuanma/CoordinateLayout(jb51.net).rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的玩转AppBarLayout实现更酷炫的顶部栏全部内容，希望文章能够帮你解决玩转AppBarLayout实现更酷炫的顶部栏所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。