CN113190781B - Page layout method, device, equipment and storage medium - Google Patents
Page layout method, device, equipment and storage medium Download PDFInfo
- Publication number
- CN113190781B CN113190781B CN202110519105.8A CN202110519105A CN113190781B CN 113190781 B CN113190781 B CN 113190781B CN 202110519105 A CN202110519105 A CN 202110519105A CN 113190781 B CN113190781 B CN 113190781B
- Authority
- CN
- China
- Prior art keywords
- size
- parent
- child
- elements
- page
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Abstract
The application relates to a page layout method, a page layout device, page layout equipment and a storage medium. The page layout method is applied to the technical field of computers, and comprises the following steps: acquiring page configuration data, wherein the page configuration data comprises hierarchical relations among elements in a page and element information, the element information comprises element sizes and element contents, and the hierarchical relations are father-son relations among the elements; acquiring a size adjustment range of each element; according to the size adjustment range and the element content of each element, respectively obtaining the element target size of each element of each level according to the sequence from child to parent; and carrying out page layout on each element according to the element target size and the element content. The method and the device are used for solving the problem that in the related art, when any type of element in a page changes, a developer needs to re-develop codes, so that the development cost is high.
Description
Technical Field
The present application relates to the field of computers, and in particular, to a page layout method, apparatus, device, and storage medium.
Background
In the front page (view) layout, there are often multiple types of elements in the view, such as text elements, picture elements, button elements, and the like.
When developing, a developer writes corresponding development codes according to attribute information (such as font, color, size and position of a text, size and position of a picture, size and position of a button and the like) of the text element, the picture element, the button element and the like.
However, the above method is time-consuming and labor-consuming, and when any type of element in the page changes, the developer needs to re-develop the code, resulting in high development cost.
Disclosure of Invention
The application provides a page layout method, a device, equipment and a storage medium, which are used for solving the problem of higher development cost caused by the need of developing codes again by developers when any type of elements in a page are changed in the related technology.
In a first aspect, the present application provides a page layout method, including:
acquiring page configuration data, wherein the page configuration data comprises hierarchical relations among elements in a page and element information, the element information comprises element sizes and element contents, and the hierarchical relations are father-son relations among the elements;
acquiring a size adjustment range of each element;
according to the size adjustment range and the element content of each element, respectively obtaining the element target size of each element of each hierarchy according to the sequence from the child to the father;
and carrying out page layout on each element according to the element target size and the element content.
Optionally, the obtaining, according to the size adjustment range and the element content of each element, the element target size of each element in each hierarchy from child to parent, includes:
determining a parent element in the elements and child elements of the parent element according to parent-child relationships among the elements;
determining an element target size of the sub-element according to the element content of the sub-element, wherein the element target size is in the size adjustment range;
and determining the element target size of the parent element based on the element target size of the child element.
Optionally, when the sub-element is a text element, determining, according to the element content of the sub-element, an element target size of the sub-element, where the element target size is within the size adjustment range, includes:
acquiring the font size and/or the text length in the element content;
and adjusting the element size of the sub-element in the size adjustment range according to the font size and/or the text length to obtain the element target size.
Optionally, the element information of the parent element further includes a layout direction;
the determining the element target size of the parent element based on the element target size of the child element includes:
acquiring the layout direction;
determining a first element size of the parent element based on a sum of child object sizes consistent with a layout direction among element object sizes of the child elements;
determining a second element size of the parent element based on a child object size perpendicular to the layout direction among the element object sizes of the child elements and a child size perpendicular to the layout direction among the element sizes of the parent element;
and taking the first element size and the second element size as element target sizes of the parent elements.
Optionally, the determining the second element size of the parent element based on the child object size perpendicular to the layout direction among the element object sizes of the child elements and the child size perpendicular to the layout direction among the element sizes of the parent element includes:
acquiring a size adjustment identifier in element information of the parent element, wherein the size adjustment identifier indicates whether the element size of the element is adjustable;
if the size adjustment mark indicates that the element size of the element is adjustable, taking the maximum value in the sub-target size as the second element size;
and if the size adjustment mark indicates that the element size of the element is not adjustable, taking the sub-size as the second element size.
Optionally, performing page layout on each element according to the element target size and the element content, including:
displaying the element content of the parent element at a preset position of the page according to the element target size of the parent element;
and displaying the element content of the child element at a preset position of the area where the parent element is located according to the element target size of the child element.
Optionally, the element information of the parent element includes a layout direction;
displaying the element content of the child element at a preset position of the area where the parent element is located according to the element target size of the child element, including:
and displaying the element content of the child element in the area where the parent element is located according to the element target size of the child element in the layout direction.
In a second aspect, the present application provides a page layout apparatus, comprising:
the first acquisition module is used for acquiring page configuration data, wherein the page configuration data comprises a hierarchical relationship among elements in a page and element information, the element information comprises element sizes and element contents, and the hierarchical relationship is a parent-child relationship among the elements;
the second acquisition module is used for acquiring the size adjustment range of each element;
the determining module is used for respectively obtaining the element target size of each element of each hierarchy according to the size adjustment range and the element content of each element and the sequence from child to parent;
and the layout module is used for carrying out page layout on each element according to the element target size and the element content.
In a third aspect, the present application provides an electronic device, comprising: the device comprises a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory are communicated with each other through the communication bus; the memory is used for storing a computer program; the processor is configured to execute the program stored in the memory, and implement the page layout method according to the first aspect.
In a fourth aspect, the present application provides a computer readable storage medium storing 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 application has the following advantages: according to the method provided by the embodiment of the application, when page elements are changed and a new page layout is needed, page configuration data are obtained, the page configuration data comprise hierarchical relations among elements in a page and element information, the element information comprises element sizes and element contents, the hierarchical relations are father-son relations among the elements, the size adjustment range of each element is obtained, and then according to the size adjustment range of each element and the element contents, the element target size of each element of each hierarchy is obtained according to the sequence from son to father; and carrying out page layout on each element according to the element target size and the element content. Therefore, the element target sizes of the elements of each level are obtained step by step through the sequence from the child to the father, and the page layout is carried out on the elements based on the determined element target sizes and element contents of each element, so that the self-adaptive layout of the element sizes is realized, when a new page needs to be laid out, the page configuration data are only required to be obtained, the layout process is carried out, a developer does not need to re-develop codes, and the development cost is reduced.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the application and together with the description, serve to explain the principles of the application.
FIG. 1 is a flow chart of a page layout method according to an embodiment of the application;
FIG. 2 is a schematic diagram of a recursive order among elements according to an embodiment of the present application;
FIG. 3 is a flow chart of a page layout method according to another embodiment of the application;
FIG. 4 is a schematic diagram of a page layout apparatus according to an embodiment of the present application;
fig. 5 is a schematic structural diagram of an electronic device according to an embodiment of the application.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present application more clear, the technical solutions of the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present application.
The term "and/or" is herein merely an association relationship describing an associated object, meaning that there may be three relationships, e.g., a and/or B, may represent: a exists alone, A and B exist together, and B exists alone. In addition, the character "/" herein generally indicates that the front and rear associated objects are an "or" relationship.
For a better understanding of aspects of embodiments of the present application, related terms and concepts that may be related to embodiments of the present application are described below.
JSON (JavaScript Object Notation, JS object profile) is a lightweight data exchange format. It stores and presents data in a text format that is completely independent of the programming language, based on a subset of ECMAScript (JS specification formulated by the european computer institute). The compact and clear hierarchical structure makes JSON an ideal data exchange language. Is easy to read and write by people, is easy to analyze and generate by machines, and effectively improves the network transmission efficiency.
The electronic device described in the embodiments of the present application may include a smart Phone (such as an Android mobile Phone, an IOS mobile Phone, a Windows Phone mobile Phone, etc.), a tablet computer, a palm computer, a notebook computer, a video matrix, a monitoring platform, a mobile internet device (MID, mobile Internet Devices), a wearable device, etc., which are merely examples, but not exhaustive, including but not limited to the above devices, and of course, the above electronic device may also be a server, for example, a cloud server.
The page layout method is suitable for various layout components carrying text elements, such as movable popup windows under a full-screen player, prompting bubbles, image-text mixed layout plug-ins of pages and the like, which have the text elements and need self-adaption length and width. The application can realize the functions of timely generating and refreshing the components under the condition of not modifying codes after self-adapting to the actual text content and fonts.
The embodiment of the application provides a page layout method which can be applied to any type of electronic equipment, such as a terminal and a server. As shown in fig. 1, the page layout method includes:
step 101, acquiring page configuration data, wherein the page configuration data comprises hierarchical relations among elements in a page and element information, the element information comprises element sizes and element contents, and the hierarchical relations are father-son relations among the elements.
In some embodiments, the page configuration data includes a hierarchical relationship between elements in the page and element information, the hierarchical relationship between elements in the page configuration data is a parent-child relationship, and corresponding element information is deployed in both a parent node and child nodes of the parent node. The element created in the parent node is a parent element, and the element created in the child node is a child element.
Wherein the element information includes an element size and element content. Specifically, the element dimensions include the outer edge distance, length, and width of the element. The page configuration data includes elements of multiple element types, the element types can include at least one of buttons, images, labels, text boxes, input boxes and selectors, and the element content includes fonts of characters, font sizes, character colors, whether the fonts are thickened, whether the fonts are inclined, and the like, and the picture links, picture colors, background colors, transparency, shadows, frame thicknesses, frame colors and the like of pictures.
The data structure of the page configuration data may be, but is not limited to, a recursive structure in a spanning tree manner. For example, the page configuration data is configured in a JSON data structure.
Referring to FIG. 2, FIG. 2 is a schematic diagram of an exemplary inter-element recursion sequence in determining a target size of an element and page layout of the element. In FIG. 2, child nodes of Child1 are represented by Child1, child2-2 and Child2-3 are represented by Child2, parent nodes of Child1-1, child1-2 and Child1-3 are represented by Child1, child2 is represented by Child2, parent nodes of Child2-1, child2-2 and Child2-3 are represented by Child2, root is represented by Child1 and Child 2. In determining the target size of the element, the elements are laid out in the order from child to parent, and in the order from parent to child.
Step 102, obtaining the size adjustment range of each element.
In some embodiments, after the page configuration data is acquired, a size adjustment range of the element is acquired, and the size adjustment range defines the maximum size of the element in the page, so as to ensure that the size of the page after layout is limited in a certain range. The size adjustment range may be set according to the actual situation, for example, when the element is a text element, the maximum width and the maximum length of the size of the text element are determined according to the text content, and the maximum width and the maximum length are used as the size adjustment range.
Step 103, according to the size adjustment range and the element content of each element, respectively obtaining the element target size of each element of each hierarchy according to the sequence from the child to the parent.
In some embodiments, because the hierarchical relationship between elements in the page configuration data is a parent-child relationship between elements, when the element size is adjusted, the element size of a child element is determined first, and then the element size of the parent element of the child element is determined according to the element size of the child element, so as to obtain the element target size of each hierarchical element.
Specifically, when determining the element target size of the element, determining whether the size adjustment mark in the element information of the element is adjustable, if so, determining the element size of the element according to the element content, and enabling the determined element size to be in the size adjustment range to obtain the target element size. In this embodiment, the element may be, but is not limited to being, a child element.
In a specific embodiment, according to the size adjustment range and the element content of each element, the element target size of each element of each hierarchy is obtained according to the sequence from child to parent, which specifically includes:
determining a parent element and child elements of the parent element in the elements according to parent-child relationships among the elements; determining the element target size of the sub-element according to the element content of the sub-element, wherein the element target size is in a size adjustment range; an element target size of the parent element is determined based on the element target size of the child element.
In some embodiments, the page configuration data is created according to the recursive structure of the parent node and the child node thereof, and when the page configuration data is parsed, the corresponding parent element is determined according to the parent node in the page configuration data, and the child element corresponding to the child node is determined according to the child node of the parent node.
For example, when the sub-element is a text element, the element content includes a font size and/or a text length of the text, and the length and width of the text element are adjusted according to the font size and the text length of the text element, so that the adjusted size is within the size adjustment range of the text element.
The process of determining the element target size of an element may be performed by, for example, setting the length of the element to the maximum length in the size adjustment range, and adaptively adjusting the width of the element; or, setting the width of the element as the maximum width in the size adjustment range, and adaptively adjusting the length of the element; or, the length/width of the element is set to a target value smaller than the maximum length/maximum width by a preset value, and the width/length of the element is adaptively adjusted. The preset value may be set according to practical situations, and is not limited herein, and may be, for example, 3 to 5 millimeters.
Further, after the size of the child element is adjusted to obtain the target element size of the child element, the size of the child element may be changed, and the size of the child element exceeds the size of the parent element, so that after the size of the child element is changed, the recursive query of the parent element is triggered to determine the target element size of the parent element of the child element.
Specifically, referring to fig. 3, determining the element target size of the parent element based on the element target size of the child element includes:
step 301, obtaining a layout direction in element information of a parent element.
In some embodiments, the layout direction includes a landscape layout and a portrait layout, and the layout direction of a parent element indicates an arrangement of child elements of the parent element in the parent element. For example, if the layout direction of the parent element is a lateral layout and the number of child elements of the parent element is 3, the child elements are arranged on the parent element laterally in order of precedence.
Step 302, determining a first element size of a parent element based on a sum of child object sizes consistent with a layout direction in element object sizes of child elements.
In some embodiments, the element target size includes an inner margin of the element, the inner margin including a length and a width. When the layout direction of the parent element is transverse, adding the first element size of the parent element to the transverse child object size of each child element, namely adding the lengths of the child elements, and obtaining the first element size of the parent element, namely the length of the parent element. Correspondingly, when the layout direction is longitudinal, summing the widths of the child elements to obtain the first element size of the parent element, namely the width of the parent element.
In other embodiments, the element target size further includes an outer margin of the element, the outer margin including a left pitch, a right pitch, an upper pitch, and a lower pitch. Further, when the layout direction is a horizontal layout, the first element size of the parent element is the sum of the horizontal child coordinate sizes, the left spacing and the right spacing of each child element; when the layout direction is a longitudinal layout, the first element size of the parent element is the sum of the longitudinal child coordinate size, the upper pitch and the lower pitch of each child element.
Step 303, determining a second element size of the parent element based on the child object size perpendicular to the layout direction in the element object sizes of the child elements and the child size perpendicular to the layout direction in the element sizes of the parent element.
It is understood that when the layout direction is a lateral layout, the vertical direction is a longitudinal direction; when the layout direction is a vertical layout, the vertical direction is a horizontal direction.
In some embodiments, determining the second element size of the parent element specifically includes: acquiring a size adjustment mark in element information of a parent element, wherein the size adjustment mark indicates whether the element size of the element is adjustable; if the element size of the size adjustment identification indication element is adjustable, taking the maximum value in the sub-target sizes as a second element size; if the element size of the size adjustment indicating element is not adjustable, the sub-size is taken as the second element size.
Specifically, the element information of the acquired page configuration data further includes a size adjustment identifier of each element, and by acquiring the size adjustment identifier of the element, it can be determined whether the element size of the corresponding element is adjustable.
When the parent element has a specific size requirement, the size adjustment mark can be configured to be unadjustable, namely the length and/or the width in the element size of the parent element are set to be constant values, so that the situation that the element size of the factor element changes to cause the element size of the parent element to also change is avoided. It will be appreciated that when the layout directions of the parent elements are different, the element sizes of the parent elements, which are consistent with the layout directions, may be set to be adjustable to avoid a case where the child elements exceed the parent element sizes due to the size adjustment.
When the parent element has no size requirement, the size adjustment mark can be configured to be adjustable, so that the element size of the parent element can be adaptively adjusted when the element size of the child element changes.
Specifically, if the layout direction of the parent element is the horizontal layout under the condition that the element size of the size adjustment identification indication element is adjustable, taking the maximum value in the child target size (namely the width of the child element) of the child element in the longitudinal direction as the second element size; if the layout direction of the parent element is the vertical layout, the maximum value of the horizontal child target sizes (namely the lengths of the child elements) of the child elements is taken as the second element size. If the element size of the size adjustment indicator element is not adjustable, the child size of the parent element in the vertical direction of the layout direction is directly taken as the second element size, and when the layout direction is the transverse layout, the second element size is the width of the parent element size, and when the layout direction is the longitudinal layout, the second element size is the length of the parent element size.
Step 304, taking the first element size and the second element size as the element target size of the parent element.
Based on the above-described related embodiments, after determining the first element size and the second element size, the element target size of the parent element may be obtained.
Step 104, carrying out page layout on each element according to the element target size and the element content.
In some embodiments, after determining the element target size of each element, the elements may be laid out on the page according to the element target size and the element content of the elements.
The layout order of the elements may be set according to the actual situation, or may be in the order from parent to child.
Specifically, when the elements are laid out in the order from parent to child, it may be: displaying the element content of the parent element at a preset position of the page according to the element target size of the parent element; and displaying the element content of the child element at the preset position of the area where the parent element is positioned according to the element target size of the child element until all the elements are laid out.
The preset position of the parent element may be any region in the page. After determining the preset position of the parent element, the element content of the parent element can be displayed at the preset position. Further, after the position of the parent element is determined, since the element information of the parent element includes the layout direction of the element, when laying out the child element of the parent element, the child element is laid out at the preset position of the area where the parent element is located according to the layout direction. For example, when the layout direction is a lateral layout, the child elements are arranged in the area where the parent element is located in a lateral order; when the layout direction is longitudinal layout, the child elements are longitudinally and sequentially arranged in the area where the parent element is located. The arrangement sequence of the sub-elements is the sequence of the sub-elements in the page configuration data.
According to the page layout method, when the element size of the text element is self-adaptive in length and width, the embedded point is not required in advance, and dynamic drawing and layout are performed according to JSON data. After the page layout method is combined with the front-end actual code, the method can be applied to various layout components only by modifying the incoming JSON data. Front-end codes do not need to be modified, and development cost is reduced. Elements are dynamically created recursively from root nodes to leaf nodes by a JSON data structure that dynamically recursively constructs. And analyzing layout attributes while creating elements, re-calculating the sizes of the elements with the sizes adjusted and identified as adjustable, re-calculating the sizes of the elements in a recursive manner from leaf node reverse calculation to root node, and re-laying after all the elements determine the target sizes of the elements.
The application can be applied to various types of platforms, such as ios, android, H5 and other front ends, by integrating the element information of the required elements in the page layout into the JSON data structure, and the drawing and the creation of the page can be completed by each end.
Based on the same conception, the embodiment of the application provides a page layout device, and the specific implementation of the device can be referred to the description of the embodiment part of the method, and the repetition is omitted. As shown in fig. 4, the apparatus mainly includes:
a first obtaining module 401, configured to obtain page configuration data, where the page configuration data includes a hierarchical relationship between elements in a page and element information, and the element information includes an element size and element content, and the hierarchical relationship is a parent-child relationship between the elements;
a second obtaining module 402, configured to obtain a size adjustment range of each element;
a determining module 403, configured to obtain, according to the size adjustment range and the element content of each element, the element target size of each element of each hierarchy in a sequence from child to parent;
a layout module 404, configured to perform page layout on each element according to the target size of the element and the content of the element.
Based on the same conception, the embodiment of the application also provides an electronic device, as shown in fig. 5, which mainly comprises: processor 501, memory 502 and communication bus 503, wherein processor 501 and memory 502 accomplish the communication between each other through communication bus 503. The memory 502 stores a program executable by the processor 501, and the processor 501 executes the program stored in the memory 502 to implement the following steps:
acquiring page configuration data, wherein the page configuration data comprises hierarchical relations among elements in a page and element information, the element information comprises element sizes and element contents, and the hierarchical relations are father-son relations among the elements;
acquiring a size adjustment range of each element;
according to the size adjustment range and the element content of each element, respectively obtaining the element target size of each element of each level according to the sequence from child to parent;
and carrying out page layout on each element according to the element target size and the element content.
The communication bus 503 mentioned in the above electronic device may be a peripheral component interconnect standard (Peripheral Component Interconnect, abbreviated to PCI) bus or an extended industry standard architecture (Extended Industry Standard Architecture, abbreviated to EISA) bus, or the like. The communication bus 503 may be divided into an address bus, a data bus, a control bus, and the like. For ease of illustration, only one thick line is shown in fig. 5, but not only one bus or one type of bus.
The memory 502 may include random access memory (Random Access Memory, simply RAM) or may include non-volatile memory (non-volatile memory), such as at least one disk memory. Optionally, the memory may also be at least one memory device located remotely from the aforementioned processor 501.
The processor 501 may be a general-purpose processor, including a central processing unit (Central Processing Unit, CPU), a network processor (Network Processor, NP), a digital signal processor (Digital Signal Processing, DSP), an application specific integrated circuit (Application Specific Integrated Circuit, ASIC), a Field programmable gate array (Field-Programmable Gate Array, FPGA), or other programmable logic device, discrete gate or transistor logic device, or discrete hardware components.
In yet another embodiment of the present application, there is also provided a computer-readable storage medium having stored therein a computer program which, when run on a computer, causes the computer to perform the page layout method described in the above embodiment.
In the above embodiments, it may be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented in software, may be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer instructions are loaded and executed on a computer, the processes or functions in accordance with embodiments of the present application are produced in whole or in part. The computer may be a general purpose computer, a special purpose computer, a computer network, or other programmable apparatus. The computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another computer-readable storage medium, for example, by a wired (e.g., coaxial cable, optical fiber, digital Subscriber Line (DSL)), or wireless (e.g., infrared, microwave, etc.) means from one website, computer, server, or data center to another. The computer readable storage medium may be any available medium that can be accessed by a computer or a data storage device such as a server, data center, etc. that contains an integration of one or more available media. The usable medium may be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape, etc.), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid state disk), etc.
It should be noted that in this document, relational terms such as "first" and "second" and the like are 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. Moreover, 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 one … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises an element.
The foregoing is merely exemplary of embodiments of the present application to enable those skilled in the art to understand or practice the application. 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 application. Thus, the present application 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 (7)
1. A method of page layout, comprising:
acquiring page configuration data, wherein the page configuration data comprises hierarchical relations among elements in a page and element information, the element information comprises element sizes and element contents, and the hierarchical relations are father-son relations among the elements;
acquiring a size adjustment range of each element;
according to the size adjustment range and the element content of each element, respectively obtaining the element target size of each element of each hierarchy according to the sequence from the child to the father;
performing page layout on each element according to the element target size and the element content;
wherein, according to the size adjustment range and the element content of each element, respectively obtaining the element target size of each element of each hierarchy according to the sequence from child to parent, including:
determining a parent element in the elements and child elements of the parent element according to parent-child relationships among the elements;
determining an element target size of the sub-element according to the element content of the sub-element, wherein the element target size is in the size adjustment range;
determining an element target size of the parent element based on the element target size of the child element;
wherein the element information of the parent element further comprises a layout direction;
the determining the element target size of the parent element based on the element target size of the child element includes:
acquiring the layout direction;
determining a first element size of the parent element based on a sum of child object sizes consistent with a layout direction among element object sizes of the child elements;
determining a second element size of the parent element based on a child object size perpendicular to the layout direction among the element object sizes of the child elements and a child size perpendicular to the layout direction among the element sizes of the parent element;
taking the first element size and the second element size as element target sizes of the parent elements;
wherein the determining the second element size of the parent element based on the child object size perpendicular to the layout direction among the element object sizes of the child elements and the child size perpendicular to the layout direction among the element sizes of the parent element includes:
acquiring a size adjustment identifier in element information of the parent element, wherein the size adjustment identifier indicates whether the element size of the element is adjustable;
if the size adjustment mark indicates that the element size of the element is adjustable, taking the maximum value in the sub-target size as the second element size;
and if the size adjustment mark indicates that the element size of the element is not adjustable, taking the sub-size as the second element size.
2. The page layout method according to claim 1, wherein when the sub-element is a text element, the determining an element target size of the sub-element according to the element content of the sub-element, the element target size being within the size adjustment range, includes:
acquiring the font size and/or the text length in the element content;
and adjusting the element size of the sub-element in the size adjustment range according to the font size and/or the text length to obtain the element target size.
3. The page layout method according to claim 1, wherein performing page layout on each of the elements according to the element target size and the element content comprises:
displaying the element content of the parent element at a preset position of the page according to the element target size of the parent element;
and displaying the element content of the child element at a preset position of the area where the parent element is located according to the element target size of the child element.
4. A page layout method according to claim 3, wherein the element information of the parent element includes a layout direction;
displaying the element content of the child element at a preset position of the area where the parent element is located according to the element target size of the child element, including:
and displaying the element content of the child element in the area where the parent element is located according to the element target size of the child element in the layout direction.
5. A page layout apparatus, comprising:
the first acquisition module is used for acquiring page configuration data, wherein the page configuration data comprises a hierarchical relationship among elements in a page and element information, the element information comprises element sizes and element contents, and the hierarchical relationship is a parent-child relationship among the elements;
the second acquisition module is used for acquiring the size adjustment range of each element;
the determining module is used for respectively obtaining the element target size of each element of each hierarchy according to the size adjustment range and the element content of each element and the sequence from child to parent;
the layout module is used for carrying out page layout on each element according to the element target size and the element content;
wherein, according to the size adjustment range and the element content of each element, respectively obtaining the element target size of each element of each hierarchy according to the sequence from child to parent, including:
determining a parent element in the elements and child elements of the parent element according to parent-child relationships among the elements;
determining an element target size of the sub-element according to the element content of the sub-element, wherein the element target size is in the size adjustment range;
determining an element target size of the parent element based on the element target size of the child element;
wherein the element information of the parent element further comprises a layout direction;
the determining the element target size of the parent element based on the element target size of the child element includes:
acquiring the layout direction;
determining a first element size of the parent element based on a sum of child object sizes consistent with a layout direction among element object sizes of the child elements;
determining a second element size of the parent element based on a child object size perpendicular to the layout direction among the element object sizes of the child elements and a child size perpendicular to the layout direction among the element sizes of the parent element;
taking the first element size and the second element size as element target sizes of the parent elements;
wherein the determining the second element size of the parent element based on the child object size perpendicular to the layout direction among the element object sizes of the child elements and the child size perpendicular to the layout direction among the element sizes of the parent element includes:
acquiring a size adjustment identifier in element information of the parent element, wherein the size adjustment identifier indicates whether the element size of the element is adjustable;
if the size adjustment mark indicates that the element size of the element is adjustable, taking the maximum value in the sub-target size as the second element size;
and if the size adjustment mark indicates that the element size of the element is not adjustable, taking the sub-size as the second element size.
6. An electronic device, comprising: the device comprises a processor, a memory and a communication bus, wherein the processor and the memory are communicated with each other through the communication bus; the memory is used for storing a computer program; the processor is configured to execute a program stored in the memory to implement the page layout method of any one of claims 1 to 4.
7. A computer readable storage medium storing a computer program, wherein the computer program when executed by a processor implements the page layout method of any of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110519105.8A CN113190781B (en) | 2021-05-12 | 2021-05-12 | Page layout method, device, equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110519105.8A CN113190781B (en) | 2021-05-12 | 2021-05-12 | Page layout method, device, equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113190781A CN113190781A (en) | 2021-07-30 |
| CN113190781B true CN113190781B (en) | 2023-09-01 |
Family
ID=76981522
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110519105.8A Active CN113190781B (en) | 2021-05-12 | 2021-05-12 | Page layout method, device, equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113190781B (en) |
Families Citing this family (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113779459B (en) * | 2021-08-09 | 2024-01-02 | 北京达佳互联信息技术有限公司 | Page display method and device and electronic equipment |
| CN113835806B (en) * | 2021-09-18 | 2024-03-15 | 北京天融信网络安全技术有限公司 | Page layout method and device, electronic equipment and storage medium |
| CN116206012A (en) * | 2021-11-30 | 2023-06-02 | 华为云计算技术有限公司 | Element layout method and related equipment |
| CN116450104A (en) * | 2022-01-10 | 2023-07-18 | 北京字跳网络技术有限公司 | Style determination method, style determination device, style determination apparatus, style determination program product, and storage medium |
| CN117215584B (en) * | 2023-11-07 | 2024-01-26 | 江西格如灵科技股份有限公司 | UI automatic arrangement method, system, storage medium and electronic equipment |
| CN117539491A (en) * | 2024-01-09 | 2024-02-09 | 腾讯科技（深圳）有限公司 | Page layout method, page layout device, electronic device, storage medium and program product |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| DE102013202782A1 (en) * | 2012-02-20 | 2013-08-22 | Wixpress Ltd | Server-based web page design system that integrates dynamic layout and dynamic content |
| CN106708985A (en) * | 2016-12-12 | 2017-05-24 | 北京奇虎科技有限公司 | Layout method and device for multi-column webpage |
| CN108549516A (en) * | 2018-04-12 | 2018-09-18 | 北京奇艺世纪科技有限公司 | A kind of interface layout method of adjustment and device |
| CN109324796A (en) * | 2018-08-01 | 2019-02-12 | 浙江口碑网络技术有限公司 | Quick interface arrangement method and device |
| CN110866208A (en) * | 2019-10-10 | 2020-03-06 | 东软集团股份有限公司 | Responsive layout method, device and equipment for page |
| CN112182454A (en) * | 2020-09-30 | 2021-01-05 | 北京三快在线科技有限公司 | Webpage optimization method and device, storage medium and electronic equipment |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060218490A1 (en) * | 2005-03-24 | 2006-09-28 | Richard Fink | Method and apparatus for creating a web page |
| US20110099494A1 (en) * | 2009-10-22 | 2011-04-28 | Microsoft Corporation | Dynamic graphical user interface layout |
| US20190073091A1 (en) * | 2017-09-06 | 2019-03-07 | Sap Se | Dynamic display layout systems and methods |
| US20200019583A1 (en) * | 2018-07-11 | 2020-01-16 | University Of Southern California | Systems and methods for automated repair of webpages |
-
2021
- 2021-05-12 CN CN202110519105.8A patent/CN113190781B/en active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| DE102013202782A1 (en) * | 2012-02-20 | 2013-08-22 | Wixpress Ltd | Server-based web page design system that integrates dynamic layout and dynamic content |
| CN106708985A (en) * | 2016-12-12 | 2017-05-24 | 北京奇虎科技有限公司 | Layout method and device for multi-column webpage |
| CN108549516A (en) * | 2018-04-12 | 2018-09-18 | 北京奇艺世纪科技有限公司 | A kind of interface layout method of adjustment and device |
| CN109324796A (en) * | 2018-08-01 | 2019-02-12 | 浙江口碑网络技术有限公司 | Quick interface arrangement method and device |
| CN110866208A (en) * | 2019-10-10 | 2020-03-06 | 东软集团股份有限公司 | Responsive layout method, device and equipment for page |
| CN112182454A (en) * | 2020-09-30 | 2021-01-05 | 北京三快在线科技有限公司 | Webpage optimization method and device, storage medium and electronic equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113190781A (en) | 2021-07-30 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113190781B (en) | Page layout method, device, equipment and storage medium | |
| US9576068B2 (en) | Displaying selected portions of data sets on display devices | |
| CN107368294B (en) | Application prototype generation method, template training method, device and system | |
| US8381094B1 (en) | Incremental visual comparison of web browser screens | |
| US10521494B2 (en) | Content to layout template mapping and transformation | |
| JP6776805B2 (en) | Character recognition device, character recognition method, character recognition program | |
| US9141596B2 (en) | System and method for processing markup language templates from partial input data | |
| CN110955590A (en) | Interface detection method, image processing method, device, electronic equipment and storage medium | |
| CN110990010A (en) | Software interface code generation method and device | |
| CN111208998A (en) | Method and device for automatically laying out data visualization large screen and storage medium | |
| US9886426B1 (en) | Methods and apparatus for generating an efficient SVG file | |
| CN111223155B (en) | Image data processing method, device, computer equipment and storage medium | |
| CN109815243B (en) | Structured storage method and device during document interface modification | |
| CN109871205B (en) | Interface code adjustment method, device, computer device and storage medium | |
| CN114817604A (en) | Method and device for retrieving drawing dimension labels, electronic equipment and storage medium | |
| CN111414727A (en) | Method and device for editing header and footer of PDF (Portable document Format) document and electronic equipment | |
| CN111428452B (en) | Annotation data storage method and device | |
| CN112329409B (en) | Cell color conversion method and device and electronic equipment | |
| CN113297425B (en) | Document conversion method, device, server and storage medium | |
| US20190129594A1 (en) | Display processing apparatus, non-transitory computer readable medium, and display device driving method | |
| CN112052647A (en) | Document editing method and device, electronic equipment and readable storage medium | |
| CN111475156B (en) | Page code generation method and device, electronic equipment and storage medium | |
| CN111767206B (en) | Statistical method and device for content unit exposure presentation rate and electronic equipment | |
| CN111127310B (en) | Image processing method and device, electronic equipment and storage medium | |
| CN111125605B (en) | Page element acquisition method and device |
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 |