CN107608670A - The method and system that a kind of form UI elements are adaptively shown - Google Patents

Abstract

The present invention provides a method and system for self-adaptive display of report UI elements. The method includes: calculating the page size of the style report, the relative size and relative position of each UI element in the style report; According to the page size of the style report, calculate the size ratio between the page size of the display report and the page size of the style report; according to the page size of the style report, the size ratio, the relative size and relative position of each UI element in the style report Calculate the size and position of each UI element in the display report; draw the display report according to the page size of the style report, the size ratio, and the size and position of the various UI elements in the display report; display the display report on the mobile terminal display screen Display the report. The present invention uses a style report to draw corresponding display reports according to different mobile terminal resolutions, so that each UI element of the style report can be displayed adaptively.

Description

Method and system for self-adaptive display of report UI elements

technical field

The present invention relates to the technical field of UI design, and more specifically, to a method and system for self-adaptive display of report UI elements.

Background technique

Since the popularity of mobile terminals, the display requirements for UI elements on different mobile terminal interfaces have become higher and higher, and they need to meet the requirements of adaptive display on the screen. However, the currently used report designer is to design multiple sets of style reports for different terminals, and different mobile terminals load the style reports suitable for their own resolutions for display.

Contents of the invention

The present invention proposes a method and system for self-adaptive display of UI elements of a report, which can make each UI element of a style report self-adaptively displayed on mobile terminals with different resolutions.

For this reason, the present invention proposes following technical scheme:

In the first aspect, a method for adaptively displaying report UI elements includes:

Calculate the page size of the style report, the relative size and relative position of each UI element in the style report;

Calculating the ratio of the page size of the display report to the page size of the style report according to the resolution of the display screen of the mobile terminal and the page size of the style report;

Calculate the size and position of each UI element in the display report according to the page size of the style report, the size ratio, the relative size and relative position of each UI element in the style report;

Draw a display report according to the page size of the style report, the size ratio, and the size and position of each UI element in the display report;

The display report is displayed on the display screen of the mobile terminal.

Wherein, the page size of the style report includes the page width of the style report and the page height of the style report;

Take the upper right corner of the style report as the origin, horizontally to the right is the positive direction of the X-axis, and vertically downward is the positive direction of the Y-axis to establish a rectangular coordinate system;

The relative size of each UI element in the style report includes: the relative width Wn and the relative height Hn of each UI element;

The relative position of each UI element in the style report includes: the starting point horizontal position Xn and the starting point vertical position Yn of each UI element;

The relative width Wn represents the percentage of the width of the UI element relative to the page width of the report;

The relative height Hn indicates the percentage of the height of the UI element relative to the page height of the report;

The horizontal position Xn of the starting point represents the percentage of the horizontal coordinate of the starting point of the UI element relative to the page width of the report;

The vertical position Yn of the starting point represents the percentage of the vertical coordinate of the starting point of the UI element relative to the page width of the report.

Wherein, the size ratio includes a height ratio and a width ratio;

According to the page size of the style report, the size ratio, the relative size and relative position of each UI element in the style report, the calculation of the size and position of each UI element in the display report includes:

Calculate the width of each UI element displaying the report according to the page width of the style report, the width ratio and the relative width Wn;

Calculate the height of each UI element displaying the report according to the page height of the style report, the height ratio and the relative height Hn;

Calculate the abscissa of the starting point of each UI element in the display report according to the page width of the style report, the width ratio and the horizontal position Xn of the starting point;

According to the page height of the style report, the height ratio and the vertical position Yn of the starting point, calculate the starting ordinate of each UI element in the display report;

The upper right corner of the displayed report is the coordinate origin, the horizontal direction to the right is the positive direction of the X axis, and the vertical direction is the positive direction of the Y axis.

Wherein, the drawing of the display report according to the page size of the style report, the size ratio, and the size and position of each UI element includes:

calculating the page size of the display report according to the page size of the style report and the size ratio;

Draw the display report according to the page size of the display report, the abscissa of the starting point of each UI element in the display report, the vertical coordinate of the starting point of each UI element in the display report, the width of each UI element in the display report, and the height of each UI element in the display report.

Wherein, before the page size of the calculation style report, the size and position of each UI element in the style report, it also includes:

design style report;

The style report is parsed to obtain each UI element in the style report.

The second aspect is a system for adaptively displaying report UI elements, including:

The first calculation module is used to calculate the page size of the style report, the relative size and relative position of each UI element in the style report;

The second calculation module is used to calculate the size ratio between the page size of the display report and the page size of the style report according to the resolution of the display screen of the mobile terminal and the page size of the style report;

The third calculation module is used to calculate the size and position of each UI element in the display report according to the page size of the style report, the size ratio, the relative size and relative position of each UI element in the style report;

A drawing module, configured to draw a display report according to the page size of the style report, the size ratio, and the size and position of each UI element in the display report;

The display module is configured to display the display report on the display screen of the mobile terminal.

Wherein, the page size of the style report includes the page width of the style report and the page height of the style report;

Take the upper right corner of the style report as the origin, horizontally to the right is the positive direction of the X-axis, and vertically downward is the positive direction of the Y-axis to establish a rectangular coordinate system;

The relative size of each UI element in the style report includes: the relative width Wn and the relative height Hn of each UI element;

The relative position of each UI element in the style report includes: the starting point horizontal position Xn and the starting point vertical position Yn of each UI element;

The relative width Wn represents the percentage of the width of the UI element relative to the page width of the report;

The relative height Hn indicates the percentage of the height of the UI element relative to the page height of the report;

The horizontal position Xn of the starting point represents the percentage of the horizontal coordinate of the starting point of the UI element relative to the page width of the report;

The vertical position Yn of the starting point represents the percentage of the vertical coordinate of the starting point of the UI element relative to the page width of the report.

Wherein, the size ratio includes a height ratio and a width ratio;

The third calculation module is specifically used for:

Calculate the width of each UI element displaying the report according to the page width of the style report, the width ratio and the relative width Wn;

Calculate the height of each UI element displaying the report according to the page height of the style report, the height ratio and the relative height Hn;

Calculate the abscissa of the starting point of each UI element in the display report according to the page width of the style report, the width ratio and the horizontal position Xn of the starting point;

According to the page height of the style report, the height ratio and the vertical position Yn of the starting point, calculate the starting ordinate of each UI element in the display report;

The upper right corner of the displayed report is the coordinate origin, the horizontal direction to the right is the positive direction of the X axis, and the vertical direction is the positive direction of the Y axis.

Wherein, the drawing module is specifically used for:

calculating the page size of the display report according to the page size of the style report and the size ratio;

Draw the display report according to the page size of the display report, the abscissa of the starting point of each UI element in the display report, the vertical coordinate of the starting point of each UI element in the display report, the width of each UI element in the display report, and the height of each UI element in the display report.

Wherein, the system also includes:

Design module, used to design style reports;

The parsing module is configured to parse the style report to obtain each UI element in the style report.

The present invention provides a method and system for self-adaptive display of report UI elements. Through a style report, according to the different resolutions of mobile terminals, the corresponding display report is drawn, and each UI element of a style report is displayed at different resolutions The mobile terminal can be displayed adaptively without deformation.

Description of drawings

FIG. 1 is a flow chart of a first embodiment of a method for adaptively displaying report UI elements provided by the present invention.

FIG. 2 is a method flow chart of a second embodiment of a method for adaptively displaying report UI elements provided by the present invention.

Fig. 3 is a structural block diagram of a first embodiment of a system for adaptive display of report UI elements provided by the present invention.

Fig. 4 is a structural block diagram of a second embodiment of a system for adaptive display of report UI elements provided by the present invention.

detailed description

In order to make the object, technical solution and advantages of the present invention clearer, the present invention will be further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described here are only used to explain the present invention, not to limit the present invention.

Embodiment one

As shown in Figure 1, a method for adaptively displaying report UI elements includes the following steps:

S101. Calculate the page size of the style report, and the relative size and relative position of each UI element in the style report.

When a style report is designed, record its page size, relative size and relative position of each UI element.

S102. Calculate a size ratio between the page size of the display report and the page size of the style report according to the resolution of the display screen of the mobile terminal and the page size of the style report.

Different mobile terminals have different screen resolutions, and the same style report cannot adapt to the resolution of all mobile terminal screens. Therefore, when displaying this set of style reports on different mobile terminals, it is necessary to The style report is adjusted to the resolution of the display screen of the mobile terminal, that is, the size of the style report needs to be modified to meet the resolution of the display screen of the mobile terminal. The embodiment of the present invention uses the style report as a template, calculates the size ratio between the page size of the display report and the page size of the style report according to the resolution of the display screen of the mobile terminal and the page size of the style report, and draws a copy according to the ratio size In this template, the display report with the same UI elements but different sizes is easy to display, and the UI elements are not deformed, and the reuse rate of the style report is improved at the same time.

S103. Calculate the size and position of each UI element in the display report according to the page size of the style report, the size ratio, and the relative size and relative position of each UI element in the style report.

To get a new report (display report), it is necessary to calculate the page size of the display report, and the size and position of each UI element in the display report.

The page size of the display report is obtained from the ratio of the page size of the display report to the page size of the style report and the page size of the style report. The page size of the display report = size ratio * page size of the style report.

The size of each UI element in the display report is related to the relative size of the style report, the size ratio of the page size of the display report to the page size of the style report, and the page size of the display report. Therefore, according to the relationship between them, it can be calculated The size of each UI element in the display report: the size of the UI element in the display report = the page size of the style report * the relative size of the UI elements in the style report * the size ratio; similarly, the position of each UI element in the display report can be calculated.

The relative size or relative position of the UI element is represented by the percentage of the actual size or actual position of the UI element relative to the page size.

S104. Draw a display report according to the page size of the style report, the size ratio, and the size and position of each UI element.

S105. Display the display report on the display screen of the mobile terminal.

Calculate the page size of the display report. After each UI element displays the size and position of the report, the display report can be drawn according to these parameters. After the display report is drawn, it can be displayed on the screen of the mobile terminal, and the UI elements in it will not be deformed.

The embodiment of the present invention provides a method for self-adaptive display of report UI elements. Through a set of style reports, according to the different resolutions of mobile terminals, the corresponding display reports are drawn. Each UI element of a set of style reports is displayed in different High-rate mobile terminals can display adaptively without deformation, and at the same time improve the reuse rate of style reports.

Embodiment two

A method for self-adaptive display of UI elements of a report in this embodiment is to supplement content on the basis of Embodiment 1, and refer to Embodiment 1 for details not yet detailed in this embodiment.

As shown in Figure 2, a method for adaptively displaying report UI elements includes the following steps:

S201. Design a style report.

S202. Parse the style report to obtain each UI element in the style report.

S203. Calculate the page size of the style report, and the relative size and relative position of each UI element in the style report.

The report designer designs a set of report styles, and the report analysis engine is responsible for analyzing the report type and report data, and obtains each UI element in the style report, and the relative size and relative position of each UI element in the style report.

Preferably, the page size of the style report includes the page width of the style report and the page height of the style report.

The relative size of each UI element in the style report includes: the relative width Wn and the relative height Hn of each UI element.

The relative width Wn represents the percentage of the width of the UI element relative to the page width of the report; the relative height Hn represents the percentage of the height of the UI element relative to the page height of the report.

The relative position of each UI element in the style report includes: the starting point horizontal position Xn and the starting point vertical position Yn of each UI element.

Take the upper right corner of the style report as the origin, horizontally to the right as the positive direction of the X-axis, and vertically downward as the positive direction of the Y-axis to establish a Cartesian coordinate system. The horizontal position Xn of the starting point represents the abscissa of the starting point of the UI element relative to the page width of the report. Percentage, starting point vertical position Yn indicates the percentage of the starting point vertical coordinate of the UI element relative to the page width of the report.

S204. Calculate a size ratio between the page size of the display report and the page size of the style report according to the resolution of the display screen of the mobile terminal and the page size of the style report.

S205. Calculate the size and position of each UI element in the display report according to the page size of the style report, the size ratio, and the relative size and relative position of each UI element in the style report.

Preferably, the size ratio includes a height ratio and a width ratio;

The process of calculating the size and position of each UI element in the display report is as follows:

Calculate the width of each UI element in the display report according to the page width of the style report, the width ratio and the relative width Wn: UI element width in the display report=page width*width ratio*relative width Wn of the style report.

Calculate the height of each UI element in the display report according to the page height of the style report, the height ratio and the relative height Hn: the height of the UI element in the display report=the page height of the style report*height ratio*relative height Hn.

Calculate the starting abscissa of each UI element in the display report according to the page width of the style report, the width ratio and the starting horizontal position Xn: UI element abscissa of the starting point of the display report=page width*width ratio of the style report * The horizontal position Xn of the starting point.

According to the page height of the style report, the height ratio and the starting point vertical position Yn, calculate the starting point ordinate of each UI element in the display report: the starting point ordinate of the UI element in the display report=page height*height ratio of the style report * Longitudinal position Yn of starting point.

The Cartesian coordinate system where the starting point coordinates of the UI elements in the display report is located takes the upper right corner of the display report as the origin of the coordinates, the horizontal direction to the right is the positive direction of the X axis, and the vertical direction is the positive direction of the Y axis.

S206. Draw a display report according to the page size of the style report, the size ratio, and the size and position of each UI element.

Preferably, said step S206 includes:

Calculate the page size of the display report according to the page size of the style report and the size ratio: page size of the display report=page size of the style report*size ratio.

Draw the display report according to the page size of the display report, the abscissa of the starting point of each UI element in the display report, the vertical coordinate of the starting point of each UI element in the display report, the width of each UI element in the display report, and the height of each UI element in the display report.

S207. Display the presentation report on the display screen of the mobile terminal.

The embodiment of the present invention provides a method for self-adaptive display of report UI elements. Through a set of style reports, according to the different resolutions of mobile terminals, the corresponding display reports are drawn. Each UI element of a set of style reports is displayed in different High-speed mobile terminals can display adaptively without deformation.

Embodiment three

This embodiment provides a system for self-adaptive display of report UI elements, which corresponds to the method in Embodiment 1. Refer to Embodiment 1 for details not yet detailed in this embodiment.

Referring to Figure 3, a system for adaptive display of report UI elements, including:

The first calculation module 101 is used to calculate the page size of the style report, the relative size and relative position of each UI element in the style report;

The second calculation module 102 is used to calculate the size ratio of the page size of the display report and the page size of the style report according to the resolution of the display screen of the mobile terminal and the page size of the style report;

The third calculation module 103 is used to calculate the size and position of each UI element in the display report according to the page size of the style report, the size ratio, the relative size and relative position of each UI element in the style report;

A drawing module 104, configured to draw a display report according to the page size of the style report, the size ratio, and the size and position of each UI element;

The display module 105 is configured to display the display report on the display screen of the mobile terminal.

Embodiment four

This embodiment provides a system for self-adaptive display of report UI elements, which corresponds to the method in Embodiment 2. Refer to Embodiment 2 for details not yet detailed in this embodiment.

Referring to Figure 4, a system for adaptive display of report UI elements, including:

Design module 201, used to design a style report;

The parsing module 202 is configured to parse the style report to obtain each UI element in the style report.

The first calculation module 203 is used to calculate the page size of the style report, the relative size and relative position of each UI element in the style report;

The second calculation module 204 is used to calculate the size ratio between the page size of the display report and the page size of the style report according to the resolution of the display screen of the mobile terminal and the page size of the style report;

The third calculation module 205 is used to calculate the size and position of each UI element in the display report according to the page size of the style report, the size ratio, the relative size and relative position of each UI element in the style report;

A drawing module 206, configured to draw the display report according to the page size of the style report, the size ratio, and the size and position of each UI element;

The display module 207 is configured to display the display report on the display screen of the mobile terminal.

Preferably, the page size of the style report includes the page width of the style report and the page height of the style report;

Take the upper right corner of the style report as the origin, horizontally to the right is the positive direction of the X-axis, and vertically downward is the positive direction of the Y-axis to establish a rectangular coordinate system;

The relative size of each UI element in the style report includes: the relative width Wn and the relative height Hn of each UI element;

The relative position of each UI element in the style report includes: the starting point horizontal position Xn and the starting point vertical position Yn of each UI element;

The relative width Wn represents the percentage of the width of the UI element relative to the page width of the report;

The relative height Hn indicates the percentage of the height of the UI element relative to the page height of the report;

The horizontal position Xn of the starting point represents the percentage of the horizontal coordinate of the starting point of the UI element relative to the page width of the report;

The vertical position Yn of the starting point represents the percentage of the vertical coordinate of the starting point of the UI element relative to the page width of the report.

Preferably, the size ratio includes a height ratio and a width ratio;

The third calculation module 205 is specifically used for:

Calculate the width of each UI element displaying the report according to the page width of the style report, the width ratio and the relative width Wn;

Calculate the height of each UI element displaying the report according to the page height of the style report, the height ratio and the relative height Hn;

Calculate the abscissa of the starting point of each UI element in the display report according to the page width of the style report, the width ratio and the horizontal position Xn of the starting point;

According to the page height of the style report, the height ratio and the vertical position Yn of the starting point, calculate the starting ordinate of each UI element in the display report;

The upper right corner of the displayed report is the coordinate origin, the horizontal direction to the right is the positive direction of the X axis, and the vertical direction is the positive direction of the Y axis.

The drawing module 206 is specifically used for:

calculating the page size of the display report according to the page size of the style report and the size ratio;

Draw the display report according to the page size of the display report, the abscissa of the starting point of each UI element in the display report, the vertical coordinate of the starting point of each UI element in the display report, the width of each UI element in the display report, and the height of each UI element in the display report.

A system for self-adaptive display of report UI elements provided by the present invention uses a set of style reports to draw corresponding display reports according to different resolutions of mobile terminals. The mobile terminal can display adaptively without deformation.

The above is only a preferred embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any person skilled in the art can easily conceive of changes or modifications within the technical scope disclosed in the present invention. Replacement should be covered within the protection scope of the present invention. Therefore, the protection scope of the present invention should be determined by the protection scope of the claims.

Claims (10)

1. a kind of method that form UI elements are adaptively shown, it is characterised in that including：

Calculate the relative size and relative position of each UI elements in the page size of pattern form, pattern form；

The page size of displaying form is calculated according to the resolution ratio of mobile terminal display screen and the page size of the pattern form With the dimension scale of the page size of pattern form；

According in the page size of the pattern form, the dimension scale, the pattern form each UI elements it is relatively large Small and relative position calculates size and location of each UI elements in displaying form；

According to the page size of the pattern form, the dimension scale, each UI elements displaying form size and Draw displaying form in position；

The displaying form is shown in mobile terminal display screen.

2. the method as described in claim 1, it is characterised in that the page size of the pattern form includes the page of pattern form The page height of face width and pattern form；

It is horizontal positive for X-axis to the right using the upper right corner of pattern form as origin, establish rectangular co-ordinate straight down for Y-axis forward direction System；

The relative size of each UI elements includes in the pattern form：The relative width Wn and relative altitude of each UI elements Hn；

The relative position of each UI elements includes in the pattern form：The starting point lateral attitude Xn and starting point of each UI elements are indulged To position Yn；

Relative width Wn represents the width of UI elements relative to the percentage of the pagewidth of form；

Relative altitude Hn represents the height of UI elements relative to the percentage of the page height of form；

Starting point lateral attitude Xn represents the starting point abscissa of UI elements relative to the percentage of the pagewidth of form；

Starting point lengthwise position Yn represents the starting point ordinate of UI elements relative to the percentage of the pagewidth of form.

3. method as claimed in claim 2, it is characterised in that the dimension scale includes height ratio and width ratio；

The phase according to each UI elements in the page size of the pattern form, the dimension scale, the pattern form Size and location of each UI elements in displaying form is calculated size and relative position, including：

Each UI elements are calculated according to the pagewidth of the pattern form, the width ratio and the relative width Wn opening up Show the width of form；

Each UI elements are calculated according to the page height of the pattern form, the height ratio and the relative altitude Hn opening up Show the height of form；

Each UI elements are calculated according to the pagewidth of the pattern form, the width ratio and the starting point lateral attitude Xn In the starting point abscissa of displaying form；

Each UI elements are calculated according to the page height of the pattern form, the height ratio and the starting point lengthwise position Yn In the starting point ordinate of displaying form；

The upper right corner of the displaying form is the origin of coordinates, horizontal positive for X-axis to the right, positive for Y-axis straight down.

4. method as claimed in claim 3, it is characterised in that the page size according to the pattern form, the chi Very little ratio, each UI elements draw displaying form in the size and location of displaying form, including：

The page size of displaying form is calculated according to the page size of the pattern form and the dimension scale；

Shown according to the page size of displaying form, each UI elements in starting point abscissa, each UI elements of displaying form The starting point ordinate of form, each UI elements draw exhibition in the width of displaying form and each UI elements in the height of displaying form Show form.

5. the method as described in claim 1, it is characterised in that in the page size for calculating pattern form, pattern form Before the size and location of each UI elements, in addition to：

Design pattern form；

The pattern form is parsed, obtains each UI elements in pattern form.

A kind of 6. system that form UI elements are adaptively shown, it is characterised in that including：

First computing module, for calculate in the page size of pattern form, pattern form the relative size of each UI elements and Relative position；

Second computing module, exhibition is calculated for the resolution ratio according to mobile terminal display screen and the page size of the pattern form Show the dimension scale of the page size of form and the page size of pattern form；

3rd computing module, for each in the page size according to the pattern form, the dimension scale, the pattern form The relative size and relative position of individual UI elements calculate size and location of each UI elements in displaying form；

Drafting module, shown for the page size according to the pattern form, the dimension scale, each UI elements The size and location of form draws displaying form；

Display module, for showing the displaying form in mobile terminal display screen.

7. system as claimed in claim 6, it is characterised in that the page size of the pattern form includes the page of pattern form The page height of face width and pattern form；

It is horizontal positive for X-axis to the right using the upper right corner of pattern form as origin, establish rectangular co-ordinate straight down for Y-axis forward direction System；

The relative size of each UI elements includes in the pattern form：The relative width Wn and relative altitude of each UI elements Hn；

The relative position of each UI elements includes in the pattern form：The starting point lateral attitude Xn and starting point of each UI elements are indulged To position Yn；

Relative width Wn represents the width of UI elements relative to the percentage of the pagewidth of form；

Relative altitude Hn represents the height of UI elements relative to the percentage of the page height of form；

Starting point lateral attitude Xn represents the starting point abscissa of UI elements relative to the percentage of the pagewidth of form；

Starting point lengthwise position Yn represents the starting point ordinate of UI elements relative to the percentage of the pagewidth of form.

8. system as claimed in claim 7, it is characterised in that the dimension scale includes height ratio and width ratio；

3rd computing module is specifically used for：

Each UI elements are calculated according to the pagewidth of the pattern form, the width ratio and the relative width Wn opening up Show the width of form；

Each UI elements are calculated according to the page height of the pattern form, the height ratio and the relative altitude Hn opening up Show the height of form；

Each UI elements are calculated according to the pagewidth of the pattern form, the width ratio and the starting point lateral attitude Xn In the starting point abscissa of displaying form；

Each UI elements are calculated according to the page height of the pattern form, the height ratio and the starting point lengthwise position Yn In the starting point ordinate of displaying form；

The upper right corner of the displaying form is the origin of coordinates, horizontal positive for X-axis to the right, positive for Y-axis straight down.

9. system as claimed in claim 8, it is characterised in that the drafting module is specifically used for：

The page size of displaying form is calculated according to the page size of the pattern form and the dimension scale；

Shown according to the page size of displaying form, each UI elements in starting point abscissa, each UI elements of displaying form The starting point ordinate of form, each UI elements draw exhibition in the width of displaying form and each UI elements in the height of displaying form Show form.

10. system as claimed in claim 6, it is characterised in that also include：

Module is designed, for design pattern form；

Parsing module, for parsing the pattern form, obtain each UI elements in pattern form.