环球速讯:CollapsingToolbarLayout的使用方法介绍
我非常喜欢Material Design里折叠工具栏的效果,bilibili Android客户端视频详情页就是采用的这种设计。这篇文章的第二部分我们就通过简单的模仿bilibili视频详情页的实现来了解下CollapsingToolbarLayout的使用。文章的第三部分介绍了CollapsingToolbarLayout与TabLayout的组合使用。
有基础的朋友可以直接跳过第一部分。
【资料图】
一、相关基础属性介绍
Android studio中有一个Activity模板叫ScrollingActivity,它实现的就是简单的可折叠工具栏,我们将此模板添加到项目中。
ScrollingActivity.gif
ScrollingActivity的布局代码如下
AppBarLayout是一种支持响应滚动手势的app bar布局(比如工具栏滚出或滚入屏幕),CollapsingToolbarLayout则是专门用来实现子布局内不同元素响应滚动细节的布局。
与AppBarLayout组合的滚动布局(Recyclerview、NestedScrollView等)需要设置app:layout_behavior=”@string/appbar_scrolling_view_behavior”(上面代码中NestedScrollView控件所设置的)。没有设置的话,AppBarLayout将不会响应滚动布局的滚动事件。
CollapsingToolbarLayout和ScrollView一起使用会有滑动bug,注意要使用NestedScrollView来替代ScrollView。
AppBarLayout的子布局有5种滚动标识(就是上面代码CollapsingToolbarLayout中配置的app:layout_scrollFlags属性):
scroll:将此布局和滚动时间关联。这个标识要设置在其他标识之前,没有这个标识则布局不会滚动且其他标识设置无效。enterAlways:任何向下滚动操作都会使此布局可见。这个标识通常被称为“快速返回”模式。enterAlwaysCollapsed:假设你定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,当滚动到顶部的时候展开完。exitUntilCollapsed:当你定义了一个minHeight,此布局将在滚动到达这个最小高度的时候折叠。snap:当一个滚动事件结束,如果视图是部分可见的,那么它将被滚动到收缩或展开。例如,如果视图只有底部25%显示,它将折叠。相反,如果它的底部75%可见,那么它将完全展开。
CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局的颜色,通过app:statusBarScrim设置折叠时状态栏的颜色。默认contentScrim是colorPrimary的色值,statusBarScrim是colorPrimaryDark的色值。这个后面会用到。
CollapsingToolbarLayout的子布局有3种折叠模式(Toolbar中设置的app:layout_collapseMode)
off:这个是默认属性,布局将正常显示,没有折叠的行为。pin:CollapsingToolbarLayout折叠后,此布局将固定在顶部。parallax:CollapsingToolbarLayout折叠时,此布局也会有视差折叠效果。
当CollapsingToolbarLayout的子布局设置了parallax模式时,我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子,值为:0~1。
FloatingActionButton这个控件通过app:layout_anchor这个设置锚定在了AppBarLayout下方。FloatingActionButton源码中有一个Behavior方法,当AppBarLayout收缩时,FloatingActionButton就会跟着做出相应变化。关于CoordinatorLayout和Behavior,我下一篇文章会和大家一起学习。
这一堆属性看着有点烦,大家可以新建一个ScrollingActivity模板去实验一下玩玩。
二、模仿bilibili客户端视频详情页
我们先对原界面分析一下。
哔哩哔哩Android客户端视频详情页.gif
界面初始,CollapsingToolbarLayout是展开状态,显示的是视频封面。我们向上滚动界面,CollapsingToolbarLayout收缩。当AppBarLayout完全折叠的时候视频av号隐藏,显示出来一个小电视图标和“立即播放”,点击则使AppBarLayout完全展开,CollapsingToolbarLayout子布局由ImageView切换为视频弹幕播放器。
额…弹幕播放器…
B站很早就开源了一个弹幕引擎,还起了个狂拽酷炫吊炸天的名字叫“烈焰弹幕使 ”(一看就是二次元程序猿们的作品→_→),源码在github上,项目名叫DanmakuFlameMaster。
来我们先看修改完成的布局。
我把colorPrimary的色值修改成了B站的“少女粉”,播放的图标是从网上找的。
#FA7199
因为我们要实现沉浸式状态栏,所以就需要先把整个activity设置成状态栏透明模式。然后在布局文件中,把CollapsingToolbarLayout里要实现沉浸式的控件设置上android:fitsSystemWindows=”true”,如果没有设置,则子布局会位于状态栏下方,未延伸至状态栏。
布局并不算复杂,接下来先实现无弹幕播放时的功能,。
我们需要监听CollapsingToolbarLayout的折叠、展开状态。唉我去,官方并没有提供现成的方法(⊙_⊙?)。
查看源码,可以看到CollapsingToolbarLayout是通过实现AppBarLayout的OnOffsetChangedListener接口,根据AppBarLayout的偏移来实现子布局和title的视差移动以及ContentScrim和StatusBarScrim的显示。那么我们也可以通过调用AppBarLayout的addOnOffsetChangedListener方法监听AppBarLayout的位移,判断CollapsingToolbarLayout的状态。
先写一个枚举定义出CollapsingToolbarLayout展开、折叠、中间,这三种状态。
private CollapsingToolbarLayoutState state; private enum CollapsingToolbarLayoutState { EXPANDED, COLLAPSED, INTERNEDIATE}
接下来对AppBarLayout进行监听,判断CollapsingToolbarLayout的状态并实现相应的逻辑。
为了让大家对状态看着更直观,我在修改状态值的时候把title一起进行了修改。
使用CollapsingToolbarLayout的时候要注意,在完成CollapsingToolbarLayout设置之后再调用Toolbar的setTitle()等方法将没有效果,我们需要改为调用CollapsingToolbarLayout的setTitle()等方法来对工具栏进行修改。(具体原因各位亲去看下CollapsingToolbarLayout源码就知道了 ( ˙-˙ ) )
AppBarLayout app_bar=(AppBarLayout)findViewById(R.id.app_bar); app_bar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { if (verticalOffset == 0) { if (state != CollapsingToolbarLayoutState.EXPANDED) { state = CollapsingToolbarLayoutState.EXPANDED;//修改状态标记为展开 collapsingToolbarLayout.setTitle("EXPANDED");//设置title为EXPANDED } } else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) { if (state != CollapsingToolbarLayoutState.COLLAPSED) { collapsingToolbarLayout.setTitle("");//设置title不显示 playButton.setVisibility(View.VISIBLE);//隐藏播放按钮 state = CollapsingToolbarLayoutState.COLLAPSED;//修改状态标记为折叠 } } else { if (state != CollapsingToolbarLayoutState.INTERNEDIATE) { if(state == CollapsingToolbarLayoutState.COLLAPSED){ playButton.setVisibility(View.GONE);//由折叠变为中间状态时隐藏播放按钮 } collapsingToolbarLayout.setTitle("INTERNEDIATE");//设置title为INTERNEDIATE state = CollapsingToolbarLayoutState.INTERNEDIATE;//修改状态标记为中间 } } } });
然后对播放按钮设置监听,点击则调用AppBarLayout的setExpanded(true)方法使工具栏展开。
CollapsingToolbarLayout状态监听演示.gif
哔哩哔哩客户端的title是固定不动的,可以调用CollapsingToolbarLayout的setTitleEnabled(false)方法实现。
视频播放时,调用 NestedScrollView的setNestedScrollingEnabled(false)方法可以使AppBarLayout不响应滚动事件。
细心的朋友可能发现了哔哩哔哩客户端为了避免视频封面图片颜色过浅影响状态栏信息的显示,加了一个渐变的不透明层。
实现渐变遮罩层很简单。先在res/drawable文件夹下新建了一个名为gradient的xml文件,其中代码如下:
shape节点中,可以通过android:shape来设置形状,默认是矩形。gradient节点中angle的值270是从上到下,0是从左到右,90是从下到上。起始颜色#33000000是20%不透明度的黑色,#00000000表示全透明。
然后在CollapsingToolbarLayout里的ImageView代码下面加上一个自定义view,背景设置为上面的渐变效果。
一般状态栏的高度大概在20dp左右,我为了让渐变效果比较自然,并且不过多影响图(mei)片(zi),把高度设置成了40dp。(状态栏能看清了,妹子脸也没黑,挺好 (๑• . •๑) )
有无渐变遮罩层的对比.jpg
我省略了弹幕播放的相关实现,接下来只要在播放按钮监听中写出封面图片的隐藏、视频和弹幕弹幕控件的显示初始化及播放逻辑,在AppBarLayout的三种状态监听中根据是否视频在播放写出其他相应逻辑就好了,感兴趣的朋友可以下载哔哩哔哩的“烈焰弹幕使”源码DanmakuFlameMaster玩玩。
B站点击追番或投硬币后会出现一个类似Snackbar的提示控件,可以通过我上一篇文章没时间解释了,快使用Snackbar!——Android Snackbar花式使用指南来实现,欢迎感兴趣的朋友去看看。
模仿哔哩哔哩视频详情页.gif
真的不是我懒得上代码了,真的…(基友:赶紧的,开黑了。 我:等等我,马上来!\(≧▽≦)/)
三.CollapsingToolbarLayout与TabLayout
CollapsingToolbarLayout与TabLayout组合使用的效果也不错。
CollapsingToolbarLayout与TabLayout.gif
来看下CollapsingToolbarLayout里的代码
TabLayout没有设置app:layout_collapseMode,在CollapsingToolbarLayout收缩时就不会消失。
CollapsingToolbarLayout收缩时的高度是Toolbar的高度,所以我们需要把Toolbar的高度增加,给TabLayout留出位置,这样收缩后TabLayout就不会和Toolbar重叠。
Toolbar的高度增加,title会相应下移。android:gravity=”top”方法使Toolbar的title位于Toolbar的上方,然后通过app:titleMarginTop调整下title距顶部高度,这样Toolbar就和原来显示的一样了。
CollapsingToolbarLayout还可以和Palette搭配使用,但是我感觉在实际使用中有些坑,因为CollapsingToolbarLayout中的图片不确定,Palette从图片中获取到的色彩很可能不是你想要的。
标签:
相关推荐:
精彩放送:
- []天天快看点丨第二章Python入门2.1环境安装 Python详情介绍
- []1.20时代魔兽各族战术总结:稳中求变
- []动态焦点:百胜中国耗资约100万美元回购1.62万股 并注销已回购股份
- []【设计函数】1010一元多项式求导(25分)设计解析
- []怎么样爬qq好友空间?怎么样爬qq好友空间的留言?
- []世界看点:【win10】HPLaserJetP1106的驱动和打印测试
- []全球信息:机房设备如何维护?机房日常维护的八点措施
- []电源转换的两种类型电路 DC/DC电路原理及特点
- []世界实时:开源社区网:FileillaClient3.5.2正式版发布
- []纽约仍然是世界上最大的超豪华房地产市场
- []【实验】电容式点动型触摸开关模块控制led灯
- []《使命召唤16》及战区迎来万圣节限时活动 迅游加速器助力流畅体验
- []当前关注:全国建设工程造价员证怎么查询?全国建设工程造价员证查询步骤
- []世界快讯:短裙的英语单词是什么?短裙的英语单词有哪些?
- []电脑闪屏无法打开软件怎么办?教你如何修复
- []郑爽自曝30岁前有冻卵打算 前男友被7场起诉 4个月官司缠身
- []视讯!DNF双天赋后洗点问题有哪些?DNF双天赋洗点问题解答
- []御龙在天绿装怎么合成紫装?御龙在天怎么合紫装?
- []当前速讯:协和电子:截至2023年2月28日,公司的股东数是15255人
- []为什么波波维奇击败湖人之后 依旧不选择巴特尔?
- []世界热推荐:珠海冠宇:公司已进入三星的供应链体系
- []世界快资讯丨五金制品包括哪些产品?五金产品详情介绍
- []河南师范大学和商丘师范学院哪个好?985还是211?
- []动物冷知识讲解:什么动物吃仙人掌都不觉得扎嘴?
- []新动态:伊利股份:公司每年会基于市场调研和消费者洞察,推出满足消费者广泛、多样化和个性化需求的新品
- []前沿热点:诸暨越都投资底价3000万元转让越都置业10%股权 绿城持股另90%
- []世界讯息:遥望洞庭山水色的下一句是什么?遥望洞庭山水翠还是色
- []全球关注:大块泡沫能作为逃生工具吗?蚂蚁庄园最新答案
- []【世界新视野】大专高考录取结果什么时候出来?地区分数线公布时间?
- []微资讯!仙剑5前传糖豆有什么用?语音包怎么下载?
- []焦点快播:宽怎么组词语?汉字宽的意思有哪些?
- []院校预录是什么意思?显示院校预录是不是被录取了?
- []星光大道2015年总决赛冠军是谁?是王紫凝吗?
- []穿越火线北区灵异事件 cf北方大区闹鬼是怎么回事?
- []焦点热议:慰藉的近义词是什么词?慰藉的近义词介绍
- []简讯:蒂芙尼戒指一般在什么价位?怎么选才划算?
- []电介质和导体的区别是什么?电介质和导体的区别介绍
- []【天天速看料】python中rb是什么意思?Python文件读写的几种模式
- []环球观速讯丨基于jsp+servlet+pojo+mysql的贴吧系统 java项目源码介绍
- []【世界热闻】手机系统怎么升级?刷机有风险吗?
- []天天时讯:excel下拉菜单怎么做?excel系列软件最新版本下载
- []当前头条:内地直飞巴厘岛航班复航,巴厘岛旅游局局长接机
- []进位标志位中的数值被丢弃?汇编SHL指令和SHR指令
- []快播:excel高级筛选怎么用?excel高级的用法步骤
- []Word中的表格如何调整?Word表格调整技巧
- []天天观速讯丨nvidiaquadro和geforce有什么区别?两者区别介绍
- []天天热点评!一个手机号可以注册两个微信账号吗?注册流程是什么?
- []【环球时快讯】虚拟机怎么安装?vmware虚拟机安装教程
- []环球讯息:hexagon净水器好不好?hexagon净水器产品优点介绍
- []word中如何设置文本的首行缩进?word文本首行缩进设置方法
- []为什么用Thread.Sleep函数把线程挂起时间?关于Thread.sleep的两个问题
- []范氏之间的关系基础知识(一)
- []穿越火线:nsiserror怎么解决?重新下载再安装
- []信息:3x3的CCM矩阵如何标定?CCM矩阵色彩校正方法
- []如何查询每个岗位的中位数位置?如何分析中位数?
- []天天要闻:什么是领域?输入流和输出流应该作为设计对象看待吗?
- []计算机语言元素周期表——3D版化学元素列表
- []Statement、PreparedStatement、CallableStatement有什么区别?三者区别的详情介绍
- []社交是什么?看懂这6条社交潜规则
- []快报:prisma怎么用?Prisma有没电脑版?
- []华为荣耀4C什么配置参数?华为荣耀4C标配有什么?
- []全球今热点:【easychm】CHM文档制作工具 制作CHM文档步骤
- []世界视讯!亚航宣布全面重返中国,预计Q4将超过疫情前水平
- []世界观焦点:电脑功耗等于电源瓦数吗?菜鸟进阶篇之电脑功耗测算方法
- []环球最资讯丨usb3.0不能用怎么办?usb3.0不能使用的解决办法
- []天天热点!ps图层蒙版怎么使用?ps图层蒙版使用步骤
- []全球今头条!java面试题有哪些?非技术性问题和HR问题汇总
- []全球聚焦:百度快照是什么?百度快照的相关内容介绍
- []【世界播资讯】读书须用意一字值千金的意思是什么
- []白细胞偏高是怎么回事呢_白细胞偏高是怎么回事
- []世界热点!园林绿化工程师证_园林绿化工程师
- []世界热点评!特斯拉准备改造Model Y,除了外观内饰外,续航里程有望小幅度提升
- []《关注函》回复延迟致*ST计通迟迟未复牌 律师:退市不影响投资者索赔
- []全球信息:川藏线上,举着求“RB”的女人是干嘛的?有经验的司机说出了实话
- []世界看点:autofire啥意思_autofire
- []当前关注:铜牛信息:公司与字节跳动关联企业有业务合作
- []全球资讯:天保基建拟为天津2家子公司1亿元贷款提供担保
- []梭哈光伏!上机数控用过期数据预测未来,58亿投建5万吨硅料!
- []【世界独家】一大二公是什么_一大二公是什么意思
- []天天热资讯!攻占美日,中国电池将磷酸铁锂捧上电车顶流
- []环球即时看!两会快讯 | 工信部部长:我国5G基站总数今年有望突破290万个
- []天天速递!全面上云宣告收官!"零售之王"迈入全面数字化新阶段,复盘"超级工程"…
- []快消息!两会快讯 |?生态环境部:推动经济社会绿色低碳转型从源头上根本改善
- []开源策略:看好中小盘成长制造业方向(附3月十大金股)
- []为什么花呗提前还款是大忌 提前还花呗为什么是大忌
- []【环球新视野】如何查询贷款合同编号,有以下四种方法
- []天风策略:当前位置如何度量A股的空间?其中的变数又是什么?
- []当前热点-戴维斯双杀是什么意思
- []世界快看点丨三个月定期存款利率2020
- []天天速递!干性皮肤护肤品排行榜10强 适合特干皮肤的护肤品推荐
- []全球速讯:国债逆回购手续费 国债逆回购的手续费是多少
- []今日关注:eft基金是什么意思
- []cips概念股票龙头,优质龙头股票盘点
- []焦点快看:政府工作报告中这些内容涉及房地产,解读来了
- []微速讯:2020年一年期存款利率
- []我不是药神票房 我不是药神电影票房
- []热头条丨权益乘数计算公式 权益乘数要怎么算
- []全球热议:日利息率0.05%是多少
- []环球头条:中国tmt行业龙头
- []2022全国首套房贷款利率一览表,各大行房贷利率一览
- 阿里商旅与华住实现会员互通;《全球展览业晴雨表》显示今年前景乐观 | 一周商旅动态
- 世界信息:创业板股票涨跌幅限制是多少
- 51高速公路免费几天,5天
- 世界速递!2020年房贷利率
- 外资机构继续看好A股!企业盈利改善推动市场上行 更多机构以特殊投资配置
- 环球实时:7个关键字带你看2023年《政府工作报告》
- 股票xd表示什么意思
- 国产最强2.0T发动机+全球首搭ESP10.0,影豹2.0T真性能猛兽?
- 世界实时:什么多么什么什么多么什么好像什么仿写句子_什么多么什么
- 今亮点!怎么查农村信用社卡余额
- 公积金怎么预约提取公积金
- 2022创业贷款政策,共有以下三条
- 拉卡拉手续费怎么算
- 碳中和概念龙头股 碳中和板块龙头股
- 2023第六届世界肚皮舞节 暨新加坡“非凡女神”选举大赛火热报名中
- 今日热门!蛆虫是怎么产生的
- 【报资讯】如何查询自己开户的证券公司 有以下三种方法查询
- 焦点关注:发行费用和交易费用的区别 发行费用有哪些
- 钢铁股票龙头股有哪些 钢铁股票龙头
- 每日短讯:沪深港通扩容五大看点:市值门槛调至50亿 纳入在港上市外国公司
- 乐看A股未来表现 明星私募基金经理齐发声
- 世界信息:基金下折是什么意思
- 分级b基金是什么意思
- 新消息丨被逼无奈?过会久等难获批文 8家IPO“苦主”从头再战 注册制下上市梦能圆?
- 每日速讯:中国银行贵金属交易时间
- a股,b股,h股,n股的区别
- 全球要闻:银行汇款流程
- 焦点精选!中韩自贸区概念股票龙头一览表,2023中韩自贸区相关上市公司有哪些
- 当前视讯!理财产品排行,十大产品名称一览
- 讯息:中秋节股市休市几天2022,三天
- 环球焦点!北交所概念股票龙头一览表,2023北交所概念相关上市公司有哪些
- 农村合作医疗网上缴费怎么交2021,分为以下四步
- 环球视点!星牌台球桌价格一般多少钱_星牌台球桌价格
- 沪农申购是什么板块
- 2022年国庆节期间股市休市安排,共休市9天
- 微速讯:余额宝连续6天没有收益,有以下三种原因
- 元旦节股市放假几天,三天
- 目前活期存款利率是多少,各银行活期利率一览
- 【新视野】a股b股h股区别
- 全球微头条丨端午股市休市吗,是休市的
- 投资收益率多少合适,分以下五种情况
- 【世界热闻】华住出售雅高酒店股票;年轻人正在抛弃传统年会 | 一周速览
- 高端制造业有哪些股票龙头 高端制造行业有哪些龙头股
- ipo和上市有什么区别 定义不同
- 当前热点-安徽国资改革概念股票龙头一览表,2023安徽国资改革相关上市公司有哪些
- 【当前热闻】a股端午节节假日休市时间,2022年6月3日到6月5日
- 视讯!矿泉水瓶是什么材料
- 世界今热点:如何使用支付宝 支付宝使用方法
- 环球最新:军工股有哪些
- 世界热点评!股票底部放量下跌,意味着什么
- 【全球播资讯】swift code是什么意思
- 金价为何猛涨 金价猛涨的原因是什么
- 全球焦点!盐湖提锂概念股票龙头一览表,2023盐湖提锂相关上市公司有哪些
- 兴业银行理财产品 兴业银行热门理财产品
- 当前热门:按揭贷款计算 按揭贷款怎么计算
- 快报:股票开市时间到几点
- 支付宝提现限额是多少
- 天天讯息:什么是余额宝
- 稀土概念股票有哪些,十大龙头股一览
- 微速讯:经济危机产生的原因,有以下四种原因
- 买混动当真首选比亚迪?哈弗二代大狗了解一下?
- 工行信用卡年费
- 外汇怎么炒,四步即可炒外汇
- 世界观速讯丨农业股票有哪些龙头股份
- 全球头条:连花清瘟胶囊龙头股,相关股票一览
- 世界球精选!股票开户流程网上开户,有以下9个步骤
- 存款利率表2022最新版,各银行存款利率表一览表
- 当前速读:集合竞价时间规则
- 环球热头条丨国航白金卡标准
- 今日热门!福建各市gdp排名,2021年福建各市GDP一览
- 全球热头条丨中字头股票有哪些 中字头股票一览表
- 前沿资讯!今年银行存款利率是多少2022,各大行存款利率一览
- 银行活期利率表2023最新利率,国内各大银行活期利率大全(最完整版)
- 环球时讯:港股开户的条件有哪些
- 即时焦点:一周拿下近200亿合同,上机数控强势回归
- 环球今日讯!股指期货一手多少钱 股指期货买一手要多少钱
- 成熟稳重文案_成熟稳重
- 【播资讯】美国能源部助推10家新型储能企业“冒尖”!
- 当前快播:开网店需要多少钱 开网店大概需要多少钱
- 天天信息:爱旭股份:首期6.5GW ABC电池项目已投产 预计第二季度达到满产状态
- 中国银行的标志
- 城市商业银行包括哪些
- 热消息:工商银行贷款利率 工商银行的贷款利率
- 观焦点:一分利是百分之多少
- 焦点精选!什么是PE投资
- 热头条丨农业银行年利率是多少2022,存贷款利率一览
- 响应共富分配8万套安置房?北京市住建委辟谣
- 天天头条:一吨黄金多少钱 一吨黄金是多少钱人民币
- 【全球时快讯】一年期定期存款利率 银行定期一年存款利率是多少
- 世界最新:全球人均gdp排行榜2022,各国人均gdp排名一览
- 天天新资讯:财政金融动员的主要措施包括
- 世界时讯:招商银行星期六上班吗 招商银行星期六上班时间
- 看点:吉宏股份:公司跨境电商业务属于数字经济范畴,是数字经济中的一种重要产业形态
- 全球欠中国钱一览表,美国排在第一名
- 各大银行定期存款利率排行表2022,各行存款利率一览
- 每日观察!全面注册制是什么意思
- 每日时讯!全国gdp省份排名2022最新排名,34省gdp一览
- 环球热门:2022年房贷利率最新消息,各行房贷利率一览
- 欧普照明助力华为方舟壹号实验室建设,共同开启全屋智能新篇章
- 【全球快播报】高铁退票扣多少钱的手续费 高铁退票需要收多少手续费