【OpenHarmony】鸿蒙 UI开发之CircleIndicator

简介

CircleIndicator是一款UI组件库，为Tabs/Swiper容器提供了多种自定义风格的指示器

效果展示：

圆形指示器:

长条指示器:

横幅指示器:

三角指示器:

图标指示器:

携带中央视图的Tabs指示器:

固定位置Tabs指示器:

固定位置Tabs指示器（胶囊风格）:

固定位置Tabs指示器（携带角标）:

可滑动Tabs指示器:

可滑动Tabs指示器(水滴滑块):

可滑动Tabs指示器(首列固定):

titles指示器:

下载安装

bash 复制代码

ohpm install @ohos/circleindicator

使用说明

提供多种Indicator，使用方法类似，以TriangularIndicator为例

初始化：实例化TabsController和对应的Model 对象, 并添加number类型成员以记录当前页下标

typescript 复制代码

private controller: TabsController = new TabsController()
@State model: TriangularModel = new TriangularModel(this.controller)
@State itemIndex: number = 0

属性设置：通过Model类对象设置UI属性来自定义所需风格，也可以添加所需的回调

typescript 复制代码

aboutToAppear() {
 this.model
   .setReverse(true)
   .setLineHeight(4)
   .setTriangleHeight(10)
   .setLineColor("#e94220")
   .setBackgroundColor("#eeeeee")
   .setChangeListener((itemIndex: number) => {
     console.info("change page to " + this.data[itemIndex])
   })
}

界面绘制：在Tabs组件旁放置Indicator组件，注意需要关闭原生的bar。并监听Tabs组件的touch事件，通知给Model类，以统一处理滑动逻辑

kotlin 复制代码

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")
}

DD一下： 鸿蒙开发各类文档，也可关注公众号<程序猿百晓生>获取。

erlang 复制代码

1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案） 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
.......

接口说明

model: TriangularModel = new TriangularModel(this.controller) // (TriangularModel可替换为所需的Model类)

设置指示器宽度 model.setWidth(width: Length,context?:common.UIAbilityContext) 注意: 1.长宽等Length型属性暂不支持百分比写法 2.当前OpenHarmony 的UI计算对无单位的float.json资源和无单位的ets变量值处理逻辑不同,前者会当做px处理,后者则为vp,未避免歧义,当传入$r('app.float.[id]')形式的参数时建议在定义资源处加上单位(px/vp/fp)
设置指示器高度 model.setHeight(height: Length,context?:common.UIAbilityContext)
设置指示器背景色 setBackgroundColor(backgroundColor: ResourceColor)
触摸事件拦截 model.notifyTouch(event: TouchEvent, index: number)
设置页面切换监听 model.setChangeListener(callback: (index: number) => void)

约束与限制

在下述版本验证通过：

DevEco Studio: NEXT Beta1-5.0.3.806, SDK: API12 Release(5.0.0.66)

HSP场景适配:

所有指示器的配置类中,使用到Length入参的接口, 后面新增了可选参数context, 在HSP场景下需要传入正确的context, 才能保证三方库后续正确获取Resource资源。

非HSP场景不影响原功能, context可以不传。

目录结构

lua 复制代码

|---- CircleIndicator
|     |---- entry  # 示例代码文件夹
|     |---- library  # CircleIndicator三方库核心文件夹
|           |----src
|                 |----main
|                       |----ets
|                             |----components
|                                   |----CircleIndicator.ets #指示器的核心实现
|                                   |----utils #工具类，辅助UI的绘制
|           |---- index.ets  # 对外接口
|     |---- README.md  # 安装使用方法
|     |---- README_zh.md  # 安装使用方法

【OpenHarmony】 鸿蒙 UI开发之CircleIndicator

简介