Zzhounie补充CountdownViewController接口以及更新README

CountdownView

This project is developed based on CountdownView.

Introduction

A countdown component with multiple styles and dynamic configuration, suitable for various scenarios such as countdowns and timers.

Effect Showcase

ohos_CountdownView

Installation

 ohpm install @ohos/countdownview

For more information about OpenHarmony ohpm environment configuration, please refer to How to Install OpenHarmony ohpm Package.

Constraints and Limitations

Compatibility

Verified in the following versions:

DevEco Studio: DevEco Studio 6.0.2 Release(6.0.2.642), SDK: API22(6.0.2.130);
DevEco Studio: NEXT Developer Beta1(5.0.3.122), SDK: API12(5.0.0.18);
The suffixPosition parameter is supported from API 20 and later, the suffixPosition parameter is displayed in the center by default in versions earlier than API 20;

Permissions

None.

Usage Examples

Complete Example

import { CountdownView, CountdownViewController } from '@ohos/countdownview';
import { systemDateTime } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  controller: CountdownViewController = new CountdownViewController()

  build() {
    Column() {
      // Countdown
      CountdownView({
        endTime: systemDateTime.getTime() + 1000 * 60 * 60 * 5,
        isShowDay: false,
        suffixFontColor: '#000000',
        suffixFontSize: 20,
        timeFontColor: '#FFFFFF',
        timeBgColor: '#FF5000',
        timeFontSize: 20,
        timePadding: 3,
        timeWidth: 30,
        timeHeight: 30,
        suffixHourPadding: 5,
        suffixMinutePadding: 5,
        suffixSecondPadding: 5,
        isHideTimeBackground: false
      })

      // Timer
      CountdownView({
        startTime: systemDateTime.getTime(),
        isCountDown: false,
        isShowDay: true,
        isShowHour: true,
        isShowMillisecond: false,
        isShowMinute: true,
        isShowSecond: true,
        isTimeFontWeight: false,
        timeFontSize: 24,
        timeFontColor: '#000000',
        timeHeight: 24,
        suffixFontColor: '#000000',
        suffixFontSize: 12,
        suffixDay: '天',
        suffixHour: '小时',
        suffixMinute: '分钟',
        suffixSecond: '秒',
        suffixMillisecond: '毫秒'
      })

      // controller
      CountdownView({
        controller: this.controller,
        endTime: systemDateTime.getTime() + 1000 * 60 * 60 * 24 * 8,
        isShowDay: true,
        isShowMillisecond: true,
        suffixFontColor: '#000000',
        suffixFontSize: 20,
        timeBgColor: '#FF5000',
        timeFontColor: '#ffe7c10b',
        timeFontSize: 20,
        timePadding: 3,
        timeWidth: 30,
        timeHeight: 30,
        suffixDayPadding: 5,
        suffixHourPadding: 5,
        suffixMinutePadding: 5,
        suffixSecondPadding: 5
      })

      Button('Get all time values').onClick(() => {
        const day = this.controller.getDay()
        const hour = this.controller.getHour()
        const minute = this.controller.getMinute()
        const second = this.controller.getSecond()
        const remainTime = this.controller.getRemainTime()
      })

      Button('Update').onClick(() => {
        this.controller.updateShow(1000 * 60 * 3)
      })

      Button('Reset').onClick(() => {
        this.controller.allShowZero()
      })

      Button('Pause').onClick(() => {
        this.controller.pause()
      })

      Button('Restart').onClick(() => {
        this.controller.restart()
      })
    }
    .height('100%')
    .width('100%')
  }
}

Notes

None.

Usage Instructions

1. Import the component in the corresponding file

import { CountdownView } from '@ohos/countdownview';

2. Create the component where needed

CountdownView({
  endTime: systemDateTime.getTime() + 1000 * 60 * 60 * 5,
  isShowDay: false,
  suffixFontColor: '#000000',
  suffixFontSize: 20,
  timeFontColor: '#FFFFFF',
  timeBgColor: '#FF5000',
  timeFontSize: 20,
  timePadding: 3,
  timeWidth: 30,
  timeHeight: 30,
  suffixHourPadding: 5,
  suffixMinutePadding: 5,
  suffixSecondPadding: 5,
})

API Description

Interfaces

CountdownView

Property Name	Type	Default Value	Description
startTime	number	0	Timer start time
endTime	number	0	Countdown end time
started	boolean	true	Whether to start the countdown
controller	CountdownViewController \| undefined	undefined	Time controller
isHideTimeBackground	boolean	true	Whether to hide container background color
ContainerBgColor	ResourceColor \| undefined	undefined	Container background color
ContainerBgWidth	number \| string	1000	Container background width
ContainerBgHeight	number \| string \| undefined	undefined	Container background height
timeFontColor	ResourceColor	Color.Black	Time font color
timeBgColor	ResourceColor	'#FFFFFF'	Time background color
timeBgBorderRadius	number	0	Time background border radius
timeBgBorderColor	ResourceColor	Color.Transparent	Time background border color
timeBgBorderWidth	number	0	Time background border width
timeFontSize	number \| string \| Resource	14	Time font size
timeWidth	number \| undefined \| string	undefined	Time font width
timeHeight	number \| undefined \| string	undefined	Time font height
timePadding	number \| undefined	undefined	Time font padding
suffixText	string \| Resource	":"	Separator text
suffixHour	string \| undefined	undefined	Hour separator
suffixHourPadding	number \| undefined \| Padding	undefined	Hour separator font padding
suffixMinute	string \| undefined	undefined	Minute separator
suffixMinutePadding	number \| undefined \| Padding	undefined	Minute separator font padding
suffixSecond	string \| undefined	undefined	Second separator
suffixSecondPadding	number \| undefined \| Padding	undefined	Second separator font padding
suffixMillisecond	string \| undefined	undefined	Millisecond separator
suffixMillisecondPadding	number \| undefined \| Padding	undefined	Millisecond separator font padding
suffixFontColor	ResourceColor	Color.Black	Separator color
suffixFontSize	number \| string \| Resource	14	Separator font size
suffixWidth	number \| undefined \| string	undefined	Separator font width
suffixPosition	TextVerticalAlign \| undefined	TextVerticalAlign.CENTER	Separator vertical position (BOTTOM, CENTER, TOP) Note: isSuffixTextPosition is set to true to enable adjustment,this API is supported from API 20.
suffixDay	string \| undefined	undefined	Day separator
suffixDayPadding	number \| undefined \| Padding	undefined	Day separator font padding
dividerWidth	number	0.5	Divider width
dividerColor	ResourceColor	'#30FFFFFF'	Divider color
isCountDown	boolean	true	Whether to enable countdown (true: countdown, false: timer)
isShowDay	boolean	true	Whether to show day
isShowHour	boolean	true	Whether to show hour
isShowMinute	boolean	true	Whether to show minute
isShowSecond	boolean	true	Whether to show second
isShowMillisecond	boolean	false	Whether to show millisecond
isShowDivider	boolean	false	Whether to show time divider
isShowBorder	boolean	false	Whether to show time border
isTimeFontWeight	boolean	false	Whether time font is bold
isSuffixTextFontWeight	boolean	false	Whether separator font is bold
isSuffixTextPosition	boolean	false	Whether to enable separator position adjustment
isConvertDaysToHours	boolean	false	Whether to convert days to hours
dayModifier	TextModifier \| undefined	undefined	Custom day style
daySuffixModifier	TextModifier \| undefined	undefined	Custom day separator style
hourModifier	TextModifier \| undefined	undefined	Custom hour style
hourSuffixModifier	TextModifier \| undefined	undefined	Custom hour separator style
minuteModifier	TextModifier \| undefined	undefined	Custom minute style
minuteSuffixModifier	TextModifier \| undefined	undefined	Custom minute separator style
secondModifier	TextModifier \| undefined	undefined	Custom second style
secondSuffixModifier	TextModifier \| undefined	undefined	Custom second separator style
millisecondModifier	TextModifier \| undefined	undefined	Custom millisecond style
millisecondSuffixModifier	TextModifier \| undefined	undefined	Custom millisecond separator style
timeBorderWidth	number \| undefined	undefined	Time border width
timeBorderRadius	number	0	Time border radius
intervalTime	number	1000	Interval for triggering callback, in milliseconds
onEnd	() => void	-	Countdown end callback
onInterval	(remainTime: number) => void	-	Triggers at specified interval during countdown, remainTime is the remaining milliseconds

CountdownViewController

Name	Method	Description	HarmonyOS Platform Support
getDay	getDay(): number	Get remaining days	Yes
getHour	getHour(): number	Get remaining hours	Yes
getMinute	getMinute(): number	Get remaining minutes	Yes
getSecond	getSecond(): number	Get remaining seconds	Yes
getRemainTime	getRemainTime(): number	Get remaining milliseconds	Yes
allShowZero	allShowZero(): void	Reset all to zero	Yes
updateShow	updateShow(ms: number): void	Updates the remaining milliseconds and restarts the countdown	Yes
pause	pause(): void	Pauses the current countdown	Yes
restart	restart(): void	Resumes the paused countdown	Yes

About Obfuscation

For code obfuscation, please refer to Code Obfuscation Introduction.
If you want to ensure the CountdownView library is not obfuscated during code obfuscation, you need to add the corresponding exclusion rules in the obfuscation-rules.txt file.

-keep
./oh_modules/@ohos/countdownview

Directory Structure

│-----ohos_countdownview
│        ├─library       # Component module
│        │  └─src
│        │      ├─main
│        │         └─ets          
│        │            └─components
│        │                └─CountdownView.ets     # Countdown implementation
│        ├─entry         # Sample application module
│        ├─README.md         # Installation and usage guide
│        ├─README_zh.md      # Installation and usage guide

Contributing

If you encounter any issues during usage, feel free to submit an Issue , and you are also welcome to submit a PR.

License

This project is licensed under the MIT License.