CollapsingToolbarLayout折叠toolbar的使用说明

快速创建方法:(new------activity-----scrollactivity)

 

 

一般可以看到有这样几个效果：

1、背景图片渐渐消失变为主题颜色 
2、FloatingActionButton在滑到顶部的时候消失了 
3、左上角的箭头保持不动 
4、title在滑到顶部的时候自动调整位置和大小

CollapsingToolbarLayout就是这样一个把各种toolbar的效果组合起来的布局，它可以实现toolbar的折叠效果。

要实现这样的效果还需要CoordinatorLayout+AppBarLayout的配合。

关键词：

CoordinatorLayout:

 <!--在CoordinatorLayout中只要是能滑动控件的都需要设置layout_behavior-->

Coordinator : 协调。 
协调(Coordinate)其他组件, 实现联动的布局。只有最外层是这个布局，一些滚动行为的参数才能使用。

AppBarLayout：

AppBarLayout会将它内部的所有控件组合成一个toolbar，它继承自LinearLayout，布局方向为垂直方向。它可以设置当某个可滚动View的滚动手势发生变化时，其内部的子View如何动作。

CollapsingToolbarLayout：

实现可折叠toolbar的布局。通过设置一些属性实现可折叠的toolbar。

Toolbar：完美代替actionbar的新控件。

NestedScrollView

Nested：嵌套 
NestedScrollView代替了ScrollView。它符合MD设计风格，并且能更好的和其它新控件配合。它自己布局内的子View滚动的时候会自动触发CoordinatorLayout中设置的ToolBar的滑入滑出。

FloatingActionButton

浮动按钮

关键属性：

contentScrim ：

当CollapsingToolbarLayout完全折叠后的背景颜色。 
通常设置为：app:contentScrim=”?attr/colorPrimary”，这样当CollapsingToolbarLayout完全折叠后就会显示主题颜色。

expandedTitleMarginStart ：

布局张开的时候title与左边的距离，如图： 

layout_scrollFlags:

设置滚动表现： 
1、 Scroll, 表示手指向上滑动的时候,CollapsingToolbarLayout也会向上滚出屏幕并且消失，这个属性必须要有。 
2、 exitUntilCollapsed, 表示这个layout会一直滚动离开屏幕范围,直到它收折成它的最小高度.

如图：

有exitUntilCollapsed属性

最后会固定在头部

没有exitUntilCollapsed 属性：

最后会滑出去 

3、enterAlways: 一旦手指向下滑动这个view就可见。

4、enterAlwaysCollapsed: 
这个flag定义的是已经消失之后何时再次显示。假设你定义了一个最小高度（minHeight）同时enterAlways也定义了， 那么view将在到达 这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。

ImageView及Toolbar中的属性：

layout_collapseMode=”” 
1、 pin 
在view折叠的时候Toolbar仍然被固定在屏幕的顶部。

2、 parallax 
设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果, 通常和layout_collapseParallaxMultiplier(设置视差因子，值为0~1)搭配使用。

parallax：视差

toolbar设置parallax： 注意看左上角的箭头,它会滑出头布局

toolbar设置pin:注意看左上角的箭头,它会固定在头布局

我们再看看 
layout_collapseParallaxMultiplier的影响

layout_collapseParallaxMultiplier=0.8

layout_collapseParallaxMultiplier=0.3 

可以看到给layout_collapseParallaxMultiplier设置的值越大可以让滚动的效果更加明显。

FloatingActionButton的属性

app:layout_anchor=”@id/appbar” 
app:layout_anchorGravity=”end|bottom|right”

anchor： 锚

app:layout_anchor 
设置这个属性可以让FloatingActionButton以某一个控件为基准调整位置，我们这里设置这个控件就是appbar

app:layout_anchorGravity 
设置基于appbar控件的位置，我们这里设置了end|bottom|right

这样两行代码就可以将FloatingActionButton设置在appbar的右下角，并且行为会和appbar的滚动行为协作。

另外需要注意的是Toolbar的title需要在代码里设置：

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("HD TEST");
        toolbar.setNavigationIcon(R.drawable.back);
        setSupportActionBar(toolbar);

参考:

AppBarLayout中的五种ScrollFlags使用方式汇总https://blog.csdn.net/eyishion/article/details/80282204

https://blog.csdn.net/baidu_31093133/article/details/52807465

https://www.jianshu.com/p/485223349703

https://www.jianshu.com/p/36e974cb3af5

TabLayout使用详解https://blog.csdn.net/m0_37168878/article/details/73326095    https://blog.csdn.net/tzhenxiong/article/details/86258459

BottomNavigationViewhttps://www.jianshu.com/p/4d1a01479f52

 

 

demo下载:https://download.csdn.net/download/haoxuhong/10634398