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），更多优秀的组件等你来发现！
评论