Circulaindicator component, which makes the indicator style more diversified

CircleIndicator Components , Diversify indicator styles

UI Interface is an essential part of application visualization . Exquisitely designed UI The interface can make the whole visual application leave a deep impression on users , It is the most direct way to improve the user interface experience .

ArkUI The development framework provides developers with rich UI Native component , Such as Navigation（Page The root container of the page ）、ScrollBar（ Scroll bar assembly ）、Swiper（ Developers just need to focus on the implementation logic ） And Tabs（ Container components that switch content views through tabs ） etc. . among ,Swiper Components and Tabs Components are introduced into the use of indicators in application development , But directly use native Swiper Components and Tabs Components are not suitable for complex UI Indicator interaction changes . therefore , We aim at Swiper Components and Tabs The component is simply encapsulated in the application direction of the indicator , With CiecleIndicator Third party components are provided in the form of application dependencies , So it improves ArkUI Development framework UI The ability of the indicator style of the interface to diversify .

CircleIndicator Introduce

CircleIndicator Components UI Effect display

Circular indicator ：

Bar indicator ：

Banner indicator ：

Triangle indicator ：

Icon indicator ：

Carrying the central view Tabs Indicator ：

Fixed position Tabs Indicator ：

Fixed position Tabs Indicator （ Capsule style ）:

Fixed position Tabs Indicator （ Carry a corner sign ）:

Sliding Tabs Indicator ：

Sliding Tabs Indicator ( Water drop slider )：

Sliding Tabs Indicator ( The first column is fixed )：

titles Indicator ：

What is? CircleIndicator？

CircleIndicator seeing the name of a thing one thinks of its function , It refers to the circular indicator . But in us OpenHarmony In the tripartite component CircleIndicator The component is no longer a narrow circular indicator , It is a normalized indicator assembly that integrates indicators in various forms .

CircleIndicator Source code implementation

Here we have CircleIndicator In the component source code TriangularIndicator.ets The file expands the analysis for the sample object of source code analysis . First create TriangularIndicator.ets file , Use namespaces to create TriangularIndicator Initialize model ：

 

namespace TriangularIndicator { export class Model {// Set indicator height  mHeight: number = 18// Set indicator width  mWidth: number = lpx2px(720)// Set the indicator background color  mBackgroundColor: string// Too many fields , Omit here // Fields set And get Method , Here only height Field as an example  public getHeight(): number { return this.mHeight } public setHeight(height: number): Model { this.mHeight = height return this } // Touch event interception  onPageTouch: (event: TouchEvent, currentIndicator: number) => void public notifyTouch(event: TouchEvent, currentIndex: number) { this.onPageTouch(event, currentIndex) } // Set constructor  private tabsController: TabsController (tabsController: TabsController) { this.tabsController = tabsController } // Page switching monitoring  indexChange: (itemIndex: number) => void public setChangeListener(callback: (index: number) => void): Model{ this.indexChange = callback return this }}

 

take TriangularIndicator Application componentization ：

 

@Componentstruct TriangularIndicator {// obtain TriangularIndicator example  @State model: TriangularIndicator.Model = new TriangularIndicator.Model(null)// Initialize the indicator current index @Link @Watch("itemIndexChange") itemIndex: number// Set the total number of indicators  @State count: number = 0// And then realize itemIndexChange、aboutToAppear、onTouch、getOffset Method , The implementation here does not show // And then build The method describes UI structure  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) }}

 

The final will be TriangularIndicator Exposed for external reference ：

 

export default TriangularIndicator

 

CircleIndicator actual combat

Create project

As shown in the figure , stay DevEco Studio New China CircleIndicator_Test project , Project type selection Application, Language choice eTS, Click on Finish Finish creating .

Create a project

Add dependency

After successfully creating the project , The next step is to CircleIndicator Download components into the project . Please refer to how to install before adding dependencies OpenHarmony npm package （https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md） complete OpenHarmony npm Environment configuration . complete OpenHarmony npm After environment configuration , stay DevEco Studio Bottom navigation bar , Click on “Terminal”（ Shortcut key Alt+F12）, Enter command ：npm install @ohos/circle-indicator --save And return , here CircleIndicator Components are automatically downloaded into the project . After downloading, the project root directory will generate node_modules/@ohos/CircleIndicator Catalog .

Write logic code

Offer a variety of Indicator, The method of use is similar to , With TriangularIndicator For example

1. initialization ： Instantiation TabsController And corresponding Indicator.Model object , And add 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 settings ： adopt Model Class object settings UI Attributes define the desired style , You can also add the required callback

 

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 ： stay Tabs Next to the component Indicator Components , Note that you need to turn off native bar. And monitor Tabs Component's touch event , Notified to Model class , To deal with sliding logic in a unified way

 

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

 

This period is based on OpenHarmony API8 Of CircleIndicator Components 1.0.3（https://gitee.com/openharmony-sig/CircleIndicator/tree/1.0.3） Let me introduce you to this , Welcome to participate and contribute . Learn more about the dynamics of third-party components , Please pay attention to the summary of third-party component resources （https://gitee.com/openharmony-tpc/tpc_resource）, More excellent components are waiting for you to find ！