CN113190781A - Page layout method, device, equipment and storage medium - Google Patents
Page layout method, device, equipment and storage medium Download PDFInfo
- Publication number
- CN113190781A CN113190781A CN202110519105.8A CN202110519105A CN113190781A CN 113190781 A CN113190781 A CN 113190781A CN 202110519105 A CN202110519105 A CN 202110519105A CN 113190781 A CN113190781 A CN 113190781A
- Authority
- CN
- China
- Prior art keywords
- size
- parent
- child
- page
- elements
- 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
Images
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 relationship and element information among elements in a page, the element information comprises element size and element content, and the hierarchical relationship is a parent-child relationship among the elements; acquiring the size adjustment range of each element; 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 a child to a parent; and performing 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 when any type of elements in the page are changed in the related technology, developers need to redevelop 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 a front-end 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, the developer writes corresponding development codes according to the attribute information (such as the font, color, size, position of characters, the size and position of pictures, the size and position of buttons, and the like) of the text elements, the picture elements, the button elements, and the like.
However, the above method is time-consuming and labor-consuming, and when any type of element in the page changes, a developer needs to develop the code again, which results in higher development cost.
Disclosure of Invention
The application provides a page layout method, a page layout device, page layout equipment and a page layout storage medium, which are used for solving the problem that in the related art, when any type of elements in a page are changed, developers need to develop codes again, so that the development cost is high.
In a first aspect, the present application provides a page layout method, including:
acquiring page configuration data, wherein the page configuration data comprises hierarchical relationship and element information among elements in a page, the element information comprises element size and element content, and the hierarchical relationship is a parent-child relationship among the elements;
acquiring the size adjustment range of each element;
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 a child to a parent;
and according to the element target size and the element content, performing page layout on each element.
Optionally, the obtaining, according to the size adjustment range and the element content of each element, an element target size of each element of each hierarchy in an order from a child to a parent includes:
determining a parent element and a child element of the parent element in the elements according to the parent-child relationship among the elements;
determining an element target size for the sub-element according to the element content of the sub-element, the element target size being within the resizing range;
determining an element target size for the parent element based on the element target size for the child element.
Optionally, when the sub-element is a text element, determining an element target size of the sub-element according to the element content of the sub-element, where the element target size is within the size adjustment range includes:
acquiring the font size and/or text length in the element content;
and adjusting the element size of the sub-element within 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;
said determining an element target size for said parent element based on an element target size for said child element comprises:
acquiring the layout direction;
determining a first element size of the parent element based on the sum of the sub-target sizes consistent with the layout direction in the element target sizes of the child elements;
determining a second element size of the parent element based on a sub-target size perpendicular to the layout direction in the element target sizes of the child elements and a child size perpendicular to the layout direction in the element size of the parent element;
and taking the first element size and the second element size as element target sizes of the parent element.
Optionally, the determining a second element size of the parent element based on a sub-target size perpendicular to the layout direction in the element target sizes of the child elements and a child size perpendicular to the layout direction in the element size 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 identifier indicates that the element size of the element is adjustable, taking the maximum value in the sub-object sizes as the second element size;
if the resizing flag indicates that the element size of the element is unadjustable, 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;
the displaying the element content of the child element at the preset position of the region where the parent element is located according to the element target size of the child element includes:
and displaying the element content of the child element in the area of the parent element in the layout direction according to the element target size of the child element.
In a second aspect, the present application provides a page layout apparatus, including:
the page configuration data comprises hierarchical relations among elements in a page and element information, wherein the element information comprises element sizes and element contents, and the hierarchical relations are parent-child relations among the elements;
a second obtaining module, configured to obtain a resizing range of each of the elements;
a determining module, configured to obtain, according to the size adjustment range and the element content of each element, an element target size of each element in each hierarchy in a sequence from a child to a 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 system 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 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 change and a new page layout is needed, page configuration data are obtained, the page configuration data comprise hierarchical relationships among the elements in a page and element information, the element information comprises element sizes and element contents, the hierarchical relationships are parent-child relationships among the elements, the size adjustment range of each element is obtained, and then the element target size of each element in each hierarchy is obtained according to the size adjustment range and the element contents of each element and the sequence from child to parent; and performing page layout on each element according to the element target size and the element content. Therefore, the element target size of each layer of element is obtained step by step through the sequence from the child to the father, and the elements are subjected to page layout based on the determined element target size and element content of each element, so that the self-adaptive layout of the element sizes is realized, and when a new page needs to be laid out, the layout process can be realized only by acquiring page configuration data, and developers do not need to develop codes again, thereby reducing the development cost.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the invention and together with the description, serve to explain the principles of the invention.
FIG. 1 is a schematic flow chart illustrating a page layout method according to an embodiment of the present application;
FIG. 2 is a diagram illustrating a recursive sequence among elements in an embodiment of the present application;
FIG. 3 is a schematic flow chart illustrating a page layout method according to another embodiment of the present application;
FIG. 4 is a schematic structural 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 in an embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application.
The term "and/or" herein is merely an association describing an associated object, meaning that three relationships may exist, e.g., a and/or B, may mean: a exists alone, A and B exist simultaneously, and B exists alone. In addition, the character "/" herein generally indicates that the former and latter related objects are in an "or" relationship.
In order to better understand the scheme of the embodiments of the present application, the following first introduces the related terms and concepts that may be involved in the embodiments of the present application.
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 electronic device described in the embodiment of the present application may include a smart Phone (e.g., an Android Phone, an IOS Phone, a Windows 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), or a wearable device, which are merely examples, but not exhaustive, and include but are not limited to the foregoing Devices.
The page layout method is suitable for various layout components carrying text elements, such as a movable popup window under a full-screen player, a prompt bubble, a page image-text mixed arrangement plug-in and the like, which have the text elements and the text elements need to be adaptive to length and width. The method and the device can be adaptive to actual text content and fonts, and realize the function of timely generating and refreshing the components under the condition of not modifying codes.
The embodiment of the application provides a page layout method, which can be applied to any form of electronic equipment, such as a terminal and a server. As shown in fig. 1, the page layout method includes:
In some embodiments, the page configuration data includes hierarchical relationships and element information between elements in the page, the hierarchical relationships between the elements in the page configuration data are parent-child relationships, and corresponding element information is deployed in both a parent node and a child node of the parent node. The elements created in the parent node are parent elements, and the elements created in the child nodes are child elements.
Wherein the element information includes an element size and an element content. Specifically, the element dimensions include the outer spacing, length and width of the elements. The page configuration data includes elements of multiple element types, the element types may include but are not limited to at least one of a button, an image, a label, a text box, an input box, and a selector, and the element content includes a font of a character, a font size, a character color, whether the font is bolded or not, whether the font is tilted or not, and the like, a picture link of a picture, a picture color, a background color, transparency, a shadow, a frame thickness, a frame color, and the like.
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 diagram illustrating an exemplary recursive sequence among elements in determining a target size of the elements and in laying out pages of the elements. In FIG. 2, Child1-1, Child1-2, and Child1-3 represent Child nodes of Child1, Child2-1, Child2-2, and Child2-3 represent Child nodes of Child2, Child1 represents parent nodes of Child1-1, Child1-2, and Child1-3, Child2 represents parent nodes of Child2-1, Child2-2, and Child2-3, and Root represents parent nodes of Child1 and Child 2. The target size of the elements is determined in order from child to parent, and in order from parent to child when page layout is performed on the elements.
In some embodiments, after the page configuration data is obtained, a resizing range of the element is obtained, where the resizing range defines a maximum size of the element in the page, so as to ensure that the size of the page after layout is limited within a certain range. 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.
And 103, 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 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 adjusting the size of an element, the element size of a child element is determined first, and then the element size of a 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 level of elements.
Specifically, when the target size of the element is determined, it is first determined whether a size adjustment identifier in the element information of the element is adjustable, and if so, the element size of the element can be determined according to the element content, so that the determined element size is within the size adjustment range, and the target element size is obtained. In this embodiment, an element may be, but is not limited to being, a sub-element.
In a specific embodiment, the obtaining the target size of each element of each hierarchy according to the size adjustment range and the element content of each element and in an order from child to parent includes:
determining a parent element and a child element of the parent element in the elements according to the parent-child relationship 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 within the size adjustment range; an element target size for the parent element is determined based on the element target sizes of the child elements.
In some embodiments, the page configuration data is obtained by creating element information according to a recursive structure of a parent node and child nodes thereof, and when the page configuration data is parsed, the parent node corresponding to the element information is determined according to the parent node in the page configuration data, and the child node 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 the 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, for example, by 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/width by a preset value, and then the width/length of the element is adaptively adjusted. The preset value may be set according to an actual situation, and is not limited herein, for example, the preset value may be 3 to 5 millimeters.
Further, after the size of the child element is adjusted to obtain the target element size of the child element, since the element size of the child element may be changed, the size of the child element may exceed the size of the parent element, and therefore, after the element size of the child element is changed, a recursive query of the parent element is triggered to determine the element target 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:
In some embodiments, the layout directions include a landscape layout and a portrait layout, and the layout direction of a parent element indicates the arrangement of the child elements of the parent element in the parent element. For example, if the layout direction of the parent element is the horizontal layout and the number of the child elements of the parent element is 3, the child elements are arranged horizontally on the parent element according to the precedence order.
In some embodiments, the element target size includes an inner edge spacing of the element, the inner edge spacing including a length and a width. And when the layout direction of the parent element is transverse, the first element size of the parent element is the sum of the transverse sub-object sizes of the sub-elements, namely the sum of the lengths of the sub-elements, so that the first element size of the parent element, namely the length of the parent element, is obtained. Correspondingly, when the layout direction is vertical, the widths of the child elements are summed to obtain the first element size of the parent element, namely the width of the parent element.
In other embodiments, the target size of the elements further includes outer margins of the elements, the outer margins including a left pitch, a right pitch, an upper pitch, and a lower pitch. Further, when the layout direction is transverse layout, the first element size of the parent element is the sum of the transverse child coordinate size, the left spacing and the right spacing of each child element; and when the layout direction is vertical layout, the first element size of the parent element is the sum of the vertical sub-coordinate size, the upper spacing and the lower spacing of each sub-element.
It is understood that, when the layout direction is the transverse layout, the vertical direction is the 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 identifier in element information of a parent element, wherein the size adjustment identifier indicates whether the element size of the element is adjustable; if the size adjustment identification indicates that the element size of the element is adjustable, taking the maximum value in the sub-object sizes as a second element size; if the resize flag indicates that the element size of the element is unadjustable, the sub-size is taken as the second element size.
Specifically, the obtained element information of the page configuration data further includes a size adjustment identifier of each element, and by obtaining 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 identifier can be configured to be unadjustable, that is, the length and/or the width in the element size of the parent element are set to be constant values, so that the condition that the element size of the factor element is changed and the element size of the parent element is also changed is avoided. It is to be understood that, when the layout directions of the parent elements are different, the element size of the parent element, which coincides with the layout direction, may be set to be adjustable so as to avoid the case where the child element exceeds the parent element size due to the size adjustment.
When the parent element has no size requirement, the size adjustment identifier 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 is changed.
Specifically, under the condition that the resizing flag indicates that the element size of the element is adjustable, if the layout direction of the parent element is horizontal layout, the maximum value in the sub-object sizes in the longitudinal direction of the child element (i.e., the width of the child element) is taken as the second element size; if the layout direction of the parent element is vertical layout, the maximum value of the sub-target sizes (i.e. the lengths of the child elements) of the child elements in the horizontal direction is used as the second element size. If the resize flag indicates that the element size of the element is unadjustable, the child size of the parent element in the direction perpendicular to the layout direction is directly used as the second element size, and illustratively, when the layout direction is the horizontal layout, the second element size is the width of the parent element size, and when the layout direction is the vertical layout, the second element size is the length of the parent element size.
And step 304, taking the first element size and the second element size as element target sizes of the parent elements.
Based on the above-described related embodiment, after the first element size and the second element size are determined, the element target size of the parent element can be obtained.
And 104, performing page layout on each element according to the target size and the content of the element.
In some embodiments, after determining the element target size for each element, the elements may be laid out on the page according to their element target size and element content.
The layout order of the elements may be set according to actual conditions, or may be laid out in the order from parent to child.
Specifically, when the elements are laid out in the order from parent to child, the following may be: displaying the element content of the parent element at a preset position of a 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 region of the parent element according to the element target size of the child element until all elements are completely laid out.
The preset position of the parent element can be any region in the page. After the preset position of the parent element is determined, 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 the child element of the parent element is laid out, 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 horizontal layout, the child elements are horizontally arranged in sequence in the region where the parent element is located; and when the layout direction is vertical layout, arranging the child elements in the region of the parent element in sequence in the vertical direction. 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 self-adaptive length and width of the element size of the text element are carried out, points do not need to be buried in advance, and dynamic drawing and layout are carried out according to JSON data. After the page layout method is combined with the front-end actual code, the page layout method can be applied to various layout components only by modifying the incoming JSON data subsequently. The front-end code does not need to be modified, and the development cost is reduced. Elements are dynamically created in a recursive manner from a root node to a leaf node by dynamically customizing the JSON data structure of the recursive structure. And analyzing the layout attribute while creating the elements, recalculating the size of the element with the size adjustment identification being adjustable, recalculating the element size in a manner from leaf node reverse order calculation to root node recursion, and performing rearrangement after all elements determine the element target size.
The element information of the elements required in the page layout is integrated in the JSON data structure, so that the method can be applied to various platforms, such as ios, Android, H5 and other front ends, and the drawing and creation of the page can be completed by each end.
Based on the same concept, the embodiment of the present application provides a page layout apparatus, and specific implementation of the apparatus may refer to the description of the method embodiment, and repeated details are not repeated. 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 hierarchical relationships between elements in a page and element information, the element information includes element sizes and element contents, and the hierarchical relationships are parent-child relationships between the elements;
a second obtaining module 402, configured to obtain a resizing range of each element;
a determining module 403, configured to obtain, according to the size adjustment range and the element content of each element, an element target size of each element in each hierarchy in an order from child to parent;
and a layout module 404, configured to perform page layout on each element according to the element target size and the element content.
Based on the same concept, an embodiment of the present application further provides an electronic device, as shown in fig. 5, the electronic device mainly includes: a processor 501, a memory 502 and a communication bus 503, wherein the processor 501 and the memory 502 communicate with each other through the 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, so as to implement the following steps:
acquiring page configuration data, wherein the page configuration data comprises hierarchical relationship and element information among elements in a page, the element information comprises element size and element content, and the hierarchical relationship is a parent-child relationship among the elements;
acquiring the size adjustment range of each element;
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 a child to a parent;
and performing page layout on each element according to the element target size and the element content.
The communication bus 503 mentioned in the electronic device may be a Peripheral Component Interconnect (PCI) bus, an Extended Industry Standard Architecture (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 this is not intended to represent only one bus or type of bus.
The Memory 502 may include a Random Access Memory (RAM) or a non-volatile Memory (non-volatile Memory), such as at least one disk Memory. Alternatively, the memory may 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 (CPU), a Network Processor (NP), etc., and may also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field Programmable Gate Array (FPGA) or other Programmable logic devices, discrete gates or transistor logic devices, and 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 execute the page layout method described in the above embodiment.
In the above embodiments, the implementation may be wholly or partially realized 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 loaded and executed on a computer, cause the processes or functions according to the embodiments of the application to occur, in whole or in part. The computer may be a general purpose computer, a special purpose computer, a network of computers, or other programmable device. The computer instructions may be stored on a computer readable storage medium or transmitted from one computer readable storage medium to another, for example, from one website site, computer, server, or data center to another website site, computer, server, or data center via wire (e.g., coaxial cable, fiber optic, Digital Subscriber Line (DSL)) or wirelessly (e.g., infrared, microwave, etc.). The computer-readable storage medium can be any available medium that can be accessed by a computer or a data storage device, such as a server, a data center, etc., that includes one or more of the available media. The available media may be magnetic media (e.g., floppy disks, hard disks, tapes, etc.), optical media (e.g., DVDs), or semiconductor media (e.g., solid state drives), among others.
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 invention, which enable those skilled in the art to understand or practice the present invention. 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 invention. Thus, the present invention 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:
acquiring page configuration data, wherein the page configuration data comprises hierarchical relationship and element information among elements in a page, the element information comprises element size and element content, and the hierarchical relationship is a parent-child relationship among the elements;
acquiring the size adjustment range of each element;
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 a child to a parent;
and according to the element target size and the element content, performing page layout on each element.
2. The page layout method according to claim 1, wherein said obtaining the target size of each element of each hierarchy in order from child to parent according to the resizing range and the content of each element comprises:
determining a parent element and a child element of the parent element in the elements according to the parent-child relationship among the elements;
determining an element target size for the sub-element according to the element content of the sub-element, the element target size being within the resizing range;
determining an element target size for the parent element based on the element target size for the child element.
3. The page layout method according to claim 2, wherein when the sub-element is a text element, said 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 resizing range, comprises:
acquiring the font size and/or text length in the element content;
and adjusting the element size of the sub-element within the size adjustment range according to the font size and/or the text length to obtain the element target size.
4. The page layout method according to claim 3, wherein the element information of the parent element further includes a layout direction;
said determining an element target size for said parent element based on an element target size for said child element comprises:
acquiring the layout direction;
determining a first element size of the parent element based on the sum of the sub-target sizes consistent with the layout direction in the element target sizes of the child elements;
determining a second element size of the parent element based on a sub-target size perpendicular to the layout direction in the element target sizes of the child elements and a child size perpendicular to the layout direction in the element size of the parent element;
and taking the first element size and the second element size as element target sizes of the parent element.
5. The page layout method according to claim 4, wherein the determining the second element size of the parent element based on the sub-target size perpendicular to the layout direction in the element target sizes of the child elements and the child size perpendicular to the layout direction in the element size of the parent element comprises:
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 identifier indicates that the element size of the element is adjustable, taking the maximum value in the sub-object sizes as the second element size;
if the resizing flag indicates that the element size of the element is unadjustable, taking the sub-size as the second element size.
6. The page layout method according to claim 1, wherein page layout for each of said elements according to said element target size and said 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.
7. The page layout method according to claim 6, wherein the element information of the parent element includes a layout direction;
the displaying the element content of the child element at the preset position of the region where the parent element is located according to the element target size of the child element includes:
and displaying the element content of the child element in the area of the parent element in the layout direction according to the element target size of the child element.
8. A page layout apparatus, comprising:
the page configuration data comprises hierarchical relations among elements in a page and element information, wherein the element information comprises element sizes and element contents, and the hierarchical relations are parent-child relations among the elements;
a second obtaining module, configured to obtain a resizing range of each of the elements;
a determining module, configured to obtain, according to the size adjustment range and the element content of each element, an element target size of each element in each hierarchy in a sequence from a child to a 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.
9. An electronic device, comprising: the system 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 for storing a computer program; the processor, configured to execute the program stored in the memory, and implement the page layout method according to any one of claims 1 to 7.
10. 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 one of claims 1 to 7.
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 true CN113190781A (en) | 2021-07-30 |
| CN113190781B 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) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113779459A (en) * | 2021-08-09 | 2021-12-10 | 北京达佳互联信息技术有限公司 | Page display method and device and electronic equipment |
| CN113835806A (en) * | 2021-09-18 | 2021-12-24 | 北京天融信网络安全技术有限公司 | Page layout method and device, electronic equipment and storage medium |
| WO2023097990A1 (en) * | 2021-11-30 | 2023-06-08 | 华为云计算技术有限公司 | Element layout method and related device |
| WO2023131217A1 (en) * | 2022-01-10 | 2023-07-13 | 北京字跳网络技术有限公司 | Style determination method and apparatus, and device, storage medium and program product |
| CN117215584A (en) * | 2023-11-07 | 2023-12-12 | 江西格如灵科技股份有限公司 | 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 |
| CN117539491B (en) * | 2024-01-09 | 2024-04-26 | 腾讯科技（深圳）有限公司 | Page layout method, page layout device, electronic device, storage medium and program product |
Citations (10)
| 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 |
| 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 |
| 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 |
| 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 |
-
2021
- 2021-05-12 CN CN202110519105.8A patent/CN113190781B/en active Active
Patent Citations (10)
| 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 |
| 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 |
| US20190073091A1 (en) * | 2017-09-06 | 2019-03-07 | Sap Se | Dynamic display layout systems and methods |
| CN108549516A (en) * | 2018-04-12 | 2018-09-18 | 北京奇艺世纪科技有限公司 | A kind of interface layout method of adjustment and device |
| US20200019583A1 (en) * | 2018-07-11 | 2020-01-16 | University Of Southern California | Systems and methods for automated repair of webpages |
| 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 |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113779459A (en) * | 2021-08-09 | 2021-12-10 | 北京达佳互联信息技术有限公司 | Page display method and device and electronic equipment |
| CN113779459B (en) * | 2021-08-09 | 2024-01-02 | 北京达佳互联信息技术有限公司 | Page display method and device and electronic equipment |
| CN113835806A (en) * | 2021-09-18 | 2021-12-24 | 北京天融信网络安全技术有限公司 | Page layout method and device, electronic equipment and storage medium |
| CN113835806B (en) * | 2021-09-18 | 2024-03-15 | 北京天融信网络安全技术有限公司 | Page layout method and device, electronic equipment and storage medium |
| WO2023097990A1 (en) * | 2021-11-30 | 2023-06-08 | 华为云计算技术有限公司 | Element layout method and related device |
| WO2023131217A1 (en) * | 2022-01-10 | 2023-07-13 | 北京字跳网络技术有限公司 | Style determination method and apparatus, and device, storage medium and program product |
| CN117215584A (en) * | 2023-11-07 | 2023-12-12 | 江西格如灵科技股份有限公司 | UI automatic arrangement method, system, storage medium and electronic equipment |
| 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 |
| CN117539491B (en) * | 2024-01-09 | 2024-04-26 | 腾讯科技（深圳）有限公司 | Page layout method, page layout device, electronic device, storage medium and program product |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113190781B (en) | 2023-09-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113190781B (en) | Page layout method, device, equipment and storage medium | |
| US20090265611A1 (en) | Web page layout optimization using section importance | |
| US10521494B2 (en) | Content to layout template mapping and transformation | |
| US10839140B2 (en) | Page displaying method, apparatus based on H5 webpage, and computer readable storage medium | |
| CN112667330A (en) | Page display method and computer equipment | |
| CN106874023B (en) | Dynamic page loading method and device | |
| CN113655999A (en) | Rendering method, device and equipment of page control and storage medium | |
| CN114579912A (en) | Page layout method, device, equipment and medium | |
| CN111970570B (en) | Method and device for prompting video content interaction position | |
| CN105389308B (en) | Webpage display processing method and device | |
| CN111428452B (en) | Annotation data storage method and device | |
| 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 | |
| CN112911367B (en) | Video playing interface processing method and device and electronic equipment | |
| CN110908570B (en) | Image processing method, device, terminal and storage medium | |
| CN113076165A (en) | Page checking method and device | |
| CN112434487A (en) | Image-text typesetting method and device and electronic equipment | |
| CN111881050A (en) | Method and device for clipping text layer and electronic equipment | |
| CN110019492B (en) | Information display method and device | |
| CN112784526A (en) | Document page adjusting method and device | |
| CN114237468B (en) | Text and picture translation method and device, electronic equipment and readable storage medium | |
| CN112783395B (en) | Method, device, electronic equipment and medium for displaying form field | |
| CN110308905B (en) | Page component matching method and device | |
| CN112783839A (en) | Method and device for storing document, electronic equipment and storage medium | |
| CN113704655A (en) | Page operation control setting method and device and storage medium |
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 |