Method and apparatus for adjusting cells in design region, and electronic device

By displaying cell dividing lines within cells and determining positions based on the layout after splitting, the problem of inflexible cell adjustment in the UI interface is solved, flexible splitting and merging of cells is achieved, and the flexibility and efficiency of UI interface design are improved.

WO2025148916A9PCT designated stage Publication Date: 2025-09-25HANGZHOU HIKROBOT TECH CO LTD
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
PCT/CN2025/071218
Authority / Receiving Office
WO · WO
Patent Type
Applications
Current Assignee / Owner
Priority Date
2024-01-12
Filing Date
2025-01-08
Publication Date
2025-09-25

AI Technical Summary

Technical Problem

Designers cannot flexibly adjust cells in the UI interface, which limits the UI interface design process.

Method used

Provided are a method and apparatus for displaying cell dividing lines within cells by receiving adjustment instructions, thereby achieving flexible splitting and merging of cells, and determining the position of the dividing lines according to the cell layout after splitting to maintain the neatness of the cell layout.

Benefits of technology

Flexible adjustment of cells is achieved to ensure neat cell layout and facilitate subsequent merging, which improves the flexibility and efficiency of UI interface design.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN2025071218_25092025_PF_FP_ABST
    Figure CN2025071218_25092025_PF_FP_ABST
Patent Text Reader

Abstract

Embodiments of the present application relate to the technical field of machine vision, and provide a method and apparatus for adjusting cells in a design region, and an electronic device. The method comprises: displaying, in a design region in a display interface, cells for accommodating service function controls; and upon reception of an adjustment instruction for a displayed first cell, if the adjustment instruction instructs to split the first cell, displaying a cell splitting line in the first cell on the basis of a cell layout obtained after the splitting instructed by the adjustment instruction, so as to split the first cell into a plurality of cells. The position of the cell splitting line is determined on the basis of the following conditions: positions of horizontal edges of other cells in a first row region to which the first cell belongs, and / or positions of vertical edges of other cells in a first column region to which the first cell belongs. The present solution can flexibly adjust the cells in the design region.
Need to check novelty before this filing date? Find Prior Art

Description

Method, device and electronic device for adjusting cells in a design area

[0001] This application claims priority to the Chinese patent application filed with the China Patent Office on January 12, 2024, with application number 202410053043.X and invention name “A method, device and electronic device for adjusting cells in a design area”, the entire contents of which are incorporated by reference into this application. Technical Field

[0002] The present application relates to the field of machine vision technology, and in particular to a method, device, and electronic device for adjusting cells in a design area. Background Art

[0003] In related technologies, UI (User Interface) design programs can display multiple rectangular cells on a canvas. Each cell can accommodate a business function control required for the UI being designed, making it easier for designers to lay out the UI. A business function control is a control used to implement a business function in the UI being designed. For example, a business function control can be used to insert an image, a text box, or a button.

[0004] However, in the related art, designers are unable to flexibly adjust each cell to meet different UI interface design requirements, thus bringing adverse effects to the UI interface design process. Summary of the Invention

[0005] The purpose of the embodiments of the present application is to provide a method, device, and electronic device for adjusting cells in a design area, so as to achieve flexible adjustment of cells in the design area. The specific technical solution is as follows:

[0006] In one aspect of an embodiment of the present application, a method for adjusting cells in a design area is provided, the method comprising:

[0007] Displaying cells for accommodating business function controls in a design area within a display interface;

[0008] receiving a first adjustment instruction for a first displayed cell;

[0009] If the first adjustment instruction instructs to split the first cell, displaying a cell dividing line in the first cell according to the cell layout after the split indicated by the first adjustment instruction, so as to split the first cell into a plurality of cells;

[0010] Wherein, when the cell dividing line is a horizontal line, the position of the cell dividing line is determined based on the number of rows included in the cell layout after the splitting and the positions of the horizontal edges of other cells in the first row area to which the first cell belongs; the row area to which any cell belongs is the area between the lines to which the upper and lower edges of the cell belong;

[0011] When the cell dividing line is a vertical line, the position of the cell dividing line is determined based on the number of columns contained in the cell layout after the split, and the positions of the vertical edges of other cells in the first column area to which the first cell belongs; the column area to which any cell belongs is the area between the lines to which the left and right sides of the cell belong.

[0012] In an optional embodiment, displaying a cell dividing line in the first cell according to the split cell layout indicated by the first adjustment instruction includes:

[0013] When the split cell layout includes multiple rows, determining, based on positions of other horizontal lines displayed in the first row area, a horizontal line with endpoints at points on the left and right sides of the design area as a first horizontal area dividing line; and displaying a horizontal line in the first cell based on the determined first horizontal area dividing line;

[0014] and / or,

[0015] When the split cell layout contains multiple columns, a vertical line with points in the upper and lower sides of the design area as endpoints is determined as the first vertical area dividing line based on the positions of other vertical lines displayed in the first column area; based on the determined first vertical area dividing line, a vertical line is displayed in the first cell.

[0016] In an optional embodiment, displaying a horizontal line in the first cell based on the determined first horizontal area dividing line includes:

[0017] If a first number of other horizontal lines displayed in the first row area is greater than a second number of horizontal lines included in the split cell layout, selecting the second number of horizontal area dividing lines from the determined first horizontal area dividing lines, and displaying portions of the second number of horizontal area dividing lines within the first cell;

[0018] If a first number of other horizontal lines displayed in the first row area is less than a second number of horizontal lines included in the split cell layout, display the portion of the determined first horizontal area dividing line within the first cell, and display a third number of horizontal lines within the first cell; wherein the third number is the difference between the second number and the first number;

[0019] and / or,

[0020] The displaying a vertical line in the first cell based on the determined first vertical area dividing line includes:

[0021] If a fourth number of other vertical lines displayed in the first column area is greater than a fifth number of vertical lines included in the cell layout after the splitting, selecting a fifth number of vertical area dividing lines from the determined first vertical area dividing lines, and displaying portions of the fifth number of vertical area dividing lines within the first cell;

[0022] If the fourth number of other vertical lines displayed in the first column area is less than the fifth number of vertical lines included in the split cell layout, the portion of the determined first vertical area dividing line within the first cell is displayed, and a sixth number of vertical lines is displayed within the first cell; wherein the sixth number is the difference between the fifth number and the fourth number.

[0023] In an optional embodiment, the method further comprises:

[0024] receiving a second adjustment instruction for the displayed plurality of adjacent second cells;

[0025] If the second adjustment instruction indicates that each second cell is adjusted to a specified cell layout, then for each second cell, the second cell is split according to the horizontal line displayed in the second row area to which the second cell belongs and the vertical line displayed in the second column area to which the second cell belongs, to obtain multiple third cells.

[0026] In an optional embodiment, the method further comprises:

[0027] If the third cells obtained by splitting do not conform to the specified cell layout, some cells in the third cells obtained by splitting are split and / or merged according to the specified cell layout so that the obtained multiple cells conform to the specified cell layout.

[0028] In an optional embodiment, the method further comprises:

[0029] If the first adjustment instruction indicates adding at least one row of cells to the first cell, determining, based on the positions of the upper and lower edges of the first cell, a horizontal line with endpoints at points on the left and right edges of the design area as a second horizontal area dividing line; and displaying the second horizontal area dividing line within the design area;

[0030] If the first adjustment instruction indicates adding at least one column of cells to the first cell, determining, based on the positions of the left and right sides of the first cell, a vertical line with endpoints at points on the upper and lower sides of the design area as a second vertical area dividing line; and displaying the second vertical area dividing line in the design area;

[0031] If the first adjustment instruction instructs to delete a row of cells for the first cell, within the design area, a horizontal line between the row area to which the first cell belongs and an adjacent row area is deleted;

[0032] If the first adjustment instruction instructs to delete a column of cells for the first cell, within the design area, a vertical line between the column area to which the first cell belongs and an adjacent column area is deleted.

[0033] In an optional embodiment, the method further comprises:

[0034] If the second adjustment instruction instructs to merge the second cells, in the design area, the common edge between every two adjacent cells in the second cells is deleted.

[0035] In an optional embodiment, a horizontal split mark is displayed on the vertical edge of the design area, and the horizontal split mark is used to indicate the position of the horizontal edge of the cell in the row area to which the displayed cell belongs; a vertical split mark is displayed on the horizontal edge of the design area, and the vertical split mark is used to indicate the position of the vertical edge of the cell in the column area to which the displayed cell belongs; the method further includes:

[0036] For any horizontal division mark, when there is no horizontal edge at the position indicated by the horizontal division mark, deleting the horizontal division mark from the display interface;

[0037] and / or,

[0038] For any vertical division mark, when there is no vertical edge at the position indicated by the vertical division mark, the vertical division mark is deleted from the display interface.

[0039] In an optional embodiment, a cell adjustment function area is further provided in the display interface, and at least one adjustment function control is displayed in the cell adjustment function area. Any adjustment function control is used to respond to a user operation to trigger an adjustment instruction.

[0040] In an optional embodiment, a business function area is further provided in the display interface, and at least one business function control is displayed in the business function area. The method further includes:

[0041] When a layout instruction for any business function control is received, the business function control is added to the cell indicated by the layout instruction in the design area to generate a user interface including the business function control.

[0042] The present application also provides a method for adjusting cells in a design area, including:

[0043] Displaying cells for accommodating business function controls in a design area within a display interface;

[0044] In response to receiving an adjustment instruction to select a specified cell layout from pre-provided cell layouts, the cell layout of a target cell is adjusted to the specified cell layout; the target cell is at least one cell selected in the design area.

[0045] In an optional embodiment, adjusting the layout of the target cell to the specified cell layout includes:

[0046] Determine the position of the horizontal dividing line for dividing the total area occupied by the target cell according to the position of each horizontal line in the row area to which the target cell belongs; the row area to which any cell belongs is: the area between the lines to which the upper and lower sides of the cell belong;

[0047] Determine the position of the vertical dividing line for dividing the target cell according to the position of each vertical line in the column area to which the target cell belongs; the column area to which any cell belongs is: the area between the lines to which the left and right sides of the cell belong;

[0048] Based on the determined horizontal dividing line position and vertical dividing line position, the total area occupied by the target cell is divided according to the specified cell layout to obtain cells of the specified cell layout.

[0049] In an optional embodiment, dividing the total area occupied by the target cell according to the specified cell layout based on the determined horizontal dividing line position and vertical dividing line position includes:

[0050] Splitting the total area occupied by the target cell according to the determined horizontal dividing line position and vertical dividing line position;

[0051] If the number of rows included in the designated cell layout is different from the number of rows included in the total area after the split, the number of rows included in the total area after the split is adjusted so that the number of rows included in the adjusted total area is the same as the number of rows included in the designated cell layout;

[0052] If the number of columns included in the specified cell layout is different from the number of columns included in the total area after the split, the number of columns included in the total area after the split is adjusted so that the number of columns included in the adjusted total area is the same as the number of columns included in the specified cell layout.

[0053] In an optional embodiment, the adjusting the number of rows contained in the total area after the split includes:

[0054] If the number of rows included in the total area after the split is less than the number of rows represented by the specified cell layout, at least one row of cells is determined in the total area, and rows are inserted into the determined cells according to the difference between the number of rows represented by the specified cell layout and the number of rows included in the total area after the split;

[0055] If the number of rows included in the total area after the split is greater than the number of rows represented by the specified cell layout, then selecting rows from the rows included in the total area after the split for deletion according to the difference between the number of rows included in the total area after the split and the number of rows represented by the specified cell layout;

[0056] In an optional embodiment, the adjusting the number of columns contained in the total area after the split includes:

[0057] If the number of columns included in the total area after the split is less than the number of columns represented by the specified cell layout, at least one column of cells is determined in the total area, and columns are inserted into the determined cells according to the difference between the number of columns represented by the specified cell layout and the number of columns included in the total area after the split;

[0058] If the number of columns contained in the total area after the split is greater than the number of columns represented by the specified cell layout, columns are selected from the columns contained in the total area after the split for deletion according to the difference between the number of columns contained in the total area after the split and the number of columns represented by the specified cell layout.

[0059] In an optional embodiment, the method further comprises:

[0060] If the adjusted total area still does not conform to the specified cell layout, determining a portion of the adjusted cell layout of the total area that is different from the specified cell layout;

[0061] According to the specified cell layout, cells included in the determined different parts are merged.

[0062] In another aspect of the embodiments of the present application, a device for adjusting cells in a design area is provided, the device comprising:

[0063] A display module is used to display cells for accommodating business function controls in a design area within a display interface;

[0064] A first instruction receiving module, configured to receive a first adjustment instruction for a displayed first cell;

[0065] a first adjustment module configured to, if the first adjustment instruction indicates to split the first cell, display a cell dividing line in the first cell according to the cell layout after the split indicated by the first adjustment instruction, so as to split the first cell into a plurality of cells;

[0066] Wherein, when the cell dividing line is a horizontal line, the position of the cell dividing line is determined based on the number of rows included in the cell layout after the splitting and the positions of the horizontal edges of other cells in the first row area to which the first cell belongs; the row area to which any cell belongs is the area between the lines to which the upper and lower edges of the cell belong;

[0067] When the cell dividing line is a vertical line, the position of the cell dividing line is determined based on the number of columns contained in the cell layout after the split, and the positions of the vertical edges of other cells in the first column area to which the first cell belongs; the column area to which any cell belongs is the area between the lines to which the left and right sides of the cell belong.

[0068] In an optional embodiment, the first adjustment module is specifically configured to, when the split cell layout includes multiple rows, determine, based on positions of other horizontal lines displayed in the first row area, a horizontal line having endpoints at points on the left and right sides of the design area as a first horizontal area dividing line; and display a horizontal line in the first cell based on the determined first horizontal area dividing line.

[0069] and / or,

[0070] When the split cell layout contains multiple columns, a vertical line with points in the upper and lower sides of the design area as endpoints is determined as the first vertical area dividing line based on the positions of other vertical lines displayed in the first column area; based on the determined first vertical area dividing line, a vertical line is displayed in the first cell.

[0071] In an optional embodiment, the first adjustment module is specifically configured to, if a first number of other horizontal lines displayed in the first row area is greater than a second number of horizontal lines included in the split cell layout, select the second number of horizontal area dividing lines from the determined first horizontal area dividing lines, and display portions of the second number of horizontal area dividing lines within the first cell;

[0072] If a first number of other horizontal lines displayed in the first row area is less than a second number of horizontal lines included in the split cell layout, display the portion of the determined first horizontal area dividing line within the first cell, and display a third number of horizontal lines within the first cell; wherein the third number is the difference between the second number and the first number;

[0073] and / or,

[0074] The displaying a vertical line in the first cell based on the determined first vertical area dividing line includes:

[0075] If a fourth number of other vertical lines displayed in the first column area is greater than a fifth number of vertical lines included in the cell layout after the splitting, selecting a fifth number of vertical area dividing lines from the determined first vertical area dividing lines, and displaying portions of the fifth number of vertical area dividing lines within the first cell;

[0076] If the fourth number of other vertical lines displayed in the first column area is less than the fifth number of vertical lines included in the split cell layout, the portion of the determined first vertical area dividing line within the first cell is displayed, and a sixth number of vertical lines is displayed within the first cell; wherein the sixth number is the difference between the fifth number and the fourth number.

[0077] In an optional embodiment, the device further comprises:

[0078] a second adjustment instruction receiving module, configured to receive a second adjustment instruction for a plurality of displayed adjacent second cells;

[0079] A second adjustment module is configured to split each second cell according to a horizontal line displayed in a second row area to which the second cell belongs and a vertical line displayed in a second column area to which the second cell belongs, to obtain a plurality of third cells if the second adjustment instruction indicates that each second cell is adjusted to a specified cell layout.

[0080] In an optional embodiment, the device further comprises:

[0081] The third adjustment module is used to split and / or merge some cells in each of the split third cells according to the specified cell layout if the third cells obtained by splitting do not conform to the specified cell layout, so that the obtained multiple cells conform to the specified cell layout.

[0082] In an optional embodiment, the device further comprises:

[0083] a row adding module configured to, if the first adjustment instruction indicates adding at least one row of cells to the first cell, determine, based on the positions of the upper and lower edges of the first cell, a horizontal line with endpoints at points on the left and right edges of the design area as a second horizontal area dividing line; and display the second horizontal area dividing line within the design area;

[0084] a column adding module configured to, if the first adjustment instruction indicates adding at least one column of cells to the first cell, determine, based on the positions of the left and right sides of the first cell, a vertical line with endpoints at points on the upper and lower sides of the design area as a second vertical area dividing line; and display the second vertical area dividing line in the design area;

[0085] a row deletion module, configured to delete, within the design area, a horizontal line between a row area to which the first cell belongs and an adjacent row area if the first adjustment instruction indicates deleting a row of cells for the first cell;

[0086] The column deletion module deletes a vertical line between the column area to which the first cell belongs and an adjacent column area within the design area if the first adjustment instruction indicates to delete a column of cells for the first cell.

[0087] In an optional embodiment, the device further comprises:

[0088] A merging module is configured to delete a common edge between every two adjacent cells in each second cell within the design area if the second adjustment instruction indicates that the second cells are to be merged.

[0089] In an optional embodiment, a horizontal split mark is displayed on the vertical edge of the design area, and the horizontal split mark is used to indicate: the position of the horizontal edge of the cell in the row area to which the displayed cell belongs; a vertical split mark is displayed on the horizontal edge of the design area, and the vertical split mark is used to indicate: the position of the vertical edge of the cell in the column area to which the displayed cell belongs; the device further includes:

[0090] a mark deletion module, configured to delete, for any horizontal segmentation mark, from the display interface when no horizontal edge exists at the position indicated by the horizontal segmentation mark;

[0091] and / or,

[0092] For any vertical division mark, when there is no vertical edge at the position indicated by the vertical division mark, the vertical division mark is deleted from the display interface.

[0093] In an optional embodiment, a cell adjustment function area is further provided in the display interface, and at least one adjustment function control is displayed in the cell adjustment function area. Any adjustment function control is used to respond to a user operation to trigger an adjustment instruction.

[0094] In an optional embodiment, a business function area is further provided in the display interface, at least one business function control is displayed in the business function area, and the device further includes:

[0095] The control adding module is configured to, upon receiving a layout instruction for any business function control, add the business function control to a cell indicated by the layout instruction in the design area, so as to generate a user interface including the business function control.

[0096] An embodiment of the present application further provides an electronic device, including:

[0097] Memory for storing computer programs;

[0098] The processor is used to implement any of the above-mentioned methods for adjusting cells in the design area when executing the program stored in the memory.

[0099] An embodiment of the present application further provides a non-transitory computer-readable storage medium, wherein the non-transitory computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the computer program implements any of the above-mentioned methods for adjusting cells in a design area.

[0100] An embodiment of the present application also provides a computer program product comprising instructions, which, when executed on a computer, enables the computer to execute any of the above-described methods for adjusting cells in a design area.

[0101] Beneficial effects of the embodiments of the present application:

[0102] Through this solution, when the first adjustment instruction indicates that the first cell is to be split, a cell dividing line can be displayed in the first cell according to the cell layout after splitting indicated by the first adjustment instruction, so as to split the first cell into multiple cells, thereby realizing flexible splitting of the cells. Moreover, since the position of the horizontal cell dividing line is determined based on the number of rows included in the cell layout after splitting and the positions of the horizontal edges of other cells in the first row area to which the first cell belongs, and the position of the vertical cell dividing line is determined based on the number of columns included in the cell layout after splitting and the positions of the vertical edges of other cells in the first column area to which the first cell belongs, after the cell dividing line splits the first cell to obtain multiple cells, the horizontal edges of the obtained multiple cells can be connected with the horizontal edges of other associated cells, and the vertical edges can also be connected with the vertical edges of other associated cells, so that the cell layout in the entire design area remains neat, which is convenient for subsequent cell merging.

[0103] Of course, it is not necessary to achieve all the advantages described above at the same time when implementing any product or method of the present application. BRIEF DESCRIPTION OF THE DRAWINGS

[0104] The drawings described herein are used to provide further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application.

[0105] FIG1 is a flow chart of a method for adjusting cells in a design area provided by this embodiment;

[0106] FIG2 is a schematic diagram of a display interface provided by this embodiment;

[0107] FIG3 is a schematic diagram of a cell adjustment function area provided in this embodiment;

[0108] FIG4 is a first schematic diagram of a design area provided in this embodiment;

[0109] FIG5 is a second schematic diagram of the design area provided in this embodiment;

[0110] FIG6 is a third schematic diagram of the design area provided in this embodiment;

[0111] FIG7 is a schematic diagram of a business function control provided in this embodiment;

[0112] FIG8 is a fourth schematic diagram of the design area provided in this embodiment;

[0113] FIG9 is a fifth schematic diagram of the design area provided in this embodiment;

[0114] FIG10 is a sixth schematic diagram of the design area provided in this embodiment;

[0115] FIG11 is a seventh schematic diagram of the design area provided in this embodiment;

[0116] FIG12 is an eighth schematic diagram of the design area provided in this embodiment;

[0117] FIG13 is a ninth schematic diagram of a design area provided in this embodiment;

[0118] FIG14 is a tenth schematic diagram of the design area provided in this embodiment;

[0119] FIG15 is an eleventh schematic diagram of the design area provided in this embodiment;

[0120] FIG16 is a twelfth schematic diagram of the design area provided in this embodiment;

[0121] FIG17 is a thirteenth schematic diagram of the design area provided in this embodiment;

[0122] FIG18 is a fourteenth schematic diagram of the design area provided in this embodiment;

[0123] FIG19 is a fifteenth schematic diagram of a design area provided in this embodiment;

[0124] FIG20 is a schematic diagram of a segmentation mark of a design area in this embodiment;

[0125] FIG21 is another schematic diagram of segmentation marks of the design area in this embodiment;

[0126] FIG22 is a schematic structural diagram of a device for adjusting cells in a design area provided by this embodiment;

[0127] FIG23 is a schematic structural diagram of the electronic device in this embodiment. DETAILED DESCRIPTION

[0128] To make the objectives, technical solutions, and advantages of this application more clearly understood, the present application is further described below with reference to the accompanying drawings and examples. It is apparent that the described examples are only a portion of the embodiments of this application, and not all of them. All other embodiments derived by persons of ordinary skill in the art based on the examples in this application are intended to fall within the scope of protection of this application.

[0129] Embodiments of the present application provide a method, apparatus, and electronic device for adjusting cells in a design area. The method can be applied to a client for user interface development, which can be an electronic device such as a computer, tablet computer, or server. The client can have a user interface development program installed. Furthermore, the mobile application debugging method provided in the embodiments of the present application can be implemented using software, hardware, or a combination of software and hardware.

[0130] The following first introduces the method for adjusting cells in the design area provided by this application. The method may include the following steps:

[0131] A method for adjusting cells in a design area, comprising:

[0132] Displaying cells for accommodating business function controls in a design area within a display interface;

[0133] receiving a first adjustment instruction for a first displayed cell;

[0134] If the first adjustment instruction instructs to split the first cell, displaying a cell dividing line in the first cell according to the cell layout after the split indicated by the first adjustment instruction, so as to split the first cell into a plurality of cells;

[0135] When the cell dividing line is a horizontal line, the position of the cell dividing line is determined based on the number of rows included in the cell layout after the split and the positions of the horizontal edges of other cells in the first row area to which the first cell belongs; the row area to which any cell belongs is the area between the lines to which the upper and lower edges of the cell belong;

[0136] When the cell dividing line is a vertical line, the position of the cell dividing line is determined based on the number of columns contained in the cell layout after the split and the positions of the vertical edges of other cells in the first column area to which the first cell belongs. The column area to which any cell belongs is the area between the lines to which the left and right sides of the cell belong.

[0137] In this embodiment, when the first adjustment instruction indicates that the first cell is to be split, a cell dividing line can be displayed in the first cell according to the cell layout after the split indicated by the first adjustment instruction, so as to split the first cell into multiple cells, thereby realizing flexible splitting of the cells. Moreover, since the position of the horizontal cell dividing line is determined based on the number of rows included in the cell layout after the split and the positions of the horizontal edges of other cells in the first row area to which the first cell belongs, the position of the vertical cell dividing line is determined based on the number of columns included in the cell layout after the split and the positions of the vertical edges of other cells in the first column area to which the first cell belongs, after the cell dividing line splits the first cell to obtain multiple cells, the horizontal edges of the obtained multiple cells can be connected with the horizontal edges of other associated cells, and the vertical edges can also be connected with the vertical edges of other associated cells, so that the cell layout in the entire design area remains neat, which is convenient for subsequent merging of cells.

[0138] The following is a detailed description of the method for adjusting cells in the design area provided by the embodiment of the present application in conjunction with the accompanying drawings. As shown in Figure 1, the method may include the following steps:

[0139] S101, displaying cells for accommodating business function controls in a design area within a display interface;

[0140] Among them, the display interface can be a display interface of a client for user interface development. For example, it can be shown in Figure 2. The display interface can be provided with a design area, which can also be called a canvas. The design area can display cells for accommodating business function controls. The cells in the design area can be cells in the default layout form displayed after the user opens the client, for example, the form of 3 rows × 3 columns shown in Figure 2. The cells in the design area can also be cells that have been adjusted after the client responds to the adjustment instruction issued by the user. The cells displayed in the design area always cover the entire design area, that is, there are always cells in every position in the design area.

[0141] The display interface may also include a cell adjustment area, displaying at least one adjustment control, each of which is configured to trigger an adjustment instruction in response to a user's operation. In one implementation, the cell adjustment area may display multiple layout templates, each of which is configured to instruct the user to convert a selected cell into a specified layout format.

[0142] In one implementation, the cell adjustment function area can be as shown in Figure 3. The various screens below the basic layout in Figure 3 and the various templates below the split template are all layout templates. The difference is that the layout template of the basic layout part can be expressed in the form of N rows × M columns. Users can also customize the template by setting the number of rows and columns in the basic layout part; the layout template of the split template part cannot be expressed in the form of N rows × M columns. As shown in Figure 4, if the user selects cell 1 in the design area and selects the "9 screens" adjustment function control, cell 1 can be adjusted to 9 small cells of 3 rows × 3 columns, and the final result can be as shown in Figure 5. If the user selects the "Template 1" adjustment function control, the final result can be as shown in Figure 6. By setting the cell adjustment function area in the display interface, the cell selected by the user can be quickly adjusted to the specified cell layout.

[0143] The display interface may also include a business function area, displaying at least one business function control. A business function control is a control used to implement a business function within the user interface being designed. For example, a business function control can be used to insert an image, a text box, or a button. When a layout instruction is received for any business function control, the control can be added to the cell indicated by the layout instruction in the design area, as shown in Figure 7. The alignment of the business function control within a cell can also be set, including but not limited to left alignment, top alignment, and flat alignment. This ultimately generates a user interface containing the business function control.

[0144] In addition, the display interface may also be provided with a menu bar for providing other functions, such as a save function, a function for zooming in on the screen, a function for zooming out on the screen, etc. Of course, a function for adjusting cells may also be provided.

[0145] After the user opens the client, the client can load the data of the above-mentioned functional areas to display each functional area on the display interface; it can also load a decorative layer on the upper layer of the design area to draw the various edges of the cells in the design area, and after the user selects one or more cells, the cells selected by the user are highlighted, that is, the cells selected by the user are displayed in a form that is different from other cells. For example, the color of the edge of the cell selected by the user can be changed from black before selection to red.

[0146] S102, receiving a first adjustment instruction for a displayed first cell;

[0147] The user can generate a first adjustment instruction by clicking the desired layout template in the cell adjustment function area. The user can also generate a first adjustment instruction by clicking the function for adjusting the cell in the menu bar or right-click menu. The above is only an example, and the way the user issues the adjustment instruction is not limited to this.

[0148] In one implementation, if the layout templates included in the cell adjustment function area do not contain the template the user needs, the user can also click the "Customize" button in the cell adjustment function area to customize the template the user needs. Alternatively, the user can open the Split function dialog box in the menu bar and then fill in the number of rows and columns of the cell layout after the split. The Split function dialog box can also be opened through the right-click menu.

[0149] S103, if the first adjustment instruction instructs to split the first cell, displaying a cell dividing line in the first cell according to the cell layout after the split indicated by the first adjustment instruction, so as to split the first cell into a plurality of cells;

[0150] When the cell dividing line is a horizontal line, the position of the cell dividing line is determined based on the number of rows included in the cell layout after the split and the positions of the horizontal edges of other cells in the first row area to which the first cell belongs; the row area to which any cell belongs is the area between the lines to which the upper and lower edges of the cell belong;

[0151] When the cell dividing line is a vertical line, the position of the cell dividing line is determined based on the number of columns contained in the cell layout after the split and the positions of the vertical edges of other cells in the first column area to which the first cell belongs. The column area to which any cell belongs is the area between the lines to which the left and right sides of the cell belong.

[0152] As can be understood, as shown in Figure 8 , the line to which the top of cell 1 belongs includes the top of cell 1 and the top of cell 2, and the line to which the bottom of cell 1 belongs includes the bottom of cell 1 and the bottom of cell 3. The line to which the left of cell 1 belongs includes the left of cell 1 and the left of cell 4, and the line to which the right of cell 1 belongs includes the right of cell 1 and the right of cell 5. The row region to which cell 1 belongs is the region consisting of cell 1, cell 2, and cell 3; the column region to which cell 1 belongs is the region consisting of cell 1, cell 4, and cell 5.

[0153] Specifically, when the split cell layout contains multiple rows, a horizontal line with endpoints at points on the left and right sides of the design area can be determined as the first horizontal area dividing line based on the positions of other horizontal lines displayed in the first row area, and a horizontal line can be displayed in the first cell based on the determined first horizontal area dividing line.

[0154] When the split cell layout contains multiple columns, a vertical line with endpoints at the upper and lower edges of the design area can be determined as the first vertical area dividing line based on the positions of other vertical lines displayed in the first column area; based on the determined first vertical area dividing line, a vertical line is displayed in the first cell.

[0155] When displaying the determined vertical area dividing line and / or the determined horizontal area dividing line in the first cell, it is necessary to ensure that the other originally displayed cells remain unchanged. If the determined vertical area dividing line and / or the determined horizontal area dividing line affects other cells, for example, the dividing line passes through other cells, the part belonging to the dividing line in other cells is not displayed, that is, the part of the dividing line in other cells is not displayed.

[0156] In this way, when a horizontal line is displayed in the first cell, it can be aligned with the horizontal lines of other cells, and when a vertical line is displayed in the first cell, it can be aligned with the vertical lines of other cells. This can avoid confusion in the positions of the generated horizontal or vertical lines, making the cells displayed in the design area more neat.

[0157] For example, as shown in FIG8 , a horizontal line is also displayed in the row area to which cell 1 belongs, i.e., the dividing line between cell 2 and cell 3. The first horizontal area dividing line determined at this time is the line to which this dividing line belongs. A vertical line is also displayed in the column area to which this cell belongs, i.e., the dividing line between cell 4 and cell 5. The first vertical area dividing line determined at this time is the line to which this dividing line belongs. If the adjustment instruction indicates that cell 1 is to be split into 2×2 small cells, the first horizontal area dividing line and the portion of the first vertical area dividing line passing through cell 1 can be displayed in the design area, and cell 1 can be split into 2×2 small cells, as shown in FIG9 .

[0158] In one case, if a first number of other horizontal lines displayed in the first row area is greater than a second number of horizontal lines included in the cell layout after the splitting, a second number of horizontal area dividing lines are selected from the determined first horizontal area dividing lines, and portions of the second number of horizontal area dividing lines within the first cell are displayed;

[0159] It can be understood that the number of other horizontal lines displayed in a row area plus one is the total number of rows occupied by the cells contained in the row area. Therefore, the first number of other horizontal lines displayed in the first row area is greater than the second number of horizontal lines included in the split cell layout. In other words, the total number of rows occupied by the cells contained in the first row area is greater than the number of rows included in the split cell layout.

[0160] For example, as shown in Figure 10, the number of other horizontal lines displayed in the row area to which cell 2 belongs is 2, that is, the row area contains 3 rows of cells. If the adjustment instruction indicates that cell 2 is split into two rows, one horizontal area dividing line can be selected from the first horizontal area dividing line, and then the part of the horizontal area dividing line within cell 2 can be displayed, so that cell 2 can be split into two rows, as shown in Figure 11.

[0161] If a first number of other horizontal lines displayed in the first row area is less than a second number of horizontal lines included in the split cell layout, display the portion of the determined first horizontal area dividing line within the first cell, and display a third number of horizontal lines within the first cell; wherein the third number is the difference between the second number and the first number;

[0162] It is understood that the first number of additional horizontal lines displayed in the first row area is less than the second number of horizontal lines included in the split cell layout. In other words, the total number of rows occupied by the cells included in the first row area is less than the number of rows included in the split cell layout. The third number is the number of horizontal lines that need to be added to the first cell after the first horizontal area dividing lines are displayed in the first cell.

[0163] Still taking FIG10 as an example, if the adjustment instruction instructs to split cell 2 into 5 rows, since cell 2 is only split into 3 rows after the portion of the determined first horizontal area dividing line within the first cell is displayed, two more horizontal lines need to be added.

[0164] After the first horizontal area dividing lines are displayed in the first cell, the first cell has been divided into multiple rows. If more horizontal lines are needed within the cell, they can be evenly distributed among the multiple rows. For example, after splitting cell 2 in Figure 10 into three rows, two more horizontal lines need to be added. In this case, one horizontal line can be added to the first row and one to the second row from top to bottom. Furthermore, when adding horizontal lines, add them in the middle of each row to divide the row equally. The result is shown in Figure 12.

[0165] This approach provides a basis for splitting the first cell when the number of horizontal lines contained within the cell layout after the split is greater than the number of other horizontal lines displayed in the first row area, or when the number of horizontal lines contained within the cell layout after the split is less than the number of other horizontal lines displayed in the first row area. In other words, if the number of rows contained in the first cell after the split needs to be different from the number of rows occupied by the first row area before the split, this solution can also meet this requirement.

[0166] Similarly, the number of other vertical lines displayed in a column area plus one is the total number of columns occupied by the cells contained in the column area. If the fourth number of other vertical lines displayed in the first column area is greater than the fifth number of vertical lines contained in the cell layout after the split, a fifth number of vertical area dividing lines may be selected from the determined first vertical area dividing lines, and the portion of the fifth number of vertical area dividing lines within the first cell may be displayed;

[0167] If the fourth number of other vertical lines displayed in the first column area is less than the fifth number of vertical lines included in the split cell layout, the portion of the determined first vertical area dividing line within the first cell can be displayed, and a sixth number of vertical lines can be displayed within the first cell; wherein the sixth number is the difference between the fifth number and the fourth number.

[0168] After the first vertical area dividing lines are displayed in the first cell, the first cell has been divided into multiple columns. If vertical lines need to be added to the cell, the vertical lines can be evenly distributed among the multiple columns that have been divided.

[0169] This approach provides a basis for splitting the first cell when the number of vertical lines contained within the cell layout after splitting is greater than the number of other vertical lines displayed in the first column area, or when the number of vertical lines contained within the cell layout after splitting is less than the number of other vertical lines displayed in the first column area. In other words, if the number of columns contained in the first cell after splitting needs to be different from the number of columns occupied by the first row area before splitting, this solution can also meet this requirement.

[0170] In this embodiment, when the first adjustment instruction indicates that the first cell is to be split, a cell dividing line can be displayed in the first cell according to the cell layout after the split indicated by the first adjustment instruction, so as to split the first cell into multiple cells, thereby realizing flexible splitting of the cells. Moreover, since the position of the horizontal cell dividing line is determined based on the number of rows included in the cell layout after the split and the positions of the horizontal edges of other cells in the first row area to which the first cell belongs, the position of the vertical cell dividing line is determined based on the number of columns included in the cell layout after the split and the positions of the vertical edges of other cells in the first column area to which the first cell belongs, after the cell dividing line splits the first cell to obtain multiple cells, the horizontal edges of the obtained multiple cells can be connected with the horizontal edges of other associated cells, and the vertical edges can also be connected with the vertical edges of other associated cells, so that the cell layout in the entire design area remains neat, which is convenient for subsequent merging of cells.

[0171] In another embodiment of the present application, the method for adjusting cells in the design area provided in the embodiment of the present application may further include:

[0172] When an adjustment instruction is received for multiple adjacent second cells displayed, if the adjustment instruction indicates that each second cell is adjusted to a specified cell layout, then for each second cell, the second cell is split according to the horizontal line displayed in the second row area to which the second cell belongs and the vertical line displayed in the second column area to which the second cell belongs, to obtain multiple third cells.

[0173] In this embodiment, the plurality of adjacent second cells may be a plurality of cells within a rectangular area, for example, cell 1, cell 2, cell 4 and cell 5 shown in FIG4 ; or cell 5, cell 6, cell 8 and cell 9 shown in FIG4 .

[0174] When receiving an adjustment instruction indicating that multiple adjacent second cells are adjusted to a specified cell layout, each second cell can be split according to the horizontal line displayed in the second row area to which the second cell belongs and the vertical line displayed in the second column area to which the second cell belongs. This process can also be shown in Figures 8-9. In Figure 8, there is one horizontal line displayed in the row area to which cell 1 belongs. The line to which the horizontal line belongs can be determined as the horizontal area dividing line. There is also one vertical line displayed in the column area to which cell 1 belongs. The line to which the vertical line belongs can be determined as the vertical area dividing line. Then, the portion of the determined horizontal area dividing line and vertical area dividing line passing through cell 1 is displayed in the design area, thereby achieving the division of cell 1, as shown in Figure 9. It can be seen that the layout of the multiple third cells obtained by splitting can be represented in the form of N rows × M columns. Of course, if there is no horizontal line in the second row area to which a second cell belongs and no vertical line in the second column area to which the second cell belongs, there is no need to split the second cell.

[0175] Furthermore, if the third cells obtained by splitting do not conform to the specified cell layout, some cells in the third cells obtained by splitting are split and / or merged according to the specified cell layout so that the obtained multiple cells conform to the specified cell layout.

[0176] For example, if the third cells obtained by splitting are cells 1, 2, 4, and 5 in FIG4, and the specified cell layout indicated by the adjustment instruction is the "9-screen" in FIG3, according to the specified cell layout, it is necessary to split cell 1 into two rows and two columns, split cell 2 into two rows, and split cell 4 into two columns, so that the multiple cells obtained conform to the specified cell layout. The cell layout obtained after splitting is shown in FIG13. If the specified cell layout indicated by the adjustment instruction is "Template 1" in FIG3, then according to the specified cell layout, it is necessary to first split cells 1, 2, 4, and 5 into two columns respectively, and after splitting, cells A, B, C, D, E, F, G, and H are obtained. After splitting, the result is shown in FIG14. Afterwards, cells A and E are merged, cells B and F are merged, and cells C and G are merged respectively, so that the multiple cells obtained conform to the specified cell layout indicated by the adjustment instruction, as shown in FIG15.

[0177] In this embodiment, the cells within the design area can be flexibly split, and when an adjustment instruction for multiple adjacent second cells displayed is received, each second cell can be split according to the horizontal line displayed in the second row area to which the second cell belongs and the vertical line displayed in the second column area to which the second cell belongs, so as to obtain multiple third cells, and then according to the specified cell layout indicated by the adjustment instruction, part of the split third cells can be split and / or merged so that the obtained multiple cells conform to the specified cell layout indicated by the adjustment instruction, thereby realizing rapid adjustment of the selected multiple cells.

[0178] In one embodiment of the present application, the method for adjusting cells in the design area may further include:

[0179] If the first adjustment instruction indicates adding at least one row of cells to the first cell, i.e., a row addition operation, then determining, based on the positions of the upper and lower edges of the first cell, a horizontal line with endpoints at points on the left and right edges of the design area as a second horizontal area dividing line; and displaying the second horizontal area dividing line in the design area;

[0180] The endpoints of the second horizontal area dividing line are located between the upper and lower sides of the first cell, and the entire second horizontal area dividing line can be displayed in the design area.

[0181] The position of the horizontal area dividing line can be determined according to the number of rows to be added and the equal division points of the left and right sides of the first cell. For example, if only one row of cells is added, the horizontal area dividing line can pass through the bisection points located on the left and right sides of the first cell; if two rows of cells are added, that is, two horizontal lines need to be added, then each horizontal area dividing line can pass through the trisection points on the left and right sides of the first cell, and so on.

[0182] As shown in FIG. 16 , FIG. 16 is a result obtained after adding a row of cells to cell 1 , cell 2 and / or cell 3 in FIG. 4 .

[0183] If the first adjustment instruction indicates adding at least one column of cells to the first cell, i.e., a column adding operation, determining, based on the positions of the left and right sides of the first cell, a vertical line with endpoints at points on the upper and lower sides of the design area as a second vertical area dividing line; and displaying the second vertical area dividing line in the design area;

[0184] The process of adding columns is similar to that of adding rows. The endpoints of the second vertical area dividing line are located between the left and right sides of the first cell, and the entire second vertical area dividing line can be displayed in the design area.

[0185] The position of the horizontal area dividing line can be determined according to the number of columns to be added and the equal division points of the upper and lower sides of the first cell. For example, if only one column of cells is added, the vertical area dividing line can pass through the bisection points located at the upper and lower sides of the first cell; if two columns of cells are added, that is, two vertical area dividing lines need to be added, then each vertical area dividing line can pass through the trisection points of the upper and lower sides of the first cell, and so on.

[0186] If the first adjustment instruction instructs to delete a row of cells for the first cell, that is, the row deletion operation is within the design area, then the horizontal line between the row area to which the first cell belongs and the adjacent row area is deleted;

[0187] As shown in Figure 4, the row area to which cell 1 belongs is the area composed of cell 1, cell 2, and cell 3, and the row area adjacent to it is the area composed of cell 4, cell 5, and cell 6. When a row deletion instruction for cell 1, cell 2, and / or cell 3 is received, the horizontal line between the two areas can be deleted within the design area, and the result can be shown in Figure 17.

[0188] If there are two row regions adjacent to the row region to which the first cell belongs, one of the adjacent row regions may be selected, and the horizontal line between the adjacent row region and the row region to which the first cell belongs may be deleted.

[0189] If the first adjustment instruction instructs to delete a column of cells for the first cell, within the design area, a vertical line between the column area to which the first cell belongs and an adjacent column area is deleted;

[0190] Similarly, if there are two column regions adjacent to the column region to which the first cell belongs, one of the adjacent column regions may be selected, and the vertical line between the adjacent column region and the column region to which the first cell belongs may be deleted.

[0191] Still taking Figure 4 as an example, when a column deletion instruction is received for cell 1, cell 4 and / or cell 7, the vertical line between the area composed of cell 1, cell 4 and cell 7 and the area composed of cell 2, cell 5 and cell 8 can be deleted within the design area, and the result can be as shown in Figure 18.

[0192] In this embodiment, when deleting a row of cells for a cell, the row of cells is not directly deleted, but the horizontal line between the row area to which the cell belongs and the adjacent row area is deleted. When deleting a column of cells for a cell, the column of cells is not directly deleted. This ensures that the cells in the design area after row deletion and / or column deletion can still cover the entire design area.

[0193] In one embodiment of the present application, if the second adjustment instruction instructs to merge the second cells, the shared edge of every two adjacent cells in the second cells can be deleted within the design area, wherein the area formed by the plurality of adjacent second cells is a rectangle.

[0194] For example, when merging cells 1, 2, 4, and 5 in Figure 4, the shared edges between cells 1 and 2, the shared edges between cells 1 and 4, the shared edges between cells 2 and 5, and the shared edges between cells 4 and 5 can be deleted, so that the merged cells can be displayed in the design area, as shown in Figure 8.

[0195] In addition, different merged cells cannot cross or overlap. For example, if you merge cells 1, 2, 4, and 5 in Figure 4, you cannot merge cells 2, 3, 5, and 6. If the merged cell to be generated contains a smaller merged cell that has already been generated, the smaller merged cell will no longer be displayed. For example, after merging cells 1 and 2 in Figure 4, you also need to merge cells 1, 2, 4, and 5. After the merger, the cell layout in the design area is as shown in Figure 17. It can be seen that the smaller cell composed of cells 1 and 2 will no longer be displayed.

[0196] In an embodiment of the present application, the above-mentioned splitting of the first cell and the process of adjusting each second cell to a specified cell layout, etc., can be implemented by a combination of four atomic operations: insertion operation, deletion operation, cell merging, and cell splitting. Insertion operation, that is, the above-mentioned operation of adding rows and columns; deletion operation, that is, the above-mentioned operation of deleting a row of cells and deleting a column of cells; cell merging, that is, merging multiple cells within a rectangular area; cell splitting, that is, for a cell, splitting the cell according to the horizontal line displayed in the row area to which the cell belongs, and the vertical line displayed in the column area to which the cell belongs. These four atomic operations can be implemented by calling the System.Windows.Controls.Grid control class under the PresentationFramework (presentation framework) assembly in the WPF (Windows Presentation Foundation, a user interface framework based on Windows (operating system)) framework.

[0197] For example, if a cell to be adjusted is to be split into a specified cell layout, if the cell to be adjusted is a cell that occupies multiple rows (i.e., there are horizontal edges of other cells in the row area to which the cell to be adjusted belongs), and / or a cell that occupies multiple columns (i.e., there are vertical edges of other cells in the column area to which the cell to be adjusted belongs), then a split operation can be performed on the cell to be adjusted first; if the number of rows contained in the cell layout after the split is still less than the number of rows contained in the specified cell layout, then a row addition operation can be performed on the cell obtained after the split; if the number of columns contained in the cell layout after the split is still less than the number of columns contained in the specified cell layout, then a column addition operation can be performed on the cell obtained after the split, until the number of rows and columns contained in the adjusted cell layout is the same as the number of rows and columns contained in the specified cell layout. At the same time, after performing any insert operation, a merge operation can be performed on the cell group to be merged; wherein, each cell group to be merged is at least two cells generated by performing the insert operation in addition to the cell to be adjusted, and each cell in each cell group to be adjusted is the same cell before performing the insert operation.

[0198] The intermediate results obtained by performing the above intermediate processing operations such as splitting, adding rows, and adding columns on the cells to be adjusted may not be displayed in the design area. The design area can directly display the specified cell layout obtained after the processing.

[0199] For example, if you need to adjust cell 1 in Figure 4 to the cell layout of Figure 5, you can first perform a row-add operation (adding two rows) and a column-add operation (adding two columns) on cell 1. The resulting intermediate result can be shown in Figure 19. Then, you can perform a cell merge operation on the other cells affected by the row-add and column-add operations to obtain the cell layout of Figure 5. Figure 5 can be displayed directly in the design area without displaying Figure 19.

[0200] If the user needs to perform the above insert operation, delete operation, cell merge operation and cell split operation, they can also generate adjustment instructions by clicking the relevant button in the cell adjustment function area. Of course, the relevant button can also be located in the menu bar of the display interface or in the right-click menu.

[0201] In this embodiment, cells can be flexibly split. Furthermore, cells can be flexibly adjusted by adding rows, adding columns, deleting rows, deleting columns, and merging multiple adjacent cells.

[0202] In one embodiment of the present application, a horizontal splitting mark is displayed on the vertical edge of the design area, and the horizontal splitting mark is used to indicate: the position of the horizontal edge of the cell in the row area to which the displayed cell belongs; a vertical splitting mark is displayed on the horizontal edge of the design area, and the vertical splitting mark is used to indicate: the position of the vertical edge of the cell in the column area to which the displayed cell belongs. As shown in Figure 20, the splitting mark in Figure 20 is a vertical splitting mark that indicates the position of the vertical edge between cell 1 and cell 2. The horizontal splitting mark can facilitate the user to observe the position of the horizontal edge of the cell, and the vertical splitting mark can facilitate the user to observe the position of the vertical edge of the cell. In addition, since the splitting mark indicates the position of the horizontal edge of the displayed cell and the position of the vertical edge, the position of each splitting mark can be recorded, and then in the above-mentioned process of determining the first horizontal area dividing line and determining the first vertical area dividing line, it can be determined according to the position of the splitting mark.

[0203] The method for adjusting cells in the design area provided in the embodiment of the present application further includes:

[0204] For any horizontal splitting mark, when there is no horizontal edge at the position indicated by the horizontal splitting mark, delete the horizontal splitting mark from the display interface;

[0205] And / or, for any vertical division mark, when there is no vertical edge at the position indicated by the vertical division mark, the vertical division mark is deleted from the display interface.

[0206] For example, if a cell merge operation is performed on cell 1 and cell 2 in Figure 20, a cell layout as shown in Figure 21 is obtained. At this time, there is no vertical edge at the position indicated by the split mark originally located between cell 1 and cell 2, so the split mark can be deleted.

[0207] In addition, the client only needs to determine the cell layout of the entire design area based on the location of each vertical split mark and horizontal split mark in the design area, as well as cells that occupy multiple rows, that is, the horizontal edges of other cells exist in the row area to which the cell to be adjusted belongs, and / or cells that occupy multiple columns, that is, the vertical edges of other cells exist in the column area to which the cell to be adjusted belongs, and the location and size. For example, the location and size of cells that occupy multiple rows and / or multiple columns can be recorded as (X, Y, ColumnSpan, RowSpan), where X and Y represent the location of the upper left corner of the cell, ColumnSpan represents the number of columns occupied by the cell, and RowSpan represents the number of rows occupied by the cell. For example, cell 3 in Figure 20 can be recorded as: (0, 0, 2, 2).

[0208] In this embodiment, cells can be flexibly split. Furthermore, a horizontal split mark is displayed on the vertical edge of the design area to indicate the position of the horizontal edge of the cell in the row area to which the displayed cell belongs; a vertical split mark is displayed on the horizontal edge of the design area to indicate the position of the vertical edge of the cell in the column area to which the displayed cell belongs. This makes it easy for users to observe the positions of the horizontal and vertical edges of the cell. When there is no horizontal edge at the position indicated by the horizontal split mark, the horizontal split mark is deleted from the display interface; and for any vertical split mark, when there is no vertical edge at the position indicated by the vertical split mark, the vertical split mark is deleted from the display interface. This can delete redundant split marks, thereby preventing the split marks from increasing but not decreasing with the user's operation, so as to keep the design area simple.

[0209] The present application also provides a method for adjusting cells in a design area, comprising the following steps:

[0210] Step A1: displaying cells for accommodating business function controls in a design area within a display interface;

[0211] This step is similar to step S101 and will not be described again here.

[0212] Step A2: in response to receiving an adjustment instruction to select a specified cell layout from pre-provided cell layouts, adjusting the cell layout of the target cell to the specified cell layout; the target cell is at least one cell selected in the design area.

[0213] The pre-provided cell layout can be one or more. Exemplarily, the pre-provided cell layout can be displayed in the cell adjustment function area as shown in Figure 3. The user can select a cell layout from the pre-provided cell layouts according to needs, thereby issuing an adjustment instruction, and the selected cell layout is the specified cell layout. As shown in Figure 4, if the user selects cell 1 as the target cell in the design area, and then selects "9 screens", cell 1 can be adjusted to 9 small cells of 3 rows × 3 columns, and the final result can be as shown in Figure 5. If the user selects "Template 1", the final result can be as shown in Figure 6. The target cell can be one cell or multiple adjacent cells, and the area composed of the multiple adjacent cells can be rectangular.

[0214] The above adjusts the layout of the target cell to the specified cell layout, including:

[0215] A21 determines the position of the horizontal dividing line that divides the total area occupied by the target cell based on the positions of the horizontal lines in the row area to which the target cell belongs. The row area to which any cell belongs is the area between the lines that belong to the upper and lower edges of the cell.

[0216] If the target cell is a single cell, the total area occupied by the target cell is the area occupied by that cell; if the target cell includes multiple cells, the total area occupied by the target cell is the sum of the areas occupied by the multiple cells. As shown in Figure 8, if the target cell is cell 1 in Figure 8, the total area occupied by the target cell is the area occupied by cell 1; if the target cell includes cells 2 and 3, the total area occupied by the target cell is the area composed of cells 2 and 3.

[0217] A22 determines the position of the vertical dividing line that divides the target cell based on the positions of the vertical lines in the column area to which the target cell belongs. The column area to which any cell belongs is the area between the lines to which the left and right sides of the cell belong.

[0218] A23 , based on the determined horizontal dividing line position and vertical dividing line position, divide the total area occupied by the target cell according to the specified cell layout to obtain cells of the specified cell layout.

[0219] As shown in Figure 8 , the row region to which cell 1 belongs contains a horizontal line, namely, the dividing line between cells 2 and 3. The horizontal dividing line position determined in this case may be the vertical position of the dividing line. The column region to which the cell belongs also contains a vertical line, namely, the dividing line between cells 4 and 5. The vertical dividing line position determined in this case may be the horizontal position of the dividing line.

[0220] If the adjustment instruction indicates that cell 1 is to be split into 2×2 small cells, cell 1 can be split into 2×2 small cells according to the determined horizontal dividing line position and vertical dividing line position, as shown in FIG9 .

[0221] This way, when a horizontal line is displayed in the target cell, it will be aligned with the horizontal edges of other cells, and when a vertical line is displayed in the target cell, it will be aligned with the vertical edges of other cells. This prevents the generated horizontal or vertical lines from being misaligned, making the cells displayed in the design area more neat.

[0222] The above-mentioned dividing the total area occupied by the target cell according to the specified cell layout based on the determined horizontal dividing line position and vertical dividing line position may include:

[0223] A231, splitting the total area occupied by the target cell according to the determined horizontal dividing line position and vertical dividing line position;

[0224] As in the above embodiment, if the target cell is cell 1 in FIG8 , and the specified cell layout represents a 2×2 cell, then cell 1 can be adjusted to the specified cell layout by splitting the total area occupied by the target cell.

[0225] In one case, after splitting the total area occupied by the target cell, it still does not conform to the specified cell layout, then the following steps can be performed:

[0226] A232: If the number of rows in the specified cell layout is different from the number of rows in the total area after the split, the number of rows in the total area after the split is adjusted so that the number of rows in the adjusted total area is the same as the number of rows in the specified cell layout.

[0227] The total number of rows in the area after the above adjustment split includes:

[0228] If the number of rows in the total area after the split is less than the number of rows represented by the specified cell layout, at least one row of cells is determined in the total area, and rows are inserted into the determined cells according to the difference between the number of rows represented by the specified cell layout and the number of rows in the total area after the split;

[0229] In this step, the rows to be inserted can be inserted into the same row of cells in the total area, or can be inserted into cells in each row of the total area evenly according to the number. Inserting a row into a cell can be achieved by the insert operation in the above atomic operation.

[0230] If the number of rows in the total area after the split is greater than the number of rows represented by the specified cell layout, rows are selected from the rows in the total area after the split to be deleted based on the difference between the number of rows in the total area after the split and the number of rows represented by the specified cell layout.

[0231] The selected rows can be randomly selected from the total area, or selected in a top-down or bottom-up order. Deleting rows can be achieved through the delete operation or merge operation in the above atomic operations.

[0232] A233: If the number of columns in the specified cell layout is different from the number of columns in the total area after the split, the number of columns in the total area after the split is adjusted so that the number of columns in the adjusted total area is the same as the number of columns in the specified cell layout.

[0233] The number of columns in the total area after the above adjustment and splitting includes:

[0234] If the number of columns in the total area after the split is less than the number of columns represented by the specified cell layout, then at least one column of cells is determined in the total area, and columns are inserted into the determined cells according to the difference between the number of columns represented by the specified cell layout and the number of columns in the total area after the split;

[0235] Similarly, the columns to be inserted can be inserted into a column of cells in the total area, or can be inserted into cells in each column of the total area evenly according to the number. Inserting a column into a cell can be achieved by the insert operation in the above atomic operation.

[0236] If the number of columns in the total area after the split is greater than the number of columns represented by the specified cell layout, columns are selected from the columns in the total area after the split to be deleted based on the difference between the number of columns in the total area after the split and the number of columns represented by the specified cell layout.

[0237] Similarly, the selected columns can be randomly selected from the total area, or selected in order from left to right or from right to left, etc. Deleting a column can be achieved through the delete operation or merge operation in the above atomic operations.

[0238] After performing any insert operation, you can also perform a merge operation on the group of cells to be merged; wherein, each group of cells to be merged is at least two cells generated by performing the insert operation in addition to the total area, and each cell in each group of cells to be adjusted is the same cell before performing the insert operation. For example, if you need to adjust cell 1 in Figure 4 to the cell layout of Figure 5, you can first perform a row increase operation of adding 2 rows and a column increase operation of adding 2 columns on cell 1, and the intermediate result obtained can be shown in Figure 19. Then, perform a merge operation on other cells affected by the insert operation to obtain the cell layout of Figure 5. Figure 5 can be displayed directly in the design area without displaying Figure 19.

[0239] In another example, the target cell is cell 1 in Figure 8, and the specified cell layout indicated by the adjustment instruction is the "9 screen" in Figure 3. After executing step A231, the cell layout shown in Figure 9 is obtained. At this time, it can be determined that the number of rows contained in the total area after the split is 1 less than the number of rows represented by the specified cell layout, and the number of columns contained in the total area after the split is 1 less than the number of columns represented by the specified cell layout. Therefore, a row and a column can be inserted for the total area occupied by the target cell to obtain the cell layout shown in Figure 13.

[0240] In one implementation, the method further includes:

[0241] Step A234: If the adjusted total area still does not conform to the specified cell layout, then determine the portion of the cell layout of the adjusted total area that differs from the specified cell layout;

[0242] Step A235: Merge the cells included in the determined different parts according to the specified cell layout.

[0243] For example, the specified cell layout indicated by the adjustment instruction is "Template 1" in Figure 3, and after the above steps are adjusted, the cell layout in the total area is as shown in Figure 14, then it can be determined that the parts of the cell layout of the total area that are different from the specified cell layout are: cell A, cell B, cell C, cell E, cell F and cell G. At this time, according to the specified cell layout, the cells contained in the determined parts with differences can be merged, that is, cell A and cell E are merged, cell B and cell F are merged, and cell C and cell G are merged, so that the cells in the total area conform to the specified cell layout indicated by the adjustment instruction, as shown in Figure 15.

[0244] In this embodiment, by displaying cells for accommodating business function controls in the design area within the display interface, in response to receiving an adjustment instruction to select a specified cell layout from pre-provided cell layouts, the cell layout of the target cell is adjusted to the specified cell layout, and the cells in the design area can be flexibly adjusted quickly and freely according to the cell layout indicated by the adjustment instruction.

[0245] Based on the same inventive concept, an embodiment of the present application further provides a device for adjusting cells in a design area, as shown in FIG22 , the device comprising:

[0246] Display module 2201, used to display cells for accommodating business function controls in the design area within the display interface;

[0247] A first instruction receiving module 2202 is configured to receive a first adjustment instruction for a displayed first cell;

[0248] A first adjustment module 2203, if the first adjustment instruction indicates to split the first cell, displays a cell dividing line in the first cell according to the cell layout after the split indicated by the first adjustment instruction, so as to split the first cell into multiple cells;

[0249] Wherein, when the cell dividing line is a horizontal line, the position of the cell dividing line is determined based on the number of rows included in the cell layout after the splitting and the positions of the horizontal edges of other cells in the first row area to which the first cell belongs; the row area to which any cell belongs is the area between the lines to which the upper and lower edges of the cell belong;

[0250] When the cell dividing line is a vertical line, the position of the cell dividing line is determined based on the number of columns contained in the cell layout after the split, and the positions of the vertical edges of other cells in the first column area to which the first cell belongs; the column area to which any cell belongs is the area between the lines to which the left and right sides of the cell belong.

[0251] In an optional embodiment, the first adjustment module 2203 is specifically configured to, when the split cell layout includes multiple rows, determine, based on positions of other horizontal lines displayed in the first row area, a horizontal line having endpoints at points on the left and right sides of the design area as a first horizontal area dividing line; and display a horizontal line in the first cell based on the determined first horizontal area dividing line.

[0252] And / or, when the split cell layout contains multiple columns, based on the positions of other vertical lines displayed in the first column area, a vertical line with points in the upper and lower edges of the design area as endpoints is determined as the first vertical area dividing line; based on the determined first vertical area dividing line, a vertical line is displayed in the first cell.

[0253] In an optional embodiment, the first adjustment module 2203 is specifically configured to, if a first number of other horizontal lines displayed in the first row area is greater than a second number of horizontal lines included in the split cell layout, select the second number of horizontal area dividing lines from the determined first horizontal area dividing lines, and display portions of the second number of horizontal area dividing lines within the first cell;

[0254] If a first number of other horizontal lines displayed in the first row area is less than a second number of horizontal lines included in the split cell layout, display the portion of the determined first horizontal area dividing line within the first cell, and display a third number of horizontal lines within the first cell; wherein the third number is the difference between the second number and the first number;

[0255] And / or, displaying a vertical line in the first cell based on the determined first vertical area dividing line includes:

[0256] If a fourth number of other vertical lines displayed in the first column area is greater than a fifth number of vertical lines included in the cell layout after the splitting, selecting a fifth number of vertical area dividing lines from the determined first vertical area dividing lines, and displaying portions of the fifth number of vertical area dividing lines within the first cell;

[0257] If the fourth number of other vertical lines displayed in the first column area is less than the fifth number of vertical lines included in the split cell layout, the portion of the determined first vertical area dividing line within the first cell is displayed, and a sixth number of vertical lines is displayed within the first cell; wherein the sixth number is the difference between the fifth number and the fourth number.

[0258] In an optional embodiment, the device further comprises:

[0259] a second adjustment instruction receiving module, configured to receive a second adjustment instruction for a plurality of displayed adjacent second cells;

[0260] A second adjustment module is configured to split each second cell according to a horizontal line displayed in a second row area to which the second cell belongs and a vertical line displayed in a second column area to which the second cell belongs, to obtain a plurality of third cells if the second adjustment instruction indicates that each second cell is adjusted to a specified cell layout.

[0261] In an optional embodiment, the device further comprises:

[0262] The third adjustment module is used to split and / or merge some cells in each of the split third cells according to the specified cell layout if the third cells obtained by splitting do not conform to the specified cell layout, so that the obtained multiple cells conform to the specified cell layout.

[0263] In an optional embodiment, the device further comprises:

[0264] a row adding module configured to, if the first adjustment instruction indicates adding at least one row of cells to the first cell, determine, based on the positions of the upper and lower edges of the first cell, a horizontal line with endpoints at points on the left and right edges of the design area as a second horizontal area dividing line; and display the second horizontal area dividing line within the design area;

[0265] a column adding module configured to, if the first adjustment instruction indicates adding at least one column of cells to the first cell, determine, based on the positions of the left and right sides of the first cell, a vertical line with endpoints at points on the upper and lower sides of the design area as a second vertical area dividing line; and display the second vertical area dividing line in the design area;

[0266] a row deletion module, configured to delete, within the design area, a horizontal line between a row area to which the first cell belongs and an adjacent row area if the first adjustment instruction indicates deleting a row of cells for the first cell;

[0267] The column deletion module deletes a vertical line between the column area to which the first cell belongs and an adjacent column area within the design area if the first adjustment instruction indicates deleting a column of cells for the first cell.

[0268] In an optional embodiment, the device further comprises:

[0269] A merging module is configured to delete a common edge between every two adjacent cells in each second cell within the design area if the second adjustment instruction indicates that the second cells are to be merged.

[0270] In an optional embodiment, a horizontal split mark is displayed on the vertical edge of the design area, and the horizontal split mark is used to indicate: the position of the horizontal edge of the cell in the row area to which the displayed cell belongs; a vertical split mark is displayed on the horizontal edge of the design area, and the vertical split mark is used to indicate: the position of the vertical edge of the cell in the column area to which the displayed cell belongs; the device further includes:

[0271] a mark deletion module, configured to delete, for any horizontal segmentation mark, from the display interface when no horizontal edge exists at the position indicated by the horizontal segmentation mark;

[0272] And / or, for any vertical division mark, when there is no vertical edge at the position indicated by the vertical division mark, the vertical division mark is deleted from the display interface.

[0273] In an optional embodiment, a cell adjustment function area is further provided in the display interface, and at least one adjustment function control is displayed in the cell adjustment function area. Any adjustment function control is used to respond to a user operation to trigger an adjustment instruction.

[0274] In an optional embodiment, a business function area is further provided in the display interface, at least one business function control is displayed in the business function area, and the device further includes:

[0275] The control adding module is configured to, upon receiving a layout instruction for any business function control, add the business function control to a cell indicated by the layout instruction in the design area, so as to generate a user interface including the business function control.

[0276] The present application also provides an electronic device, as shown in FIG23 , including:

[0277] Memory 2301, used for storing computer programs;

[0278] The processor 2302 is configured to implement any of the above-mentioned methods for adjusting cells in the design area when executing the program stored in the memory 2301.

[0279] Furthermore, the electronic device may further include a communication bus and / or a communication interface, and the processor 2302, the communication interface, and the memory 2301 communicate with each other via the communication bus.

[0280] The communication bus mentioned in the electronic device mentioned above may be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus. This communication bus can be divided into an address bus, a data bus, a control bus, etc. For ease of illustration, only one thick line is used in the figure, but this does not mean that there is only one bus or only one type of bus.

[0281] The communication interface is used for communication between the above electronic device and other devices.

[0282] The memory may include random access memory (RAM) or non-volatile memory (NVM), such as at least one disk storage. Alternatively, the memory may be at least one storage device located away from the processor.

[0283] The above-mentioned processor can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, and discrete hardware components.

[0284] In another embodiment provided in the present application, a non-temporary computer-readable storage medium is also provided, which stores a computer program. When the computer program is executed by a processor, the steps of the method for adjusting cells in any of the above-mentioned design areas are implemented.

[0285] In another embodiment provided by the present application, a computer program product including instructions is also provided, which, when executed on a computer, enables the computer to execute the method for adjusting cells in any design area in the above embodiments.

[0286] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When software is used for implementation, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in the embodiment of the present application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions can be stored in a non-temporary computer-readable storage medium or transmitted from one non-temporary computer-readable storage medium to another non-temporary computer-readable storage medium. For example, the computer instructions can be transmitted from a website, computer, server or data center to another website, computer, server or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) mode. The non-temporary computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that includes one or more available media integrations. The available medium may be a magnetic medium (eg, a floppy disk, a hard disk, a magnetic tape), an optical medium (eg, a DVD), or a solid state disk (SSD).

[0287] It should be noted that, in this document, relational terms such as first and second, etc., are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply the existence of any such actual relationship or order between these entities or operations. Moreover, the terms "comprises," "comprising," or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article, or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, article, or device. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of other identical elements in the process, method, article, or device comprising the element.

[0288] Each embodiment in this specification is described in a related manner. Similar portions between the various embodiments can be referenced to each other. Each embodiment focuses on the differences from other embodiments. In particular, the device and electronic device embodiments are generally similar to the method embodiments, so their descriptions are relatively simple. For related portions, refer to the descriptions of the method embodiments.

[0289] The above description is only a preferred embodiment of the present application and is not intended to limit the scope of protection of the present application. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present application are included in the scope of protection of the present application.

[0290] The above description is only a preferred embodiment of the present application and is not intended to limit the present application. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present application shall be included in the scope of protection of the present application.

Claims

1. A method for adjusting cells in a design area, the method comprising: Displaying cells for accommodating business function controls in a design area within a display interface; receiving a first adjustment instruction for a first displayed cell; If the first adjustment instruction instructs to split the first cell, displaying a cell dividing line in the first cell according to the cell layout after the split indicated by the first adjustment instruction, so as to split the first cell into a plurality of cells; Wherein, when the cell dividing line is a horizontal line, the position of the cell dividing line is determined based on the number of rows included in the cell layout after the splitting and the positions of the horizontal edges of other cells in the first row area to which the first cell belongs; the row area to which any cell belongs is the area between the lines to which the upper and lower edges of the cell belong; When the cell dividing line is a vertical line, the position of the cell dividing line is determined based on the number of columns contained in the cell layout after the split, and the positions of the vertical edges of other cells in the first column area to which the first cell belongs; the column area to which any cell belongs is the area between the lines to which the left and right sides of the cell belong.

2. The method according to claim 1, wherein The displaying of a cell dividing line in the first cell according to the split cell layout indicated by the first adjustment instruction includes: When the split cell layout includes multiple rows, determining, based on positions of other horizontal lines displayed in the first row area, a horizontal line with endpoints at points on the left and right sides of the design area as a first horizontal area dividing line; and displaying a horizontal line in the first cell based on the determined first horizontal area dividing line; and / or, When the split cell layout contains multiple columns, a vertical line with points in the upper and lower sides of the design area as endpoints is determined as the first vertical area dividing line based on the positions of other vertical lines displayed in the first column area; based on the determined first vertical area dividing line, a vertical line is displayed in the first cell.

3. The method according to claim 2, wherein: The displaying a horizontal line in the first cell based on the determined first horizontal area dividing line includes: If a first number of other horizontal lines displayed in the first row area is greater than a second number of horizontal lines included in the split cell layout, selecting the second number of horizontal area dividing lines from the determined first horizontal area dividing lines, and displaying portions of the second number of horizontal area dividing lines within the first cell; If a first number of other horizontal lines displayed in the first row area is less than a second number of horizontal lines included in the split cell layout, display the portion of the determined first horizontal area dividing line within the first cell, and display a third number of horizontal lines within the first cell; wherein the third number is the difference between the second number and the first number; and / or, The displaying a vertical line in the first cell based on the determined first vertical area dividing line includes: If a fourth number of other vertical lines displayed in the first column area is greater than a fifth number of vertical lines included in the cell layout after the splitting, selecting a fifth number of vertical area dividing lines from the determined first vertical area dividing lines, and displaying portions of the fifth number of vertical area dividing lines within the first cell; If the fourth number of other vertical lines displayed in the first column area is less than the fifth number of vertical lines included in the split cell layout, the portion of the determined first vertical area dividing line within the first cell is displayed, and a sixth number of vertical lines is displayed within the first cell; wherein the sixth number is the difference between the fifth number and the fourth number.

4. The method according to claim 1, wherein The method further comprises: receiving a second adjustment instruction for the displayed plurality of adjacent second cells; If the second adjustment instruction indicates that each second cell is adjusted to a specified cell layout, then for each second cell, the second cell is split according to the horizontal line displayed in the second row area to which the second cell belongs and the vertical line displayed in the second column area to which the second cell belongs, to obtain multiple third cells.

5. The method according to claim 4, wherein The method further comprises: If the third cells obtained by splitting do not conform to the specified cell layout, some cells in the third cells obtained by splitting are split and / or merged according to the specified cell layout so that the obtained multiple cells conform to the specified cell layout.

6. The method according to claim 1, wherein The method further comprises: If the first adjustment instruction indicates adding at least one row of cells to the first cell, determining, based on the positions of the upper and lower edges of the first cell, a horizontal line with endpoints at points on the left and right edges of the design area as a second horizontal area dividing line; and displaying the second horizontal area dividing line within the design area; If the first adjustment instruction indicates adding at least one column of cells to the first cell, determining, based on the positions of the left and right sides of the first cell, a vertical line with endpoints at points on the upper and lower sides of the design area as a second vertical area dividing line; and displaying the second vertical area dividing line in the design area; If the first adjustment instruction instructs to delete a row of cells for the first cell, within the design area, a horizontal line between the row area to which the first cell belongs and an adjacent row area is deleted; If the first adjustment instruction instructs to delete a column of cells for the first cell, within the design area, a vertical line between the column area to which the first cell belongs and an adjacent column area is deleted.

7. The method according to claim 4, wherein: The method further comprises: If the second adjustment instruction instructs to merge the second cells, in the design area, the common edge between every two adjacent cells in the second cells is deleted.

8. The method according to claim 1, wherein A horizontal split mark is displayed on the vertical edge of the design area, and the horizontal split mark is used to indicate the position of the horizontal edge of the cell in the row area to which the displayed cell belongs; a vertical split mark is displayed on the horizontal edge of the design area, and the vertical split mark is used to indicate the position of the vertical edge of the cell in the column area to which the displayed cell belongs; the method further includes: For any horizontal division mark, when there is no horizontal edge at the position indicated by the horizontal division mark, deleting the horizontal division mark from the display interface; and / or, For any vertical division mark, when there is no vertical edge at the position indicated by the vertical division mark, the vertical division mark is deleted from the display interface.

9. The method according to any one of claims 1 to 8, wherein: A cell adjustment function area is further provided in the display interface. At least one adjustment function control is displayed in the cell adjustment function area. Any adjustment function control is used to respond to a user's operation to trigger an adjustment instruction.

10. The method according to any one of claims 1 to 8, wherein: The display interface is further provided with a business function area, wherein at least one business function control is displayed in the business function area, and the method further includes: When a layout instruction for any business function control is received, the business function control is added to the cell indicated by the layout instruction in the design area to generate a user interface including the business function control.

11. A method for adjusting cells in a design area, the method comprising: Displaying cells for accommodating business function controls in a design area within a display interface; In response to receiving an adjustment instruction to select a specified cell layout from pre-provided cell layouts, adjusting the cell layout of the target cell to the specified cell layout; The target cell is at least one cell selected in the design area.

12. The method according to claim 11, wherein The adjusting the layout of the target cell to the designated cell layout includes: Determine the position of the horizontal dividing line for dividing the total area occupied by the target cell according to the position of each horizontal line in the row area to which the target cell belongs; the row area to which any cell belongs is: the area between the lines to which the upper and lower sides of the cell belong; Determine the position of the vertical dividing line for dividing the target cell according to the position of each vertical line in the column area to which the target cell belongs; the column area to which any cell belongs is: the area between the lines to which the left and right sides of the cell belong; Based on the determined horizontal dividing line position and vertical dividing line position, the total area occupied by the target cell is divided according to the specified cell layout to obtain cells of the specified cell layout.

13. The method according to claim 12, wherein: The dividing the total area occupied by the target cell according to the specified cell layout based on the determined horizontal dividing line position and vertical dividing line position includes: Splitting the total area occupied by the target cell according to the determined horizontal dividing line position and vertical dividing line position; If the number of rows included in the designated cell layout is different from the number of rows included in the total area after the split, the number of rows included in the total area after the split is adjusted so that the number of rows included in the adjusted total area is the same as the number of rows included in the designated cell layout; If the number of columns included in the specified cell layout is different from the number of columns included in the total area after the split, the number of columns included in the total area after the split is adjusted so that the number of columns included in the adjusted total area is the same as the number of columns included in the specified cell layout.

14. The method according to claim 13, wherein The number of rows contained in the total area after the adjustment and splitting includes: If the number of rows included in the total area after the split is less than the number of rows represented by the specified cell layout, at least one row of cells is determined in the total area, and rows are inserted into the determined cells according to the difference between the number of rows represented by the specified cell layout and the number of rows included in the total area after the split; If the number of rows contained in the total area after the split is greater than the number of rows represented by the specified cell layout, rows are selected from the rows contained in the total area after the split for deletion according to the difference between the number of rows contained in the total area after the split and the number of rows represented by the specified cell layout.

15. The method according to claim 13, wherein: The number of columns contained in the total area after the adjustment and splitting includes: If the number of columns included in the total area after the split is less than the number of columns represented by the specified cell layout, at least one column of cells is determined in the total area, and columns are inserted into the determined cells according to the difference between the number of columns represented by the specified cell layout and the number of columns included in the total area after the split; If the number of columns contained in the total area after the split is greater than the number of columns represented by the specified cell layout, columns are selected from the columns contained in the total area after the split for deletion according to the difference between the number of columns contained in the total area after the split and the number of columns represented by the specified cell layout.

16. The method according to claim 13, wherein: The method further comprises: If the adjusted total area still does not conform to the specified cell layout, determining a portion of the adjusted cell layout of the total area that is different from the specified cell layout; According to the specified cell layout, cells included in the determined different parts are merged.

17. A device for adjusting cells in a design area, the device comprising: A display module is used to display cells for accommodating business function controls in a design area within a display interface; A first instruction receiving module, configured to receive a first adjustment instruction for a displayed first cell; a first adjustment module configured to, if the first adjustment instruction indicates to split the first cell, display a cell dividing line in the first cell according to the cell layout after the split indicated by the first adjustment instruction, so as to split the first cell into a plurality of cells; Wherein, when the cell dividing line is a horizontal line, the position of the cell dividing line is determined based on the number of rows included in the cell layout after the splitting and the positions of the horizontal edges of other cells in the first row area to which the first cell belongs; the row area to which any cell belongs is the area between the lines to which the upper and lower edges of the cell belong; When the cell dividing line is a vertical line, the position of the cell dividing line is determined based on the number of columns contained in the cell layout after the split, and the positions of the vertical edges of other cells in the first column area to which the first cell belongs; the column area to which any cell belongs is the area between the lines to which the left and right sides of the cell belong.

18. An electronic device comprising: Memory for storing computer programs; A processor, configured to implement the method described in any one of claims 1 to 10 or any one of claims 11 to 16 when executing a program stored in a memory.

19. A non-transitory computer-readable storage medium, wherein a computer program is stored in the non-transitory computer-readable storage medium, wherein the computer program implements the method according to any one of claims 1 to 10 or any one of claims 11 to 16 when executed by a processor.