Interface switching method and device, terminal equipment and storage medium

Abstract

The invention is applicable to the technical field of computers, and provides an interface switching method and device, terminal equipment and a storage medium, and the interface switching method comprises the following steps: when a first target interface is currently displayed at a main interface position, determining a node corresponding to the first target interface, and taking the node as a target node; determining a plurality of child nodes adjacent to the target node according to the position information of the target node; determining a corresponding auxiliary interface position in the interface layout diagram according to the position information of each sub-node, and creating a sub-interface at the corresponding auxiliary interface position according to the interface information of each sub-node; the interface layout diagram comprises a main interface position and a plurality of auxiliary interface positions; according to the interface switching information, creating an interface which is the same as the second target interface, deleting the first target interface and all sub-interfaces on the auxiliary interface positions, and setting the interface which is the same as the second target interface at the main interface position; the second target interface is one of a plurality of sub-interfaces adjacent to the first target interface.

Description

Technical Field

[0001] This application belongs to the field of computer technology, and in particular relates to an interface switching method, apparatus, terminal device and storage medium. Background Technology

[0002] LVGL (Light and Versatile Graphics Library) is a lightweight open-source GUI system framework with advantages such as small code size and ease of development and portability. It can load the firmware of electronic devices using only 16MB of flash memory space and is now used in a variety of embedded applications.

[0003] However, the existing LVGL system framework adopts a full-interface preloading mode when implementing the sliding switching of electronic device interfaces. That is, all interfaces are loaded into memory at once at startup, which leads to high resource consumption and causes problems such as lag and insufficient memory. Summary of the Invention

[0004] This application provides an interface switching method, apparatus, terminal device, and storage medium, which can solve the problems of high resource consumption and lag caused by the use of full interface preloading mode in the existing LVGL system framework when implementing interface sliding switching of electronic devices.

[0005] In a first aspect, embodiments of this application provide an interface switching method, including: If the currently displayed interface on the main interface is the first target interface, determine the node corresponding to the first target interface and take the node corresponding to the first target interface as the target node; Based on the location information of the target node, determine multiple child nodes adjacent to the target node; The corresponding sub-interface position is determined in the interface layout diagram based on the position information of each child node, and a sub-interface is created in the corresponding sub-interface position based on the interface information of each child node; the interface layout diagram includes the main interface position and multiple sub-interface positions located adjacent to the main interface position. Based on the interface switching information, create an interface identical to the second target interface, delete the first target interface and all sub-interfaces in the sub-interface positions, and set the interface identical to the second target interface in the main interface position; the second target interface is one of a plurality of sub-interfaces adjacent to the first target interface.

[0006] In one possible implementation of the first aspect, the interface switching information includes drag information; The step of creating an interface identical to the second target interface based on the interface switching information includes: When the drag information is received, a second target interface adjacent to the first target interface in a first direction is determined based on the drag information, and the first target interface is controlled to move towards the second target interface; When the drag information disappears, determine the screen ratio of the first target interface and the screen ratio of the second target interface; If the screen ratio of the second target interface is greater than that of the first target interface, copy the second target interface to obtain an interface identical to the second target interface.

[0007] In one possible implementation of the first aspect, determining a plurality of child nodes adjacent to the target node based on the location information of the target node includes: Based on the location information of the target node, multiple child nodes adjacent to the target node are determined in the node relationship chain, wherein the node relationship chain includes multiple nodes linked according to a preset positional relationship.

[0008] In one possible implementation of the first aspect, the interface layout diagram includes a first sub-interface position located above the main interface position, a second sub-interface position located below the main interface position, a third sub-interface position located to the left of the main interface position, and a fourth sub-interface position located to the right of the main interface position. The step of determining the corresponding sub-interface position in the interface layout diagram based on the position information of each child node, and creating a sub-interface at the corresponding sub-interface position based on the interface information of each child node, includes: Based on the node relationship chain and the location information of the target node, determine the first child node located at the first sub-interface position, the second child node located at the second sub-interface position, the third child node located at the third sub-interface position, and the fourth child node located at the fourth sub-interface position; A first sub-interface is created at the first sub-interface position based on the interface information of the first sub-node; a second sub-interface is created at the second sub-interface position based on the interface information of the second sub-node; a third sub-interface is created at the third sub-interface position based on the interface information of the third sub-node; and a fourth sub-interface is created at the fourth sub-interface position based on the interface information of the fourth sub-node.

[0009] In one possible implementation of the first aspect, the interface switching method further includes: Based on the dragging information, if it is determined that there are no child nodes at the sub-interface position adjacent to the target node in the first direction, then the first target interface will not move in the first direction.

[0010] In one possible implementation of the first aspect, after creating an interface identical to the second target interface based on interface switching information, deleting the first target interface and all sub-interfaces at the sub-interface positions, and setting the interface identical to the second target interface at the main interface position, the method further includes: The target node is updated to the node corresponding to the interface that is the same as the second target interface, and multiple child nodes adjacent to the node corresponding to the interface that is the same as the second target interface are determined based on the position information of the node corresponding to the interface that is the same as the second target interface. Based on the position information of the child nodes adjacent to the node corresponding to each interface that is the same as the second target interface, the corresponding sub-interface position is determined in the interface layout diagram, and a sub-interface is created at the corresponding sub-interface position based on the interface information of the child nodes adjacent to the node corresponding to each interface that is the same as the second target interface.

[0011] In one possible implementation of the first aspect, the interface switching method further includes: Multiple nodes are acquired, wherein each node includes location information and interface information, the location information is used to acquire multiple child nodes adjacent to the node, and the interface information is used to create an interface corresponding to the node; Link all nodes according to the preset positional relationship to form a node relationship linked list.

[0012] Secondly, embodiments of this application provide an interface switching device, including: The first determining module is used to determine the node corresponding to the first target interface when the currently displayed interface at the main interface position is the first target interface, and to take the node corresponding to the first target interface as the target node. The second determining module is used to determine multiple child nodes adjacent to the target node based on the location information of the target node; A creation module is used to determine the corresponding sub-interface position in the interface layout diagram based on the position information of each child node, and to create a sub-interface in the corresponding sub-interface position based on the interface information of each child node; the interface layout diagram includes the main interface position and multiple sub-interface positions located adjacent to the main interface position. The switching module is used to create an interface identical to the second target interface based on the interface switching information, delete the first target interface and all sub-interfaces at the sub-interface positions, and set the interface identical to the second target interface at the main interface position; the second target interface is one of a plurality of sub-interfaces adjacent to the first target interface.

[0013] Thirdly, embodiments of this application provide a terminal device, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements the interface switching method as described in any one of the first aspects above.

[0014] Fourthly, embodiments of this application provide a computer-readable storage medium storing a computer program that, when executed by a processor, implements the interface switching method as described in any one of the first aspects above.

[0015] Fifthly, embodiments of this application provide a computer program product that, when run on a terminal device, causes the terminal device to execute the interface switching method described in any one of the first aspects.

[0016] The beneficial effects of the embodiments in this application compared with the prior art are: The interface switching method provided in this application, when the currently displayed interface at the main interface position is the first target interface, firstly determines the node corresponding to the first target interface and sets the node corresponding to the first target interface as the target node. Then, based on the position information of the target node, determines multiple child nodes adjacent to the target node. Next, based on the position information of each child node, determines the corresponding sub-interface position in the interface layout diagram, and creates a sub-interface at the corresponding sub-interface position based on the interface information of each child node. The created multiple sub-interfaces are adjacent to the first target interface, thereby completing the loading of the interface adjacent to the first target interface. When the user needs to switch interfaces, interface switching information is obtained, and based on the interface switching information, an interface identical to the second target interface is created. After deleting the first target interface and all sub-interfaces at the sub-interface positions, the interface identical to the second target interface is set at the main interface position to realize the interface switching. At this time, the target node is updated to the node corresponding to the interface identical to the second target interface. Then, based on the position information of the target node, multiple child nodes adjacent to the updated target node are determined again. Next, based on the position information of each child node adjacent to the updated target node, the corresponding sub-interface position is determined in the interface layout diagram. Then, based on the interface information of each child node adjacent to the updated target node, a sub-interface is created at the corresponding sub-interface position. The multiple sub-interfaces created are adjacent to the interfaces that are the same as the second target interface, thus completing the loading of the interfaces that are adjacent to the interfaces that are the same as the second target interface.

[0017] Therefore, by using the interface switching method provided in this application embodiment, when displaying an interface, only multiple sub-interfaces adjacent to the currently displayed interface need to be loaded, instead of loading all interfaces. This reduces the number of interfaces loaded at the same time, thereby reducing the device's memory usage and resource utilization, and helping to improve the device's operating speed.

[0018] It is understood that the beneficial effects of the second to fifth aspects mentioned above can be found in the relevant descriptions in the first aspect mentioned above, and will not be repeated here. Attached Figure Description

[0019] To more clearly illustrate the technical solutions in the embodiments of this application, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0020] Figure 1 This is a flowchart illustrating an embodiment of the interface switching method provided in this application; Figure 2 This is a schematic diagram of the structure of a node provided in an embodiment of this application; Figure 3 This is a schematic diagram of a node relationship linked list provided in an embodiment of this application; Figure 4 This is a schematic diagram of an interface layout provided in an embodiment of this application; Figure 5 This is a flowchart illustrating an interface switching method provided in another embodiment of this application; Figure 6 This is a flowchart illustrating an interface switching method provided in another embodiment of this application; Figure 7 This is a schematic diagram of the structure of an interface switching device provided in an embodiment of this application; Figure 8 This is a schematic diagram of the structure of a terminal device provided in an embodiment of this application. Detailed Implementation

[0021] In the following description, specific details such as particular system architectures and techniques are set forth for illustrative purposes and not for limitation, in order to provide a thorough understanding of the embodiments of this application. However, those skilled in the art will understand that this application may also be implemented in other embodiments without these specific details. In other instances, detailed descriptions of well-known systems, apparatuses, circuits, and methods have been omitted so as not to obscure the description of this application with unnecessary detail.

[0022] It should be understood that, when used in this application specification and the appended claims, the term "comprising" indicates the presence of the described features, integrals, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, integrals, steps, operations, elements, components and / or a collection thereof.

[0023] It should also be understood that the term “and / or” as used in this application specification and the appended claims means any combination of one or more of the associated listed items and all possible combinations, and includes such combinations.

[0024] As used in this application specification and the appended claims, the term "if" may be interpreted, depending on the context, as "when," "once," "in response to determination," or "in response to detection." Similarly, the phrase "if determined" or "if detected [the described condition or event]" may be interpreted, depending on the context, as meaning "once determined," "in response to determination," "once detected [the described condition or event]," or "in response to detection [the described condition or event]."

[0025] Furthermore, in the description of this application and the appended claims, the terms "first," "second," "third," etc., are used only to distinguish descriptions and should not be construed as indicating or implying relative importance.

[0026] References to "one embodiment" or "some embodiments" in this specification mean that one or more embodiments of this application include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized.

[0027] LVGL (Light and Versatile Graphics Library) is a lightweight, open-source GUI system framework with advantages such as small code size and ease of development and portability. It can load the firmware of electronic devices using only 16MB of flash memory and is currently used in various embedded applications. However, existing LVGL system frameworks employ a full-interface preloading mode when implementing interface swiping on electronic devices. This means that all interfaces are loaded into memory at startup, leading to high resource consumption and causing problems such as lag and insufficient memory.

[0028] This application provides an interface switching method. When the currently displayed interface at the main interface position is a first target interface, the node corresponding to the first target interface is first determined and designated as the target node. Then, based on the position information of the target node, multiple child nodes adjacent to the target node are determined. Next, based on the position information of each child node, the corresponding sub-interface position is determined in the interface layout diagram, and a sub-interface is created at the corresponding sub-interface position based on the interface information of each child node. The created multiple sub-interfaces are adjacent to the first target interface, thereby completing the loading of the interface adjacent to the first target interface. When the user needs to switch interfaces, interface switching information is obtained, and based on the interface switching information, an interface identical to the second target interface is created. After deleting the first target interface and all sub-interfaces at the sub-interface positions, the interface identical to the second target interface is set at the main interface position, realizing the interface switching. At this time, the target node is updated to the node corresponding to the interface identical to the second target interface. Then, based on the position information of the target node, multiple child nodes adjacent to the updated target node are determined again. Next, based on the position information of each child node adjacent to the updated target node, the corresponding sub-interface position is determined in the interface layout diagram. Then, based on the interface information of each child node adjacent to the updated target node, a sub-interface is created at the corresponding sub-interface position. The multiple sub-interfaces created are adjacent to the interfaces that are the same as the second target interface, thus completing the loading of the interfaces that are adjacent to the interfaces that are the same as the second target interface.

[0029] Therefore, by using the interface switching method provided in this application embodiment, when displaying an interface, only multiple sub-interfaces adjacent to the currently displayed interface need to be loaded, instead of loading all interfaces. This reduces the number of interfaces loaded at the same time, thereby reducing the device's memory usage and resource utilization, and helping to improve the device's operating speed.

[0030] See Figure 1 This is a flowchart illustrating the interface switching method provided in the embodiments of this application. It is intended as an example and not a limitation. The method may include the following steps S101 to S104.

[0031] Step S101: If the currently displayed interface on the main interface is the first target interface, determine the node corresponding to the first target interface and take the node corresponding to the first target interface as the target node.

[0032] In this embodiment, each interface corresponds to a node, and each node includes location information and interface information. The location information represents the information of nodes adjacent to that node, and the interface information is used to create or delete the interface corresponding to that node. For example, the structure of a node is as follows: Figure 2As shown, this includes node names, position information, and interface information. The node name is a unique identifier for the node; the position information within a node includes left, right, top, and bottom nodes. A left node represents the node to the left of the current node, a right node represents the node to the right of the current node, a top node represents the node above the current node, and a bottom node represents the node below the current node. The interface creation function generates interface elements; when an interface needs to be displayed, its interface creation function is called to dynamically generate the interface. The interface deletion function releases the memory resources occupied by the interface; when the interface is no longer needed, its interface deletion function is called to release the interface resources.

[0033] In some embodiments, designers can pre-acquire multiple nodes, each node including location information and interface information. The location information is used to acquire multiple child nodes adjacent to the node, and the interface information is used to create an interface corresponding to the node. Then, all nodes are linked according to a preset positional relationship to form a node relationship linked list. When a target node is determined, adjacent nodes are determined in the node relationship linked list based on the target node's positional relationship.

[0034] It should be noted that designers or users can set the preset positional relationships according to their own needs. For example, the first node can be placed above the second node, the second node can be placed to the right of the third node, the fourth node can be placed to the left of the first node, and the fifth node can be placed below the fourth node, etc.

[0035] For example, the node relationship chain list includes multiple nodes. Figure 3 As an example, only nodes corresponding to 5 interfaces are included: node A for interface A, node B for interface B, node C for interface C, node D for interface D, and node E for interface E. Figure 3 As shown, the position information of node A is as follows: node C is to the left of node A, node B is to the right of node A, node D is above node A, and there are no nodes below node A. The position information of node B is as follows: node A is to the left of node B, node C is to the right of node B, node E is above node B, and there are no nodes below node B. The position information of node C is as follows: node B is to the left of node C, node A is to the right of node C, and there are no nodes above or below node C. The position information of node D is as follows: there are no nodes to the left or right of node D, no nodes above or below node D. The position information of node E is as follows: there are no nodes to the left or right of node E, no nodes above or below node E.

[0036] In a specific example, consider a node relationship linked list from node A to node E. Assume the user's current interface corresponds to node A, meaning node A is the target node. Without the linked list, retrieving these adjacent child nodes requires multiple database accesses to query the multiple child nodes adjacent to node A. This process involves disk I / O operations and data retrieval, resulting in low efficiency. However, after constructing the linked list, adjacent child nodes can be directly retrieved from the linked list data structure in memory. This embodiment avoids frequent disk database accesses, reduces I / O wait time, and directly retrieves data from memory through pointer operations, significantly improving query efficiency.

[0037] The embodiments of this application allow for quick operations on interface relationships by adjusting the positional relationships of nodes in the node relationship chain or inserting / deleting page nodes in the node relationship chain at any time.

[0038] For example, based on the user's needs, one interface from interfaces A, B, C, D, and E is designated as the currently displayed interface at the main interface position. If the currently displayed interface at the main interface position is the first target interface, the node corresponding to the first target interface is determined from the node relationship chain list, and this node is designated as the target node. For example, if the user specifies that the currently displayed interface on the screen of the electronic device is interface A, then the node corresponding to interface A is determined from the node relationship chain list as node A, and node A is designated as the target node.

[0039] Step S102: Based on the location information of the target node, determine multiple child nodes adjacent to the target node.

[0040] For example, once node A is determined as the target node, the position information of node A is found from the node relationship chain as follows: the node to the left of node A is node C, the node to the right of node A is node B, the node above node A is node D, and there are no nodes below node A. Based on the position information of node A, the multiple child nodes adjacent to node A are determined to be node C, node B, and node D, where node C is located to the left of node A, node B is located to the right of node A, and node D is located above node A.

[0041] It should be noted that the interface A to interface E and the corresponding node position relationship are only an example of an embodiment of this application. In actual applications, the number of interfaces and the corresponding node position relationship can be customized according to user needs, and this application does not impose any limitations on this.

[0042] Step S103: Determine the corresponding sub-interface position in the interface layout diagram based on the position information of each child node, and create a sub-interface in the corresponding sub-interface position based on the interface information of each child node; the interface layout diagram includes the main interface position and multiple sub-interface positions located adjacent to the main interface position; the target node corresponds to the main interface position in the interface layout diagram.

[0043] In this embodiment, a TileView container is created using the LVGL framework. Five interfaces are established at positions (1,0), (0,1), (1,1), (1,2), and (2,1) within the TileView container. The layout of these five interfaces at positions (1,0), (0,1), (1,1), (1,2), and (2,1) is shown in the interface layout diagram as follows. Figure 4 As shown, (1,1) is the main interface position in the interface layout diagram, (1,0) is the sub-interface position to the left of the main interface position, (0,1) is the sub-interface position above the main interface position, (1,2) is the sub-interface position to the right of the main interface position, and (2,1) is the sub-interface position below the main interface position.

[0044] Continuing the example above, the target node is node A, and the multiple child nodes adjacent to node A are node C, node B, and node D. Among them, node C is located to the left of node A, node B is located to the right of node A, and node D is located above node A. Based on the positional relationship between node C, node B, node D and node A, in the interface layout diagram, node A is located at the main interface position (1,1), node C is located at the sub-interface position (1,0) to the left of the main interface position, node B is located at the sub-interface position (1,2) to the right of the main interface position, and node D is located at the sub-interface position (0,1) above the main interface position.

[0045] After determining the target node and the corresponding interface positions of each child node adjacent to the target node, the interface creation function is called to dynamically generate the interface based on the node's interface information. The currently displayed interface is the first target interface, and the node corresponding to the first target interface is node A. Therefore, the interface creation function of node A is called at the main interface position (1,1) to render interface A; the interface creation function of node C is called at the sub-interface position (1,0) to the left of the main interface position to render interface C; the interface creation function of node B is called at the sub-interface position (1,2) to the right of the main interface position to render interface B; and the interface creation function of node D is called at the sub-interface position (0,1) above the main interface position to render interface D. At this point, four interfaces are rendered on the electronic device, and the currently displayed interface is interface A.

[0046] It should be noted that the number of sub-interfaces created at the corresponding sub-interface position based on the interface information of the child nodes adjacent to the target node is determined by the number of child nodes adjacent to the target node. If there are 4 child nodes adjacent to the target node, 4 sub-interfaces are created; if there are 3 child nodes adjacent to the target node, 3 sub-interfaces are created; if there are 2 child nodes adjacent to the target node, 2 sub-interfaces are created; if there is 1 child node adjacent to the target node, 1 sub-interface is created; and if there are 0 child nodes adjacent to the target node, 0 sub-interfaces are created.

[0047] Therefore, when displaying an interface, a maximum of five interfaces are loaded at a time: the currently displayed interface and its adjacent interfaces (top, bottom, left, and right), instead of loading all interfaces simultaneously. This solves the problem of high resource consumption, stuttering, and insufficient memory that can occur when multiple pages are rendered simultaneously on embedded platforms. Reducing the number of interfaces loaded at the same time lowers the device's memory usage and resource utilization, thus helping to improve device performance.

[0048] Step S104: Based on the interface switching information, create an interface identical to the second target interface, delete the first target interface and all sub-interfaces in the sub-interface positions, and set the interface identical to the second target interface in the main interface position; the second target interface is one of multiple sub-interfaces adjacent to the first target interface.

[0049] In this embodiment, the user can switch interfaces in multiple directions on the screen of the electronic device. When the currently displayed interface is interface A, the interface to the left of interface A is interface C, the interface to the right of interface A is interface B, the interface above interface A is interface D, and there is no interface below interface A. According to the interface switching information, swiping from the first direction to the second direction on the screen of the electronic device will switch the currently displayed interface A to another interface. For example, when the user swipes from right to left on the screen of the electronic device, part of the interface of interface A disappears from the screen of the electronic device, and part of the interface of interface B enters the screen of the electronic device. When the display area of ​​interface B is larger than the display area of ​​interface A, an interface identical to interface B is created, and interface A and the interfaces adjacent to interface A, interface C, interface B, and interface D are deleted. The currently displayed interface on the screen of the electronic device is switched to an interface identical to interface B. At this time, interface B is the second target interface.

[0050] For example, one way to delete interface A at the main interface position (1,1), interface C at the sub-interface position (1,0), interface B at the sub-interface position (1,2), and interface D at the sub-interface position (0,1) is as follows: call the interface deletion function of node A at the main interface position (1,1) to delete interface A; call the interface deletion function of node C at the sub-interface position (1,0) to the left of the main interface position to delete interface C; call the interface deletion function of node B at the sub-interface position (1,2) to the right of the main interface position to delete interface B; and call the interface deletion function of node D at the sub-interface position (0,1) above the main interface position to delete interface D.

[0051] Using the above interface switching method, swiping interface A from right to left will change the currently displayed interface to be the same as interface B; swiping interface A from left to right will change the currently displayed interface to be the same as interface C; and swiping interface A from top to bottom will change the currently displayed interface to be the same as interface D. Since there are no nodes below node A, the sub-interface position (2,1) located below the main interface position is not rendered. Therefore, when swiping interface A from bottom to top, the currently displayed interface remains unchanged and is still interface A.

[0052] After interface B is displayed on the screen of the electronic device, interface C at sub-interface position (1,0), interface B at sub-interface position (1,2), and interface D at sub-interface position (0,1) have been deleted. At this time, the interface at the main interface position (1,1) of the interface layout diagram is interface B, and the sub-interface positions (1,0), (0,1), (1,2), and (2,1) adjacent to the main interface position have no interface.

[0053] The interface switching method provided in this application supports multi-directional interface switching. Users can switch the currently displayed interface to the same interface as the adjacent interface through swiping operations in different directions (from right to left, from left to right, from top to bottom, and from bottom to top), adapting to the task switching needs in different usage scenarios. For example, horizontal swiping switches to the same level function interface, and vertical swiping switches to the hierarchical interface. After creating an interface that is the same as the second target interface and deleting all sub-interfaces adjacent to the first target interface through the interface deletion function, the interface that is the same as the second target interface is set in the main interface position so that a sub-interface adjacent to the second target interface can be created in the sub-interface position adjacent to the main interface position.

[0054] In some embodiments, Figure 5 A flowchart illustrating an interface switching method according to another embodiment of this application is shown, as follows: Figure 5 As shown, step S104 further includes steps S1041 to S1043.

[0055] Step S1041: When drag information is received, determine the second target interface that is adjacent to the first target interface in the first direction according to the drag information, and control the first target interface to move to the second target interface, wherein the interface switching information includes drag information.

[0056] In a specific example, when a user performs a drag operation (such as finger swiping or mouse dragging) on ​​an electronic device screen, the processor's touch event listening module or mouse event listening module captures drag information in real time, including the starting coordinates, real-time coordinates, movement speed, and direction. For example, the first target interface is interface A, and the adjacent interface on the right is interface B. When the user swipes from the right side of the screen to the left, the processor moves the first target interface A to the left at the same speed and direction, while simultaneously pushing the second target interface B from the right side of the screen into the display area. The two interfaces remain adjacent during this movement, providing the user with a smooth interface transition. Throughout this process, the processor continuously monitors drag information and dynamically adjusts the interface movement state to ensure complete synchronization between interface movement and user operation.

[0057] Step S1042: When the dragged information disappears, determine the screen ratio of the first target interface and the screen ratio of the second target interface.

[0058] When the user stops dragging, the processor detects that the dragging information has disappeared (such as when the finger leaves the screen or the mouse button is released), and then triggers the screen ratio calculation program. The processor calculates the screen ratio occupied by each interface by obtaining the current screen resolution and the display area coordinates and size information of the first and second target interfaces on the screen. Specifically, the processor obtains the coordinates of the top-left and bottom-right corners of each interface, calculates the actual display width and height of the interface, and then compares them with the total width and height of the screen to obtain the screen-to-body ratio. For example, if the screen resolution is 1920×1080, and the remaining display area of ​​the first target interface A is 800 pixels wide and 1080 pixels high, then its screen-to-body ratio is (800×1080) / (1920×1080) ≈ 41.7%; the display area of ​​the second target interface B is 1120 pixels wide and 1080 pixels high, then its screen-to-body ratio is (1120×1080) / (1920×1080) ≈ 58.3%.

[0059] Step S1043: If the screen ratio of the second target interface is greater than that of the first target interface, copy the second target interface to obtain an interface identical to the second target interface.

[0060] The processor compares the calculated screen ratios of the first target interface A and the second target interface B. If the screen ratio of the second target interface B is greater than that of the first target interface A, it indicates that the user intends to switch the second target interface B to the main interface after dragging. At this time, the second target interface is copied to obtain an interface identical to the first target interface. After obtaining the interface identical to the second target interface, the first target interface A, as well as the interfaces C, B, and D adjacent to the first target interface A, are deleted. After deleting interfaces A, C, B, and D, the copied second target interface is set as the display interface in the main interface position.

[0061] If the first target interface A has a larger screen share, it is determined that the user's dragging operation did not achieve the intention of switching interfaces. The first target interface A will remain the main interface and will gradually return to its original display position. The second target interface B will then return to its initial hidden state and wait for the next interface switching operation.

[0062] In some embodiments, the interface switching method further includes: Based on the dragging information, if it is determined that there are no child nodes at the sub-interface position adjacent to the target node in the first direction, then the first target interface will not move in the first direction.

[0063] In a specific example, suppose the current main interface is the first target interface A, and its corresponding target node is node A. It is known that node A is bordered by node C to the left, node B to the right, node D above, and no node below. When the user attempts to scroll the first target interface A from bottom (first direction) to top (second direction), that is, to display the interface below interface A on the main interface, since node A has no adjacent nodes below (first direction), even if the processor detects that the user has performed a drag operation in the second direction (up), it will not update the position of the first target interface A. The first target interface A will remain in its original display position, without any movement effect.

[0064] In some embodiments, Figure 6 The following is a flowchart illustrating another interface switching method provided in an embodiment of this application, as shown in the figure. Figure 6 As shown, after step S104, the interface switching method further includes steps S105 and S106.

[0065] Step S105: Update the target node to the node corresponding to the interface that is the same as the second target interface, and determine multiple child nodes adjacent to the node corresponding to the interface that is the same as the second target interface based on the position information of the node corresponding to the interface that is the same as the second target interface.

[0066] Continuing with the example above, after switching the currently displayed interface on the screen of the electronic device to the same interface as interface B, the node B corresponding to interface B that is the same as the second target interface is taken as the new target node, and steps S102 to S104 are executed again to search for the location information of node B in the database. For example, the location information of node B is: the node to the left of node B is node A, the node to the right of node B is node C, the node above node B is node E, and there are no nodes below node B. Based on the location information of node B, the multiple child nodes adjacent to node B are determined to be node A, node C, and node E, where node A is located to the left of node B, node C is located to the right of node B, and node E is located above node B.

[0067] Step S106: Determine the position of the corresponding sub-interface in the interface layout diagram based on the position information of the child nodes adjacent to the node corresponding to the interface that is the same as the second target interface, and create the sub-interface at the corresponding sub-interface position based on the interface information of the child nodes adjacent to the node corresponding to the node that is the same as the second target interface.

[0068] Continuing the example above, the target node is node B, and its adjacent child nodes are nodes A, C, and E. Node A is located to the left of node B, node C is located to the right of node B, and node E is located above node B. Based on the positional relationships of nodes A, C, and E with node B, in the interface layout diagram, node A is located at position (1, 0) on the sub-interface to the left of the main interface position, node C is located at position (1, 2) on the sub-interface to the right of the main interface position, and node E is located at position (0, 1) on the sub-interface above the main interface position.

[0069] After determining the target node and the corresponding interface positions of each child node adjacent to the target node, multiple child interfaces adjacent to the interface identical to the second target interface are dynamically loaded based on the interface information of the nodes. For example, if the currently displayed interface is the same as the second target interface, and the node corresponding to the interface identical to the second target interface is node B, then the interface creation function of node A is called at the sub-interface position (1,0) to the left of the main interface position to render interface A; the interface creation function of node C is called at the sub-interface position (1,2) to the right of the main interface position to render interface C; and the interface creation function of node E is called at the sub-interface position (0,1) above the main interface position to render interface E. At this time, four interfaces are rendered on the electronic device, and the currently displayed interface is interface B. Sliding interface B from right to left will change the currently displayed interface to interface C; sliding interface A from left to right will change the currently displayed interface to interface C; and sliding interface A from top to bottom will change the currently displayed interface to interface E. Since there are no nodes below node A, the sub-interface position (2,1) located below the main interface position is not rendered. Therefore, when sliding interface B from bottom to top, the currently displayed interface remains unchanged and is still interface B.

[0070] This embodiment achieves fine-grained memory resource management in the LVGL system through the aforementioned interface switching, sub-interface deletion, and dynamic loading operations: memory occupied by idle interfaces is promptly reclaimed during interface switching, and adjacent sub-interfaces are loaded on demand after the new interface becomes the main interface, avoiding memory waste. Simultaneously, during operation, regardless of which interface the user switches to, the system dynamically presents its adjacent sub-interfaces, meeting the user's need for quick access to all relevant interfaces and improving the smoothness and convenience of interaction. For example, after a user switches from the interface corresponding to node A to the interface corresponding to node B, they can immediately obtain the sub-interfaces corresponding to nodes A, C, and E adjacent to node B, without waiting for additional loading time, and the system always maintains a highly efficient operating state.

[0071] In some embodiments, step S102 further includes step S1021.

[0072] Step S1021: Based on the location information of the target node, determine multiple child nodes adjacent to the target node in the node relationship chain.

[0073] In one possible implementation, step S103 further includes steps S1031 and S1032.

[0074] Step S1031: Based on the node relationship chain and the position information of the target node, determine the first child node above the target node, the second child node below the target node, the third child node to the left of the target node, and the fourth child node to the right of the target node.

[0075] Step S1032: Create a first sub-interface at the first sub-interface position based on the interface information of the first sub-node, create a second sub-interface at the second sub-interface position based on the interface information of the second sub-node, create a third sub-interface at the third sub-interface position based on the interface information of the third sub-node, and create a fourth sub-interface at the fourth sub-interface position based on the interface information of the fourth sub-node.

[0076] The interface layout diagram includes a first sub-interface position located above the main interface position, a second sub-interface position located below the main interface position, a third sub-interface position located to the left of the main interface position, and a fourth sub-interface position located to the right of the main interface position.

[0077] In a specific example, assume the target node is node A. Obtain the position information of node A from the pre-constructed node relationship chain. It is known that node A is to the left of node C, to the right of node B, above node D, and below no node. Simultaneously, define the rules of the interface layout: the position above the main interface (the position corresponding to target node A) is the first sub-interface position, below it is the second sub-interface position, to the left is the third sub-interface position, and to the right is the fourth sub-interface position. Since the node above node A is D, the first child node in the first sub-interface position (above the main interface) is determined to be node D. Because there are no nodes below node A, there is no corresponding child node in the second sub-interface position (below the main interface). Furthermore, since the node to the left of node A is C, the third child node in the third sub-interface position (left side of the main interface) is determined to be node C. And since the node to the right of node A is B, the fourth child node in the fourth sub-interface position (right side of the main interface) is determined to be node B.

[0078] At the first sub-interface location (above the main interface), the interface creation function of node D is called to create the first sub-interface. Since there is no corresponding child node at the second sub-interface location, no sub-interface creation operation is performed at this location. At the third sub-interface location (left side of the main interface), the interface creation function of node C is called to create the third sub-interface. At the fourth sub-interface location (right side of the main interface), the interface creation function of node B is called to create the fourth sub-interface. This embodiment completes the creation of the corresponding sub-interfaces based on the actual existing child nodes and their interface information.

[0079] It should be understood that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0080] Corresponding to the interface switching method described in the above embodiments, Figure 7 This is a structural block diagram of the interface switching device provided in the embodiments of this application. For ease of explanation, only the parts related to the embodiments of this application are shown.

[0081] Reference Figure 7 The interface switching device includes: The first determining module 71 is used to determine the node corresponding to the first target interface when the currently displayed interface at the main interface position is the first target interface, and to take the node corresponding to the first target interface as the target node. The second determining module 72 is used to determine multiple child nodes adjacent to the target node based on the location information of the target node; The creation module 73 is used to determine the corresponding sub-interface position in the interface layout diagram based on the position information of each child node, and to create a sub-interface in the corresponding sub-interface position based on the interface information of each child node; the interface layout diagram includes the main interface position and multiple sub-interface positions located adjacent to the main interface position. The switching module 74 is used to create an interface identical to the second target interface according to the interface switching information, delete the first target interface and all sub-interfaces at the sub-interface positions, and set the interface identical to the second target interface at the main interface position; the second target interface is one of a plurality of sub-interfaces adjacent to the first target interface.

[0082] In one possible implementation, the interface switching information includes drag information; The switching module 74 is also used for: When the drag information is received, a second target interface adjacent to the first target interface in a first direction is determined based on the drag information, and the first target interface is controlled to move towards the second target interface; When the drag information disappears, determine the screen ratio of the first target interface and the screen ratio of the second target interface; If the screen ratio of the second target interface is greater than that of the first target interface, copy the second target interface to obtain an interface identical to the second target interface.

[0083] In one possible implementation, the second determining module 72 is further configured to: Based on the location information of the target node, multiple child nodes adjacent to the target node are determined in the node relationship chain, wherein the node relationship chain includes multiple nodes linked according to a preset positional relationship.

[0084] In one possible implementation, the interface layout diagram includes a first sub-interface position located above the main interface position, a second sub-interface position located below the main interface position, a third sub-interface position located to the left of the main interface position, and a fourth sub-interface position located to the right of the main interface position. Module 73 is also used for: Based on the node relationship chain and the location information of the target node, determine the first child node located at the first sub-interface position, the second child node located at the second sub-interface position, the third child node located at the third sub-interface position, and the fourth child node located at the fourth sub-interface position; A first sub-interface is created at the first sub-interface position based on the interface information of the first sub-node; a second sub-interface is created at the second sub-interface position based on the interface information of the second sub-node; a third sub-interface is created at the third sub-interface position based on the interface information of the third sub-node; and a fourth sub-interface is created at the fourth sub-interface position based on the interface information of the fourth sub-node.

[0085] In one possible implementation, the interface switching device further includes: The judgment module 75 is used to determine, based on the drag information, that if there are no child nodes at the sub-interface position adjacent to the target node in the first direction, then the first target interface will not move in the first direction.

[0086] In one possible implementation, the interface switching device further includes: The update module 76 is used to update the target node to the node corresponding to the second target interface, and determine multiple child nodes adjacent to the node corresponding to the interface that is the same as the second target interface based on the position information of the node corresponding to the interface that is the same as the second target interface. The creation module 73 is also used to determine the position of the corresponding sub-interface in the interface layout diagram based on the position information of the child nodes adjacent to the node corresponding to the interface that is the same as the second target interface, and to create the sub-interface at the corresponding sub-interface position based on the interface information of the child nodes adjacent to the node corresponding to the interface that is the same as the second target interface.

[0087] In one possible implementation, the interface switching device further includes: 77. Acquisition module, used to acquire multiple nodes, wherein each node includes location information and interface information, the location information is used to acquire multiple child nodes adjacent to the node, and the interface information is used to create an interface corresponding to the node; The 78-link module is used to link all nodes according to a preset positional relationship to form a node relationship linked list.

[0088] It should be noted that the information interaction and execution process between the above-mentioned devices / units are based on the same concept as the method embodiments of this application. For details on their specific functions and technical effects, please refer to the method embodiments section, and they will not be repeated here.

[0089] in addition, Figure 7 The interface switching device shown can be a software unit, hardware unit, or a combination of software and hardware built into an existing terminal device, or it can be integrated into the terminal device as an independent component, or it can exist as an independent terminal device.

[0090] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is merely an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiments can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit. Furthermore, the specific names of the functional units and modules are only for easy differentiation and are not intended to limit the scope of protection of this application. The specific working process of the units and modules in the above system can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0091] Figure 8 This is a schematic diagram of the structure of the terminal device provided in the embodiments of this application. For example... Figure 8 As shown, the terminal device 8 of this embodiment includes: at least one processor 80 ( Figure 8 (Only one is shown in the diagram) a processor, a memory 81, and a computer program 82 stored in the memory 81 and executable on the at least one processor 80, wherein the processor 80 executes the computer program 82 to implement the steps in any of the above-described interface switching method embodiments.

[0092] The terminal device may be a desktop computer, laptop, handheld computer, or cloud server, etc. This terminal device may include, but is not limited to, a processor and memory. Those skilled in the art will understand that... Figure 8 This is merely an example of terminal device 8 and does not constitute a limitation on terminal device 8. It may include more or fewer components than shown in the figure, or combine certain components, or different components, such as input / output devices, network access devices, etc.

[0093] The processor 80 may be a Central Processing Unit (CPU), or it may be other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor or any conventional processor.

[0094] In some embodiments, the memory 81 may be an internal storage unit of the terminal device 8, such as a hard disk or memory of the terminal device 8. In other embodiments, the memory 81 may be an external storage device of the terminal device 8, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., equipped on the terminal device 8. Furthermore, the memory 81 may include both internal and external storage units of the terminal device 8. The memory 81 is used to store the operating system, applications, boot loader, data, and other programs, such as the program code of the computer program. The memory 81 can also be used to temporarily store data that has been output or will be output.

[0095] This application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, can implement the steps in the above-described method embodiments.

[0096] This application provides a computer program product that, when run on a terminal device, enables the terminal device to implement the steps described in the various method embodiments above.

[0097] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, all or part of the processes in the methods of the above embodiments of this application can be implemented by a computer program instructing related hardware. The computer program can be stored in a computer-readable storage medium, and when executed by a processor, it can implement the steps of the various method embodiments described above. The computer program includes computer program code, which can be in the form of source code, object code, executable files, or certain intermediate forms. The computer-readable medium can include at least: any entity or device capable of carrying computer program code to a device / terminal equipment, a recording medium, a computer memory, a read-only memory (ROM), a random access memory (RAM), an electrical carrier signal, a telecommunication signal, and a software distribution medium. Examples include USB flash drives, portable hard drives, magnetic disks, or optical disks. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electrical carrier signals or telecommunication signals.

[0098] In the above embodiments, the descriptions of each embodiment have different focuses. For parts that are not described in detail or recorded in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0099] Those skilled in the art will recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0100] In the embodiments provided in this application, it should be understood that the disclosed devices / terminal equipment and methods can be implemented in other ways. For example, the device / terminal equipment embodiments described above are merely illustrative. For instance, the division of modules or units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the displayed or discussed mutual coupling or direct coupling or communication connection may be through some interfaces; the indirect coupling or communication connection between devices or units may be electrical, mechanical, or other forms.

[0101] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0102] The above-described embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit them. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application, and should all be included within the protection scope of this application.

Claims

1. A method for switching interfaces, characterized in that, include: If the currently displayed interface on the main interface is the first target interface, determine the node corresponding to the first target interface and take the node corresponding to the first target interface as the target node; Based on the location information of the target node, determine multiple child nodes adjacent to the target node; Based on the position information of each child node, determine the corresponding sub-interface position in the interface layout diagram, and create a sub-interface at the corresponding sub-interface position based on the interface information of each child node. The interface layout diagram includes a main interface position and multiple sub-interface positions located adjacent to the main interface position. Based on the interface switching information, create an interface identical to the second target interface, delete the first target interface and all sub-interfaces in the sub-interface positions, and set the interface identical to the second target interface in the main interface position; the second target interface is one of a plurality of sub-interfaces adjacent to the first target interface.

2. The interface switching method according to claim 1, characterized in that, The interface switching information includes drag information; The step of creating an interface identical to the second target interface based on the interface switching information includes: When the drag information is received, a second target interface adjacent to the first target interface in a first direction is determined based on the drag information, and the first target interface is controlled to move towards the second target interface; When the drag information disappears, determine the screen ratio of the first target interface and the screen ratio of the second target interface; If the screen ratio of the second target interface is greater than that of the first target interface, copy the second target interface to obtain an interface identical to the second target interface.

3. The interface switching method according to claim 1, characterized in that, The step of determining multiple child nodes adjacent to the target node based on the location information of the target node includes: Based on the location information of the target node, multiple child nodes adjacent to the target node are determined in the node relationship chain, wherein the node relationship chain includes multiple nodes linked according to a preset positional relationship.

4. The interface switching method according to claim 3, characterized in that, The interface layout diagram includes a first sub-interface position located above the main interface position, a second sub-interface position located below the main interface position, a third sub-interface position located to the left of the main interface position, and a fourth sub-interface position located to the right of the main interface position. The step of determining the corresponding sub-interface position in the interface layout diagram based on the position information of each child node, and creating a sub-interface at the corresponding sub-interface position based on the interface information of each child node, includes: Based on the node relationship chain and the location information of the target node, determine the first child node located at the first sub-interface position, the second child node located at the second sub-interface position, the third child node located at the third sub-interface position, and the fourth child node located at the fourth sub-interface position; A first sub-interface is created at the first sub-interface position based on the interface information of the first sub-node; a second sub-interface is created at the second sub-interface position based on the interface information of the second sub-node; a third sub-interface is created at the third sub-interface position based on the interface information of the third sub-node; and a fourth sub-interface is created at the fourth sub-interface position based on the interface information of the fourth sub-node.

5. The interface switching method according to claim 2, characterized in that, The interface switching method further includes: Based on the dragging information, if it is determined that there are no child nodes at the sub-interface position adjacent to the target node in the first direction, then the first target interface will not move in the first direction.

6. The interface switching method according to claim 1, characterized in that, The process of creating an interface identical to the second target interface based on interface switching information, deleting the first target interface and all sub-interfaces at the sub-interface positions, and setting the interface identical to the second target interface at the main interface position, further includes: The target node is updated to the node corresponding to the interface that is the same as the second target interface, and multiple child nodes adjacent to the node corresponding to the interface that is the same as the second target interface are determined based on the position information of the node corresponding to the interface that is the same as the second target interface. Based on the position information of the child nodes adjacent to the node corresponding to the interface that is the same as the second target interface, the corresponding sub-interface position is determined in the interface layout diagram, and a sub-interface is created at the corresponding sub-interface position based on the interface information of the child nodes adjacent to the node corresponding to the interface that is the same as the second target interface.

7. The interface switching method according to any one of claims 1-6, characterized in that, The interface switching method further includes: Multiple nodes are acquired, wherein each node includes location information and interface information, the location information is used to acquire multiple child nodes adjacent to the node, and the interface information is used to create an interface corresponding to the node; Link all nodes according to the preset positional relationship to form a node relationship linked list.

8. An interface switching device, characterized in that, include: The first determining module is used to determine the node corresponding to the first target interface when the currently displayed interface at the main interface position is the first target interface, and to take the node corresponding to the first target interface as the target node. The second determining module is used to determine multiple child nodes adjacent to the target node based on the location information of the target node; The module is used to determine the corresponding sub-interface position in the interface layout diagram based on the position information of each child node, and to create a sub-interface at the corresponding sub-interface position based on the interface information of each child node. The interface layout diagram includes a main interface position and multiple sub-interface positions located adjacent to the main interface position. The switching module is used to create an interface identical to the second target interface based on the interface switching information, delete the first target interface and all sub-interfaces at the sub-interface positions, and set the interface identical to the second target interface at the main interface position; the second target interface is one of a plurality of sub-interfaces adjacent to the first target interface.

9. A terminal device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the method as described in any one of claims 1 to 7.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the method as described in any one of claims 1 to 7.

Images