CN104461249B - The arrangement display methods and device of graphical interfaces - Google Patents
The arrangement display methods and device of graphical interfaces Download PDFInfo
- Publication number
- CN104461249B CN104461249B CN201410779088.1A CN201410779088A CN104461249B CN 104461249 B CN104461249 B CN 104461249B CN 201410779088 A CN201410779088 A CN 201410779088A CN 104461249 B CN104461249 B CN 104461249B
- Authority
- CN
- China
- Prior art keywords
- data content
- square
- icon
- arrangement
- template
- 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
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses the arrangement display methods and device of a kind of graphical interfaces.Wherein, this method includes：Read the screen resolution of screen；Graphical interfaces is divided according to screen resolution, generates arrangement grid；Obtaining needs data content collection to be shown；According to data content collection, obtains and arrange template with the matched square composite of data content collection；Data content collection is arranged template according to square composite to arrange in the form of rectangle icon set data content, generates rectangular display unit；Rectangular display unit is carried out arrangement according to scheduled unit arrangement template to show.The present invention is solved designer, technical staff, consultant and interface in the prior art and is needed to carry out overlapping development for the problem that each front-end interface using user, and caused development efficiency is low, waste of manpower resource.
Description
Technical field
The present invention relates to computer realms, in particular to the arrangement display methods and device of a kind of graphical interfaces.
Background technology
In daily software development process, application developer often after being developed to software function, also wants
Exploitation is designed to front end display interface.In the exploitation debugging stage, not only the reliability of software function is tested, also
The compatibility and aesthetics of front-end interface are verified.
For application developer, the work of designing and developing of front end display interface often can not be handy, very
Difficulty also takes into account aesthetics while ensureing front end display interface compatibility.Every time after being finished to functional development, also to spend
Take the exploitation that a large amount of time and efforts repeats front end display interface, causes the waste of application developer's resource.
Further, if when multiple developers develop the same software, it is difficult to which unified each program is opened
Send out the consistency for the front end display interface that staff development comes out.
For designer, intention the result is that various, from intention generate to final engineering drawing presentation all
It is to need by a large amount of scale conversion and setting.There is a large amount of customization in the design simultaneously and the design of individual character diversification is general
It reads, increases the workload of designer in multi-platform design in this way.For consultant, need largely seek advice from result
The drawing tasks for being converted to the figure being easily understood, the workload for handling graphical interfaces are very huge.User is used with regard to interface
For, it is desirable to learning cost and the implementation cost for making the operation interface with oneself individual character are all very high.
It is needed for each using user for designer in the prior art, technical staff, consultant and interface
The problem of front-end interface carries out overlapping development, and caused development efficiency is low, waste of manpower resource not yet proposes effective solution at present
Certainly scheme.
Invention content
The main purpose of the present invention is to provide the arrangement display methods and device of a kind of graphical interfaces, to solve existing skill
Designer, technical staff, consultant and interface need to carry out repeating to open for each front-end interface using user in art
The problem of hair, caused development efficiency is low, waste of manpower resource.
To achieve the goals above, one side according to the ... of the embodiment of the present invention provides a kind of arrangement of graphical interfaces
Display methods.This method includes：Read the screen resolution of screen；Graphical interfaces is divided according to screen resolution, it is raw
At arrangement grid；Obtaining needs data content collection to be shown；According to data content collection, acquisition is matched with data content collection
Square composite arrange template, wherein square composite arrangement template, will be different size of for being characterized in graphical interfaces
Square icon is combined into rectangle icon set by scheduled icon arrangement, and the arrangement display methods shown, row
Row grid is used to characterize the base unit for calculating each square icon length of side in square composite arrangement template；By data
Properties collection is arranged template according to square composite and is arranged in the form of rectangle icon set to data content, and rectangle is generated
Display unit；Rectangular display unit is carried out arrangement according to scheduled unit arrangement template to show.
To achieve the goals above, another aspect according to the ... of the embodiment of the present invention provides a kind of arrangement of graphical interfaces
Display device, the device include：Read module, the screen resolution for reading screen；First generation module, for according to screen
Curtain resolution ratio divides graphical interfaces, generates arrangement grid；First acquisition module is needed for obtaining in data to be shown
Hold set；Second acquisition module, for according to data content collection, obtaining and being arranged with the matched square composite of data content collection
Row template, wherein square composite arrangement template is for being characterized in graphical interfaces, by different size of square icon by pre-
Fixed icon arrangement is combined into rectangle icon set, and the arrangement display methods shown, and arrangement grid is for characterizing
Base unit in square composite arrangement template for calculating each square icon length of side；Second generation module, being used for will
Data content collection is arranged template according to square composite and is arranged in the form of rectangle icon set to data content, is generated
Rectangular display unit；Display module is shown for rectangular display unit to be carried out arrangement according to scheduled unit arrangement template.
According to inventive embodiments, by the screen resolution for reading screen；Graphical interfaces is carried out according to screen resolution
It divides, generates arrangement grid；Obtaining needs data content collection to be shown；According to data content collection, acquisition and data content
The square composite of sets match arranges template, wherein square composite arrangement template, will not for being characterized in graphical interfaces
Square icon with size is combined into rectangle icon set by scheduled icon arrangement, and the arrangement shown is shown
Method, arrangement grid are used to characterize in square composite arrangement template for calculating the substantially single of each square icon length of side
Position；Data content collection is arranged template according to square composite to arrange in the form of rectangle icon set data content
Row generate rectangular display unit；Rectangular display unit is carried out arrangement according to scheduled unit arrangement template to show, is solved existing
There are designer in technology, technical staff, consultant and interface to need to carry out weight for each front-end interface using user
The problem of multiple exploitation, caused development efficiency is low, waste of manpower resource.The data content shown as needed is realized to give birth to automatically
At the effect with the matched graphical interfaces of data content.
Description of the drawings
The attached drawing constituted part of this application is used to provide further understanding of the present invention, schematic reality of the invention
Example and its explanation are applied for explaining the present invention, is not constituted improper limitations of the present invention.In the accompanying drawings：
Fig. 1 is the flow chart of the arrangement display methods of according to embodiments of the present invention one graphical interfaces；
Fig. 2 is the structural schematic diagram of the arrangement display device of according to embodiments of the present invention two graphical interfaces；And
Fig. 3 is the structural schematic diagram of the arrangement display device of according to embodiments of the present invention two preferred graphical interfaces.
Specific implementation mode
It should be noted that in the absence of conflict, the features in the embodiments and the embodiments of the present application can phase
Mutually combination.The present invention will be described in detail below with reference to the accompanying drawings and embodiments.
In order to enable those skilled in the art to better understand the solution of the present invention, below in conjunction in the embodiment of the present invention
Attached drawing, technical scheme in the embodiment of the invention is clearly and completely described, it is clear that described embodiment is only
The embodiment of a part of the invention, instead of all the embodiments.Based on the embodiments of the present invention, ordinary skill people
The every other embodiment that member is obtained without making creative work should all belong to the model that the present invention protects
It encloses.
It should be noted that term " first " in description and claims of this specification and above-mentioned attached drawing, "
Two " etc. be for distinguishing similar object, without being used to describe specific sequence or precedence.It should be appreciated that using in this way
Data can be interchanged in the appropriate case, so as to the embodiment of the present invention described herein.In addition, term " comprising " and " tool
Have " and their any deformation, it is intended that cover it is non-exclusive include, for example, containing series of steps or unit
Process, method, system, product or equipment those of are not necessarily limited to clearly to list step or unit, but may include without clear
It is listing to Chu or for these processes, method, product or equipment intrinsic other steps or unit.
Embodiment 1
An embodiment of the present invention provides a kind of arrangement display methods of graphical interfaces.
Fig. 1 is the flow chart of the arrangement display methods of graphical interfaces according to the ... of the embodiment of the present invention.As shown in Figure 1, the party
Method includes that steps are as follows：
Step S11 reads the screen resolution of screen.
Specifically, S11, acquisition are currently used in the screen resolution of the screen of display graphical interfaces through the above steps.
Step S13 divides graphical interfaces according to screen resolution, generates arrangement grid.
Specifically, S13 is carried out graphical interfaces with web form according to the screen resolution of screen through the above steps
It divides.Graphical interfaces is divided into several square areas at predefined intervals, obtains use corresponding with screen resolution
In the arrangement grid of arrangement icon.
In practical application, common screen resolution and screen proportion only have several.It can be previously according to screen
Resolution ratio setting it is corresponding with screen resolution arrange mesh generation scheme, differentiated in various screens with improving graphical interfaces
Good display effect can be obtained on the screen of rate.
Step S15, obtaining needs data content collection to be shown.
Specifically, S15, acquisition need the data content collection shown by graphical interfaces through the above steps, lead to
The data content for needing content quantity to be shown, and shown can be determined by crossing data content collection.
Step S17 is obtained according to data content collection and is arranged template with the matched square composite of data content collection,
Wherein, different size of square icon is pressed scheduled figure by square composite arrangement template for being characterized in graphical interfaces
The arrangement display methods that mark arrangement mode is combined into rectangle icon set, and is shown, arrangement grid is for characterizing square
Base unit in assembled arrangement template for calculating each square icon length of side.
Specifically, S17 through the above steps, by pre-set square composite arrangement template with by data content collection
Determining need content quantity to be shown is matched, and obtains arranging template with the matched square composite of data content collection.
Wherein, the arrangement mode of square composite template, firstly, it is necessary to determine the pros for determining initial position on arrangement grid
The position of shape icon.Then, around square icon, at least one square icon is arranged.Square icon is used for
Data content in display data content set.The quantity and data of the square icon in template are arranged by square composite
Data content in properties collection is matched, and obtains arranging template with the matched square composite of data content collection.It is square
The length of side of each square icon in shape assembled arrangement template is set as arranging the integral multiple of the base unit of grid, therefore needs
Base unit by arranging grid is calculated square composite and arranges in template, and each icon is specific in display interface
Display location and size.
In practical application, the content quantity that can be shown as needed pre-sets different square composite rows
Row template.With for providing different display modes the case where needing the content-data to different number to show, to real
Now preferably display effect.
Data content collection is arranged template to data content with rectangle icon set by step S19 according to square composite
Form arranged, generate rectangular display unit.
Specifically, above-mentioned steps S19 arranges the data in data content according to the square composite obtained through overmatching
Row generate the rectangular display unit being made of the square icon of multiple and different sizes.
Rectangular display unit is carried out arrangement according to scheduled unit arrangement template and shown by step S21.
Specifically, above-mentioned steps S21, the data in data content are shown with the rectangle that square composite arrangement template is constituted
Show unit.When the rectangular display unit of generation is greater than or equal to two, because of the number of the data content in data content collection
Amount is different, so the shapes and sizes of the display unit corresponding to different data properties collection are also different.According to display unit
The length of side is arranged and is shown to each display unit.
In practical application, and list can be set in advance in by the way that the ratio of each display unit length of side is calculated
Length of side ratio in identical permutation template is matched, and each display unit is carried out arrangement according to matching result and is shown.Also may be used
To pre-set fixed display unit size and position of display unit in unit arrangement template, by the display list of each generation
Member carries out arrangement by uniform zoom, according to pre-set template arrangement mode and shows.Certainly, unit arrangement template can also
The quantity of the rectangular display unit shown as needed is arranged multiple units and arranges template, to reach better real effect.
S11, first according to the screen resolution of different screen, carries out graphical interfaces to step S21 through the above steps
It divides, is divided into the arrangement grid for arranging icon corresponding with screen resolution.Then, by pre-set square group
It closes arrangement template to be matched with the attribute information of data content collection, obtains the square composite suitable for data content collection
Template is arranged, finally, by each need data content to be shown in data content collection according to the arrangement grid of division, is generated
Rectangular display unit.According to the length of side of each rectangular display unit, rectangular display unit is arranged into template according to scheduled unit
It is shown.
In practical application, it is only necessary to determine the data content shown in graphical interfaces, we by application developer
Method can arrange template according to a set of applicable square composite of screen resolution and need content obtaining to be shown of screen.
Data content is generated into rectangular display unit in the form of at least two square icons.When there is multiple rectangular display units,
Also further arrangement can be carried out to each rectangular display unit to show.
In summary, the present invention solves designer, technical staff, consultant and interface in the prior art and uses
User needs to carry out overlapping development for the problem that each front-end interface, and caused development efficiency is low, waste of manpower resource, realizes
The data content of display as needed automatically generates the effect with the matched graphical interfaces of data content.
Preferably, in the above embodiments of the present application, rectangular display unit is arranged into mould according to scheduled unit in step S21
Plate carries out arranging the step of showing：
Step S211 determines the element number of rectangular display unit.
Step S213 is obtained and is arranged template with the matched pre-set unit of element number.
Rectangular display unit is carried out arrangement according to unit arrangement template and shown by step S215.
Specifically, S211 to step S215, the rectangular display unit for being directed to generation are more than or wait through the above steps
In two situations, can be obtained pre-set with element number phase according to the element number for holding display unit of generation
Same unit arranges template, by each rectangular display unit, carries out arrangement according to the arrangement mode in unit arrangement template and shows.
Preferably, in the above embodiments of the present application, graphical interfaces is divided according to screen resolution in step S13,
It generates in arrangement grid, step may include：
Step S131 determines the base unit a for dividing graphical interfaces according to screen resolution.
Step S133 divides graphical interfaces according to base unit a, graphical interfaces is divided into and is made of square
Arrangement grid, wherein the square length of side be base unit a.
Specifically, above-mentioned steps S131 to step S133, is confirmed by screen resolution and is suitable for current screen resolution ratio
For dividing the base unit a of graphical interfaces.Carry out horizontal and vertical draw respectively according to base unit a to graphical interfaces
Point, graphical interfaces is divided into the arrangement grid being made of the square that the length of side is a.Base unit is determined according to screen resolution
The specific steps of a can be：Lateral, longitudinal pixel number of screen is determined according to resolution ratio, and then according to lateral, longitudinal pixel number
Graphical interfaces is divided, several squares that the length of side is a pixel are laterally obtained, it is a pixel longitudinally to obtain the length of side
Several squares of point.
In practical application, each square icon can be determined by the arrangement grid divided to graphical interfaces
Position.In the design process to square etc. than arrangement template, it is only necessary to determine each icon is opposite in arranging grid
Position need not design each icon in individual indicating template or adjusting template for each screen resolution again
Absolute position in screen.
Preferably, in the above embodiments of the present application, data content collection includes at least：Data content and with data content pair
The preset icon attribute answered obtains and the matched square composite of data content collection in step S17 according to data content collection
It arranges in template, step may include：
Step S171 determines the quantity for the data content that data content collection includes according to data content collection.
Step S173, the number of icons that the quantity of data content is arranged to template definition with square composite match,
It obtains arranging template with the matched square composite of data content collection.
Step S175, by the preset icon attribute of data content respectively with square composite arrange template in each icon
Corresponding preset icon attribute is matched, and display location of the data content in square composite arranges template is obtained.
Specifically, S171 to step S175 through the above steps, the data content collection got is analyzed, is obtained
The quantity for the data content for including in data content collection.The aobvious of the square icon of template definition is arranged by square composite
Registration amount is matched with the quantity for the data content that data content collection is included, and is determined matched just with data content collection
Square combination arranges template.The icon attribute of data curriculum offering and the square composite will be arranged in advance in data content collection
Each location drawing target attribute is matched in row template, so that it is determined that each data content is in square in data content collection
Display location in assembled arrangement template.Wherein, the advance icon attribute to data curriculum offering in data content collection can
Be application developer in the process of development, to the data content when showing particular/special requirement, the icon attribute of setting
Value.
In practical application, the content quantity for including in data content collection is random, it is difficult to be directed to each case
Design a set of exclusive square composite arrangement template.So can be every when square composite arrangement template is arranged
A square composite arrangement template-setup one is applicable in the applicable section of content quantity, to expand the applicable model of each template
It encloses.
With, by four need data contents to be shown, and preset icon attribute is pre-set in data content collection
It is illustrated for the preset icon length of side.Determine that the quantity of the data content in data content collection is four first.Then it obtains
It is applicable in the square composite arrangement template that section includes four.Finally, according to pre-set default figure in preset icon attribute
The length of side that the target length of side and square composite arrange the square icon in template is matched, obtain the preset icon length of side with just
Square combination arranges the matching result on square icon side in template.Certainly, preset icon attribute can also be data content
Display priority etc..
Preferably, in the above embodiments of the present application, before the screen resolution that step S11 reads screen, method is also wrapped
It includes：
Step S10, setting square composite arrange template, and square composite arrangement template is for determining data content collection
In content-data display location and square composite icon for displays content data icon sizes.
Specifically, S10 pre-sets different square groups for content quantity to be shown is needed through the above steps
Close arrangement template.The display location of each icon and the display size of each icon are defined in square composite arrangement template.
Preferably, in the above embodiments of the present application, in step S10 setting square composite arrangement template, step can be with
Including：
Step S101 sets the icon spacing between square icon as a.
Step S103 is set in square icon for defining the square initial graph target length of side of initial position as a*
N, wherein n is positive integer.
Step S105 sets square icon for the length of side of the display icon of the square of display data content as a*
N ', wherein n ' is positive integer.
Step S107 sets square icon according to the initial graph target length of side, the length of side and icon spacing of display icon
Arrangement position.
Specifically, S101 to step S107 through the above steps, the step of arranging template to setting square composite, carries out
Explanation.First, the icon spacing between square icon is set to a, wherein a is base unit, and a is opposite with screen resolution
It answers.Then, it is determined that position and the size of initial rectangular icon in graphical interfaces.According to the position of initial square icon and
Size sets several square icons, these squares successively in the horizontal direction and longitudinal direction of initial square icon
The length of side all be a integral multiple.Finally, according to above-mentioned initial graph target size and wide histogram target size, setting is each
Wide histogram target relative position.
In practical application, by setting the length of side to this method of base unit a, stencil design people can be facilitated
Member positions the position of each icon in template, without in order to ensure that icon is shown on the screen of different screen resolutions
Accuracy, it is thus necessary to determine that in the specific coordinate value of each onscreen icons.
Embodiment 2
The embodiment of the present invention additionally provides a kind of arrangement display device of graphical interfaces, as shown in Fig. 2, the device can wrap
It includes：Read module 31, the first generation module 33, the first acquisition module 35, the second acquisition module 37, the second generation module 39 and aobvious
Show module 41.
Wherein, read module 31, the screen resolution for reading screen.
Specifically, by above-mentioned read module 31, the screen resolution for the screen for being currently used in display graphical interfaces is obtained.
First generation module 33 generates arrangement grid for being divided to graphical interfaces according to screen resolution.
Specifically, by above-mentioned first generation module 33, according to the screen resolution of screen, to graphical interfaces with net-shaped
Formula is divided.Graphical interfaces is divided into several square areas at predefined intervals, is obtained and screen resolution pair
The arrangement grid for arranging icon answered.
In practical application, common screen resolution and screen proportion only have several.It can be previously according to screen
Resolution ratio setting it is corresponding with screen resolution arrange mesh generation scheme, differentiated in various screens with improving graphical interfaces
Good display effect can be obtained on the screen of rate.
First acquisition module 35 needs data content collection to be shown for obtaining.
Specifically, by above-mentioned first acquisition module 35, the data content for needing to be shown by graphical interfaces is obtained
Set, can be determined by data content collection needs content quantity to be shown, and the data content shown.
Second acquisition module 37, for according to data content collection, obtaining and the matched square group of data content collection
Close arrangement template, wherein square composite arrangement template is for being characterized in graphical interfaces, by different size of square icon
The arrangement display methods for being combined into rectangle icon set by scheduled icon arrangement, and being shown, arrangement grid are used for
Base unit in characterization square composite arrangement template for calculating each square icon length of side.
Specifically, by above-mentioned second acquisition module 37, by pre-set square composite arrangement template and by data
The need content quantity to be shown that properties collection determines is matched, and obtains arranging with the matched square composite of data content collection
Row template.Wherein, the arrangement mode of square composite template, firstly, it is necessary to be determined on arrangement grid for determining initial bit
The position for the square icon set.Then, around square icon, at least one square icon is arranged.Square
Icon is used for the data content in display data content set.The number of the square icon in template is arranged by square composite
Amount is matched with the data content in data content collection, obtains arranging mould with the matched square composite of data content collection
Plate.The length of side of each square icon in square composite arrangement template is set as arranging the integer of the base unit of grid
Times, therefore need to be calculated in square composite arrangement template by arranging the base unit of grid, each icon is on display circle
It is particularly shown position and size in face.
In practical application, the content quantity that can be shown as needed pre-sets different square composite rows
Row template.With for providing different display modes the case where needing the content-data to different number to show, to real
Now preferably display effect.
Second generation module 39, for data content collection to be arranged template to data content with square according to square composite
The form of shape icon set is arranged, and rectangular display unit is generated.
Specifically, the data in data content are obtained just according to through overmatching by above-mentioned second generation module 39
Square combination arranges, and generates the rectangular display unit being made of the square icon of multiple and different sizes.
Display module 41 is shown for rectangular display unit to be carried out arrangement according to scheduled unit arrangement template.
Specifically, by above-mentioned display module 41, the data in data content are constituted with square composite arrangement template
Rectangular display unit.When the rectangular display unit of generation is greater than or equal to two, because of the data in data content collection
The quantity of content is different, so the shapes and sizes of the display unit corresponding to different data properties collection are also different.According to aobvious
The length of side for showing unit is arranged and is shown to each display unit.Certainly, unit arrangement template can also be shown as needed
The quantity of rectangular display unit multiple units be set arrange templates, have reached better real effect.
In practical application, and list can be set in advance in by the way that the ratio of each display unit length of side is calculated
Length of side ratio in identical permutation template is matched, and each display unit is carried out arrangement according to matching result and is shown.Also may be used
To pre-set fixed display unit size and position of display unit in unit arrangement template, by the display list of each generation
Member carries out arrangement by uniform zoom, according to pre-set template arrangement mode and shows.
Pass through above-mentioned read module 31, the first generation module 33, the first acquisition module 35, the second acquisition module 37, second
Generation module 39 and display module 41 divide graphical interfaces first according to the screen resolution of different screen, are divided into
The arrangement grid for arranging icon corresponding with screen resolution.Then, pre-set square composite is arranged into template
It is matched with the attribute information of data content collection, obtains the square composite arrangement template suitable for data content collection,
Finally, each need data content to be shown in data content collection is generated rectangle and shown according to the arrangement grid of division
Unit.According to the length of side of each rectangular display unit, rectangular display unit is shown according to scheduled unit arrangement template.
In practical application, it is only necessary to determine the data content shown in graphical interfaces, we by application developer
Method can arrange template according to a set of applicable square composite of screen resolution and need content obtaining to be shown of screen.
Data content is generated into rectangular display unit in the form of at least two square icons.When there is multiple rectangular display units,
Also further arrangement can be carried out to each rectangular display unit to show.
In summary, the present invention solves designer, technical staff, consultant and interface in the prior art and uses
User needs to carry out overlapping development for the problem that each front-end interface, and caused development efficiency is low, waste of manpower resource, realizes
The data content of display as needed automatically generates the effect with the matched graphical interfaces of data content.
Preferably, in the above embodiments of the present application, above-mentioned display module 41 includes：First sub- determining module 411, sub- acquisition
Module 413 and sub- display module 415.
Wherein, the first sub- determining module 411, the element number for determining rectangular display unit.
Sub-acquisition module 413 arranges template for obtaining with the matched pre-set unit of element number.
Sub- display module 415 is shown for rectangular display unit to be carried out arrangement according to unit arrangement template.
Specifically, by the above-mentioned first sub- determining module 411, sub-acquisition module 413 and sub- display module 415, it is directed to
The rectangular display unit of generation is more than or equal to two situations, can be according to the unit number for holding display unit of generation
Amount obtains pre-set unit arrangement template identical with element number and arranges each rectangular display unit according to unit
Arrangement mode in template carries out arrangement and shows.
Further, following steps can be executed by above-mentioned first generation module 33：
First, according to screen resolution, the base unit a for dividing graphical interfaces is determined.Then, according to base unit
A divides graphical interfaces, and graphical interfaces is divided by the arrangement grid that forms of square, wherein the square length of side is
Base unit a.
Specifically, in above-mentioned steps, confirmed suitable for current screen resolution ratio for dividing by screen resolution
The base unit a of graphical interfaces.Horizontal and vertical division is carried out respectively according to base unit a to graphical interfaces, by figure circle
Face is divided into the arrangement grid being made of the square that the length of side is a.
In practical application, each square icon can be determined by the arrangement grid divided to graphical interfaces
Position.In the design process to square etc. than arrangement template, it is only necessary to determine each icon is opposite in arranging grid
Position need not design each icon in individual indicating template or adjusting template for each screen resolution again
Absolute position in screen.Determine that the specific steps of base unit a can be according to screen resolution：It is determined according to resolution ratio
Lateral, longitudinal pixel number of screen, and then graphical interfaces is divided according to lateral, longitudinal pixel number, laterally obtain the length of side
For several squares of a pixel, several squares that the length of side is a pixel are longitudinally obtained.
Preferably, in the above embodiments of the present application, above-mentioned second acquisition module 37 includes：Second sub- determining module 371,
One sub- matching module 373 and the second sub- matching module 375.
Wherein, the second sub- determining module 371, for according to data content collection, determining the number that data content collection includes
According to the quantity of content, wherein data content collection includes at least：Data content and preset icon category corresponding with data content
Property.
First sub- matching module 373, the icon for the quantity of data content and square composite to be arranged to template definition
Quantity is matched, and obtains arranging template with the matched square composite of data content collection.
Second sub- matching module 375, for the preset icon attribute of data content to be arranged mould with square composite respectively
Preset icon attribute corresponding with each icon is matched in plate, obtains data content in square composite arranges template
Display location.
Specifically, passing through the above-mentioned second sub- determining module 371, the first sub- matching module 373 and the second sub- matching module
375, the data content collection got is analyzed, the quantity of data content for including in data content collection is obtained.It is logical
Cross the data content that the display number of the square icon of square composite arrangement template definition is included with data content collection
Quantity matched, determine and arrange template with the matched square composite of data content collection.It will be pre- in data content collection
First each location drawing target attribute in template is arranged with the square composite to the icon attribute of data curriculum offering to match,
So that it is determined that display location of each data content in square composite arranges template in data content collection.Wherein, data
The advance icon attribute to data curriculum offering in properties collection can be application developer in the process of development, to this
When showing particular/special requirement of data content, the icon attribute value of setting.
In practical application, the content quantity for including in data content collection is random, it is difficult to be directed to each case
Design a set of exclusive square composite arrangement template.So can be every when square composite arrangement template is arranged
A square composite arrangement template-setup one is applicable in the applicable section of content quantity, to expand the applicable model of each template
It encloses.
With, by four need data contents to be shown, and preset icon attribute is pre-set in data content collection
It is illustrated for the preset icon length of side.Determine that the quantity of the data content in data content collection is four first.Then it obtains
It is applicable in the square composite arrangement template that section includes four.Finally, according to pre-set default figure in preset icon attribute
The length of side that the target length of side and square composite arrange the square icon in template is matched, determine the preset icon length of side with just
Square combination arranges the matching result on square icon side in template.Certainly, preset icon attribute can also be data content
Display priority etc..
Preferably, in the above embodiments of the present application, as shown in figure 3, device can also include：Setting module 30.
Wherein, setting module 30 arrange template for setting square composite, and square composite arrangement template is for determining
The icon of the display location of content-data in data content collection and square composite icon for displays content data is big
It is small.
Specifically, by above-mentioned setting module 30, for content quantity to be shown is needed, different squares is pre-set
Assembled arrangement template.The display of display location and each icon that each icon is defined in square composite arrangement template is big
It is small.
Further, may include by the step of setting template of above-mentioned setting module 30：
First, the icon spacing between square icon is set as a.Then, it sets initial for defining in square icon
The initial graph target length of side of the square of position is a*n, wherein n is positive integer.Further, square icon is set for showing
Show that the length of side of the display icon of the square of data content is a*n ', wherein n ' is positive integer.Finally, according to initial graph target
The length of side, the length of side and icon spacing for showing icon set the arrangement position of square icon.
Specifically, through the above steps, the step of setting square composite arrangement template, is illustrated.It first, will just
Icon spacing between square icon is set as a, wherein a is base unit, and a is corresponding with screen resolution.Then, it is determined that
The position of initial rectangular icon in graphical interfaces and size.According to the position of initial square icon and size, initially just
The horizontal direction and longitudinal direction of square icon set several square icons successively, and the length of side of these squares is all a's
Integral multiple.Finally, according to above-mentioned initial graph target size and wide histogram target size, each wide histogram target is set
Relative position.
In practical application, by setting the length of side to this method of base unit a, stencil design people can be facilitated
Member positions the position of each icon in template, without in order to ensure that icon is shown on the screen of different screen resolutions
Accuracy, it is thus necessary to determine that in the specific coordinate value of each onscreen icons.
Embodiment of the method for simple description, therefore is all expressed as a series of combination of actions, but art technology
Personnel should know that the present invention is not limited by the described action sequence, because according to the present invention, certain steps can adopt
With other sequences or it is carried out at the same time.Secondly, those skilled in the art should also know that, embodiment described in this description is equal
Belong to preferred embodiment, involved action and module are not necessarily essential to the invention.
In the above-described embodiments, it all emphasizes particularly on different fields to the description of each embodiment, there is no the portion being described in detail in some embodiment
Point, it may refer to the associated description of other embodiment.
In several embodiments provided herein, it should be understood that disclosed device, it can be by another way
It realizes.For example, the apparatus embodiments described above are merely exemplary, for example, the unit division, it is only a kind of
Division of logic function, formula that in actual implementation, there may be another division manner, such as multiple units or component can combine or can
To be integrated into another system, or some features can be ignored or not executed.Another point, shown or discussed is mutual
Coupling, direct-coupling or communication connection can be by some interfaces, the INDIRECT COUPLING or communication connection of device or unit,
Can be electrical or other forms.
The unit illustrated as separating component may or may not be physically separated, aobvious as unit
The component shown may or may not be physical unit, you can be located at a place, or may be distributed over multiple
In network element.Some or all of unit therein can be selected according to the actual needs to realize the mesh of this embodiment scheme
's.
In addition, each functional unit in each embodiment of the present invention can be integrated in a processing unit, it can also
It is that each unit physically exists alone, it can also be during two or more units be integrated in one unit.Above-mentioned integrated list
The form that hardware had both may be used in member is realized, can also be realized in the form of SFU software functional unit.
If the integrated unit is realized in the form of SFU software functional unit and sells or use as independent product
When, it can be stored in a computer read/write memory medium.Based on this understanding, technical scheme of the present invention is substantially
The all or part of the part that contributes to existing technology or the technical solution can be in the form of software products in other words
It embodies, which is stored in a storage medium, including some instructions are used so that a computer
Equipment (can be personal computer, mobile terminal, server or network equipment etc.) executes side described in each embodiment of the present invention
The all or part of step of method.And storage medium above-mentioned includes：USB flash disk, read-only memory (ROM, Read-Only Memory),
Random access memory (RAM, Random Access Memory), mobile hard disk, magnetic disc or CD etc. are various to be stored
The medium of program code.
The foregoing is only a preferred embodiment of the present invention, is not intended to restrict the invention, for the skill of this field
For art personnel, the invention may be variously modified and varied.All within the spirits and principles of the present invention, any made by repair
Change, equivalent replacement, improvement etc., should all be included in the protection scope of the present invention.
Claims (7)
1. a kind of arrangement display methods of graphical interfaces, which is characterized in that including：
Read the screen resolution of screen；
The graphical interfaces is divided according to the screen resolution, generates arrangement grid,
Wherein, the base for dividing the graphical interfaces suitable for current screen resolution ratio is confirmed by the screen resolution
Our unit a carries out horizontal and vertical division respectively to the graphical interfaces according to base unit a, and the graphical interfaces is drawn
It is divided into the arrangement grid being made of the square that the length of side is a, wherein determine that base unit a includes according to screen resolution：According to
Resolution ratio determines that lateral, longitudinal pixel number of screen divides the graphical interfaces, and it is a pixel laterally to obtain the length of side
Several squares, longitudinally obtain the length of side be a pixel several squares；
Obtaining needs data content collection to be shown；
According to the data content collection, obtains and arranges template with the matched square composite of the data content collection, wherein
The square composite arrangement template presses scheduled icon for being characterized in graphical interfaces, by different size of square icon
Arrangement mode is combined into rectangle icon set, and the arrangement display methods shown, and the arrangement grid is described for characterizing
Base unit in square composite arrangement template for calculating each square icon length of side, wherein the data content collection
Conjunction includes at least：The data content and preset icon attribute corresponding with the data content, by pre-set square
The need content quantity to be shown that assembled arrangement template is determined with the data content collection is matched, and is obtained and the data
The matched square composite of properties collection arranges template,
Wherein, it according to the data content collection, obtains and arranges template with the matched square composite of the data content collection
The step of include：According to the data content collection, the quantity for the data content that the data content collection includes is determined；
The number of icons that the quantity of the data content and the square composite are arranged to template definition matches, obtain with it is described
The matched square composite of data content collection arranges template；By the preset icon attribute of the data content respectively with institute
It states preset icon attribute corresponding with each icon in square composite arrangement template to be matched, obtains the data content
Display location in the square composite arranges template,
Wherein, the arrangement mode of the square composite arrangement template includes：It is determined on arrangement grid for determining initial bit
The position for the square icon set arranges at least one square icon, the square icon around square icon
For the data content in display data content set, the side of each square icon in the square composite arrangement template
Square composite is calculated in the integral multiple of the long base unit a for being set as arranging grid, the base unit a by arranging grid
Each icon is particularly shown position and size in display interface in arrangement template；
The data content collection is arranged into template to data content with the shape of rectangle icon set according to the square composite
Formula is arranged, and rectangular display unit is generated；
Rectangular display unit is carried out arrangement according to scheduled unit arrangement template to show.
2. according to the method described in claim 1, it is characterized in that, rectangular display unit is arranged template according to scheduled unit
Carrying out the step of arrangement is shown includes：
Determine the element number of the rectangular display unit；
It obtains and arranges template with the matched pre-set unit of the element number；
The rectangular display unit is carried out arrangement according to unit arrangement template to show.
3. according to the method described in claim 2, it is characterized in that, it is described read screen screen resolution before, it is described
Method further includes：
The square composite arrangement template is set, the square composite arrangement template is for determining the data content collection
In content-data display location and square composite icon for displays content data icon sizes.
4. according to the method described in claim 3, it is characterized in that, the step of setting square composite arranges template
Including：
The icon spacing between the square icon is set as a；
It sets in the square icon for defining the initial graph target length of side of initial position as a*n, wherein the n is just
Integer；
The length of side of the display icon of square of the square icon for display data content is set as a*n ', wherein institute
It is positive integer to state n '；
According to the initial graph target length of side, the length of side of the display icon and the icon spacing, the square figure is set
Target arrangement position.
5. a kind of arrangement display device of graphical interfaces, which is characterized in that including：
Read module, the screen resolution for reading screen；
First generation module, for being divided to the graphical interfaces according to the screen resolution, generation arrangement grid,
In, first generation module is additionally operable to confirm suitable for current screen resolution ratio for dividing by the screen resolution
The base unit a of the graphical interfaces carries out horizontal and vertical division respectively to the graphical interfaces according to base unit a,
The graphical interfaces is divided into the arrangement grid being made of the square that the length of side is a, wherein base is determined according to screen resolution
Our unit a includes：Determine that lateral, longitudinal pixel number of screen divides the graphical interfaces according to resolution ratio, laterally
To several squares that the length of side is a pixel, several squares that the length of side is a pixel are longitudinally obtained；
First acquisition module needs data content collection to be shown for obtaining；
Second acquisition module, for according to the data content collection, obtaining and the matched square of the data content collection
Assembled arrangement template, wherein the square composite arrangement template is for being characterized in graphical interfaces, by different size of pros
Shape icon is combined into rectangle icon set by scheduled icon arrangement, and the arrangement display methods shown, the row
Row grid is used to characterize the base unit for calculating each square icon length of side in the square composite arrangement template,
In, the data content collection includes at least：The data content and preset icon attribute corresponding with the data content, will
Pre-set square composite arrangement template and the need that the data content collection determines content quantity progress to be shown
Match, obtain arranging template with the matched square composite of the data content collection,
Wherein, second acquisition module includes：Second sub- determining module, for according to the data content collection, determining institute
State the quantity for the data content that data content collection includes, wherein the data content collection includes at least：The data
Content and preset icon attribute corresponding with the data content；First sub- matching module is used for the number of the data content
It measures and is matched with the number of icons of square composite arrangement template definition, obtained matched with the data content collection
Square composite arranges template；Second sub- matching module, for by the preset icon attribute of the data content respectively with
Preset icon attribute corresponding with each icon is matched in the square composite arrangement template, is obtained in the data
Hold the display location in the square composite arranges template,
Wherein, the arrangement mode of the square composite arrangement template includes：It is determined on arrangement grid for determining initial bit
The position for the square icon set arranges at least one square icon, the square icon around square icon
For the data content in display data content set, the side of each square icon in the square composite arrangement template
Square composite is calculated in the integral multiple of the long base unit a for being set as arranging grid, the base unit a by arranging grid
Each icon is particularly shown position and size in display interface in arrangement template；
Second generation module, for by the data content collection according to the square composite arrange template to data content with
The form of rectangle icon set is arranged, and rectangular display unit is generated；
Display module is shown for rectangular display unit to be carried out arrangement according to scheduled unit arrangement template.
6. device according to claim 5, which is characterized in that the display module includes：
First sub- determining module, the element number for determining the rectangular display unit；
Sub-acquisition module arranges template for obtaining with the matched pre-set unit of the element number；
Sub- display module is shown for the rectangular display unit to be carried out arrangement according to unit arrangement template.
7. device according to claim 5, which is characterized in that described device further includes：
Setting module arranges template for setting the square composite, and the square composite arrangement template is for determining institute
State the icon of the display location of the content-data in data content collection and the square composite icon for displays content data
Size.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410779088.1A CN104461249B (en) | 2014-12-15 | 2014-12-15 | The arrangement display methods and device of graphical interfaces |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410779088.1A CN104461249B (en) | 2014-12-15 | 2014-12-15 | The arrangement display methods and device of graphical interfaces |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104461249A CN104461249A (en) | 2015-03-25 |
| CN104461249B true CN104461249B (en) | 2018-09-18 |
Family
ID=52907397
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410779088.1A Active CN104461249B (en) | 2014-12-15 | 2014-12-15 | The arrangement display methods and device of graphical interfaces |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104461249B (en) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106020655B (en) * | 2016-05-18 | 2020-01-07 | 北京金山安全软件有限公司 | Method and device for switching interface screen and electronic equipment |
| CN107436743B (en) * | 2017-07-26 | 2020-09-04 | 百度在线网络技术（北京）有限公司 | Method and device for pushing information |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101005681A (en) * | 2006-01-17 | 2007-07-25 | 大唐移动通信设备有限公司 | Interface automatic forming method and interface automatic forming system |
| CN101833458A (en) * | 2010-05-28 | 2010-09-15 | 北京中恒博瑞数字电力科技有限公司 | Method for automatically generating user application interface based on template |
| CN102541566A (en) * | 2012-01-04 | 2012-07-04 | 北京七星华创电子股份有限公司 | Method for generating interface frameworks of semiconductor software |
| CN102981855A (en) * | 2012-11-23 | 2013-03-20 | 蓝盾信息安全技术股份有限公司 | Template-based interface autogeneration method and system |
| CN103530052A (en) * | 2013-09-27 | 2014-01-22 | 华为技术有限公司 | Display method of interface content and user equipment |
| CN103941958A (en) * | 2013-01-23 | 2014-07-23 | 腾讯科技（深圳）有限公司 | Desktop management method and terminal device |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101908076B (en) * | 2010-08-24 | 2012-09-12 | 北京世纪高通科技有限公司 | Page layout self-adaptive method and device |
| CN104007991B (en) * | 2014-06-06 | 2019-06-14 | 百度在线网络技术（北京）有限公司 | Application Program Interface layout adjustment method and device |
-
2014
- 2014-12-15 CN CN201410779088.1A patent/CN104461249B/en active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101005681A (en) * | 2006-01-17 | 2007-07-25 | 大唐移动通信设备有限公司 | Interface automatic forming method and interface automatic forming system |
| CN101833458A (en) * | 2010-05-28 | 2010-09-15 | 北京中恒博瑞数字电力科技有限公司 | Method for automatically generating user application interface based on template |
| CN102541566A (en) * | 2012-01-04 | 2012-07-04 | 北京七星华创电子股份有限公司 | Method for generating interface frameworks of semiconductor software |
| CN102981855A (en) * | 2012-11-23 | 2013-03-20 | 蓝盾信息安全技术股份有限公司 | Template-based interface autogeneration method and system |
| CN103941958A (en) * | 2013-01-23 | 2014-07-23 | 腾讯科技（深圳）有限公司 | Desktop management method and terminal device |
| CN103530052A (en) * | 2013-09-27 | 2014-01-22 | 华为技术有限公司 | Display method of interface content and user equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104461249A (en) | 2015-03-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104407779B (en) | The arrangement display methods and device of graphical interfaces | |
| CN105205180B (en) | A kind of evaluation method and device of knowledge mapping | |
| CN103890727B (en) | Web in Web browser using and the simulation of auxiliary equipment, Web application development tools and use their method | |
| CN108132887B (en) | User interface method of calibration, device, software testing system, terminal and medium | |
| CN104268079B (en) | A kind of method and system of POS Application testings | |
| CN108804704A (en) | A kind of user's depth portrait method and device | |
| US8117588B2 (en) | Spatial iteration node for a graphical program | |
| CN105988665B (en) | Information dubbing system, information duplicating method and electronic equipment | |
| CN107025174A (en) | For the method for the user interface abnormality test of equipment, device and readable storage media | |
| CN105893253A (en) | Application software testing method, device and equipment | |
| CN104346408B (en) | A kind of method and apparatus being labeled to the network user | |
| CN110442510A (en) | A kind of page properties acquisition methods, device and computer equipment, storage medium | |
| CN107909466A (en) | Customer relationship network display method, apparatus, equipment and readable storage medium storing program for executing | |
| Silva et al. | A Goal Oriented Approach to Identify and Configure Feature Models for Software Product Lines. | |
| CN106202006A (en) | Document generating method and device | |
| CN107729246A (en) | For the auxiliary test methods of intended application, device, equipment and storage medium | |
| CN111240669B (en) | Interface generation method and device, electronic equipment and computer storage medium | |
| CN104679388B (en) | The method and its mobile terminal of application program are opened by icon duplicate | |
| CN110990053A (en) | Method for creating and using machine learning scheme template and device | |
| CN104484093B (en) | The arrangement display methods and device of graphical interfaces | |
| CN104461547B (en) | The arrangement display methods and device of graphical interfaces | |
| CN107741904A (en) | Test machine method of automatic configuration, device, equipment and storage medium | |
| CN104809751B (en) | The method and apparatus for generating event group evolution diagram | |
| CN109471899A (en) | A kind of method for visualizing, device and its storage medium | |
| CN108305053A (en) | Implementation method, device, electronic equipment and the storage medium of approval process |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| PE01 | Entry into force of the registration of the contract for pledge of patent right | ||
| PE01 | Entry into force of the registration of the contract for pledge of patent right |
Denomination of invention: Graphical interface arrangement display method and graphical interface arrangement display device Effective date of registration: 20190531 Granted publication date: 20180918 Pledgee: Shenzhen Black Horse World Investment Consulting Co., Ltd. Pledgor: Beijing Guoshuang Technology Co.,Ltd. Registration number: 2019990000503 |
|
| CP02 | Change in the address of a patent holder | ||
| CP02 | Change in the address of a patent holder |
Address after: 100083 No. 401, 4th Floor, Haitai Building, 229 North Fourth Ring Road, Haidian District, Beijing Patentee after: Beijing Guoshuang Technology Co.,Ltd. Address before: 100086 Beijing city Haidian District Shuangyushu Area No. 76 Zhichun Road cuigongfandian 8 layer A Patentee before: Beijing Guoshuang Technology Co.,Ltd. |