A flexible grid control design method, device and medium based on Android platform

Abstract

The present invention provides a flexible grid control design method based on the Android platform, comprising: initializing configuration parameters of a list control; importing valid data into a valid block data list; determining whether position information exists, and if so, proceeding to step 4; otherwise, performing automatic sorting, obtaining position information, and importing valid data; generating a full basic block data list, and importing valid data into valid blocks based on position information; importing blank data into blank blocks; converting the full basic block data list into a grid data list; rendering the grid data list to complete drawing; rendering the grid control view to complete drawing; when a valid block is dragged, the valid block is used as the dragged block, the optimal matching position of the dragged block is calculated, and the matching basic block is re-rendered; after exchanging the dragged block and the matching position, the full basic block list is regenerated, and proceeding to step 6. The present invention also provides an electronic device and medium, providing more reliable options for product design.

Description

Technical Field

[0001] The present invention relates to the field of control technology, and in particular to a flexible grid control design method, device and medium based on an Android platform. Background Art

[0002] Controls are visual components on the Android system that present data to users as views and manipulate data based on user actions. Examples include a login button, a text field, and a list. Currently, there are numerous controls on the Android system, most of which are designed based on specific requirements. Normally, achieving a specific effect requires a complete redesign of the control. The difficulty in designing controls lies in leveraging the characteristics of the Android system to design the control view, modifying the view based on data changes, and ensuring the stability and efficiency of the control.

[0003] Currently, the only known drag-sort list control is RecyclerView, which appears in Android 5.0 as a component of support-v7. It implements drag-sorting of child controls, such as Figure 1 As shown, child controls 0, 1, 2, etc. can be dragged and swapped. However, its limitations are that all child controls must be the same size, and it does not support paging and grid layout, and the customization space is too small. Summary of the Invention

[0004] To solve the above problems, the present invention provides a flexible grid control design method based on the Android platform, which is a highly flexible list control. The control supports paging grid sorting, supports sorting sub-controls of different sizes, supports automatic sorting and importing of sub-controls, and supports customizing the number of rows and columns of grid pages. Each sub-control is also independent and can be filled with different views and handle click events separately.

[0005] The present invention is achieved through the following technical solutions:

[0006] The present invention provides a flexible grid control design method based on the Android platform, the method comprising the following steps:

[0007] Step 1. Initialize the configuration parameters of the list control;

[0008] Step 2: Import multiple valid data into the valid block data list of the list control;

[0009] Step 3: Determine whether there is location information in the valid block data list. If so, proceed to step 4; otherwise, perform automatic sorting, obtain the location information of each valid data, and import it into the corresponding valid data;

[0010] Step 4: Generate a full list of basic block data based on the configuration parameters, treat the basic blocks in the full list of basic block data to be imported with valid data as valid blocks, and import the corresponding valid data according to the location information; treat the basic blocks that have not been imported with valid data as blank blocks, and import the blank data;

[0011] Step 5: Convert the full basic block data list into a grid data list based on the location information;

[0012] Step 6: The list adapter renders each grid control according to the grid data list, completing the drawing of the grid data list; the grid adapter renders the block view of the basic block according to the full basic block data list, completing the drawing of the grid control view;

[0013] Step 7: When a valid block is dragged, the valid block is used as the drag block, the best matching position of the drag block is calculated, and the matching basic block is re-rendered;

[0014] Step 8: After swapping the dragged block and the matching position, regenerate the full basic block list and proceed to step 6.

[0015] Furthermore, the configuration parameters include list control width, list control height, grid page row number, grid page column number, grid control width, grid control height, basic block width, basic block height, block spacing, drag block background color and matched block background color.

[0016] Furthermore, the automatic sorting in step 3 is performed to obtain the location information of each valid data and import it into the corresponding valid data, which specifically includes:

[0017] Step 31: Construct a three-dimensional position table based on the arrangement of the grid control and the basic blocks, where the first dimension is the grid, the second dimension is the grid rows, and the third dimension is the grid columns;

[0018] Step 32: Arrange the position of each valid data in the valid block data list in descending order according to the occupied size of each valid data;

[0019] Step 33: traverse and extract valid data from the valid block data list according to the arrangement order, and end the process after traversing all valid data;

[0020] Step 34: Determine whether the number of rows occupied by the traversed valid data is less than or equal to the number of rows in the grid control and the number of columns occupied by the valid data is less than or equal to the number of columns in the grid control. If so, proceed to step 35; otherwise, discard the valid data and return to step 33 to extract the next valid data.

[0021] Step 35: Enter the grid dimension step by step according to the order of the three-dimensional position table. After traversing all the grid positions, abandon the valid data and return to step 33 to extract the next valid data.

[0022] Step 36: Enter the row position step by step according to the row order of the entered grid. After traversing all rows, return to step 35 to enter the next grid;

[0023] Step 37: Calculate the position of the first continuous blank area in the current row whose length is greater than or equal to the number of columns occupied by the valid data, then proceed to step 38; otherwise, return to step 36 and proceed to the next row;

[0024] Step 38: The leftmost basic block position of the calculated continuous blank area is regarded as the current position. A radial range is formed from the current position to the lower right. A rectangular range with the same size as the valid data is found within the radial range. The current position is within the rectangular range. It is determined whether the rectangular range is not occupied. If so, the position of the rectangular range is set as the position to be filled with the valid data; otherwise, the process returns to step 36 and proceeds to the position of the next row.

[0025] Step 39: Mark the entire rectangular range as occupied, and return to step 33 to extract the next valid data; and so on, obtain the position information of each valid data, and import each position information into each corresponding valid data.

[0026] Furthermore, the step 4 specifically includes:

[0027] Step 41: Generate a full list of basic blocks according to the configuration parameters;

[0028] Step 42: Access each basic block in the full basic block list in order, and search the valid block data list for the same position information as the current basic block based on the current basic block's position. If so, the current basic block is considered a valid block and needs to import valid data, and the process proceeds to step 43. Otherwise, the current basic block is considered a blank block and does not need to import valid data, and the process proceeds to step 44.

[0029] Step 43: Find the valid data corresponding to the position information, and import the valid data into the current basic block according to the position information;

[0030] Step 44: Generate a blank data and import it into the current basic block.

[0031] Furthermore, the step 6 specifically includes:

[0032] Step 61: When the list adapter enters each grid view callback in sequence, the grid data at the corresponding position of the grid data list is obtained according to the callback position information, and a grid view is created;

[0033] Step 62: When the grid adapter enters each basic block view callback in sequence, the basic block data at the corresponding position is obtained from the basic block list within the grid data according to the callback position information;

[0034] Step 63: Obtain the size type of the basic block according to the basic block data, calculate the length and width of the basic block, return the length and width of the basic block to the outside through a callback request, obtain the block view control corresponding to the basic block from the outside, and set the block view control to the corresponding size;

[0035] Step 64: Setting the click and touch function of the basic block according to the block view control;

[0036] Step 65: Calculate a list of locations of other basic blocks that need to be preempted based on the size and type of the basic block;

[0037] Step 66: Mark all basic blocks that need to be preempted as preempted according to the location list;

[0038] Step 67: When a dragging operation is in progress, determine whether the current basic block is matched. If so, set the base color of the basic block to the matching background color; otherwise, set the base color of the basic block to the transparent background color, and proceed to step 68.

[0039] Step 68: Determine whether the current basic block is preempted. If so, set the basic block as a hidden block; otherwise, set the basic block as a displayed block.

[0040] Furthermore, the step 7 specifically includes:

[0041] Step 71: When a valid block is long pressed, a drag control is generated according to the valid block. At this time, the valid block is a drag block.

[0042] Step 72: When the drag control is dragged, the best matching position for exchanging with the drag block is calculated, and the matched basic block is re-rendered according to the matching position;

[0043] Step 73: Determine whether the drag control is released. If so, destroy the drag control and go to step 8; otherwise, return to step 72.

[0044] Furthermore, the step 72 of calculating the best matching position with the valid block specifically includes:

[0045] Step 721: Calculate the matching range to be occupied according to the size of the drag block;

[0046] Step 722: Determine a matching range that satisfies the matching condition among all matching ranges according to the matching condition; the basic block within the matching range must meet one of the following matching conditions: the basic block within the matching range is a blank block, or all spatial positions of valid blocks within the matching range are contained in the matching position to be occupied by the dragging block, or the basic block within the matching range is located at the original position of the dragging block.

[0047] Step 723: When dragging the drag control, the coordinates of the upper left corner of the drag block are used as the target coordinates, that is, the base block position where the target coordinates are located is used to determine the best order in which the drag block should be placed;

[0048] Step 724: Determine the best matching position of the drag block according to the matching range that meets the matching condition and the best preferred order.

[0049] Furthermore, the step 8 of exchanging the drag block and the matching position specifically includes:

[0050] Step 81: Determine whether the matching position overlaps with the original position of the dragged block. If so, proceed to step 82; otherwise, proceed to step 83.

[0051] Step 82: Calculate the number of rows and columns of the overlapping part, and substitute the corresponding formulas according to the different numbers of rows and columns to calculate the new row and column positions of the valid block at the matching position. Specifically:

[0052] If the number of rows and columns in the overlapping part is odd, the new row position of the valid block at the matching position and the new column position of the dragged block are calculated as follows:

[0053] The new row position of the valid block at the matching position = the center axis row position + (center axis row position - matching block row position) - (number of rows of the matching block - 1),

[0054] The new column position of the valid block at the matching position = the central axis column position + (central axis column position - matching block column position) - (column number of matching block - 1);

[0055] If the number of rows in the overlapped part is even and the number of columns is odd, the new row position and column position of the valid block at the matching position are calculated as follows:

[0056] The new row position of the valid block at the matching position = the row position of the center axis 2 + (the row position of the center axis 1 - the row position of the matching block) - (the number of rows of the matching block - 1),

[0057] The new column position of the valid block at the matching position = the central axis column position + (central axis column position - matching block column position) - (column number of matching block - 1);

[0058] If the number of rows in the overlapped part is odd and the number of columns is even, the new row position and column position of the valid block at the matching position are calculated as follows:

[0059] The new row position of the valid block at the matching position = the center axis row position + (center axis row position - matching block row position) - (number of rows of the matching block - 1),

[0060] The new column position of the valid block at the matching position = the column position of the central axis 2 + (the column position of the central axis 1 - the column position of the matching block) - (the number of columns of the matching block - 1);

[0061] If the number of rows and columns of the overlapping part is even, the new row position and column position of the valid block at the matching position are calculated as follows:

[0062] The new row position of the valid block at the matching position = the row position of the center axis 2 + (the row position of the center axis 1 - the row position of the matching block) - (the number of rows of the matching block - 1),

[0063] The new column position of the valid block at the matching position = the column position of the central axis 2 + (the column position of the central axis 1 - the column position of the matching block) - (the number of columns of the matching block - 1);

[0064] Step 83: Calculate the new row position and column position of the valid block at the matching position according to the formula. The calculation formula for the new row position and column position of the valid block at the matching position is as follows:

[0065] The new row position of the valid block at the matching position = the original row position of the dragged block + (matching block row position - the first row position of the matching list),

[0066] The new column position of the valid block at the matching position = the original column position of the dragged block + (the matching block column position - the first column position of the matching list);

[0067] Step 84: First, move the valid block at the matching position out, then place the drag block back into the matching position based on the calculated new row and column positions of the drag block, and finally place the moved valid block back into the original position of the drag block based on the calculated new row and column positions of the valid block at the matching position.

[0068] The present invention also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and runnable on the processor. When the processor executes the program, it implements a flexible grid control design method based on the Android platform as described above.

[0069] The present invention also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the above-mentioned flexible grid control design method based on the Android platform.

[0070] The beneficial effects of the present invention are:

[0071] 1. This control is designed with valid blocks and blank blocks. The valid block can be the size of a basic block or a combination of multiple basic block sizes, so that sub-controls can have different sizes and can support sorting of sub-controls of different sizes, which makes up for the shortcoming that currently known controls cannot sort controls of different sizes.

[0072] 2. This control supports automatic arrangement and import of sub-controls, and supports paging grid sorting, which can save users the steps of arranging controls;

[0073] 3. Initialize the control's configuration parameters according to user needs. This control supports customizing the number of rows and columns of lists, grid pages, and basic blocks. Using this control can enhance the user experience. It is simple and clear to use and provides users with greater customization space.

[0074] 4. Each basic block will call back getView, which will trigger an external request for the block view. This provides independence for each basic block view control; that is, each child control also has independence, can be filled with different views, and handle click events separately, providing more reliable options for product design. BRIEF DESCRIPTION OF THE DRAWINGS

[0075] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the following briefly introduces the drawings required for use in the embodiments. It should be understood that the following drawings only illustrate certain embodiments of the present invention and therefore should not be regarded as limiting the scope. For ordinary technicians in this field, other relevant drawings can be obtained based on these drawings without paying any creative work.

[0076] Figure 1 It is a control block diagram of the prior art.

[0077] Figure 2 This is an overall flow chart of a flexible grid control design method based on the Android platform provided by an embodiment of the present invention.

[0078] Figure 3 This is a flowchart of constructing basic block views during view creation, refreshing, and dragging in a flexible grid control design method based on the Android platform provided by an embodiment of the present invention.

[0079] Figure 4This is a flowchart of an effective block dragging process in a flexible grid control design method based on an Android platform provided by an embodiment of the present invention.

[0080] Figure 5 This is a flowchart of automatically sorting and filling valid data in a flexible grid control design method based on the Android platform provided by an embodiment of the present invention.

[0081] Figure 6 This is a conceptual view of the control in the embodiment of the present invention.

[0082] Figure 7 This is a code architecture diagram of the control in an embodiment of the present invention.

[0083] Figure 8 It is a structural diagram of BaseBlockView in an embodiment of the present invention.

[0084] Figure 9 This is a structural diagram of BlockData, BlockDataProcessExt, and BlockDataLayoutInfo in an embodiment of the present invention.

[0085] Figure 10 This is a structural diagram of BlockSizeType and BlockIndex in an embodiment of the present invention.

[0086] Figure 11 It is a structural diagram of GridDate in an embodiment of the present invention.

[0087] Figure 12 It is a structural diagram of GbManager in an embodiment of the present invention.

[0088] Figure 13 It is a structural diagram of GbListView in an embodiment of the present invention.

[0089] Figure 14 It is a structural diagram of GbView in an embodiment of the present invention.

[0090] Figure 15 The distribution of valid blocks and blank blocks in the 5×3 grid in the embodiment of the present invention is Figure 1 .

[0091] Figure 16 Schematic diagram of quadrants in an embodiment of the present invention.

[0092] Figure 17 The distribution of valid blocks and blank blocks in the 5×3 grid in the embodiment of the present invention is Figure 2 .

[0093] Figure 18 The distribution of valid blocks and blank blocks in the 6×5 grid in the embodiment of the present invention is Figure 1 .

[0094] Figure 19 The distribution of valid blocks and blank blocks in the 6×5 grid in the embodiment of the present invention is Figure 2 .

[0095] Figure 20 The distribution of valid blocks and blank blocks in the 6×5 grid in the embodiment of the present invention is Figure 3 .

[0096] Figure 21 The distribution of valid blocks and blank blocks in the 6×5 grid in the embodiment of the present invention is Figure 4 .

[0097] Figure 22 is a schematic diagram of an electronic device provided by an embodiment of the present invention.

[0098] Figure 23 It is a schematic diagram of a computer-readable storage medium provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0099] In order to make the purpose, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention. Therefore, the following detailed description of the embodiments of the present invention provided in the drawings is not intended to limit the scope of the invention for which protection is sought, but merely represents selected embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0100] like Figures 2 to 5 As shown, the present invention provides a flexible grid control design method based on the Android platform, the method comprising the following steps:

[0101] Step 1. Initialize the configuration parameters of the list control;

[0102] In this embodiment, the configuration parameters include list control width, list control height, grid page row number, grid page column number, grid control width, grid control height, basic block width, basic block height, block spacing, drag block background color, and matched block background color;

[0103] The size of the list control is determined according to the list control width and the list control height, and a list control is created; the paging of the grid control is determined under the list control according to the number of grid page rows and the number of grid page columns, that is, the number of rows and columns of the grid control to be created; the size of each page of the grid control is determined according to the grid control width and the grid control height, and a grid control of the corresponding number of pages is created under the list control; the distribution of basic blocks under each page of the grid control is determined according to the basic block width, the basic block height and the block spacing, and the basic blocks are created under the grid control; the base color of the dragging block and the base color of the matched block are used to render the basic blocks, so that users can more intuitively distinguish the dragging block from the matching block;

[0104] Step 2: Import the multiple valid data provided by the user into the valid block data list of the list control;

[0105] In this embodiment, the valid data provided by the user is imported into the valid block data list according to the corresponding position;

[0106] For example: a 3×3 (3 rows and 3 columns) grid has positions 0, 1, 2, 3, 4, 5, 6, 7, and 8 respectively. A vertical valid block data list is established accordingly. The valid block data list has positions 0, 1, 2, 3, 4, 5, 6, 7, and 8 from top to bottom respectively. There are 3 valid data in the valid data provided by the user, namely valid data A, valid data B, and valid data C, which are located at positions 0, 2, and 3 respectively. Valid data A occupies 2 basic block sizes, which is a 1 row and 2 column structure. Valid data B occupies 2 basic block sizes, which is a 2 row and 1 column structure. Valid data C occupies 1 basic block size, which is a 1 row and 1 column structure. At this time, valid data A is imported into position 0 of the valid block data list (occupying positions 0, 1), valid data B is imported into position 2 of the valid block data list (occupying positions 2, 5), and valid data C is imported into position 3 of the valid block data list (only occupying position 3). If the number of all valid data is not greater than the number of valid block data list positions, it can be directly imported into the position. If the number of all valid data is greater than the number of valid block data list positions, the excess valid data will be filtered and not imported into the position. The purpose of this is to clearly and conveniently know where the valid data should be placed so that it can be better filled into the corresponding basic block of the grid control.

[0107] Step 3: Determine whether the valid block data list contains location information. If so, proceed to step 4. Otherwise, perform automatic sorting, obtain the location information of each valid data, and import the location information into the corresponding valid data. The purpose of this step is to obtain the location information of each valid data, so as to facilitate the subsequent import of the valid data into the basic block at the corresponding position through the location information.

[0108] In this embodiment, the automatic sorting in this step, obtaining the location information of each valid data and importing it into the corresponding valid data, specifically includes:

[0109] Step 31: Construct a three-dimensional position table based on the arrangement of the grid control and the basic blocks, where the first dimension is the grid, the second dimension is the grid rows, and the third dimension is the grid columns;

[0110] For example, if two grids are established and the basic block of each grid is 3×3 (3 rows and 3 columns), the constructed three-dimensional grid position table is: 0,(00), 0,(01), 0,(02), 0,(10), 0,(11), 0,(12), 0,(20), 0,(21), 0,(22), 1,(00), 1,(01), 1,(02), 1,(10), 1,(11), 1,(12), 1,(20), 1,(21), and 1,(22);

[0111] That is (0, 0, 0), (0, 0, 1), (0, 0, 2), (0, 1, 0), (0, 1, 1), (0, 1, 2), (0, 2, 0), (0, 2, 1), (0, 2, 2), (1, 0, 0), (1, 0, 1), (1, 0, 2), (1, 1, 0), (1, 1, 1), (1, 1, 2), (1, 2, 0), (1, 2, 1), (1, 2, 2);

[0117] Step 32: Arrange the position of each valid data in the valid block data list in descending order according to the occupied size of each valid data;

[0118] In this embodiment, in step 32, if the occupied sizes are the same and larger than the size of one basic block, the rows occupied by the valid data are arranged in ascending order;

[0119] Assume that there are three valid data, namely valid data A, valid data B and valid data C. Valid data A occupies 2 basic block sizes and has a 1-row 2-column structure. Valid data B occupies 2 basic block sizes and has a 2-row 1-column structure. Valid data C occupies 1 basic block size and has a 1-row 1-column structure. At this time, the size occupied by valid data A is equal to the size occupied by valid data B, and both are larger than the size occupied by valid data C. Valid data A and valid data B are sorted according to the number of rows, with valid data A preceding valid data B. The overall sorting is: valid data A > valid data B > valid data C.

[0120] Step 33: traverse and extract valid data from the valid block data list according to the arrangement order, and end the process after traversing all valid data;

[0121] Step 34: Determine whether the number of rows occupied by the traversed valid data is less than or equal to the number of rows in the grid control and the number of columns occupied by the valid data is less than or equal to the number of columns in the grid control. If so, proceed to step 35; otherwise, discard the valid data and return to step 33 to extract the next valid data.

[0122] Step 35: Enter the grid dimension step by step according to the order of the three-dimensional position table. After traversing all the grid positions, abandon the valid data and return to step 33 to extract the next valid data.

[0123] Step 36: Enter the row position step by step according to the row order of the entered grid. After traversing all rows, return to step 35 to enter the next grid;

[0124] Step 37: Calculate the position of the first continuous blank area in the current row whose length is greater than or equal to the number of columns occupied by the valid data, then proceed to step 38; otherwise, return to step 36 and proceed to the next row;

[0125] Step 38: The leftmost basic block position of the calculated continuous blank area is regarded as the current position. A radial range is formed from the current position to the lower right. A rectangular range with the same size as the valid data is found within the radial range. The current position is within the rectangular range. It is determined whether the rectangular range is not occupied. If so, the position of the rectangular range is set as the position to be filled with the valid data; otherwise, the process returns to step 36 and proceeds to the position of the next row.

[0126] Step 39: Mark the entire rectangular range as occupied, and return to step 33 to extract the next valid data; and so on, obtain the position information of each valid data, and import each position information into each corresponding valid data.

[0127] In this embodiment, to automatically fill the sorted valid data A, valid data B, and valid data C into the grid, first ① extract the valid data A. The valid data A has a 1-row, 2-column structure, and the grid has a 3-row, 3-column structure. If it is determined that the number of rows occupied by the valid data A is less than the number of rows of the basic block and the number of columns occupied by the valid data A is less than the number of columns of the basic block, it means that the size of the valid data A is smaller than the grid size and can be filled into the basic block of the grid.

[0128] Then, according to the three-dimensional position table, the first grid control is entered, and the position of the first row of basic blocks under the first grid control is entered, that is, the position of 0, (00), 0, (01), 0, (02). At this time, the row has not been filled with valid data. It is determined that the maximum continuous blank length of the row at the current row position is that it can occupy 3 basic blocks, and the number of columns occupied by valid data A is 2. In other words, the maximum continuous blank length of the row at the current row position is greater than the number of columns occupied by the valid data A, and there is only one position in the row that meets this condition.

[0129] Then, the leftmost basic block position in the row with the largest continuous blank length of the current row position is regarded as the current position, that is, 0, (00) is the current position; a radiation range is formed by radiating from the current position to the lower right, and a rectangular range with the same size as the occupied size of the valid data is found within the radiation range, and the current position is located within the rectangular range (0, (00), 0, (01));

[0130] Determine that the rectangular range is not occupied by valid data, set the position of the rectangular range to the position filled with valid data, fill the valid data A into the position (0, (00), 0, (01)), and mark the rectangular range as fully occupied;

[0131] ② Extract valid data B. Valid data B has a 2-row 1-column structure, and the grid has a 3-row 3-column structure. It is determined that the number of rows occupied by the valid data B is less than the number of rows in the basic block, and the number of columns occupied by the valid data B is less than the number of columns in the basic block. This indicates that the size of the valid data B is smaller than the grid size and can be filled into the basic block of the grid.

[0132] Then, according to the three-dimensional position table, enter the first grid control and enter the position of the first row of basic blocks under the first grid control, that is, the positions 0, (00), 0, (01), and 0, (02). At this time, the position (0, (00), 0, (01)) of the row has been filled with valid data A. It is determined that the maximum continuous blank length of the row at the current row position is 1 basic block, and the number of columns occupied by the valid data B is 1. In other words, the maximum continuous blank length of the row at the current row position is equal to the number of columns occupied by the valid data B, and there is only one position in the row that meets this condition.

[0133] Then, the leftmost basic block position in the row with the largest continuous blank length of the current row position is regarded as the current position, that is, 0, (02) is the current position; a radiation range is formed by radiating from the current position to the lower right, and a rectangular range with the same size as the occupied size of the valid data is found within the radiation range, and the current position is located within the rectangular range (0, (02), 0, (12));

[0134] Determine that the rectangular range is not occupied by valid data, set the position of the rectangular range to the position filled with valid data, fill the valid data B into the position (0, (02), 0, (12)), and mark the rectangular range as fully occupied;

[0135] ③ Extract valid data C. The valid data C has a 1-row and 1-column structure, and the grid has a 3-row and 3-column structure. If the number of rows occupied by the valid data C is less than the number of rows of the basic block and the number of columns occupied by the valid data C is less than the number of columns of the basic block, it means that the size of the valid data C is smaller than the grid size and can be filled into the basic block of the grid.

[0136] Then, according to the three-dimensional position table, the first grid control is entered, and the first row basic block position under the first grid control is entered, that is, the position of 0, (00), 0, (01), 0, (02). At this time, the position of the row (0, (00), 0, (01) and 0, (02)) has been filled with valid data A and valid data B. It is determined that the maximum continuous blank length of the row at the current row position is 0 basic blocks, and the number of columns occupied by the valid data C is 1. In other words, the maximum continuous blank length of the row at the current row position is less than the number of columns occupied by the valid data C, which means that the first row basic block position of the first grid control cannot accommodate the valid data C.

[0137] Enter the position of the second row basic block of the first grid control, that is, the position 0, (10), 0, (11), 0, (12). At this time, the position (0, (10), 0, (11))) of the row is not filled with valid data, and the position (0, (12)) is filled with valid data B. It is determined that the maximum continuous blank length of the row at the current row position is 2 basic blocks, and the number of columns occupied by the valid data C is 1. In other words, the maximum continuous blank length of the row at the current row position is greater than the number of columns occupied by the valid data C, which means that the second row basic block position of the first grid control can be filled with valid data C.

[0138] Then, the leftmost basic block position in the row with the largest continuous blank length of the current row position is regarded as the current position, that is, 0, (10) is the current position; a radiation range is formed by radiating from the current position to the lower right, and a rectangular range with the same size as the occupied size of the valid data is found within the radiation range, and the current position is located within the rectangular range (0, (10));

[0139] Determine that the rectangular range is not occupied by valid data, set the position of the rectangular range to the position filled with valid data, fill the valid data C into the position (0, (10)), and mark the rectangular range as fully occupied;

[0140] At this time, valid data A, valid data B and valid data C are filled into the basic block, and the position (0, (00), 0, (01)) is filled with valid data A, the position (0, (02), 0, (12)) is filled with valid data B, the position (0, (10)) is filled with valid data C, and the positions (0, (11), 0, (20), 0, (21), 0, (22), 1, (00), 1, (01), 1, (02), 1, (10), 1, (11), 1, (12), 1, (20), 1, (21) and 1, (22)) are all empty.

[0141] Step 4: Generate a full list of basic block data based on the configuration parameters. The basic blocks in the full list of basic block data to be imported with valid data are designated as valid blocks, and the corresponding valid data are imported according to the location information. The basic blocks without valid data are designated as blank blocks, and blank data is imported into them. The purpose of this step is to fill the valid data into the basic blocks.

[0142] For example, all valid data include the first valid data A, which occupies 1 basic block size and is located at position 0, and the second valid data B, which occupies 1 basic block size and is located at position 3. According to the position information, valid data A is taken out from the valid block data list and filled into position 0 of the grid control. Then, valid data B is taken out from the valid block data list and filled into position 3 of the grid control. In this embodiment, the steps specifically include:

[0143] Step 41: Generate a full list of basic blocks according to the configuration parameters;

[0144] Step 42: Access each basic block in the full basic block list in order, and search the valid block data list for the same position information as the current basic block based on the current basic block's position. If so, the current basic block is considered a valid block and needs to import valid data, and the process proceeds to step 43. Otherwise, the current basic block is considered a blank block and does not need to import valid data, and the process proceeds to step 44.

[0145] Step 43: Find the valid data corresponding to the position information, and import the valid data into the current basic block according to the position information;

[0146] Step 44: Generate a blank data and import it into the current basic block.

[0147] Step 5: Convert the full basic block data list into a grid data list based on the location information;

[0148] Step 6: The list adapter renders each grid control according to the grid data list, completing the drawing of the grid data list; the grid adapter renders the block view of the basic block according to the full basic block data list, completing the drawing of the grid control view;

[0149] In this embodiment, the step specifically includes:

[0150] Step 61: When the list adapter enters each grid view callback in sequence, the grid data at the corresponding position of the grid data list is obtained according to the callback position information, and a grid view is created;

[0151] Step 62: When the grid adapter enters each basic block view callback in sequence, the basic block data at the corresponding position is obtained from the basic block list within the grid data according to the callback position information;

[0152] Step 63: Obtain the size type of the basic block according to the basic block data, calculate the length and width of the basic block, return the length and width of the basic block to the outside through a callback request, obtain the block view control corresponding to the basic block from the outside, and set the block view control to the corresponding size;

[0153] Step 64: Setting the click and touch function of the basic block according to the block view control;

[0154] Step 65: Calculate a list of locations of other basic blocks that need to be preempted based on the size and type of the basic block;

[0155] Step 66: Mark all basic blocks that need to be preempted as preempted according to the location list;

[0156] Step 67: When a dragging operation is in progress, determine whether the current basic block is matched. If so, set the base color of the basic block to the matching background color; otherwise, set the base color of the basic block to the transparent background color, and proceed to step 68.

[0157] Step 68: Determine whether the current basic block is preempted. If so, set the basic block as a hidden block; otherwise, set the basic block as a displayed block.

[0158] When step 6 is executed for the first time, the basic block view has not been created yet. First, the basic block data in the first basic block (position 0, (00)) under the first grid control is obtained. It is determined that the block view has not been created for the basic block. The size type of the basic block is obtained according to the basic block data (valid data A, occupying 2 basic blocks, 1 row and 2 columns structure), and the length and width of the basic block are calculated (1 row and 2 columns). The length and width of the basic block are returned to the outside through a callback request, and the block view control corresponding to the basic block is obtained from the outside. The click and touch function of the basic block is set according to the block view control. That is to say, at this time, the basic block can be Perform a click-and-drag operation; calculate the position list of other basic blocks that need to be preempted based on the size type of the basic block. At this time, position (0, (01)) needs to be preempted, and the position list is (0, (01)); according to the position list, set the preemption information of all basic blocks that need to be preempted (position (0, (01) is occupied by position 0, (00)) as the basic block data of the current basic block, and mark the preempted basic block as preempted; at this time, there is no dragging operation, skip step 67, and enter step 68: determine that the current basic block has not been preempted, then set the basic block as a display block, and store the created current basic block view;

[0159] Continue to search for the basic block data in the next basic block (position 0, (01)), determine that the basic block has not created a block view, obtain the size type of the basic block according to the basic block data (occupies 1 basic block, a 1-row 1-column structure), and calculate the length and width of the basic block (1 row 1 column); return the length and width of the basic block to the outside through a callback request, and obtain the block view control corresponding to the basic block from the outside; set the click and touch function of the basic block according to the block view control, that is, at this time, this basic block can be clicked and dragged; calculate the position list of other basic blocks that need to be seized according to the size type of the basic block as 0, that is, no position needs to be seized at this time; at this time, there is no dragging operation in progress, skip step 67, and enter step 68: determine whether the current basic block is seized, set the basic block as a hidden block, and store the created current basic block view;

[0160] Repeat steps 61 to 68 until all basic blocks under all grid controls are traversed.

[0161] Step 7: When a valid block is dragged, the valid block is used as the dragging block, the best matching position with the dragging block is calculated, and the matching basic block is re-rendered according to the matching position;

[0162] In this embodiment, the step specifically includes:

[0163] Step 71: When a valid block is long pressed, a drag control is generated according to the valid block. At this time, the valid block is a drag block.

[0164] Step 72: When the drag control is dragged, the best matching position to be exchanged with the dragged block is calculated, and the matched basic block is re-rendered according to the matching position;

[0165] In this embodiment, when dragging starts, the basic block data in the first basic block (position 0, (00)) under the first grid control is obtained; it is determined that the dragging operation is being performed, and the size type of the basic block is obtained according to the basic block data (valid data A, occupying 2 basic blocks, and a 1-row 2-column structure), and the length and width of the basic block are calculated (1 row 2 columns); the length and width of the basic block are returned to the outside through a callback request, and the block view control corresponding to the basic block is obtained from the outside; the click touch function of the basic block is set according to the block view control, that is, at this time, this A basic block can be clicked and dragged; a position list of other basic blocks that need to be occupied is calculated based on the size and type of the basic block. At this time, position (0, (01)) needs to be occupied, and the position list is (0, (01)); according to the position list, the preemption information of all basic blocks that need to be preempted (position (0, (01) is occupied by position 0, (00)) is set as the basic block data of the current basic block, and the preempted basic block is marked as preempted; at this time, there is a dragging operation in progress, and it is determined that the current basic block is matched, and the base color of the basic block is set to the matching background color;

[0166] Continue to search for the basic block data in the next basic block (position 0, (01)), determine that the drag operation is being performed, obtain the size type of the basic block according to the basic block data (occupies 1 basic block, a 1-row 1-column structure), and calculate the length and width of the basic block (1 row 1 column); return the length and width of the basic block to the outside through a callback request, and obtain the block view control corresponding to the basic block from the outside; set the click and touch function of the basic block according to the block view control, that is, at this time, this basic block can be clicked and dragged; calculate the position list of other basic blocks that need to be seized according to the size type of the basic block as 0, that is, no position needs to be seized at this time; at this time, there is a drag operation in progress, determine that the current basic block is matched, and set the base color of the basic block to match the background color;

[0167] Continue to search for the basic block data in the next basic block (position 0, (02)), determine that the drag operation is being performed, obtain the size type of the basic block according to the basic block data (occupies 2 basic blocks, a 2-row 1-column structure), and calculate the length and width of the basic block (2 rows and 1 column); return the length and width of the basic block to the outside through a callback request, and obtain the block view control corresponding to the basic block from the outside; set the click and touch function of the basic block according to the block view control, that is, at this time, this basic block can be clicked and dragged; calculate the position list of other basic blocks that need to be seized according to the size type of the basic block as position 0, (12); at this time, there is a drag operation in progress, and it is determined that the current basic block has not been matched, then set the background color of the basic block to a transparent background color; determine that the current basic block has not been seized, then set the basic block as a display block, and store the created current basic block view;

[0168] Repeat steps 61 to 68 until all basic blocks under all grid controls are traversed.

[0169] Step 73: Determine whether the drag control is released. If so, destroy the drag control and proceed to step 8; otherwise, return to step 72;

[0170] In this embodiment, the step 72 of calculating the best matching position with the valid block specifically includes:

[0171] Step 721: Calculate the matching range to be occupied according to the size of the drag block;

[0172] Step 722: Determine a matching range that satisfies the matching condition among all matching ranges according to the matching condition; the basic block within the matching range must meet one of the following matching conditions: the basic block within the matching range is a blank block, or all spatial positions of valid blocks within the matching range are contained in the matching position to be occupied by the dragging block, or the basic block within the matching range is located at the original position of the dragging block.

[0173] Step 723: When dragging the drag control, the coordinates of the upper left corner of the drag block are used as the target coordinates, that is, the base block position where the target coordinates are located is used to determine the best order in which the drag block should be placed;

[0174] Step 724: Determine the best matching position of the drag block according to the matching range that meets the matching condition and the best preferred order.

[0175] Step 8: After swapping the drag block and the matching position, regenerate the full basic block list and proceed to step 6. In this embodiment, after swapping the drag block and the matching position, the location of the valid data changes, and a refresh operation is required to regenerate the full basic block list with the basic blocks arranged in the new position, and then redraw the list control view in step 6. I will not go into details here.

[0176] In this embodiment, exchanging the drag block and the matching position in this step specifically includes:

[0177] Step 81: Determine whether the matching position overlaps with the original position of the dragged block. If so, proceed to step 82; otherwise, proceed to step 83.

[0178] Step 82: Calculate the number of rows and columns of the overlapping part, and substitute the corresponding formulas according to the different numbers of rows and columns to calculate the new row and column positions of the valid block at the matching position. Specifically:

[0179] If the number of rows and columns in the overlapping part is odd, the new row position of the valid block at the matching position and the new column position of the dragged block are calculated as follows:

[0180] The new row position of the valid block at the matching position = the center axis row position + (center axis row position - matching block row position) - (number of rows of the matching block - 1),

[0181] The new column position of the valid block at the matching position = the central axis column position + (central axis column position - matching block column position) - (column number of matching block - 1);

[0182] If the number of rows in the overlapped part is even and the number of columns is odd, the new row position and column position of the valid block at the matching position are calculated as follows:

[0183] The new row position of the valid block at the matching position = the row position of the center axis 2 + (the row position of the center axis 1 - the row position of the matching block) - (the number of rows of the matching block - 1),

[0184] The new column position of the valid block at the matching position = the central axis column position + (central axis column position - matching block column position) - (column number of matching block - 1);

[0185] If the number of rows in the overlapped part is odd and the number of columns is even, the new row position and column position of the valid block at the matching position are calculated as follows:

[0186] The new row position of the valid block at the matching position = the center axis row position + (center axis row position - matching block row position) - (number of rows of the matching block - 1),

[0187] The new column position of the valid block at the matching position = the column position of the central axis 2 + (the column position of the central axis 1 - the column position of the matching block) - (the number of columns of the matching block - 1);

[0188] If the number of rows and columns of the overlapping part is even, the new row position and column position of the valid block at the matching position are calculated as follows:

[0189] The new row position of the valid block at the matching position = the row position of the center axis 2 + (the row position of the center axis 1 - the row position of the matching block) - (the number of rows of the matching block - 1),

[0190] The new column position of the valid block at the matching position = the column position of the central axis 2 + (the column position of the central axis 1 - the column position of the matching block) - (the number of columns of the matching block - 1);

[0191] Step 83: Calculate the new row position and column position of the valid block at the matching position according to the formula. The calculation formula for the new row position and column position of the valid block at the matching position is as follows:

[0192] The new row position of the valid block at the matching position = the original row position of the dragged block + (matching block row position - the first row position of the matching list),

[0193] The new column position of the valid block at the matching position = the original column position of the dragged block + (the matching block column position - the first column position of the matching list);

[0194] Step 84: First, move the valid block at the matching position out, then place the drag block back into the matching position based on the calculated new row and column positions of the drag block, and finally place the moved valid block back into the original position of the drag block based on the calculated new row and column positions of the valid block at the matching position.

[0195] 1. Concept Name Description:

[0196] (1) Basic block: the smallest unit view of this control, including blank blocks and valid blocks;

[0197] (2) Blank block: a cell view of a grid page, inherits the basic block, belongs to the basic block, has the same size as the basic block, and is used to fill the blank space;

[0198] (3) Valid block: a block that carries custom data and custom views. The data is passed in from the outside and inherits the basic block. It belongs to the basic block. The size can be one basic block or the size of multiple basic blocks arranged horizontally or vertically.

[0199] (4) Grid paging: The paging view within the control has subviews as basic blocks, and the sizes of the basic blocks that accommodate the arrangement can be different;

[0200] (5) Page drag list control: the conceptual name of this control.

[0201] 2. Layout design description:

[0202] The conceptual view of this control is as follows Figure 6 As shown, we use the list as the base view, and then the list uses the grid view as a subview. The grid view is used to accommodate and arrange the basic blocks. The number of rows and columns of the grid view can be customized externally.

[0203] 3. Design and implementation:

[0204] (1) The code structure of this control is as follows Figure 7 As shown in the figure, it is divided into two parts: view part and event handling part. The view part is mainly responsible for drawing and configuring controls, while the event handling part is mainly responsible for sliding, manual sorting, and automatic sorting functions of controls.

[0205] (2) The view part mainly consists of a list control, a control management class, an event listener, and a grid block list adapter. The list control is used to carry all views, the control management class is used to maintain the configuration of this control, the event listener is responsible for callback control changes, and the grid block list adapter is used to maintain grid paging. The grid paging is also an independent grid control, which directly maintains the basic block of this control. The basic block itself exists as a control view, and it is also bundled with a BlockData (basic block data). This BlockData is used to maintain the position, size, fill view type, and customized external data of a single basic block.

[0206] (3) Sorting processing is mainly responsible for arranging and organizing all basic blocks. It can automatically arrange the externally imported data list, and can also assist users in manually arranging basic blocks.

[0207] (4) First, describe the classes related to the basic blocks:

[0208] ①BaseBlockView: basic block view;

[0209] ②BlockData: basic block data, inherits BlockDataProcessExt, and extends external custom fill types and external data;

[0210] ③BlockDataProcessExt: inherits BlockDataLayoutInfo and extends the cache process data when the user drags and sorts;

[0211] ④BlockDataLayoutInfo: layout information of basic blocks in this control.

[0212] The structures of the above four classes are as follows Figures 8-10As shown, the contents of the basic block are the basic block view (BaseBlockView) and the basic block data (BlockData). The basic block data part defines a three-level ladder inheritance, which makes our structure and function clearer.

[0213] (5) The grid paging is used to store the basic blocks, and its data structure is as follows: Figure 11 As shown, it contains the location of the grid and a list of valid block data.

[0214] Then define the control management class (GbManager), whose structure is as follows Figure 12 It is mainly used to maintain some configuration data of this control. When this control is initialized, the configuration parameters here need to be initialized.

[0215] (6) Here we begin to describe the implementation logic and principles of this control and define the entity class of this control, which is named GbListView (grid list view). It inherits ListView (list view) to implement the basic functions of the list. The structure of GbListView is as follows Figure 13 shown.

[0216] (7) GbListViewAdapter (grid list view adapter) inherits BaseAdapter (base block adapter) and is responsible for controlling the display of list grid paging. It internally obtains grid list data (List <griddata>), then create a grid paging view (GridView) in the getView callback, and configure its number of rows and columns (the number of rows and columns is obtained from GbManager), and then store the paging position sequence number into GridView. GbListView also maintains a mapping (Map<Integer,GbView> ), used to cache the GbView of each location and provide the ability to obtain GbView.

[0217] (8) Grid paging (GbView) is constructed as follows Figure 14 As shown. GbAdapter (grid adapter) is used to control the display of the grid. List <blockdata>This is a complete list of basic blocks (including valid blocks and blank blocks), and its length is the number of grid rows * the number of grid columns. Since the externally passed list data only contains valid block data, the GridView needs to supplement the blank block data. Here, we use two for loops to iterate over the location information of all basic blocks in the grid page. Each location information is then searched and compared with the valid block data list. If it is found, there is no need to supplement the blank. If not, the blank block is supplemented, and finally a complete list of basic blocks is generated. The full list of basic blocks can be provided to GbAdapter to control the rendering of the block view of the grid page.

[0218] (9) GbAdapter inherits BaseAdapter and also returns the base block view in the getView callback. It maintains a map (Map<Integer,BaseBlockView> ) is used to cache all basic block views within the grid and provide the ability to obtain BaseBlockView. BaseBlockView is not created by GbAdapter, but provided by external code and passed in by the askBlockInflateView callback of EventListener. The passed-in view must inherit askBlockInflateView. Each basic block will call back getView, which will trigger the request for the block view from the outside, thus providing independence for each basic block view control. The process of getView callback is as follows Figure 3 As shown. GbAdapter controls the display of BaseBlockView according to the parameters of BlockData. One thing that needs to be explained in detail is that the grid layout provided by GridView allows controls to be displayed beyond the range. This allows our basic blocks to be expanded and can be of different sizes. However, the expansion of the basic block will cover the display of the adjacent blocks, so we define the covered block as the preempted block, that is, the control position is preempted, and the preempted basic block will be directly hidden here.

[0219] Here we need to explain a little more specifically, Figure 15 As shown, position 0 is a valid block that occupies the space of 4 blank blocks. It is just configured to be larger. The position of the basic block of the control is determined by the position of the upper left corner, regardless of the space it occupies. The blank blocks covered by it will be set to hidden.

[0220] (10) The process of user dragging sorting grid is as follows Figure 4 When the GbAdapter controls the display of basic blocks, a touch event is set. When the user long presses a valid block, the drag sorting process is triggered.

[0221] In order to make the logic clear, four classes are defined here to implement these functions.

[0222] SortHandler: Integrates and executes the entire drag sorting timing logic;

[0223] DragHandler: Create drag controls and control to follow the finger processing;

[0224] MatchHandler: calculates the position of the best match;

[0225] ExchangeHandler. Exchanges the drag block and the matching position, and the matched block is adaptively placed in the drag block position.

[0226] (11) When calculating the matching position, the position to be occupied should be calculated based on the size of the dragged block. These positions must meet one of the following exchange conditions:

[0227] a. Blank block: Blank blocks are generated by filling in empty spaces, so their position is not important and can be directly occupied and used to meet the matching conditions;

[0228] b. All the spatial positions of the belonging block are included in the list of positions that the dragging block will occupy: the dragging block can completely cover the entire basic block, not just part of it. If it only covers part of it, it will destroy the basic block;

[0229] c. Included in the original position of the drag block: The position originally belongs to the drag block and is not affected by reoccupancy after release, so it meets the matching conditions.

[0230] refer to Figure 15 , 3 examples are given below:

[0231] Example 1: Drag the valid block at position 0 to a position with position 7 as the upper left corner. The dragged block will then occupy positions 7, 8, 10, and 11. First, determine whether these four positions all meet the conditions for replacement (matching conditions). Positions 8 and 11 are blank blocks, so they meet the conditions. Positions 7 and 10 are valid blocks, and all the spatial positions of their blocks are included in the list of positions that the dragged block will occupy. Therefore, matching is possible.

[0232] Example 2: Drag the valid block at position 0 to a position with position 10 as the upper left corner. This requires occupying positions 10, 11, 13, and 14. Positions 11 and 14 are both blank blocks, so the match is satisfied. Position 10 is a valid block and is included in the list of positions to be occupied by the dragged block, so the match is also satisfied. Position 13's assigned block is position 12, and the space occupied by position 12 is positions 12 and 13. Since position 12 is not included in the list of positions to be occupied by the dragged block (10, 11, 13, 14), the match is not satisfied and the match is not feasible.

[0233] Example 3: Drag the valid block at position 0 to the upper left corner of position 4. This requires occupying positions 4, 5, 7, and 8. Positions 5 and 8 are both blank blocks, so the match is satisfied. Position 7 is a valid block and is included in the list of blocks to be occupied by the dragged block, which also satisfies the requirement. Position 4 is a valid block at position 0, and this valid block is also the original position of the dragged block. Therefore, position 4 is included in the original position of the dragged block, which also satisfies the requirement, so the match is feasible.

[0234] (12) When the user drags the control, we use the coordinates of the upper left corner of the dragged control as the target coordinates, that is, the position of the coordinates of the upper left corner is used to determine the position where the drag block is to be placed. When dragging, the position of the upper left corner must be on a certain basic block. In order to further guess the user's position intention, the basic block pointed by the drag block is divided into 4 mathematical quadrants, such as Figure 16 As shown, quadrants 1, 2, 3, and 4. When the top left corner of the drag block is in quadrant 2, we predict that the user would most prefer to move the drag block to the top left corner and least to the opposite corner (bottom right). For the other two positions, the top corner takes precedence. Therefore, our calculated order of user preference is quadrant 2, quadrant 1, quadrant 3, and quadrant 4. The same applies to the other three quadrants.

[0235] by Figure 17 For example, if the upper left corner of the drag block is moved to the foundation block at position 3, the drag block will cover foundation blocks 3, 4, 5, 6, 7, 8, 9, 10, and 11. The possible placement combinations are:

[0236] (Position 3, 4, 6, 7), (Position 4, 5, 7, 8), (Position 6, 7, 9, 10), (Position 7, 8, 10, 11), this combination of 4 lists corresponds to 4 quadrant intentions. After confirming the 4 sets of location lists, we use the method in point (11) to determine whether these 4 sets of location lists meet the matching conditions. If none of the 4 sets meet the conditions, the current position cannot be exchanged. If there is a location that meets the conditions, we will then take out the best matching location list according to the order of user intention.

[0237] (13) Once the best matching position list is calculated, it means that this position list can be used to place the drag block. At this time, we must first move the valid block at the matching position, then place the drag block in, and finally place the moved valid block back to the original position of the drag block. Position swapping is divided into two categories:

[0238] Overlap swap: The matched position overlaps with the original position of the dragged block, that is, part of the basic block belongs to the newly matched position and also to the original position of the dragged control;

[0239] Non-overlapping swap: The matching position has no overlap with the original position of the dragged block.

[0240] Here we will first explain the non-overlapping exchange method. The exchange of positions is essentially to obtain new row and column positions. Figure 14 For example, swap the valid block at position 0 with the position list 7, 8, 10, and 11. We directly change the position object BlockIndex of the BlockData at position 0 to the data at position 7, that is, the rowIndex of BlockIndex is changed to 2, and the columnIndex is changed to 1 (both row and column positions start at 0). Positions 8 and 11 are blank blocks and do not need to be processed. Positions 7 and 10 are valid blocks and need to be transferred to the position list contained in the original position of the dragged block. The calculation formula for the new row position and column position of the valid block at the matching position is as follows:

[0241] The new row position of the valid block at the matching position = the original row position of the dragged block + (matching block row position - the first row position of the matching list),

[0242] The new column position of the valid block at the matching position = the original column position of the dragged block + (the matching block column position - the first column position of the matching list);

[0243] The principle of the row position formula is: use the original position of the dragged block + the position change of the valid block to be moved relative to the upper leftmost block of the entire matching list to get the new position.

[0244] For example, swap the valid block at position 0 with positions 7, 8, 10, and 11. Position 7 becomes the valid block (the current matching block is row position 2 and column position 1, i.e., coordinates (2, 1)), position 8 becomes a blank block, position 10 becomes the valid block (the current matching block is row position 3 and column position 1, i.e., coordinates (3, 1)), position 11 becomes a blank block, and position 0 becomes the dragged block. The original row and column positions of the dragged block are 0. Only the new positions of the valid blocks need to be calculated; the positions of the blank blocks do not need to be calculated.

[0245] Calculate the new position of the valid block at position 7, specifically: the new row position of the valid block at position 7 = the original row position of the dragged block + (the row position of the matching block - the first row position of the matching list) = 0 + (2-2) = 0, the new column position of the valid block at position 7 = the original column position of the dragged block + (the column position of the matching block - the first column position of the matching list) = 0 + (1-1) = 0, that is, the coordinates of the valid block at position 7 to be transformed are (0, 0), that is, at position 0; similarly, the new row position of the valid block at position 10 = the original row position of the dragged block + (the row position of the matching block - the first row position of the matching list) = 0 + (3-2) = 1, the new column position of the valid block at position 10 = the original column position of the dragged block + (the column position of the matching block - the first column position of the matching list) = 0 + (1-1) = 0, that is, the coordinates of the valid block at position 10 to be transformed are (1, 0), that is, at position 3;

[0246] After obtaining the new row and column positions, the matching valid blocks are assigned new positions. That is, the valid block at position 7 is transformed to position 0, the valid block at position 10 is transformed to position 3, and the dragged block is transformed to positions 7, 8, 10, and 11. Then, the full basic block list is reconstructed and finally rendered again. Reconstructing the full basic block list refers to point (8) and is constructed by GbAdapter.

[0247] Here we begin to explain the overlapping exchange method. If the overlapping part may have only one position or more than one position, involving multiple rows and columns, the considerations at this time are a bit more complicated.

[0248] It is divided into the following situations:

[0249] The number of rows and columns of the overlapping part is odd;

[0250] The number of rows in the overlapping part is even and the number of columns is odd;

[0251] The number of rows in the overlapping part is odd and the number of columns is even;

[0252] The overlapping part has an even number of rows and an even number of columns.

[0253] Example 1: The number of rows and columns in the overlapping part is odd;

[0254] by Figure 18 For example, let's swap the valid block (the drag block) at position 0 with the position list 12, 13, 14, 17, 18, 19, 22, 23, and 24. The original position list for the drag block is 0, 1, 2, 5, 6, 7, 10, 11, and 12, with position 12 overlapping the two lists. First, simply change the BlockIndex of the BlockData location object at position 0 to the data at position 12. Specifically, change the rowIndex and columnIndex of BlockIndex to 2 and 2 respectively. Then, move the valid blocks matching the position list to the original position of the drag block, symmetrically centered around the overlapping portion. To simplify things, this involves performing two axisymmetric flips, with the center row and center column of the overlapping portion acting as the axis of symmetry. For example, position 13 is symmetrically positioned relative to the overlapping portion, position 12, at position 11, and position 17 is symmetrically positioned relative to position 7. Position 12 is the overlapping portion and does not need to be moved. Positions 14, 18, 19, and 24 are blank blocks and do not require any processing. The remaining positions 13, 17, and 22 are valid blocks and need to be moved.

[0255] The calculation formula for movement is as follows:

[0256] The new row position of the valid block at the matching position = the center axis row position + (center axis row position - matching block row position) - (number of rows of the matching block - 1),

[0257] The new column position of the valid block at the matching position = the central axis column position + (central axis column position - matching block column position) - (column number of matching block - 1);

[0258] At this time, position 12 is the center axis, that is, the center axis row position is 2, the center axis column position is 2, the coordinates of position 12 are (2,2), the row position of the valid block at position 13 is 2, the column position is 3, the number of rows is 1, and the number of columns is 1; the row position of the valid block at position 17 is 3, the column position is 2, the number of rows is 1, and the number of columns is 1; the row position of the valid block at position 22 is 4, the column position is 2, the number of rows is 1, and the number of columns is 2;

[0259] Calculate the new row position of the valid block at position 13 = 2 + (2-2) - (1-1) = 2, and the new column position of the valid block at position 13 = 2 + (2-3) - (1-1) = 1, and obtain the coordinates (2, 1), that is, the valid block at position 13 is transformed to position 11;

[0260] Calculate the new row position of the valid block at position 17 = 2 + (2-3) - (1-1) = 1, and the new column position of the valid block at position 17 = 2 + (2-2) - (1-1) = 2, and obtain the coordinates (1, 2). That is, the valid block at position 17 is transformed to position 7;

[0261] Calculate the new row position of the valid block at position 22 = 2 + (2-4) - (1-1) = 0, and the new column position of the valid block at position 22 = 2 + (2-2) - (2-1) = 1, and get the coordinates (0, 1). That is, the valid block at position 22 is transformed to position 1. Since the valid block at position 22 occupies two basic blocks and has a structure of one row and two columns, the valid block at position 22 must be transformed to positions 1, 2.

[0262] The formula means that the position of the center block is used as the basis, the negative value of the offset of the moving block relative to the center block is added, and then the size occupied by the moving block is deducted to get the new position.

[0263] Just like non-overlapping swapping, after getting the new row and column positions, assign the matching valid blocks to new positions, then reconstruct the full list of basic blocks, and finally re-render.

[0264] Example 2: The number of rows in the overlapping part is even, and the number of columns is odd;

[0265] If the number of overlapping rows is odd, we only need to calculate the center position and then use the formula to calculate. If the number of overlapping rows is even, we cannot get a row center axis. At this time, two center row axes are introduced for calculation. The two center row axes are the two row positions in the middle of the overlapping part.

[0266] by Figure 19 For example, swap the valid block (drag block) at position 0 with the position list 7, 8, 9, 12, 13, 14, 17, 18, and 19. The original position list of the drag block is 0, 1, 2, 5, 6, 7, 10, 11, and 12, and the overlapping part of the two lists is position 7 and 12. The overlapping part is a basic block with 2 rows and 1 column. The valid block in the matching position list needs to be moved to the original position of the drag block in a center-symmetrical manner with the overlapping part as the center. To further simplify the explanation, it is actually two axis-symmetrical flips, with the center row and center column of the overlapping part as the axis-symmetrical flips. Positions 7 and 12 are overlapping parts and do not need to be moved. Positions 8, 9, 14, 18, and 19 are blank blocks and do not need to be processed. The remaining positions 13 and 17 are valid blocks and need to be moved. The calculation formula is as follows:

[0267] The new row position of the valid block at the matching position = the row position of the center axis 2 + (the row position of the center axis 1 - the row position of the matching block) - (the number of rows of the matching block - 1),

[0268] The new column position of the valid block at the matching position = the central axis column position + (central axis column position - matching block column position) - (column number of matching block - 1);

[0269] At this time, positions 7 and 12 are the center axes, that is, the row position of center axis 1 is 1, the row position of center axis 2 is 2, and the column position of center axis is 2. The row position of the valid block at position 13 is 2, the column position is 3, the row number is 1, and the column number is 1; the row position of the valid block at position 17 is 3, the column position is 2, the row number is 1, and the column number is 1.

[0270] Calculate the new row position of the valid block at position 13 = 2 + (1-2) - (1-1) = 1, and the new column position of the valid block at position 13 = 2 + (2-3) - (1-1) = 1, and obtain the coordinates (1, 1), that is, the valid block at position 13 is transformed to position 6;

[0271] Calculate the new row position of the valid block at position 17 = 2 + (1-3) - (1-1) = 0, and the new column position of the valid block at position 17 = 2 + (2-2) - (1-1) = 2, and obtain the coordinates (0, 2). That is, the valid block at position 17 is transformed to position 2;

[0272] Just like non-overlapping swapping, after getting the new row and column positions, assign the matching valid blocks to new positions, then reconstruct the full list of basic blocks, and finally re-render.

[0273] Example 3: The number of rows in the overlapping part is odd and the number of columns is even;

[0274] by Figure 20 For example, swap the valid block (drag block) at position 0 with the position list 11, 12, 13, 16, 17, 18, 21, 22, and 23. The original position list of the drag block is 0, 1, 2, 5, 6, 7, 10, 11, and 12, and the overlapping part of the two lists is positions 11 and 12. The overlapping part is a basic block with 1 row and 2 columns. The valid block matching the position list needs to be moved to the original position of the drag block in a centrosymmetric manner with the overlapping part as the center. To simplify it further, it actually means performing two axisymmetric flips, with the center row and center column of the overlapping part as the axis of symmetry flipping. Positions 11 and 12 are overlapping parts and do not need to be moved. Positions 13, 17, 18, 19, and 21 are blank blocks and do not need to be processed.

[0275] The remaining positions 16 and 22 are valid blocks and need to be moved. The calculation formula is as follows:

[0276] The new row position of the valid block at the matching position = the center axis row position + (center axis row position - matching block row position) - (number of rows of the matching block - 1),

[0277] The new column position of the valid block at the matching position = the column position of the central axis 2 + (the column position of the central axis 1 - the column position of the matching block) - (the number of columns of the matching block - 1);

[0278] At this time, positions 16 and 22 are the center axis, that is, the row position of the center axis is 2, the column position of the center axis 1 is 1, and the column position of the center axis 2 is 2. The row position of the valid block at position 16 is 3, the column position is 1, the row number is 1, and the column number is 1; the row position of the valid block at position 22 is 4, the column position is 2, the row number is 1, and the column number is 2;

[0279] Calculate the new row position of the valid block at position 16 = 2 + (2-3) - (1-1) = 1, and the new column position of the valid block at position 16 = 2 + (1-1) - (1-1) = 2, and obtain the coordinates (1, 2). That is, the valid block at position 16 is transformed to position 7;

[0280] Calculate the new row position of the valid block at position 22 = 2 + (2-4) - (1-1) = 0, and the new column position of the valid block at position 22 = 2 + (1-2) - (2-1) = 0, and obtain the coordinate (0, 0). That is, the valid block at position 22 is transformed to position 0. Since the valid block at position 22 occupies two basic blocks, it will occupy positions 0 and 1 after the transformation.

[0281] Just like non-overlapping swapping, after getting the new row and column positions, assign the matching valid blocks to new positions, then reconstruct the full list of basic blocks, and finally re-render.

[0282] Example 4: The number of rows and columns in the overlapping part is an even number.

[0283] by Figure 21 For example, let's swap the valid block (the drag block) at position 0 with the positions in the list 6, 7, 8, 11, 12, 13, 16, 17, and 18. The original position list for the drag block is 0, 1, 2, 5, 6, 7, 10, 11, and 12, and the overlap between the two lists is at positions 6, 7, 11, and 12. This overlap consists of two rows and two columns of basic blocks. First, simply change the BlockIndex of the BlockData location object at position 0 to the data at position 6, i.e., change the rowIndex and columnIndex of BlockIndex to 1. Then, move the valid blocks matching the position list to the original position of the drag block, symmetrically centered around the overlapping portion. To simplify things, this involves performing two axisymmetric flips, with the center row and center column of the overlapping portion acting as the axis of symmetry. Positions 6, 7, 11, and 12 are the overlapping portion and do not need to be moved. Positions 8, 13, 17, and 18 are blank blocks and do not require any processing. Position 16 remains the valid block and needs to be moved. The calculation formula for movement is as follows:

[0284] The new row position of the valid block at the matching position = the row position of the center axis 2 + (the row position of the center axis 1 - the row position of the matching block) - (the number of rows of the matching block - 1),

[0285] The new column position of the valid block at the matching position = the column position of the central axis 2 + (the column position of the central axis 1 - the column position of the matching block) - (the number of columns of the matching block - 1);

[0286] At this time, positions 6, 7, 11, and 12 are the center axes, that is, the row position of center axis 1 is 1, the row position of center axis 2 is 2, the column position of center axis 1 is 1, and the column position of center axis 2 is 2. The row position of the valid block at position 16 is 3, the column position is 1, the row number is 1, and the column number is 1.

[0287] Calculate the new row position of the valid block at position 16 = 2 + (1-3) - (1-1) = 0, and the new column position of the valid block at position 16 = 2 + (1-1) - (1-1) = 2, and obtain the coordinates (0, 2). That is, the valid block at position 16 is transformed to position 2;

[0288] Because the formula uses offsets for calculation, it doesn't matter which row axis is above or below center row axis 1 or 2. Calculating column positions is the same as calculating row positions, and so on. Finally, after obtaining the new row and column positions, assign the matching valid blocks to the new positions, then reconstruct the full basic block list and re-render.

[0289] (14) The previous steps explain the principle of position exchange for a single page. Cross-page dragging is just based on single-page dragging, with the page numbers swapped. The page number of the dragged block is swapped with that of the matching block, and then the list is rebuilt and rendered.

[0290] (15) If the valid block data list imported into this control has no configured position, the automatic arrangement function of the control needs to be executed. The general principle of this function is to first use a three-digit array to establish a virtual space position, and then arrange all valid blocks from the upper left corner of the array to the lower right corner. To arrange the valid blocks, it is necessary to first traverse from the upper left corner to calculate whether the space radiating to the lower right of each position can accommodate the block. If it can, the position of the valid block at that position is set, and the occupied covering position is marked. In this way, the position of each valid block is calculated cyclically. If there is insufficient space to place the valid block, the block will be abandoned here. The implementation logic of the function is as follows: Figure 5 As shown:

[0291] (16) Definitions of Abbreviations and Key Terms (Please provide explanations for the English abbreviations and professional terms mentioned above)

[0292] Basic block: the smallest unit view of this control, including blank blocks and valid blocks;

[0293] Blank block: a cell view of a grid page, inherits the basic block, belongs to the basic block, and has the same size as the basic block;

[0294] Valid block: A block that carries custom data and custom views. Data is passed in from the outside and inherits the basic block. It belongs to the basic block. The size can be one basic block or the size of multiple basic blocks arranged horizontally or vertically.

[0295] Grid paging: The paging view within the control uses its subviews as basic blocks, and the sizes of the basic blocks that accommodate the arrangement can be different;

[0296] Paging drag list control: the conceptual name of this control;

[0297] BaseBlockView: basic block view;

[0298] BlockData: Complete block data information, inherits BlockDataProcessExt, and extends external custom fill types and external data;

[0299] BlockDataProcessExt: inherits BlockDataLayoutInfo and extends the cache process data when the user drags and sorts;

[0300] BlockDataLayoutInfo: layout information of basic blocks in this control;

[0301] rowIndex: row position coordinates;

[0302] columnIndex: column position coordinates;

[0303] gridIndex: grid position coordinates;

[0304] GridView: grid control in Android system;

[0305] BaseAdapter: list adapter in Android system;

[0306] getView: In Android system, the processing logic entry of the list adaptation processing sub-control

[0307] Map: mapping class in Android system;

[0308] List: Data list class in Android system.

[0309] like Figure 22 As shown, an embodiment of the present invention also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the above-mentioned flexible grid control design method based on the Android platform is implemented.

[0310] like Figure 23 As shown, an embodiment of the present invention further provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the above-mentioned flexible grid control design method based on the Android platform.

[0311] The foregoing description is merely a preferred embodiment of the present invention and is not intended to limit the present invention. Those skilled in the art will readily appreciate that various modifications and variations are possible. Any modifications, equivalent substitutions, or improvements made within the spirit and principles of the present invention are intended to be within the scope of protection of the present invention.< / blockdata> < / griddata>

Claims

1. A flexible grid control design method based on the Android platform, characterized in that: The method comprises the following steps: Step 1. Initialize the configuration parameters of the list control; Step 2: Import multiple valid data into the valid block data list of the list control; Step 3: Determine whether there is location information in the valid block data list. If so, proceed to step 4; otherwise, perform automatic sorting, obtain the location information of each valid data, and import it into the corresponding valid data; The automatic sorting is performed to obtain the location information of each valid data and import it into the corresponding valid data, specifically including: Step 31: Construct a three-dimensional position table based on the arrangement of the grid control and the basic blocks, where the first dimension is the grid, the second dimension is the grid rows, and the third dimension is the grid columns; Step 32: Arrange the position of each valid data in the valid block data list in descending order according to the occupied size of each valid data; Step 33: traverse and extract valid data from the valid block data list according to the arrangement order, and end the process after traversing all valid data; Step 34: Determine whether the number of rows occupied by the traversed valid data is less than or equal to the number of rows in the grid control and the number of columns occupied by the valid data is less than or equal to the number of columns in the grid control. If so, proceed to step 35; otherwise, discard the valid data and return to step 33 to extract the next valid data. Step 35: Enter the grid dimension step by step according to the order of the three-dimensional position table. After traversing all the grid positions, abandon the valid data and return to step 33 to extract the next valid data. Step 36: Enter the row position step by step according to the row order of the entered grid. After traversing all rows, return to step 35 to enter the next grid; Step 37: Calculate the position of the first continuous blank area in the current row whose length is greater than or equal to the number of columns occupied by the valid data, then proceed to step 38; otherwise, return to step 36 and proceed to the next row; Step 38: The leftmost basic block position of the calculated continuous blank area is regarded as the current position. A radial range is formed from the current position to the lower right. A rectangular range with the same size as the valid data is found within the radial range. The current position is within the rectangular range. It is determined whether the rectangular range is not occupied. If so, the position of the rectangular range is set as the position to be filled with the valid data; otherwise, the process returns to step 36 and proceeds to the position of the next row. Step 39: Mark the entire rectangular range as occupied, and return to step 33 to extract the next valid data; and so on, obtain the position information of each valid data, and import each position information into each corresponding valid data; Step 4: Generate a full list of basic block data based on the configuration parameters, treat the basic blocks in the full list of basic block data to be imported with valid data as valid blocks, and import the corresponding valid data according to the location information; treat the basic blocks that have not been imported with valid data as blank blocks, and import the blank data; Step 5: Convert the full basic block data list into a grid data list based on the location information; Step 6: The list adapter renders each grid control according to the grid data list, completing the drawing of the grid data list; the grid adapter renders the block view of the basic block according to the full basic block data list, completing the drawing of the grid control view; Step 7: When a valid block is dragged, the valid block is used as the drag block, the best matching position of the drag block is calculated, and the matching basic block is re-rendered; Step 8: After swapping the dragged block and the matching position, regenerate the full basic block list and proceed to step 6.

2. The method for designing a flexible grid control based on the Android platform according to claim 1, characterized in that: The configuration parameters include list control width, list control height, grid page row number, grid page column number, grid control width, grid control height, basic block width, basic block height, block spacing, drag block background color and matched block background color.

3. The flexible grid control design method based on the Android platform according to claim 1, characterized in that: The step 4 specifically includes: Step 41: Generate a full list of basic blocks according to the configuration parameters; Step 42: Access each basic block in the full basic block list in order, and search the valid block data list for the same position information as the current basic block based on the current basic block's position. If so, the current basic block is considered a valid block and needs to import valid data, and the process proceeds to step 43. Otherwise, the current basic block is considered a blank block and does not need to import valid data, and the process proceeds to step 44. Step 43: Find the valid data corresponding to the position information, and import the valid data into the current basic block according to the position information; Step 44: Generate a blank data and import it into the current basic block.

4. The method for designing a flexible grid control based on the Android platform according to claim 1, characterized in that: The step 6 specifically includes: Step 61: When the list adapter enters each grid view callback in sequence, the grid data at the corresponding position of the grid data list is obtained according to the callback position information, and a grid view is created; Step 62: When the grid adapter enters each basic block view callback in sequence, the basic block data at the corresponding position is obtained from the basic block list within the grid data according to the callback position information; Step 63: Obtain the size type of the basic block according to the basic block data, calculate the length and width of the basic block, return the length and width of the basic block to the outside through a callback request, obtain the block view control corresponding to the basic block from the outside, and set the block view control to the corresponding size; Step 64: Setting the click and touch function of the basic block according to the block view control; Step 65: Calculate a list of locations of other basic blocks that need to be preempted based on the size and type of the basic block; Step 66: Mark all basic blocks that need to be preempted as preempted according to the location list; Step 67: When a dragging operation is in progress, determine whether the current basic block is matched. If so, set the base color of the basic block to the matching background color; otherwise, set the base color of the basic block to the transparent background color, and proceed to step 68. Step 68: Determine whether the current basic block is preempted. If so, set the basic block as a hidden block; otherwise, set the basic block as a displayed block.

5. The method for designing a flexible grid control based on the Android platform according to claim 1, characterized in that: The step 7 specifically includes: Step 71: When a valid block is long pressed, a drag control is generated according to the valid block. At this time, the valid block is a drag block. Step 72: When the drag control is dragged, the best matching position for exchanging with the drag block is calculated, and the matched basic block is re-rendered according to the matching position; Step 73: Determine whether the drag control is released. If so, destroy the drag control and go to step 8; otherwise, return to step 72.

6. The method for designing a flexible grid control based on the Android platform according to claim 5, characterized in that: The step 72 of calculating the best matching position with the valid block specifically includes: Step 721: Calculate the matching range to be occupied according to the size of the drag block; Step 722: Determine a matching range that satisfies the matching condition among all matching ranges according to the matching condition; the basic block within the matching range must meet one of the following matching conditions: the basic block within the matching range is a blank block, or all spatial positions of valid blocks within the matching range are contained in the matching position to be occupied by the dragging block, or the basic block within the matching range is located at the original position of the dragging block. Step 723: When dragging the drag control, the coordinates of the upper left corner of the drag block are used as the target coordinates, that is, the base block position where the target coordinates are located is used to determine the best order in which the drag block should be placed; Step 724: Determine the best matching position of the drag block according to the matching range that meets the matching condition and the best preferred order.

7. The method for designing a flexible grid control based on the Android platform according to claim 5, characterized in that: Exchanging the drag block and the matching position in step 8 specifically includes: Step 81: Determine whether the matching position overlaps with the original position of the dragged block. If so, proceed to step 82; otherwise, proceed to step 83. Step 82: Calculate the number of rows and columns of the overlapping part, and substitute the corresponding formulas according to the different numbers of rows and columns to calculate the new row and column positions of the valid block at the matching position. Specifically: If the number of rows and columns in the overlapping part is odd, the new row position of the valid block at the matching position and the new column position of the dragged block are calculated as follows: The new row position of the valid block at the matching position = the center axis row position + (center axis row position - matching block row position) - (number of rows of the matching block - 1), The new column position of the valid block at the matching position = the center axis column position + (center axis column position - matching block column position) - (number of columns of the matching block - 1); If the number of rows in the overlapped part is even and the number of columns is odd, the new row position and column position of the valid block at the matching position are calculated as follows: The new row position of the valid block at the matching position = the row position of the center axis 2 + (the row position of the center axis 1 - the row position of the matching block) - (the number of rows of the matching block - 1). The new column position of the valid block at the matching position = the center axis column position + (center axis column position - matching block column position) - (number of columns of the matching block - 1); If the number of rows in the overlapped part is odd and the number of columns is even, the new row position and column position of the valid block at the matching position are calculated as follows: The new row position of the valid block at the matching position = the center axis row position + (center axis row position - matching block row position) - (number of rows of the matching block - 1), The new column position of the valid block at the matching position = the column position of the central axis 2 + (the column position of the central axis 1 - the column position of the matching block) - (the number of columns of the matching block - 1); If the number of rows and columns of the overlapping part is even, the new row position and column position of the valid block at the matching position are calculated as follows: The new row position of the valid block at the matching position = the row position of the center axis 2 + (the row position of the center axis 1 - the row position of the matching block) - (the number of rows of the matching block - 1). The new column position of the valid block at the matching position = the column position of the central axis 2 + (the column position of the central axis 1 - the column position of the matching block) - (the number of columns of the matching block - 1); Step 83: Calculate the new row position and column position of the valid block at the matching position according to the formula. The calculation formula for the new row position and column position of the valid block at the matching position is as follows: The new row position of the effective block at the matching position = the original row position of the dragged block + (matching block row position - the first row position of the matching list). The new column position of the valid block at the matching position = the original column position of the dragged block + (matching block column position - the first column position of the matching list); Step 84: First, move the valid block at the matching position out, then place the drag block back into the matching position based on the calculated new row and column positions of the drag block, and finally place the moved valid block back into the original position of the drag block based on the calculated new row and column positions of the valid block at the matching position.

8. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, it implements a flexible grid control design method based on the Android platform as described in any one of claims 1 to 7.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, a flexible grid control design method based on an Android platform as described in any one of claims 1 to 7 is implemented.

Images