鸿蒙开源第三方件组件——轮播组件Banner 原创 精华
前言
基于安卓平台的轮播组件Banner(https://github.com/youth5201314/banner/tree/release-1.4.10),实现了鸿蒙化迁移和重构,代码已经开源到(https://gitee.com/isrc_ohos/banner_ohos),目前已经获得了很多人的Star和Fork,欢迎各位下载使用并提出宝贵意见!
背景
Banner一般位于APP的顶部或中部,通过循环播放和手动滑动的方式对一些图片进行展示,其底部通常放置一行圆圈状的指示器,表示当前正在展示的图片的页码。Banner组件播放图片美观且节约页面,目前已经被广泛应用于各大APP。
功能展示
基于鸿蒙系统,通过自定义控件属性的方式实现了Banner组件,该组件支持图片的循环播放、手动滑动两种功能。
1、循环播放
当页面没有任何操作时,Banner内部的图片按照提前设定时间间隔和顺序自动轮播,这种方式称为循环播放,效果如图一所示。
图一 循环播放功能展示
2、手动滑动
手指在组件处滑动时,也可以实现图片的播放,此时图片的播放顺序由用户的滑动方向决定,播放时间间隔由用户的滑动速度决定。
图二 手动滑动功能展示
Sample解析
图三 Banner组件的标题和指示器
Sample中选取了五张图片进行轮播展示,每一张图片下方都添加了页码指示器和图片标题。页码指示器用于显示当前正在播放的图片的页码,标题用于显示图片的关键信息,效果如图三所示。Sample中给图片增加了点击事件,当用户对页面内容感兴趣时,可通过手指进行点击,图片会链接到另外的展示界面,效果如图四所示。
图四 图片支持点击事件的效果
下面对Sample部分的代码进行具体解释:
1、导入Banner类、OnBannerListener类
2、实例化对象
3、设置Banner的Layout参数
4、设置组件的监听
5、准备组件需播放的图片
6、准备图片的标题
7、设置组件参数
在此步骤中,图片模式、图片轮播的时间间隔、组件风格、标题大小四个属性可以不设置,当用户不设置时,属性采用默认值。
8、将Banner添加到Layout中
Library解析
1、功能实现
(1)循环播放
图五 循环播放原理图
如图五所示,图片(1)到(5)是我们载入组件的5张原图,复制图片(1)放在(6)的位置,第(1)张和第(6)张图片相同。当组件循环播放时,会依次播放图片(1)到(5),并为每张图片设置停留时间,当播放到图片(6)时,不设停留时间,直接跳转到图片(1)进行播放,由于图片(1)和(6)相同,此时用户肉眼看不出图片的转换。同样,我们需要复制图片(5)放在(0)的位置,适用于手动滑动模式下,用户向左滑动图片的情况。
采用上述循环播放原理,图片(5)和(1)的切换效果如图六(b)所示,为滑动播放效果。若不采用上述原理,播放完图片(5)后直接跳转到图片(1)进行播放,会导致两张图片出现如图六(a)所示的闪现播放的效果,与前四张图片的切换效果不一致,所以此处需要使用图五所示的循环播放原理。
(a)图片闪现播放效果
b)图片滑动播放效果
图六 图片闪现播放和滑动播放效果对比
循环播放原理代码分析如下:
2、 指示器的构建
鸿蒙系统Banner组件的指示器可以5个种类,分别是:圆形指示器、数字指示器、数字指示器和标题、圆形指示器和标题(垂直显示)、圆形指示器和标题(水平显示)。此处以圆形指示器为例,讲解指示器的构建方法。
(1)指示器初始化
当组件开始运行时,第一张图片所在的圆点为黑色选中状态,其余的圆点为红色未选中状态。
(2) 指示器更新
当图片轮播到下一张时,指示器状态更新,新播放的图片所在的圆点被置为黑色选中状态,其余的圆点为红色未选中状态。
2、 移植方法
鸿蒙Banner组件在移植的时候,大部分采用API替换的方式,将原来安卓的API替换为鸿蒙的API,例如使用鸿蒙的PageSlider类替换安卓的ViewPage类。
项目贡献人
陈丛笑 郑森文 朱伟 陈美汝 吕泽
看文章识楼主,好文学习一波
支持雪糕,支持开源的鸿蒙Banner组件。
哈哈 ,谢谢鲜橙的支持~~
共同学习,共同进步~~
小雪糕改名字了哦😆
哈哈哈 实名制是为了工作,我还是原来的小雪糕~
👍👍👍
感谢张老师支持~
在移植ViewPagerIndicator第三方库时候,但报错没有日志。是否有空出一个这个的移植项目学习下,
地址
我们当前的移植项目都是有规划的,短时间内可能不会做规划外的移植项目。不过如果后续社区整体的需求很强的话可能会考虑针对社区需求做些对应的项目。
没有报错日志的话可以从头开始溯源,看是哪出了问题,可以用Hilog的办法定位。
好的,明白! 现在效果基本出来了就是view.draw(canvas)方法没有,缺少指示器下面的横线
学习学习啦。
你现在在哪里?
谢谢支持!
北京 哈哈哈哈
加载不了网络图片 啊
该组件暂未提供加载网络图片进行显示的功能,您可以在该组件上进行修改自定义。
我还是不懂怎么用,有谁能教教我.
学习了学习了~~~