Page layout method, electronic device and computer readable storage medium

Abstract

The present application discloses a page layout method, an electronic device, and a computer-readable storage medium, the page layout method comprising: obtaining a first component set for the initial configuration of the page to be laid out, the first component set comprising a first number of components; based on the reference component size of each component in the first component set, selecting a second number of components matching the screen size of the page to be laid out from the first component set to obtain a second component set, and determining the position association information of each component in the second component set on the page to be laid out, the second number being less than or equal to the first number, and the reference component size belonging to the component size range; based on the second component set and the position association information, performing page layout on the page to be laid out. The above scheme can flexibly adapt to diverse page layout requirements.

Description

Technical Field

[0001] The present application relates to the technical field of front-end page development, and in particular to a page layout method, an electronic device, and a computer-readable storage medium. Background Art

[0002] Page layout technology refers to responding to page layout requirements and planning the layout of each page element in the front-end page so that each page element is reasonably displayed on the front-end page of the main screen size of the page layout for users to view.

[0003] Existing page layout methods include table layout (HTML), flexible box layout (Flexbox), grid layout (Grid), responsive layout, etc.

[0004] With the development of technology, the screen sizes of front-end pages and page layout bodies tend to be diversified. For example, AI large models such as ChatGPT and LLaMA can generate a variety of front-end pages. As a result, page layout requirements tend to be diversified. Existing page layout methods cannot adapt to the diverse page layout requirements, resulting in unreasonable page layout results and affecting user experience. Summary of the invention

[0005] The present application provides a page layout method, a page layout device, an electronic device and a computer-readable storage medium, which can solve the problem that the existing page layout method cannot adapt to diverse page layout requirements.

[0006] The present application provides a page layout method, including: obtaining a first component set for initial configuration of a page to be laid out, the first component set including a first number of components; based on a reference component size of each component in the first component set, selecting a second number of components matching the screen size of the page to be laid out from the first component set to obtain a second component set, and determining position association information of each component in the second component set on the page to be laid out, the second number being less than or equal to the first number, and the reference component size belonging to a component size range; based on the second component set and the position association information, performing page layout on the page to be laid out.

[0007] The present application provides a page layout device, including: an acquisition module, a selection module and a layout module. The acquisition module is used to acquire a first component set initially configured for the page to be laid out, and the first component set includes a first number of components. The selection module is used to select a second number of components that match the screen size of the page to be laid out from the first component set based on the reference component size of each component in the first component set, obtain a second component set, and determine the position association information of each component in the second component set on the page to be laid out, the second number is less than or equal to the first number, and the reference component size belongs to the component size range. The layout module is used to perform page layout on the page to be laid out based on the second component set and the position association information.

[0008] The present application provides an electronic device, including a memory and a processor, wherein the processor is used to execute program instructions stored in the memory to implement the above-mentioned page layout method.

[0009] The present application provides a computer-readable storage medium on which program instructions are stored. When the program instructions are executed by a processor, the above-mentioned page layout method is implemented.

[0010] In the above scheme, the present application selects a second component set that matches the screen size of the page to be laid out based on the reference component size in the component size range of each component in the first component set, and determines the position association information of each component in the second component set; and uses the second component set and the position association information to perform page layout. The number of components in the second component set matches the screen size of the page to be laid out, and each component in the second component set can be laid out on the page to be laid out according to the position association information. Therefore, the page layout method provided by the present application can adapt to page layouts of various screen sizes, numbers of components, and sizes of components, and can therefore flexibly adapt to diverse page layout requirements. And there is no need to pre-set page layout templates, reducing development costs.

[0011] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present application. BRIEF DESCRIPTION OF THE DRAWINGS

[0012] The drawings herein are incorporated into the specification and constitute a part of the specification. These drawings illustrate embodiments consistent with the present application and are used together with the specification to illustrate the technical solution of the present application.

[0013] Figure 1 It is a flow chart of an embodiment of a page layout method provided by the present application;

[0014] Figure 2 It is a flow chart of another embodiment of the page layout method provided by the present application;

[0015] Figure 3It is a flow chart of another embodiment of the page layout method provided by the present application;

[0016] Figure 4 It is a flow chart of another embodiment of the page layout method provided by the present application;

[0017] Figure 5 It is a flow chart of another embodiment of the page layout method provided by the present application;

[0018] Figure 6 It is a flow chart of another embodiment of the page layout method provided by the present application;

[0019] Figure 7 It is a schematic diagram of the page layout method framework provided by this application;

[0020] Figure 8 It is a schematic diagram of the container of the present application;

[0021] Fig. 9 It is a schematic diagram of the position association information after the sub-container component and the first element component of this application are updated;

[0022] Fig.10 It is a schematic diagram of the updated position association information of the sub-container component, the first element component, and the second element component of the present application;

[0023] Fig.11 is another schematic diagram of the container of the present application;

[0024] Fig.12 It is a structural schematic diagram of the page layout device of the present application;

[0025] Fig.13 It is a structural schematic diagram of an embodiment of the electronic device of the present application;

[0026] Fig.14 It is a structural diagram of an embodiment of a computer-readable storage medium of the present application. DETAILED DESCRIPTION

[0027] The scheme of the embodiment of the present application is described in detail below in conjunction with the drawings of the specification.

[0028] In the following description, for the purpose of explanation rather than limitation, specific details such as specific system structures, interfaces, and technologies are provided to facilitate a thorough understanding of the present application.

[0029] The term "and / or" in this article is only a description of the association relationship of associated objects, indicating that there may be three relationships. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. In addition, the character " / " in this article generally indicates that the objects associated before and after are in an "or" relationship. In addition, "many" in this article means two or more than two. In addition, the term "at least one" in this article means any combination of at least two of any one or more of a plurality of, for example, including at least one of A, B, and C, can mean including any one or more elements selected from the set consisting of A, B, and C.

[0030] The following is an explanation of the technical terms involved in this application and a detailed explanation of the technical issues:

[0031] Page layout requirements refer to the layout requirements of various front-end pages on the screen sizes of various page layout subjects. The page layout subject can be any electronic device with page layout requirements, such as tablets, desktop computers, and mobile phones.

[0032] A reasonable page layout result means that all page elements in the front-end page are laid out according to the page layout result, and are readable, beautiful, etc.

[0033] Page layout results, including position-related information (position, size).

[0034] In the related page layout method, different page layout templates are preset, and when it is necessary to perform page layout on the page to be laid out, the corresponding page layout template is matched, and the front-end page is laid out based on the matched page layout template.

[0035] After long-term research, the inventor of this application found that the related page layout method has at least the following technical problems:

[0036] 1. High development cost. Specifically, the related page layout method relies on page layout template implementation, so it is necessary to pre-set page layout templates for various page layout requirements, so the development cost is high.

[0037] 3. Unable to adapt to diverse page layout requirements. Specifically, the related page layout method is limited by the page layout template, but the page layout template is difficult to cover all page layout requirements, such as unforeseen or non-standardized page layout requirements, resulting in the related page layout method being unable to adapt to all page layout requirements.

[0038] To this end, the present application provides a page layout method to solve the above problems. An embodiment of the page layout method provided by the present application is introduced as follows.

[0039] Figure 11 is a flow chart of an embodiment of a page layout method provided by the present application. Figure 1 As shown, the page layout method provided by this application includes:

[0040] S11: Acquire a first component set initially configured for the page to be laid out.

[0041] The first component set includes a first number of components.

[0042] The first number is greater than or equal to 1. The first number of components belongs to a container. The container size of the container is less than or equal to the screen size of the page to be laid out. The following description of this application only takes the case where the container size is the screen size.

[0043] In some embodiments, S11 includes S111-S112 (not shown). S111: Acquire a first number of page elements of a page to be laid out. S112: Create a container for the first number of page elements. The container includes a first number of element components.

[0044] In this case, the first component set / the first number of components includes a first number of element components. An element component represents a page element of the page to be laid out. The page element can be text, image, video, etc.

[0045] In some embodiments, S11 includes S113-S114 (not shown). S113: Obtain a first number of page elements of the page to be laid out. S114: Based on the correlation between each page element, build a container for the page to be laid out. The container size of the container is the screen size. The container includes a sixth number of first element components, a seventh number of second element components, and an eighth number of sub-container components corresponding to the seventh number of second element components. The sum of the sixth number, the seventh number, and the eighth number is equal to the first number. A first element component and a second element component represent a page element. The correlation between different second element components corresponding to the same sub-container component is higher than the correlation threshold. The first element component and the second element component belong to the element components mentioned above. The first element component has no corresponding sub-container component, that is, it is not classified into the sub-container component. The second element component has a corresponding sub-container component, that is, it is classified into its corresponding sub-container component. Different second element components corresponding to the sub-container component represent different page elements of the page to be laid out. The sub-container component and the first element component are first-level components, and the second element component is a second-level component. In this case, different second element components included in the same sub-container component can be subsequently displayed in similar positions (the same sub-container component area) in the page to be laid out.

[0046] In this case, the first component set / first number of components includes the sixth number of first element components, the seventh number of second element components, and the eighth number of sub-container components corresponding to the seventh number of second element components, and the sum of the sixth number, the seventh number, and the eighth number is equal to the first number. Among them, at least one of the sixth number and the seventh number is greater than or equal to 1. When the eighth number is related to the seventh number, the eighth number is also 0 when the seventh number is 0.

[0047] In some embodiments, the container is a DSL syntax tree data structure.

[0048] In some embodiments, the container has multiple levels, the container at the current level is included by the container at the previous level, and the container at the current level includes the container at the next level. To simplify the description, this application only describes the case of containers at one level.

[0049] Each page element has corresponding element component configuration information, and the element component configuration information includes component serial number (id), component attributes, etc. Component attributes may include component type (type), component name (key), component priority (priority), component affinity (affinity), component size range, component height-width ratio (fixedRatio), etc. Component affinity represents the correlation between each element component, and the element components with the same or similar component affinity have a higher correlation. The component size range represents the range of component sizes that can be laid out by the element component. The component size range includes the minimum column width (minWidth) of the component, the maximum column width (maxWidth) of the component, the minimum row height (minHeight) of the component, and the maximum row height (maxHeight) of the component. Component types include text, pictures, videos, etc. The component height-width ratio is the ratio between the component row height and the component column width. When the element component configuration information has the component height-width ratio, it means that the ratio between the component row height and the component column width is fixed.

[0050] S12: Based on the reference component size of each component in the first component set, a second number of components matching the screen size of the page to be laid out are selected from the first component set to obtain a second component set, and position association information of each component in the second component set on the page to be laid out is determined.

[0051] The second quantity is less than or equal to the first quantity, and the reference component size belongs to a range of component sizes.

[0052] The second number is greater than or equal to 1. The screen size includes the screen column width and the screen row height. The reference component size includes the reference row height and the reference column width. The component position association information includes the target component size and the target component position.

[0053] The reference component size of a component belongs to any component size in the component size range of the component. For example, the reference component size is the maximum size in the component size range, and the reference row height and the reference column width are the maximum row height and the maximum column width in the reference component size, respectively. For another example, the reference component size is the middle size in the component size range, and the reference row height and the reference column width are the middle row height and the middle column width in the reference component size, respectively. For another example, the reference component size is the minimum size in the component size range, and the reference row height and the reference column width are the minimum row height and the minimum column width in the reference component size, respectively. Of course, in the case where the component does not have a corresponding component height-to-width ratio, the reference row height and the reference column width in the reference component size can be any ratio. The positions of the reference component sizes of different components in the first component set relative to their component size ranges may be the same or different. For example, the reference component size of one part of the components is the minimum size, and the reference component size of another part of the components is the middle size.

[0054] In some embodiments, when the first component set includes a first number of element components, the second component set includes a second number of element components. S12 includes S121-S122 (not shown). S121: Based on the reference component size of each component in the first component set, select a second number of element components from the first number of element components to obtain a second component set. S122: Based on the reference component size of each component in the second component set, determine the position association information of the first number of element components.

[0055] In some embodiments, when the first component set includes the sixth number of first element components, the seventh number of second element components, and the eighth number of sub-container components corresponding to the seventh number of second element components, the second component set includes the third number of first element components, the fourth number of second element components, and the fifth number of sub-container components corresponding to the fourth number of second element components, and the sum of the third number, the fourth number, and the fifth number is equal to the second number. S12 includes S123-S125 (not shown). S123: Based on the reference component size, select the third number of first element components, the fourth number of second element components, and the fifth number of sub-container components corresponding to the fourth number of second element components from the first component set to obtain the second component set. The sum of the third number, the fourth number, and the fifth number is equal to the second number. S124: Based on the reference component size, determine the position association information of the third number of first element components and the fourth number of second element components. S125: Based on the position association information of the fourth number of second element components, determine the position association information of the fifth number of sub-container components. In S125, the component size of a sub-container component may be determined based on the component sizes of each second element component corresponding to the sub-container component, and the component position of the sub-container component may be determined based on the component positions of each corresponding second element component.

[0056] The second component set matches the screen size of the page to be laid out, which means that the number of components in the second component set and the reference component size of the components match the screen size of the page to be laid out. In other words, each component in the second component set can be laid out on the page to be laid out of the screen size according to the reference component size. In other words, each component in the second component set can find a layout position on the page to be laid out of the screen size according to the reference component size.

[0057] In some embodiments, determination of position association information in S12 includes: using the reference component size of each component in the second component set as the target component size of each component; and using the layout position of each component in the second component set on the to-be-layout page of the screen size according to the corresponding reference component size as the target component position of each component in the second component set.

[0058] In some embodiments, the target component size in the position association information is the scaling result of the reference component size. For example, the reference component size is reduced in size according to a preset reduction ratio, or is enlarged in size according to a preset enlargement ratio. The target component position is the layout position of each component on the to-be-layout page of the screen size according to the scaling result of the reference component size.

[0059] In some embodiments, each component from the first set of components has an equal probability of being selected.

[0060] In some embodiments, the probability of each component being selected from the first component set is related to at least one of the priority, the component serial number, and the component type. For example, the higher the priority, the greater the probability of being selected. For example, the smaller the component serial number, the greater the probability of being selected. For example, the component whose component type is text is more likely to be selected.

[0061] In some embodiments, the selection of components in S12 includes S126 (not shown). S126: Based on the reference component size and priority of each component in the first component set, a second number of components matching the screen size are selected from the first component set to obtain a second component set. A component with a higher priority has a greater probability of being selected.

[0062] In some embodiments, the selection of components in S12 includes S127 (not shown). S127: Based on the reference component size and component serial number of each component in the first component set, a second number of components matching the screen size are selected from the first component set to obtain a second component set. The component with a smaller component serial number has a greater probability of being selected.

[0063] In some embodiments, the selection of components in S12 includes S128 (not shown). S128: Based on the reference component size, priority and component serial number of each component in the first component set, a second number of components matching the screen size is selected from the first component set to obtain a second component set. The component with a smaller component serial number and a higher priority has a greater probability of being selected.

[0064] S13: Based on the second component set and the position association information, perform page layout on the page to be laid out.

[0065] In some embodiments, when the second component set includes a second number of element components, S13 includes S131 (not shown): S131: Based on the second number of element components and their position association information, perform page layout on the page to be laid out.

[0066] In some embodiments, when the second component set includes a third number of first element components, a fourth number of second element components, and a fifth number of sub-container components corresponding to the fourth number of second element components, S13 includes S132 (not shown). S132: Based on the third number of first element components, the fourth number of second element components, the fifth number of sub-container components, and the position association information, perform page layout on the page to be laid out.

[0067] In some embodiments, S13 includes: obtaining style information of each component in the second component set; rendering each component to the page to be laid out based on the style information and position association information of each component in the second component set. The style information includes text font, color and thickness, component background color, etc.

[0068] Through the implementation of this embodiment, the present application selects a second component set that matches the screen size of the page to be laid out based on the reference component size in the component size range of each component in the first component set, and determines the position association information of each component in the second component set; and uses the second component set and the position association information to perform page layout. The number of components in the second component set matches the screen size of the page to be laid out, and each component in the second component set can be laid out on the page to be laid out according to the position association information. Therefore, the page layout method provided by the present application can adapt to page layouts of various screen sizes, numbers of components, and sizes of components, and can therefore flexibly adapt to diverse page layout requirements. And there is no need to pre-set page layout templates, reducing development costs.

[0069] In some embodiments, S126 includes: based on the priority of each component in the first component set, determining a priority set corresponding to the first component set, the priority set including the priority of each component in the first component set; traversing each priority in the priority set to determine a target layout priority, the target layout priority being a priority that meets the first layout requirements; determining a second number of components having a priority higher than the target layout priority to form a second component set.

[0070] Among them, the first layout requirement is that components with a priority higher than the target layout priority can be laid out on the page to be laid out of the screen size according to the corresponding reference component size. The order of traversing the priority set can be from high to low priority, from low to high priority, or other orders. The traversal can be ended when a priority that meets the first layout requirement is traversed, and the priority is used as the target layout priority. Alternatively, the priority set can be traversed, all priorities that meet the first layout requirement are determined, and the smallest one is selected from all priorities that meet the first layout requirement as the target layout priority.

[0071] In some embodiments, S126 includes: determining a priority range based on the priority of each component in the first component set; traversing the priority range to determine a target layout priority; and determining a second number of components having a priority higher than the target layout priority to form a second component set. Details are as follows:

[0072] Figure 2 1 is a flow chart of another embodiment of the page layout method provided by the present application. This embodiment is a further extension of S126. Figure 2 As shown, the page layout method provided by this application includes:

[0073] S21: Determine a priority range of the first component set based on the priority of each component in the first component set.

[0074] The lowest priority and the highest priority of the components in the first component set are distributed as the initial left boundary and the initial right boundary of the priority range of the first component set. The first component set can be expressed as [l, r], where l and r represent the initial left boundary and the initial right boundary respectively.

[0075] S22: Determine a target layout priority that meets the first layout requirement from a priority range based on a reference component size of each component in the first component set.

[0076] The first layout requirement is that components with a priority higher than the target layout priority can all be laid out on the to-be-laid-out page of the screen size according to the corresponding reference component size.

[0077] The target layout priority can be any priority among all priorities that meet the first layout requirements within the priority range. It can be understood that by selecting a smaller priority from all priorities that meet the first layout requirements as the target layout priority, more components can be screened out from the first component set based on the target layout priority. That is, the lower the target layout priority, the larger the second number. In the case where the target layout priority is the minimum priority among all priorities that meet the first layout requirements, the number of selected components can be maximized to make the page layout more complete.

[0078] The priority range may be traversed to determine the priority that meets the first layout requirement. The traversal of the priority range may stop when a priority that meets the first layout requirement is found, or may stop when all priorities that meet the first layout requirement are found. Furthermore, the traversal of the priority range may be traversed in order from high to low priority, or may be traversed in order from low to high priority.

[0079] In some embodiments, S22 includes S221-S222 (not shown). S221: Determine the minimum priority in the priority range that meets the first layout requirement. S222: Determine the minimum priority that meets the first layout requirement as the target layout priority.

[0080] In S221 , the minimum priority in the priority range that meets the first layout requirement may be determined by traversing each integer value in the priority range, or by traversing the priority range using a binary search method.

[0081] S23: Obtain components with a priority higher than the target layout priority from the first component set to obtain a second component set.

[0082] By implementing S21-S23, the second component set can be selected based on the priorities of the components in the first component set. Thus, components with higher priorities in the first component set can be selected into the second component set.

[0083] In some embodiments, the layout position of each component in the second component set is obtained in the process of determining the target layout priority. That is, in S21-S23, the layout position in the second component set can be obtained in the process of determining the target layout priority. And, the layout position can be used as the target component position of each component in the second component set.

[0084] Figure 3 2 is a flow chart of another embodiment of the page layout method provided by the present application. This embodiment is a further extension of S22. Figure 3 As shown, the page layout method provided by this application includes:

[0085] S31: Determine the highest priority and the lowest priority in the priority range.

[0086] The lowest priority and highest priority distributions are the initial left boundary l and the initial right boundary r of the priority range [l, r].

[0087] S32: Determine an intermediate priority between the highest priority and the lowest priority.

[0088] Median priority = (r+l) / 2.

[0089] S33: Determine whether the highest priority and the lowest priority are equal.

[0090] In response to the highest priority and the lowest priority being equal, S34 is executed. In response to the highest priority and the lowest priority being unequal, S35-S38 are executed.

[0091] S34: Taking the middle priority as the minimum priority that satisfies the first layout requirement.

[0092] S35: Select a candidate component set whose priority is higher than the intermediate priority from the first component set.

[0093] S36: Detect whether each candidate component in the candidate component set can be laid out on the to-be-laid-out page of the screen size according to the corresponding reference component size.

[0094] In response to all candidate components being able to be laid out, S37 is executed; in response to some candidate components being unable to be laid out, S38 is executed.

[0095] Each candidate component in the candidate component set can be laid out on the to-be-laid page of the screen size according to the corresponding reference component size, which means that each candidate component can find a layout position on the to-be-laid page of the screen size according to the corresponding reference component size.

[0096] In some embodiments, S36 includes: determining a set of candidate positions for a page to be laid out, the set of candidate positions including all candidate positions for the page to be laid out; traversing the set of candidate components, searching for a layout position for each candidate component in the set of candidate components; in response to searching for a layout position for each candidate component, determining that each candidate component can be laid out; in response to there being a candidate component for which a layout position cannot be searched, determining that there is a candidate component that cannot be laid out. Wherein, in the case where a layout position is searched for the current candidate component, it is determined that all candidate positions in the set of candidate positions covered by the layout position and the reference component size of the current candidate component are occupied. The search for the next candidate component is performed based on the unoccupied candidate positions.

[0097] In some embodiments, S36 includes: traversing the candidate component set to determine the candidate position set of the current candidate component; determining whether there is a candidate position in the candidate position set of the current candidate component where the current candidate component can be laid out; in response to the existence of a candidate position where the current candidate component can be laid out, determining that the current candidate component can be laid out, and determining that the candidate position where the current candidate component can be laid out is occupied as a layout position of the current candidate component, and proceeding to determine the next candidate component. In this way, when it is determined that each candidate component in the candidate component set has a layout position, it is determined that each candidate position can be laid out. When it is determined that there is a candidate component in the candidate component set that does not have a layout position, it is determined that there is a candidate component that cannot be laid out. The candidate position set of the current candidate component is generated according to the horizontal line method based on the layout position of the currently laid out component and is not occupied. The currently laid out component is the candidate component that has been determined to be currently laid out.

[0098] It is detected whether each candidate component can be laid out according to the corresponding reference component size, and it can be determined whether a layout position can be found for each candidate component through any layout scheme.

[0099] S37: Update the highest priority to the middle priority.

[0100] After executing S37, jump to S32.

[0101] S38: Update the lowest priority to the middle priority.

[0102] After executing S38, jump to S32.

[0103] Through the implementation of S31-S38, the minimum priority level in the priority range that meets the first layout requirement can be found through the binary search method, thereby improving the search efficiency of the minimum priority level that meets the first layout requirement.

[0104] Figure 4 is a flow chart of another embodiment of the page layout method provided by the present application. This embodiment is a further extension of S36. Figure 4 As shown, the page layout method provided by this application includes:

[0105] S41: Obtain a candidate position set of the current candidate component in the candidate component set.

[0106] The candidate position set of the current candidate component includes candidate positions that are determined based on the layout positions of the current layout-capable component and are not occupied. The current layout-capable component is the candidate component that has been determined to be currently layout-capable.

[0107] In some embodiments, the candidate component set is a component sequence, and the next candidate component mentioned below is the next candidate component adjacent to the current candidate component in the component sequence, and the previous candidate component is the previous candidate component adjacent to the current candidate component in the component sequence. The components in the component sequence are arranged in order from small to large according to the component id. Alternatively, the components in the component sequence are arranged in order from high to low priority. Of course, the components in the component sequence can also be set to other orders according to actual needs.

[0108] It is understandable that, in S41-S47, once a candidate component that cannot be laid out is traversed, the loop will be jumped out, the traversal will be terminated, and it will be determined that there is a candidate component in the candidate component set that cannot be laid out. Therefore, all candidate components that have been traversed before the current candidate component are currently layout-able components. The candidate components that have been determined to be layout-able at present are all candidate components that have been traversed.

[0109] It is understandable that, during the traversal process, each time a candidate component that can be laid out is determined, the candidate component that can be laid out occupies a candidate position as a layout position. At least one newly added candidate position is determined based on the layout position of the candidate component that can be laid out. The occupied candidate position is removed from the candidate position set. The at least one newly added candidate position is included in the candidate position set to obtain the candidate position set of the next candidate component.

[0110] In some embodiments, S41 includes S411-S413 (not shown). S411: The candidate position that is occupied as the layout position of the previous candidate component is removed from the candidate position set of the previous candidate component. S412: Based on the layout position of the previous candidate component, at least one new candidate position is determined, and the new candidate position is on the same horizontal line as the layout position of the previous candidate component. S413: The new candidate position is included in the candidate position set of the previous candidate component to obtain the candidate position set of the current candidate component.

[0111] The horizontal lines include column horizontal lines and row horizontal lines. The newly added candidate position and the layout position of the previous candidate component are in the same column horizontal line, which means that the newly added candidate position and the layout position of the previous candidate component are in the same column, and the newly added candidate position and the layout position of the previous candidate component are in the same row horizontal line, which means that the newly added candidate position and the layout position of the previous candidate component are in the same row.

[0112] In some embodiments, in S412, based on the layout position of the previous candidate component, a new candidate position can be added in the direction of the column horizontal line and / or the direction of the row horizontal line. The newly added candidate position in the direction of the column horizontal line is located on the same column horizontal line as the layout position of the previous candidate component, and the newly added candidate position in the direction of the row horizontal line is located on the same row horizontal line as the layout position of the previous candidate component. The column horizontal line direction is from top to bottom or from bottom to top, and the row horizontal line direction is from left to right or from right to left. From left to right, at least one candidate position on the right side of the layout position of the previous candidate component can be added. From top to bottom, at least one candidate position on the lower side of the layout position of the previous candidate component can be added. From right to left, at least one candidate position on the left side of the layout position of the previous candidate component can be added. From bottom to top, at least one candidate position on the upper side of the layout position of the previous candidate component can be added.

[0113] In some embodiments, at least one newly added candidate position includes a first candidate position and a second candidate position. S412 includes S4121 and S4122 (not shown). S4121: Determine a first candidate position that is located in a row to which the layout position of the current candidate component belongs and is located to the right of the layout position of the current candidate component (from left to right). S4122: Determine a second candidate position that is located in a column to which the layout position of the current candidate component belongs and is located below the layout position of the current candidate component (from top to bottom).

[0114] In some embodiments, the layout position of the current candidate component includes layout row coordinates and layout column coordinates. S4121 includes: using the layout row coordinates of the previous candidate component as the row coordinates of the first candidate position, and determining the sum of the layout column coordinates of the previous candidate component, the reference column width of the previous candidate component, and the column spacing as the column coordinates of the first candidate position. S4122 includes: determining the sum of the layout row coordinates of the previous candidate component, the reference row height of the previous candidate component, and the row spacing as the row coordinates of the second candidate position, and using the column coordinates of the previous candidate component as the column coordinates of the second candidate position.

[0115] S42: Search whether there is a candidate position that meets the insertion condition of the candidate component in the candidate position set of the current candidate component.

[0116] The insertion conditions of the current candidate component include the column coordinates of the candidate position, the reference column width of the current candidate component, and the sum of the column intervals is less than the screen column width, and the row coordinates of the candidate position, the reference row height of the current candidate component, and the sum of the row intervals is less than the screen row height.

[0117] The candidate position that meets the insertion condition is the candidate position where the candidate component can be placed, and the candidate position where the candidate component can be placed is the position where the candidate component can be placed.

[0118] It can be understood that the sum of the column coordinates of the candidate position, the reference column width of the current candidate component, and the column spacing is less than the screen column width (insertion condition 1), which means that the layout of the current candidate component at the candidate position will not exceed the screen column width range. Similarly, the sum of the row coordinates of the candidate position, the reference row height of the current candidate component, and the row spacing is less than the screen row height (insertion condition 2), which means that the layout of the current candidate component at the candidate position will not exceed the screen row height range. Therefore, the layout of the current candidate component at the candidate position can ensure that the current candidate component is within the screen size range.

[0119] In some embodiments, the layoutable position includes layoutable row coordinates and layoutable column coordinates. The insertion conditions of the current candidate component also include that the column coordinates of the candidate position are greater than the layoutable column coordinates of the current layoutable component in the row to which the candidate position belongs (insertion condition 3), and the row coordinates of the candidate position are greater than the layoutable row coordinates of the current layoutable component in the column to which the candidate position belongs (insertion condition 4). It can be understood that satisfying insertion condition 3 means that the candidate position is located on both sides (left and right) of the layoutable position of all current layoutable components in the row to which the candidate position belongs. Similarly, satisfying insertion condition 4 means that the candidate position is located on both sides (upper and lower) of the layoutable position of all current layoutable components in the column to which the candidate position belongs. Thereby, the candidate position can be not between any two currently layoutable components, and the layout is more beautiful.

[0120] In some embodiments, S42 includes S421-S425 (not shown). S421: Obtain the current candidate position from the candidate position set using a heap data structure. S422: Determine whether the current candidate position satisfies the insertion condition. In response to the current candidate position satisfying the insertion condition, execute S423. In response to the current candidate position not satisfying the insertion condition, execute S424. S423: Determine whether there is a candidate position that satisfies the insertion condition. S424: Determine whether the current candidate position is the last candidate position in the candidate position set. In response to being the last candidate position, execute S425. In response to not being the last candidate position, jump back to S421 to enter the judgment of the next candidate position in the candidate position set. S425: Determine that there is no candidate position that satisfies the insertion condition.

[0121] It is understandable that using a heap data structure to obtain the current candidate position from the candidate position set means that each candidate position in the candidate position set is stored according to the heap data structure. In other embodiments, other data structures, such as array data structures, can also be used to obtain the current candidate position from the candidate position set. Compared with other data structures, using a heap data structure to obtain the current candidate position from the candidate position set can reduce the time complexity of determining the current candidate position.

[0122] In response to the current candidate component having a candidate position that satisfies the insertion condition, S43 to S46 are executed. In response to the current candidate component having no candidate position that satisfies the insertion condition, S47 is executed.

[0123] S43: Determine that the current candidate component is layoutable, and determine that a candidate position that meets the insertion condition is occupied as a layoutable position of the current candidate component.

[0124] S44: Determine whether the current candidate component is the last candidate component in the candidate component set.

[0125] In response to the current candidate component being the last candidate component, S45 is executed. In response to the current candidate component not being the last candidate component, S46 is executed.

[0126] S45: Determine that all candidate components can be laid out.

[0127] S46: Update the current candidate component using the next candidate component.

[0128] After executing S46, the process jumps back to S41 to enter the processing of the next candidate component.

[0129] S47: Determine that there is a candidate component that cannot be placed.

[0130] Through the implementation of this embodiment, it can be determined whether each candidate component in the candidate component set can find a layout position on the page to be laid out, thereby determining whether each candidate component in the candidate component set can be laid out on the page to be laid out of the screen size according to the corresponding reference component size.

[0131] In some embodiments, different from S41-S47, in S36, when traversing to a candidate component that cannot be laid out, if the candidate component that cannot be laid out is not the last candidate component in the candidate component set, the candidate component that cannot be laid out is moved to the end of the candidate component set as the last candidate component to be traversed, and the processing of the next candidate component in the candidate component set is entered. If the candidate component that can be laid out is the last candidate component in the candidate component set, the loop is jumped out, the traversal is ended, and it is determined that there is a candidate component in the candidate component set that cannot be laid out. In this way, the traversal can cover the layout possibilities of each candidate component in the candidate component set according to all layout orders, and the probability of determining that each candidate component can be laid out is higher.

[0132] Furthermore, based on S12, the target component size of the components in the second component set (hereinafter also referred to as the original target component size) is determined. When the original target component size of at least one component in the second component set is not the maximum size, for example, the target component size of all components is the minimum size, before S13, the size of at least one component in the second component set can be enlarged to make the page layout more beautiful and compact. Size enlargement may include row height enlargement and / or column width enlargement. The row height enlargement and / or column width enlargement ratios of different components may be the same or different. Different components may be enlarged in batches at the same enlargement ratio, or each component may be enlarged individually at its respective enlargement ratio. In the case of individual enlargement, the enlargement of the latter component is performed on the basis of the enlargement of the previous component. Details are as follows:

[0133] Figure 5 2 is a flow chart of another embodiment of the page layout method provided by the present application. This embodiment is a further extension of the above embodiment. Figure 5 As shown, before S13, the page layout method provided by this application includes:

[0134] S51: Determine at least one component in the second component set that needs to be amplified as the component to be amplified.

[0135] In some embodiments, when the second component set includes a second number of element components, the component to be amplified is at least one element component in the second component set. S51 includes S511 (not shown). S511: Determine at least one element component to be amplified in the second component set as the component to be amplified.

[0136] In some embodiments, when the second component set includes a third number of first element components, a fourth number of second element components, and a fifth number of sub-container components corresponding to the fourth number of second element components, the component to be magnified is at least one first element component and / or at least one sub-container component. S51 includes S512 (not shown). S512: Determine at least one sub-container component and / or at least one first element component to be magnified in the second component set as the component to be magnified.

[0137] S52: Enlarging the size of the component to be enlarged to update the target component size of the component to be enlarged.

[0138] The size enlargement includes enlarging the row height and / or the column width.

[0139] It can be understood that in S52, the size is enlarged based on the original target component size of the component to be enlarged. The target component size updated after the size of the component to be enlarged belongs to the component size range of the component to be enlarged, and after the size is enlarged, all components in the second component set can be laid out on the page to be laid out of the screen size. In the case where the component to be enlarged has a component aspect ratio, the column width can be enlarged based on the row height enlargement adaptability, or the row height can be enlarged based on the column width enlargement adaptability.

[0140] In some embodiments, the component to be enlarged is at least one element component in the second component set. S52 includes S521 (not shown). S521: Enlarge the size of at least one element component to be enlarged to update the target component size of at least one element component.

[0141] In some embodiments, when the component to be enlarged is at least one first element component and / or at least one sub-container component, S52 includes S522-S523 (not shown). S522: Enlarge the size of at least one sub-container component and / or at least one first element component to be enlarged. S523: Update the target component size and target component position of the corresponding second element component based on the target component position of the sub-container component to be enlarged in the component to be enlarged and the updated target component size.

[0142] Through the implementation of S51-S52, on the basis that the second component set can achieve a reasonable page layout, the target component size of at least one component can be further enlarged to make the page layout more beautiful and compact.

[0143] Figure 6 is a flow chart of another embodiment of the page layout method provided by the present application. This embodiment is a further extension of the above S52. Figure 6 As shown, S52 may include:

[0144] S61: Determine a target size enlargement amount of each component to be enlarged that meets the second layout requirement.

[0145] The second layout requirement is that after each to-be-enlarged component is enlarged according to the corresponding target size enlargement amount, each component in the second component set can be laid out on the to-be-layout page of the screen size.

[0146] The target size enlargement amount of the component to be enlarged belongs to the component size range of the component to be enlarged. The target size enlargement amount can be any size enlargement amount that meets the second layout requirement. It can be understood that, by taking the larger size enlargement amount among the size enlargement amounts that meet the second layout requirement as the target size enlargement amount, the page layout can be made more compact. Among them, when the maximum size enlargement amount that meets the second layout requirement is taken as the target size enlargement amount, the target component size can be maximized.

[0147] In some embodiments, S61 may include S611-S617 (not shown). Details are as follows:

[0148] S611: Obtain the amplification range of each component to be amplified.

[0149] The minimum size enlargement amount of the enlargement amount range of the component to be enlarged is 0, and the maximum size enlargement amount is the difference between the maximum size and the target component size.

[0150] S612: Determine an intermediate size enlargement amount between a maximum size enlargement amount and a minimum size enlargement amount in the enlargement amount range.

[0151] S613: Determine whether the maximum size enlargement amount is equal to the minimum size enlargement amount.

[0152] In response to the maximum size enlargement amount being equal to the minimum size enlargement amount, S614 is executed. In response to the maximum size enlargement amount not being equal to the minimum size enlargement amount, S615 is executed.

[0153] S614: Determine the intermediate size enlargement amount as the target size enlargement amount.

[0154] S615: Detect whether the amount of enlargement of the intermediate size of each component to be enlarged meets the second layout requirement.

[0155] In response to the second layout requirement being met, S616 is executed. In response to the second layout requirement not being met, S617 is executed.

[0156] S616: Update the minimum size enlargement amount using the intermediate size enlargement amount.

[0157] S617: Update the maximum size enlargement amount using the intermediate size enlargement amount.

[0158] After executing S616, the process jumps back to executing S612 to try a layout with a larger component size. After executing S617, the process jumps back to executing S612 to try a layout with a smaller component size.

[0159] In S611-S617, the intermediate size enlargement amount determined each time for the component to be enlarged satisfies: the enlargement result according to the intermediate size enlargement amount belongs to the component size range of the component to be enlarged.

[0160] In some embodiments, S613 may include S6131-S6134 (not shown). Details are as follows:

[0161] S6131: Enlarge the components to be enlarged according to the intermediate size enlargement amount of each component to be enlarged, and obtain the target component size of each component to be enlarged after enlargement.

[0162] S6132: Detect whether each component in the second component set can be laid out on the to-be-laid-out page of the screen size according to the enlarged target component size.

[0163] In response to all components being able to be laid out, S6133 is executed; in response to there being components that cannot be laid out, S6134 is executed.

[0164] S6133: Determine whether the intermediate size enlargement amount of each component to be enlarged meets the second layout requirement.

[0165] S6134: Determine whether the intermediate size enlargement amount of each component to be enlarged does not meet the second layout requirement.

[0166] It is understandable that in S611-S615, the enlargement range is traversed by binary search to determine the target size enlargement. In some embodiments, different from S611-S615, in S61, each size enlargement in the enlargement range can be traversed one by one to determine the target size enlargement. The method of traversing the enlargement range by binary search can improve the efficiency of determining the target size enlargement.

[0167] S62: Enlarging the target component size of each component to be enlarged according to the target size enlargement amount of each component to be enlarged, to obtain an updated target component size of each component to be enlarged.

[0168] In some embodiments, before S12, the method further includes: obtaining a screen size.

[0169] In some embodiments, obtaining the screen size includes: obtaining the screen size based on device information of the page layout subject. The device information of the page layout subject includes type, manufacturer, model, etc.

[0170] In some embodiments, obtaining the screen size includes: displaying a screen size input interface to the user; and receiving the screen size input by the user on the screen size input interface.

[0171] To facilitate understanding of the present application, the page layout method provided by the present application is described as follows in the form of an example:

[0172] Figure 7 This is a schematic diagram of the page layout method framework provided by this application. Figure 7 As shown, the page layout method framework includes a backend layer, an algorithm layer, and a frontend layer. The backend layer is used to obtain page layout data; the algorithm layer is used to obtain location association information based on the page layout data; and the frontend layer is used to render the page layout data based on the location association information.

[0173] 1. Backend Layer

[0174] 1. Obtain a first number of page elements and their corresponding element component configuration information.

[0175] Table 1 below shows the element component configuration information corresponding to the 15 page elements.

[0176] Table 1 Element component configuration information

[0177]

[0178] 2. Get the screen size entered by the user on the screen size interface.

[0179] 3. Build containers based on the relevance between page elements.

[0180] The container size is the screen size (800, 800). The container includes a first component set, and the first component set includes a first number of components. The first number of components includes a sixth number of first element components, a seventh number of second element components, and an eighth number of sub-container components corresponding to the seventh number of second element components. The sum of the sixth number, the seventh number, and the eighth number is equal to the first number.

[0181] Figure 8 Schematic diagram of the container of this application. Figure 8 As shown, the container includes a sub-container component 1 with a serial number, and the sub-container component 1 further includes 4 second element components with serial numbers, namely, picture component 1, text component 2, text component 3, and text component 4.

[0182] 2. Algorithm Layer

[0183] 1. Based on the minimum sizes of the sixth number of first element components and the seventh number of second element components in the first component set, determine the target layout priority in the priority range [l, r] of the first component set.

[0184] Use a binary approach to prioritize target layouts:

[0185] A1. Determine the middle priority midp=(l+r) / 2.

[0186] A2. Determine whether l=r is satisfied.

[0187] In response to l=r being satisfied, proceed to (3). In response to l=r not being satisfied, proceed to (4).

[0188] A3. Determine midp as the target layout priority.

[0189] A4. Select the sixth number of first element components and the seventh number of second element components with a priority higher than midp from the first component set to form a candidate component set. Use the component layout algorithm to determine whether each candidate component in the candidate component set can be laid out on the to-be-laid-out page of the screen size according to the minimum size.

[0190] In response to all candidate components being able to be laid out, the process proceeds to A5 ; in response to some candidate components being unable to be laid out, the process proceeds to A6 .

[0191] A5. Update r to midp. Return to A1.

[0192] A6. Update l to midp. Return to A1.

[0193] Use the component layout algorithm to determine whether each candidate component can be laid out:

[0194] B1. Obtain an initial candidate position set. Use the initial candidate position set as the candidate position set of the first candidate component in the candidate component set.

[0195] The row interval is h_interval, the column interval is w_interval. The initial candidate position in the initial candidate position set candidate_list is (h_interval, w_interval). The row where the initial candidate position is located, that is, the initial horizontal line horizontal[0]=h_interval. The column where the initial candidate position is located, that is, the initial column horizontal line vertical[0]=w_interval.

[0196] B2. Add a first candidate position and a second candidate position based on the layout position of the previous candidate component, add the first candidate position and the second candidate position to the candidate position set of the previous component, and remove the layout position of the previous candidate component from the candidate position set of the previous candidate component to obtain the candidate position set of the current candidate component.

[0197] For example, after traversing the previous candidate component i-1, the horizontal line of the row where the previous candidate component i-1 is located is horizontal[i-1]=x i-1 , the horizontal line of the column vertical[i-1]=y i-1 Based on the layout position (x i-1 ,y i-1 )Add candidate positions on the horizontal line of the new row (x i-1 + h i-1 + h_interval,y i-1 ), candidate positions on the horizontal line of the column ( x i-1 ,y i-1 + w i-1 +w_interval). Among them, x i-1 ,y i-1 、h i-1 、w i-1Represent the layout row coordinates, layout column coordinates, minimum row height, and minimum column width of the previous candidate component i-1. i-1 ,y i-1 ) is removed from candidate_list, and (x i-1 +h i-1 + h_interval,y i-1 )、( x i-1 ,y i-1 + w i-1 +w_interval) to add candidate_list to obtain the candidate position set of the current candidate component i.

[0198] B3. Search the candidate position set of the current candidate component to see whether there is a candidate position that meets the insertion condition of the current candidate component.

[0199] The insertion conditions include insertion conditions 1 to 4.

[0200] Insert condition 1: x i + h i +h_interval <H。x i 、h i , H represent the row coordinates of the candidate position, the minimum row height of the current candidate component, and the screen row height respectively.

[0201] Insert condition 2: y i + w i +w_interval <W。y i 、w i , W represent the column coordinates of the candidate position, the minimum column width of the current candidate component, and the screen column width respectively.

[0202] Insert condition 3: horizontal[i]<=y i . horizontal[i] represents the horizontal line of the candidate position. horizontal[i]<=y i Represents y i The layout column coordinates of all currently layoutable components that are greater than the horizontal line of the row where the candidate position is located.

[0203] Insert condition 4: vertical[j]<= x i . vertical[j] represents the horizontal line of the column where the candidate position is located. vertical[j]<= x i Represents x i The layout row coordinates of all currently layoutable components that are greater than the horizontal line of the column where the candidate position is located.

[0204] In response to the existence of a candidate position satisfying the insertion condition, the process proceeds to B4. In response to the absence of a candidate position satisfying the insertion condition, the process proceeds to B5.

[0205] B4: Determine that the current candidate component can be placed, and determine that the candidate position that meets the insertion condition is occupied as the position that can be placed for the current candidate component. Return to B2 to proceed to the judgment of the next candidate component.

[0206] B5. Determine that the current candidate component cannot be laid out.

[0207] 2. Select a first number of components from the first component set based on the target component priority to form a second component set, and determine position association information (target component size and target component position) of each component in the second component set.

[0208] A third number of first element components and a fourth number of second element components having a priority higher than the target layout priority are selected into the second component set. Also, a fifth number of sub-container components corresponding to the fourth number of second element components are selected into the second component set. The sum of the third number, the fourth number, and the fifth number is equal to the second number.

[0209] The minimum size of each first element component and each second element component in the second component set is used as the target component size, and the layout position of each first element component and each second element component according to the minimum size is used as the target component position. The layout position according to the minimum size is obtained in the process of B1-B5.

[0210] Based on the target component size and target component position of each second element component, the target component size and target component position of the corresponding subcontainer component are obtained.

[0211] 3. Enlarge the target component size of each component in the second component set to update the target component size and target component position.

[0212] Size enlargement includes row height enlargement and column width enlargement. Row height enlargement and column width enlargement are similar, so only column width enlargement is used for explanation.

[0213] (1) Enlarging the column width of the target component row height of at least one first element component and at least one subcontainer component in the second component set.

[0214] C1. Use at least one first element component and at least one second element component in the second component set as components to be amplified.

[0215] C2. Determine the column width enlargement range of the component item to be enlarged [0, item['WmaxWidth'] - item['minWidth']]. Among them, item['WmaxWidth'] and item['minWidth'] represent the maximum column width and minimum column width of the component item to be enlarged, respectively.

[0216] C3. Determine the middle column width m *(item['maxWidth'] - item['minWidth']] of [0, item['WmaxWidth'] - item['minWidth']. M∈[ML, MR], where m= (ML+MR) / 2 represents the middle scaling ratio. The initial values ​​of ML and MR are 0 and 1, respectively.

[0217] C4: Determine whether ML=MR is satisfied. In response to ML=MR being satisfied, proceed to C5. In response to ML=MR not being satisfied, proceed to C6.

[0218] C5. Determine m * (item['maxWidth'] - item['minWidth'] as the target column width.

[0219] C6. Check whether m * (item['maxWidth'] - item['minWidth'] satisfies the second layout requirement. In response to satisfying the second layout requirement, enter C7; in response to not satisfying the second layout requirement, enter C8.

[0220] C7. Update the minimum column width magnification using the intermediate size magnification. Return to C3.

[0221] C8. Update the maximum column width magnification using the intermediate size magnification. Return to C3.

[0222] (2) Based on the updated target component size and target component position of the sub-container component, update the target component position and target component size of the second element component corresponding to the sub-container component.

[0223] Among them, the sub-container component can be re-layouted based on the updated target component size and target component position of the sub-container component, and the target component position and target component size of the second element component can be updated. The re-layout process is similar to the above B1-B5 and will not be repeated here.

[0224] Fig. 9 This is a schematic diagram of the updated position association information of the sub-container component and the first element component of this application. Fig. 9 As shown, the container includes first element components 1-3 and sub-container components 4-6.

[0225] Fig.10 This is a schematic diagram of the updated position association information of the sub-container component, the first element component, and the second element component of this application. Fig.10 As shown, sub-container component 4 corresponds to second element components 7 to 12, sub-container component 5 corresponds to second element components 13 to 22, and sub-container component 6 corresponds to second element components 23-25.

[0226] 4. Get the style information of each component in the second component set.

[0227] 3. Front-end layer

[0228] Through the processing of the algorithm layer, position association information is given to each component in the container based on element component configuration information such as component size range and priority, and style information is given to each component, and the container is updated. Fig.11 is another schematic diagram of the container of the present application. Fig.11 As shown, each component is given position association information and style information. The updated container is rendered to the page to be laid out.

[0229] Fig.12 This is a schematic diagram of the structure of the page layout device of this application. Fig.12 As shown, the page layout device 70 includes an acquisition module 71 , a selection module 72 and a layout module 73 .

[0230] The acquisition module 71 is used to acquire a first component set initially configured for the page to be laid out, where the first component set includes a first number of components.

[0231] The selection module 72 is used to select a second number of components that match the screen size of the page to be laid out from the first component set based on the reference component size of each component in the first component set, obtain a second component set, and determine the position association information of each component in the second component set on the page to be laid out, the second number is less than or equal to the first number, and the reference component size belongs to the component size range.

[0232] The layout module 73 is used to perform page layout on the page to be laid out based on the second component set and the position association information.

[0233] For other descriptions of the page layout device 70 , please refer to the previous method embodiment, which will not be repeated here.

[0234] Fig.13 Schematic diagram of the structure of an embodiment of the electronic device of the present application. Fig.13As shown, the electronic device 80 includes a memory 81 and a processor 82, and the processor 82 is used to execute the program instructions stored in the memory 81 to implement the steps in any of the above method embodiments. In a specific implementation scenario, the electronic device 80 may include but is not limited to: a microcomputer, a server, and in addition, the electronic device 80 may also include a carrier device such as a laptop computer and a tablet computer, which is not limited here.

[0235] Specifically, the processor 82 is used to control itself and the memory 81 to implement the steps in any of the above method embodiments. The processor 82 can also be called a CPU (Central Processing Unit). The processor 82 may be an integrated circuit chip with signal processing capabilities. The processor 82 can also be a general-purpose processor, a digital signal processor (Digital Signal Processor, 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 devices, discrete gates or transistor logic devices, discrete hardware components. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor, etc. In addition, the processor 82 can be implemented by an integrated circuit chip.

[0236] See also Fig.14 , Fig.14 The computer-readable storage medium 90 stores program instructions 91, which implement the steps in any of the above method embodiments when executed by a processor.

[0237] In some embodiments, the functions or modules included in the device provided by the embodiments of the present disclosure can be used to execute the method described in the above method embodiments. The specific implementation can refer to the description of the above method embodiments, and for the sake of brevity, it will not be repeated here.

[0238] The above description of various embodiments tends to emphasize the differences between the various embodiments. The same or similar aspects can be referenced to each other, and for the sake of brevity, they will not be repeated herein.

[0239] In the several embodiments provided in the present application, it should be understood that the disclosed methods and devices can be implemented in other ways. For example, the device implementation described above is only schematic. For example, the division of modules or units is only a logical function division. There may be other division methods in actual implementation. For example, units or components can be combined or integrated into another system, or some features can be ignored or not executed. In another image position, the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, and the indirect coupling or communication connection of devices or units can be electrical, mechanical or other forms.

[0240] In addition, each functional unit in each embodiment of the present application can be integrated into a processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of a software functional unit. If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application is essentially or part of the contribution to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including several instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) or a processor (processor) to perform all or part of the steps of each implementation method of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk and other media that can store program code.

Claims

1. A page layout method, characterized in that: include: Acquire a first component set for initial configuration of a page to be laid out, the first component set including a first number of components; Based on the reference component size of each component in the first component set, a second number of components matching the screen size of the page to be laid out are selected from the first component set to obtain a second component set, and position association information of each component in the second component set on the page to be laid out is determined, the second number is less than or equal to the first number, the reference component size of the component is a component size within the component size range of the component, the probability of each component in the first component set being selected is related to at least one of the priority, the component sequence number, and the component type, or the probability of each component in the first component set being selected is equal; Based on the second component set and the position association information, page layout is performed on the page to be laid out.

2. The method according to claim 1, characterized in that The step of selecting a second number of components matching the screen size of the page to be laid out from the first component set based on the reference component size of each component in the first component set to obtain a second component set includes: Based on the reference component size and priority of each component in the first component set, a second number of components matching the screen size are selected from the first component set to obtain the second component set, wherein the component with a higher priority has a greater probability of being selected; And / or, the position association information includes a target component size and a target component position, and based on the reference component size of each component in the first component set, determining the position association information of each component in the second component set on the page to be laid out includes: Using the reference component size of each component in the second component set as the target component size of each component; and The layout position of each component in the second component set on the to-be-layout page of the screen size according to the corresponding reference component size is used as the target component position of each component in the second component set.

3. The method according to claim 2, characterized in that The selecting a second number of the components matching the screen size from the first component set based on the reference component size and priority of each component in the first component set to obtain the second component set includes: Determining a priority range of the first component set based on the priority of each of the components in the first component set; Based on the reference component size of each component in the first component set, determining a target layout priority that meets a first layout requirement from the priority range, wherein the first layout requirement is that components with a priority higher than the target layout priority can be laid out on a to-be-laid-out page of the screen size according to the corresponding reference component size; From the first component set, components whose priorities are higher than the target layout priority are obtained to obtain the second component set.

4. The method according to claim 3, characterized in that The layout position of each component in the second component set is obtained in the process of determining the target layout priority; And / or, determining a target layout priority that meets a first layout requirement from the priority range based on the reference component size of each component in the first component set includes: determining a minimum priority in the priority range that satisfies the first layout requirement; A minimum priority that satisfies the first layout requirement is determined as the target layout priority.

5. The method according to claim 4, characterized in that The determining a minimum priority in the priority range that satisfies the first layout requirement includes: determining a highest priority and a lowest priority in the priority range; determining an intermediate priority level between the highest priority level and the lowest priority level; In response to the highest priority and the lowest priority being equal, taking the middle priority as the minimum priority that satisfies the first layout requirement; In response to the highest priority and the lowest priority being unequal, selecting a candidate component set whose priority is higher than the intermediate priority from the first component set; detecting whether each candidate component in the candidate component set can be laid out on a to-be-laid-out page of the screen size according to the corresponding reference component size; In response to all the candidate components being layoutable, the highest priority is updated to the middle priority; in response to the presence of the candidate components being unlayable, the lowest priority is updated to the middle priority, and the steps of determining the middle priority between the highest priority and the lowest priority and subsequent steps are repeated.

6. The method according to claim 5, characterized in that The reference component size includes a reference row height and a reference column width, the screen size includes a screen column width and a screen row height, and the detecting whether each candidate component in the candidate component set can be laid out on a to-be-laid-out page of the screen size according to the corresponding reference component size includes: Obtaining a candidate position set of the current candidate component in the candidate component set, wherein the candidate position set of the current candidate component includes the candidate positions that are determined based on the layout positions of the current layout-capable component and are not occupied, and the current layout-capable component is the candidate component that has been determined to be currently layout-capable; Searching whether there is a candidate position satisfying the insertion condition of the current candidate component in the candidate position set of the current candidate component, the insertion condition of the current candidate component including that the sum of the column coordinates of the candidate position, the reference column width of the current candidate component, and the column spacing is less than the screen column width, and the sum of the row coordinates of the candidate position, the reference row height of the current candidate component, and the row spacing is less than the screen row height; In response to the existence of a candidate position satisfying the insertion condition, determining that the current candidate component can be placed, and determining that the candidate position satisfying the insertion condition is occupied as a place where the current candidate component can be placed; in response to the current candidate component being the last candidate component in the candidate component set, determining that each candidate component can be placed; in response to the current candidate component not being the last candidate component, updating the current candidate component with the next candidate component, and repeating the aforementioned acquisition and search steps; In response to the fact that there is no candidate position of the candidate component that meets the insertion condition, it is determined that the candidate component cannot be placed.

7. The method according to claim 6, characterized in that The layoutable position includes layoutable row coordinates and layoutable column coordinates, and the insertion condition of the current candidate component also includes that the column coordinates of the candidate position are greater than the layoutable column coordinates of the current layoutable component in the row to which the candidate position belongs, and the row coordinates of the candidate position are greater than the layoutable row coordinates of the current layoutable component in the column to which the candidate position belongs; And / or, the candidate component set is a component sequence, and the next candidate component is the next candidate component adjacent to the current candidate component in the component sequence.

8. The method according to claim 6, characterized in that The searching whether there is a candidate position satisfying the insertion condition of the current candidate component in the candidate position set of the current candidate component includes: Obtaining a current candidate position from the candidate position set using a heap data structure; Determining whether the current candidate position satisfies the insertion condition; In response to the current candidate position satisfying the insertion condition, determining that there is a candidate position satisfying the insertion condition; In response to the current candidate position not satisfying the insertion condition, the steps of obtaining the current candidate position and subsequent steps are repeatedly executed until the current candidate position is the last candidate position in the candidate position set.

9. The method according to claim 6, characterized in that The step of obtaining a candidate position set of the current candidate component in the candidate component set includes: Move the candidate position occupied by the layout position of the last candidate component out of the candidate position set of the last candidate component; and Determine at least one newly added candidate position based on the previously mentioned candidate component's layoutable position, where the newly added candidate position is on the same horizontal line as the previously mentioned candidate component's layoutable position; The newly added candidate position is added to the candidate position set of the previous candidate component to obtain the candidate position set of the current candidate component.

10. The method according to claim 9, characterized in that The at least one newly added candidate position includes a first candidate position and a second candidate position, and the determining of the at least one newly added candidate position based on the layout position of the previous candidate component includes: Determine the first candidate position that is located in the row to which the current layout position of the candidate component belongs and is located to the right of the current layout position of the candidate component; and Determine the second candidate position that is located in the column to which the current layout position of the candidate component belongs and is located below the current layout position of the candidate component.

11. The method according to claim 10, characterized in that The layoutable position includes layoutable row coordinates and layoutable column coordinates, and the determining of the first candidate position that is located in the row to which the layoutable position of the current candidate component belongs and is located to the right of the layoutable position of the current candidate component includes: Taking the layout row coordinates of the last candidate component as the row coordinates of the first candidate position, and determining the sum of the layout column coordinates of the last candidate component, the reference column width of the last candidate component, and the column spacing as the column coordinates of the first candidate position; The determining the second candidate position that is located in the column to which the current layout position of the candidate component belongs and is located below the current layout position of the candidate component includes: The sum of the layout row coordinates of the last candidate component, the reference row height and the row spacing of the last candidate component is determined as the row coordinates of the second candidate position, and the column coordinates of the last candidate component are used as the column coordinates of the second candidate position.

12. The method according to claim 1, characterized in that The reference component size is the smallest size in the component size range; And / or, the position association information includes the target component position and the target component size, and before performing page layout on the page to be laid out based on the second component set and the position association information, the following steps are included: Determine at least one of the components in the second component set that needs to be amplified as a component to be amplified; The size of the component to be enlarged is enlarged to update the target component size of the component to be enlarged.

13. The method according to claim 12, characterized in that The step of enlarging the size of the component to be enlarged to update the target component size of the component to be enlarged includes: Determine a target size enlargement amount of each of the components to be enlarged that meets a second layout requirement, wherein the second layout requirement is that after each of the components to be enlarged is enlarged according to the corresponding target size enlargement amount, each of the components in the second component set can be laid out on a page to be laid out of the screen size; The target component size of each component to be enlarged is enlarged according to the target size enlargement amount of each component to be enlarged, so as to obtain the updated target component size of each component to be enlarged.

14. The method according to claim 13, characterized in that The step of determining a target size enlargement amount of each component to be enlarged that meets the second layout requirement includes: Obtaining the amplification range of each component to be amplified; Determine an intermediate size enlargement between the maximum size enlargement and the minimum size enlargement of the enlargement range; Determine whether the maximum size enlargement amount is equal to the minimum size enlargement amount; In response to the maximum size enlargement being equal to the minimum size enlargement, determining the intermediate size enlargement to be the target size enlargement; In response to the maximum size enlargement amount not being equal to the minimum size enlargement amount, detecting whether the intermediate size enlargement amount of each of the components to be enlarged meets the second layout requirement; in response to meeting the second layout requirement, updating the minimum size enlargement amount using the intermediate size enlargement amount; The steps of determining the intermediate size magnification amount and subsequent steps are repeated.

15. The method according to claim 14, characterized in that The intermediate size enlargement amount determined each time for the component to be enlarged satisfies: the enlargement result according to the intermediate size enlargement amount belongs to the component size range of the component to be enlarged; And / or, the detecting whether the amount of enlargement of the intermediate size of each of the components to be enlarged meets the second layout requirement includes: Enlarging the components to be enlarged according to the intermediate size enlargement amount of each component to be enlarged, to obtain the target component size of each component to be enlarged after enlargement; Detecting whether each of the components in the second component set can be laid out on the to-be-laid-out page of the screen size according to the enlarged target component size; In response to the fact that each of the components can be laid out, it is determined that the amount of enlargement of the intermediate size of each of the components to be enlarged meets the second layout requirement.

16. The method according to claim 12, characterized in that The second component set includes a third number of first element components, a fourth number of second element components, and a fifth number of sub-container components corresponding to the fourth number of second element components; and determining at least one component in the second component set to be amplified as the component to be amplified includes: Determine at least one of the sub-container components and / or at least one of the first element components in the second component set that need to be enlarged as the component to be enlarged; The step of enlarging the size of the component to be enlarged to update the target component size of the component to be enlarged includes: Enlarging the size of at least one of the sub-container components and / or at least one of the first element components to be enlarged; Based on the target component position and the updated target component size of the sub-container component to be enlarged in the component to be enlarged, the target component size and the target component position corresponding to the second element component are updated.

17. The method according to claim 1, characterized in that The first component set includes a sixth number of first element components, a seventh number of second element components, and an eighth number of sub-container components corresponding to the seventh number of second element components, and the sum of the sixth number, the seventh number, and the eighth number is equal to the first number; The selecting, based on the reference component size of each component in the first component set, a second number of components matching the screen size of the page to be laid out from the first component set to obtain a second component set, and determining position association information of each component in the second component set on the page to be laid out, includes: Based on the reference component size, a third number of the first element components, a fourth number of the second element components, and a fifth number of the sub-container components corresponding to the fourth number of the second element components are selected from the first component set to obtain the second component set; the sum of the third number, the fourth number, and the fifth number is equal to the second number; Based on the reference component size, determining position association information of a third number of the first element components and a fourth number of the second element components; Determine, based on the position association information of a fourth number of the second element components, the position association information of a fifth number of the sub-container components; The performing page layout on the page to be laid out based on the second component set and the position association information includes: Based on a third number of the first element components, a fourth number of the second element components, a fifth number of the sub-container components, and the position association information, page layout is performed on the page to be laid out.

18. The method according to claim 1, characterized in that The obtaining of the first component set for the initial configuration of the page to be laid out includes: Obtaining a first number of page elements of the page to be laid out; Based on the correlation between each of the page elements, a container is constructed for the page to be laid out, the container comprising a sixth number of first element components, a seventh number of second element components, and an eighth number of sub-container components corresponding to the seventh number of the second element components, the sum of the sixth number, the seventh number, and the eighth number is equal to the first number, one first element component and one second element component represent one page element, and the correlation between different second element components corresponding to the same sub-container component is higher than a correlation threshold; And / or, before selecting a second number of the components matching the screen size of the page to be laid out from the first component set based on the reference component size of each component in the first component set to obtain a second component set, and determining position association information of each component in the second component set on the page to be laid out, the method further comprises: Display the screen size input interface to the user; The screen size input by the user in the screen size input interface is received.

19. An electronic device, characterized in that: The device comprises a memory and a processor, wherein the processor is used to execute program instructions stored in the memory to implement the method according to any one of claims 1 to 18.

20. A computer-readable storage medium having program instructions stored thereon, characterized in that: When the program instructions are executed by a processor, the method according to any one of claims 1 to 18 is implemented.

Images