2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > CollapsingToolbarLayout折叠toolbar的使用说明

CollapsingToolbarLayout折叠toolbar的使用说明

时间:2020-01-27 10:48:46

相关推荐

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使用方式汇总/eyishion/article/details/80282204

/baidu_31093133/article/details/52807465

/p/485223349703

/p/36e974cb3af5

TabLayout使用详解/m0_37168878/article/details/73326095 /tzhenxiong/article/details/86258459

BottomNavigationView/p/4d1a01479f52

demo下载:/download/haoxuhong/10634398

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。