CN103927143B - Method and device for adaptively adjusting interface layout on basis of screen resolution - Google Patents
Method and device for adaptively adjusting interface layout on basis of screen resolution Download PDFInfo
- Publication number
- CN103927143B CN103927143B CN201410134649.2A CN201410134649A CN103927143B CN 103927143 B CN103927143 B CN 103927143B CN 201410134649 A CN201410134649 A CN 201410134649A CN 103927143 B CN103927143 B CN 103927143B
- Authority
- CN
- China
- Prior art keywords
- icon object
- icon
- dimension
- execution step
- resolution
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a method for adaptively adjusting interface layout on the basis of screen resolution. The method includes computing maximum values and minimum values of size parameters and location parameter under the condition of current resolution according to scaling and predefined parameters of the current resolution and basic resolution; using a small dimension of the current resolution as a first dimension to compute the optimal size parameters and the optimal location parameters of icon objects under the condition of the first dimension and the quantity of the icon objects; acquiring current lengths of icon objects under the condition of a second dimension according to current lengths of the icon objects under the condition of the first dimension; computing the optimal location parameters of the icon objects under the condition of the second dimension and the quantity of the icon objects according to the optimal lengths of the icon objects under the condition of the second dimension; acquiring current interface layout according to the optimal size parameters and the optimal location parameters of the icon objects under the conditions of the first dimension and the second dimension and the quantities of the icon objects. According to the technical scheme, the method has the advantage that an excellent display effect can be realized under different conditions of screen resolution.
Description
Technical field
The application is related to computer and digital equipment technical field, more particularly to a kind of based on screen resolution self adaptation tune
The method and device of whole interface layout.
Background technology
At present, most of digital equipments（Including but not limited to smart mobile phone, panel computer, intelligent television）Using touch screen
Used as man-machine interaction interface, user need to only use finger（Or other instruments, such as capacitance pen）Icon object on contact touch screen, number
The operating system of decoding apparatus may turn on the corresponding application program of the icon object or realize corresponding function.Herein, scheme
Mark object refers to be shown on touch screen according to the spaced icon of certain ranks（Such as APP icons, or represent document
Or the icon of specific function）, with the size fixed relative to screen size, between each icon, row, column spacing is identical, and relatively
There is left and right back gauge with upper and lower back gauge in screen edge.
From for the angle of application developer, it is desirable to which the application program developed can install the application program
Various portable digital equipment on good experience can be provided.For the ease of using, icon object can not excessive or mistake
It is little, and the distance between multiple icon objects shown on screen also must be suitable.But pendulum is in application developer face
A front realistic problem is：The resolution of the touch screen of portable digital equipment on the market is varied, needs for various
Resolution adjustment interface layout.
The scheme of the adjustment interface layout generally adopted in prior art includes：
Scheme one：A kind of displaying scheme under resolution is provided, it is then proportionally right for the screen of different resolution
Icon object carries out size scaling；
Scheme two, the display size for fixing each icon object, are then laid out according to the screen of different resolution；
Scheme three, provide two kinds of displaying schemes of transverse screen and portrait layout under a kind of resolution, according under different resolution [screen is wide/
Fixed resolution screen width, screen height/fixed resolution screen are high] minima in the two values, to the horizontal, vertical screen display under fixed resolution
Show that scheme is zoomed in and out.
Scheme four, different types of displaying scheme is customized according to common various resolution.
Wherein, scheme one is it cannot be guaranteed that the size and spacing of shown icon object in the reasonable scope, and are scaled
May be such that torsional deformation or mosaic occurs in icon object, display effect is deteriorated；Two icon sizes of scheme are fixed, icon number
Amount is not fixed, and under little resolution, compared with resolution, icon may be excessive, and under big resolution, icon then may be too for icon
Little, display effect is poor；Three icon ratio of scheme is fixed, number of icons is fixed, icon sizes are not fixed, in order to not ensure icon
Distortion change, so needing to be zoomed in and out according to wide, a high proportion of minima, because the wide high proportion of display screen is different, can make
Excessive into different both sides surplus values, whole structure is poor；Scheme four is best to the display effect of resolution adaptation, but workload
Greatly；If the resolution of portable digital equipment does not have corresponding displaying scheme, still simply can only be scaled.
The content of the invention
This application provides a kind of method based on screen resolution self-adaptative adjustment interface layout, for a variety of
Screen resolution is attained by good display effect.
A kind of method based on screen resolution self-adaptative adjustment interface layout that the embodiment of the present application is provided, including：
Resolution based on A, a kind of resolution of setting, defines the default size of the icon object based on base resolution
Parameter and default location parameter, and its span, and the deviation range allowed during scaling；
B, scaling is calculated according to current resolution and base resolution, and according to scaling and the icon pair
The default size parameter and default location parameter of elephant, calculates the dimensional parameters and location parameter of icon object under current resolution
Span；
C, so as in current resolution less dimension be the first dimension, according to the first dimension length, scaling and on
Default size parameter and default location parameter and its span are stated, the optimal size ginseng of the icon object under the first dimension is calculated
The number of number, optimal location parameter and icon object；
D, according to the optimal size parameter of icon object under the first dimension, obtain the optimum chi of icon object under the second dimension
Very little parameter；
E, according to the optimal size parameter of icon object under second dimension and the second dimension of current resolution, calculate the
The optimal location parameter and icon object number of icon object under two-dimensionses；
F, according to the optimal size parameter of icon object, optimal location parameter and icon object under first dimension
Under number, and the second dimension, the optimal size parameter of icon object, optimal location parameter and icon object number, are worked as
Front interface layout.
It is preferred that the base resolution is 1920 × 1080.
It is preferred that the current resolution described in step B according to portable digital equipment calculates scaling with base resolution
For：Ratio using the first dimension of the current resolution of portable digital equipment and base resolution minor face is used as scaling.
It is preferred that icon object current width under current resolution is calculated described in step B
B1, make icon object current width minima=icon object acquiescence width × scaling × 0.95；
B2, icon object current width minima is judged whether less than predefined icon object width minimum, if
Execution step B3, otherwise execution step B4；
B3, make icon object current width minima=predefined icon object width minimum；
B4, icon object current width minima is judged whether more than predefined icon object width maximum, if
Execution step B5, otherwise execution step B6；
B5, make icon object current width minima=predefined icon object width maximum；
B6, return icon object current width minima.
It is preferred that step C includes：
C1, obtained according to scaling under the first dimension the initial length of icon object, initial separation, initial edge away from；
C2, according to the span of predetermined property, above-mentioned value is modified；
C3, judge whether meet | ranks number-target line columns |<First threshold value, if execution step C4, otherwise performs
Step C5；Wherein, ranks number=(under the first dimension under+the first dimension of initial length of icon object icon object it is initial between
Initial edge away from icon object under the-the first dimension away from）*1.0/（Under first dimension under+the first dimension of initial length of icon object
The initial separation of icon object）；Target line number is that line number value is rounded；
C4, return that the match is successful, upper bottom margin and line space are finely adjusted, and end step C；
C5, judge whether to meet ranks number-target line columns>Reference value, if execution step C6, otherwise execution step
C7；The initial value of reference value is 0.5；
C6, target line columns +=1；Adjusting step Step=-1;Then execution step C9；
C7, Step=1, then execution step C9 are set；
The length of icon object, spacing and back gauge under C8, the first dimension of adjustment；
C9, judge whether meet | current line columns-target line columns |<=the first threshold value, it is if execution step C10, no
Then execution step C11；
C10, return that the match is successful, and upper bottom margin and line space are finely adjusted, and process ends；
C11, judge whether the length of icon object, spacing, back gauge all reach maximum set in advance under the first dimension
Or minima, if so, execution step C12, otherwise return to step C08；
C12, judge whether second call parameters is true, if execution step C13, otherwise execution step C14；
C13, return that the match is successful, fix the length of icon object under the first dimension, icon object under the first dimension of fine setting
Spacing and back gauge, it is allowed to which the two values exceed span, then end step C；
C14, Step is judged whether more than 0, if execution step C15, otherwise execution step C16；
C15, second call parameters of setting are true, and it is 0.99 to arrange reference value, is then back to step C1；
C16, second call parameters of setting are true;It is 0.01 to arrange reference value, is then back to step C1.
It is preferred that first threshold value is 0.01.
It is preferred that first dimension is height, step C8 includes：
C8-1, make Int i=0;The upper bottom margins of Temp=；
Bottom margin +=step, i++ on C8-2, order；
On C8-3, judgement, whether bottom margin exceedes the upper bottom margin span for pre-setting, if so, execution step C8-
7, otherwise execution step C8-4；
C8-4, judge whether meet | current line columns-target line columns |<=the first threshold value, if execution step C8-
5, otherwise execution step C8-6；
C8-5, judge whether i<5, if execution step C8-7, otherwise return to step C8-2；
C8-7, make line space +=step；
C8-8, judge that whether line space exceedes the line space span for pre-setting, if so, execution step C8-16, no
Execution step C8-9；
C8-9, make i=0;Upper bottom margin=Temp；
C8-10, upper bottom margin +=step;i++；
C8-11, judge whether that the match is successful, if execution step C8-12, otherwise execution step C8-13；
C8-12, return that the match is successful, bottom margin and line space in fine setting, and process ends；
C8-13, make line space +=step；
C8-14, judge whether line space transfinites, if execution step C8-16, otherwise execution step C8-15；
C8-15, judge whether i<10, if execution step C8-16, otherwise execution step C8-8；
C8-16, make icon height +=step;
C8-17, judge that icon is high and whether exceed the high span of icon for pre-setting, it is if execution step C8-20, no
Then execution step C8-18；
C8-18, judge whether that the match is successful, if execution step C8-19, otherwise execution step C8-20；
On C8-20, judgement, bottom margin, line space, icon are high, if all transfinite, if so, execution step C8-21, otherwise
Return to step C8-1；
C8-21, return that it fails to match, and process ends.
It is preferred that described in step C4 pair upper bottom margin and line space be finely adjusted including,
C4-1, according to screen it is high, icon is high, line space, bottom margin in calculating；
Wherein, the high * icon objects line number-line space * of upper bottom margin sum=screen height-icon（Icon object line number -1）；
On C4-2, judgement, whether bottom margin exceedes the span of upper bottom margin set in advance, if execution step C4-
3, otherwise return and finely tune successfully simultaneously process ends；
If C4-3, upper bottom margin are less than upper bottom margin minima set in advance, upper bottom margin is set to upper following
Away from minima, if upper bottom margin is more than upper bottom margin maximum set in advance, upper bottom margin is set to into upper bottom margin maximum
Value；
C4-4, according to screen it is high, icon is high, upper bottom margin, calculates line space；
C4-5, judge that whether line space exceedes line space span set in advance, if execution step 706, otherwise
Simultaneously process ends are finely tuned successfully in return；
C4-6, make Int i=0;The upper bottom margins of Temp=；
Bottom margin +=step on C4-7, order；i++；
C4-8, judge whether | current line columns-target line columns |<=the first threshold value, if returning fine setting success and tying
Beam this flow process；Otherwise execution step C4-9；
C4-9, judge whether i<1, if execution step C4-10, otherwise return to step C4-7；
C4-10, line space +=step is made, between the upper and lower away from=Temp+step；
C4-11, judge whether that the match is successful, if return finely tune successfully simultaneously process ends, otherwise return to step C4-6.
The embodiment of the present application additionally provides a kind of device based on screen resolution self-adaptative adjustment interface layout, the device
Including：
Predefined parameter module, for setting resolution based on a kind of resolution, defines based on base resolution
The default size parameter and default location parameter of icon object, and its span, and the deviation range allowed during scaling；
Zoom module, for calculating scaling according to current resolution and base resolution, and according to scaling with
And the default size parameter and default location parameter of the icon object, calculate the dimensional parameters of icon object under current resolution
With the span of location parameter；
First dimension computing module, it is for less dimension in current resolution as the first dimension, long according to the first dimension
Degree, scaling and above-mentioned default size parameter and default location parameter and its span, calculate in first dimension figure below
The number of the optimal size parameter, optimal location parameter and icon object of mark object；
Second dimension computing module, for the optimal size parameter according to icon object under the first dimension, obtains the second dimension
The optimal size parameter of the lower icon object of degree；According to icon object under second dimension and the second dimension of current resolution most
Excellent dimensional parameters, calculate the optimal location parameter and icon object number of icon object under the second dimension；
Interface layout determining module, for according to the optimal size parameter of icon object, optimum position under first dimension
Put the optimal size parameter of icon object under the number of parameter and icon object, and the second dimension, optimal location parameter with
And icon object number, obtain current interface layout.
It is preferred that the base resolution is 1920 × 1080.
It is preferred that the Zoom module is using the ratio of the first dimension of current resolution and base resolution minor face as contracting
Put ratio.
It is preferred that the dimensional parameters of icon object include the height of the width and icon object of icon object；Icon object
Location parameter include the line space of icon object, column pitch, top margin, bottom margin, the left side away from and rightmargin.
As can be seen from the above technical solutions, the best image scheme under base resolution is defined, according to current resolution
With the scaling for defining resolution, dynamic calculation goes out the wide, high of current icon object, column pitch, left and right back gauge, obtains
A line shows several icon objects, then dynamic line space, upper bottom margin again, obtains string and shows several icon objects, so as to
Reach dynamic and generate optimum interface layout.Technical scheme is directed to different resolution, it is only necessary to a set of picture resource；And
Be not in that picture is twisted pulled out condition；And under differentiating to difference, display effect all meets ordinary people's visual custom, show
Best results.
Description of the drawings
Screen interface schematic layout patterns of the Fig. 1 for mobile digital equipment；
The method overall procedure based on screen resolution self-adaptative adjustment interface layout that Fig. 2 is provided for the embodiment of the present application
Schematic diagram；
Fig. 3 be calculate scaling in flow process shown in Fig. 2 described in step 201 implement process schematic；
Fig. 4 calculates the flow process of each attribute span under current resolution described in step 202 in flow process shown in Fig. 2 and illustrates
Figure；
Fig. 5 is the optimum icon object height of calculating described in step 204, line space, upper bottom margin, icon in flow process shown in Fig. 2
The line number of object implements process schematic；
Fig. 6 is to adjust icon height, line space, upper bottom margin in flow process shown in Fig. 5 described in step 508 to implement flow process
Schematic diagram；
Fig. 7 rear realizations for realizing flow process for finely tuning upper bottom margin and line space for the match is successful in flow process shown in Fig. 5 or Fig. 6
Schematic flow sheet.
Specific embodiment
The screen shape of portable digital equipment is two-dimensional rectangle, and resolution is M × N, and Fig. 1 shows mobile digital equipment
Screen interface layout, one icon object of each of which box indicating.The square frame is only the arrangement mode for illustrating icon object,
Not to limit the shape of icon object.As shown in figure 1, interface layout includes m × n icon object, all icon objects
Size be all consistent, top margin represents the distance for most going up the top edge Yu screen top edge of row's icon object, the left side away from
The distance of the most left hand edge of the first from left row icon object and screen left hand edge is represented, rightmargin represents the right side of most right string icon object
The distance at edge and screen right hand edge, bottom margin represent the distance of the most lower limb of next row icon object and screen lower limb,
Line space represents the Edge Distance between adjacent rows icon object, and column pitch represents the edge between adjacent two row icon object
Distance, icon is wide to represent the distance between icon object left and right edges, and icon is high to represent an icon object upper and lower two
The distance between edge.
The method based on screen resolution self-adaptative adjustment interface layout that the application is provided, its fundamental design idea is：
Resolution based on A, a kind of resolution of setting, defines the default size of the icon object based on base resolution
Parameter and default location parameter, and its span, and the deviation range allowed during scaling；
B, scaling is calculated according to current resolution and base resolution, and according to scaling and the icon pair
The default size parameter and default location parameter of elephant, calculates the dimensional parameters and location parameter of icon object under current resolution
Span；
C, with less dimension in current resolution as the first dimension, according to the first dimension length, scaling and above-mentioned
Default size parameter and default location parameter and its span, calculate the optimal size ginseng of the icon object under the first dimension
The number of number, optimal location parameter and icon object；
D, according to the optimal size parameter of icon object under the first dimension, obtain the optimum chi of icon object under the second dimension
Very little parameter；
E, according to the optimal size parameter of icon object under second dimension and the second dimension of current resolution, calculate the
The optimal location parameter and icon object number of icon object under two-dimensionses；
F, according to the optimal size parameter of icon object, optimal location parameter and icon object under first dimension
Under number, and the second dimension, the optimal size parameter of icon object, optimal location parameter and icon object number, are worked as
Front interface layout.
Wherein, the first dimension and the second dimension are that the dimensional parameters of icon object include the width and figure of icon object respectively
The height of mark object；The location parameter of icon object includes the line space of icon object, column pitch, top margin, bottom margin, the left side
Away from and rightmargin.
To make know-why, feature and the technique effect of technical scheme clearer, below in conjunction with concrete reality
Apply example to be described in detail technical scheme.
Method overall procedure such as Fig. 2 based on screen resolution self-adaptative adjustment interface layout that the embodiment of the present application is provided
It is shown, including：
Step 201：According to screen current resolution, scaling is calculated.
Step 202：According to predefined parameter, each attribute span under current resolution is calculated.
Step 203：Screen width is judged whether more than height, if execution step 204, otherwise execution step 207.
For the width is relative digital equipment screen display direction with height.It is known in the art that digital equipment screen can be with
Have multiple display directions, display direction as shown in Figure 1, screen it is longer as width, shorter one side is used as height；And be somebody's turn to do
Another display direction of screen, then screen it is longer as height, shorter one side is used as width.
Step 204：According to the resolution in present level direction, calculate optimum：Icon object height, line space, upper bottom margin,
The line number of icon object.
Step 205：It is high according to icon object, obtain current icon object width.Due between the length and width of icon object
There is the proportionate relationship of determination, therefore the step is easily achieved.
Step 206：According to current resolution width, icon width, calculate optimum：Column pitch, left and right margins, icon columns.So
Execution step 210 afterwards.
Step 207：According to current resolution width, current icon width, column pitch, left and right margins, icon columns are calculated.
Step 208：According to icon width, current icon is obtained high；
Step 209：High according to current resolution, icon is high, calculates optimum：Line space, upper bottom margin, icon line number.
Step 210：According to icon width, icon height, column pitch, line space, left and right margins, upper bottom margin, line number, columns,
Obtain current page layout.
Process is further described is realized to each step in Fig. 2 below by way of specific embodiment.
In flow process shown in Fig. 2, scaling is calculated described in step 201 implements process as shown in figure 3, including as follows
Step：
Step 301：Relatively current resolution width, height, obtain most minor face.
Step 302：Current zoom ratio is determined according to most minor face resolution and base resolution minor face ratio.
In the embodiment of the present application, base resolution is set as 1920 × 1080, therefore the step is exactly to calculate most minor face point
The value of resolution/1080.0.
In flow process shown in Fig. 2, calculate described in step 202
Parameter have：Current icon width minima, current icon width maximum；The high minima of current icon, the high maximum of current icon；
Current line space minima, current line spacing maximum；Current column pitch minima, current column pitch maximum；Work as front left and right
Back gauge minima, current left and right margins maximum；When front upper and lower back gauge minima, when front upper and lower back gauge maximum.Wherein, calculate
Current icon width minima realizes flow process as shown in figure 4, comprising the steps：
Step 401：Make the wide * scalings * of the wide minima=default icon of current icon 0.95.
Step 402：Whether current icon width minimum value is judged less than icon width minima, if execution step 403, no
Then execution step 404.
Step 403：Make current icon width minimum value=icon width minima.
Step 404：Whether current icon width minimum value is judged more than icon width maximum, if execution step 405, no
Then execution step 406.
Step 405：Current icon width minimum value=icon width maximum.
Step 406：Return current icon width minima.
The process for calculating other specification maximum/minimum is similar with flow process shown in Fig. 4, and those skilled in the art are according to figure
4 flow processs can be easy to the calculating process for being inferred to other specification maximum/minimum, therefore no longer repeat one by one.
In flow process shown in Fig. 2, optimum icon object height, line space, upper bottom margin, icon object described in step 204, are calculated
Line number implement process as shown in figure 5, comprising the steps：
Step 501：Obtained according to scaling：Icon height, line space, upper bottom margin；
Step 502：According to the span of predetermined property, above-mentioned value is modified；
Step 503：Judge whether to meet | line number-target line number |<First threshold value, if execution step 504, otherwise holds
Row step 505.
Wherein, the type of line number is Double, is calculated according to equation below：Line number=(height+line space-upper bottom margin）*
1.0/（Icon height+line space）；Target line number is that line number value is rounded.In the embodiment of the present application, the first threshold value=0.01.
Step 504：The match is successful for return, and upper bottom margin and line space are finely adjusted, and process ends.
Step 505：Judge whether to meet ranks number-target line columns>Reference value, if execution step 506, otherwise performs
Step 507.
The reference value can be set according to practical situation, and in the embodiment of the present application, the initial value of reference value is 0.5.
Step 506：Target line columns +=1;Step=-1;Then execution step 509；Step is adjusting step；
Step 507：Step=1 is set, then execution step 509.
Step 508：In adjustment, bottom margin, line space, icon are high
Step 509：Judge whether that the match is successful, if execution step 510, otherwise execution step 511.
The implication that the match is successful is exactly to meet | current line columns-target line columns |<=the first threshold value.
Step 510：The match is successful for return, and upper bottom margin and line space are finely adjusted, and process ends.
Step 511：In judgement, whether bottom margin, line space, icon height all reach maximum or minima, if so, perform
Step 512, otherwise return to step 508.
Step 512：Judge whether second call parameters is true, if execution step 513, otherwise execution step 514.
The initial value of second call parameters is false.
Step 513：The match is successful, and anchor icon is high, fine setting line space, upper bottom margin, it is allowed to which the two values exceed value
Scope, then process ends.The process that implements of this step refers to Fig. 7.
Step 514：Step is judged whether more than 0, if execution step 515, otherwise execution step 516.
Step 515：It is true to arrange second call parameters, and it is 0.99 to arrange reference value, is then back to step 501.
Step 516：It is true to arrange second call parameters;It is 0.01 to arrange reference value, is then back to step 501.
In flow process shown in Fig. 5, icon height, line space, the flow process that implements of upper bottom margin are adjusted described in step 508 and is such as schemed
Shown in 6, comprise the steps：
Step 601：Make Int i=0;The upper bottom margins of Temp=；
Step 602：Bottom margin +=step, i++ in order；
Step 603：In judgement, whether bottom margin exceedes the upper bottom margin span for pre-setting.If so, execution step
607, otherwise execution step 604；
Step 604：Judge whether that the match is successful, if execution step 605, otherwise execution step 606；It is i.e. full that the match is successful
Foot | current line columns-target line columns |<=the first threshold value；
Step 605：Judge whether i<5, if execution step 607, otherwise return to step 602；
Step 607：Make line space +=step；
Step 608：Judge whether line space exceedes the line space span for pre-setting, if so, execution step 616,
No execution step 609；
Step 609：Make i=0;Upper bottom margin=Temp；
Step 610：Upper bottom margin +=step;i++；
Step 611：Judge whether that the match is successful, if execution step 612, otherwise execution step 613；
Step 612：The match is successful for return, bottom margin and line space in fine setting, and process ends；
Step 613：Make line space +=step；
Step 614：Judge whether line space transfinites, if execution step 616, otherwise execution step 615；
Step 615：Judge whether i<10, if execution step 616, otherwise execution step 608；
Step 616：Make icon height +=step;
Step 617：Judge that icon is high and whether exceed the high span of icon for pre-setting, if execution step 620, no
Then execution step 618；
Step 618：Judge whether that the match is successful, if execution step 619, otherwise execution step 620.
Step 620：In judgement, bottom margin, line space, icon are high, if all transfinite, if so, execution step 621, otherwise
Return to step 601；
Step 621：It fails to match for return, and process ends.
Flow process shown in Fig. 6 is prosthetic method, is referred to it is determined that final：Icon height, line space, upper bottom margin all exceed
After maximum or minimum limit scope, the adjustment of optimum how is carried out." the upper bottom margin " of 10 times is adjusted first, if all do not had into
Work(, that just adjusts once " line space ".And " upper bottom margin " is reduced into the value before adjustment and is adjusted once.The benefit of do so
It is exactly that icon height does not deviate by too big without departing from restriction, the then ratio of going beyond the scope of line space and upper bottom margin.
In above-mentioned flow process, the upper bottom margin of fine setting and line space realizes flow process as shown in fig. 7, comprises as follows after the match is successful
Step：
Step 701：According to screen height, icon height, line space, bottom margin in calculating；
The high * icon objects line number-line space * of upper bottom margin sum=screen height-icon（Icon object line number -1）, due to
Upper bottom margin has fixed accounting, can obtain top margin and bottom margin according to upper bottom margin sum；
Step 702：In judgement, whether bottom margin transfinites, if execution step 703, otherwise returns fine setting success and terminates this
Flow process；
Step 703：Upper bottom margin is modified；Because, beyond maximum, minimum zone, the amendment is just for upper bottom margin
It is that current upper bottom margin is arranged to into its maximum or minima；
Step 704：According to screen it is high, icon is high, upper bottom margin, calculates line space；
Step 705：Judge whether line space transfinites, if execution step 706, otherwise return fine setting success and terminate this stream
Journey；
Step 706：Make Int i=0;The upper bottom margins of Temp=；
Step 707：Bottom margin +=step in order；i++；
Step 708：Judge whether that the match is successful, if return finely tuning successfully simultaneously process ends；Otherwise execution step
709；The match is successful meets | current line columns-target line columns |<=the first threshold value；
Step 709：Judge whether i<1, if execution step 710, otherwise return to step 707；
Step 710：Line space +=step is made, between the upper and lower away from=Temp+step；
Step 711：Judge whether that the match is successful, if return finely tuning successfully simultaneously process ends, otherwise return to step
706。
In Fig. 2, step 207 calculates current icon width, column pitch, left and right margins, icon columns and realizes the process with above-mentioned stream
Journey is consistent, only maximum, the minimum spans difference of parameter difference, respective attributes.Additionally, basis is worked as described in step 206
Front resolution width, icon width calculate optimum：Column pitch, left and right margins, icon columns are realized described in process and step 209
High according to current resolution, icon is high, calculates optimum：Line space, upper bottom margin, icon line number realize process also with Fig. 5 institutes
Show flow process be similar to, only secure the wide or high of icon, then only to remaining column pitch, left and right margins or line space, on
Bottom margin is calculated.
The embodiment of the present application additionally provides a kind of device based on screen resolution self-adaptative adjustment interface layout, the device
Including：
Predefined parameter module, for setting resolution based on a kind of resolution, defines based on base resolution
The default size parameter and default location parameter of icon object, and its span, and the deviation range allowed during scaling；
Zoom module, for calculating scaling according to current resolution and base resolution, and according to scaling with
And the default size parameter and default location parameter of the icon object, calculate the dimensional parameters of icon object under current resolution
With the span of location parameter；
First dimension computing module, it is for less dimension in current resolution as the first dimension, long according to the first dimension
Degree, scaling and above-mentioned default size parameter and default location parameter and its span, calculate in first dimension figure below
The number of the optimal size parameter, optimal location parameter and icon object of mark object；
Second dimension computing module, for the optimal size parameter according to icon object under the first dimension, obtains the second dimension
The optimal size parameter of the lower icon object of degree；According to icon object under second dimension and the second dimension of current resolution most
Excellent dimensional parameters, calculate the optimal location parameter and icon object number of icon object under the second dimension；
Interface layout determining module, for according to the optimal size parameter of icon object, optimum position under first dimension
Put the optimal size parameter of icon object under the number of parameter and icon object, and the second dimension, optimal location parameter with
And icon object number, obtain current interface layout.
Technical scheme is directed to different resolution, it is only necessary to a set of picture resource；And be not in that picture is twisted
Pulled out condition；And under differentiating to difference, display effect all meets ordinary people's visual custom, and display effect is optimal.
The foregoing is only the preferred embodiment of the application, not to limit the protection domain of the application, it is all
Within the spirit and principle of technical scheme, any modification, equivalent substitution and improvements done etc. should be included in this Shen
Within the scope of please protecting.
Claims (12)
1. a kind of method based on screen resolution self-adaptative adjustment interface layout, it is characterised in that include：
Resolution based on A, a kind of resolution of setting, defines the default size parameter of the icon object based on base resolution
With default location parameter, and its span, and the deviation range allowed during scaling；
B, scaling is calculated according to current resolution and base resolution, and according to scaling and the icon object
Default size parameter and default location parameter, calculate the dimensional parameters and the value of location parameter of icon object under current resolution
Scope；
C, with less dimension in current resolution as the first dimension, according to the first dimension length, scaling and above-mentioned acquiescence
Dimensional parameters and default location parameter and its span, calculate the optimal size parameter of icon object, most under the first dimension
The number of excellent location parameter and icon object；
D, the optimal size ginseng for according to the optimal size parameter of icon object under the first dimension, obtaining icon object under the second dimension
Number；
E, according to the optimal size parameter of icon object under second dimension and the second dimension of current resolution, calculate second and tie up
The optimal location parameter and icon object number of the lower icon object of degree；
F, according to the number of the optimal size parameter, optimal location parameter and icon object of icon object under first dimension
The optimal size parameter of icon object, optimal location parameter and icon object number under mesh, and the second dimension, obtain current
Interface layout；
Wherein the first dimension and the second dimension are the dimensional parameters of icon object respectively；
The span that icon object size parameter under current resolution is calculated described in step B includes：
B1, make icon object current width minima=icon object acquiescence width × scaling × 0.95；
B2, icon object current width minima is judged whether less than predefined icon object width minimum, if being carried out
Step B3, otherwise execution step B4；
B3, make icon object current width minima=predefined icon object width minimum；
B4, icon object current width minima is judged whether more than predefined icon object width maximum, if being carried out
Step B5, otherwise execution step B6；
B5, make icon object current width minima=predefined icon object width maximum；
B6, return icon object current width minima.
2. method according to claim 1, it is characterised in that the base resolution is 1920 × 1080.
3. method according to claim 1, it is characterised in that according to current resolution and base resolution described in step B
Calculating scaling is：Ratio using the first dimension of current resolution and base resolution minor face is used as scaling.
4. method according to claim 1, it is characterised in that the dimensional parameters of icon object include the width of icon object
With the height of icon object；The location parameter of icon object include the line space of icon object, column pitch, top margin, bottom margin,
The left side away from and rightmargin.
5. method according to claim 4, it is characterised in that step C includes：
C1, obtained according to scaling under the first dimension the initial length of icon object, initial separation, initial edge away from；
C2, according to the span of predetermined property, above-mentioned value is modified；
C3, judge whether meet | ranks number-target line columns |<First threshold value, if execution step C4, otherwise execution step
C5；Wherein, ranks number=(under the first dimension under+the first dimension of initial length of icon object icon object initial separation-the
Under dimension the initial edge of icon object away from) * 1.0/ (icon under+the first dimension of initial length of icon object under the first dimension
The initial separation of object)；Target line number is that line number value is rounded；
C4, return that the match is successful, upper bottom margin and line space are finely adjusted, and end step C；
C5, judge whether to meet ranks number-target line columns>Reference value, if execution step C6, otherwise execution step C7；Ginseng
The initial value for examining value is 0.5；
C6, target line columns +=1；Adjusting step Step=-1；Then execution step C8；
C7, Step=1, then execution step C8 are set；
The length of icon object, spacing and back gauge under C8, the first dimension of adjustment；
C9, judge whether meet | current line columns-target line columns |<=the first threshold value, if execution step C10, otherwise
Execution step C11；
C10, return that the match is successful, and upper bottom margin and line space are finely adjusted, and process ends；
C11, judge under the first dimension whether the length of icon object, spacing, back gauge all reach maximum set in advance or most
Little value, if so, execution step C12, otherwise return to step C08；
C12, judge whether second call parameters is true, if execution step C13, otherwise execution step C14；
C13, return that the match is successful, fix the length of icon object under the first dimension, icon object spacing under the first dimension of fine setting
And back gauge, it is allowed to the two values exceed span, then end step C；
C14, Step is judged whether more than 0, if execution step C15, otherwise execution step C16；
C15, second call parameters of setting are true, and it is 0.99 to arrange reference value, is then back to step C1；
C16, second call parameters of setting are true；It is 0.01 to arrange reference value, is then back to step C1.
6. method according to claim 5, it is characterised in that first threshold value is 0.01.
7. method according to claim 5, it is characterised in that first dimension is height, step C8 includes：
C8-1, make Int i=0；The upper bottom margins of Temp=；
Bottom margin +=step, i++ on C8-2, order；
On C8-3, judgement, whether bottom margin exceedes the upper bottom margin span for pre-setting, and if so, execution step C8-7, no
Then execution step C8-4；
C8-4, judge whether meet | current line columns-target line columns |<=the first threshold value, it is if execution step C8-5, no
Then execution step C8-6；
C8-5, the match is successful, bottom margin in fine setting；
C8-6, judge whether i<5, if execution step C8-7, otherwise return to step C8-2；
C8-7, make line space +=step；
C8-8, judge that whether line space exceedes the line space span for pre-setting, if so, execution step C8-16, no execution
Step C8-9；
C8-9, make i=0；Upper bottom margin=Temp；
C8-10, upper bottom margin +=step；i++；
C8-11, judge whether that the match is successful, if execution step C8-12, otherwise execution step C8-13；
C8-12, return that the match is successful, bottom margin and line space in fine setting, and process ends；
C8-13, make line space +=step；
C8-14, judge whether line space transfinites, if execution step C8-16, otherwise execution step C8-15；
C8-15, judge whether i<10, if execution step C8-16, otherwise execution step C8-8；
C8-16, make icon height +=step；
C8-17, judge that icon is high and whether exceed the high span of icon for pre-setting, if execution step C8-20, otherwise hold
Row step C8-18；
C8-18, judge whether that the match is successful, if execution step C8-19, otherwise execution step C8-20；
C8-19, the match is successful, and in fine setting, bottom margin, line space and icon are high；
On C8-20, judgement, bottom margin, line space, icon are high, if all transfinite, if so, execution step C8-21, otherwise returns
Step C8-1；
C8-21, return that it fails to match, and process ends.
8. method according to claim 5, it is characterised in that pair upper bottom margin and line space are finely adjusted described in step C4
Including,
C4-1, according to screen it is high, icon is high, line space, bottom margin in calculating；
Wherein, the high * icon objects line number-line space * (icon object line number -1) of upper bottom margin sum=screen height-icon；
On C4-2, judgement, whether bottom margin exceedes the span of upper bottom margin set in advance, if execution step C4-3, no
Then return and finely tune successfully simultaneously process ends；
If C4-3, upper bottom margin are less than upper bottom margin minima set in advance, upper bottom margin is set to into upper bottom margin most
Upper bottom margin, if upper bottom margin is more than upper bottom margin maximum set in advance, is set to upper bottom margin maximum by little value；
C4-4, according to screen it is high, icon is high, upper bottom margin, calculates line space；
C4-5, judge that whether line space exceedes line space span set in advance, if execution step C4-6, otherwise return
Finely tune successfully and process ends；
C4-6, make Int i=0；The upper bottom margins of Temp=；
Bottom margin +=step on C4-7, order；i++；
C4-8, judge whether | current line columns-target line columns |<=the first threshold value, if returning fine setting success and terminating
This flow process；Otherwise execution step C4-9；
C4-9, judge whether i<10, if execution step C4-10, otherwise return to step C4-7；
C4-10, line space +=step is made, between the upper and lower away from=Temp+step；
C4-11, judge whether that the match is successful, if return finely tune successfully simultaneously process ends, otherwise return to step C4-6.
9. a kind of device based on screen resolution self-adaptative adjustment interface layout, it is characterised in that the device includes：
Predefined parameter module, for setting resolution based on a kind of resolution, defines the icon based on base resolution
The default size parameter and default location parameter of object, and its span, and the deviation range allowed during scaling；
Zoom module, for calculating scaling with base resolution according to current resolution, and according to scaling and institute
The default size parameter and default location parameter of icon object are stated, the dimensional parameters of icon object and position under current resolution is calculated
Put the span of parameter；The span for wherein calculating icon object size parameter under current resolution includes：B1, make icon
Object current width minima=icon object acquiescence width × scaling × 0.95；B2, judge icon object current width
Whether minima is less than predefined icon object width minimum, if execution step B3, otherwise execution step B4；B3, order
Icon object current width minima=predefined icon object width minimum；B4, judge icon object current width most
Whether little value is more than predefined icon object width maximum, if execution step B5, otherwise execution step B6；B5, order figure
Mark object current width minima=predefined icon object width maximum；B6, return icon object current width are minimum
Value；
First dimension computing module, for less dimension in current resolution as the first dimension, according to the first dimension length, contracting
Ratio and above-mentioned default size parameter and default location parameter and its span are put, the icon object under the first dimension is calculated
Optimal size parameter, optimal location parameter and icon object number；
Second dimension computing module, for the optimal size parameter according to icon object under the first dimension, obtains under the second dimension
The optimal size parameter of icon object；According to the optimum chi of icon object under second dimension and the second dimension of current resolution
Very little parameter, calculates the optimal location parameter and icon object number of icon object under the second dimension；
Interface layout determining module, for according to the optimal size parameter of icon object, optimal location ginseng under first dimension
The number of number and icon object, and the optimal size parameter of icon object, optimal location parameter and figure under the second dimension
Mark object number, obtains current interface layout；
Wherein the first dimension and the second dimension are the dimensional parameters of icon object respectively.
10. device according to claim 9, it is characterised in that the base resolution is 1920 × 1080.
11. devices according to claim 9, it is characterised in that the Zoom module is with the first dimension of current resolution
With the ratio of base resolution minor face as scaling.
12. devices according to claim 9, it is characterised in that the dimensional parameters of icon object include the width of icon object
The height of degree and icon object；The location parameter of icon object includes the line space of icon object, column pitch, top margin, following
Away from, the left side away from and rightmargin.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410134649.2A CN103927143B (en) | 2014-04-04 | 2014-04-04 | Method and device for adaptively adjusting interface layout on basis of screen resolution |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410134649.2A CN103927143B (en) | 2014-04-04 | 2014-04-04 | Method and device for adaptively adjusting interface layout on basis of screen resolution |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN103927143A CN103927143A (en) | 2014-07-16 |
| CN103927143B true CN103927143B (en) | 2017-04-19 |
Family
ID=51145377
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410134649.2A Active CN103927143B (en) | 2014-04-04 | 2014-04-04 | Method and device for adaptively adjusting interface layout on basis of screen resolution |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN103927143B (en) |
Families Citing this family (23)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104238890B (en) * | 2014-09-19 | 2018-11-23 | 小米科技有限责任公司 | Character displaying method and device |
| CN105550980B (en) * | 2014-10-29 | 2018-11-27 | 阿里巴巴集团控股有限公司 | A kind of Picture Generation Method and relevant apparatus |
| CN104461549B (en) * | 2014-12-15 | 2018-09-18 | 北京国双科技有限公司 | The arrangement display methods and device of graphical interfaces |
| CN104808928A (en) * | 2015-03-02 | 2015-07-29 | 百度在线网络技术（北京）有限公司 | Method and device for adjusting trigger element in terminal |
| CN105282321A (en) * | 2015-08-28 | 2016-01-27 | 上海健保科技有限公司 | Adaption method of application software user interface and display device |
| CN105225201B (en) * | 2015-09-06 | 2018-07-06 | 网易（杭州）网络有限公司 | A kind of method and system for showing object adaptive resolution and showing |
| CN105159645B (en) * | 2015-10-19 | 2017-12-12 | 华中师范大学 | A kind of mobile terminal Tang poetry self-adaptive layout method |
| CN105426144B (en) * | 2015-11-02 | 2019-03-29 | 上海聚力传媒技术有限公司 | A kind of method and apparatus of the adaptive multiresolution of test application program |
| CN105392042A (en) * | 2015-11-13 | 2016-03-09 | 天脉聚源(北京)传媒科技有限公司 | Menu display method and menu display device |
| CN105578268B (en) * | 2015-12-17 | 2019-03-01 | 深圳Tcl数字技术有限公司 | Image display method and device |
| CN105867901A (en) * | 2015-12-25 | 2016-08-17 | 乐视致新电子科技（天津）有限公司 | Application icon adjustment method and apparatus |
| CN106980622B (en) * | 2016-01-18 | 2020-08-25 | 青岛海信移动通信技术股份有限公司 | Folder processing method and device |
| CN105959825A (en) * | 2016-04-29 | 2016-09-21 | 乐视控股（北京）有限公司 | Vertical full screen playing method and device and mobile playing terminal thereof |
| CN105959610A (en) * | 2016-06-20 | 2016-09-21 | 乐视控股（北京）有限公司 | Image display method and terminal device |
| CN108664194B (en) * | 2017-03-29 | 2021-08-06 | 中兴通讯股份有限公司 | Display method and device |
| CN109871162B (en) * | 2017-12-05 | 2021-03-05 | 深圳市超捷通讯有限公司 | Electronic device and icon display method |
| CN108388463B (en) * | 2018-03-02 | 2021-02-02 | 平安普惠企业管理有限公司 | Icon processing method and device, computer equipment and storage medium |
| CN108984253A (en) * | 2018-06-29 | 2018-12-11 | 奇酷互联网络科技（深圳）有限公司 | Application Program Interface display methods, device, readable storage medium storing program for executing and mobile terminal |
| CN109408165A (en) * | 2018-09-19 | 2019-03-01 | 浙江省测绘科学技术研究院 | The multiple terminal self-adapting method and system of data visualisation system |
| CN110662088B (en) * | 2019-09-24 | 2020-05-15 | 广州优视云集科技有限公司 | Duplicate removal method and processing terminal for preventing video from being transcoded repeatedly |
| CN113010252B (en) * | 2021-03-19 | 2022-08-09 | 掌阅科技股份有限公司 | Application page display method, electronic equipment and storage medium |
| CN117008752A (en) * | 2022-04-28 | 2023-11-07 | 华为技术有限公司 | Display method, device and storage medium |
| CN115061653A (en) * | 2022-06-14 | 2022-09-16 | 统信软件技术有限公司 | Method and device for adjusting scaling based on resolution and computing equipment |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1746843A (en) * | 2004-09-08 | 2006-03-15 | 英业达股份有限公司 | Window and icon set system and method |
| CN101188712A (en) * | 2007-12-21 | 2008-05-28 | 康佳集团股份有限公司 | A processing method for page self-adapted display |
| CN102662563A (en) * | 2012-03-14 | 2012-09-12 | 广东威创视讯科技股份有限公司 | Window resolution self-adaption processing method and device |
| CN102981793A (en) * | 2012-11-22 | 2013-03-20 | Tcl集团股份有限公司 | Screen synchronization method and device |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| DE102012004327A1 (en) * | 2012-03-07 | 2013-09-12 | Mobotix Ag | Method for the parameter modification of parameterizable functions by means of data processing devices |
-
2014
- 2014-04-04 CN CN201410134649.2A patent/CN103927143B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1746843A (en) * | 2004-09-08 | 2006-03-15 | 英业达股份有限公司 | Window and icon set system and method |
| CN101188712A (en) * | 2007-12-21 | 2008-05-28 | 康佳集团股份有限公司 | A processing method for page self-adapted display |
| CN102662563A (en) * | 2012-03-14 | 2012-09-12 | 广东威创视讯科技股份有限公司 | Window resolution self-adaption processing method and device |
| CN102981793A (en) * | 2012-11-22 | 2013-03-20 | Tcl集团股份有限公司 | Screen synchronization method and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN103927143A (en) | 2014-07-16 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN103927143B (en) | Method and device for adaptively adjusting interface layout on basis of screen resolution | |
| EP2613292B1 (en) | Apparatus and method for scaling layout of application in image display device | |
| US8847927B2 (en) | Information processing apparatus and computer-readable storage medium having stored therein information processing program | |
| CN105678684B (en) | Method and device for intercepting image | |
| JP5496032B2 (en) | Tactile sensation presentation apparatus and control method for tactile sensation presentation apparatus | |
| CN105912336A (en) | Multi-screen adaptive method for mobile terminal front-end development | |
| CN105392030A (en) | display apparatus and control method thereof | |
| CN106920475B (en) | Display panel, display device and driving method of display panel | |
| US7876321B2 (en) | Method capable of automatically transforming 2D image into 3D image | |
| US10372289B2 (en) | Wraparound interface layout method, content switching method under three-dimensional immersive environment, and list switching method | |
| TW201004373A (en) | Image resolution adjusting devices, display devices and image resolution adjusting methods | |
| JP3845386B2 (en) | Correction method for off-screen area in geometric correction interface using auxiliary lines | |
| WO2020259338A1 (en) | Screen display method and apparatus | |
| CN103984720A (en) | Tile map establishment method and device based on OpenGL (open graphics library) | |
| JP2020003722A (en) | Image processing apparatus, and control method and program therefor | |
| CN111554218B (en) | Display parameter determination method and device and display equipment | |
| CN107274344B (en) | Map zooming method and system based on resource distribution, memory and control equipment | |
| CN104503725B (en) | A kind of information processing method and electronic equipment | |
| CN102830796A (en) | Method and device for dynamically determining position of window in display device | |
| CN103236042A (en) | Self-adaptive picture processing method and device | |
| CN107820601B (en) | Display control method, display control system and display device | |
| CN104636028A (en) | Information processor | |
| US9460487B2 (en) | Display device and image display method | |
| WO2012092743A1 (en) | Screen display method and device thereof | |
| CN113256485B (en) | Image stretching method, device, electronic equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20170405 Address after: Cangshan District of Fuzhou City, Fujian province 350002 Jinshan Road No. 618 juyuanzhou Ruijie Science Park building 19-22 Patentee after: Fujian Star-net Communication Co., Ltd. Address before: Fuzhou City, Fujian Province, Jinshan Road 350000 No. 618 Ruijie orangery Chau Technology Park building 20 layer four Patentee before: Fujian Starnet e-Video Information System Co., Ltd. |