A multi-line elastic layout method, container and computer-readable medium

Abstract

The present application provides a multi-row elastic layout method, container and computer-readable medium, the method comprising: calculating the display width of the data to be displayed and obtaining the maximum width of each display row in a plurality of display rows, and obtaining the target width according to the display width and the occupied width of the target row. If the target width and the display width are both greater than the maximum width, the data to be displayed is determined to be set in the target row or the next row of the target row according to the remaining width, and the remaining width is determined according to the occupied width and the maximum width. When it is determined that the data to be displayed cannot be fully displayed when set in the target row, it can be determined whether the data to be displayed is displayed in the target row or in the next row of the target row according to the remaining width calculated by the maximum width and the occupied width of the target row, thereby realizing which row the data to be displayed is displayed in, and finally controlling how many rows are used to display all the data to be displayed, and realizing flexible customization of multi-row elastic layout.

Description

Technical Field

[0001] The present invention relates to the field of computers, and in particular to a multi-line elastic layout method, a container and a computer-readable medium. Background Art

[0002] At present, with the development of computer technology, it is possible to realize flexible display of multiple data based on the display method of elastic layout. Elastic layout is a layout method based on the box model. It adjusts the size, position and display order of the container and data so that the page can maintain good visual effects on different devices and screen sizes.

[0003] However, the current flexible layout is laid out from left to right on the page. One row may display multiple data. If one row cannot display all the data, a new row will be started. However, when rendering and displaying multiple data, it is impossible to know for sure which row the data is displayed in and how many rows the data needs to be displayed. Summary of the invention

[0004] In view of this, the purpose of the present application is to provide a multi-row flexible layout method, container and computer-readable medium, which can determine in which row the data is displayed and control how many rows the data is displayed.

[0005] The present application provides a multi-line elastic layout method, the method comprising: Calculate the display width of the data to be displayed and obtain the maximum width of each display row in multiple display rows; Obtaining a target width according to the display width and an occupied width of a target row among the multiple display rows; If the target width and the display width are both greater than the maximum width, the to-be-displayed data is determined to be set in the target row or a row next to the target row according to the remaining width of the target row, and the remaining width is determined according to the occupied width and the maximum width.

[0006] As a possible implementation manner, the remaining width is greater than or equal to the target threshold, and the data to be displayed includes a first portion of data and a second portion of data; The step of determining that the to-be-displayed data is set in the target row or in the next row of the target row according to the remaining width of the target row being greater than or equal to the target threshold comprises: According to the remaining width of the target row, it is determined that the first part of the data to be displayed is set in the target row, the second part of the data to be displayed is not displayed, and the width of the first part of the data is the remaining width.

[0007] As a possible implementation manner, the remaining width is smaller than a target threshold, and the data to be displayed includes a first portion of data and a second portion of data; The step of determining, according to the remaining width of the target row, that the data to be displayed is set in the target row or in a row next to the target row comprises: According to the remaining width of the target row being less than the target threshold, it is determined that the first part of the data to be displayed is set in the row below the target row, the second part of the data to be displayed is not displayed, and the width of the first part of the data is the maximum width.

[0008] As a possible implementation mode, the data to be displayed includes text data and picture data; The calculating the display width of the data to be displayed includes: Calculate the text display width of the text data according to the size of the characters in the text data; Calculate the image display width of the image data according to the aspect ratio and height of the image data; The display width of the data to be displayed is calculated according to the text display width, the image display width, the spacing width between the text display width and the image display width, and the margin width.

[0009] As a possible implementation, the method further includes: Get the occupied width of the target row among multiple display rows; The obtaining of the target width according to the display width and the occupied width of the target row among the multiple display rows comprises: The sum of the display width and the occupied width is determined as the target width.

[0010] As a possible implementation manner, obtaining the occupied width of a target row among the multiple display rows includes: Obtaining an initial occupied width of a target row among multiple display rows and a display width of the laid out data in the target row; The occupied width is calculated according to the initial occupied width and the display width of the laid-out data.

[0011] As a possible implementation, the method further includes: If the target width is smaller than the maximum width, the data to be displayed is set in the target row.

[0012] As a possible implementation, the method further includes: If the target width is greater than the maximum width and the display width is less than or equal to the maximum width, the data to be displayed is set in a row next to the target row.

[0013] The present application provides a multi-row elastic layout container, the container comprising: a row rendering component and a column rendering component; The row rendering component and the column rendering component are used to render and display the row layout and column layout of the data to be displayed obtained in any one of the above items.

[0014] The present application provides a computer-readable medium, characterized in that it includes instructions, which, when executed on a computer, enable the computer to execute the method described above.

[0015] The present application provides a multi-row elastic layout method, the method comprising: calculating the display width of the data to be displayed and obtaining the maximum width of each display row in a plurality of display rows, obtaining the target width according to the display width and the occupied width of the target row in the plurality of display rows, that is, the display width calculated for the data to be displayed can be combined with the occupied width of the target row to obtain the target width for the data to be displayed when the data to be displayed is rendered in the target row for display. If the target width and the display width are both greater than the maximum width, it means that the data to be displayed may not be fully displayed when the target row is displayed, then the data to be displayed is determined to be set in the target row or in the next row of the target row according to the remaining width of the target row, and the remaining width is determined according to the occupied width and the maximum width, that is, when it is determined that the data to be displayed cannot be fully displayed when set in the target row for display, the data to be displayed can be determined to be displayed in the target row or in the next row of the target row according to the remaining width calculated by the maximum width and the occupied width of the target row, thereby realizing which row the data to be displayed is displayed in. It can be seen that the present application calculates the display width of the data to be displayed, the maximum width of the display row, the occupied width of the target row and the target width, and compares the target width and the maximum width as well as the display width and the maximum width respectively. When the target width and the display width are both greater than the maximum width, it is determined whether the data to be displayed is placed in the target row or the next row of the target row according to the remaining width, thereby determining in which row the data to be displayed is displayed, and finally controlling how many rows are used to display all the data to be displayed, thereby realizing flexible customization of multi-row elastic layout. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] The above and other features, advantages and aspects of the embodiments of the present application will become more apparent with reference to the following detailed description in conjunction with the accompanying drawings. Throughout the accompanying drawings, the same or similar reference numerals represent the same or similar elements. It should be understood that the drawings are schematic and the originals and elements are not necessarily drawn to scale.

[0017] Figure 1 A schematic diagram of a flow chart of a multi-row elastic layout display method provided in an embodiment of the present application is shown; Figure 2A schematic diagram of a multi-row elastic layout process provided by an embodiment of the present application is shown; Figure 3 A schematic diagram of the structure of a multi-row elastic layout container provided in an embodiment of the present application is shown. DETAILED DESCRIPTION

[0018] The embodiments of the present application will be described in more detail below with reference to the accompanying drawings. Although certain embodiments of the present application are shown in the accompanying drawings, it should be understood that the present application can be implemented in various forms and should not be construed as being limited to the embodiments described herein. Instead, these embodiments are provided to provide a more thorough and complete understanding of the present application. It should be understood that the drawings and embodiments of the present application are only for exemplary purposes and are not intended to limit the scope of protection of the present application.

[0019] The term "including" and its variations used herein are open inclusions, i.e., "including but not limited to". The term "based on" means "based at least in part on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". The relevant definitions of other terms will be given in the following description.

[0020] It should be noted that the concepts such as "first" and "second" mentioned in this application are only used to distinguish different devices, modules or units, and are not used to limit the order or interdependence of the functions performed by these devices, modules or units.

[0021] It should be noted that the modifications of "one" and "plurality" mentioned in the present application are illustrative rather than restrictive, and those skilled in the art should understand that unless otherwise clearly indicated in the context, it should be understood as "one or more".

[0022] At present, some data needs to be displayed flexibly, from left to right. The width of each data display is not fixed, but is determined by the content of the data. If the current row cannot display it, a new row will be displayed. Elastic layout refers to the ability to optimally fill the available display space on any display device by adjusting the width and height of the data. The elastic container expands the data to fill the available space, or shrinks it to avoid overflow. In short, elastic layout is a layout method that is designed to be adaptively displayed on devices with different resolutions.

[0023] However, the current Flex component used for elastic layout can easily realize elastic layout from left to right, but it is not flexible enough to use. It is not possible to know for sure which row the data is displayed in and how many rows the data needs to be displayed. In addition, it cannot handle very long data well. Due to these shortcomings, it cannot meet the data display needs.

[0024] Based on this, the present application provides a multi-row elastic layout method, the method comprising: calculating the display width of the data to be displayed and obtaining the maximum width of each display row in multiple display rows, obtaining the target width according to the display width and the occupied width of the target row in multiple display rows, that is, the display width calculated for the data to be displayed can be combined with the occupied width of the target row to obtain the target width for data display in the target row when the data to be displayed is rendered in the target row for display. If the target width and the display width are both greater than the maximum width, it means that the data to be displayed may not be fully displayed when the target row is displaying data, then the data to be displayed is determined to be set in the target row or the next row of the target row according to the remaining width of the target row, and the remaining width is determined according to the occupied width and the maximum width, that is, when it is determined that the data to be displayed cannot be fully displayed when set in the target row, the data to be displayed can be determined to be displayed in the target row or in the next row of the target row according to the remaining width calculated by the maximum width and the occupied width of the target row, thereby realizing which row the data to be displayed is displayed in. It can be seen that the present application calculates the display width of the data to be displayed, the maximum width of the display row, the occupied width of the target row and the target width, and compares the target width and the maximum width as well as the display width and the maximum width respectively. When the target width and the display width are both greater than the maximum width, it is determined whether the data to be displayed is placed in the target row or the next row of the target row according to the remaining width, thereby determining in which row the data to be displayed is displayed, and finally controlling how many rows are used to display all the data to be displayed, thereby realizing flexible customization of multi-row elastic layout.

[0025] In order to better understand the technical solution and technical effects of the present application, specific embodiments will be described in detail below with reference to the accompanying drawings.

[0026] See also Figure 1 , which is a flow chart of a multi-row elastic layout display method provided in an embodiment of the present application.

[0027] The multi-line elastic layout display method provided in the embodiment of the present application includes the following steps: S101, calculating the display width of the data to be displayed and obtaining the maximum width of each display row in a plurality of display rows.

[0028] In an embodiment of the present application, when performing elastic layout display, multiple data to be displayed that need to be rendered and displayed can be obtained, and the data to be displayed can be represented by item. The data to be displayed can be displayed on the display screen of the display device. Specifically, multiple display rows can be used to display the multiple data to be displayed.

[0029] Considering that the flexible layout display is to adapt to different display devices and different display screen sizes, therefore, the maximum width of each display line in the multiple display lines can be obtained when displaying using any display device and display screen. The maximum width can be represented by lineWidth.

[0030] In an embodiment of the present application, in order to determine whether the data to be displayed is displayed in a certain row, the display width of the data to be displayed may be calculated.

[0031] As a possible implementation manner, the data to be displayed may include text data and picture data, so the text display width of the text data and the picture display width of the picture data may be calculated respectively, and then the display width of the data to be displayed may be calculated.

[0032] Specifically, the text display width of the text data can be calculated according to the size of the characters in the text data. For example, the system function measureText can be used to calculate the text display width according to the size of the characters. The image display width of the image data can be calculated according to the aspect ratio and height of the image data. Considering that there is a spacing between the text data and the image data when they are displayed. And when the data to be displayed is displayed, there is also a margin between it and the display edge of the display screen to achieve a beautiful display of the data to be displayed. Therefore, the display width of the data to be displayed can be calculated according to the text display width, the image display width, the spacing width between the text display width and the image display width, and the margin width between the data to be displayed and the display edge. For example, the display width can be calculated by adding the text display width, the image display width, the spacing width and the margin width. Among them, the spacing width between the text display width and the image display width can be represented by margin, the margin width between the data to be displayed and the display edge can be represented by padding, and the display width of the data to be displayed can be represented by itemWidth.

[0033] S102: Obtain a target width according to the display width and the occupied width of a target row among a plurality of display rows.

[0034] In an embodiment of the present application, when performing elastic layout display, it is necessary to display multiple data to be displayed in multiple display rows, and the multiple display rows include a target row. The same display row can display multiple data to be displayed. Therefore, when controlling whether the target row displays the data to be displayed, it can be determined whether the target row already has layout data. The layout data refers to the data to be displayed that has been determined to be displayed in the target row. When it is determined that the target row already has layout data, the width occupied by the layout data can be obtained, that is, the occupied width of the target row can be obtained, so as to assist in whether to continue to set the data to be displayed in the target row for display. Among them, the occupied width of the target row can be represented by originX.

[0035] Considering that if the data to be displayed is displayed in the target row, after obtaining the occupied width of the target row among multiple display rows and the display width of the data to be displayed, the target width can be obtained according to the display width and the occupied width of the target row among multiple display rows. That is, the display width calculated for the data to be displayed can be combined with the occupied width of the target row to obtain the target width for displaying the data if the data to be displayed is rendered in the target row for display. For example, the sum of the display width and the occupied width can be determined as the target width.

[0036] Specifically, if the target width is to be calculated, the occupied width of the target row that has been occupied must first be calculated, and the initial occupied width of the target row and the display width of the laid out data in the target row can be obtained, and then the occupied width is calculated based on the initial occupied width of the target row and the display width of the laid out data displayed in the target row. If there is more than one laid out data displayed in the target row, the occupied width in the target row also includes the data spacing width between at least two laid out data.

[0037] As an example, the occupied width may be expressed using the following formula.

[0038] originX = originX0 + itemWidth×N+ space×(N-1).

[0039] The initial occupied width can be represented by originX0, the data spacing width can be represented by space, and N is the number of laid out data. The initial occupied width of the target row can be 0, that is, when the target row initially has no laid out data, the occupied width is 0, and accordingly, the initial value of originX can be 0, that is, the initial value of the occupied width is also 0.

[0040] In practical applications, the occupied width is updated after a target row among multiple display rows determines to display any data to be displayed, so as to calculate the target width of the next data to be displayed by using the occupied width.

[0041] S103: If the target width and the display width are both greater than the maximum width, the data to be displayed is determined to be set in the target row or the row next to the target row according to the remaining width of the target row, and the remaining width is determined according to the occupied width and the maximum width.

[0042] In an embodiment of the present application, after the display width and the target width are calculated, the display width and the target width can be compared with the maximum width of the target row respectively. If the target width is greater than the maximum width, it means that if the data to be displayed is set in the target row, the data to be displayed may not be fully displayed when the target row displays the data. If the display width is greater than the maximum width, it means that the data to be displayed is overlong data, and the same display row cannot display all the data to be displayed. At this time, the remaining width of the target row can be calculated, and then the data to be displayed can be set in the target row or the next row of the target row according to the remaining width of the target row. That is, the data to be displayed is determined to be displayed in the target row or the next row of the target row according to the value of the remaining width, thereby determining the display row of the overlong data, and then controlling the display rows of all the data to be displayed.

[0043] Specifically, the remaining width is calculated according to the occupied width and the maximum width. For example, the remaining width is equal to the difference between the maximum width and the occupied width.

[0044] When the remaining width is used to determine the display row of the data to be displayed, it can be determined whether the data to be displayed is displayed in the target row or the next row of the target row according to the size of the remaining width. Considering that the data to be displayed is super long data, no matter it is displayed in the target row or in the next row of the target row, the data to be displayed can only display part of the data. That is to say, the data to be displayed includes a first part of the data that can be displayed and a second part of the data that is not displayed. The details are introduced below.

[0045] As a possible implementation, when the remaining width is greater than or equal to the target threshold, it means that the remaining width of the target row is large, that is, the remaining space of the target row is large. Although the length of the data to be displayed is long, it can also be displayed in the target row. At this time, the first part of the data to be displayed is determined to be set in the target row according to the remaining width of the target row, and the second part of the data to be displayed is not displayed. The width of the first part of the data is the remaining width of the target row, that is, the target row only displays the first part of the data to be displayed that is the remaining width, and the second part of the data to be displayed except the remaining width is not displayed in the target row. In other words, the data to be displayed is truncated with a part of the data in the target row for display, thereby determining the display position of the overlong data.

[0046] As another possible implementation, when the remaining width is less than the target threshold, it means that the remaining width of the target row is less, that is, the remaining space of the target row is less, and the length of the data to be displayed is longer, so the target row cannot display most of the data to be displayed. At this time, the data to be displayed can be set to the next row of the target row for display. Since the display width of the data to be displayed is greater than the maximum width, the next row of the target row cannot display all the data to be displayed. At this time, according to the remaining width of the target row being less than the target threshold, it is determined that the first part of the data to be displayed is set to the next row of the target row, and the second part of the data to be displayed is not displayed. The width of the first part of the data is the maximum width, that is, the next row of the target row only displays the first part of the data with the maximum width in the data to be displayed, and the second part of the data to be displayed except the maximum width is not displayed in the next row of the target row. In other words, the data to be displayed is truncated with a part of the data in the next row of the target row for display, thereby determining the display position of the overlong data.

[0047] In practical applications, the target threshold can be determined according to actual conditions, for example, the target threshold is 2 / 3 or 3 / 4 of the maximum width.

[0048] In an embodiment of the present application, when the target width is smaller than the maximum width, it means that the data to be displayed is set in the target row for display, and the target row has enough space to display the data to be displayed, then the data to be displayed is set in the target row for display.

[0049] In an embodiment of the present application, when the target width is greater than the maximum width, it means that when the data to be displayed is set in the target row for display, the target row does not have enough space to display the data to be displayed. Then the display width and the maximum width can be compared. If the display width is less than or equal to the maximum width, it means that the data to be displayed can be displayed in a complete display row. At this time, if the target row does not have enough remaining space, the data to be displayed will be set in the next row of the target row for display.

[0050] In the embodiment of the present application, the display position of the data to be displayed can be determined according to the display width of the data to be displayed, the maximum width of the display row, the occupied width of the target row, and the target width of the target row. Accordingly, the display positions of multiple data to be displayed can be determined according to the above content, thereby obtaining a two-dimensional array, and each one-dimensional data item of the two-dimensional array is the data to be displayed for each display row. Subsequent rendering can be performed based on the two-dimensional array.

[0051] refer to Figure 2As shown, it is a flowchart of a multi-row elastic layout provided by an embodiment of the present application. First, confirm whether all the data to be displayed have been traversed. If the traversal is completed, return a two-dimensional array. If all the data to be displayed have not been traversed, calculate the display width of each data to be displayed, and detect whether the target width is less than the maximum width. If it is less than, set the data to be displayed in the target row. If it is greater than, continue to detect whether the display width of the data to be displayed is less than the maximum width. If it is less than, set the data to be displayed in the next row of the target row. If it is greater than, continue to detect whether the remaining width is greater than or equal to the target threshold. If it is greater than or equal to, set the data to be displayed in the target row. If it is less than, set the data to be displayed in the next row of the target row.

[0052] It can be seen that the multi-line elastic layout method provided in the embodiment of the present application can accurately control the display width and display line of each data to be displayed, especially can determine the display position of super-long data, and can control the number of rendering display lines during rendering, thereby realizing a flexible and customizable elastic layout.

[0053] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the method and computer program product according to various embodiments of the present application. In this regard, each box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some implementations as replacements, the functions marked in the box can also occur in a sequence different from that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flow chart, and the combination of the boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0054] In some embodiments, the servers may communicate using any currently known or future developed network protocol, such as HTTP (HyperText Transfer Protocol), and may be interconnected with any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network ("LAN"), a wide area network ("WAN"), an internet (e.g., the Internet), and a peer-to-peer network (e.g., an ad hoc peer-to-peer network), as well as any currently known or future developed network.

[0055] Although operations are depicted in a particular order, this should not be understood as requiring that the operations be performed in the particular order shown or in a sequential order.Multitasking and parallel processing may be advantageous under certain circumstances.

[0056] It should be understood that the various steps described in the method implementation of the present application can be performed in different orders and / or performed in parallel. In addition, the method implementation may include additional steps and / or omit the steps shown. The scope of the present application is not limited in this respect.

[0057] Computer program code for performing the operations of the present application may be written in one or more programming languages ​​or a combination thereof, including, but not limited to, object-oriented programming languages, such as Java, Smalltalk, C++, and conventional procedural programming languages, such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer via any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0058] Based on the multi-line elastic layout display method provided in the above embodiment, the embodiment of the present application further provides a multi-line elastic layout display container, and its working principle is described in detail below with reference to the accompanying drawings.

[0059] See also Figure 3 , which is a structural schematic diagram of a multi-row elastic layout display container provided in an embodiment of the present application.

[0060] The multi-row flexible layout display container 300 provided in this embodiment includes: a row rendering component 310 and a column rendering component 320 .

[0061] The row rendering component 310 and the column rendering component 320 can render and display the row layout and column layout of the data to be displayed.

[0062] In some embodiments, multiple data to be displayed and their display positions can form a two-dimensional array. When rendering, the outermost layer adopts a column layout, traverses the two-dimensional array, obtains the data of each row of the two-dimensional array, that is, a one-dimensional array, and displays each row of data using a row layout, traverses the one-dimensional array, and obtains each data to be displayed in this row for rendering and drawing.

[0063] The components involved in the embodiments described in this application may be implemented by software or hardware, wherein the name of a component does not, in some cases, constitute a limitation on the component itself.

[0064] The names of the messages or information exchanged between multiple components in the embodiments of the present application are only used for illustrative purposes and are not used to limit the scope of these messages or information.

[0065] The functions described above herein may be performed at least in part by one or more hardware logic components. For example, without limitation, exemplary types of hardware logic components that may be used include: field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips (SOCs), complex programmable logic devices (CPLDs), and the like.

[0066] Based on the multi-row elastic layout method provided in the above embodiment, the embodiment of the present application further provides a multi-row elastic layout device, the multi-row elastic layout device comprising: The processor and the memory may be one or more processors. In some embodiments of the present application, the processor and the memory may be connected via a bus or other means.

[0067] The memory may include a read-only memory and a random access memory, and provides instructions and data to the processor. A portion of the memory may also include an NVRAM. The memory stores an operating system and operating instructions, executable modules or data structures, or a subset thereof, or an extended set thereof, wherein the operating instructions may include various operating instructions for implementing various operations. The operating system may include various system programs for implementing various basic services and processing hardware-based tasks.

[0068] The processor controls the operation of the terminal device and may also be referred to as a CPU.

[0069] The method disclosed in the above embodiment of the present application can be applied to a processor or implemented by a processor. The processor can be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method can be completed by an integrated logic circuit of hardware in the processor or an instruction in the form of software. The above processor can be a general-purpose processor, DSP, ASIC, FPGA or other programmable logic device, discrete gate or transistor logic device, discrete hardware component. The methods, steps and logic block diagrams disclosed in the embodiments of the present application can be implemented or executed. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor, etc. The steps of the method disclosed in the embodiment of the present application can be directly embodied as a hardware decoding processor to perform, or the hardware and software modules in the decoding processor can be combined to perform. The software module can be located in a mature storage medium in the field such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory or an electrically erasable programmable memory, a register, etc. The storage medium is located in the memory, and the processor reads the information in the memory and completes the steps of the above method in combination with its hardware.

[0070] The embodiment of the present application also provides a computer-readable medium for storing program code, where the program code is used to execute any one of the methods of the aforementioned embodiments.

[0071] In the context of the present application, a computer-readable medium may be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, device, or equipment. A computer-readable medium may be a computer-readable signal medium or a computer-readable storage medium. A computer-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or device, or any suitable combination of the foregoing. A more specific example of a computer-readable storage medium may include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0072] It should be noted that the computer-readable medium mentioned above in the present application may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present application, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, device or device. In the present application, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries a computer-readable program code. This propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer readable signal media may also be any computer readable medium other than computer readable storage media, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer readable medium may be transmitted using any appropriate medium, including but not limited to: wires, optical cables, RF (radio frequency), etc., or any suitable combination of the above.

[0073] The computer-readable medium may be included in the electronic device, or may exist independently without being incorporated into the electronic device.

[0074] The embodiment of the present application further provides a computer program product. When the computer program product is run on a terminal device, the terminal device executes any one of the implementation methods of the aforementioned embodiments.

[0075] In particular, according to an embodiment of the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present application includes a computer program product, which includes a computer program carried on a non-transitory computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network via a communication device, or installed from a storage device, or installed from a ROM. When the computer program is executed by a processing device, the above-mentioned functions defined in the method of the embodiment of the present application are executed.

[0076] Although the subject matter has been described in language specific to structural features and / or methodological logical actions, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or actions described above. On the contrary, the specific features and actions described above are merely example forms of implementing the claims.

[0077] Although several specific implementation details are included in the above discussion, these should not be interpreted as limiting the scope of the present application. Certain features described in the context of a separate embodiment can also be implemented in a single embodiment in combination. On the contrary, the various features described in the context of a single embodiment can also be implemented in multiple embodiments individually or in any suitable sub-combination.

[0078] The above description is only a preferred embodiment of the present application and an explanation of the technical principles used. Those skilled in the art should understand that the scope of disclosure involved in the present application is not limited to the technical solution formed by a specific combination of the above technical features, but should also cover other technical solutions formed by any combination of the above technical features or their equivalent features without departing from the above disclosed concept. For example, the above features are replaced with the technical features with similar functions disclosed in this application (but not limited to) by each other to form a technical solution.

Claims

1. A multi-line elastic layout method, characterized in that: The method comprises: Calculate the display width of the data to be displayed and obtain the maximum width of each display row in multiple display rows; Obtaining a target width according to the display width and an occupied width of a target row among the multiple display rows; If the target width and the display width are both greater than the maximum width, the to-be-displayed data is determined to be set in the target row or a row next to the target row according to the remaining width of the target row, and the remaining width is determined according to the occupied width and the maximum width.

2. The method according to claim 1, characterized in that: The remaining width is greater than or equal to the target threshold, and the data to be displayed includes the first part of data and the second part of data; The step of determining that the to-be-displayed data is set in the target row or in the next row of the target row according to the remaining width of the target row being greater than or equal to the target threshold comprises: According to the remaining width of the target row, it is determined that the first part of the data to be displayed is set in the target row, the second part of the data to be displayed is not displayed, and the width of the first part of the data is the remaining width.

3. The method according to claim 1, characterized in that The remaining width is smaller than the target threshold, and the data to be displayed includes the first part of data and the second part of data; The step of determining, according to the remaining width of the target row, that the data to be displayed is set in the target row or in a row next to the target row comprises: According to the remaining width of the target row being less than the target threshold, it is determined that the first part of the data to be displayed is set in the row below the target row, the second part of the data to be displayed is not displayed, and the width of the first part of the data is the maximum width.

4. The method according to claim 1, characterized in that: The data to be displayed includes text data and picture data; The calculating the display width of the data to be displayed includes: Calculate the text display width of the text data according to the size of the characters in the text data; Calculate the image display width of the image data according to the aspect ratio and height of the image data; The display width of the data to be displayed is calculated according to the text display width, the image display width, the spacing width between the text display width and the image display width, and the margin width.

5. The method according to claim 1, characterized in that: The method further comprises: Get the occupied width of the target row among multiple display rows; The obtaining of the target width according to the display width and the occupied width of the target row among the multiple display rows comprises: The sum of the display width and the occupied width is determined as the target width.

6. The method according to claim 5, characterized in that The obtaining of the occupied width of the target row among the multiple display rows includes: Obtaining an initial occupied width of a target row among multiple display rows and a display width of the laid out data in the target row; The occupied width is calculated according to the initial occupied width and the display width of the laid-out data.

7. The method according to any one of claims 1 to 6, characterized in that: The method further comprises: If the target width is smaller than the maximum width, the data to be displayed is set in the target row.

8. The method according to any one of claims 1 to 6, characterized in that: The method further comprises: If the target width is greater than the maximum width and the display width is less than or equal to the maximum width, the data to be displayed is set in a row next to the target row.

9. A multi-line elastic layout container, characterized in that: The container includes: a row rendering component and a column rendering component; The row rendering component and the column rendering component are used to render and display the row layout and column layout of the data to be displayed obtained as described in any one of claims 1-8.

10. A computer-readable medium, characterized in that The method comprises instructions which, when executed on a computer, cause the computer to execute the method according to any one of claims 1 to 8.

Images