当前位置：网站首页>Circulaindicator component, which makes the indicator style more diversified

Circulaindicator component, which makes the indicator style more diversified

2022-07-25 18:41:00 【51CTO】

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 ：

CircleIndicator Components , Diversify indicator styles _ Field

Bar indicator ：

CircleIndicator Components , Diversify indicator styles _ Field _02

Banner indicator ：

CircleIndicator Components , Diversify indicator styles _ Field _03

Triangle indicator ：

CircleIndicator Components , Diversify indicator styles _ui Interface _04

Icon indicator ：

CircleIndicator Components , Diversify indicator styles _ Field _05

Carrying the central view Tabs Indicator ：

CircleIndicator Components , Diversify indicator styles _ Field _06

Fixed position Tabs Indicator ：

CircleIndicator Components , Diversify indicator styles _ui Interface _07

Fixed position Tabs Indicator （ Capsule style ）:

CircleIndicator Components , Diversify indicator styles _ui Interface _08

Fixed position Tabs Indicator （ Carry a corner sign ）:

CircleIndicator Components , Diversify indicator styles _ui Interface _09

Sliding Tabs Indicator ：

CircleIndicator Components , Diversify indicator styles _git_10

Sliding Tabs Indicator ( Water drop slider )：

CircleIndicator Components , Diversify indicator styles _ui Interface _11

Sliding Tabs Indicator ( The first column is fixed )：

CircleIndicator Components , Diversify indicator styles _ui Interface _12

titles Indicator ：

CircleIndicator Components , Diversify indicator styles _ Field _13

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
       
    }
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

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)
       
    }
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

The final will be TriangularIndicator Exposed for external reference ：

       
       export default TriangularIndicator
      
1.

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 .

CircleIndicator Components , Diversify indicator styles _ Field _14

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
      
1.
2.
3.

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])
       
    })
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

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")
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

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 ！

原网站

版权声明
本文为[51CTO]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/206/202207251832065073.html