FlycoRoundView

Introduction

This component library provides a set of UI components with rounded corner effects and press interactions, supporting highly customizable style settings. All components support visual feedback effects triggered by long-press gestures.

How to Install

ohpm install @ohos/flyroundview

How to Use

Usage Example

RoundTextView - Rounded corner text display component

RoundTextView({
  isPress: this.isPress,
  _backgroundColor: '#ffffff',
  _backgroundPressColor: '#434343',
  _borderRadius: 10,
  _border: { width: 1, color: '#000000' },
  _borderPress: { width: 2, color: '#f5222d' },
  _isRadiusHalfHeight: false,
  _isWidthHeightEqual: false,
  _textPressColor: '#d48806',
  _width: 200,
  _height: 100,
  _textColor: '#000000'
}) {
  Text('Hello World')
    .fontColor(this.isPress ? this.textPressColor : this.textColor)
}

RoundLinearLayout - Rounded corner linear layout component

RoundLinearLayout({
  isPress: this.isPress,
  _backgroundColor: '#ffffff',
  _backgroundPressColor: '#434343',
  _borderRadius: 10,
  _border: { width: 1, color: '#000000' },
  _borderPress: { width: 2, color: '#f5222d' },
  _isRadiusHalfHeight: false,
  _isWidthHeightEqual: false,
  _width: 300,
  _height: 200,
  _direction: FlexDirection.Column
}) {
  // Child component content
  Text('Item 1')
  Text('Item 2')
}

RoundFrameLayout - Rounded corner stack layout component

RoundFrameLayout({
  isPress: this.isPress,
  _backgroundColor: '#ffffff',
  _backgroundPressColor: '#434343',
  _borderRadius: 10,
  _border: { width: 1, color: '#000000' },
  _borderPress: { width: 2, color: '#f5222d' },
  _isRadiusHalfHeight: false,
  _isWidthHeightEqual: false,
  _width: 300,
  _height: 200
}) {
  InView() {
    // Bottom layer component
    Text('Background Content')
  }
  OutView() {
    // Top layer component
    Text('Foreground Content')
  }
}

RoundRelativeLayout - Rounded corner relative layout component

RoundRelativeLayout({
  isPress: this.isPress,
  _backgroundColor: '#ffffff',
  _backgroundPressColor: '#434343',
  _borderRadius: 10,
  _border: { width: 1, color: '#000000' },
  _borderPress: { width: 2, color: '#f5222d' },
  _isRadiusHalfHeight: false,
  _isWidthHeightEqual: false,
  _width: 300,
  _height: 200,
  relativeType: RelativeType.Parent
}) {
  view() {
  // Child component content
    Text('Relative Content')
  }
}

RoundViewDelegate - Unified configuration delegate class

// Create RoundViewDelegate instance
private roundViewDelegate: RoundViewDelegate = new RoundViewDelegate();

// Configure properties
aboutToAppear(): void {
  this.roundViewDelegate.setBackgroundColor('#ffffff');
  this.roundViewDelegate.setBackgroundPressColor('#434343');
  this.roundViewDelegate.setBorderRadius(10);
  this.roundViewDelegate.setBorder({ width: 1, color: '#000000' });
  this.roundViewDelegate.setBorderPress({ width: 2, color: '#f5222d' });
  this.roundViewDelegate.setIsRadiusHalfHeight(false);
  this.roundViewDelegate.setIsWidthHeightEqual(false);
  this.roundViewDelegate.setTextPressColor('#d48806'); // Only effective for RoundTextView
}

// Use in component
RoundTextView({
  isPress: this.isPress,
  roundViewDelegate: this.roundViewDelegate
}) {
  // Child component content
}

Available APIs

RoundTextView

Rounded corner text display component that supports custom text content and styles.

Properties

Property Name	Type	Default Value	Description
`_backgroundColor`	`Color \| string`	`Color.White`	Background color
`_backgroundPressColor`	`Color \| string`	`Color.Gray`	Background color when pressed
`_borderRadius`	`Length \| BorderRadiuses`	`0`	Border radius
`_border`	`BorderOptions`	`{}`	Border style
`_borderPress`	`BorderOptions`	`{}`	Border style when pressed
`_isRadiusHalfHeight`	`boolean`	`false`	Whether the border radius is half the height
`_isWidthHeightEqual`	`boolean`	`false`	Whether width and height are equal
`_textPressColor`	`Color \| string`	`Color.Gray`	Text color when pressed
`_width`	`number \| string`	`-`	Width
`_height`	`number \| string`	`-`	Height
`_textColor`	`Color \| string`	`Color.Black`	Text color
`roundViewDelegate`	`RoundViewDelegate \| undefined`	`undefined`	Unified configuration delegate object
`isPress`	`boolean` (Link)	`-`	Whether it is in pressed state

RoundLinearLayout

Rounded corner linear layout component that supports linear arrangement of child elements (horizontal or vertical).

Properties

Property Name	Type	Default Value	Description
`_backgroundColor`	`Color \| string`	`Color.White`	Background color
`_backgroundPressColor`	`Color \| string`	`Color.Gray`	Background color when pressed
`_borderRadius`	`Length \| BorderRadiuses`	`0`	Border radius
`_border`	`BorderOptions`	`{}`	Border style
`_borderPress`	`BorderOptions`	`{}`	Border style when pressed
`_isRadiusHalfHeight`	`boolean`	`false`	Whether the border radius is half the height
`_isWidthHeightEqual`	`boolean`	`false`	Whether width and height are equal
`_width`	`number \| string`	`-`	Width
`_height`	`number \| string`	`-`	Height
`roundViewDelegate`	`RoundViewDelegate \| undefined`	`undefined`	Unified configuration delegate object
`isPress`	`boolean` (Link)	`-`	Whether it is in pressed state
`_direction`	`FlexDirection`	`FlexDirection.Column`	Direction of child elements arrangement
`alignContent`	`Alignment`	`Alignment.Center`	Content alignment

RoundFrameLayout

Rounded corner stack layout component that supports stacking arrangement of child elements.

Properties

Property Name	Type	Default Value	Description
`_backgroundColor`	`Color \| string`	`Color.White`	Background color
`_backgroundPressColor`	`Color \| string`	`Color.Gray`	Background color when pressed
`_borderRadius`	`Length \| BorderRadiuses`	`0`	Border radius
`_border`	`BorderOptions`	`{}`	Border style
`_borderPress`	`BorderOptions`	`{}`	Border style when pressed
`_isRadiusHalfHeight`	`boolean`	`false`	Whether the border radius is half the height
`_isWidthHeightEqual`	`boolean`	`false`	Whether width and height are equal
`_width`	`number \| string`	`-`	Width
`_height`	`number \| string`	`-`	Height
`roundViewDelegate`	`RoundViewDelegate \| undefined`	`undefined`	Unified configuration delegate object
`isPress`	`boolean` (Link)	`-`	Whether it is in pressed state
`alignContent`	`Alignment`	`Alignment.Center`	Content alignment

RoundRelativeLayout

Rounded corner relative layout component that supports layout based on relative positions.

Properties

Property Name	Type	Default Value	Description
`_backgroundColor`	`Color \| string`	`Color.White`	Background color
`_backgroundPressColor`	`Color \| string`	`Color.Gray`	Background color when pressed
`_borderRadius`	`Length \| BorderRadiuses`	`0`	Border radius
`_border`	`BorderOptions`	`{}`	Border style
`_borderPress`	`BorderOptions`	`{}`	Border style when pressed
`_isRadiusHalfHeight`	`boolean`	`false`	Whether the border radius is half the height
`_isWidthHeightEqual`	`boolean`	`false`	Whether width and height are equal
`_width`	`number \| string`	`-`	Width
`_height`	`number \| string`	`-`	Height
`roundViewDelegate`	`RoundViewDelegate \| undefined`	`undefined`	Unified configuration delegate object
`isPress`	`boolean` (Link)	`-`	Whether it is in pressed state
`relativeType`	`RelativeType`	`RelativeType.Parent`	Relative layout type

RoundViewDelegate

Unified configuration delegate class for centralized management of common properties of all rounded corner components.

Methods

Method Name	Parameters	Return Value	Description
`setBackgroundColor`	`backgroundColor: Color \| string`	`void`	Set background color
`getBackgroundColor`	`-`	`Color \| string`	Get background color
`setBackgroundPressColor`	`backgroundPressColor: Color \| string`	`void`	Set background color when pressed
`getBackgroundPressColor`	`-`	`Color \| string`	Get background color when pressed
`setBorderRadius`	`borderRadius: Length \| BorderRadiuses`	`void`	Set border radius
`getBorderRadius`	`-`	`Length \| BorderRadiuses`	Get border radius
`setBorder`	`border: BorderOptions`	`void`	Set border style
`getBorder`	`-`	`BorderOptions`	Get border style
`setBorderPress`	`borderPress: BorderOptions`	`void`	Set border style when pressed
`getBorderPress`	`-`	`BorderOptions`	Get border style when pressed
`setIsRadiusHalfHeight`	`isRadiusHalfHeight: boolean`	`void`	Set whether the border radius is half the height
`getIsRadiusHalfHeight`	`-`	`boolean`	Get whether the border radius is half the height
`setIsWidthHeightEqual`	`isWidthHeightEqual: boolean`	`void`	Set whether width and height are equal
`getIsWidthHeightEqual`	`-`	`boolean`	Get whether width and height are equal
`setTextPressColor`	`textPressColor: Color \| string`	`void`	Set text color when pressed (only effective for RoundTextView)
`getTextPressColor`	`-`	`Color \| string`	Get text color when pressed (only effective for RoundTextView)

Press Effect Description

All components support visual feedback effects triggered by long-press gestures:

When the user long-presses the component, the component switches to the pressed state and displays the pressed style (background color, border, etc.)
When the user releases the long-press, the component returns to the normal state
The pressed state is synchronized between parent and child components through the isPress Link property

Unified Configuration Method

Multiple components' common properties can be uniformly configured through RoundViewDelegate to avoid repetitive settings:

Create a RoundViewDelegate instance
Call the corresponding methods to set common properties
Pass the instance to the component's roundViewDelegate property

Constraints

This project has been verified in the following versions:

DevEco Studio: 6.0.1 Release(6.0.1.260), SDK: API12(5.0.0.71)

Directory Structure

/ohos_FlycoRoundView        # Project root directory
├── entry      # Sample code
├── library/                    # ohos_FlycoRoundView library
│   ├── src/
│   │   ├── main/
│   │   │   ├── ets/
│   │   │   │   ├── components/           # Component implementation directory
│   │   │   │   │   ├── RoundFrameLayout.ets
│   │   │   │   │   ├── RoundLinearLayout.ets
│   │   │   │   │   ├── RoundRelativeLayout.ets
│   │   │   │   │   ├── RoundTextView.ets
│   │   │   │   │   └── RoundViewDelegate.ets
│   │   │   │   └── utils/              # Utility class directory
│   │   │   │       ├── EmitterHelper.ets
│   │   │   │       ├── RoundUtils.ets
│   │   │   │       └── Type.ets
│   ├── index.ets    # External APIs
├── README.md     # Readme    
├── README_zh.md  # Readme

How to Contribute

If you find any problem when using the project, submit an issue or a PR.

License

This project is licensed under MIT License.