CN105468382B

CN105468382B - A kind of programmed method of self-adaptive layout

Info

Publication number: CN105468382B
Application number: CN201610068177.4A
Authority: CN
Inventors: 郑哲
Original assignee: Shenzhen Witknow Information Technology Co Ltd
Current assignee: Shenzhen Witknow Information Technology Co Ltd
Priority date: 2016-02-01
Filing date: 2016-02-01
Publication date: 2019-08-06
Anticipated expiration: 2036-02-01
Also published as: CN105468382A

Abstract

The invention discloses a kind of programmed methods of self-adaptive layout, including obtain screen pixel is wide and high, device pixel is wider and high than, horizontal/vertical screen state, the pixel of current window, set adaptive base our unit M0, it allows user to set zoom factor SF again, obtains adaptive base our unit M multiplied by SF with M0；Olo in basic unit calculating standard, fixed class pattern, complementary class pattern, adaptive class pattern, year-on-year class pattern, direct ratio class pattern and font size are done with M, is laid out according to design requirement using different patterns；Elder generation's loading content when operation, then dynamic calculates and the rendering style and layout, screen or window recalculate and the rendering style and layout when changing.This self-adaptive layout programmed method has many advantages, such as that flexible layout multiplicity, adaptivity are strong, is particularly suitable for touch operation.

Description

A kind of programmed method of self-adaptive layout

Technical field

The present invention relates to a kind of programmed methods of self-adaptive layout, belong to software systems user-interface design field, according to We are named as " self-adaptive layout " its feature, and this software design and programming mode are suitable for various Pixel Dimensions, various length The interface layout of the screen of wide ratio, design and programming particularly suitable for touch screen layout.

Background technique

There are various software interfaces designs and its programmed method in current software system, has through pixel value, percentage Object size is set than modes such as, weights, by absolute fix, relative positioning, float positioning setting object's position, by linear The setting object containers such as layout, grid layout, frame layout.But there is same interfaces not to adapt to different pixels size, no With the screen of length-width ratio, suitably sized and change in location, screen can not be made automatically according to the change in screen aspect direction Interface element and font become smaller when pixel density increases, it has not been convenient to which viewing and touch operation, user experience are bad.Also some are programmed Method is coped with layout requirements of the same interface when different screen or screen are rotated using a variety of interfaces, switches interface When needs to save content in current interface, and then for rotation direction into new interface, programing work amount is big, and when operation occupies soft Part system resource.

Summary of the invention

It cannot be neatly in different length-width ratios or different pixels ruler in order to solve existing software interface design and programmed method Be laid out on very little screen with regulating object size position, cannot efficiently screen horizontal/vertical screen switch when be laid out tune Whole, programing work amount is big, when operation the problems such as occupying system resources, only needs a layout the present invention provides a kind of, can be with It is rationally adjusted when being flexibly rapidly laid out on different pixels size, different aspect ratio screens, and meeting horizontal/vertical screen conversion again The programmed method of the self-adaptive layout of whole object size position.

Implement above-mentioned purpose of the present invention and described in the technical solutions adopted are as follows:

A kind of programmed method of self-adaptive layout, includes the following steps:

1) device pixel ratio DPR or screen density (Density), the wide SW of screen pixels, the high SH of screen pixels, vertical and horizontal are obtained The parameters such as screen state, the wide CW of current window pixel, the high CH of current window pixel；

2) according to above equipment parameter setting self-adaptive initial unit M0；

3) set interface selects zoom factor SF for user, and self-adaptive initial unit M0 is obtained multiplied by zoom factor SF Adaptive base our unit M；

4) basic unit is done with M calculate standard olo, spacing, year-on-year class pattern, fixed class pattern, complementary in standard Class pattern, adaptive class pattern, direct ratio class pattern, font size；

5) programming is laid out using different patterns according to design requirement；

6) dynamic calculates and the rendering style and layout again after loading content when running；

7) variation of screen direction and window width is monitored, dynamic calculates and the rendering style and cloth again if changing Office.

Further, take the wide SW of screen pixels or the high SH of screen pixels divided by device pixel ratio DPR or screen density (Density) foundation of the value as the physical size range for judging screen, is divided into several range sections for screen physical size.

Further, in the step 2, self-adaptive initial unit M0 takes suitable according to the range section of screen physical size The value of screen touch operation, self-adaptive initial unit M0 is directly proportional to screen physical size in the same range section.

Further, it is wide to subtract all olos of going together with window width for the width of the year-on-year class pattern series object Value after degree is at fixed proportion relationship.

Further, the width of the fixed class pattern series object is the fixed multiplying power of adaptive base our unit M.

Further, the width of the complementary class pattern series object is that window width subtracts all fixations in same a line The width and olo width of class styled objects divided by complementary class styled objects in the row number.

Further, the adaptive class pattern series object, minimum widith and adaptive base our unit M are proportional, It is minimum divided by that can accommodate the adaptive styled objects that developed width is that window width subtracts the value after going together all olo width The value that the maximum number of width obtains.

Further, the width of the direct ratio class pattern series object and window width are at fixed proportion relationship.

Further, the font size and M are proportional.

From These characteristics it is found that the present invention program has the following advantages compared with existing technical solution:

1, will not because when screen density becomes larger interface element object and font become smaller, but can be according to screen size, side The size and layout for changing interface object to dynamic, preferably show and facilitate touch operation.

2, it can neatly be formed using different patterns according to design requirement, screen space be distributed to pair of needs As.

3, change object size and layout when horizontal/vertical screen switches automatically to adapt to screen.

4, user can change the size of screen object, such as old mode, or remote viewing by setting zoom factor Mode.

5, the pattern of code requirement is combined, and reduces code, and program is more simplified.

As can be seen above, a kind of programmed method of self-adaptive layout of the invention compared with the prior art, can basis The pattern of demand neatly code requirement is combined, and lays out layout pattern abundant, and can be according to screen size and direction Adaptive variation is made, user experience is improved, and since model has advised the type of pattern, reduces the code of pattern, program is more It simplifies.

Detailed description of the invention

Fig. 1 is the principle of the present invention schematic diagram；

Fig. 2 is the method schematic diagram that one embodiment of the invention judges screen physical size range；

Fig. 3 is the above embodiment of the present invention self-adaptive initial unit M0 setting method schematic diagram；

Interface schematic diagram when Fig. 4 is the above embodiment of the present invention vertical screen state；

Fig. 5 be Fig. 4 changing interface to transverse screen state when interface schematic diagram；

Fig. 6 is the setting schematic diagram of the above embodiment of the present invention text size scheme.

Specific embodiment

The principle of the present invention is further described presently in connection with preferred embodiment shown in the drawings.

As shown in Figure 1, the present invention includes the following steps:

1) device pixel ratio DPR or screen density Density, the wide SW of screen pixels, the high SH of screen pixels, horizontal/vertical screen are obtained The parameters such as state, the wide CW of current window pixel, the high CH of current window pixel；

5) it is programmed according to design requirement using different pattern and layout type；

As shown in Figure 2, when one embodiment of the invention is applied to web program, the wide SW of screen pixels and screen pixels are obtained Foundation of the minimum value divided by the value of device pixel ratio DPR as the physical size range for judging screen in high SH；Applied to peace When tall and erect or IOS, the minimum value in the wide SW and high SH of screen pixels of screen pixels is obtained divided by the value conduct of screen density Density Screen physical size is divided into several range sections such as mobile phone, PAD, PC by the foundation for judging the physical size range of screen.

From the figure 3, it may be seen that self-adaptive initial unit M0 takes suitable according to the physical size range section of window in the step 2 The value of screen touch operation, self-adaptive initial unit M0 is directly proportional to screen physical size in the same range section.

By Fig. 4, Fig. 5 it is found that the width and 1 width of window of the year-on-year class pattern series object 11,12 are subtracted and gone together Value after all olo width is at fixed proportion relationship；When screen is transformed into from the vertical screen of Fig. 4 the transverse screen of Fig. 5, olo does not have Become, increased width is divided in portion by object 11 and object 12.

By Fig. 4, Fig. 5 it is found that the width of the fixed class pattern series object 21,22 is adaptive base our unit M Fixed multiplying power, after switching horizontal/vertical screen direction, the width of fixed class pattern does not change.

By Fig. 4, Fig. 5 it is found that the width that the width of the complementary class pattern series object 31 is window 1 subtracts same a line The width and olo width of interior all fixed class styled objects 21 divided by complementary class styled objects 31 in the row number；Switching Behind horizontal/vertical screen direction, the width of fixed class styled objects 21 does not change, and increased range averaging is allocated to complementary class pattern The width of object 31.

By Fig. 4, Fig. 5 it is found that the adaptive class pattern series object 41, minimum widith and adaptive base our unit M Proportional, developed width is that 1 width of window subtracts the value after going together all olo width divided by can accommodate the adaptive pattern The value that the maximum number of 41 minimum widith of object obtains.

By Fig. 4, Fig. 5 it is found that the width and 1 width of window of the direct ratio class pattern series object 51,52,53 are at fixation Proportionate relationship.

It will be appreciated from fig. 6 that the size of the font family and M are proportional.

Compared with the prior art, a kind of programmed method of self-adaptive layout of the present invention compared with the prior art, can With neatly the pattern of code requirement is combined according to demand, layout pattern abundant is laid out, and can be according to screen size Adaptive variation is made with direction, improves user experience, and since model has advised the type of pattern, reduces the code of pattern, Program is more simplified.

The present invention only illustrates some preferred embodiments in the present specification, is not to limit it.The professional technician Design and spirit can make various variations or modification in appearance according to the present invention, such as add the rule of every kind of pattern Other keys are arranged etc. in lattice on the screen.Therefore these should be belonged to the scope of protection of the present invention.

Claims

1. a kind of programmed method of self-adaptive layout, includes the following steps:

1) device pixel ratio DPR or the wide SW of screen density, screen pixels are obtained, the high SH of screen pixels, horizontal/vertical screen state, works as front window The wide CW of mouth pixel, the high CH of current window pixel；

3) set interface selects zoom factor SF for user, self-adaptive initial unit M0 is obtained multiplied by zoom factor SF adaptive Answer basic unit M；

4) basic unit is done with M calculate standard olo, spacing, year-on-year class pattern, fixed class pattern, complementary class sample in standard Formula, adaptive class pattern, direct ratio class pattern, font size；

7) variation of screen direction and window width is monitored, dynamic calculates and the rendering style and layout again if changing；

Take the wide SW of screen pixels or the high SH of screen pixels divided by the value of device pixel ratio DPR or screen density as judging screen Screen physical size is divided into several range sections by the foundation of physical size range；In the step 2, self-adaptive initial unit M0 The value of suitable screen touch operation, the self-adaptive initial unit in the same range section are taken according to the range section of screen physical size M0 is directly proportional to screen physical size.

2. the programmed method of self-adaptive layout according to claim 1, it is characterised in that: the year-on-year class pattern series The width and window width of object subtract the value after going together all olo width into fixed proportion relationship.

3. the programmed method of self-adaptive layout according to claim 1, it is characterised in that: the fixed class pattern series The width of object is the fixed multiplying power of adaptive base our unit M.

4. the programmed method of self-adaptive layout according to claim 1, it is characterised in that: the complementary class pattern series The width of object is that window width subtracts in same a line the width of all fixed class styled objects and olo width divided by the row The number of interior complementary class styled objects.

5. the programmed method of self-adaptive layout according to claim 1, it is characterised in that: the adaptive class pattern series Object, minimum widith and adaptive base our unit M are proportional, and it is wide that developed width subtracts all olos of going together for window width The value that value after degree is obtained divided by the maximum number that can accommodate the adaptive styled objects minimum widith.

6. the programmed method of self-adaptive layout according to claim 1, it is characterised in that: the direct ratio class pattern series The width and window width of object are at fixed proportion relationship.

7. the programmed method of self-adaptive layout according to claim 1, it is characterised in that: the font size and M at Proportional relation.