Interface component adjustment method, terminal and computer program product
By moving or shifting components within the interface to accommodate the resized components, and employing the principle of minimum disturbance, the impact of interface component resizing on the overall layout is resolved, thereby improving the success rate of resizing and the freedom of interface layout.
Patent Information
- Authority / Receiving Office
- WO · WO
- Patent Type
- Applications
- Current Assignee / Owner
- GUANGDONG OPPO MOBILE TELECOMMUNICATIONS CORP LTD
- Filing Date
- 2025-09-28
- Publication Date
- 2026-06-04
AI Technical Summary
When users dynamically adjust the size of interface components, existing technologies can easily have a significant impact on the layout of other desktop components, affecting the success rate of the adjustment operation.
By moving other interface components within the interface to accommodate the resized component, or by moving the component to another interface to utilize the freed-up area to display the resized component, the principle of minimum disturbance is used to determine the movement path in order to minimize the impact on the overall layout.
It improves the success rate of adjusting the size of interface components, reduces the impact of local adjustments on the overall layout, and ensures the freedom of arrangement of interface components.
Smart Images

Figure CN2025125019_04062026_PF_FP_ABST
Abstract
Description
Interface component adjustment methods, terminal and computer program products
[0001] This application claims priority to Chinese Patent Application No. 202411748788.4, filed on November 29, 2024, entitled "Method for Adjusting Interface Components, Terminal and Computer Program Product", the entire contents of which are incorporated herein by reference. Technical Field
[0002] This application relates to the field of human-computer interaction technology, and in particular to a method for adjusting interface components, a terminal, and a computer program product. Background Technology
[0003] During daily use of the terminal, users can personalize the components displayed on the desktop. For example, multiple icons can be grouped into the same folder, or the size of the components can be dynamically adjusted.
[0004] In related technologies, when users dynamically adjust the size of components, it may have a significant impact on the layout of other components on the desktop. Summary of the Invention
[0005] This application provides a method for adjusting interface components, a terminal, and a computer program product. The technical solution is as follows:
[0006] On one hand, embodiments of this application provide a method for adjusting interface components, applied to a terminal, the method comprising:
[0007] Receives a size adjustment operation for a first interface component in a first interface, the first interface including multiple areas;
[0008] If the first interface can accommodate the resized first interface component by moving the second interface component, the second interface component is moved in the first interface, and the resized first interface component is displayed in the area vacated after moving the second interface component.
[0009] If the first interface cannot accommodate the resized first interface component by moving the second interface component, the third interface component in the first interface is moved to the second interface, and the resized first interface component is displayed in the area vacated after the third interface component is removed.
[0010] On the other hand, embodiments of this application provide an interface component adjustment device, the device comprising:
[0011] An operation receiving module is used to receive size adjustment operations for components of the first interface in the first interface, the first interface including multiple areas;
[0012] The first adjustment module is used to move the second interface component in the first interface when the first interface can accommodate the first interface component after the size adjustment by moving the second interface component, and to display the first interface component after the size adjustment in the area vacated after moving the second interface component.
[0013] The second adjustment module is used to move the third interface component in the first interface to the second interface when the first interface cannot accommodate the first interface component after the size adjustment by moving the second interface component, and to display the first interface component after the size adjustment in the area vacated after removing the third interface component.
[0014] On the other hand, embodiments of this application provide a terminal, the terminal including a processor and a memory, the memory storing at least one computer instruction, the at least one computer instruction being loaded and executed by the processor to implement the interface component adjustment method as described above.
[0015] On the other hand, embodiments of this application provide a computer-readable storage medium storing at least one computer instruction, which is executed by a processor to implement the interface component adjustment method as described above.
[0016] On the other hand, embodiments of this application provide a computer program product, the computer program product including computer instructions, wherein a processor executes the computer instructions to implement the interface component adjustment method as described above. Attached Figure Description
[0017] Figure 1 shows a flowchart of an interface component adjustment method provided in an exemplary embodiment of this application;
[0018] Figure 2 is a schematic diagram illustrating an interface component in an exemplary embodiment of this application;
[0019] Figure 3 is a schematic diagram illustrating the process of translating interface components in an exemplary embodiment of this application;
[0020] Figure 4 is a schematic diagram illustrating a cross-page mobile interface component process in an exemplary embodiment of this application;
[0021] Figure 5 is a flowchart illustrating the implementation process of the minimum disturbance principle in an exemplary embodiment of this application;
[0022] Figure 6 is a schematic diagram illustrating the process of translating interface components in the row and column directions according to an exemplary embodiment of this application;
[0023] Figure 7 is a schematic diagram illustrating the process of translating interface components in the row and column directions, as shown in another exemplary embodiment of this application;
[0024] Figure 8 is a schematic diagram illustrating the process of translating interface components in the row and column directions in another exemplary embodiment of this application;
[0025] Figure 9 is a flowchart illustrating the comparison process of the increment of occupied cells and the number of unoccupied cells in an exemplary embodiment of this application;
[0026] Figure 10 is a schematic diagram of a mobile interface component within an interface, illustrating an exemplary embodiment of this application;
[0027] Figure 11 is a schematic diagram illustrating the process of enlarging interface components in a sparse region in an exemplary embodiment of this application;
[0028] Figure 12 is a schematic diagram illustrating the translation operation retraction process in an exemplary embodiment of this application;
[0029] Figure 13 is a schematic diagram illustrating a cross-interface mobile operation rollback process in an exemplary embodiment of this application;
[0030] Figure 14 shows a structural block diagram of an interface component adjustment device provided in another exemplary embodiment of this application;
[0031] Figure 15 shows a structural block diagram of a terminal provided in an exemplary embodiment of this application. Detailed Implementation
[0032] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.
[0033] In this article, "multiple" refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. The character " / " generally indicates that the preceding and following related objects have an "or" relationship.
[0034] To ensure flexibility in the layout of interface components, the terminal provides a component size editing function. The interface is divided into multiple grids (X*Y grids), and each grid serves as the smallest unit of area within the interface. Users can adjust the number of grids occupied by an interface component through size adjustment operations. For example, in edit mode, users can drag the deformation controls of the interface components to adjust them to 1*1, 1*2, 2*1, 2*2, and so on.
[0035] When enlarging a UI component using a resizing operation, the enlarged UI component may intersect with other surrounding UI components. Therefore, it is necessary to adjust the layout of other UI components to accommodate the enlarged UI component.
[0036] In this embodiment, to ensure a high success rate for resizing operations while minimizing the impact of local component resizing on the overall component layout, the terminal first attempts to display the resized component in the area freed up by moving other components within the current interface. If it is not possible to accommodate the resized component by moving other components within the current interface, the terminal moves some components from the current interface to other interfaces, thereby utilizing the freed-up area to display the resized component, thus ensuring a high success rate for the resizing operation.
[0037] Please refer to Figure 1, which shows a flowchart of an interface component adjustment method provided in an exemplary embodiment of this application. This embodiment uses a terminal (which may be a smartphone, tablet, wearable device, personal computer, etc.) with interface component display and adjustment functions as an example for illustration. The method may include the following steps.
[0038] Step 101: Receive the size adjustment operation of the first interface component in the first interface. The first interface includes multiple areas.
[0039] The interface involved in the embodiments of this application refers to an interface with interface component display and editing functions, and the interface includes multiple areas. In some embodiments, the interface includes several arrayed areas, each area is called a grid, and the grid is the smallest unit to accommodate interface components, and each interface component occupies an integer number of grids. For ease of description, the following embodiments use a grid as an example for illustration.
[0040] In some embodiments, when the interface is a desktop, the interface components that support size adjustment include at least one of application icons, folders, and desktop components. The folder may be a collection of application icons, and the desktop component may be a widget of the application, such as a weather widget, a smart assistant widget, etc., which is not limited in this embodiment.
[0041] As illustrated in Figure 2, the application icons 22, folders 23, and desktop widgets 24 displayed on the desktop 21 are all interface components that support resizing.
[0042] In other embodiments, when the interface is a status bar drop-down interface (the interface brought up by pulling down the status bar), the interface components that support size adjustment include at least one of shortcut function icons and function components. The shortcut function icons are used to trigger the activation of shortcut functions, such as turning Wi-Fi on / off, turning flashlight on / off, turning airplane mode on / off, etc.; the function components are used to trigger the use of specific functions, such as brightness adjustment, music playback control, volume adjustment, etc.
[0043] Of course, in addition to being provided by the system, the interface and interface components can also be provided by the application. That is, the interface is an application interface and the interface components can correspond to application functions. This embodiment does not limit this.
[0044] In one possible implementation, when an interface editing trigger operation is received, the first interface enters an editing state. In the editing state, the size of the interface components can be adjusted. This interface editing trigger operation can be a specific gesture operation, such as a long press, multi-finger pinch, etc., and this embodiment does not limit this to any particular gesture.
[0045] In some embodiments, during the edit state, the interface component with resizing capability in the first interface displays a resizing control, which is used to receive resizing operations on the interface component. This resizing control may be a draggable control displayed in the corner area of the interface component.
[0046] As illustrated in Figure 3, when a long-press operation is received on a blank area of interface 31, interface 31 enters edit mode. In edit mode, draggable controls 33 are displayed in the corner areas of the first interface component 32 in interface 31. Users can drag the draggable controls 33 to adjust the size of the first interface component 32.
[0047] The size adjustment operation can be used to increase the size of interface components, such as enlarging the original 1*1 interface component to 1*2 or 2*2; the size adjustment operation can also be used to shrink the size of interface components, such as shrinking the original 2*2 interface component to 2*1 or 1*1.
[0048] Step 102: If the first interface can accommodate the resized first interface component by moving the second interface component, move the second interface component in the first interface and display the resized first interface component in the area vacated after moving the second interface component.
[0049] In one possible implementation, if the size of the first interface component after the size adjustment is larger than the size of the first interface component before the size adjustment, the terminal attempts to move the second interface component within the first interface to utilize the area freed up by moving the second interface component in the first interface to accommodate the first interface component after the size adjustment.
[0050] The second interface component is an interface component located around the first interface component, and the number of second interface components can be one or more. The specific method for determining the second interface component will be described in detail in the following embodiments.
[0051] In this embodiment, moving the second interface component refers to moving the second interface component within the interface along the grid division direction. For example, when the interface is divided into X*Y grids according to rows and columns, the terminal attempts to move the second interface component along at least one of the row direction or column direction.
[0052] In cases where there are multiple second interface components, the relative positions of the multiple second interface components remain unchanged before and after startup; and the layout of the interface components other than the first and second interface components in the first interface does not change before and after movement.
[0053] It should be noted that the process of attempting to move the second interface component is a background calculation process of the terminal, meaning that the process of attempting to move is not displayed on the interface.
[0054] If the first interface supports moving the second interface component to accommodate the resized first interface component (i.e., the attempt is successful), the terminal moves the second interface component in the first interface and moves the resized first interface component to the area vacated after translating the second interface component.
[0055] As illustrated in Figure 3, when the user drags the draggable control 33 downwards to adjust the first interface component 32 from 1*1 to 1*2, the terminal moves the second interface component 34, located below the first interface component 32, down one grid cell, and displays the 1*2 first interface component 32 in the vacated grid cell. Clearly, in this way, only the layout position of the second interface component changes within the interface, while the layout of other interface components remains unchanged, minimizing the impact of adjusting the size of interface components on the overall interface layout.
[0056] Step 103: If the first interface cannot accommodate the resized first interface component by moving the second interface component, move the third interface component in the first interface to the second interface, and display the resized first interface component in the area vacated after removing the third interface component.
[0057] If the size of the first interface component is too large after resizing, or if the layout of existing interface components in the first interface is too compact, it may not be possible to move the second interface component to accommodate the resized first interface component. Therefore, to ensure the success rate of the resizing operation, if the first interface cannot accommodate the resized first interface component by moving the second interface component (i.e., the attempt fails), the terminal moves the third interface component from the first interface to the second interface, thereby displaying the resized first interface component in the area freed up after removing the third interface component.
[0058] The third interface component is an adjacent component to the first interface component, and the number of third interface components can be one or more. The specific method for determining the third interface component will be described in detail in the following embodiments.
[0059] In cases where there are multiple third interface components, the relative positions of the multiple third interface components remain unchanged after moving to the second interface; and the layout of the interface components other than the first interface components and the third interface components in the first interface does not change before and after moving the third interface components.
[0060] As illustrated in Figure 4, when the user drags the draggable control 43 of the first interface component 42 to the lower right, adjusting the first interface component 42 from 1*1 to 2*2, the terminal moves the third interface component 44 (located below, to the right, and to the lower right of the first interface component 42) from the first interface 41 to the second interface 45, and displays the 2*2 first interface component 42 in the empty grid space after removing the third interface component 44. Clearly, in this way, only the layout position of the third interface component changes within the interface, while the layout of other interface components remains unchanged, minimizing the impact of adjusting the size of interface components on the overall interface layout.
[0061] It should be noted that when displaying the resized first interface component in the first interface, the terminal needs to adjust the relevant display parameters of the first interface component. For example, when the first interface component is a folder, the display method (such as size) of the application icons in the folder needs to be adjusted; when the first interface component is a desktop component, the component content of the desktop component needs to be adjusted (such as displaying more information). This embodiment will not elaborate on these details.
[0062] In summary, in this embodiment, when adjusting the size of interface components, other interface components are moved to attempt to display the resized interface component in the area freed up after the component is moved, thus reducing the impact of local component resizing on the overall interface component layout. Furthermore, if it is impossible to accommodate the resized interface component by moving other interface components, some interface components are moved to other interfaces, thereby utilizing the freed-up area after removing the component to display the resized interface component, improving the success rate of interface component resizing operations.
[0063] In some embodiments, the method includes:
[0064] Based on the size adjustment operation, the third interface component in the first interface is determined, and the third interface component overlaps with the first interface component after size adjustment.
[0065] The second interface component is determined based on the third interface component, and the second interface component includes the third interface component, and the second interface component includes at least one of the interface components in the same column as the third interface component and the interface components in the same row as the third interface component.
[0066] Translate the second interface component along at least one of the row and column directions;
[0067] When the translated second interface component is located within the first interface, it is determined that the first interface can accommodate the sized first interface component by moving the second interface component.
[0068] If the translated second interface component is located outside the first interface, it is determined that the first interface cannot accommodate the resized first interface component by moving the second interface component.
[0069] In some embodiments, translating the second interface component along at least one of the row direction and the column direction includes:
[0070] When the second interface component includes the third interface component and an interface component in the same column as the third interface component, the second interface component is translated along the column direction;
[0071] When the second interface component includes the third interface component and an interface component in the same row as the third interface component, the second interface component is translated along the row direction;
[0072] When the second interface component includes the third interface component, an interface component in the same column as the third interface component, and an interface component in the same row as the third interface component, the second interface component is translated along the row direction and the column direction.
[0073] In some embodiments, determining the third interface component in the first interface based on the size adjustment operation includes:
[0074] Based on the size adjustment operation, the adjustment direction and adjustment amount are determined, wherein the adjustment direction includes at least one of the row direction and the column direction;
[0075] Based on the adjustment direction and the adjustment amount, determine the component position and component size of the first interface component after the size adjustment;
[0076] Based on the component position and size of the first interface component after size adjustment, and the component position and size of other interface components in the first interface, the third interface component in the first interface that overlaps with the first interface component after size adjustment is determined.
[0077] In some embodiments, the method further includes:
[0078] Based on the component size of the first interface component before and after the size adjustment, determine the incremental area occupied by the first interface component after the size adjustment;
[0079] Based on the area occupancy status of the first interface, determine the number of unoccupied areas of the first interface;
[0080] Determining the second interface component based on the third interface component includes:
[0081] If the number of unoccupied areas is greater than or equal to the increment of occupied areas, the second interface component is determined based on the third interface component.
[0082] In some embodiments, the method further includes:
[0083] If the number of unoccupied areas is less than the increment of occupied areas, the third interface component is moved to the second interface, and the first interface component with adjusted size is displayed in the area vacated after the third interface component is removed.
[0084] In some embodiments, the method further includes:
[0085] If the first interface cannot accommodate the resized first interface component by moving the second interface component, obtain the component size of the third interface component and the area occupancy status of the first interface.
[0086] If a target area is determined to exist in the first interface based on the area occupancy status, the third interface component is moved to the target area, and the first interface component with adjusted size is displayed in the area vacated after the third interface component is moved. The size of the target area is greater than or equal to the component size of the third interface component, and the target area is not occupied.
[0087] In some embodiments, when the first interface cannot accommodate the resized first interface component by moving the second interface component, moving the third interface component from the first interface to the second interface and displaying the resized first interface component in the area vacated after removing the third interface component includes:
[0088] If the first interface cannot accommodate the resized first interface component by translating the second interface component, and the target area does not exist in the first interface, the third interface component in the first interface is moved to the second interface, and the resized first interface component is displayed in the area vacated after removing the third interface component.
[0089] In some embodiments, the method further includes:
[0090] If the third interface component is not present in the first interface, maintain the layout of other interface components in the first interface and display the first interface component after size adjustment.
[0091] In some embodiments, the second interface is an existing interface or a newly added interface;
[0092] Moving the third interface component from the first interface to the second interface includes:
[0093] If at least one existing interface exists that supports accommodating the third interface component, the third interface component is moved to the existing interface closest to the first interface; or,
[0094] If there is no existing interface that can accommodate the third interface component, a new interface is created after the first interface, and the third interface component is moved to the new interface.
[0095] In some embodiments, after translating the second interface component in the first interface, the method further includes:
[0096] If the size adjustment operation for the first interface component is received again, and the original position of the second interface component in the first interface is unoccupied after the size adjustment, the second interface component is translated to the original position in the first interface.
[0097] After moving the third interface component from the first interface to the second interface, the method further includes:
[0098] If the size adjustment operation for the first interface component is received again, and the original positions of some or all of the third interface components in the first interface are unoccupied after the size adjustment, some or all of the third interface components are moved to the first interface.
[0099] In some embodiments, the method further includes:
[0100] Upon receiving an interface editing trigger operation on the first interface, the original position information of each interface component in the first interface is saved. The interface editing trigger operation is used to trigger the interface to enter the editing state.
[0101] Upon receiving an editing application operation on the first interface, the original location information is deleted. The editing application operation is used to trigger an editing operation within the application interface and exit the editing state.
[0102] In some embodiments, the method further includes:
[0103] In response to the size adjustment reversal operation, restore the first interface component;
[0104] Restore the display position of the second interface component or the third interface component in the first interface.
[0105] In some embodiments, when the first interface is a desktop, the first interface component is at least one of an application icon, a folder, and a desktop component;
[0106] When the first interface is a status bar drop-down interface, the first interface component is at least one of quick function icons and function components.
[0107] To reduce the impact of local interface component size adjustments on the overall interface component layout, the terminal adopts the principle of minimum disturbance to determine the second interface component that needs to be translated (the translation has the least impact on the interface layout) and the third interface component that needs to be removed. That is, the interface component that needs to be translated the least to accommodate the first interface component after size adjustment, or the interface component that needs to be removed the least to accommodate the first interface component after size adjustment.
[0108] In one possible implementation, as shown in Figure 5, the implementation of the minimum perturbation principle may include the following steps:
[0109] Step 501: Based on the size adjustment operation, determine the third interface component in the first interface. The third interface component overlaps with the first interface component after size adjustment.
[0110] In one possible implementation, the terminal determines the component position and size of the first interface component after size adjustment based on the size adjustment operation. Then, based on the component information of the first interface component after size adjustment and the component information of other interface components in the first interface, it determines a third interface component that overlaps with the first interface component. Here, "overlapping areas" refers to the overlapping areas occupied by the interface components.
[0111] Optionally, the process of determining the third-party interface components may include the following sub-steps:
[0112] Step 501A: Based on the size adjustment operation, determine the adjustment direction and adjustment amount, whereby the adjustment direction includes at least one of the row direction and the column direction.
[0113] Optionally, when the interface is divided into multiple regions according to row and column directions, the terminal determines the adjustment amount of the first interface component in the row and column directions during the size adjustment operation. This adjustment direction can include the first row direction, the second row direction, and the first column direction as positive directions, the second column direction as negative directions, the first row direction as positive directions, and the second row direction as negative directions; furthermore, this adjustment amount is an integer multiple of the number of regions.
[0114] In one possible implementation, when the size adjustment operation is a drag operation, the terminal calculates the drag distance components in the row and column directions based on the drag direction and drag distance. If the drag distance component is greater than a threshold, the adjustment amount is determined to be non-zero. For example, this threshold is half the grid size.
[0115] As illustrated in Figure 6, the user drags the draggable control 63 corresponding to the first interface component 62 in the first interface 61 downwards. The terminal determines the adjustment direction to be the first column direction, and the adjustment amount is 1 grid.
[0116] Step 501B: Based on the adjustment direction and adjustment amount, determine the component position and component size of the first interface component after size adjustment.
[0117] Furthermore, based on the original component size, adjustment direction, and adjustment amount of the first interface component, the terminal determines the component size and position of the first interface component after the size adjustment. The component position can be represented by the coordinates of the top-left corner area occupied by the interface component relative to the top-left corner area of the interface, and the component size can be represented by the number of areas occupied by the interface component in the row direction multiplied by the number of areas occupied in the column direction.
[0118] In some embodiments, when the adjustment direction is positive, the component size of the first interface component after size adjustment is the original component size plus the adjustment amount; when the adjustment direction is negative, the component size of the first interface component after size adjustment is the original component size minus the adjustment amount.
[0119] As illustrated in Figure 6, the terminal determines that the component size of the first interface component 62 after size adjustment is 1*2 based on the original component size 1*1, the adjustment direction (first column direction), and the adjustment amount (1 grid).
[0120] Step 501C: Based on the component position and size of the first interface component after size adjustment, and the component position and size of other interface components in the first interface, determine the third interface component in the first interface that overlaps with the first interface component after size adjustment.
[0121] In one possible implementation, the terminal obtains the component positions and component sizes of other interface components outside the first interface component in the first interface, and then determines a third interface component that overlaps with the first interface component after size adjustment based on the component position and component size of the first interface component after size adjustment, as well as the component positions and component sizes of other interface components.
[0122] Optionally, the terminal determines the area occupied by the interface component based on the component position and component size, and then determines the third interface component that overlaps with the area occupied by the first interface component after size adjustment and the areas occupied by other interface components based on the area occupied by the first interface component after size adjustment.
[0123] As illustrated in Figure 6, the terminal determines that a third interface component 64 in the first interface 61 has a grid overlap with the first interface component 62 after size adjustment.
[0124] Step 502: Determine a second interface component based on the third interface component. The second interface component includes the third interface component and includes at least one of the interface components in the same column as the third interface component and the interface components in the same row as the third interface component.
[0125] Since other interface components adjacent to the third interface component will also be affected when the third interface component is translated, when determining the second interface component to be translated, it is necessary to determine the interface components in the same row and / or column as the third interface component as the second interface component.
[0126] In one possible implementation, the terminal identifies a third interface component, as well as interface components that are in the same row and connected to the third interface component, as the third interface component; and / or, the terminal identifies a third interface component, as well as interface components that are in the same column and connected to the third interface component, as the third interface component. Here, "interface components connected" means that the areas occupied by the interface components are connected.
[0127] It should be noted that when there are no other interface components in the same row or column as the third interface component besides the first interface component, the second interface component is the third interface component.
[0128] In some embodiments, when the third interface component only includes interface components that are in the same row as the first interface component (the adjustment amount of the first interface component in the row direction is not 0 and the adjustment amount in the column direction is 0), the terminal determines the third interface component and the interface components that are in the same row and connected to the third interface component as the third interface component; or, the terminal determines the third interface component and the interface components that are in the same column and connected to the third interface component as the third interface component.
[0129] If the third interface component only contains interface components in the same column as the first interface component (the adjustment amount of the first interface component in the row direction is 0, and the adjustment amount in the column direction is not 0), the terminal will identify the third interface component and the interface components in the same row and connected to the third interface component as the third interface component; or, the terminal will identify the third interface component and the interface components in the same column and connected to the third interface component as the third interface component.
[0130] When the third interface component contains interface components in the same row and column as the first interface component (the adjustment amount of the first interface component in the row direction is not 0, and the adjustment amount in the column direction is not 0), the terminal determines the third interface component, the interface component in the same row and connected to the third interface component as the third interface component, and the interface component in the same column and connected to the third interface component as the third interface component.
[0131] As illustrated in Figure 6, the terminal defines the third interface component 64 and the interface components in the same column as it as the second interface component 65, or defines the third interface component 64 and the interface components in the same row as it as the second interface component 65.
[0132] Step 503: Translate the second interface component along at least one of the row and column directions.
[0133] After identifying the second interface component, the terminal attempts to translate the second interface component along at least one of the row and column directions. Based on whether the second interface component is still within the first interface after translation, it is determined whether the first interface component with adjusted size can be accommodated by translating the second interface component.
[0134] In some embodiments, the translation methods used by the terminal for different types of second interface components may include the following:
[0135] Method 1: When the second interface component includes a third interface component and an interface component in the same column as the third interface component, translate the second interface component along the column direction.
[0136] When the second interface component includes a third interface component and an interface component in the same column as the third interface component, the terminal translates the second interface component along the column direction to make room for the resized first interface component, since only by moving the second interface component along the column direction can an area be made available.
[0137] Optionally, the terminal can translate the second interface component along the column direction using a grid as the translation step. Specifically, the terminal can attempt to move the second interface component along both the positive and negative directions of the column direction.
[0138] As illustrated in Figure 6, the terminal attempts to translate the second interface component 65 (including the third interface component 64 and the interface components in the same column) downwards along the column direction.
[0139] Method 2: If the second interface component includes the third interface component and the interface component in the same row as the third interface component, translate the second interface component along the row direction.
[0140] In the case where the second interface component includes a third interface component and an interface component that runs parallel to the third interface component, the terminal translates the second interface component along the row direction to make room for the resized first interface component, since the second interface component can only be moved along the row direction.
[0141] Optionally, the terminal can translate the second interface component along the row direction using a grid as the translation step. Specifically, the terminal can attempt to move the second interface component in both the positive and negative directions of the row direction.
[0142] As illustrated in Figure 6, the terminal attempts to translate the second interface component 65 (including the third interface component 64 and the interface components in the same row) downwards along the row direction.
[0143] Method 3: When the second interface component includes a third interface component, an interface component in the same column as the third interface component, and an interface component in the same row as the third interface component, the second interface component is translated along the row and column directions.
[0144] When the second interface component includes a third interface component, an interface component in the same column as the third interface component, and an interface component in the same row as the third interface component, the terminal translates the second interface component along the row and column directions to make room for the first interface component after size adjustment, since the second interface component can only be moved along both the row and column directions at the same time.
[0145] Optionally, the terminal can translate the second interface component along the row and column directions using a grid as the translation step. Specifically, the terminal can attempt to move the second interface component in both the positive and negative directions of the row and column.
[0146] Step 504: When the translated second interface component is located within the first interface, determine that the first interface can accommodate the resized first interface component by moving the second interface component.
[0147] When the translated second interface component is still located within the first interface, it indicates that the first interface component, after its size adjustment, can be accommodated by translating the second interface component.
[0148] In some embodiments, when the third interface component only contains interface components in the same column as the first interface component, and the second interface component after being translated in the column direction is located within the first interface, or the second interface component after being translated in the row direction is located within the first interface, the terminal determines that the first interface can accommodate the first interface component after size adjustment by translating the second interface component.
[0149] When the third interface component only contains interface components in the same row as the first interface component, and the second interface component after being translated in the column direction is located within the first interface, or the second interface component after being translated in the row direction is located within the first interface, the terminal determines that the first interface can accommodate the first interface component after size adjustment by translating the second interface component.
[0150] When the third interface component includes interface components in the same row and column as the first interface component, and the second interface component after being translated in the column direction is located within the first interface, and the second interface component after being translated in the row direction is located within the first interface, the terminal determines that the first interface can accommodate the first interface component after size adjustment by translating the second interface component.
[0151] Schematic, as shown in Figure 6, after the terminal attempts to translate the second interface component 65 downwards along the column direction (including the third interface component 64 and the interface components in the same column), the translated second interface component 65 is still located within the first interface 61; the terminal then attempts to translate the second interface component 65 downwards along the row direction (including the third interface component 64 and the interface components in the same row), and the translated second interface component 65 is located outside the first interface 61. Therefore, the terminal determines that the first interface 61 can accommodate the resized first interface component 62 by translating the second interface component 65 (including the third interface component 64 and the interface components in the same column).
[0152] In another illustrative example, as shown in Figure 7, when the user adjusts the size of the first interface component 72 in the first interface 71 from 1*1 to 1*2, the terminal attempts to translate the second interface component 74 (including the third interface component 73 and the interface components in the same column) downwards along the column direction. The translated second interface component 74 is located outside the first interface 71. The terminal then attempts to translate the second interface component 74 (including the third interface component 73 and the interface components in the same row) downwards along the row direction. The translated second interface component 74 remains within the first interface 71. Therefore, the terminal determines that the first interface 71 cannot accommodate the resized first interface component 72 by translating the second interface component 74 (including the third interface component 73 and the interface components in the same row).
[0153] Step 505: If the translated second interface component is located outside the first interface, determine that the first interface cannot accommodate the resized first interface component by moving the second interface component.
[0154] When the translated second interface component is located outside the first interface, it indicates that the translated second interface component cannot accommodate the resized first interface component, and some interface components in the interface need to be removed.
[0155] In some embodiments, when the third interface component only contains interface components in the same column as the first interface component, and the second interface component after being translated in the column direction is located outside the first interface, and the second interface component after being translated in the row direction is located outside the first interface, the terminal determines that the first interface cannot accommodate the first interface component after size adjustment by translating the second interface component.
[0156] If the third interface component only contains interface components in the same row as the first interface component, and the second interface component after being translated in the column direction is located outside the first interface, and the second interface component after being translated in the row direction is located outside the first interface, the terminal determines that the first interface cannot accommodate the first interface component after size adjustment by translating the second interface component.
[0157] When the third interface component contains interface components in the same row and column as the first interface component, and the second interface component after being translated in the column direction is located outside the first interface, and / or the second interface component after being translated in the row direction is located outside the first interface, the terminal determines that the first interface cannot accommodate the first interface component after size adjustment by translating the second interface component.
[0158] As illustrated in Figure 8, when the user adjusts the size of the first interface component 82 in the first interface 81 from 1*1 to 2*2, the terminal attempts to move the second interface component 83 downwards along the column direction. The moved second interface component 83 remains within the first interface 81. Finally, the terminal attempts to move the second interface component 83 downwards along the row direction, but the moved second interface component 83 is outside the first interface 81. Therefore, the terminal determines that the first interface 81 cannot accommodate the resized first interface component 82 by moving the second interface component 83.
[0159] If the first interface cannot accommodate the resized first interface component by translating the second interface component, in order to minimize the impact of the resizing on the overall interface layout, the terminal will move the third interface component that intersects with the resized first interface component to the second interface.
[0160] In this embodiment, the terminal determines the second interface component to be translated and the third interface component to be removed based on the principle of minimum disturbance. This allows the terminal to accommodate the first interface component after size adjustment by translating the fewest interface components or by removing the fewest interface components. This reduces the impact of local interface component size adjustment on the overall interface component layout while ensuring the success rate of component size adjustment.
[0161] In one possible implementation, to reduce the computational load during translation attempts, before determining the second interface component and attempting to translate it, the terminal can make a preliminary judgment on whether the first interface can accommodate the resized first interface component based on the availability of space in the area of the first interface. Optionally, as shown in Figure 9, the method may include the following steps.
[0162] Step 901: Based on the component size of the first interface component before and after the size adjustment, determine the incremental area occupied by the first interface component after the size adjustment.
[0163] In one possible implementation, the terminal determines the number of occupied areas of the first interface component before the size adjustment based on the component size of the first interface component before the size adjustment, and determines the number of occupied areas of the first interface component after the size adjustment based on the component size of the first interface component after the size adjustment, thereby determining the difference between the two as the increment of occupied area.
[0164] In some embodiments, when the interface includes multiple grids, the terminal determines the grid increment occupied by the first interface component after the size adjustment.
[0165] To illustrate, when the size of the first interface component before the size adjustment is 1*1, and the size of the first interface component after the size adjustment is 1*2, the terminal determines that the grid occupancy increment is 1; when the size of the first interface component before the size adjustment is 2*1, and the size of the first interface component after the size adjustment is 2*2, the terminal determines that the grid occupancy increment is 2.
[0166] Step 902: Determine the number of unoccupied areas of the first interface based on the area occupancy status of the first interface.
[0167] The area occupancy status is used to indicate whether each area in the first interface is occupied.
[0168] In one possible implementation, the terminal uses a two-dimensional array to store the region occupancy status of the interface. For example, when the interface is divided into X*Y regions, the terminal uses an X*Y two-dimensional array to store the region occupancy status. In this array, an element value of 0 indicates that the region corresponding to that element value is not occupied, and an element value of 1 indicates that the region corresponding to that element value is occupied.
[0169] In some embodiments, when the interface includes multiple grids, the area occupancy status is called the grid occupancy status, which is used to characterize whether each grid in the interface is occupied.
[0170] Based on the area occupancy status of the first interface, the terminal determines the number of unoccupied areas of the first interface and compares the increase in the occupied area of the first interface component after size adjustment with the number of unoccupied areas. If the number of unoccupied areas is greater than or equal to the increase in the occupied area, step 903 is executed; if the number of unoccupied areas is less than the increase in the occupied area, step 904 is executed.
[0171] Step 903: If the number of unoccupied areas is greater than or equal to the increment of occupied areas, determine the second interface component based on the third interface component.
[0172] If the number of unoccupied areas is greater than or equal to the increment of occupied areas, the surface may move some interface components to accommodate the first interface component after size adjustment. Therefore, the terminal determines the second interface component based on the third interface component and then attempts to move the second interface component.
[0173] As illustrated in Figure 6, the number of unoccupied grids in the first interface 61 is 3, and the increase in the number of occupied grids in the first interface component 62 after the size adjustment is 1 (1*1 becomes 1*2). That is, the number of unoccupied grids is greater than the increase in the number of occupied grids. The terminal determines the second interface component 65 based on the third interface component 64.
[0174] Step 904: If the number of unoccupied areas is less than the increment of occupied areas, move the third interface component to the second interface and display the resized first interface component in the empty area after removing the third interface component.
[0175] When the number of unoccupied areas is less than the increment of occupied areas, no matter how the interface components are moved, the surface cannot accommodate the resized first interface component. Therefore, the terminal does not need to further determine the second interface component to be moved, but directly moves the third interface component to the second interface. The process of moving the third interface component to the second interface and displaying the resized first interface component in the area freed up after removing the third interface component can refer to step 103 above, and will not be repeated here in this embodiment.
[0176] As illustrated in Figure 4, the number of unoccupied grids in the first interface 41 is 2, and the increase in the number of occupied grids in the first interface component 42 after the size adjustment is 3 (1*1 becomes 2*2). That is, the number of unoccupied grids is less than the increase in the number of occupied grids. The terminal does not need to further determine the second interface component, but directly moves the third interface component 44, which intersects with the first interface component 42 after the size adjustment, to the second interface 45.
[0177] In this embodiment, the terminal initially determines whether it is possible to move some interface components within the first interface to accommodate the original first interface components by comparing the number of unoccupied areas on the first interface with the increase in the occupied area of the components before and after the size adjustment. If it is initially determined that it is not possible to move some interface components within the first interface to accommodate the original first interface components, the terminal does not need to further determine the second interface component to be moved and attempt to move it. Instead, it directly moves the third interface component to the second interface, avoiding invalid calculations caused by attempting to move it and helping to improve the response speed of the size adjustment operation.
[0178] In some scenarios, if the second interface component cannot be moved to accommodate the resized first interface component on the first interface, the terminal does not directly move the third interface component across interfaces. Instead, it first attempts to find an unoccupied area within the first interface that can accommodate the third interface component. If such an area exists, the third interface component can be moved to that unoccupied area, avoiding cross-interface movement. If no such area exists, the third interface component is moved across interfaces.
[0179] In one possible implementation, if the first interface cannot accommodate the resized first interface component by moving the second interface component, the terminal obtains the component size of the third interface component and the area occupancy status of the first interface.
[0180] The area occupancy status of the first interface is used to indicate whether each area in the first interface is occupied. Optionally, the terminal uses a two-dimensional array to store the area occupancy status of the interface.
[0181] In some embodiments, the component size of the third interface component can be represented by the number of grid cells it occupies in the row and column directions. For example, a component size of 1*2 means that the third interface component occupies 1 grid cell in the row direction and 2 grid cells in the column direction, for a total of 2 grid cells.
[0182] Furthermore, the terminal determines whether a target area exists in the first interface based on the component size of the third interface component and the area occupancy status of the first interface. Specifically, the target area must be larger than or equal to the component size of the third interface component, and the area within the target area must not be occupied.
[0183] In some embodiments, when the target area is a target grid area, none of the grids within the target grid area are occupied, and the grids within the target grid area are connected. Here, grid connectivity means that in the current grid, there is at least one other grid adjacent to the current grid in either the row or column direction.
[0184] The following situations apply to the target area being larger than or equal to the size of the third interface component: 1. The number of areas occupied by the target area in the row direction is greater than or equal to the number of areas occupied by the third interface component in the row direction, and the number of areas occupied by the target area in the column direction is greater than or equal to the number of areas occupied by the third interface component in the column direction; 2. The number of areas occupied by the target area in the row direction is greater than or equal to the number of areas occupied by the third interface component in the column direction, and the number of areas occupied by the target area in the column direction is greater than or equal to the number of areas occupied by the third interface component in the row direction.
[0185] In an illustrative example, the size of the third interface component is 1*2, and the size of the target area can be 1*2, 1*3, 2*1, 2*2, 2*3, etc.
[0186] Since the size of the target area is greater than or equal to the size of the third interface component, the target area can accommodate the third interface component.
[0187] Accordingly, if the terminal determines that there is a target area in the first interface based on the area occupancy status, it will move the third interface component to the target area and display the first interface component with the adjusted size in the area vacated after moving the third interface component.
[0188] As illustrated in Figure 10, when the user adjusts the first interface component 1002 in the first interface 1001 from 1*1 to 1*2, regardless of whether the second interface component, including the third interface component 1003, is shifted in the column or row direction, it cannot accommodate the resized first interface component 1002 (after shifting in the column or row, the second interface component will exceed the first interface). Based on the grid occupancy status of the first interface 1001, the terminal determines that there exists a target grid area 1004 whose size is equal to the component size of the third interface component 1003. Therefore, the terminal moves the third interface component 1003 to the target grid area 1004, and the resized first interface component 1002 is displayed in the grid space vacated after the third interface component 1003 is moved.
[0189] It should be noted that if the target area occupies more or less space in the row direction than the third interface component occupies more or less space in the column direction, and vice versa, the terminal needs to adjust the orientation of the third interface component when moving it to the target area. For example, if the third interface component has a size of 1*2 and the target area has a size of 2*1, the terminal needs to adjust the third interface component to 2*1 before moving it to the target area.
[0190] Optionally, if the second interface component cannot be moved to accommodate the resized first interface component on the first interface, and there is no target area on the first interface, the terminal moves the third interface component on the first interface to the second interface and displays the resized first interface component in the area vacated after removing the third interface component.
[0191] Since the second interface component cannot accommodate the resized first interface component by translating it, and there is no unoccupied area in the first interface that can fully accommodate the third interface component, the terminal moves the third interface component to the second interface.
[0192] In this embodiment, if the first interface cannot accommodate the resized first interface component by translating the second interface component, the terminal further attempts to find an unoccupied area in the first interface that can accommodate the third interface component. When found, the third interface component is moved to the unoccupied area to avoid moving the third interface component across interfaces and further reduce the impact of local interface component size adjustment on the overall interface layout.
[0193] In the above embodiments, the example described is the intersection of the resized first interface component with other interface components. However, when the components around the first interface component are sparsely distributed, adjusting the size of the first interface component may not affect the surrounding interface components. In one possible implementation, if there is no third interface component in the first interface, the layout of the other interface components in the first interface is maintained, and the resized first interface component is displayed.
[0194] In some embodiments, if the terminal determines that there is no third interface component intersecting with the first interface component after size adjustment based on the component size of the first interface component after size adjustment and the component size of each interface component in the first interface, the terminal maintains the layout of other interface components in the first interface and displays the first interface component after size adjustment.
[0195] As illustrated in Figure 11, the components surrounding the first interface component 1102 in the first interface 1101 are sparsely distributed. When the user adjusts the first interface component 1102 from 1*1 to 1*2, 2*1, and 2*2, it will not affect the layout of other interface components.
[0196] Regarding the second interface that accommodates the third interface component removed from the first interface, in some embodiments, the second interface may be an existing interface or a newly added interface. Accordingly, moving the third interface component to the second interface may include the following two scenarios:
[0197] Case 1: If there is at least one existing interface that can accommodate the third interface component, move the third interface component to the existing interface that is closest to the first interface.
[0198] In one possible implementation, the terminal determines whether there exists an existing interface that can fully accommodate the third interface component, based on the area occupancy status of the existing interface and the component size of the third interface component. If such an interface exists, the terminal moves the third interface component to that existing interface; otherwise, the terminal needs to create a new interface to fully accommodate the third interface component.
[0199] The process of determining whether a third interface component can be accommodated based on the area occupancy status of the existing interface can be referred to in the above embodiment, and will not be repeated here.
[0200] Optionally, in the case of multiple existing interfaces that support accommodating third interface components, in order to facilitate users to find the third interface components that have been moved out of the first interface more quickly, the terminal moves the third interface components to the existing interface (which supports accommodating third interface components) closest to the first interface.
[0201] The distance between interfaces can be the difference in interface identifiers, which are used to represent the switching order between interfaces.
[0202] Scenario 2: If there is no existing interface that can accommodate the third interface component, create a new interface after the first interface and move the third interface component to the new interface.
[0203] In order to fully accommodate the third interface component, if there is no existing interface that supports accommodating the third interface component, the terminal creates a new interface and moves the third interface component to the new interface.
[0204] Specifically, if the total number of existing interfaces has not reached the interface quantity threshold, the terminal creates a new interface; if the total number of interfaces has reached the interface quantity threshold, the terminal displays a prompt message.
[0205] To make it easier for users to quickly view the third interface components that have been moved out of the first interface, a new interface is created after the first interface on the terminal. Users can then view the moved-out third interface components with a single interface switch.
[0206] In this embodiment, the terminal first searches for an existing interface that can accommodate the third interface component and moves the third interface component to the existing interface closest to the first interface, so that the user can quickly view the moved-out third interface component; if there is no existing interface that can accommodate the third interface component, the terminal creates a new interface after the first interface and moves the third interface component to the new interface, so that the user can quickly view the moved-out third interface component.
[0207] Since users typically make multiple and iterative adjustments when resizing interface components—for example, by adjusting the deformation direction or size of the components in different ways—to observe the effects of different adjustments and ultimately determine the final adjustment method, this application embodiment supports undoing the translation operation of the second interface component and the removal operation of the third interface component to improve the flexibility of the adjustment process.
[0208] In one possible implementation, after translating the second interface component in the first interface, if a size adjustment operation for the first interface component is received again, and the original position of the second interface component in the first interface is unoccupied after the size adjustment, the second interface component is translated back to its original position in the first interface.
[0209] Optionally, a subsequent size adjustment operation can be a continuous operation following the previous one. For example, continuously dragging a draggable control of a UI component to adjust its size.
[0210] In one possible implementation, upon receiving another size adjustment operation for the first interface component, the terminal determines the component position and size of the first interface component after the size adjustment, and determines the current area occupancy status of the first interface. By comparing the current area occupancy status with the original position information of the second interface component, the terminal determines whether the original position of the second interface component is in an unoccupied state (meaning it is not occupied by other interface components besides the second interface component).
[0211] If the original position of the second interface component is unoccupied, the terminal will move the second interface component to its original position in the first interface. If the original position of the second interface component is still occupied, the terminal will maintain the current position of the second interface component.
[0212] As illustrated in Figure 12, the user first adjusts the first interface component 1202 in the first interface 1201 from 1*1 to 1*2 by dragging. At this time, the second interface component 1203 shifts down one grid to make room for the resized first interface component 1202. When the user continues to drag the first interface component 1202 back to 1*1, since the original position of the second interface component 1203 is now empty, the terminal shifts the second interface component 1203 up one grid.
[0213] In one possible implementation, after moving the third interface component in the first interface to the second interface, if a size adjustment operation for the first interface component is received again, and the original positions of some or all of the third interface components in the first interface are unoccupied after the size adjustment, some or all of the third interface components are moved to the first interface.
[0214] In one possible implementation, upon receiving another size adjustment operation for the first interface component, the terminal determines the component position and size of the first interface component after the size adjustment, and determines the current area occupancy status of the first interface. By comparing the current area occupancy status with the original position information of the third interface component, the terminal determines whether the original position of the third interface component is in an unoccupied state (meaning it is not occupied by any other interface component besides the third interface component).
[0215] Specifically, when the third interface component contains only a single interface component, the terminal determines whether the original position of the third interface component as a whole is in an unoccupied state; when the third interface component contains multiple interface components, the terminal determines whether the original position of each interface component is in an unoccupied state.
[0216] If some third-party interface components are in unoccupied positions, the terminal will move those components back to their original positions on the first interface, while the remaining components whose original positions are still occupied will remain unchanged. If all third-party interface components are in unoccupied positions, the terminal will move all of them back to their original positions on the first interface. In other words, it allows for the complete removal of third-party interface components from the first interface, but also supports the partial removal of some components back to the first interface.
[0217] As illustrated in Figure 13, when the user adjusts the first interface component 1302 in the first interface 1301 from 1*1 to 2*2 by dragging, the terminal moves the third interface component 1303 out of the first interface 1301 to accommodate the 2*2 first interface component 1302. When the user continues to adjust the first interface component 1302 from 2*2 to 2*1 by dragging, since the original positions of the first sub-interface component 1304 and the second sub-interface component 1305 in the third interface component 1303 are vacated, the terminal moves the first sub-interface component 1304 and the second sub-interface component 1305 back to their original positions in the first interface 1301.
[0218] In order to achieve the reversal of the temporary size adjustment operation, in some embodiments, when an interface editing trigger operation is received for the first interface, the terminal saves the original position information of each interface component in the first interface. The interface editing trigger operation is used to trigger the interface to enter the editing state.
[0219] The terminal then determines, based on the recorded original position information, whether it is necessary to retract the in-interface translation and out-of-interface operations of the interface components.
[0220] Optionally, the original location information may include the original component position and original component size of the interface component.
[0221] In order to preserve the user's valid size adjustment operations and prevent valid adjustments from being accidentally revoked, in some embodiments, when an editing application operation is received on the first interface, the terminal deletes the original position information. The editing application operation is used to trigger the editing operation within the application interface and exit the editing state.
[0222] Optionally, the editing application operation can be a trigger operation on the editing confirmation control within the interface, or a trigger operation on a specified area within the interface (such as a blank area in the interface).
[0223] In one possible implementation, while in edit mode, the terminal caches the component identifiers of the second interface component that has been translated and the third interface component that has been moved out. Later, when determining whether to restore the original positions of the interface components, the terminal retrieves the stored component identifiers from the cache and uses these identifiers to obtain the original position information of the translated or moved-out interface components. Upon exiting edit mode, the terminal deletes the component identifiers stored in the cache.
[0224] In addition to reversing the translation or removal of interface components without applying editing operations, in another possible implementation, the terminal may also provide a size adjustment reversal function. In response to the size adjustment reversal operation, the terminal restores the first interface component and restores the display position of the second or third interface component in the first interface.
[0225] Optionally, the terminal displays an edit retraction control in the interface. When a trigger operation is received on the edit retraction control, the terminal performs a size adjustment retraction.
[0226] Optionally, the terminal records the original layout of the first interface and stores the layout of the interface components after resizing in temporary storage. When a resizing rollback operation is received, the terminal performs the resizing rollback based on the recorded original interface layout. When an application edit operation is received, the terminal updates the original layout of the first interface according to the temporarily stored interface layout.
[0227] In this embodiment, the terminal provides a size adjustment rollback function. With this function, interface components that were previously moved or removed from the interface due to size adjustment can be moved back to their original positions in the interface when their original positions are freed up again. This eliminates the need for manual operation by the user and improves the adjustment efficiency of interface components.
[0228] Based on the above embodiments, the complete logic for adjusting the interface components is as follows.
[0229] 1. Long press the UI component IconA to display the ItemResizeFrame shapebox;
[0230] 2. Drag and drop the resize frame ItemResizeFrame;
[0231] 3. Create a deformable area on the CellLayout using the `createAreaForResize` function;
[0232] 4. Attempt to calculate the rearrangement scheme using `tryPerformWhenResizeDragViewRect`. If this fails, move the placeholder UI component that intersects with the expanded deformable box to the cache to be moved, `saveDeliverChildrenToCache`, and try calculating the rearrangement scheme again.
[0233] 5. If successful, execute this rearrangement scheme and store it in a temporary two-dimensional array of grid occupancy status;
[0234] 5.1. Determine if the placeholder UI component in the back-shifted cache has the condition to be rolled back to its original position. If the condition is met (the original position is vacated), then roll it back;
[0235] 5.2. Move the positions of surrounding interface components according to the squeezing strategy;
[0236] 6. If successful, update the size (spanX / spanY) of IconA and related parameters;
[0237] 7. Update the ItemInfo corresponding to IconA;
[0238] 8. Drag and release; steps 1-8 can be repeated multiple times;
[0239] 9. Click on an area of the interface other than the deformation box, and the deformation box will disappear;
[0240] 10. Execute the logic related to the disappearance of the deformed box;
[0241] 11.1. Synchronize the temporary grid occupancy status two-dimensional array to the formal grid occupancy status two-dimensional array;
[0242] 11.2. Actual modification of the size parameters (spanX / spanY) of IconA and related logic;
[0243] 12. Synchronize the size parameters (spanX / spanY) of IconA to the persistent database.
[0244] Please refer to Figure 14, which shows a structural block diagram of an interface component adjustment device provided in an exemplary embodiment of this application. The device includes:
[0245] The operation receiving module 1401 is used to receive the size adjustment operation of the first interface component in the first interface, the first interface including multiple areas;
[0246] The first adjustment module 1402 is used to move the second interface component in the first interface when the first interface can accommodate the first interface component after size adjustment by moving the second interface component, and to display the first interface component after size adjustment in the area vacated after moving the second interface component.
[0247] The second adjustment module 1403 is used to move the third interface component in the first interface to the second interface when the first interface cannot accommodate the first interface component after the size adjustment by moving the second interface component, and to display the first interface component after the size adjustment in the area vacated after removing the third interface component.
[0248] Optionally, the device may also include:
[0249] The calculation module is used to determine the third interface component in the first interface based on the size adjustment operation, wherein the third interface component overlaps with the first interface component after size adjustment.
[0250] The second interface component is determined based on the third interface component, and the second interface component includes the third interface component, and the second interface component includes at least one of the interface components in the same column as the third interface component and the interface components in the same row as the third interface component.
[0251] Translate the second interface component along at least one of the row and column directions;
[0252] When the translated second interface component is located within the first interface, it is determined that the first interface can accommodate the sized first interface component by moving the second interface component.
[0253] If the translated second interface component is located outside the first interface, it is determined that the first interface cannot accommodate the resized first interface component by moving the second interface component.
[0254] Optionally, when translating the second interface component along at least one of the row and column directions, the calculation module is used to:
[0255] When the second interface component includes the third interface component and an interface component in the same column as the third interface component, the second interface component is translated along the column direction;
[0256] When the second interface component includes the third interface component and an interface component in the same row as the third interface component, the second interface component is translated along the row direction;
[0257] When the second interface component includes the third interface component, an interface component in the same column as the third interface component, and an interface component in the same row as the third interface component, the second interface component is translated along the row direction and the column direction.
[0258] Optionally, when determining the third interface component in the first interface based on the size adjustment operation, the calculation module is used to:
[0259] Based on the size adjustment operation, the adjustment direction and adjustment amount are determined, wherein the adjustment direction includes at least one of the row direction and the column direction;
[0260] Based on the adjustment direction and the adjustment amount, determine the component position and component size of the first interface component after the size adjustment;
[0261] Based on the component position and size of the first interface component after size adjustment, and the component position and size of other interface components in the first interface, the third interface component in the first interface that overlaps with the first interface component after size adjustment is determined.
[0262] Optionally, the calculation module is also used for:
[0263] Based on the component size of the first interface component before and after the size adjustment, determine the incremental area occupied by the first interface component after the size adjustment;
[0264] Based on the area occupancy status of the first interface, determine the number of unoccupied areas of the first interface;
[0265] Determining the second interface component based on the third interface component includes: determining the second interface component based on the third interface component when the number of unoccupied areas is greater than or equal to the increment of occupied areas.
[0266] Optionally, the second adjustment module 1403 is used for:
[0267] If the number of unoccupied areas is less than the increment of occupied areas, the third interface component is moved to the second interface, and the first interface component with adjusted size is displayed in the area vacated after the third interface component is removed.
[0268] Optionally, the device further includes:
[0269] The third adjustment module is used to obtain the component size of the third interface component and the area occupancy status of the first interface when the first interface cannot accommodate the first interface component after size adjustment by moving the second interface component.
[0270] If a target area is determined to exist in the first interface based on the area occupancy status, the third interface component is moved to the target area, and the first interface component with adjusted size is displayed in the area vacated after the third interface component is moved. The size of the target area is greater than or equal to the component size of the third interface component, and the target area is not occupied.
[0271] Optionally, the second adjustment module 1403 is also used for:
[0272] If the first interface cannot accommodate the resized first interface component by translating the second interface component, and the target area does not exist in the first interface, the third interface component in the first interface is moved to the second interface, and the resized first interface component is displayed in the area vacated after removing the third interface component.
[0273] Optionally, the device further includes:
[0274] The fourth adjustment module is used to maintain the layout of other interface components in the first interface and display the first interface component after size adjustment when the third interface component is not present in the first interface.
[0275] Optionally, the second interface can be an existing interface or a newly added interface;
[0276] The second adjustment module 1403 is used for:
[0277] If at least one existing interface exists that supports accommodating the third interface component, the third interface component is moved to the existing interface closest to the first interface; or,
[0278] If there is no existing interface that can accommodate the third interface component, a new interface is created after the first interface, and the third interface component is moved to the new interface.
[0279] Optionally, the first adjustment module 1402 is further configured to:
[0280] If the size adjustment operation for the first interface component is received again, and the original position of the second interface component in the first interface is unoccupied after the size adjustment, the second interface component is translated to the original position in the first interface.
[0281] Optionally, the second adjustment module 1403 is further configured to:
[0282] If the size adjustment operation for the first interface component is received again, and the original positions of some or all of the third interface components in the first interface are unoccupied after the size adjustment, some or all of the third interface components are moved to the first interface.
[0283] Optionally, the device further includes:
[0284] The storage module is used to save the original position information of each interface component in the first interface when an interface editing trigger operation is received on the first interface. The interface editing trigger operation is used to trigger the interface to enter the editing state.
[0285] Upon receiving an editing application operation on the first interface, the original location information is deleted. The editing application operation is used to trigger an editing operation within the application interface and exit the editing state.
[0286] Optionally, the device further includes:
[0287] The retraction module is used to restore the first interface component in response to the size adjustment retraction operation;
[0288] Restore the display position of the second interface component or the third interface component in the first interface.
[0289] Optionally, when the first interface is a desktop, the first interface component is at least one of an application icon, a folder, and a desktop component;
[0290] When the first interface is a status bar drop-down interface, the first interface component is at least one of quick function icons and function components.
[0291] In summary, in this embodiment, when adjusting the size of interface components, other interface components are moved to attempt to display the resized interface component in the area freed up after the component is moved, thus reducing the impact of local component resizing on the overall interface component layout. Furthermore, if it is impossible to accommodate the resized interface component by moving other interface components, some interface components are moved to other interfaces, thereby utilizing the freed-up area after removing the component to display the resized interface component, improving the success rate of interface component resizing operations.
[0292] Referring to Figure 15, which is a schematic diagram of the structure of a terminal provided in an exemplary embodiment of this application, the terminal may include one or more of the following components: a processor 1510 and a memory 1520.
[0293] Optionally, the processor 1510 connects various parts within the electronic device using various interfaces and lines. It performs various functions and processes data by running or executing instructions, programs, code sets, or instruction sets stored in the memory 1520, and by calling data stored in the memory 1520. Optionally, the processor 1510 can be implemented using at least one hardware form of Digital Signal Processing (DSP), Field-Programmable Gate Array (FPGA), or Programmable Logic Array (PLA). The processor 1510 can integrate one or more of the following: Central Processing Unit (CPU), Graphics Processing Unit (GPU), Neural-network Processing Unit (NPU), and baseband chip. Specifically, the CPU primarily handles the operating system, user interface, and applications; the GPU is responsible for rendering and drawing the content required for the touchscreen display; the NPU is used to implement Artificial Intelligence (AI) functions; and the baseband chip is used for wireless communication. It is understandable that the aforementioned baseband chip may not be integrated into the processor 1510, but may be implemented as a separate chip.
[0294] The memory 1520 may include random access memory (RAM) or read-only memory (ROM). Optionally, the memory 1520 may include a non-transitory computer-readable storage medium. The memory 1520 may be used to store instructions, programs, code, code sets, or instruction sets. The memory 1520 may include a program storage area and a data storage area, wherein the program storage area may store instructions for implementing an operating system, instructions for at least one function, instructions for implementing the various method embodiments described below, etc.; the data storage area may store data created according to the use of the electronic device, etc.
[0295] In addition, those skilled in the art will understand that the structure of the terminal shown in the above figures does not constitute a limitation on the terminal. The terminal may include more (e.g., screen, communication components, display components) or fewer components than shown, or combine certain components, or have different component arrangements.
[0296] This application provides a computer-readable storage medium storing at least one computer instruction, which is executed by a processor to implement the interface component adjustment method as described in the above embodiments.
[0297] On the other hand, embodiments of this application provide a computer program product, the computer program product including computer instructions stored in a computer-readable storage medium; a processor reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions to implement the interface component adjustment method as described in the above embodiments.
[0298] Those skilled in the art will recognize that the functions described in the embodiments of this application in one or more of the above examples can be implemented using hardware, software, firmware, or any combination thereof. When implemented using software, these functions can be stored in a computer-readable medium or transmitted as one or more instructions or code on a computer-readable medium. Computer-readable media include computer storage media and communication media, wherein communication media include any medium that facilitates the transfer of a computer program from one place to another. Storage media can be any available medium that can be accessed by a general-purpose or special-purpose computer.
[0299] The above description is merely an optional embodiment of this application and is not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.
Claims
1. A method for adjusting interface components, the method being used on a terminal, the method comprising: Receives a size adjustment operation for a first interface component in a first interface, the first interface including multiple areas; If the first interface can accommodate the resized first interface component by moving the second interface component, the second interface component is moved in the first interface, and the resized first interface component is displayed in the area vacated after moving the second interface component. If the first interface cannot accommodate the resized first interface component by moving the second interface component, the third interface component in the first interface is moved to the second interface, and the resized first interface component is displayed in the area vacated after the third interface component is removed.
2. The method according to claim 1, wherein, The method includes: Based on the size adjustment operation, the third interface component in the first interface is determined, and the third interface component overlaps with the first interface component after size adjustment. The second interface component is determined based on the third interface component, and the second interface component includes the third interface component, and the second interface component includes at least one of the interface components in the same column as the third interface component and the interface components in the same row as the third interface component. Translate the second interface component along at least one of the row and column directions; When the translated second interface component is located within the first interface, it is determined that the first interface can accommodate the sized first interface component by moving the second interface component. If the translated second interface component is located outside the first interface, it is determined that the first interface cannot accommodate the resized first interface component by moving the second interface component.
3. The method according to claim 2, wherein, The translation of the second interface component along at least one of the row direction and column direction includes: When the second interface component includes the third interface component and an interface component in the same column as the third interface component, the second interface component is translated along the column direction; When the second interface component includes the third interface component and an interface component in the same row as the third interface component, the second interface component is translated along the row direction; When the second interface component includes the third interface component, an interface component in the same column as the third interface component, and an interface component in the same row as the third interface component, the second interface component is translated along the row direction and the column direction.
4. The method according to claim 2, wherein, The step of determining the third interface component in the first interface based on the size adjustment operation includes: Based on the size adjustment operation, the adjustment direction and adjustment amount are determined, wherein the adjustment direction includes at least one of the row direction and the column direction; Based on the adjustment direction and the adjustment amount, determine the component position and component size of the first interface component after the size adjustment; Based on the component position and size of the first interface component after size adjustment, and the component position and size of other interface components in the first interface, the third interface component in the first interface that overlaps with the first interface component after size adjustment is determined.
5. The method according to claim 4, wherein, The method further includes: Based on the component size of the first interface component before and after the size adjustment, determine the incremental area occupied by the first interface component after the size adjustment; Based on the area occupancy status of the first interface, determine the number of unoccupied areas of the first interface; Determining the second interface component based on the third interface component includes: If the number of unoccupied areas is greater than or equal to the increment of occupied areas, the second interface component is determined based on the third interface component.
6. The method according to claim 5, wherein, The method further includes: If the number of unoccupied areas is less than the increment of occupied areas, the third interface component is moved to the second interface, and the first interface component with adjusted size is displayed in the area vacated after the third interface component is removed.
7. The method according to claim 2, wherein, The method further includes: If the first interface cannot accommodate the resized first interface component by moving the second interface component, obtain the component size of the third interface component and the area occupancy status of the first interface. If a target area is determined to exist in the first interface based on the area occupancy status, the third interface component is moved to the target area, and the first interface component with adjusted size is displayed in the area vacated after the third interface component is moved. The size of the target area is greater than or equal to the component size of the third interface component, and the target area is not occupied.
8. The method according to claim 7, wherein, When the first interface cannot accommodate the resized first interface component by moving the second interface component, the step of moving the third interface component from the first interface to the second interface and displaying the resized first interface component in the area freed up after removing the third interface component includes: If the first interface cannot accommodate the resized first interface component by translating the second interface component, and the target area does not exist in the first interface, the third interface component in the first interface is moved to the second interface, and the resized first interface component is displayed in the area vacated after removing the third interface component.
9. The method according to claim 2, wherein, The method further includes: If the third interface component is not present in the first interface, maintain the layout of other interface components in the first interface and display the first interface component after size adjustment.
10. The method according to any one of claims 1 to 9, wherein, The second interface is either an existing interface or a newly added interface; Moving the third interface component from the first interface to the second interface includes: If there is at least one existing interface that supports accommodating the third interface component, move the third interface component to the existing interface that is closest to the first interface. or, If there is no existing interface that can accommodate the third interface component, a new interface is created after the first interface, and the third interface component is moved to the new interface.
11. The method according to any one of claims 1 to 9, wherein, After translating the second interface component in the first interface, the method further includes: If the size adjustment operation for the first interface component is received again, and the original position of the second interface component in the first interface is unoccupied after the size adjustment, the second interface component is translated to the original position in the first interface. After moving the third interface component from the first interface to the second interface, the method further includes: If the size adjustment operation for the first interface component is received again, and the original positions of some or all of the third interface components in the first interface are unoccupied after the size adjustment, some or all of the third interface components are moved to the first interface.
12. The method according to claim 11, wherein, The method further includes: Upon receiving an interface editing trigger operation on the first interface, the original position information of each interface component in the first interface is saved. The interface editing trigger operation is used to trigger the interface to enter the editing state. Upon receiving an editing application operation on the first interface, the original location information is deleted. The editing application operation is used to trigger an editing operation within the application interface and exit the editing state.
13. The method according to any one of claims 1 to 9, wherein, The method further includes: In response to the size adjustment reversal operation, restore the first interface component; Restore the display position of the second interface component or the third interface component in the first interface.
14. The method according to any one of claims 1 to 9, wherein, When the first interface is a desktop, the first interface component is at least one of application icons, folders, and desktop components; When the first interface is a status bar drop-down interface, the first interface component is at least one of quick function icons and function components.
15. An interface component adjustment device, the device comprising: An operation receiving module is used to receive size adjustment operations for components of the first interface in the first interface, the first interface including multiple areas; The first adjustment module is used to move the second interface component in the first interface when the first interface can accommodate the first interface component after the size adjustment by moving the second interface component, and to display the first interface component after the size adjustment in the area vacated after moving the second interface component. The second adjustment module is used to move the third interface component in the first interface to the second interface when the first interface cannot accommodate the first interface component after the size adjustment by moving the second interface component, and to display the first interface component after the size adjustment in the area vacated after removing the third interface component.
16. A terminal, the terminal comprising a processor and a memory, the memory storing at least one computer instruction, the at least one computer instruction being loaded and executed by the processor to implement the interface component adjustment method as described in any one of claims 1 to 14.
17. A computer-readable storage medium storing at least one computer instruction, the at least one computer instruction being executed by a processor to implement the interface component adjustment method as described in any one of claims 1 to 14.
18. A computer program product comprising computer instructions, wherein a processor executes the computer instructions to implement the interface component adjustment method as described in any one of claims 1 to 14.