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!!!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容