CN113835806A - Page layout method and device, electronic equipment and storage medium - Google Patents
Page layout method and device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN113835806A CN113835806A CN202111110026.8A CN202111110026A CN113835806A CN 113835806 A CN113835806 A CN 113835806A CN 202111110026 A CN202111110026 A CN 202111110026A CN 113835806 A CN113835806 A CN 113835806A
- Authority
- CN
- China
- Prior art keywords
- page
- information sets
- layout
- information
- size
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 50
- 238000004590 computer program Methods 0.000 claims description 11
- 238000012545 processing Methods 0.000 claims description 4
- 238000010586 diagram Methods 0.000 description 12
- 230000008569 process Effects 0.000 description 6
- 238000011161 development Methods 0.000 description 5
- 230000018109 developmental process Effects 0.000 description 5
- 238000012800 visualization Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000000712 assembly Effects 0.000 description 1
- 238000000429 assembly Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 230000001788 irregular Effects 0.000 description 1
- 239000011159 matrix material Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 230000008520 organization Effects 0.000 description 1
- 238000005096 rolling process Methods 0.000 description 1
- 230000011218 segmentation Effects 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Images
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
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The disclosure relates to a page layout method, a page layout device, an electronic device and a storage medium, wherein the page layout method comprises the following steps: receiving a layout instruction of a first page; according to the layout instruction, determining layout parameters corresponding to a plurality of information sets in the first page, wherein each information set comprises at least one element; and based on the layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain the laid-out first page.
Description
Technical Field
The present disclosure relates to the technical field of WEB front end, and in particular, to a page layout method and apparatus, an electronic device, and a storage medium.
Background
With the development of the WEB front-end technology, the page layout is more and more concerned as an important technology in the WEB front-end technology, and the excellent page layout can enable the interface organization of the system to be more reasonable and high in visualization degree so as to improve the user experience; most of the existing page layout methods use elements or assemblies as operation objects to set sizes, are complex to operate and have low adaptability, and cannot meet diversified requirements of users.
Disclosure of Invention
To solve the technical problem or at least partially solve the technical problem, the present disclosure provides a page layout method, apparatus, device and storage medium.
In a first aspect, the present disclosure provides a page layout method, including:
receiving a layout instruction of a first page;
according to the layout instruction, determining layout parameters corresponding to a plurality of information sets in the first page, wherein each information set comprises at least one element;
and based on the layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain a laid-out first page.
Optionally, the layout parameters include at least one of:
a number of the plurality of information sets;
a size of each of the plurality of information sets;
spacing between multiple sets of information;
location information of the first identifier;
a percentage of each of the plurality of information sets to the ranking units;
coordinate information for each of a plurality of information sets;
the first mark is used for indicating a line-feed layout, or the first mark is used for indicating a column-feed layout.
Optionally, the layout parameters include: at least one of a number of the plurality of information sets, a size of each of the plurality of information sets, and a spacing between the plurality of information sets;
based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain a laid-out first page, including:
according to the layout parameters, carrying out layout in the target arrangement direction on a plurality of information sets in the first page to obtain a first page which is laid out according to the target arrangement direction;
wherein, the target arrangement direction is a row direction or a column direction.
Optionally, the layout parameters at least include: the number of the plurality of information sets, the size of each information set in the plurality of information sets, and the spacing between the plurality of information sets;
based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain a laid-out first page, including:
based on layout parameters corresponding to the information sets, carrying out layout on the information sets in the first page according to a target arrangement direction;
acquiring the sizes of the first display units corresponding to the arranged information sets;
if the size of the first display unit is larger than that of the first arrangement unit, adding a first mark at a target position in the first display unit, wherein the arrangement unit is a row or a column;
laying out at least one information set in the first content in a first arrangement unit, and laying out at least one information set in the second content in a second arrangement unit; the first content is before the target location and the second content is after the target location.
Optionally, the layout parameters at least include: the number of the plurality of information sets, the size of each information set in the plurality of information sets, and the spacing between the plurality of information sets;
based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain a laid-out first page, including:
based on layout parameters corresponding to the information sets, carrying out layout on the information sets in the first page according to a target arrangement direction;
acquiring the sizes of the first display units corresponding to the arranged information sets;
if the size of the first display unit is larger than that of the first arrangement unit, acquiring the number of the arrangement units in the first page and the corresponding size of each arrangement unit;
determining at least one position in the first display unit according to the number of the arrangement units in the first page, the corresponding size of each arrangement unit and the size of the first display unit;
adding a first mark at least one position to divide the first display unit to obtain a plurality of divided contents, and laying out the plurality of divided contents in different arrangement units, wherein each divided content comprises one information set in the plurality of information sets.
Optionally, the layout parameters at least include the number of the plurality of information sets, the size of each information set in the plurality of information sets, the spacing between the plurality of information sets, and the position information of the first identifier;
based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain a laid-out first page, including:
and if the layout parameters comprise the position information of the first identifier, switching the arrangement unit for the first display unit at the target position indicated by the position information.
Optionally, each of the plurality of information sets has the same size.
In a second aspect, the present disclosure provides a page layout apparatus, including:
the receiving module is used for receiving a layout instruction of a first page;
the processing module is used for determining layout parameters corresponding to a plurality of information sets in the first page, wherein each information set comprises at least one element;
and the layout module is used for laying out the plurality of information sets in the first page based on the layout parameters corresponding to the plurality of information sets to obtain the laid out first page.
Optionally, the layout parameter includes at least one of:
determining the layout parameters includes at least one of:
a number of the plurality of information sets;
a size of each of the plurality of information sets;
spacing between multiple sets of information;
location information of the first identifier;
a percentage of each of the plurality of information sets to the ranking units;
coordinate information for each of a plurality of information sets;
the first mark is used for indicating a line-feed layout, or the first mark is used for indicating a column-feed layout.
Optionally, the layout parameters include: at least one of a number of the plurality of information sets, a size of each of the plurality of information sets, and a spacing between the plurality of information sets;
the layout module is specifically configured to: based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain a laid-out first page, including:
according to the layout parameters, carrying out layout in the target arrangement direction on a plurality of information sets in the first page to obtain a first page which is laid out according to the target arrangement direction;
wherein, the target arrangement direction is a row direction or a column direction.
Optionally, the layout parameters at least include: the number of the plurality of information sets, the size of each information set in the plurality of information sets, and the spacing between the plurality of information sets;
the layout module is specifically configured to: based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain a laid-out first page, including:
based on layout parameters corresponding to the information sets, carrying out layout on the information sets in the first page according to a target arrangement direction;
acquiring the sizes of the first display units corresponding to the arranged information sets;
if the size of the first display unit is larger than that of the first arrangement unit, adding a first mark at a target position in the first display unit, wherein the arrangement unit is a row or a column;
laying out at least one information set in the first content in a first arrangement unit, and laying out at least one information set in the second content in a second arrangement unit; the first content is before the target location and the second content is after the target location.
Optionally, the layout parameters at least include: the number of the plurality of information sets, the size of each information set in the plurality of information sets, and the spacing between the plurality of information sets;
the layout module is specifically configured to: based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain a laid-out first page, including:
based on layout parameters corresponding to the information sets, carrying out layout on the information sets in the first page according to a target arrangement direction;
acquiring the sizes of the first display units corresponding to the arranged information sets;
if the size of the first display unit is larger than that of the first arrangement unit, acquiring the number of the arrangement units in the first page and the corresponding size of each arrangement unit;
determining at least one position in the first display unit according to the number of the arrangement units in the first page, the corresponding size of each arrangement unit and the size of the first display unit;
adding a first mark at least one position to divide the first display unit to obtain a plurality of divided contents, and laying out the plurality of divided contents in different arrangement units, wherein each divided content comprises one information set in the plurality of information sets.
Optionally, the layout parameters at least include the number of the plurality of information sets, the size of each information set in the plurality of information sets, the spacing between the plurality of information sets, and the position information of the first identifier;
the layout module is specifically configured to: based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain a laid-out first page, including:
and if the layout parameters comprise the position information of the first identifier, switching the arrangement unit for the first display unit at the target position indicated by the position information.
Optionally, each of the plurality of information sets has the same size.
In a third aspect, the present disclosure provides an electronic device, comprising: a processor, a memory and a computer program stored on the memory and executable on the processor, the computer program, when executed by the processor, implementing the page layout method as in the first aspect.
In a fourth aspect, the present disclosure provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements the page layout method of the first aspect.
Compared with the prior art, the technical scheme provided by the embodiment of the disclosure has the following advantages: according to the method and the device, the layout parameters corresponding to the information sets in the page are obtained, so that the page is correspondingly arranged, the layout page required by the user can be obtained by changing the corresponding layout parameters, the page layout is flexible and changeable, and the user requirements can be met to adapt to various application scenes.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and together with the description, serve to explain the principles of the disclosure.
In order to more clearly illustrate the embodiments or technical solutions in the prior art of the present disclosure, the drawings used in the description of the embodiments or prior art will be briefly described below, and it is obvious for those skilled in the art that other drawings can be obtained according to the drawings without inventive exercise.
FIG. 1 is a first schematic diagram illustrating a page layout method according to an embodiment of the present disclosure;
fig. 2 is a schematic diagram of a first implementation manner of a page layout method according to an embodiment of the disclosure;
FIG. 3 is a schematic diagram of another page layout method according to another embodiment of the present disclosure;
fig. 4 is a schematic diagram of another second implementation manner of the page layout method according to the embodiment of the disclosure;
FIG. 5 is a third schematic diagram of another page layout method according to the embodiment of the present disclosure;
fig. 6 is a schematic diagram of a third implementation manner of a page layout method according to another embodiment of the disclosure;
fig. 7 is a schematic diagram of a fourth implementation manner of yet another page layout method according to an embodiment of the present disclosure;
FIG. 8 is a block diagram of a page layout apparatus according to an embodiment of the present disclosure;
fig. 9 is a block diagram of an electronic device according to an embodiment of the disclosure.
Detailed Description
In order that the above objects, features and advantages of the present disclosure may be more clearly understood, aspects of the present disclosure will be further described below. It should be noted that the embodiments and features of the embodiments of the present disclosure may be combined with each other without conflict.
In the following description, numerous specific details are set forth in order to provide a thorough understanding of the present disclosure, but the present disclosure may be practiced in other ways than those described herein; it is to be understood that the embodiments disclosed in the specification are only a few embodiments of the present disclosure, and not all embodiments.
In the prior art, the layout is performed by directly setting the size of elements in a WEB page, the number of the elements required by the layout page is large, the elements are changed, each element needs to be adjusted, and the workload is large; or in the prior art, the components are processed, the configured components are stored in the style library, and a user needs to compile corresponding layout codes for the components according to different layout schemes, so that the operation is complex and the difficulty coefficient is large.
In order to solve the above problems, according to the present disclosure, the layout parameters corresponding to the information sets in the page are obtained to meet the user requirements for performing corresponding layout on the page, so that flexible and variable page layouts can be obtained according to different layout parameters, and the user operation is facilitated.
The page layout method described in the embodiment of the present disclosure may be applied to a page layout apparatus or an electronic device, where the page layout apparatus may be a functional module and/or a functional entity that can implement the page layout method in the electronic device.
The electronic device may include: examples of smart phones (e.g., Android phones, IOS phones, Windows Phone phones, etc.), tablet computers, palm computers, notebook computers, video matrix, monitoring platforms, Mobile Internet Devices (MID) or wearable Devices, servers, e.g., cloud servers, etc., are only illustrative and not exhaustive, including but not limited to the above.
Fig. 1 is a first schematic diagram of a page layout method according to an embodiment of the disclosure, and as shown in fig. 1, the page layout method includes:
step S110, receiving a layout instruction of the first page.
In the embodiment of the disclosure, the first page is a page that a user needs to perform layout, the layout instruction is received through the data interface, and the layout parameters corresponding to the multiple information sets in the first page are acquired under the trigger of the layout instruction.
Optionally, the page layout instruction is configured by a user through a user-defined configuration page layout parameter, or the page layout instruction is triggered by a page metadata file, where the page metadata file includes layout parameters corresponding to a plurality of information sets in the first page.
Step S120, determining layout parameters corresponding to a plurality of information sets in the first page according to the layout instruction, where each information set includes at least one element.
In the embodiment of the present disclosure, the information set includes at least one element, or the information combination includes at least one component, where the component is composed of elements, for example, the information set includes characters, pictures, tables, and buttons. As shown in fig. 2, 2-a represents a layout container of a page, wherein 2-b represents an information set, 2-c represents a component, and a text is an element, the illustration only explains the relationship of the page, the information set, the component, and the element, and the type, number, and shape of the page, the information set, the component, and the element are not limited.
It should be noted that, for better understanding of the inventive solution of the present application, the layout container is described as follows: the layout container is a basic structure for building pages, can position components in an infinite rolling area, is divided into an outer container, a top column container, a side container, a main area container, a bottom column container and the like, and is used for conveniently and quickly carrying out page layout.
Optionally, the layout parameters include, but are not limited to, at least one of 1) to 6):
1) a number of the plurality of information sets;
2) a size of each of the plurality of information sets;
if the information sets are regular shapes, for example, rectangular information sets, the size of each of the plurality of information sets represents the width and/or height of the rectangular information set; for another example, a circular information set, the size of the circular information set is a radius or a diameter. The shape of the information set is not specifically limited in this embodiment, and the size of the information set in other irregular shapes is determined according to a corresponding method, which is not described herein again.
3) Spacing between multiple sets of information;
optionally, the distance between the information sets is determined by using the outer frame of the information set as a reference, the distance from the outer frame of one information set to the outer frame of another information set is determined as a distance between the information sets, or the distance from the center point of one information set to the center point of another information set is determined by using the center point of the information set as a reference, and the distance between the information sets is determined by using the distance from the center point of one information set to the center point of another information set as a distance between the information sets, but the method is not limited to the above method for determining the distance between the information sets.
4) Location information of the first identifier;
the first mark is used for indicating a line-feed layout, or the first mark is used for indicating a column-feed layout; location information of the first identity for adding the first identity at the indicated location.
5) A percentage of each of the plurality of information sets to the ranking units;
the percentage of each information set to the arrangement unit in the plurality of information sets is to divide the page into a plurality of arrangement units, for example, rows or columns, the percentage is the percentage of the information sets in the rows or columns, for example, one row is used as one arrangement unit, the width of the information set is set to 30%, then the information sets account for 30% in one row, and three information sets can be arranged in one row, so that in the process of page change, each information set can also change according to the percentage rule.
6) Coordinate information for each of a plurality of information sets;
the coordinate information for each of the plurality of information sets includes an abscissa and an ordinate for each information set.
It should be noted that the above page layout parameters may be, but are not limited to, configured in a JSON data structure of the layout container, and in order to better understand the inventive solution of the present application, JSON is introduced as follows:
JSON (JavaScript Object Notation) is a lightweight data exchange format. It stores and represents data in a text format completely independent of the programming language, based on a subset of ECMAScript (JS specification set by the european computer association). The compact and clear hierarchy makes JSON an ideal data exchange language. The network transmission method is easy to read and write by people, is easy to analyze and generate by machines, and effectively improves the network transmission efficiency.
The steps provide various layout parameters suitable for different layout schemes by determining the layout parameters corresponding to the information sets, meet the layout requirements of users, and realize the multiplexing of the layout containers.
Step S130, based on the layout parameters corresponding to the multiple information sets, laying out the multiple information sets in the first page to obtain the laid out first page.
The following (1) to (4) embodiments can be obtained by performing layout according to different types of layout parameters corresponding to a plurality of information sets and different combinations of the layout parameters corresponding to the plurality of information sets:
(1) the first implementation mode comprises the following steps:
determining the layout parameters includes: at least one of a number of the plurality of information sets, a size of each of the plurality of information sets, and a spacing between the plurality of information sets;
based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain a laid-out first page, including:
according to the layout parameters, carrying out layout in the target arrangement direction on a plurality of information sets in the first page to obtain a first page which is laid out according to the target arrangement direction;
wherein, the target arrangement direction is a row direction or a column direction.
(2) Second embodiment
Determining layout parameters corresponding to a plurality of information sets at least comprises: the number of the plurality of information sets, the size of each information set in the plurality of information sets, and the spacing between the plurality of information sets;
based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain the laid-out first page, including:
based on layout parameters corresponding to the information sets, performing layout on the information sets in the first page according to a target arrangement direction;
acquiring the sizes of the first display units corresponding to the plurality of information sets after arrangement;
if the size of the first display unit is larger than that of a first arrangement unit, adding the first mark at a target position in the first display unit, wherein the arrangement unit is a row or a column;
laying out at least one information set in the first content in a first arrangement unit, and laying out at least one information set in the second content in a second arrangement unit; the first content is before the target location and the second content is after the target location.
(3) The third embodiment is as follows:
determining layout parameters includes at least: the number of the plurality of information sets, the size of each information set in the plurality of information sets, and the spacing between the plurality of information sets;
based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain a laid-out first page, including:
based on layout parameters corresponding to the information sets, carrying out layout on the information sets in the first page according to a target arrangement direction;
acquiring the sizes of the first display units corresponding to the arranged information sets;
if the size of the first display unit is larger than that of the first arrangement unit, acquiring the number of the arrangement units in the first page and the corresponding size of each arrangement unit;
determining at least one position in the first display unit according to the number of the arrangement units in the first page, the corresponding size of each arrangement unit and the size of the first display unit;
adding a first mark at least one position to divide the first display unit to obtain a plurality of divided contents, and laying out the plurality of divided contents in different arrangement units, wherein each divided content comprises one information set in the plurality of information sets.
(4) The fourth embodiment:
determining that the layout parameters at least comprise the number of the plurality of information sets, the size of each information set in the plurality of information sets, the spacing between the plurality of information sets and the position information of the first identifier;
based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain a laid-out first page, including:
and if the layout parameters comprise the position information of the first identifier, switching the arrangement unit for the first display unit at the target position indicated by the position information.
In one embodiment, determining the layout parameters comprises: at least one of a number of the plurality of information sets, a size of each of the plurality of information sets, and a spacing between the plurality of information sets;
after determining the layout parameters, in an optional implementation manner provided by this embodiment, the page layout is performed in the following manner:
according to the layout parameters, carrying out layout in the target arrangement direction on a plurality of information sets in the first page to obtain a first page which is laid out according to the target arrangement direction;
wherein, the target arrangement direction is a row direction or a column direction.
Corresponding to the first embodiment, as shown in fig. 2, for example, the determined layout parameters include that the number of information sets is 4, the size of each information set is 100 pixels wide × 20 pixels high, and the spacing between the information sets is 5 pixels when the outline is taken as a reference, and then the 4 information sets are laid out in a row direction in the page according to the layout parameters, that is, the information sets are laid out from top to bottom.
According to the determined page layout parameters, single-row layout or single-column layout is carried out on each information set, one layout mode of page diversified layout is achieved, page layout is concise, and visualization degree is high.
In an embodiment, as shown in fig. 3, a schematic diagram of a page layout method according to an embodiment of the present disclosure corresponds to the second embodiment.
Step S310, receiving a layout instruction of a first page.
Step S312, determining layout parameters corresponding to the plurality of information sets according to the layout instruction at least includes: the number of the plurality of information sets, the size of each of the plurality of information sets, and the spacing between the plurality of information sets.
Step 313, based on the layout parameters corresponding to the plurality of information sets, the plurality of information sets in the first page are laid out according to the target arrangement direction.
Specifically, the number of information sets, the size of each information set, and the spacing between information sets are determined, a plurality of information sets are arranged in the row or column direction according to the above parameters, and then step S316 is performed.
Step S316, acquiring the sizes of the first display units corresponding to the arranged information sets;
the first display unit is a layout unit occupied by a plurality of information sets after being laid out according to the target arrangement direction.
The size of a layout unit occupied by a page after arranging a plurality of information sets in rows or columns is obtained for comparison with the size of a first arrangement unit, where the first arrangement unit is a layout unit that divides the first page in a target arrangement direction, for example, the size of the first page is 100 × 100 (width × height), and the first page is divided into 4 row-direction arrangement units, so that the size of each row-direction arrangement unit can represent 100 × 25 (width × height).
Step S318, if the size of the first display unit is larger than the size of the first arrangement unit, adding the first identifier to the target position in the first display unit, where the arrangement unit is a row or a column.
In specific implementation, the size of the layout unit occupied by the page after the plurality of information sets are arranged in rows or columns is compared with the size of the row or column of the first page, so that the size of the layout unit occupied by the page after the plurality of information sets are arranged in rows or columns is larger than the size of the row or column of the first page, and then a first identifier is added at a position exceeding the size of the row or column of the first page, wherein the first identifier is used for dividing the information sets arranged in step S310, after the division, the information set before the position of the first identifier is the first content, and the information set after the first identifier is the second content.
In addition, if the size of the first display unit is smaller than or equal to the size of the first arranging unit, the plurality of information sets are arranged on the first display unit without adding the first mark. For example, if the size occupied by the arrangement of the plurality of information sets is the same as the size of the first line of the page, the plurality of information sets are arranged in the first line of the page.
Step S320, laying out at least one information set in the first content in a first arrangement unit, and laying out at least one information set in the second content in a second arrangement unit; the first content is before the target location and the second content is after the target location.
After the first identifier is added, the size of the first content obtained by segmentation is smaller than or equal to the size of the first arrangement unit, at least one information set contained in the first content is laid out according to the space between the plurality of information sets in the layout parameter, and the second content is laid out in the second arrangement unit.
Corresponding to the second embodiment, exemplarily, as shown in fig. 4, the determined layout parameters include that the number of information sets is 4, the size of each information set is 25 pixels wide × 10 pixels high, the distance between the information sets is determined to be 10 pixels under the condition that the outline is taken as a reference, the 4 information sets are laid out in a page in a row direction according to the layout parameters, that is, the information sets are laid out in a left-to-right manner, and a line feed identifier is automatically added after a line is arranged;
wherein 4-a represents an information set, 4-b represents an arrangement unit, and 4-c represents a page.
Fig. 6 corresponding to the third embodiment and fig. 7 corresponding to the fourth embodiment are the same graphs showing exemplary information sets, arrangement units, and pages, and the description of the disclosure will not be repeated;
by determining the number of the information sets, the size of each information set in the information sets and the distance between the information sets, the first identifier is added when the page layout needs line changing or column changing under the condition that the layout parameters do not include the first identifier, so that automatic line changing is realized, the page size is adapted, the page layout with attractive appearance and high visualization degree is performed, the user experience is improved, meanwhile, the page layout container serves as one of multiple layout schemes, the applicability of the layout container to different layout schemes is embodied, and the reusability of the layout container is favorably improved.
(3) The third embodiment is as follows:
in an embodiment, as shown in fig. 5, a schematic diagram of a page layout method according to an embodiment of the present disclosure is shown, which corresponds to the third embodiment.
Step S510, receiving a layout instruction of the first page.
Step S512, determining layout parameters at least includes: the number of the plurality of information sets, the size of each of the plurality of information sets, and the spacing between the plurality of information sets.
Step S514, based on the layout parameters corresponding to the plurality of information sets, performing layout according to the target arrangement direction on the plurality of information sets in the first page.
Step S515, obtaining the sizes of the first display units corresponding to the arranged information sets.
Step S518, if the size of the first display unit is larger than the size of the first arrangement unit, acquiring the number of arrangement units in the first page and the corresponding size of each arrangement unit.
In specific implementation, the size of a layout unit occupied by the page after the plurality of information sets are laid out in rows or columns is compared with the size of the row or column of the first page, and the size of the layout unit occupied by the page after the plurality of information sets are arranged in rows or columns is larger than the size of the row or column of the first page, so that the number of all rows or columns of the first page and the size of each row or column are obtained. For example, if the size occupied by the plurality of information sets arranged in rows is larger than the width of one row of the page, the number of rows of the page divided by the rows and the size of each row are obtained.
Step S520, determining at least one position in the first display unit according to the number of the arrangement units in the first page, the corresponding size of each arrangement unit, and the size of the first display unit.
The size of a layout unit occupied by a page after the plurality of information sets are arranged in rows or columns is larger than that of a row or column of the first page, for example, the width of the plurality of information sets exceeding the first row of the page when the plurality of information sets are arranged in the first row of the page, the information sets exceeding the first row need to be subjected to line changing, the positions of the plurality of information sets needing to be subjected to line changing in the first row can be determined, and the positions of the plurality of information sets needing to be subjected to line changing in other rows of the page can be determined according to the row number and the width of the page. After the position is determined, step S522 is performed.
Step S522, adding a first identifier at least one position to divide the first display unit to obtain a plurality of divided contents, and laying out the plurality of divided contents in different arrangement units, where each divided content includes one information set of the plurality of information sets.
Adding a first identifier according to the position determined in step S520, performing line feed or column feed layout at the corresponding position to divide the first display unit obtained after the layout in step S514, where the number of the divided contents is the same as the number of the arrangement units of the page, and then laying out each content in the corresponding arrangement unit.
For example, when the information sets are arranged in the first row of the page, the size of the information sets exceeding the first row of the page is obtained, the number of all rows of the page and the width of each row are obtained to be used for determining the position of the line feed identifier, and the line feed identifier is added to the position of the information sets arranged in the position exceeding the width of the row, so that the multiple information sets can be quickly and regularly laid out.
It should be noted that, when the second content is laid out, there is a case that the size of the next arrangement unit of the first arrangement unit is still smaller and is not enough to accommodate the second content, that is, the first identifier still needs to be added to the second content, and the principle of adding the first identifier to the second content is the same as the principle of adding the first identifier to the target position in the first display unit, and details are not described here.
In addition, the first identifier does not divide the information set, and after the first identifier is added, the information set exceeding the row or column size is subjected to row changing layout or column changing layout.
Corresponding to the third embodiment, exemplarily, as shown in fig. 6, the determined layout parameters include that the number of information sets is 12, the size of each information set is 25 pixels wide × 10 pixels high, the distance between the information sets is determined to be 10 pixels when the outline is taken as a reference, the 12 information sets are laid out in a page in a row direction according to the layout parameters, that is, the information sets are laid out in a left-to-right manner, four rows of the page are obtained after one row arrangement is completed, and a line feed identifier is automatically added after each row arrangement is completed.
The number of the information sets, the size of each information set in the information sets and the distance between the information sets are determined, page size is determined, line feed identification is automatically increased, the requirement of regular layout of a user is met, display content is rapidly divided, the visualization degree of a page is improved, the layout container is used as one of multiple layout schemes, the applicability of the layout container to different layout schemes is reflected, and the reusability of the layout container is favorably improved.
In one embodiment, a layout instruction of a first page is received, and then according to the layout instruction, the layout parameters at least comprise the number of a plurality of information sets, the size of each information set in the plurality of information sets, the spacing between the plurality of information sets and the position information of a first identifier are determined;
optionally, the laying out the multiple information sets in the first page based on the layout parameters corresponding to the multiple information sets to obtain a laid out first page includes:
and if the layout parameters comprise the position information of the first identifier, switching the arrangement unit for the first display unit at the target position indicated by the position information.
During specific implementation, according to the position information of the first identifier included in the layout parameters, at the target position indicated by the position information, line-changing layout or column-changing layout is performed on the plurality of information sets, so that the page is flexibly laid according to the layout requirements of the user.
Optionally, each of the plurality of information sets has the same size.
Corresponding to the fourth embodiment, exemplarily, as shown in fig. 7, the determined layout parameters include that the number of information sets is 8, the size of each information set is 25 pixels wide × 10 pixels high, the distance between the information sets is determined to be 10 pixels with reference to the outer frame, the 8 information sets are laid out in the page in a row direction according to the layout parameters, that is, the information sets are laid out in a left-to-right manner, and according to the user requirement, a line feed identifier is added after the first information set, after the third information set, and after the 8 information set, so as to obtain a page layout meeting the user requirement.
It should be noted that the pages obtained according to different types and combination modes of the layout parameters are not limited to the above pages, and the embodiment of the present disclosure does not limit this.
In summary, according to the page layout method provided by the present disclosure, the layout parameters corresponding to the information sets in the page are obtained to perform corresponding layout on the page, and the layout page required by the user can be obtained by changing the corresponding layout parameters in the layout container, so that multiplexing of the layout container is realized, thereby meeting the user requirements to adapt to various application scenarios, and simultaneously, the page layout is flexible and changeable according to different types of parameters.
In practical application, the layout of the page and other development services are realized together by a design scheme, so that the corresponding development services also need to be adaptively adjusted after the user changes the layout of the page, and in this embodiment, the layout of the page and other development services are decoupled by configuring layout parameters in a JSON data structure of a layout container and are delivered to the layout container for unified processing, so that the user is concentrated in the development of the services, and the user experience is improved.
As shown in fig. 8, an embodiment of the present disclosure provides a page layout apparatus, including:
a receiving module 810, configured to receive a layout instruction of a first page;
a processing module 820, configured to determine layout parameters corresponding to a plurality of information sets in the first page, where each information set includes at least one element;
the layout module 830 is configured to layout the multiple information sets in the first page based on the layout parameters corresponding to the multiple information sets to obtain a first page after layout.
In some embodiments, the layout parameters include at least one of:
a number of the plurality of information sets;
a size of each of the plurality of information sets;
spacing between multiple sets of information;
location information of the first identifier;
a percentage of each of the plurality of information sets to the ranking units;
coordinate information for each of a plurality of information sets;
the first mark is used for indicating a line-feed layout, or the first mark is used for indicating a column-feed layout.
In some embodiments, the layout parameters include: at least one of a number of the plurality of information sets, a size of each of the plurality of information sets, and a spacing between the plurality of information sets;
the layout module 830 is specifically configured to: based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain a laid-out first page, including:
according to the layout parameters, carrying out layout in the target arrangement direction on a plurality of information sets in the first page to obtain a first page which is laid out according to the target arrangement direction;
wherein, the target arrangement direction is a row direction or a column direction.
In some embodiments, the layout parameters include at least: the number of the plurality of information sets, the size of each information set in the plurality of information sets, and the spacing between the plurality of information sets;
the layout module 830 is specifically configured to: based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain a laid-out first page, including:
based on layout parameters corresponding to the information sets, carrying out layout on the information sets in the first page according to a target arrangement direction;
acquiring the sizes of the first display units corresponding to the arranged information sets;
if the size of the first display unit is larger than that of the first arrangement unit, adding a first mark at a target position in the first display unit, wherein the arrangement unit is a row or a column;
laying out at least one information set in the first content in a first arrangement unit, and laying out at least one information set in the second content in a second arrangement unit; the first content is before the target location and the second content is after the target location.
In some embodiments, the layout parameters include at least: the number of the plurality of information sets, the size of each information set in the plurality of information sets, and the spacing between the plurality of information sets;
the layout module 830 is specifically configured to: based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain a laid-out first page, including:
based on layout parameters corresponding to the information sets, carrying out layout on the information sets in the first page according to a target arrangement direction;
acquiring the sizes of the first display units corresponding to the arranged information sets;
if the size of the first display unit is larger than that of the first arrangement unit, acquiring the number of the arrangement units in the first page and the corresponding size of each arrangement unit;
determining at least one position in the first display unit according to the number of the arrangement units in the first page, the corresponding size of each arrangement unit and the size of the first display unit;
adding a first mark at least one position to divide the first display unit to obtain a plurality of divided contents, and laying out the plurality of divided contents in different arrangement units, wherein each divided content comprises one information set in the plurality of information sets.
In some embodiments, the layout parameters include at least a number of the plurality of information sets, a size of each of the plurality of information sets, a spacing between the plurality of information sets, and location information of the first identifier;
the layout module 830 is specifically configured to: based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain a laid-out first page, including:
and if the layout parameters comprise the position information of the first identifier, switching the arrangement unit for the first display unit at the target position indicated by the position information.
Optionally, each of the plurality of information sets has the same size.
Through the page layout device disclosed by the embodiment, the layout parameters corresponding to the information sets in the page are acquired to perform corresponding layout on the page, and the corresponding layout parameters in the layout container are changed, so that the page layout is flexible and changeable, the layout page required by a user can be obtained, the multiplexing of the layout container is realized, the user requirements can be met to adapt to various application scenes, and the user experience is improved.
As shown in fig. 9, an embodiment of the present disclosure provides an electronic device, where the page layout device includes: the wearable device may further include a processor 901, a memory 902, and a computer program stored in the memory 902 and capable of running on the processor 901, where the computer program is capable of implementing each process executed by the wearable device in the foregoing method embodiments by the processor 901, and achieving the same technical effect, and in order to avoid repetition, details are not repeated here.
The disclosed embodiment provides a computer-readable storage medium, which is characterized in that a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, the computer program implements each process executed by the electronic device in the above method embodiments, and can achieve the same technical effect, and in order to avoid repetition, the details are not repeated here.
The computer-readable storage medium may be a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk.
From the above description of the embodiments, it is obvious for a person skilled in the art that the present disclosure can be implemented by software and necessary general hardware, and certainly can be implemented by hardware, but in many cases, the former is a better embodiment. Based on such understanding, the technical solutions of the present disclosure may be embodied in the form of a software product, which may be stored in a computer-readable storage medium, such as a floppy disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a FLASH Memory (FLASH), a hard disk or an optical disk of a computer, and includes several instructions for enabling a computer device (which may be a personal computer, a server, or a network device) to execute the methods according to the embodiments of the present disclosure.
It should be noted that, in the embodiment of the page layout apparatus, the included units and modules are only divided according to functional logic, but are not limited to the above division as long as the corresponding functions can be implemented; in addition, specific names of the functional units are only used for distinguishing one functional unit from another, and are not used for limiting the protection scope of the present disclosure.
It is noted that, in this document, relational terms such as "first" and "second," and the like, may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in a process, method, article, or apparatus that comprises the element.
The foregoing are merely exemplary embodiments of the present disclosure, which enable those skilled in the art to understand or practice the present disclosure. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other embodiments without departing from the spirit or scope of the disclosure. Thus, the present disclosure is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.
Claims (10)
1. A page layout method, comprising:
receiving a layout instruction of a first page;
according to the layout instruction, determining layout parameters corresponding to a plurality of information sets in the first page, wherein each information set comprises at least one element;
and based on the layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain the laid-out first page.
2. The method of claim 1, wherein the layout parameters comprise at least one of:
a number of the plurality of information sets;
a size of each of the plurality of information sets;
a spacing between the plurality of information sets;
location information of the first identifier;
a percentage of each of the plurality of information sets to ranking units;
coordinate information for each of the plurality of information sets;
the first identifier is used for indicating a line-feed layout, or the first identifier is used for indicating a column-feed layout.
3. The page layout method according to claim 2, wherein the layout parameters include: at least one of a number of the plurality of information sets, a size of each of the plurality of information sets, and a spacing between the plurality of information sets;
based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain the laid-out first page, including:
according to the layout parameters, performing layout in a target arrangement direction on the plurality of information sets in the first page to obtain the first page which is laid in the target arrangement direction;
wherein the target arrangement direction is a row direction or a column direction.
4. The page layout method according to claim 2, wherein the layout parameters include at least: a number of the plurality of information sets, a size of each of the plurality of information sets, and a spacing between the plurality of information sets;
based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain the laid-out first page, including:
based on layout parameters corresponding to the information sets, performing layout on the information sets in the first page according to a target arrangement direction;
acquiring the sizes of the first display units corresponding to the plurality of information sets after arrangement;
if the size of the first display unit is larger than that of a first arrangement unit, adding the first mark at a target position in the first display unit, wherein the arrangement unit is a row or a column;
laying out at least one information set in the first content in a first arrangement unit, and laying out at least one information set in the second content in a second arrangement unit; the first content is before the target location and the second content is after the target location.
5. The page layout method according to claim 2, wherein the layout parameters include at least: a number of the plurality of information sets, a size of each of the plurality of information sets, and a spacing between the plurality of information sets;
based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain the laid-out first page, including:
based on layout parameters corresponding to the information sets, performing layout on the information sets in the first page according to a target arrangement direction;
acquiring the sizes of the first display units corresponding to the plurality of information sets after arrangement;
if the size of the first display unit is larger than that of a first arrangement unit, acquiring the number of arrangement units in the first page and the corresponding size of each arrangement unit;
determining at least one position in the first display unit according to the number of the arrangement units in the first page, the corresponding size of each arrangement unit and the size of the first display unit;
and adding the first identifier at the at least one position to divide the first display unit to obtain a plurality of divided contents, and laying out the plurality of divided contents in different arrangement units, wherein each divided content comprises one information set in the plurality of information sets.
6. The page layout method according to claim 2, wherein the layout parameters include at least the number of the plurality of information sets, the size of each of the plurality of information sets, the spacing between the plurality of information sets, and the position information of the first mark;
based on layout parameters corresponding to the information sets, laying out the information sets in the first page to obtain the laid-out first page, including:
and if the layout parameters comprise the position information of the first identifier, switching the arrangement unit for the first display unit at the target position indicated by the position information.
7. The page layout method according to any one of claims 2 to 6, wherein each of the plurality of information sets is the same size.
8. A page layout apparatus, comprising:
the receiving module is used for receiving a layout instruction of a first page;
the processing module is used for determining layout parameters corresponding to a plurality of information sets in the first page, wherein each information set comprises at least one element;
and the layout module is used for laying out the plurality of information sets in the first page based on the layout parameters corresponding to the plurality of information sets so as to obtain the first page after layout.
9. An electronic device, comprising: a processor, a memory and a computer program stored on the memory and executable on the processor, the computer program, when executed by the processor, implementing the page layout method of any one of claims 1 to 7.
10. A computer-readable storage medium, comprising: the computer-readable storage medium has stored thereon a computer program which, when executed by a processor, implements the page layout method of any of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111110026.8A CN113835806B (en) | 2021-09-18 | 2021-09-18 | Page layout method and device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111110026.8A CN113835806B (en) | 2021-09-18 | 2021-09-18 | Page layout method and device, electronic equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113835806A true CN113835806A (en) | 2021-12-24 |
| CN113835806B CN113835806B (en) | 2024-03-15 |
Family
ID=78960437
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111110026.8A Active CN113835806B (en) | 2021-09-18 | 2021-09-18 | Page layout method and device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113835806B (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114816186A (en) * | 2022-05-09 | 2022-07-29 | 广州市易工品科技有限公司 | Report setting method and device based on mobile terminal, electronic equipment and storage medium |
| CN116126298A (en) * | 2023-04-19 | 2023-05-16 | 北京尽微致广信息技术有限公司 | Object layout processing method, device and computer readable medium |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112579241A (en) * | 2020-12-22 | 2021-03-30 | 广州博冠信息科技有限公司 | Page layout method and device, computer-readable storage medium and electronic equipment |
| CN113190781A (en) * | 2021-05-12 | 2021-07-30 | 北京奇艺世纪科技有限公司 | Page layout method, device, equipment and storage medium |
-
2021
- 2021-09-18 CN CN202111110026.8A patent/CN113835806B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112579241A (en) * | 2020-12-22 | 2021-03-30 | 广州博冠信息科技有限公司 | Page layout method and device, computer-readable storage medium and electronic equipment |
| CN113190781A (en) * | 2021-05-12 | 2021-07-30 | 北京奇艺世纪科技有限公司 | Page layout method, device, equipment and storage medium |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114816186A (en) * | 2022-05-09 | 2022-07-29 | 广州市易工品科技有限公司 | Report setting method and device based on mobile terminal, electronic equipment and storage medium |
| CN114816186B (en) * | 2022-05-09 | 2024-05-17 | 广州市易工品科技有限公司 | Report setting method and device based on mobile terminal, electronic equipment and storage medium |
| CN116126298A (en) * | 2023-04-19 | 2023-05-16 | 北京尽微致广信息技术有限公司 | Object layout processing method, device and computer readable medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113835806B (en) | 2024-03-15 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107092643B (en) | Barrage rendering method and device | |
| CN109358851A (en) | Creation method, device and the computer readable storage medium of chart components | |
| CN110990010B (en) | Method and device for generating software interface code | |
| CN113835806B (en) | Page layout method and device, electronic equipment and storage medium | |
| EP2711846A1 (en) | Method and device for processing template file | |
| CN111950056B (en) | BIM display method and related equipment for building informatization model | |
| CN107092652B (en) | Navigation method and device for target page | |
| CN103761110B (en) | browser font display processing method and device | |
| CN103500332B (en) | Character displaying method and device in picture | |
| CN104268273B (en) | Processing method, device and browser, the browser plug-in of pushed information | |
| CN107122104B (en) | Data display method and device | |
| CN107895006A (en) | Audio frequency playing method, device, storage medium and electronic equipment | |
| CN111274242A (en) | Data searching method and device of tree structure for hospital logistics operation and maintenance | |
| CN104765746A (en) | Data processing method and device for mobile communication terminal browser | |
| US9754391B2 (en) | Webpage display method and apparatus | |
| CN111400575B (en) | User identification generation method, user identification method and device | |
| CN114924815B (en) | Page rendering method and device, electronic equipment and storage medium | |
| CN114612279A (en) | Watermark adding method and device | |
| CN105451085A (en) | Desktop data background editing method and desktop data editing server side | |
| CN105260459A (en) | Search method and apparatus | |
| CN106844606A (en) | The focus processing method and processing device of webpage | |
| CN103455263A (en) | Method and device for providing virtual input keyboard | |
| CN117201887A (en) | Media content display method, device, electronic equipment and storage medium | |
| CN103778232A (en) | Method and device for processing personalized information | |
| CN105991725A (en) | Wallpaper pushing method and server |
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 |