什么是CircleIndicator？CircleIndicator的源码实现
ui界面是应用程序可视化必不可少的部分。设计精致的ui界面可以使得整个可视化应用程序给用户留下深刻的印象，是改善用户界面体验最直接的方式。
arkui开发框架为开发者提供了丰富的ui原生组件，如navigation（page页面的根容器）、scrollbar（滚动条组件）、swiper（滑动容器）及tabs（通过页签进行内容视图切换的容器组件）等。其中，swiper组件和tabs组件在应用程序开发中对于指示器的使用引入较多，但是直接使用原生的swiper组件和tabs组件不适用于表现复杂的ui指示器交互变化。因此，我们针对swiper组件和tabs组件在指示器应用方向做了一个简单的封装，以ciecleindicator三方组件的形式提供应用程序依赖使用，从而提升了arkui开发框架的ui界面之指示器风格多样化的能力。
circleindicator介绍
circleindicator组件ui效果展示
圆形指示器：
长条指示器：
横幅指示器：
三角指示器：
图标指示器：
携带中央视图的tabs指示器：
固定位置tabs指示器：
固定位置tabs指示器（胶囊风格）:
固定位置tabs指示器（携带角标）:
可滑动tabs指示器：
可滑动tabs指示器(水滴滑块)：
可滑动tabs指示器(首列固定)：
titles指示器：
什么是circleindicator？
circleindicator顾名思义，它指的是圆形指示器。不过在我们openharmony三方组件中的circleindicator组件不再是狭义的圆形指示器，而是将多种表现形式的指示器汇集为一体的归一化指示器合集组件。 circleindicator的源码实现
这里我们以circleindicator组件源码中的triangularindicator.ets文件为源码解析样例对象展开分析。首先创建triangularindicator.ets文件，使用命名空间建立triangularindicator初始化模型： namespace triangularindicator { export class model {//设置指示器高度 mheight: number = 18//设置指示器宽度 mwidth: number = lpx2px(720)//设置指示器背景色 mbackgroundcolor: string//字段过多，此处进行省略//各字段set与get方法，此处只以height字段为例 public getheight(): number { return this.mheight } public setheight(height: number): model { this.mheight = height return this } //触摸事件拦截 onpagetouch: (event: touchevent, currentindicator: number) => void public notifytouch(event: touchevent, currentindex: number) { this.onpagetouch(event, currentindex) } //设置构造器 private tabscontroller: tabscontroller (tabscontroller: tabscontroller) { this.tabscontroller = tabscontroller } //页面切换监听 indexchange: (itemindex: number) => void public setchangelistener(callback: (index: number) => void): model{ this.indexchange = callback return this }}
将triangularindicator应用组件化：
@componentstruct triangularindicator {//获取triangularindicator实例 @state model: triangularindicator.model = new triangularindicator.model(null)//初始化指示器当前index @link @watch(itemindexchange) itemindex: number//设置指示器总条数 @state count: number = 0//再分别实现itemindexchange、abouttoappear、ontouch、getoffset方法，此处实现不做展示//再在build方法里面描述ui结构 build() { column() { rect({ width: this.model.mwidth, height: this.model.mlineheight }).fill(this.model.mlinecolor) polygon() .points(this.model.mreverse ? [[px2vp(this.model.mwidth) / (this.count * 2) - this.model.mtrianglewidth / 2, this.model.mlineheight - this.model.myoffset], [px2vp(this.model.mwidth) / (this.count * 2), this.model.mlineheight + this.model.mtriangleheight - this.model.myoffset], [px2vp(this.model.mwidth) / (this.count * 2) + this.model.mtrianglewidth / 2, this.model.mlineheight - this.model.myoffset]] : [[px2vp(this.model.mwidth) / (this.count * 2) - this.model.mtrianglewidth / 2, -this.model.myoffset], [px2vp(this.model.mwidth) / (this.count * 2), -this.model.mtriangleheight - this.model.myoffset], [px2vp(this.model.mwidth) / (this.count * 2) + this.model.mtrianglewidth / 2, -this.model.myoffset]]) .offset(this.model.mstartinterpolator ? { x: px2vp(this.model.mwidth) / this.count * (this.itemindex - this.model.mstartinterpolator.interpolate(math.abs(this.model.offs et / this.model.mwidth)) * math.sign(this.model.offset)), y: 0 } : { x: px2vp(this.model.mwidth) / this.count * (this.itemindex - this.model.offset / this.model.mwidth), y: 0 }) .fill(this.model.mlinecolor) .height(this.model.mheight) .width(this.model.mwidth) }.width('100%').height(this.model.mheight) .backgroundcolor(this.model.mbackgroundcolor) }} 最后将triangularindicator暴露出来供外部引用：
export default triangularindicator circleindicator实战
创建项目
如图所示，在deveco studio中新建circleindicator_test项目，项目类型选择application，语言选择ets，点击finish完成创建。
创建工程 添加依赖
成功创建项目后，接下来就是将circleindicator组件下载至项目中。请在添加依赖之前参考如何安装openharmony npm包（https://gitee.com/openharmony-tpc/docs/blob/master/openharmony_npm_usage.md）完成openharmony npm环境配置。完成openharmony npm环境配置之后，在deveco studio的底部导航栏，点击“terminal”（快捷键alt+f12）， 键入命令：npm install @ohos/circle-indicator --save并回车，此时circleindicator组件会自动下载至项目中。下载完成后工程根目录下会生成node_modules/@ohos/circleindicator目录。 编写逻辑代码
提供多种indicator，使用方法类似，以triangularindicator为例
1.初始化：实例化tabscontroller和对应的indicator.model 对象, 并添加number类型成员以记录当前页下标
private controller: tabscontroller = new tabscontroller()@state model: triangularindicator.model = new triangularindicator.model(this.controller)@state itemindex: number = 0 2.属性设置：通过model类对象设置ui属性来自定义所需风格，也可以添加所需的回调
abouttoappear() { this.model .setreverse(true) .setlineheight(4) .settriangleheight(10) .setlinecolor(#e94220) .setbackgroundcolor(#eeeeee) .setchangelistener((itemindex) => { console.info(change page to + this.data[itemindex]) })} 3.界面绘制：在tabs组件旁放置indicator组件，注意需要关闭原生的bar。并监听tabs组件的touch事件，通知给model类，以统一处理滑动逻辑
build() { column() { triangularindicator({ itemindex: $itemindex, count: this.data.length, model: this.model }) tabs({ index: this.itemindex, controller: this.controller }) { …… } .barwidth(0) .ontouch((event: touchevent) => { this.model.notifytouch(event, this.itemindex) }) }.padding({ top: 40 }) .backgroundcolor(#eeeeee)} 本期基于openharmony api8的circleindicator组件1.0.3（https://gitee.com/openharmony-sig/circleindicator/tree/1.0.3）就为大家介绍到这，欢迎大家积极参与贡献。了解更多三方组件动态，请关注三方组件资源汇总（https://gitee.com/openharmony-tpc/tpc_resource），更多优秀的组件等你来发现！
LED防水气密性测试案例
python调用HanLP
功能：浮点BCD码转换成格式化浮点数
西安交通大学人工智能与机器人研究所公开全球首个五维驾驶场景理解数据集
ios10.3最新消息：有多少人升级iOS10.3只是为了那多出来一两G内存的？
什么是CircleIndicator？CircleIndicator的源码实现
华为2018年财报：全球销售收入7212亿元人民币，同比增长了19.5%
介绍四款远距离无线通信模块
LED显示产品路线图
PHP中数组的使用方法！
《涨知识啦19》之HEMT 的电流崩塌效应的讲解
写稿机器人抢编辑饭碗，未来还有编辑吗?
智能手机触控新风潮 嵌入式首度超越外挂
KUKA清洗机器人在汽车工业中的应用
拆解特斯拉Model3逆变器
小米11超大杯曝光：电池容量会超过4600毫安 80W无线快充加持
全球物联网发展形势相当于一所学校的教学成果
苹果iPhone13国行版曝光，5G信号将更强？
三星宣布量产“黑科技”传感器ISOCELL
奥林巴斯全新3D测量激光显微镜LEXT™ OLS5100已正式面世
arkui开发框架为开发者提供了丰富的ui原生组件，如navigation（page页面的根容器）、scrollbar（滚动条组件）、swiper（滑动容器）及tabs（通过页签进行内容视图切换的容器组件）等。其中，swiper组件和tabs组件在应用程序开发中对于指示器的使用引入较多，但是直接使用原生的swiper组件和tabs组件不适用于表现复杂的ui指示器交互变化。因此，我们针对swiper组件和tabs组件在指示器应用方向做了一个简单的封装，以ciecleindicator三方组件的形式提供应用程序依赖使用，从而提升了arkui开发框架的ui界面之指示器风格多样化的能力。
circleindicator介绍
circleindicator组件ui效果展示
圆形指示器：
长条指示器：
横幅指示器：
三角指示器：
图标指示器：
携带中央视图的tabs指示器：
固定位置tabs指示器：
固定位置tabs指示器（胶囊风格）:
固定位置tabs指示器（携带角标）:
可滑动tabs指示器：
可滑动tabs指示器(水滴滑块)：
可滑动tabs指示器(首列固定)：
titles指示器：
什么是circleindicator？
circleindicator顾名思义，它指的是圆形指示器。不过在我们openharmony三方组件中的circleindicator组件不再是狭义的圆形指示器，而是将多种表现形式的指示器汇集为一体的归一化指示器合集组件。 circleindicator的源码实现
这里我们以circleindicator组件源码中的triangularindicator.ets文件为源码解析样例对象展开分析。首先创建triangularindicator.ets文件，使用命名空间建立triangularindicator初始化模型： namespace triangularindicator { export class model {//设置指示器高度 mheight: number = 18//设置指示器宽度 mwidth: number = lpx2px(720)//设置指示器背景色 mbackgroundcolor: string//字段过多，此处进行省略//各字段set与get方法，此处只以height字段为例 public getheight(): number { return this.mheight } public setheight(height: number): model { this.mheight = height return this } //触摸事件拦截 onpagetouch: (event: touchevent, currentindicator: number) => void public notifytouch(event: touchevent, currentindex: number) { this.onpagetouch(event, currentindex) } //设置构造器 private tabscontroller: tabscontroller (tabscontroller: tabscontroller) { this.tabscontroller = tabscontroller } //页面切换监听 indexchange: (itemindex: number) => void public setchangelistener(callback: (index: number) => void): model{ this.indexchange = callback return this }}
将triangularindicator应用组件化：
@componentstruct triangularindicator {//获取triangularindicator实例 @state model: triangularindicator.model = new triangularindicator.model(null)//初始化指示器当前index @link @watch(itemindexchange) itemindex: number//设置指示器总条数 @state count: number = 0//再分别实现itemindexchange、abouttoappear、ontouch、getoffset方法，此处实现不做展示//再在build方法里面描述ui结构 build() { column() { rect({ width: this.model.mwidth, height: this.model.mlineheight }).fill(this.model.mlinecolor) polygon() .points(this.model.mreverse ? [[px2vp(this.model.mwidth) / (this.count * 2) - this.model.mtrianglewidth / 2, this.model.mlineheight - this.model.myoffset], [px2vp(this.model.mwidth) / (this.count * 2), this.model.mlineheight + this.model.mtriangleheight - this.model.myoffset], [px2vp(this.model.mwidth) / (this.count * 2) + this.model.mtrianglewidth / 2, this.model.mlineheight - this.model.myoffset]] : [[px2vp(this.model.mwidth) / (this.count * 2) - this.model.mtrianglewidth / 2, -this.model.myoffset], [px2vp(this.model.mwidth) / (this.count * 2), -this.model.mtriangleheight - this.model.myoffset], [px2vp(this.model.mwidth) / (this.count * 2) + this.model.mtrianglewidth / 2, -this.model.myoffset]]) .offset(this.model.mstartinterpolator ? { x: px2vp(this.model.mwidth) / this.count * (this.itemindex - this.model.mstartinterpolator.interpolate(math.abs(this.model.offs et / this.model.mwidth)) * math.sign(this.model.offset)), y: 0 } : { x: px2vp(this.model.mwidth) / this.count * (this.itemindex - this.model.offset / this.model.mwidth), y: 0 }) .fill(this.model.mlinecolor) .height(this.model.mheight) .width(this.model.mwidth) }.width('100%').height(this.model.mheight) .backgroundcolor(this.model.mbackgroundcolor) }} 最后将triangularindicator暴露出来供外部引用：
export default triangularindicator circleindicator实战
创建项目
如图所示，在deveco studio中新建circleindicator_test项目，项目类型选择application，语言选择ets，点击finish完成创建。
创建工程 添加依赖
成功创建项目后，接下来就是将circleindicator组件下载至项目中。请在添加依赖之前参考如何安装openharmony npm包（https://gitee.com/openharmony-tpc/docs/blob/master/openharmony_npm_usage.md）完成openharmony npm环境配置。完成openharmony npm环境配置之后，在deveco studio的底部导航栏，点击“terminal”（快捷键alt+f12）， 键入命令：npm install @ohos/circle-indicator --save并回车，此时circleindicator组件会自动下载至项目中。下载完成后工程根目录下会生成node_modules/@ohos/circleindicator目录。 编写逻辑代码
提供多种indicator，使用方法类似，以triangularindicator为例
1.初始化：实例化tabscontroller和对应的indicator.model 对象, 并添加number类型成员以记录当前页下标
private controller: tabscontroller = new tabscontroller()@state model: triangularindicator.model = new triangularindicator.model(this.controller)@state itemindex: number = 0 2.属性设置：通过model类对象设置ui属性来自定义所需风格，也可以添加所需的回调
abouttoappear() { this.model .setreverse(true) .setlineheight(4) .settriangleheight(10) .setlinecolor(#e94220) .setbackgroundcolor(#eeeeee) .setchangelistener((itemindex) => { console.info(change page to + this.data[itemindex]) })} 3.界面绘制：在tabs组件旁放置indicator组件，注意需要关闭原生的bar。并监听tabs组件的touch事件，通知给model类，以统一处理滑动逻辑
build() { column() { triangularindicator({ itemindex: $itemindex, count: this.data.length, model: this.model }) tabs({ index: this.itemindex, controller: this.controller }) { …… } .barwidth(0) .ontouch((event: touchevent) => { this.model.notifytouch(event, this.itemindex) }) }.padding({ top: 40 }) .backgroundcolor(#eeeeee)} 本期基于openharmony api8的circleindicator组件1.0.3（https://gitee.com/openharmony-sig/circleindicator/tree/1.0.3）就为大家介绍到这，欢迎大家积极参与贡献。了解更多三方组件动态，请关注三方组件资源汇总（https://gitee.com/openharmony-tpc/tpc_resource），更多优秀的组件等你来发现！
LED防水气密性测试案例
python调用HanLP
功能：浮点BCD码转换成格式化浮点数
西安交通大学人工智能与机器人研究所公开全球首个五维驾驶场景理解数据集
ios10.3最新消息：有多少人升级iOS10.3只是为了那多出来一两G内存的？
什么是CircleIndicator？CircleIndicator的源码实现
华为2018年财报：全球销售收入7212亿元人民币，同比增长了19.5%
介绍四款远距离无线通信模块
LED显示产品路线图
PHP中数组的使用方法！
《涨知识啦19》之HEMT 的电流崩塌效应的讲解
写稿机器人抢编辑饭碗，未来还有编辑吗?
智能手机触控新风潮 嵌入式首度超越外挂
KUKA清洗机器人在汽车工业中的应用
拆解特斯拉Model3逆变器
小米11超大杯曝光：电池容量会超过4600毫安 80W无线快充加持
全球物联网发展形势相当于一所学校的教学成果
苹果iPhone13国行版曝光，5G信号将更强？
三星宣布量产“黑科技”传感器ISOCELL
奥林巴斯全新3D测量激光显微镜LEXT™ OLS5100已正式面世