Top title bar design method and system adaptive to interface of swan mobile terminal

Abstract

The invention discloses a top title bar design method and system adaptive to a swan mobile terminal interface, and belongs to the technical field of mobile terminal APP development. A title bar assembly is introduced and comprises a top status bar assembly, a return assembly, a left auxiliary assembly, a title text assembly, a right auxiliary assembly, a right assembly and a bottom parting line assembly; a bottom progress bar assembly; directly calling the title bar class name in the container component to create a title bar object, and taking the object as a first element component; after a developer introduces the title bar component path, the title bar component is directly used as a first element component, and the title bar can be realized. According to the invention, the user interface design can be simplified, the user can put more energy into the design and development of the service interface, and the working efficiency of the user is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of mobile APP development, and specifically to a method and system for designing a top title bar adapted to the Hongmeng mobile interface. Background Art

[0002] In iOS and Android development, the system UI library provides a unified title bar for developers to use as a reference. However, the current ArkUI component library does not have a unified title bar component, which requires developers to write a title bar for each interface. This approach can meet business needs when the project functions are simple, but as the project becomes more comprehensive, this approach exposes the following drawbacks:

[0003] 1. Every time an interface is created, the developer needs to write title bar related code, which leads to inefficiency and duplication.

[0004] 2. The title bar is easily coupled with other services on the interface, increasing functional complexity.

[0005] 3. The code is scattered, the maintenance cost is high, and it is difficult to unify the UI style. Summary of the Invention

[0006] The technical task of the present invention is to address the above shortcomings and provide a top title bar design method and system adapted to the Hongmeng mobile terminal interface, which simplifies the user interface design and allows users to devote more energy to the design and development of the business interface, thereby improving user work efficiency.

[0007] The technical solution adopted by the present invention to solve its technical problem is:

[0008] A top title bar design method adapted to the Hongmeng mobile terminal interface introduces a title bar component, which includes a top status bar component, a return component, a left auxiliary component, a title text component, a right auxiliary component, a right component, a bottom dividing line component, and a bottom progress bar component;

[0009] The HarmonyOS interface is generally a container component. In the container component, the title bar class name is directly called to create a title bar object, making the object the first element component;

[0010] After the developer introduces the title bar component path, the title bar can be implemented by directly using the title bar component as the first element component.

[0011] The title bar component uses a declarative development paradigm that's closer to natural semantic programming. Developers can intuitively describe the UI without worrying about layout and rendering, resulting in efficient and concise development. This component is compatible with conventional title bar styles and web loading progress, simplifying user interface design and allowing users to focus more on designing and developing business interfaces, improving work efficiency.

[0012] Furthermore, the title bar component provides the following setting functions:

[0013] (1) Whether to hide the title bar;

[0014] (2) Status bar component height setting;

[0015] (3) Setting the color value of the status bar component;

[0016] (4) Title bar height setting;

[0017] (5) Setting the background color of the title bar;

[0018] (6) Whether to hide the bottom dividing line / bottom progress bar, the bottom dividing line color, and the bottom progress bar background color / progress color settings;

[0019] (7) Returns whether the component / left auxiliary component / right auxiliary component / right component is hidden, and the settings of width, image, text, text color, font size, horizontal spacing, and click event;

[0020] (8) Settings for the title text component’s text background color, text color value, font size, maximum number of lines, ellipsis style, centering style, and horizontal spacing.

[0021] Furthermore, each configuration parameter is set with a default value, and the user configures each parameter according to specific business needs;

[0022] Users can uniformly configure common parameters, including status bar height, color value, title bar height, color value, title text color value, font size, etc.

[0023] Furthermore, the top status bar component has the ability to customize height and color.

[0024] Furthermore, the return component includes:

[0025] Content capabilities: configurable images and text;

[0026] Layout capabilities: adjustable total width, left and right image spacing, size, and left and right text spacing;

[0027] Style capabilities: adjustable text font style, font size, and text color value;

[0028] Event handling capabilities.

[0029] Furthermore, the left auxiliary component includes:

[0030] Content capabilities: configurable images and text;

[0031] Layout capabilities: adjustable total width, left and right image spacing, size, and left and right text spacing;

[0032] Style capabilities: adjustable text font style, font size, and text color value;

[0033] Event handling capabilities;

[0034] The right auxiliary component includes:

[0035] Content capabilities: configurable images and text;

[0036] Layout capabilities: adjustable total width, left and right image spacing, size, and left and right text spacing;

[0037] Style capabilities: adjustable text font style, font size, and text color value;

[0038] Event handling capabilities.

[0039] Furthermore, the right side component includes:

[0040] Content capabilities: configurable images and text;

[0041] Layout capabilities: adjustable total width, left and right image spacing, size, and left and right text spacing;

[0042] Style capabilities: adjustable text font style, font size, and text color value;

[0043] Event handling capabilities.

[0044] Furthermore, the title text component includes:

[0045] Content capability: only supports text configuration;

[0046] Layout capability: left, center, and right;

[0047] Style capabilities: You can adjust the text font style, font size, text color value, text background color, maximum number of lines, and style when exceeding the length limit.

[0048] Furthermore, the bottom dividing line component can be configured with height and color values;

[0049] The bottom progress bar component: when the interface has loading progress, the loading progress is displayed; the height, rounded corners, progress color, progress background color, display and hide are configurable; for example: loading the web interface.

[0050] The present invention also claims protection for a top title bar system adapted to the Hongmeng mobile terminal interface, including a title bar component, wherein the title bar component includes a top status bar component, a return component, a left auxiliary component, a title text component, a right auxiliary component, a right component, a bottom dividing line component, and a bottom progress bar component;

[0051] The HarmonyOS interface is generally a container component. In the container component, the title bar class name is directly called to create a title bar object, making the object the first element component;

[0052] After the developer introduces the title bar component path, the title bar can be implemented by directly using the title bar component as the first element component.

[0053] Compared with the prior art, the method and system for designing a top title bar adapted to the Hongmeng mobile terminal interface of the present invention has the following beneficial effects:

[0054] The title bar component of the present invention can be used directly in development and can be called using the declarative development paradigm. It can be combined with the system ArkUI component to build a complete interface that meets the needs of its own application. It is compatible with loading web interfaces and web history operations. Specifically, the following technical effects are achieved:

[0055] 1. Simplified operation: The entire new interface development process is simpler, and users only need a few simple steps to complete the construction of the title bar.

[0056] 2. Potential advantages: By configuring the internal properties of this component, the style of the entire project title bar can be unified, realizing a centralized style configuration management method.

[0057] 3. Improve efficiency: The declarative development paradigm is closer to natural semantic programming. Developers can intuitively describe the title bar style without having to worry about how to implement UI drawing and layout of the title bar, making development efficient and concise.

[0058] 4. Improve code standards: After using this title bar component, developers do not need to write a lot of additional construction code to solve the problems of non-standard and duplicate variable and method naming.

[0059] 5. Wide applicability: Suitable for the UI interface requirements of most business scenarios. BRIEF DESCRIPTION OF THE DRAWINGS

[0060] Figure 1 This is a diagram of the top title bar structure adapted to the Hongmeng mobile terminal interface provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0061] An embodiment of the present invention provides a top title bar design method adapted to the Hongmeng mobile terminal interface. The method introduces a title bar component, which includes a top status bar component, a return component, a left auxiliary component, a title text component, a right auxiliary component, a right component, a bottom dividing line component, and a bottom progress bar component.

[0062] After the developer introduces the title bar component path, the title bar can be implemented by directly using the title bar component as the first element component.

[0063] The HarmonyOS interface is generally a container component. In the container component, the title bar class name is directly called to create a title bar object, making the object the first element component.

[0064] The title bar component provides the following settings:

[0065] (1) Whether to hide the title bar;

[0066] (2) Status bar component height setting;

[0067] (3) Setting the color value of the status bar component;

[0068] (4) Title bar height setting;

[0069] (5) Setting the background color of the title bar;

[0070] (6) Whether to hide the bottom dividing line / bottom progress bar, the bottom dividing line color, and the bottom progress bar background color / progress color settings;

[0071] (7) Returns whether the component / left auxiliary component / right auxiliary component / right component is hidden, and the settings of width, image, text, text color, font size, horizontal spacing, and click event;

[0072] (8) Settings for the title text component’s text background color, text color value, font size, maximum number of lines, ellipsis style, centering style, and horizontal spacing.

[0073] Each configuration parameter has a default value, and users can configure it individually according to specific business needs.

[0074] Users can uniformly configure common parameters, such as status bar height, color value, title bar height, color value, title text color value, font size, etc.

[0075] For the title bar component, the specific configuration is as follows:

[0076] Top status bar component: with customizable height and color.

[0077] Returns components, including:

[0078] Content capabilities: configurable images and text;

[0079] Layout capabilities: adjustable total width, left and right image spacing, size, and left and right text spacing;

[0080] Style capabilities: adjustable text font style, font size, and text color value;

[0081] Event handling capabilities.

[0082] Left auxiliary assembly, including:

[0083] Content capabilities: configurable images and text;

[0084] Layout capabilities: adjustable total width, left and right image spacing, size, and left and right text spacing;

[0085] Style capabilities: adjustable text font style, font size, and text color value;

[0086] Event handling capabilities;

[0087] Title text components, including:

[0088] Content capability: only supports text configuration;

[0089] Layout capability: left, center, and right;

[0090] Style capabilities: You can adjust the text font style, font size, text color value, text background color, maximum number of lines, and style when exceeding the length limit.

[0091] Right auxiliary components, including:

[0092] Content capabilities: configurable images and text;

[0093] Layout capabilities: adjustable total width, left and right image spacing, size, and left and right text spacing;

[0094] Style capabilities: adjustable text font style, font size, and text color value;

[0095] Event handling capabilities.

[0096] Right side components, including:

[0097] Content capabilities: configurable images and text;

[0098] Layout capabilities: adjustable total width, left and right image spacing, size, and left and right text spacing;

[0099] Style capabilities: adjustable text font style, font size, and text color value;

[0100] Event handling capabilities.

[0101] Bottom dividing line component: configurable height and color value;

[0102] Bottom progress bar component: Displays the loading progress when the interface has loading progress; configurable height, rounded corners, progress color, progress background color, display and hide; for example: loading a web interface.

[0103] This method can solve the problem of customizing a set of title bars for each interface in the existing technology, unify the app title bar style, and facilitate centralized maintenance and expansion. The set of title bar components provided by this method meets the vast majority of interface requirements and realizes interface personalization through parameter configuration. The unified management of title bar construction and layout provides a foundation for the unification of UI styles and also facilitates subsequent maintenance. It reduces the coupling of interface services, simplifies the amount of business code, reduces the excessive effort invested in title bar development, and improves development efficiency.

[0104] An embodiment of the present invention further provides a top title bar system adapted to the Hongmeng mobile terminal interface, including a title bar component, wherein the title bar component includes a top status bar component, a return component, a left auxiliary component, a title text component, a right auxiliary component, a right component, a bottom dividing line component, and a bottom progress bar component;

[0105] The HarmonyOS interface is generally a container component. In the container component, the title bar class name is directly called to create a title bar object, making the object the first element component;

[0106] After the developer introduces the title bar component path, the title bar can be implemented by directly using the title bar component as the first element component.

[0107] The title bar component provides the following settings:

[0108] (1) Whether to hide the title bar;

[0109] (2) Status bar component height setting;

[0110] (3) Setting the color value of the status bar component;

[0111] (4) Title bar height setting;

[0112] (5) Setting the background color of the title bar;

[0113] (6) Whether to hide the bottom dividing line / bottom progress bar, the bottom dividing line color, and the bottom progress bar background color / progress color settings;

[0114] (7) Returns whether the component / left auxiliary component / right auxiliary component / right component is hidden, and the settings of width, image, text, text color, font size, horizontal spacing, and click event;

[0115] (8) Settings for the title text component’s text background color, text color value, font size, maximum number of lines, ellipsis style, centering style, and horizontal spacing.

[0116] Each configuration parameter has a default value, and users can configure it individually according to specific business needs.

[0117] Users can uniformly configure common parameters, such as status bar height, color value, title bar height, color value, title text color value, font size, etc.

[0118] For the title bar component, the specific configuration is as follows:

[0119] Top status bar component: with customizable height and color.

[0120] Returns components, including:

[0121] Content capabilities: configurable images and text;

[0122] Layout capabilities: adjustable total width, left and right image spacing, size, and left and right text spacing;

[0123] Style capabilities: adjustable text font style, font size, and text color value;

[0124] Event handling capabilities.

[0125] Left auxiliary assembly, including:

[0126] Content capabilities: configurable images and text;

[0127] Layout capabilities: adjustable total width, left and right image spacing, size, and left and right text spacing;

[0128] Style capabilities: adjustable text font style, font size, and text color value;

[0129] Event handling capabilities;

[0130] Title text components, including:

[0131] Content capability: only supports text configuration;

[0132] Layout capability: left, center, and right;

[0133] Style capabilities: You can adjust the text font style, font size, text color value, text background color, maximum number of lines, and style when exceeding the length limit.

[0134] Right auxiliary components, including:

[0135] Content capabilities: configurable images and text;

[0136] Layout capabilities: adjustable total width, left and right image spacing, size, and left and right text spacing;

[0137] Style capabilities: adjustable text font style, font size, and text color value;

[0138] Event handling capabilities.

[0139] Right side components, including:

[0140] Content capabilities: configurable images and text;

[0141] Layout capabilities: adjustable total width, left and right image spacing, size, and left and right text spacing;

[0142] Style capabilities: adjustable text font style, font size, and text color value;

[0143] Event handling capabilities.

[0144] Bottom dividing line component: configurable height and color value;

[0145] Bottom progress bar component: Displays the loading progress when the interface has loading progress; configurable height, rounded corners, progress color, progress background color, display and hide; for example: loading a web interface.

[0146] The above specific embodiments will allow those skilled in the art to easily implement the present invention. However, it should be understood that the present invention is not limited to the above specific embodiments. Based on the disclosed embodiments, those skilled in the art can arbitrarily combine different technical features to implement different technical solutions.

[0147] Except for the technical features described in the specification, all other technical features are known technologies to those skilled in the art.

Claims

1. A method for designing a top title bar adapted to the Hongmeng mobile terminal interface, characterized in that: Introduce the title bar component, which includes the top status bar component, the return component, the left auxiliary component, the title text component, the right auxiliary component, the right component, the bottom dividing line component, and the bottom progress bar component; In the container component, directly call the title bar class name to create a title bar object and make the object the first element component; After the developer introduces the title bar component path, the title bar can be implemented by directly using the title bar component as the first element component.

2. A method for designing a top title bar adapted to a Hongmeng mobile terminal interface according to claim 1, characterized in that: The title bar component provides the following settings: (1) Whether to hide the title bar; (2) Status bar component height setting; (3) Setting the color value of the status bar component; (4) Title bar height setting; (5) Setting the background color of the title bar; (6) Whether to hide the bottom dividing line / bottom progress bar, the bottom dividing line color, and the bottom progress bar background color / progress color settings; (7) Returns whether the component / left auxiliary component / right auxiliary component / right component is hidden, and the settings of width, image, text, text color, font size, horizontal spacing, and click event; (8) Settings for the title text component’s text background color, text color value, font size, maximum number of lines, ellipsis style, centering style, and horizontal spacing.

3. A method for designing a top title bar adapted to a Hongmeng mobile terminal interface according to claim 1, characterized in that: Each configuration parameter has a default value, and the user configures each parameter according to specific business needs; Users can uniformly configure common parameters, including status bar height and color value, title bar height and color value, title text color value and font size.

4. A method for designing a top title bar adapted to a Hongmeng mobile terminal interface according to claim 1, characterized in that: The top status bar component has the ability to customize height and color.

5. A method for designing a top title bar adapted to a Hongmeng mobile terminal interface according to claim 1, characterized in that: The return component includes: Content capabilities: configurable images and text; Layout capabilities: adjustable total width, left and right image spacing, size, and left and right text spacing; Style capabilities: adjustable text font style, font size, and text color value; Event handling capabilities.

6. A method for designing a top title bar adapted to a Hongmeng mobile terminal interface according to claim 1, characterized in that: The left auxiliary component includes: Content capabilities: configurable images and text; Layout capabilities: adjustable total width, left and right image spacing, size, and left and right text spacing; Style capabilities: adjustable text font style, font size, and text color value; Event handling capabilities; The right auxiliary component includes: Content capabilities: configurable images and text; Layout capabilities: adjustable total width, left and right image spacing, size, and left and right text spacing; Style capabilities: adjustable text font style, font size, and text color value; Event handling capabilities.

7. A method for designing a top title bar adapted to a Hongmeng mobile terminal interface according to claim 1, characterized in that: The right side component includes: Content capabilities: configurable images and text; Layout capabilities: adjustable total width, left and right image spacing, size, and left and right text spacing; Style capabilities: adjustable text font style, font size, and text color value; Event handling capabilities.

8. A method for designing a top title bar adapted to a Hongmeng mobile terminal interface according to claim 1, characterized in that: The title text component includes: Content capability: only supports text configuration; Layout capability: left, center, and right; Style capabilities: You can adjust the text font style, font size, text color value, text background color, maximum number of lines, and style when exceeding the length limit.

9. A method for designing a top title bar adapted to a Hongmeng mobile terminal interface according to claim 1, characterized in that: The bottom dividing line component: configurable height and color value; The bottom progress bar component: when the interface has loading progress, the loading progress is displayed; the height, rounded corners, progress color, progress background color, and display and hiding are configurable.

10. A top title bar system adapted to the Hongmeng mobile terminal interface, characterized in that: Including a title bar component, the title bar component includes a top status bar component, a return component, a left auxiliary component, a title text component, a right auxiliary component, a right component, a bottom dividing line component, and a bottom progress bar component; In the container component, directly call the title bar class name to create a title bar object and make the object the first element component; After the developer introduces the title bar component path, the title bar can be implemented by directly using the title bar component as the first element component.

Images