The CircleIndicator component makes the indicator style more diverse

UI interface is an essential part of application visualization. A well-designed UI interface can make the entire visual application impress the user and is the most direct way to improve the user interface experience.
ArkUI development framework provides developers with a wealth of native UI components, such as Navigation (the root container of the Page page), ScrollBar (scroll bar component), Swiper (sliding container) and Tabs (container components that switch content views through tabs) Wait. Among them, the Swiper component and the Tabs component introduce more indicators in application development, but the direct use of the native Swiper component and the Tabs component is not suitable for expressing complex UI indicator interaction changes. Therefore, we made a simple encapsulation in the indicator application direction for the Swiper component and the Tabs component, and provided application dependencies in the form of CiecleIndicator three-party components, thus improving the ability of the indicator style of the UI interface of the ArkUI development framework to diversify .

Description of CircleIndicator

The CircleIndicator component UI effect shows a circular indicator:

Bar indicator:

Banner Indicator:

Triangle indicator:

Icon indicator:

Tabs indicator with central view:

Fixed position Tabs indicator:

Fixed position Tabs indicator (capsule style)

Fixed position Tabs indicator (with corner markers):

Swipeable Tabs Indicator:

Swipeable Tabs Indicator (Water Drop Slider):

Swipeable Tabs indicator (first column fixed):

titles indicator:

What is CircleIndicator?
CircleIndicator, as the name suggests, refers to a circular indicator. However, the CircleIndicator component in our OpenHarmony tripartite component is no longer a narrow circular indicator, but a normalized indicator collection component that integrates indicators of various forms into one.
The source code implementation of CircleIndicator Here we use the TriangularIndicator.ets file in the source code of the CircleIndicator component as the source code parsing sample object to analyze. First create the TriangularIndicator.ets file and use the namespace to create the TriangularIndicator initialization model:

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

Componentize the TriangularIndicator application:

 @Component
struct 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)
    }
}

Finally, the TriangularIndicator is exposed for external reference:

 export default TriangularIndicator

CircleIndicator in action

 创建项目

As shown in the figure, create a new CircleIndicator_Test project in DevEco Studio, select Application for the project type, eTS for the language, and click Finish to complete the creation.

Create a project and add dependencies After the project is successfully created, the next step is to download the CircleIndicator component to the project. Please refer to how to install OpenHarmony npm package ( https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md ) to complete OpenHarmony npm environment configuration before adding dependencies. After completing the OpenHarmony npm environment configuration, in the bottom navigation bar of DevEco Studio, click "Terminal" (shortcut Alt+F12), type the command: npm install @ohos/circle-indicator --save and press Enter, then the CircleIndicator component will be Automatically downloaded to the project. After the download is complete, the node_modules/@ohos/CircleIndicator directory will be generated in the project root directory.
Write logic code to provide a variety of indicators, the usage methods are similar, take TriangularIndicator as an example

1. Initialization: Instantiate the TabsController and the corresponding Indicator.Model object, and add a number type member to record the current page subscript

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

2. Property setting: Set UI properties through the Model class object to customize the desired style, or add the required callbacks

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

3. Interface drawing: Place the Indicator component next to the Tabs component, and note that the native bar needs to be turned off. And listen to the touch event of the Tabs component and notify the Model class to uniformly handle the sliding logic

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

In this issue, the CircleIndicator component 1.0.3 ( https://gitee.com/openharmony-sig/CircleIndicator/tree/1.0.3 ) based on OpenHarmony API8 will be introduced to you, and you are welcome to actively participate and contribute. To learn more about the three-party component dynamics, please pay attention to the three-party component resource summary ( https://gitee.com/openharmony-tpc/tpc_resource ), more excellent components are waiting for you to discover!