Introduction

circleIndicator4cj is a UI component library that provides various custom-styled indicators for Tabs/Swiper containers.

Demo

Circular Indicator:

Bar Indicator:

Banner Indicator:

Icon Indicator:

Tabs Indicator with Central View:

Fixed Position Tabs Indicator:

Fixed Position Tabs Indicator (Capsule Style):

Fixed Position Tabs Indicator (with Badge):

Scrollable Tabs Indicator:

Scrollable Tabs Indicator (Water Drop Slider):

Scrollable Tabs Indicator (First Column Fixed):

Titles Indicator:

Features

• Supports circular indicators
• Supports bar indicators
• Supports banner indicators
• Supports icon indicators
• Supports Tabs indicators with a central view
• Supports fixed position Tabs indicators
• Supports fixed position Tabs indicators (capsule style)
• Supports fixed position Tabs indicators (with badge)
• Supports scrollable Tabs indicators
• Supports scrollable Tabs indicators (water drop slider)
• Supports scrollable Tabs indicators (first column fixed)
• Supports titles indicators

Source Code Directory

├─AppScope
├─doc        # API文档和使用手册存放目录                   
├─entry      # 示例代码文件夹                  
├─circleIndicator    # circleIndicator 库文件夹                   
│  └─src
│      └─main
│          ├─cangjie
│          │  └─src                                     
│          │      ├─indicator      # 指示器组件
│          │      ├─model          # 指示器数据
│          │      ├─utils          # 公共类
│          └─resources
├─hvigor  # 构建工具目录
├─README.md  # circleIndicator4cj 介绍及使用说明   

Interface Description

For detailed information on main classes and function interfaces, please refer to API.

Usage Guide

1. Import via Module

   1. Clone and download the project.
   2. Copy the circleIndicator4cj module to your application project.
   3. Modify the oh-package.json5 file in your application's entry directory. Add "circleIndicator": "file:../circleIndicator" to the dependencies field.

      {  
         "name": "entry",  
         "version": "1.0.0",  
         "description": "Please describe the basic information.",  
         "main": "",  
         "author": "",  
         "license": "",  
         "dependencies": {  
             "circleIndicator": "file:../circleIndicator"  
         }  
      }  
      

   4. Modify the cjpm.toml file in your application's entry/src/main/cangjie directory. Add the following under the [dependencies] field:

      [dependencies]  
          circleIndicator = {path = "../../../../circleIndicator/src/main/cangjie", version = "1.0.0"}  
      

   5. Use import circleIndicator.* in your project to reference the circleIndicator module.

      import circleIndicator.*  
      

2. Import as a Third-Party Library

   1. Add circleIndicator4cj as a git submodule in your target project.

      > cd $PROJECT_ROOT  
      > mkdir third-party  
      > cd third-party  
      > git submodule add "https://gitcode.com/Cangjie-TPC/circleIndicator4cj.git"  
      

   2. Modify the cjpm.toml file in your application's entry/src/main/cangjie directory. Add the dependency:

      [dependencies]  
          circleIndicator = {path = "../../../../third-party/circleIndicator4cj/circleIndicator/src/main/cangjie", version = "1.0.0"}  
      

   3. Use the circleIndicator component in your project.

      import circleIndicator.*  
      

Feature Examples

Refer to entry for details.

Banner Indicator

import ohos.state_macro_manage.Entry
import ohos.state_macro_manage.Component
import ohos.state_macro_manage.State
import ohos.state_macro_manage.r

@Entry
@Component
class BannerSampleAutoPlay {
    var swiperController: SwiperController = SwiperController()
    var model: BannerModel =  BannerModel(this.swiperController)
    @State
    var index: Int32 = 0
    @State
    var count: Int32 = 4
    protected override func aboutToAppear(): Unit {
        this.model.startAutoPlay()
        this.model.setAutoPlayTime(1000)
    }
    func build() {
    Flex(FlexParams (direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center) ) {
      Swiper(this.swiperController) {
        Image(@r(app.media.p1))
          .objectFit(ImageFit.Cover)
          .width(100.percent)
          .height(440.lpx)

        Image(@r(app.media.p2))
          .objectFit(ImageFit.Cover)
          .width(100.percent)
          .height(440.lpx)

        Image(@r(app.media.p3))
          .objectFit(ImageFit.Cover)
          .width(100.percent)
          .height(440.lpx)

        Image(@r(app.media.p4))
          .objectFit(ImageFit.Cover)
          .width(100.percent)
          .height(440.lpx)
      }
      .loop(true)
      .indicator(false)
      .onTouch({event: TouchEvent =>
        this.model.notifyTouch(event, this.index)
      })
      .onChange({index: Int32 =>
        this.index = index
      })

      BannerIndicator(count: this.count, flingIndex: this.index, model: this.model )
    }
    .width(100.percent)
    .height(100.percent)
    }
}

Constraints and Limitations

The following versions have been verified:

DevEco Studio 5.0.13.200
Cangjie Support Plugin 5.0.13.200

1. The Cangjie UI Cangjie Support Plugin 5.0.3.906 does not support the Path() and Polygon components, so some effects are unavailable.
2. Triangular indicators (triangulaiIndicator) and slidable tab indicators with waterdrop sliders (SpringScrollTabsIndicator) are not supported.

Open Source License

This project is based on the Apache License 2.0. Feel free to enjoy and contribute to open source.

Contributing

We welcome PRs, Issues, and any form of contribution. Join us in making this project better!