Circulaindicator component, which makes the indicator style more diversified

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 ：

@Component
struct 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 ！