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
CollapsingToolbarLayout折叠toolbar的使用说明相关推荐
- AppBarLayout、CollapsingToolbarLayout以及Toolbar
http://www.jianshu.com/p/d159f0176576 上一篇文章[<CoordinateLayout的使用如此简单 >]上一篇文章<CoordinateLayo ...
- CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、Toolbar混合使用经验
哎..差点学崩溃了,好几个概念都搞混了,有些明白了,赶紧记录!尽量简单. CoordinatorLayout作为顶层布局,里面的组件可以设置behavior,有相关动作时可以进行处理.这里还是主要讲一 ...
- 当CollapsingToolbarLayout与ToolBar如何设置Title居中
一.概述: CollapsingToolbarLayout是一个可以折叠的Toolbar,继承与FrameLayout,是一个增强型的FrameLayout,给它设置layout_scrollFlag ...
- android 伸缩工具栏,看,这个工具栏能伸缩折叠——Android CollapsingToolbarLayout使用介绍...
我非常喜欢Material Design里折叠工具栏的效果,bilibili Android客户端视频详情页就是采用的这种设计.这篇文章的第二部分我们就通过简单的模仿bilibili视频详情页的实现来 ...
- android新特性:使用CollapsingToolbarLayout实现折叠效果及问题解决
CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags就可以实现折叠效果! 效果展示: 引 ...
- CoordinatorLayout/AppbarLayout/CollapsingToolbarLayout的配合使用,Toolbar特效
上面这个特效就是Toolbar与CoordinatorLayout/AppbarLayout/CollapsingToolbarLayout配合后的效果:这几个View单独使用没什么效果,一般都是要互 ...
- #Android笔记# 超级足球app 开发总结(三)—— CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout实现两种折叠效果
最近利用业余时间,开发了一款基于懂球帝接口数据的足球资讯app,整体的UI也是仿照懂球帝设计的.这是一个比较综合的项目,用到了不少以前没用过的组件和api,而且产生了很多新的开发思路,有些实现方式也是 ...
- 纯享版-Android AppBarLayout + CollapsingToolbarLayout丝滑自动折叠、吸顶
使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+TabLayout+ViewPager,实现tab滑动吸顶效果简直完爆ScrollVi ...
- 【转】Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用...
Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用 分类: Android UI ...
最新文章
- [记录] 解决img的1px空白问题
- web在线聊天框滚动条自动在底部
- python【蓝桥杯vip练习题库】BASIC-14 时间转换(取余 水题)
- Android Configuration change引发的问题及解决方法
- 数学模型与数据结构的丝连
- java socket字符串_Java Socket Bug:从Socket的InputStream读取字符串
- μC/OS-Ⅱ的移植
- 互联网晚报 | 3月3日 星期三 |​ 淘特宣布上线淘特10元店、淘特100;​A股三大指数集体收涨,多只地产股涨停...
- 高等数学所有符号的写法与读法
- 对sql文件进行读取并通过JDBC批量执行
- 计算机基础文化知识板书,计算机文化基础考试
- iOS应用内付费(In-App Purchase,IAP,内购)实现要点总结
- 不要为明天忧虑(10.14)
- 免费采集器-网页数据采集器
- BIGD牛魔王UI图标设计iocn主题设计全套高清视频教程
- 全球及中国铁矿石行业供求状况与投资决策建议报告2022版
- android 6g 有必要吗,手机6G运存真的有必要吗?这篇实测告诉你
- Vue 中常见的面试题/知识点整理
- Mangos模拟器综合资源贴
- colorAccent,colorPrimary,colorPrimaryDark做什么的?