CN112732385B - Method for laying out controls, computing device and storage medium - Google Patents
Method for laying out controls, computing device and storage medium Download PDFInfo
- Publication number
- CN112732385B CN112732385B CN202110002902.9A CN202110002902A CN112732385B CN 112732385 B CN112732385 B CN 112732385B CN 202110002902 A CN202110002902 A CN 202110002902A CN 112732385 B CN112732385 B CN 112732385B
- Authority
- CN
- China
- Prior art keywords
- control
- setting
- anchoring
- boundary
- controls
- 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
- 238000000034 method Methods 0.000 title claims abstract description 69
- 238000004873 anchoring Methods 0.000 claims abstract description 106
- 238000004891 communication Methods 0.000 description 17
- 230000008859 change Effects 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 230000006870 function Effects 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 238000013459 approach Methods 0.000 description 3
- 238000013461 design Methods 0.000 description 3
- 230000002093 peripheral effect Effects 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 230000008901 benefit Effects 0.000 description 2
- 230000007723 transport mechanism Effects 0.000 description 2
- 239000011800 void material Substances 0.000 description 2
- 238000011161 development Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000007667 floating Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000003032 molecular docking Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Document Processing Apparatus (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a method for arranging controls, which is suitable for being executed in a computing device, and comprises the following steps: setting a plurality of controls in a layout window, wherein the controls comprise size information; initializing an anchoring system, and generating an anchor line of a control in the anchoring system; setting the position relation among a plurality of controls in an anchoring system according to anchor lines; and loading a layout window, and displaying a plurality of controls in the layout window according to the size information and the position relation of the controls. A computing device and a computer-readable storage medium are also disclosed.
Description
Technical Field
The present invention relates to the field of interface layout, and in particular, to a method, a computing device, and a storage medium for layout control.
Background
With the development of computer technology, an operating system and an application program running in a computer become attractive in visual aspect, the operation is more convenient, the threshold of man-machine interaction is reduced, and the efficiency is greatly improved. When developing desktop applications, it becomes important to layout window controls in a reasonable manner.
When the window control is laid out, a fixed layout and a dynamic layout can be adopted. The fixed layout refers to positioning and laying out window controls through fixed coordinates in a page, but in the application process, when the same application program interface is displayed on hardware devices of different clients, the same application program interface has larger difference in display due to the difference of hardware devices and corresponding software settings. And the position of the window control cannot be intuitively controlled when the layout operation is carried out through the coordinates, so that the setting is complicated.
In the current dynamic layout, the window controls are generally laid out horizontally, vertically, in a table, in a grid, in a pile, etc., and the deployment modes are simple, but the layout modes are based on the window, and the layout mode is single and inflexible. When the complex layout design is realized through mutual nesting, the code quantity is large and complex, and the method is inconvenient for use in special scenes.
For this reason, a new method of laying out controls is needed.
Disclosure of Invention
To this end, the present invention provides a method of laying out controls in an effort to solve, or at least alleviate, the above-presented problems.
According to one aspect of the invention, there is provided a method of laying out controls adapted for execution in a computing device, the method comprising: setting a plurality of controls in a layout window, wherein the controls comprise size information; initializing an anchoring system, and generating an anchor line of a control in the anchoring system; setting the position relation among a plurality of controls in an anchoring system according to anchor lines; and loading a layout window, and displaying a plurality of controls in the layout window according to the size information and the position relation of the controls.
Optionally, in the method according to the invention, the plurality of controls comprises a master control, and initializing the anchoring system comprises the steps of: in the anchoring system, a main control corresponding to the layout window is set, and the size of the main control is the same as that of the layout window.
Optionally, in the method according to the present invention, the plurality of controls further includes a primary control, and setting a positional relationship between the plurality of controls according to the anchor line in the anchoring system includes the steps of: and setting the relative positions of the primary control in the layout window by setting the anchoring of the primary control and the main control according to the anchor line of the primary control.
Optionally, in the method according to the present invention, setting the primary control to anchor with the main control according to the anchor line of the primary control includes the steps of: and setting an anchor line of the primary control to anchor with the boundary or the boundary line of the main control, wherein the boundary line of the main control comprises a horizontal boundary line and a vertical boundary line.
Optionally, in the method according to the present invention, setting the boundary anchoring of the anchor line of the primary control with the primary control comprises the steps of: setting the boundary of the primary control stopped at the main control and/or setting the distance between the anchor line of the primary control and the boundary of the main control.
Optionally, in the method according to the present invention, the plurality of controls further includes a secondary control, and the method further includes: and setting the relative positions of the secondary control in the layout window by setting the anchoring of the secondary control and the primary control according to the anchor line of the secondary control.
Optionally, in the method according to the invention, the anchor line of the control comprises a border line, and the boundary comprises a top border line, a bottom border line, a left border line and a right border line, the boundary comprising a horizontal boundary line and a vertical boundary line.
Optionally, in the method according to the present invention, the control further includes a frame, and setting the primary control to be anchored with the main control according to the anchor line of the primary control further includes the steps of: setting the width of the frame of the primary control, and setting the boundary anchoring of the frame of the primary control and the main control piece.
Optionally, in the method according to the present invention, setting the secondary control to anchor with the primary control according to the anchor line of the secondary control includes the steps of: setting the width of a frame of the secondary control; and (3) setting the border anchoring of the secondary control and the border anchoring of the primary control and/or setting the boundary anchoring of the secondary control and the boundary anchoring of the primary control.
Optionally, in the method according to the present invention, setting the border of the secondary control to anchor with the border of the primary control includes the steps of: setting the secondary control to rest on the frame of the primary control and/or setting the distance between the frame of the secondary control and the frame of the primary control.
Optionally, in the method according to the present invention, the frame includes an upper frame, a lower frame, a left frame and a right frame.
Optionally, in the method according to the present invention, the size information includes a length and a width of the control, and setting the plurality of controls in the layout window includes the steps of: and creating a plurality of controls, and setting the length and the width of the plurality of controls.
According to yet another aspect of the present invention, there is provided a computing device comprising: one or more processors; a memory; and one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs comprising instructions for performing any of the methods of one of the layout controls according to the present invention.
According to yet another aspect of the present invention, there is provided a computer readable storage medium storing one or more programs, the one or more programs comprising instructions, which when executed by a computing device, cause the computing device to perform any of the methods of laying out controls according to the present invention.
According to the invention, the plurality of controls are arranged in the layout window, the anchoring system is initialized, the anchoring system generates anchor lines of the controls, and the positional relationship among the plurality of controls is arranged in the anchoring system according to the anchor lines, so that the positional relationship of the controls in the layout window is arranged. When the position relation between the controls is set in the anchoring system, the main control which is the same as the layout window is set firstly, then the main control is anchored with the main control according to the anchor line setting of the primary control, and the position of the primary control in the layout window is set; and anchoring the secondary control with the primary control according to the anchor line setting of the secondary control, and setting the position of the secondary control in the layout window. Therefore, the purpose of setting the position of the secondary control in the layout window can be achieved by setting the relative position relation between the secondary control and the primary control. The second-level control can change the position along with the position change of the first-level control when the layout window is changed, but the position relation of the second-level control relative to the first-level control is not changed, and the position of the control in the layout window is flexibly set.
Furthermore, the frames of the primary control and the secondary control can be arranged, and the nearest distances among different controls are limited by setting the width of the frames, so that the requirements on the control layout in special scenes are met.
Drawings
To the accomplishment of the foregoing and related ends, certain illustrative aspects are described herein in connection with the following description and the annexed drawings, which set forth the various ways in which the principles disclosed herein may be practiced, and all aspects and equivalents thereof are intended to fall within the scope of the claimed subject matter. The above, as well as additional objects, features, and advantages of the present disclosure will become more apparent from the following detailed description when read in conjunction with the accompanying drawings. Like reference numerals generally refer to like parts or elements throughout the present disclosure.
FIG. 1a illustrates one prior art manner of layout of controls in a window;
FIG. 1b illustrates yet another prior art approach to layout of controls in a window;
FIG. 2 illustrates a block diagram of a computing device 200 according to an exemplary embodiment of the invention;
FIG. 3 illustrates a flow diagram of a method 300 of laying out controls according to one embodiment of the invention;
FIG. 4a illustrates a manner of laying out controls according to one embodiment of the invention;
FIG. 4b illustrates a manner of laying out a control according to yet another embodiment of the invention; and
FIG. 4c illustrates a manner of laying out controls according to yet another embodiment of the invention.
Detailed Description
Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be embodied in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art. Like reference numerals generally refer to like parts or elements.
FIG. 1a illustrates one prior art approach to layout of controls in a window. In the layout window 110 in fig. 1, a control 102 and a control 101 are provided. Setting the upper edge of the control 101 at the upper boundary of the layout window 110 and the right edge at the right boundary of the layout window 110; the setting control 102 is at the left boundary of the layout window 110 horizontal dividing line. When the control 101 and the control 102 are set in positions, the association mapping relation between the control 101 and the control 102 and the layout window 110 is established, and then the corresponding positioning rules of the control 101 and the control 102 are determined. When the control is laid out in the prior art, the control can only be laid out based on the layout window, flexibility is lacked, and changeable design requirements cannot be met.
FIG. 1b illustrates yet another prior art approach to layout of controls in a window. In fig. 1b, the layout window 120 is divided into 9 equal-sized layout controls by trisecting the length and width of the layout window 120, and the deployment controls 121-129 can be arranged in a grid shape. The layout method is convenient, corresponding controls can be deployed quickly, but at the same time, the layout mode is single, and the method is not flexible. When the complex layout design is realized through mutual nesting, the code quantity is large and complex, and the method is inconvenient for use in special scenes.
To this end, the present invention provides a new method of laying out controls. The method is adapted to be executed in a computing device. FIG. 2 illustrates a block diagram of a computing device 200 according to an exemplary embodiment of the invention. As shown in FIG. 2, in a basic configuration 202, computing device 200 typically includes a system memory 206 and one or more processors 204. A memory bus 208 may be used for communication between the processor 204 and the system memory 206.
Depending on the desired configuration, the processor 204 may be any type of processing including, but not limited to: a microprocessor (μp), a microcontroller (μc), a digital information processor (DSP), or any combination thereof. Processor 204 may include one or more levels of cache, such as a first level cache 210 and a second level cache 212, a processor core 214, and registers 216. The example processor core 214 may include an Arithmetic Logic Unit (ALU), a Floating Point Unit (FPU), a digital signal processing core (DSP core), or any combination thereof. The example memory controller 218 may be used with the processor 204, or in some implementations, the memory controller 218 may be an internal part of the processor 204.
Depending on the desired configuration, system memory 206 may be any type of memory including, but not limited to: volatile memory (such as RAM), non-volatile memory (such as ROM, flash memory, etc.), or any combination thereof. The system memory 206 may include an operating system 220, one or more programs 222, and program data 224. In some implementations, the program 222 may be arranged to execute instructions 223 of the method 300 according to the present invention on an operating system by the one or more processors 204 using the program data 224.
Computing device 200 may also include an interface bus 240 that facilitates communication from various interface devices (e.g., output devices 242, peripheral interfaces 244, and communication devices 246) to basic configuration 202 via bus/interface controller 230. The example output device 242 includes a graphics processing unit 248 and an audio processing unit 250. They may be configured to facilitate communication with various external devices, such as a display or speakers, via one or more a/V ports 252. The example peripheral interface 244 may include a serial interface controller 254 and a parallel interface controller 256, which may be configured to facilitate communication via one or more I/O ports 258 and external devices such as input devices (e.g., keyboard, mouse, pen, voice input device, touch input device) or other peripherals (e.g., printer, scanner, etc.). The example communication device 246 may include a network controller 260 that may be arranged to facilitate communication with one or more other computing devices 262 over a network communication link via one or more communication ports 264.
The network communication link may be one example of a communication medium. Communication media may typically be embodied by computer readable instructions, data structures, program modules, and may include any information delivery media in a modulated data signal, such as a carrier wave or other transport mechanism. A "modulated data signal" may be a signal that has one or more of its data set or changed in such a manner as to encode information in the signal. By way of non-limiting example, communication media may include wired media such as a wired network or special purpose network, and wireless media such as acoustic, radio Frequency (RF), microwave, infrared (IR) or other wireless media. The term computer readable media as used herein may include both storage media and communication media.
In a computing device 200 according to the present invention, the application 222 includes program instructions for executing a method 300 of laying out controls that may instruct the processor 204 to perform some of the steps in the method 300 of laying out controls running in a computing device 200 of the present invention so that portions of the computing device 200 implement laying out controls by executing the method 300 of laying out controls of the present invention.
Computing device 200 may be implemented as a server, such as file server 240, database 250, a server, an application server, etc., such as a Personal Digital Assistant (PDA), a wireless web-browsing device, an application-specific device, or a hybrid device that may include any of the above functions. May be implemented as a personal computer including desktop and notebook computer configurations, and in some embodiments, computing device 200 is configured to perform a method 300 of layout control.
FIG. 3 illustrates a flow diagram of a method 300 of laying out controls according to one embodiment of the invention. The method 300 is performed in a computing device, such as computing device 200. As shown in fig. 3, a method 300 of laying out controls begins at step S310 with setting a plurality of controls in a layout window, the controls including size information. In this step, a plurality of controls are defined in the layout window, respectively, and size information of the controls in the layout window is set. The shape of the control is rectangular, and the size information of the control comprises the length and the width in the layout window.
Subsequently, step S320 is performed to initialize the anchor system in which the anchor line of the control is generated. The controls comprise a main control, a primary control and a secondary control. When the anchoring system is initialized, setting a main control corresponding to the layout window, wherein the size of the main control is the same as that of the layout window, and generating an anchor line of the control in the anchoring system.
Fig. 4a shows a layout control manner according to an embodiment of the present invention, in which a main control is newly built according to a size of a layout window, and a primary control 411 to a primary control 416 are also newly built in the layout window in fig. 4 a. The code of the new primary control 411 is as follows:
QLabel*pRect_1＝new QLabel；
pRect_1 is the primary control 411, and the primary control 411 has a length a and a width b. According to one embodiment of the invention, the anchoring system is a DAnchors anchoring system. When initializing the anchoring system, setting an object pointer of the primary control 411 in the anchoring system, transmitting control parameters to the anchoring system, and initializing the anchoring system as follows:
DAnchors<QLabel>rect1(pRect_1)；
similarly, according to the method, the primary controls 412-416 are customized as follows:
DAnchors<QLabel>main_anchors(pWindow)；
DAnchors<QLabel>label_anchors_2(pLabel_2)；
DAnchors<QLabel>label_anchors_3(pLabel_3)；
DAnchors<QLabel>label_anchors_4(pLabel_4)；
DAnchors<QLabel>label_anchors_5(pLabel_5)；
DAnchors<QLabel>label_anchors_6(pLabel_6)。
the anchor lines generated for the control in the anchoring system include edges and boundaries, the edges including a top edge (top), a bottom edge (bottom), a left edge (left) and a right edge (right); the dividing lines include a horizontal dividing line (horizontal center) and a vertical dividing line (vertical center). Taking the primary control 413 as shown in fig. 4a as an example, n is the upper edge of the primary control 413, o is the lower edge, p is the left edge, and q is the lower edge. In the controls 412, r is the horizontal dividing line of the primary control 412, and s is the vertical dividing line.
Subsequently, step S330 is performed, in which the positional relationship among the plurality of controls is set according to the anchor line in the anchor system. In an anchoring system, setting the position relation among the controls comprises the following steps: and setting the relative positions of the primary control in the layout window by setting the anchoring of the primary control and the main control according to the anchor line of the primary control.
The step of setting the primary control and the main control anchor comprises the following steps: and setting the boundary anchoring of the anchor line of the primary control and the main control or the boundary anchoring. The boundaries of the main control are four sides of the rectangular main control, namely an upper boundary (top), a lower boundary (bottom), a left boundary (left) and a right boundary (right); the boundary of the main control comprises a horizontal boundary (horizontal center) and a vertical boundary (vertical center), and the intersection point of the horizontal boundary and the vertical boundary of the main control is the center point of the main control.
Taking the main control 410 shown in fig. 4a as an example, u is an upper boundary of the main control 410, t is a lower boundary, v is a left boundary, and w is a right boundary; and, the dotted line x is a horizontal dividing line of the main control unit 410, and y is a vertical dividing line.
When setting the boundary anchoring of the anchor line of the primary control and the main control, the method comprises the following steps: setting a boundary of the primary control stopped at the main control; and/or setting the distance between the anchor line of the primary control and the boundary of the main control. In the invention, anchoring means that the distance from the primary control to the main control is unchanged. Docking refers to when the primary control-to-primary control distance is zero, i.e., the primary control is abutted against some edge of the primary control. The distance between the anchor line of the primary control and the boundary or demarcation line of the main control is the anchoring distance.
The mode of setting the relative position relation between the primary control and the main control comprises the following steps:
1. setting the primary control to stop at the boundary of the main control, namely, abutting the boundary line of the primary control against the boundary of the main control, wherein the anchoring distance is 0. According to one embodiment of the present invention, as shown in fig. 3, the upper border of the primary control 411 is set to abut against the upper border of the main control 410, the left border abuts against the left border of the main control 410, and the setting codes are as follows:
label_anchors_1.setLeft(main_anchors.left())；
label_anchors_1.setTop(main_anchors.top())；
among them, DAnchors is a class that specifically implements setting a relative positional relationship, and in this embodiment, a control 441 (label_anchors_1) and a main_anchors form a relative positional relationship.
The upper edge of the primary control 412 is set against the upper boundary of the master control 410, the right edge against the right boundary of the master control 410, and the set codes are as follows:
label_anchors_2.setRight(main_anchors.right())；
label_anchors_2.setTop(main_anchors.top())；
the lower edge of the primary control 413 is set against the lower boundary of the main control 410, the left edge is set against the left boundary of the main control 410, and the setting codes are as follows:
label_anchors_3.setBottom(main_anchors.bottom())；
label_anchors_3.setLeft(main_anchors.left())；
the lower edge of the primary control 414 is set against the lower boundary of the master control 410, the right edge against the right boundary of the master control 410, and the set codes are as follows:
label_anchors_4.setBottom(main_anchors.bottom())；
label_anchors_4.setRight(main_anchors.right())；
2. setting the boundary of the primary control stopped at the main control and setting the distance between the anchor line of the primary control and the boundary of the main control, namely setting the distance between one boundary of the primary control and one boundary of the main control and the other boundary or boundary line of the primary control. As shown in fig. 3, the lower edge of the primary control 415 is set to abut against the lower boundary of the primary control, the right edge is set to be 55 pixels from the right boundary of the primary control, and the anchoring distance is 55px.
3. And setting the distance between the anchor line of the primary control and the boundary of the main control, namely setting the anchoring distances between the two side lines of the primary control and the two boundaries of the main control respectively.
4. And the anchor line for arranging the primary control is anchored with the boundary of the main control, namely the boundary for arranging the primary control is anchored with the horizontal boundary and the vertical boundary of the main control respectively. If a level one control horizontal boundary is set to be anchored with a level boundary of a main control, the anchoring distance is 0, and the code is as follows:
label_anchors_n.setVerticalCenter(main_anchors.verticalCenter())
and the vertical boundary is anchored with the vertical boundary of the main control, the anchoring distance is 200 pixels, and the code is as follows:
label_anchors_1.setHorizontalCenter(main_anchors.horizontalCenter())
label_anchors_1.setHorizontalCenterOffset(200)
the primary control is shifted to the right by 200 pixels in the horizontal direction.
When the anchoring distance between the vertical boundary of the primary control and the vertical boundary of the main control is set, the anchoring distance is positive and indicates that the primary control is shifted rightwards, and the anchoring distance is negative and indicates that the primary control is shifted leftwards. When the anchoring distance between the horizontal boundary of the primary control and the horizontal boundary of the main control is set, the anchoring distance is positive, which indicates that the primary control is upwards shifted, and the anchoring distance is negative, which indicates that the primary control is downwards shifted. When the anchoring distance is set, the maximum offset of the primary control makes the primary control within the limit range of the main control. And setting an anchoring distance between the boundary of the primary control and the boundary of the main control, namely setting an offset configuration item of the primary control in the horizontal direction or the vertical direction as offset, wherein the unit is pixels. The offset includes horizontal offset and verticalCenterOffset, horizontalCenterOffset offset, and vertical offset. The implementation function prototypes of horizontalcentreoffset and vericalcentreoffset are:
void setHorizontalCenterOffset(int horizontalCenterOffset)；
void setVerticalCenterOffset(int verticalCenterOffset)；
in a special case of the mode 4, the primary control is set at the center point of the main control, that is, the primary control is set at the intersection point of the horizontal boundary line and the vertical boundary line of the main control. As shown in fig. 3, the setting control 416 is anchored at the center point of the main control 410, that is, the horizontal boundary of the setting primary control 416 is anchored with the horizontal boundary of the main control 410, the anchoring distance is 0, the vertical boundary of the setting primary control 416 is anchored with the horizontal boundary of the vertical window 410, the anchoring distance is 0, and the code is as follows:
label_anchors_1.setHorizontalCenter(main_anchors.horizontalCenter())；
label_anchors_1.setVerticalCenter(main_anchors.verticalCenter())；
5. the properties of the primary or secondary control also include a border (margin) that includes an upper border (topMargin), a lower border (bottom margin), a left border (leftMargin) and a right border (rightMargin). Fig. 4b illustrates a manner of layout of the controls according to yet another embodiment of the present invention, as shown in fig. 4b, in the main control 420, the controls 421 are primary controls, and the controls 422 and 423 are secondary controls based on the primary controls 421. The left frame width of the primary control 421 is g, and the right frame width is h. The secondary control 422 has an upper frame width c, a lower frame width d, a left frame width e, and a right frame width f. The left border of the secondary control 423 has a width i.
The width of the frame of the primary control is firstly set, and then the boundary anchoring of the frame of the primary control and the main control is set. The border or boundary anchoring of the primary control and the main control refers to the border anchoring of the border line of the primary control and the main control. When the boundary anchoring of the frame and the main control is set, the anchoring distance is the distance between the frame line and the boundary of the main control. The minimum anchoring distance is 0, and the maximum anchoring distance does not enable the primary control and the frame thereof to exceed the range limited by the main control. According to one embodiment of the present invention, a primary control 421 is custom-defined in the main control 420, the anchoring distance between the horizontal boundary line of the primary control 421 and the horizontal boundary line of the main control 420 is set to be 0, the width of the left frame is set to be g, the frame line of the left frame is anchored with the left boundary of the main control, the anchoring distance is z, and the width of the right frame is set to be h. The code for setting the width of the right frame is as follows:
label_anchors_7.setRightMargin(h)；
when the position of the primary control is set, the parent anchoring relationship can be set according to one or more of the modes 1-5, and the mode for setting the parent anchoring relationship is not limited by the invention. According to the method, the positions of the plurality of primary controls in the main control are set. After the positions of all the primary controls in the main control are set, setting the relative positions of the secondary controls in the layout window according to the anchoring line of the secondary controls and the anchoring of the primary controls.
The mode of customizing the secondary control in the main control piece is the same as the mode of customizing the primary control in the main control piece. And newly creating a secondary control and setting the length and the width of the newly created secondary control, wherein the shape of the secondary control is a right-angle rectangle. When the anchoring system is initialized, an object pointer of the secondary control in the main control piece is set, so that the relative position of the secondary control in the main control piece is set through the object pointer. As shown in fig. 4b, the main control 420 is customized with a secondary control 422 and a secondary control 423 based on the primary control 421.
And then, setting the relative position relation between the secondary control and the primary control according to the position of one primary control, and further setting the positions of a plurality of secondary controls in the main control piece. When the position of the secondary control in the main control is set, one primary control is selected from a plurality of primary controls which are customized in the main control and set with relative position relations, and the relative position relations between the secondary control and the primary control are set.
As shown in fig. 4b, primary control 421 is selected, and secondary controls 422 and 423 are set based on the position of primary control 420. The setting of the relative position relation between the secondary control and the primary control comprises the following steps: setting the width of the frames of the secondary control, namely setting the width of each frame of the secondary control, wherein the default is 0 when the width of the frame is not required to be set. According to one embodiment of the present invention, the secondary control 422 is set to have an upper frame width c, a lower frame width d, a left frame width e, and a right frame width f. The left border of the secondary control 423 has a width i.
And then, setting the border of the secondary control to be anchored with the border of the primary control and/or setting the boundary line of the secondary control to be anchored with the boundary line of the primary control. Setting the frame anchoring of the secondary control and the frame anchoring of the primary control comprises the following steps: setting a secondary control to rest on the frame of the primary control; and/or setting the distance between the border of the secondary control and the border of the primary control.
The mode of setting when setting the position of the secondary control comprises:
6. setting the secondary control to rest on the border of the primary control, namely, abutting the border line of the secondary control on the border line of the primary control, wherein the anchoring distance is 0. According to one embodiment of the invention, as shown in FIG. 4b, the left border line of secondary control 423 is set to abut the right border line of primary control 421, with the following code:
DAnchors<QLabel>rect8(new QLabel("rect8"))；
DAnchors<QLabel>rect9(new QLabel("rect9"))；
Rect9.setLeftMargin(rect8.rightMargin())；
7. and setting the anchoring of the border of the secondary control and the border of the primary control, wherein the anchoring distance is the distance between the border line of the secondary control and the border line of the primary control. According to one embodiment of the invention, the anchoring distance between the right border line of secondary control 422 and the left border line of primary control 421 is set to j.
8. Setting the anchoring of the boundary line of the secondary control and the boundary line of the primary control, namely setting the anchoring of the horizontal boundary line of the secondary control and the horizontal boundary line of the primary control and/or setting the anchoring of the vertical boundary line of the secondary control and the vertical boundary line of the primary control. The anchoring distance is the distance between the horizontal boundary of the secondary control and the horizontal boundary of the primary control or the distance between the vertical boundary of the secondary control and the vertical boundary of the primary control. FIG. 4c illustrates a manner of laying out controls according to yet another embodiment of the invention. In the main control 430 shown in fig. 4c, the primary control 431 is located at the center point of the main control 430, and the width of the right frame of the primary control 431 is k. Based on the secondary control 432 of the primary control 431, the width of the left bezel is l. The horizontal parting line of the secondary control 432 is set to be anchored with the horizontal parting line of the primary control 431 by 0. The vertical bisector of the secondary control 432 is set to anchor the vertical parting line of the primary control 431 by a distance m.
When the relative position of the secondary control is set, the setting can be performed according to one or more of the modes 6-8, and the mode for setting the relative position of the secondary control is not limited. According to the method, the positions of the plurality of secondary controls in the main control piece are set. After the positions of all the secondary controls in the main control are set, the method can set the multi-level controls according to the mode of setting the relative positions of the controls, including setting three-level controls, four-level controls, five-level controls and the like. Taking the tertiary control as an example, when the relative position of the tertiary control in the main control is set, the setting can be performed by setting the relative position of the tertiary control relative to the secondary control. By analogy with the mode of setting the controls of other levels, the invention does not limit the level number of the set controls.
Step S340 is executed, the layout window is loaded, and a plurality of controls are displayed in the layout window according to the size information and the position relation of the controls. And displaying the position of the primary control based on the relative position relation between the position of the primary control and the set primary control. And displaying the position of the secondary control according to the position of the primary control and the set relative position relation of the secondary control. The code to reload the layout window is as follows:
pWindow->show()；
return a.exec()；
according to the invention, the plurality of controls are arranged in the layout window, the anchoring system is initialized, the anchoring system generates anchor lines of the controls, and the positional relationship among the plurality of controls is arranged in the anchoring system according to the anchor lines, so that the positional relationship of the controls in the layout window is arranged. When the position relation between the controls is set in the anchoring system, the main control which is the same as the layout window is set firstly, then the main control is anchored with the main control according to the anchor line setting of the primary control, and the position of the primary control in the layout window is set; and anchoring the secondary control with the primary control according to the anchor line setting of the secondary control, and setting the position of the secondary control in the layout window. Therefore, the purpose of setting the position of the secondary control in the layout window can be achieved by setting the relative position relation between the secondary control and the primary control. The second-level control can change the position along with the position change of the first-level control when the layout window is changed, but the position relation of the second-level control relative to the first-level control is not changed, and the position of the control in the layout window is flexibly set. Furthermore, the frames of the primary control and the secondary control can be arranged, and the nearest distances among different controls are limited by setting the width of the frames, so that the requirements on the control layout in special scenes are met.
In the description provided herein, numerous specific details are set forth. However, it is understood that embodiments of the invention may be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been shown in detail in order not to obscure an understanding of this description.
A8, the method of A3, wherein the control further comprises a frame, and the step of setting the primary control to be anchored with the main control according to the anchor line of the primary control further comprises the steps of:
setting the width of the frame of the primary control, and setting the boundary anchoring of the frame of the primary control and the main control piece.
A9, the method of A6, wherein the setting the secondary control and the primary control anchoring according to the anchor line of the secondary control comprises the following steps:
setting the width of the frame of the secondary control;
and setting the border anchoring of the secondary control and the border anchoring of the primary control, and/or setting the boundary anchoring of the secondary control and the boundary anchoring of the primary control.
A10, the method of A9, wherein the setting the frame anchoring of the secondary control and the frame anchoring of the primary control comprises the following steps:
and setting the secondary control to stop at the frame of the primary control and/or setting the distance between the frame of the secondary control and the frame of the primary control.
A11, the method of any one of A8-A11, wherein the bezel comprises an upper bezel, a lower bezel, a left bezel, and a right bezel.
Similarly, it should be appreciated that in the foregoing description of exemplary embodiments of the invention, various features of the invention are sometimes grouped together in a single embodiment, figure, or description thereof for the purpose of streamlining the disclosure and aiding in the understanding of one or more of the various inventive aspects. However, the disclosed method should not be construed as reflecting the intention that: i.e., the claimed invention requires more features than are expressly recited in each claim. Rather, as the following claims reflect, inventive aspects lie in less than all features of a single foregoing disclosed embodiment. Thus, the claims following the detailed description are hereby expressly incorporated into this detailed description, with each claim standing on its own as a separate embodiment of this invention.
Those skilled in the art will appreciate that the modules or units or groups of devices in the examples disclosed herein may be arranged in a device as described in this embodiment, or alternatively may be located in one or more devices different from the devices in this example. The modules in the foregoing examples may be combined into one module or may be further divided into a plurality of sub-modules.
Those skilled in the art will appreciate that the modules in the apparatus of the embodiments may be adaptively changed and disposed in one or more apparatuses different from the embodiments. The modules or units or groups of embodiments may be combined into one module or unit or group, and furthermore they may be divided into a plurality of sub-modules or sub-units or groups. Any combination of all features disclosed in this specification (including any accompanying claims, abstract and drawings), and all of the processes or units of any method or apparatus so disclosed, may be used in combination, except insofar as at least some of such features and/or processes or units are mutually exclusive. Each feature disclosed in this specification (including any accompanying claims, abstract and drawings), may be replaced by alternative features serving the same, equivalent or similar purpose, unless expressly stated otherwise.
Furthermore, those skilled in the art will appreciate that while some embodiments described herein include some features but not others included in other embodiments, combinations of features of different embodiments are meant to be within the scope of the invention and form different embodiments. For example, in the following claims, any of the claimed embodiments can be used in any combination.
Furthermore, some of the embodiments are described herein as methods or combinations of method elements that may be implemented by a processor of a computer system or by other means of performing the functions. Thus, a processor with the necessary instructions for implementing the described method or method element forms a means for implementing the method or method element. Furthermore, the elements of the apparatus embodiments described herein are examples of the following apparatus: the apparatus is for carrying out the functions performed by the elements for carrying out the objects of the invention.
The various techniques described herein may be implemented in connection with hardware or software or, alternatively, with a combination of both. Thus, the methods and apparatus of the present invention, or certain aspects or portions of the methods and apparatus of the present invention, may take the form of program code (i.e., instructions) embodied in tangible media, such as floppy diskettes, CD-ROMs, hard drives, or any other machine-readable storage medium, wherein, when the program is loaded into and executed by a machine, such as a computer, the machine becomes an apparatus for practicing the invention.
In the case of program code execution on programmable computers, the computing device will generally include a processor, a storage medium readable by the processor (including volatile and non-volatile memory and/or storage elements), at least one input device, and at least one output device. Wherein the memory is configured to store program code; the processor is configured to execute the inventive method of determining a shutdown state of the device in accordance with instructions in said program code stored in the memory.
By way of example, and not limitation, computer readable media comprise computer storage media and communication media. Computer-readable media include computer storage media and communication media. Computer storage media stores information such as computer readable instructions, data structures, program modules, or other data. Communication media typically embodies computer readable instructions, data structures, program modules or other data in a modulated data signal such as a carrier wave or other transport mechanism and includes any information delivery media. Combinations of any of the above are also included within the scope of computer readable media.
As used herein, unless otherwise specified the use of the ordinal terms "first," "second," "third," etc., to describe a general object merely denote different instances of like objects, and are not intended to imply that the objects so described must have a given order, either temporally, spatially, in ranking, or in any other manner.
While the invention has been described with respect to a limited number of embodiments, those skilled in the art, having benefit of the above description, will appreciate that other embodiments are contemplated within the scope of the invention as described herein. Furthermore, it should be noted that the language used in the specification has been principally selected for readability and instructional purposes, and may not have been selected to delineate or circumscribe the inventive subject matter. Accordingly, many modifications and variations will be apparent to those of ordinary skill in the art without departing from the scope and spirit of the appended claims. The disclosure of the present invention is intended to be illustrative, but not limiting, of the scope of the invention, which is defined by the appended claims.
Claims (5)
1. A method of laying out controls adapted to be executed in a computing device, the method comprising:
setting a plurality of controls in a layout window, wherein the plurality of controls comprise a primary control and a secondary control, and the controls comprise size information;
initializing an anchoring system, wherein a main control corresponding to the layout window is arranged in the anchoring system, and the size of the main control is the same as that of the layout window;
generating an anchor line for the control in the anchor system;
setting the relative position of the primary control in the layout window according to the anchor line of the primary control and the anchor of the main control, wherein the anchor comprises that the distance from the primary control to the main control is unchanged;
setting the relative positions of the secondary control in the layout window by setting the anchoring of the secondary control and the primary control according to the anchor line of the secondary control; and
loading the layout window, and displaying a plurality of controls in the layout window according to the size information and the position relation of the controls;
setting the primary control and the main control anchoring according to the anchor line of the primary control comprises the following steps:
setting an anchor line of the primary control to be anchored with the boundary or the dividing line of the main control, wherein the dividing line of the main control comprises a horizontal dividing line and a vertical dividing line;
setting the boundary anchoring of the anchor line of the primary control and the main control piece comprises the following steps:
setting the boundary of the primary control stopped at the main control and/or setting the distance between the anchor line of the primary control and the boundary of the main control;
the attribute of one-level controlling part or second grade controlling part still includes the frame, and the frame includes frame, lower frame, left side frame and right frame, according to the anchor line setting one-level controlling part of one-level controlling part with the main control part anchor still includes:
setting the width of a first-level control frame;
setting boundary anchoring of a frame of the primary control and a main control, wherein the boundary or boundary anchoring of the frame of the primary control and the main control refers to boundary anchoring of a frame line of the primary control and the main control, and when the boundary anchoring of the frame and the main control is set, the anchoring distance is the distance between the frame line and the boundary of the main control;
the setting of the relative position relation between the secondary control and the primary control comprises the following steps:
setting the width of a frame of the secondary control;
setting the frame anchoring of the secondary control and the frame anchoring of the primary control, and/or setting the boundary anchoring of the secondary control and the boundary anchoring of the primary control;
setting the frame anchoring of the secondary control and the frame anchoring of the primary control comprises the following steps: setting a secondary control to be stopped at the border of the primary control or setting the distance between the border of the secondary control and the border of the primary control.
2. The method of claim 1, wherein the anchor line of the control comprises a border line, and the border comprises a top border line, a bottom border line, a left border line, and a right border line, the border line comprising a horizontal border line and a vertical border line.
3. The method of claim 2, wherein the size information includes a length and a width of the control, and the setting a plurality of controls in the layout window includes the steps of:
and creating a plurality of controls, and setting the length and the width of the plurality of controls.
4. A computing device, comprising:
one or more processors;
a memory; and
one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs comprising instructions for performing any of the methods of claims 1-3.
5. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions, which when executed by a computing device, cause the computing device to perform any of the methods of claims 1-3.
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311606923.7A CN117389675A (en) | 2021-01-04 | 2021-01-04 | Method for laying out controls, computing device and storage medium |
| CN202110002902.9A CN112732385B (en) | 2021-01-04 | 2021-01-04 | Method for laying out controls, computing device and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110002902.9A CN112732385B (en) | 2021-01-04 | 2021-01-04 | Method for laying out controls, computing device and storage medium |
Related Child Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311606923.7A Division CN117389675A (en) | 2021-01-04 | 2021-01-04 | Method for laying out controls, computing device and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112732385A CN112732385A (en) | 2021-04-30 |
| CN112732385B true CN112732385B (en) | 2023-12-15 |
Family
ID=75589517
Family Applications (2)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311606923.7A Pending CN117389675A (en) | 2021-01-04 | 2021-01-04 | Method for laying out controls, computing device and storage medium |
| CN202110002902.9A Active CN112732385B (en) | 2021-01-04 | 2021-01-04 | Method for laying out controls, computing device and storage medium |
Family Applications Before (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311606923.7A Pending CN117389675A (en) | 2021-01-04 | 2021-01-04 | Method for laying out controls, computing device and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (2) | CN117389675A (en) |
Citations (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101523887A (en) * | 2006-09-28 | 2009-09-02 | 惠普开发有限公司 | Graphic assembly layout with maximum page coverage |
| CN104699376A (en) * | 2015-04-03 | 2015-06-10 | 上海航天测控通信研究所 | Automatic control layout method |
| CN105511725A (en) * | 2015-12-09 | 2016-04-20 | 网易（杭州）网络有限公司 | Method and device for displaying controls in interface |
| CN106528736A (en) * | 2016-10-27 | 2017-03-22 | 中企动力科技股份有限公司 | Method and apparatus for displaying alignment line during dragging of page components |
| CN108363572A (en) * | 2018-01-03 | 2018-08-03 | 网易（杭州）网络有限公司 | A kind of method of UI autoplacements |
| CN109308199A (en) * | 2018-09-04 | 2019-02-05 | 广州优视网络科技有限公司 | A kind of display methods, device and the terminal device of control set |
| CN109614177A (en) * | 2018-10-31 | 2019-04-12 | 阿里巴巴集团控股有限公司 | Select component and its control method |
| CN111061473A (en) * | 2019-12-16 | 2020-04-24 | 新奥数能科技有限公司 | Visual component editing method and device for quickly building page |
| CN112000417A (en) * | 2020-10-27 | 2020-11-27 | 统信软件技术有限公司 | Control method for window display effect and computing device |
| CN112019820A (en) * | 2020-10-19 | 2020-12-01 | 武汉中科通达高新技术股份有限公司 | Interface generation method and device |
| CN112114786A (en) * | 2020-09-23 | 2020-12-22 | 统信软件技术有限公司 | Editor implementation method, computing device and readable storage medium |
| CN112148157A (en) * | 2019-06-28 | 2020-12-29 | 杭州海康威视数字技术股份有限公司 | Focus moving method and focus moving apparatus for graphic user interface |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140053063A1 (en) * | 2012-08-14 | 2014-02-20 | Microsoft Corporation | User interface control framework for stamping out controls using a declarative template |
| US10387547B2 (en) * | 2014-09-09 | 2019-08-20 | Intentional Software Corporation | Layout engine for creating a visual layout tree for a document |
| US10185797B2 (en) * | 2015-06-15 | 2019-01-22 | Cadence Design Systems, Inc. | Methods and devices for extraction of MEMS structures from a MEMS layout |
-
2021
- 2021-01-04 CN CN202311606923.7A patent/CN117389675A/en active Pending
- 2021-01-04 CN CN202110002902.9A patent/CN112732385B/en active Active
Patent Citations (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101523887A (en) * | 2006-09-28 | 2009-09-02 | 惠普开发有限公司 | Graphic assembly layout with maximum page coverage |
| CN104699376A (en) * | 2015-04-03 | 2015-06-10 | 上海航天测控通信研究所 | Automatic control layout method |
| CN105511725A (en) * | 2015-12-09 | 2016-04-20 | 网易（杭州）网络有限公司 | Method and device for displaying controls in interface |
| CN106528736A (en) * | 2016-10-27 | 2017-03-22 | 中企动力科技股份有限公司 | Method and apparatus for displaying alignment line during dragging of page components |
| CN108363572A (en) * | 2018-01-03 | 2018-08-03 | 网易（杭州）网络有限公司 | A kind of method of UI autoplacements |
| CN109308199A (en) * | 2018-09-04 | 2019-02-05 | 广州优视网络科技有限公司 | A kind of display methods, device and the terminal device of control set |
| CN109614177A (en) * | 2018-10-31 | 2019-04-12 | 阿里巴巴集团控股有限公司 | Select component and its control method |
| CN112148157A (en) * | 2019-06-28 | 2020-12-29 | 杭州海康威视数字技术股份有限公司 | Focus moving method and focus moving apparatus for graphic user interface |
| CN111061473A (en) * | 2019-12-16 | 2020-04-24 | 新奥数能科技有限公司 | Visual component editing method and device for quickly building page |
| CN112114786A (en) * | 2020-09-23 | 2020-12-22 | 统信软件技术有限公司 | Editor implementation method, computing device and readable storage medium |
| CN112019820A (en) * | 2020-10-19 | 2020-12-01 | 武汉中科通达高新技术股份有限公司 | Interface generation method and device |
| CN112000417A (en) * | 2020-10-27 | 2020-11-27 | 统信软件技术有限公司 | Control method for window display effect and computing device |
Non-Patent Citations (1)
| Title |
|---|
| "车载人机界面可视化开发工具的设计与实现";宛操慧;《中国优秀硕士学位论文全文数据库 信息科技辑》;I138-801 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN117389675A (en) | 2024-01-12 |
| CN112732385A (en) | 2021-04-30 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US7949948B2 (en) | Constraint and rule-based page layout | |
| RU2386171C2 (en) | Levelling in lists generated according to template | |
| RU2627108C2 (en) | Information content navigation direction setting on the basis of directed user signs | |
| US8042039B2 (en) | Populating a dynamic page template with digital content objects according to constraints specified in the dynamic page template | |
| US20080012859A1 (en) | Relayout of all or part of a graph in association with a change in state of a graph element | |
| US20140304671A1 (en) | Manipulating parameterized cell devices in a custom layout design | |
| JP6265451B2 (en) | Object management device, thinking support device, object management method, and program | |
| JP2007524116A (en) | An intelligent agenda object that reveals the context location in a presentation application | |
| US7675529B1 (en) | Method and apparatus to scale graphical user interfaces | |
| CN105740213A (en) | Presentation template providing method and device | |
| CN112965771B (en) | Virtual screen construction method, computing device and storage medium | |
| US20200201519A1 (en) | Information processing apparatus | |
| CN107797752A (en) | The rendering method and device of written handwriting, interactive intelligent tablet computer and storage medium | |
| US9465785B2 (en) | Methods and apparatus for comic creation | |
| CN112732385B (en) | Method for laying out controls, computing device and storage medium | |
| Plimmer et al. | Beautifying sketching-based design tool content: issues and experiences | |
| US20150277729A1 (en) | Electronic whiteboard device, input support method of electronic whiteboard, and computer-readable recording medium | |
| US10984170B2 (en) | Systems and/or methods for dynamic layout design | |
| US10963141B2 (en) | Smart multi-touch layout control for mobile devices | |
| US20150356370A1 (en) | Method and apparatus for identifying a desired object of an image using a suggestive marking | |
| CN112114786A (en) | Editor implementation method, computing device and readable storage medium | |
| Mao et al. | A Light-weight Mobile Education App for 3D Modelling Course Teaching | |
| CN114510306B (en) | Taskbar display method and device and computing equipment | |
| KR101505900B1 (en) | Touch screen device capable of outputting an electronic document and split screen control method of the touch screen device | |
| KR102566908B1 (en) | Electronic terminal device for generating object guide frame on the page of a presentation document, and the opreating method thereof |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |