Display method, electronic device and storage medium

Abstract

The present application discloses a display method, an electronic device and a storage medium, and relates to the field of electronic technology. The method is applied to an electronic device, and includes: if a second interface element is placed at an adjacent position of a first interface element in a first direction, in response to a user's operation of dragging the border of the first interface element in the first direction, the electronic device searches for a target space in the first interface that supports the movement of the second interface element. If a target space that supports the movement of the second interface element is found in the first interface, the first interface element is enlarged into a third interface element in response to the first operation, and the second interface element is moved to the target space. In this way, regardless of whether there is a vacancy in the adjacent position of the first interface element, the first interface element can be enlarged by dragging the operation to improve the user experience. In addition, when the second interface element is moved, the layout of the second interface is made as close as possible to the layout of the first interface, in line with the user's original usage habits.

Description

Technical Field

[0001] This application relates to the field of electronic technology, and in particular to a display method, electronic device and storage medium. Background Art

[0002] Typically, the desktop of an electronic device with a display screen (such as a mobile phone) can display desktop elements such as application icons, cards, folders, and application widgets. For these desktop elements, electronic devices provide a desktop element transformation function, that is, when there are no other desktop elements around an element, the user can drag the desktop element to make it larger. For example, the user can drag an application icon to make it a small card, drag a small card to make it a large card, drag a small folder to make it a large folder, and so on.

[0003] However, when other desktop elements are placed around a desktop element, the desktop element transformation function cannot be used. That is, users cannot make the desktop element larger when dragging it, which fails to meet user needs and results in a poor user experience. Summary of the Invention

[0004] This application provides a display method, electronic device, and storage medium that, when other desktop elements are placed around a desktop element, can enlarge the desktop element during a drag-and-drop operation by squeezing out the space of the other desktop elements, thereby improving the user experience. The technical solution is as follows:

[0005] In a first aspect, embodiments of this application provide a display method applied to an electronic device. The method includes: the electronic device displaying a first interface, the first interface including a first interface element and a second interface element, the second interface element being adjacent to the first interface element in a first direction; the first interface element may be an icon, card, folder, etc., and the second interface element may also be an icon, card, folder, etc.; a first operation is detected, the first operation being used to drag the border of the first interface element in a first direction; in response to the first operation, the electronic device searches for a target empty space in the first interface that supports the movement of the second interface element. If a target empty space supporting the movement of the second interface element is found in the first interface, the second interface is displayed. It can be understood that the second interface is an updated version of the first interface, the second interface including a second interface element and a third interface element, the third interface element being obtained by performing the first operation on the first interface element, the size of the third interface element being larger than the size of the first interface element, the position of the third interface element in the second interface being the same as the position of the first interface element in the first interface, and the position of the second interface element in the second interface corresponding to the position of the target empty space in the first interface.

[0006] In this way, if a second element is placed adjacent to the first element on the screen, and the first element is dragged and enlarged to become a third element, the electronic device can automatically move the second element to the target empty space on the first screen. Thus, regardless of whether there is empty space adjacent to the first element, it can be enlarged to become a third element through dragging, improving the user experience.

[0007] Furthermore, the third interface element is positioned in the same location as the first interface element on the second interface. This means that dragging and zooming in on the first interface element will not change its position. After the second interface element is moved, its position on the second interface corresponds to the position of the target empty space on the first interface; that is, the second interface element is moved to the target empty space. This minimizes the impact of zooming in on other elements on the first interface, making the layout of the second interface as close as possible to the first interface, conforming to the user's existing usage habits, and improving the user experience.

[0008] In conjunction with the first aspect, in some implementations of the first aspect, the target empty space includes consecutive empty spaces of the same size as the second interface element, and the position of the second interface element in the second interface is the position corresponding to the consecutive empty spaces. Thus, when the electronic device searches for a target empty space in the first interface that supports the movement of the second interface element, it prioritizes determining consecutive empty spaces of the same size as the second interface element and moves the second interface element to those consecutive empty spaces. In this way, increasing the size of the first interface element does not affect other interface elements in the first interface.

[0009] Combining the first aspect and the above implementation methods, in some implementation methods of the first aspect, the target empty space includes a first empty space, the size of the first empty space is smaller than the size of the second interface element, a fourth interface element is placed in the adjacent position of the first empty space, the position of the second interface element in the second interface is the position corresponding to the first empty space and the adjacent position of the first empty space, the size of the first empty space and the adjacent position of the first empty space is the same as the size of the second interface element; the position of the fourth interface element in the second interface is another position, which is other empty spaces in the target empty space and / or empty spaces added after the second interface element is moved.

[0010] In this way, the first empty space and its adjacent positions form a continuous empty space with the same size as the second interface element. The second interface element can be moved to this first empty space and its adjacent positions. This is equivalent to enlarging the first empty space and encroaching on the fourth interface element, thereby finding an empty space for the fourth interface element and moving it to another position. It should be noted that these other positions are other empty spaces in the target empty space and / or empty spaces newly created after the second interface element is moved. If the fourth interface element still needs to encroach on other interface elements when moved, the first operation cannot enlarge the first interface element. Thus, while satisfying the requirement of enlarging the first interface element, the impact of enlarging the first interface element on other interface elements in the first interface is minimized.

[0011] Combining the first aspect and the aforementioned implementation methods, in some implementations of the first aspect, finding target empty spaces in the first interface that support the movement of second interface elements includes: starting from a first starting position on the first interface, searching for target empty spaces in a preset order, where the first starting position is associated with a third interface element. For example, the first starting position could be the position corresponding to the top left corner of the third interface element in the first interface. Alternatively, the first starting position could be the position corresponding to the top right corner of the third interface element in the first interface. Or, the first starting position could be the position corresponding to the bottom right corner of the third interface element in the first interface. Or, the first starting position could be the position corresponding to the bottom left corner of the third interface element in the first interface, and so on. In this way, by first searching for target empty spaces after the third interface element, the changes in the position of the second interface element are controlled within a local range, without affecting the interface layout before the third interface element.

[0012] In conjunction with the first aspect and the above implementation methods, in some implementation methods of the first aspect, if there is no target empty space after the first starting position, the above method further includes: starting from the second starting position of the first interface and ending at the first starting position, searching for the target empty space in a preset order, where the second starting position is the position before the first starting position. For example, the second starting position can be the upper left corner of the first interface.

[0013] Combining the first aspect and the above implementation methods, in some implementation methods of the first aspect, the target empty space is determined according to a preset order, including: determining the target empty space row by row from left to right. That is, starting from the first starting position or the second starting position, first determine whether there is a target empty space after the column of the row containing the first starting position or the second starting position. If not, further determine whether there is a target empty space in the next row.

[0014] In conjunction with the first aspect and the above implementation methods, in some implementation methods of the first aspect, after displaying the second interface and before exiting the first operation, the above method further includes: detecting a second operation performed on a third interface element, the second operation being a rollback operation against the first operation; in response to the second operation, displaying a third interface, the third interface including a fifth interface element and a second interface element corresponding to the first interface element, the size of the fifth interface element being greater than or equal to the size of the first interface element and smaller than the size of the third interface element, and the position of the second interface element in the third interface being the same as the position of the second interface element in the first interface.

[0015] In other words, after the user enlarges the first interface element to become the third interface element through the first operation, they then use a second operation to transform the third interface element back into the first interface element. In this way, the third interface element initially occupies the space of the second interface element, which is then moved to the desired empty space. Finally, the space occupied by the third element is vacated, allowing the second interface element to return to its original position. Thus, if the user is not satisfied with the enlarged interface element after the first operation, they can perform the second operation, and the affected second interface element automatically returns to its original position. This avoids disrupting the interface layout after the user performs and then abandons the transformation, improving the user experience.

[0016] Combining the first aspect and the above implementation methods, in some implementations of the first aspect, the method further includes: if there is no target empty space in the first interface to support the movement of the second interface element, outputting a prompt message to inform the user that there is insufficient remaining space in the first interface. In other words, moving the second interface element only occurs on the current page, preventing the user from not being able to find the second interface element on the current page when it needs to be used after it has been moved to another page.

[0017] In a second aspect, embodiments of this application provide an electronic device, including: one or more processors; one or more memories; the memories storing one or more programs, which, when executed by the processors, cause the electronic device to perform the method described in the first aspect.

[0018] Thirdly, embodiments of this application provide an apparatus included in an electronic device, which has the function of implementing the behaviors of the electronic device in the above aspects and possible implementations thereof. The functions can be implemented by hardware or by hardware executing corresponding software. The hardware or software includes one or more modules or units corresponding to the above functions. For example, a display module or unit, a detection module or unit, a processing module or unit, etc.

[0019] Fourthly, embodiments of this application provide a computer-readable storage medium storing instructions that, when executed on a computer, cause the computer to perform the method described in the first aspect above.

[0020] Fifthly, embodiments of this application provide a computer program product containing instructions that, when run on a computer, cause the computer to perform the method described in the first aspect above.

[0021] The technical effects achieved by the second, third, fourth, and fifth aspects mentioned above are similar to those achieved by the corresponding technical means in the first aspect mentioned above, and will not be repeated here. Attached Figure Description

[0022] Figure 1 A schematic diagram of a desktop layout for an electronic device provided in an embodiment of this application;

[0023] Figures 2A to 2D A schematic diagram of an interface for a set of display methods provided in an embodiment of this application;

[0024] Figure 3 A schematic diagram of the hardware structure of an electronic device provided in an embodiment of this application;

[0025] Figure 4 This is a schematic diagram of the software system structure of an electronic device provided in an embodiment of this application;

[0026] Figure 5 A schematic flowchart illustrating a display method provided in an embodiment of this application;

[0027] Figure 6 A schematic diagram of a starting position provided for an embodiment of this application;

[0028] Figures 7A to 7B A schematic diagram of an interface for another set of display methods provided in the embodiments of this application;

[0029] Figure 8 A schematic diagram of an interface for another set of display methods provided in the embodiments of this application;

[0030] Figure 9 A schematic diagram of an interface for another set of display methods provided in the embodiments of this application;

[0031] Figure 10 A schematic diagram of an interface for another set of display methods provided in the embodiments of this application;

[0032] Figure 11 A schematic diagram of an interface for another set of display methods provided in the embodiments of this application;

[0033] Figure 12A schematic diagram of an interface for another set of display methods provided in the embodiments of this application;

[0034] 13A to 13B A schematic diagram of an interface for another set of display methods provided in the embodiments of this application;

[0035] Figure 14 A schematic diagram of an interface for another set of display methods provided in the embodiments of this application;

[0036] Figure 15 A schematic diagram of the structure of an apparatus provided in an embodiment of this application;

[0037] Figure 16 This is a schematic diagram of the structure of a chip provided in an embodiment of this application. Detailed Implementation

[0038] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be further described in detail below with reference to the accompanying drawings. Hereinafter, the terms "first" and "second" are used for descriptive purposes only, unless otherwise specified, and should not be construed as indicating or implying relative importance or implicitly specifying the number of indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of this embodiment, unless otherwise stated, "a plurality of" means two or more.

[0039] Typically, electronic devices with displays (such as mobile phones) can display a desktop, where the desktop refers to a page that can be turned in response to a user's swiping gestures. For example, see [link to relevant documentation]. Figure 1 As shown, the interface 101 displayed by the electronic device may include a display area 1 and a display area 2. In response to a user's swiping operation, the content displayed in display area 1 can switch with the swiping operation, while display area 2 permanently displays icons of specific applications (APPs), such as camera, contacts, phone, and messages. Display area 1 is the desktop described later in this application embodiment. Desktop elements can be displayed on the desktop. When a desktop element encroaches on surrounding desktop elements, the positions of the surrounding desktop elements move within the range of display area 1. Desktop elements can also be referred to as interface elements.

[0040] The smallest area on the desktop used for displaying (also known as placing) desktop elements is a control grid, which can also be called a grid or cell. For example, display area 1 includes 4 columns and 5 rows, totaling 20 grids, simply referred to as a 4×5 layout. Of course, in other embodiments, the desktop can also be a 4×6 layout, a 5×5 layout, a 5×6 layout, etc., and this application embodiment does not limit this.

[0041] When a desktop element is displayed on the desktop, it needs to occupy one or more grid cells on the desktop. When a grid cell is not occupied by a desktop element, that grid cell is called an empty space. For example, Figure 1 The four grid cells in the fourth row and second column, the fifth row and second column, the fifth row and third column, and the fifth row and fourth column are not occupied by desktop elements, and the interface includes four empty spaces.

[0042] In this embodiment, desktop elements may include application icons, cards, folders, application components, etc. Application icons are used to launch apps; when a user clicks an application icon, the electronic device can open the app. Folders are used by users to manage and find different applications; users can add application icons for multiple apps to the same folder. Folders may include large folders and small folders. In a small folder, when a user clicks on the folder, the electronic device can display all the apps within that folder; clicking the app's icon will then open the app. In a large folder, the user can directly click the app's icon to open the app without expanding the folder. Cards are generally pages within an application; clicking a card will navigate to a specific service page within that application. Cards may include small-sized cards and large-sized cards. Application components can be used to trigger the electronic device to display the functional interface of the application corresponding to that component.

[0043] For the aforementioned desktop elements, electronic devices provide desktop element transformation functionality, such as... Figure 2A As shown, after a user long-presses a desktop element, the electronic device can display the border of the desktop element, and then the user can drag the border of the desktop element in the first direction. Using this desktop element transformation function, users can drag desktop elements to change their size. For example, drag an app icon to make a small card, drag a small card to make a large card, drag a small folder to make a large folder, and drag large folders, large cards, and other components to a larger size.

[0044] The following section uses the example of dragging and dropping application icons into small cards to introduce the technical issues that exist in the process of transforming desktop elements, combined with the user interface (UI).

[0045] See Figure 2B-2C As shown, the phone can display the main interface, for example, as Figure 2B The interface 201 shown in (a) includes an application icon 201a, which is 1×1 in size. There is a 1×1 empty space to the right of icon 201a, and icon 201b is located below icon 201a. When the user long-presses icon 201a, the phone can display... Figure 2BThe interface 202 shown in (b) may include a drag box, namely the border 202a displayed around the icon 201a. The user can drag the border 202a in any direction to increase the size of the icon 201a.

[0046] For example, see Figure 2B In the interface 203 shown in (c), the user can drag the border 202a to the right. Since there is empty space to the right of icon 201a, icon 201a can be dragged into a small card (Shortcut) with a size of 2×1. After the user drags the border 202a to the right, the phone can display... Figure 2B The interface 204 shown in (d) displays a small card 204a, which is a transformation of the icon 201a, and the border 204b of the small card 204a. The user can click on other parts of the interface to exit the drag-and-drop operation, thereby displaying only the small card 204a and not the border 204b of the small card 204a.

[0047] For example, see Figure 2C In the interface 205 shown in (a), the user can drag the border 202a downwards. Because the bottom of icon 201a is occupied by icon 201b, there is no empty space adjacent to the bottom of icon 201a, so the user cannot enlarge icon 201a by dragging. After the user drags the border 202a downwards, the phone can display... Figure 2C The interface shown in (b) can be Figure 2B Interface 202 is shown in (b) above. After the user clicks on another part of the interface to exit the drag-and-drop operation, the phone can display... Figure 2B Interface 201 is shown in (a) of the diagram.

[0048] In other words, in the drag direction, if the adjacent position of the first interface element (icon 201a) is already occupied by the second desktop element (icon 201b), and there is not enough space in the adjacent position to place the enlarged portion of icon 201a, icon 201a cannot be dragged to enlarge, failing to meet the user's needs and resulting in a poor user experience. If the user still needs icon 201a to be dragged to enlarge, the user needs to first move the existing icon 201b in the adjacent position to another location, and then drag it to enlarge icon 201a. This requires the user to move interface elements, making the operation cumbersome and resulting in a poor user experience.

[0049] In view of this, embodiments of this application provide a display method in which an electronic device displays a first interface, such as a desktop. The first interface includes a first interface element and a second interface element. A user drags the border of the first interface element in a first direction to enlarge the first interface element into a third interface element. Since a second interface element is placed adjacent to the first interface element in the first direction, the third interface element needs to occupy the position of the second interface element. Therefore, in response to the first operation, the electronic device searches for a target empty space in the first interface that supports the movement of the second interface element. If a target empty space that supports the movement of the second interface element is found in the first interface, the first interface element can be enlarged into a third interface element, and the second interface element can be moved to the target empty space. Thus, the electronic device displays a second interface. It can be understood that the second interface is an updated version of the first interface. The second interface includes a second interface element and a third interface element, wherein the third interface element is obtained by performing the first operation on the first interface element, the size of the third interface element is larger than the size of the first interface element, and the position of the third interface element in the second interface is the same as the position of the first interface element in the first interface. The second interface element moves to the target empty space in the first interface, and the position of the second interface element in the second interface corresponds to the position of the target empty space in the first interface.

[0050] Based on the above technical solution, if a second interface element is placed adjacent to a first interface element, when the first interface element is dragged and enlarged into a third interface element, the electronic device can automatically move the second interface element to an empty space on the first interface. In this way, regardless of whether there is an empty space adjacent to the first interface element, it can be enlarged through dragging, improving the user experience. Furthermore, the position of the third interface element on the second interface is the same as the position of the first interface element on the first interface; that is, enlarging the first interface element in place after dragging will not change its position. After the second interface element is moved, its position on the second interface corresponds to the position of the target empty space on the first interface, thus moving the second interface element to the target empty space. This reduces the impact of enlarging the first interface element on other interface elements on the first interface, making the layout of the second interface as close as possible to the layout of the first interface, conforming to the user's original usage habits.

[0051] For example, Figure 2D This is a schematic diagram of the interface provided for an embodiment of this application, such as... Figure 2DIn the interface 205 shown in (a), the user can drag the border 202a of icon 201a downwards. At this time, the bottom of icon 201a is occupied by icon 201b, which has a size of 1×1. The fourth row, second column, fifth row, second column, fifth row, third column, and fifth row, fourth column in display area 1 are all empty spaces with a size of 1×1. The electronic device can find the target empty space that supports the movement of icon 201b, for example, using the empty space in the fourth row, second column as the target empty space. After the user drags the border 202a downwards, the phone can display... Figure 2D As shown in (b) of the diagram, interface 206 displays a small card 206a after the icon 201a has been deformed, and a border 206b of the small card 206a. The icon 201b has been moved to the right of the icon 201a. Thus, this embodiment of the application achieves the effect of rearranging the surrounding desktop elements when a certain desktop element (such as icon 201a) expands, thus encroaching on the positions of surrounding desktop elements (such as icon 201b).

[0052] The display method provided in this application is applicable to any electronic device with a display screen, such as mobile phones, tablets, wearable devices (e.g., watches, bracelets, smart helmets, smart glasses, etc.), in-vehicle devices, augmented reality (AR) / virtual reality (VR) devices, laptops, ultra-mobile personal computers (UMPCs), netbooks, personal digital assistants (PDAs), etc. This application does not limit the application to these devices. The electronic devices involved in this application can be foldable electronic devices, such as foldable mobile phones, foldable tablets, etc., and this application does not limit the application to these devices. The structure of the electronic device will be described below using a mobile phone as an example.

[0053] Figure 3 A schematic diagram of the structure of an electronic device 100 provided in an embodiment of this application is shown.

[0054] Electronic device 100 may include processor 110, external memory interface 120, internal memory 121, universal serial bus (USB) interface 130, charging management module 140, power management module 141, battery 142, antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone jack 170D, sensor module 180, button 190, motor 191, indicator 192, camera 193, display screen 194, and subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an accelerometer sensor 180E, a distance sensor 180F, a proximity sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0055] It is understood that the structures illustrated in the embodiments of the present invention do not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0056] Processor 110 may include one or more processing units, such as application processors (APs), modem processors, graphics processing units (GPUs), image signal processors (ISPs), controllers, video codecs, digital signal processors (DSPs), baseband processors, and / or neural network processing units (NPUs). These different processing units may be independent devices or integrated into one or more processors.

[0057] The controller can generate operation control signals based on the instruction opcode and timing signals to complete the control of instruction fetching and execution.

[0058] The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has just used or that are used repeatedly. If the processor 110 needs to use the instruction or data again, it can retrieve it directly from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0059] In some embodiments, the processor 110 may include one or more interfaces. Interfaces may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a subscriber identity module (SIM) interface, and / or a universal serial bus (USB) interface, etc.

[0060] It is understood that the interface connection relationships between the modules illustrated in the embodiments of the present invention are merely illustrative and do not constitute a structural limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may also employ different interface connection methods or combinations of multiple interface connection methods as described in the above embodiments.

[0061] The charging management module 140 receives charging input from a charger, which can be a wireless charger or a wired charger. While charging the battery 142, the charging management module 140 can also supply power to the electronic device via the power management module 141.

[0062] The power management module 141 connects the battery 142, the charging management module 140, and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140 to power the processor 110, internal memory 121, display screen 194, camera 193, and wireless communication module 160, etc. In some other embodiments, the power management module 141 may also be located within the processor 110. In other embodiments, the power management module 141 and the charging management module 140 may be located in the same device.

[0063] The wireless communication function of electronic device 100 can be realized through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor and baseband processor, etc.

[0064] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals.

[0065] The mobile communication module 150 can provide wireless communication solutions for use on the electronic device 100, including 2-generation wireless telephone technology (2G), 3-generation mobile communication technology (3G), 4-generation mobile communication technology (4G), and 5-generation mobile communication technology (5G).

[0066] The wireless communication module 160 can provide solutions for wireless communication applications on the electronic device 100, including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR) technology, etc.

[0067] In some embodiments, antenna 1 of electronic device 100 is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, so that electronic device 100 can communicate with networks and other devices through wireless communication technology.

[0068] Electronic device 100 implements display functions through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations and for graphics rendering. Processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0069] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. In some embodiments, the electronic device 100 may include one or N display screens 194, where N is a positive integer greater than 1. In this embodiment, the display screen 194 can be used to display a main interface and an application interface. The main interface may include interface elements such as folders, application icons, and cards.

[0070] Electronic device 100 can implement shooting functions through an ISP, camera 193, video codec, GPU, display 194, and application processor. The ISP is used to process data fed back by camera 193, and camera 193 is used to capture still images or videos. In some embodiments, electronic device 100 may include one or N cameras 193, where N is a positive integer greater than 1.

[0071] The external storage interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external storage interface 120 to perform data storage functions. For example, music, video, and other files can be saved on the external memory card.

[0072] Internal memory 121 can be used to store computer executable program code, which includes instructions. Internal memory 121 may include a program storage area and a data storage area. The program storage area may store the operating system, at least one application program required for a function (such as sound playback, image playback, etc.), etc. The data storage area may store data created during the use of electronic device 100 (such as audio data, phonebook, etc.). Furthermore, internal memory 121 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc. Processor 110 executes various functional applications and data processing of electronic device 100 by running instructions stored in internal memory 121 and / or instructions stored in memory located in the processor.

[0073] Electronic device 100 can implement audio functions, such as music playback and recording, through an audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone jack 170D, and application processor. Buttons 190 include a power button and volume buttons. Buttons 190 can be mechanical buttons or touch buttons. Motor 191 can generate vibration alerts. Motor 191 can be used for incoming call vibration alerts or for touch vibration feedback. Indicator 192 can be an indicator light, used to indicate charging status, battery level changes, messages, missed calls, notifications, etc. SIM card interface 195 is used to connect a SIM card. The SIM card can be inserted into or removed from the SIM card interface 195 to achieve contact and separation with electronic device 100. Electronic device 100 can support one or N SIM card interfaces, where N is a positive integer greater than 1.

[0074] Pressure sensor 180A is used to sense pressure signals and convert them into electrical signals. Electronic device 100 can also calculate the touch position based on the detection signal from pressure sensor 180A. Gyroscope sensor 180B can be used to determine the motion posture of electronic device 100. Barometric pressure sensor 180C is used to measure barometric pressure. Magnetic sensor 180D includes a Hall effect sensor. Electronic device 100 can use magnetic sensor 180D to detect the opening and closing of the flip cover. Accelerometer 180E can detect the magnitude of acceleration of electronic device 100 in various directions (generally three axes). Distance sensor 180F is used to measure distance. Proximity sensor 180G can include, for example, a light-emitting diode (LED) and a photodetector, such as a photodiode. The LED can be an infrared LED. Electronic device 100 emits infrared light outward through the LED to detect the presence of nearby objects. Ambient light sensor 180L is used to sense ambient light intensity. Fingerprint sensor 180H is used to collect fingerprints. Temperature sensor 180J is used to detect temperature. Bone conduction sensor 180M can acquire vibration signals.

[0075] Touch sensor 180K, also known as a "touch device," can be located on display screen 194. The touch sensor 180K and display screen 194 together form a touchscreen, also known as a "touchscreen." Touch sensor 180K detects touch operations applied to or near it. The touch sensor can transmit the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through display screen 194. In other embodiments, touch sensor 180K may also be located on the surface of electronic device 100, in a different position than display screen 194.

[0076] In this embodiment, the touch sensor can detect user touch operations on the display screen, such as a long press operation on a designated area of ​​an interface element. The electronic device 100 can then respond to this long press operation by displaying a border including the interface element. Alternatively, the touch sensor can detect user touch operations on the display screen, such as dragging the border of an interface element in a first direction. The electronic device 100 can then respond to this dragging operation by enlarging the interface element.

[0077] It is understood that the structures illustrated in the embodiments of the present invention do not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0078] The software system of electronic device 100 can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This embodiment of the invention uses the layered architecture Android system as an example to exemplify the software structure of electronic device 100.

[0079] Figure 4 This is a software structure block diagram of the electronic device 100 according to an embodiment of the present invention.

[0080] A layered architecture divides software into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom: the application layer, the application framework layer, the Android runtime and system libraries, and the kernel layer.

[0081] The application layer can include a series of application packages.

[0082] like Figure 4 As shown, the application package may include applications such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, and SMS.

[0083] The application framework layer provides application programming interfaces (APIs) and a programming framework for applications in the application layer. The application framework layer includes some predefined functions.

[0084] like Figure 4 As shown, the application framework layer may include a window manager, content provider, view system, phone manager, resource manager, notification manager, etc.

[0085] The window manager is used to manage windowed applications. It can retrieve screen size, determine the presence of a status bar, lock the screen, and capture screenshots, among other things.

[0086] Content providers store and retrieve data, making that data accessible to applications. This data may include videos, images, audio, made and received phone calls, browsing history and bookmarks, phone books, etc.

[0087] A view system includes visual controls, such as controls for displaying text and controls for displaying images. View systems can be used to build applications. A display interface can consist of one or more views. For example, a display interface including a text notification icon could include views for displaying text and views for displaying images.

[0088] The phone manager is used to provide communication functions for electronic device 100. For example, it manages call status (including connection and disconnection).

[0089] The file explorer provides applications with various resources, such as localized strings, icons, images, layout files, video files, and more.

[0090] The notification manager allows applications to display notifications in the status bar. These notifications can be used to deliver informational messages and can disappear automatically after a short pause, requiring no user interaction. For example, the notification manager can be used to notify users of completed downloads or message alerts. The notification manager can also display notifications as icons or scrolling text in the top status bar, such as notifications from background applications, or as dialog boxes on the screen. Examples include displaying text messages in the status bar, emitting sounds, vibrating electronic devices, and flashing indicator lights.

[0091] The Android Runtime consists of core libraries and a virtual machine. The Android runtime is responsible for the scheduling and management of the Android system.

[0092] The core library consists of two parts: one part is the functionalities that need to be called by the Java language, and the other part is the Android core library.

[0093] The application layer and application framework layer run in a virtual machine. The virtual machine executes the Java files of the application layer and application framework layer as binary files. The virtual machine is used to perform functions such as object lifecycle management, stack management, thread management, security and exception management, and garbage collection.

[0094] System libraries can include multiple functional modules. For example: surface manager, media libraries, 3D graphics processing libraries (e.g., OpenGL ES), 2D graphics engines (e.g., SGL), etc.

[0095] The Surface Manager is used to manage the display subsystem and provides the blending of 2D and 3D layers for multiple applications.

[0096] The media library supports playback and recording of various common audio and video formats, as well as still image files. It supports multiple audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, and PNG.

[0097] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.

[0098] A 2D graphics engine is a graphics engine for 2D drawing.

[0099] The kernel layer is the layer between hardware and software. The kernel layer contains at least the display driver, camera driver, audio driver, and sensor driver.

[0100] The following uses a mobile phone as an example to describe the flow of the display method provided in the embodiments of this application.

[0101] Figure 5 A flowchart illustrating a display method provided in an embodiment of this application is shown. Figure 5 The display method shown can be executed by the aforementioned electronic device, or by a chip configured in the electronic device; Figure 5 The method shown includes S501 to S504. S501 to S504 are described in detail below.

[0102] S501, Display a first interface, the first interface includes a first interface element and a second interface element, the second interface element is adjacent to the first interface element in a first direction.

[0103] The first interface can be the phone's desktop. Elements on the first interface can be icons, small cards, large cards, small folders, large folders, application components, etc. The size of the first interface elements can be 1×1, 2×1, 2×2, 4×1, etc., and this application does not limit this.

[0104] The second interface element can also be an icon, a small card, a large card, a small folder, a large folder, an application component, or other interface elements. The size of the second interface element can also be 1×1, 2×1, 2×2, 4×1, etc., and this application does not limit this. There can be one or more second interface elements.

[0105] The size of an interface element indicates the number of grid cells it occupies on the desktop and the arrangement of those grid cells. The size of an interface element can include both horizontal and vertical dimensions. The horizontal dimension refers to the number of columns of grid cells it occupies on the desktop, and the vertical dimension refers to the number of rows of grid cells it occupies. Interface element sizes can be 1×1, 2×1, 2×2, 4×1, 4×2, 4×4, and so on. Specifically, 1×1 indicates the element occupies one grid cell; 2×1 indicates two grid cells arranged in two columns and one row; 4×2 indicates eight grid cells arranged in four columns and two rows; and 4×4 indicates sixteen grid cells arranged in four columns and four rows.

[0106] S502, First operation detected, the first operation is used to drag the border of the first interface element in the first direction.

[0107] After a user long-presses on the first element, the border of the first element will be displayed, and the user can then drag the border of the first element in the first direction.

[0108] In some implementations, the first interface can be an interface that displays the border of a first interface element, and the first operation can be an operation of dragging the border of the first interface element in the first direction. A long-press operation is performed before the first interface is displayed.

[0109] In some other implementations, the first interface can be an interface where the borders of the first interface elements have not yet been displayed, and the first operation can be a long press and drag operation. That is, the first operation includes the operation of long pressing the first interface element and the operation of dragging the borders of the first interface element in the first direction.

[0110] In other implementations, the first operation can also be a continuous drag operation, and the direction of the drag can be different. For example, the first operation could be dragging the border of the first interface element to the right and then continuing to drag the border of the first interface element downwards. In this implementation, if each drag operation encroaches on other interface elements, the interface layout will change after each drag operation.

[0111] The first interface element can be located anywhere in the first interface, and the first direction can be one of the four directions: up, down, left, and right, depending on the position of the first interface element in the first interface.

[0112] Specifically, when the position of the first interface element includes the top corner of the first interface, there are two possible directions. For example, when the position of the first interface element includes the top left corner of the first interface, the user can drag the border of the first interface element to the right or drag it downwards. When the position of the first interface element includes the top right corner of the first interface, the user can drag the border of the first interface element to the left or drag it downwards. When the position of the first interface element includes the bottom left corner of the first interface, the user can drag the border of the first interface element to the right or drag it upwards. When the position of the first interface element includes the bottom right corner of the first interface, the user can drag the border of the first interface element to the left or drag it upwards.

[0113] When the position of the first interface element includes one edge of the first interface but not the top corner, the first direction can have three options. The edge position includes the first column, the last column, the first row, and the last row. For example, when the position of the first interface element includes the first row of the first interface, the user can drag the border of the first interface element to the left, to the right, or downwards. When the position of the first interface element includes the first column of the first interface, the user can drag the border of the first interface element to the right, upwards, or downwards. When the position of the first interface element includes the last row of the first interface, the user can drag the border of the first interface element to the left, to the right, or upwards. When the position of the first interface element includes the last column of the first interface, the user can drag the border of the first interface element to the left, upwards, or downwards.

[0114] When the position of the first interface element includes the left and right edges of the first interface but excludes the top and bottom edges, the user can drag the border of the first interface element upwards or downwards. When the position of the first interface element includes the top and bottom edges of the first interface but excludes the left and right edges, the user can drag the border of the first interface element to the left or to the right.

[0115] When the position of the first interface element includes the left, right, and top edges of the interface but excludes the bottom edge, the user can drag the border of the first interface element downwards. When the position of the first interface element includes the left, right, and bottom edges of the interface but excludes the left edge, the user can drag the border of the first interface element upwards.

[0116] When the position of the first interface element does not include the edge or top corner of the first interface, the user can drag the border of the first interface element in any direction (up, down, left, right).

[0117] The position of a UI element can be represented by the number of rows and columns it occupies on the desktop. For example, in... Figure 2B In interface 204 shown in (d), the small card 204a is located in the 4th row, 1st column and 4th row, 2nd column. Alternatively, the position of an interface element can be represented by coordinates. For example, a coordinate system can be constructed on the first interface with the top left corner as the origin, obtaining the row and column number of each grid on the first interface, and using this as the coordinates of that grid on the first interface. For example, the origin (i.e., the coordinates of the grid in the first row, 1st column) is (1,1). For example, the coordinates of the grid in the first row, 2nd column are (1,2). For example, the coordinates of the grid in the third row, 2nd column are (3,2). When an element of the first interface occupies one grid, the position of the element of the first interface is the coordinate of the grid. For example, in... Figure 2B In interface 201 shown in (a), the position of icon 201a is (4,1). When the first interface element occupies multiple grids, that is, when the size of the first interface element is greater than 1×1, the position of the first interface element can be represented by a set of coordinates of multiple grids. For example, in Figure 2B In interface 204 shown in (d), the position of the small card 204b is {(4,1),(4,2)}. It should be understood that the origin of the coordinate system in other implementations can also be other positions within the first interface, and this application does not limit this. After constructing the coordinate system on the first interface, the second interface uses the same coordinate system as the first interface.

[0118] S503, in response to the first operation, finds a target empty space in the first interface that supports the movement of elements in the second interface.

[0119] S504, if a target empty space supporting the movement of the second interface element is found in the first interface, the second interface is displayed. The second interface includes a second interface element and a third interface element. The third interface element is obtained by performing a first operation on the first interface element. The size of the third interface element is larger than the size of the first interface element. The position of the third interface element in the second interface is the same as the position of the first interface element in the first interface. The position of the second interface element in the second interface corresponds to the position of the target empty space in the first interface.

[0120] Since a second interface element is placed adjacent to the first interface element in the first direction, if the border of the first interface element is dragged in the first direction to enlarge it into a third interface element, the third interface element needs to occupy the space of the second interface element. This enlargement can be either complete or partial. Therefore, in response to the first operation, the electronic device searches for a target empty space in the first interface that supports the movement of the second interface element. If a target empty space is found in the first interface that supports the movement of the second interface element, the first interface element can be enlarged into a third interface element, and the second interface element can be moved to the target empty space.

[0121] In this embodiment, the electronic device searches for target empty spaces in the first interface that support the movement of elements on the second interface; that is, it determines whether there are target empty spaces according to preset rules and determines the position of the target empty spaces. The target empty spaces that support the movement of elements on the second interface can be consecutive empty spaces of the same size as the elements on the second interface.

[0122] The process of finding target vacancy spaces according to preset rules will be described in detail below.

[0123] First, a starting position is determined in the first interface. This starting position is a coordinate point associated with an element in the third interface. This starting position can also be called a space counting reference point. Starting from this starting position, the electronic device searches for consecutive empty spaces in the first interface that are the same size as elements in the second interface, following a preset order. If a consecutive empty space with the same size as an element in the second interface is found, the electronic device can move the element in the second interface to that empty space, allowing the element in the first interface to occupy the space of the element in the second interface and become larger enough to be the element in the third interface.

[0124] If no consecutive empty space of the same size as the element of the second interface is found after the first starting position, the second starting position is determined. The second starting position is a position before the first starting position. For example, the second starting position can be the top left corner of the first interface, that is, the grid in the first row and first column.

[0125] Starting from the second starting position and moving up to the first starting position, the system searches for consecutive empty spaces in the first interface that are the same size as the elements in the second interface, following a preset order. If a consecutive empty space with the same size as the elements in the second interface is found, the elements in the first interface can encroach on the space of the elements in the second interface to become larger and thus become the elements in the third interface. If no consecutive empty space with the same size as the elements in the second interface is found, the elements in the first interface cannot encroach on the space of the elements in the second interface to become larger and thus become the elements in the third interface after the first operation.

[0126] In other words, when a first element on the screen becomes larger, the second element can only occupy the space occupied by the first element if there is a consecutive empty space of the same size on the current first screen. Otherwise, the first element cannot occupy the space of the second element. If the first element cannot occupy the space of the second element, the electronic device can output a prompt message to inform the user that there is insufficient remaining space on the first screen.

[0127] The first starting position can be the top left corner of the third interface element, which corresponds to the position in the first interface.

[0128] See Figure 6 ,like Figure 6 As shown in (a), the size of the first interface element is 2×1, and its position in the first interface is {(3,2),(3,3)}; after the first operation, the first interface element is enlarged into a third interface element, as shown in (a). Figure 6 As shown in (b), the size of the third interface element is 2×2, and its position in the coordinate system is {(3,2),(3,3),(4,2),(4,3)}. The top-left corner of the third interface element corresponds to the position (3,2) in the first interface, meaning the first starting position is the position (3,2) in the third row and second column. For example, as... Figure 6 As shown in (c), after the first operation, the first interface element is enlarged into the third interface element. The size of the third interface element is 2×2. The position of the third interface element in the coordinate system is {(2,2),(2,3),(3,2),(3,3)}. The position of the upper left corner of the third interface element in the first interface is (2,2), that is, the first starting position is the position of the second row and second column (2,2).

[0129] In other implementations, the first starting position can also be other coordinate points. For example, the first starting position can be the position corresponding to the upper right corner of the third interface element in the first interface. For example, the first starting position can be the position corresponding to the lower right corner of the third interface element in the first interface. For example, the first starting position can be the position corresponding to the lower left corner of the third interface element in the first interface. For example, the first starting position can be the position corresponding to the center point of the third interface element in the first interface, and so on. This application does not limit this.

[0130] The preset order is row by row from left to right. For example, if the first starting position is (3,2), then it checks if the third row and third column are empty, then the fourth row and fourth column, then the first row and first column, then the second row and second column, and so on. While searching for empty spaces in the preset order, the electronic device can record the position of each empty space and determine whether the existing empty spaces can form a continuous empty space with the same size as the second interface element based on the recorded positions.

[0131] When the first empty space is found, its position is recorded, and its size is checked against the size of the second interface element. If the empty space matches the size of the second interface element, a series of consecutive empty spaces of the same size are found, and the search continues. If the empty space does not match the size of the second interface element, the search continues for the next empty space. The position of the next empty space is recorded, and the presence of multiple empty space positions is used to determine if a series of consecutive empty spaces of the same size as the second interface element exists. If no empty space is found, or if the empty spaces are not a series of consecutive empty spaces of the same size as the second interface element, it indicates that no target empty space has been found to support the movement of the second interface element.

[0132] When there are multiple second interface elements, the electronic device can determine the empty space for each second interface element in order from left to right and from top to bottom.

[0133] The following examples, with reference to the accompanying diagrams, illustrate this point.

[0134] See Figure 7A , Figure 7AThe interface 701 (first interface) shown in (a) includes icons 701a, 701b, 701c, 701d, and 701e, located at positions (3,3), (3,4), (4,1), (4,3), and (4,4) respectively, each with a size of 1×1. The remaining positions in interface 701 are empty. If the user drags the border of icon 701a (first interface element) to the right, it will need to occupy the position of icon 701b (second interface element), requiring the search for an empty space of size 1×1. In response to the user's dragging of the border of icon 701a to the right, the electronic device can search for an empty space starting from position (3,3), i.e., first determine if (4,1) is an empty space. At this time, icon 701c is placed at position (4,1), therefore position (4,1) is not an empty space. The electronic device then determines whether position (4,2) is empty. Since no interface element is currently placed at position (4,2), it is indeed empty. Next, it checks if the size of the empty space matches the size of icon 701b. Both the empty space and icon 701b are 1×1. The electronic device has found an empty space where icon 701b can be placed, meaning it has found a target empty space that allows icon 701b to move.

[0135] Subsequently, the electronic device zooms in on the first interface element. During this zooming process, the second interface element moves from its initial position (3,4) to the target empty space (4,2). When the first interface element is zoomed in to become the third interface element, icon 701b moves to position (4,2), allowing the electronic device to display... Figure 7A Interface 702 shown in (b) has a small card 701a1 (the third interface element) displayed at position {(3,3),(3,4)}. The size of the small card 701a1 is 2×1. The interface 702 also displays an icon 701b that is in a squeezed position at position (4,2).

[0136] See Figure 7B ,exist Figure 7BBased on interface 702 shown in (a), the small card 701a1 can be the first interface element. The user can drag the border of the small card 701a1 downwards, which will occupy the positions of icons 701d and 701e. The second interface elements are icons 701d and 701e. The electronic device needs to find two empty spaces with a size of 1×1. In response to the user's operation of dragging the border of the small card 701a1 downwards, the electronic device can first find an empty space for icon 701d. Starting from position (3,3) (the first starting position), the electronic device determines that position (4,1) is not an empty space, position (4,2) is not an empty space, position (4,3) is not an empty space, position (4,4) is not an empty space, and position (5,1) is an empty space. Then, the electronic device determines that the size of the empty space at position (5,1) is the same as the size of icon 701d, thus finding an empty space (5,1) where icon 701d can be placed. Then, the electronic device searches for an empty space for icon 701e. Starting from position (3,3), the electronic device sequentially determines that position (4,1) is not empty, position (4,2) is not empty, position (4,3) is not empty, position (4,4) is not empty, position (5,1) is not empty, and position (5,2) is empty. The electronic device then determines that the size of the empty space at position (5,2) is the same as the size of icon 701e, thus finding an empty space (5,2) where icon 701e can be placed. The electronic device enlarges the first interface element to become a third interface element, moves icon 701d to position (5,1), and moves icon 701e to position (5,2), thereby displaying... Figure 7B Interface 703 shown in (b) has a large card 701a2 (the third interface element) displayed at position {(3,3),(3,4),(4,3),(4,4)}. The size of the large card 701a2 is 2×2. Interface 703 also displays an icon 701d that is in a squeezed position at position (5,1) and an icon 701e that is in a squeezed position at position (5,2).

[0137] when Figures 7A-7B When the icon 701a is replaced with a small file with a size of 1×1, and other interface layouts remain unchanged, the process of the electronic device finding the target empty space is the same as described above when the user drags the small file to the right to enlarge it, and drags it down to enlarge it into a large file.

[0138] See Figure 8 , Figure 8Interface 801 shown in (a) includes a folder 801a, a small card 801b, and an icon 801c. The folder 801a is located at {(3,3),(3,4)} in interface 801, with a size of 2×1; the small card 801b is located at {(4,3),(4,4)} in interface 801, with a size of 2×1; and the icon 801c is located at (4,1) in interface 801, with a size of 1×1. If the user drags down the border of the folder 801a (the first interface element), it will need to encroach on the position of the small card 801b (the second interface element). The electronic device needs to find an empty space of size 2×1, i.e., two consecutive empty spaces. In response to the user's dragging down the border of the folder 801a, the electronic device can search for the target empty space starting from position (3,3) (the first starting position). The electronic device can sequentially determine that position (4,1) is not an empty space, and position (4,2) is an empty space. Since the current empty space size is 1×1, which is different from the required empty space size of 2×1, the electronic device determines that the size of the current empty space is different from the size of the card 801b, and records the position (4,2) as an empty space, and continues to search for an empty space.

[0139] Then, the electronic device determines that position (5,1) is empty. At this point, empty positions (4,2) and (5,1) are not consecutive empty positions of size 2×1. The electronic device records position (5,1) as empty and continues to search for empty positions, determining that position (5,2) is empty. At this point, empty positions (5,1) and (5,2) form consecutive empty positions of size 2×1, meaning that consecutive empty positions with the same size as the second interface element have been found. The electronic device enlarges the first interface element into a third interface element, moves the small card 801b to position {(5,1),(5,2)}, and then the electronic device can display as follows. Figure 8 Interface 802, shown in (b), displays a large folder 801a1 (the third interface element) at position {(3,3),(3,4),(4,3),(4,4)}, with a size of 2×2; and displays a small card 801b at position {(5,1),(5,2)} in interface 802, which is in a space that is being squeezed out.

[0140] See Figure 9 , Figure 9Interface 901 shown in (a) includes application component 901a, folder 901b, and icons 901c and 901d. Application component 901a is positioned at {(4,3),(4,4)} and has a size of 2×1; folder 901b is positioned at {(5,2),(5,3)} and has a size of 2×1; icon 901c is positioned at {(5,1)} and has a size of 1×1; icon 901d is positioned at {(5,4)} and has a size of 1×1. The user can drag the border of application component 901a (the first interface element) downwards, which will encroach on the space of folder 901b and icon 901d. The second interface element consists of folder 901b and icon 901d. The electronic device needs to find an empty space of size 2×1 and an empty space of size 1×1.

[0141] In response to the user's dragging of the border of application component 901a downwards, the electronic device first searches for empty space for folder 901b. The electronic device can search for empty space starting from position (4,3) (the first starting position) and proceed backwards. The electronic device can sequentially determine that position (4,4) is not empty, position (5,1) is not empty, position (5,2) is empty, position (5,3) is not empty, and position (5,4) is not empty. At this point, position (5,2) has a size of 1×1, so no consecutive empty space with the same size as the second interface element is found after the first starting position. Then, the electronic device can search for empty space from the top left corner of interface 901 (the second starting position) up to position (4,3). The electronic device can sequentially determine that position (1,1) is empty, position (1,2) is empty, and positions (1,1) and (1,2) form a consecutive empty space with a size of 2×1, thus finding a consecutive empty space with the same size as folder 901b. Then, the electronic device searches for an empty space for icon 901d. It sequentially determines that position (4,4) is not empty, position (5,1) is not empty, and position (5,2) is empty. Furthermore, the size of position (5,2) is the same as the size of icon 901d, thus finding an empty space (5,2) suitable for icon 901d. The electronic device can then display... Figure 9 The interface 902 shown in (b) has an enlarged application component 901a1 (the third interface element) with a size of 2×2 displayed at position {(4,3),(4,4),(5,3),(5,4)}. The folder 901b in the occupied space is displayed at position {(1,1),(1,2)}, and the icon 901d in the occupied space is displayed at position (5,2).

[0142] It should be noted that, in Figure 9In the illustrated embodiment, the first interface element is dragged and deformed, occupying part of the space in folder 901b, specifically space (5,3) within folder 901b, while leaving space (5,2) vacant. Therefore, space (5,2) can become a newly created empty space. When searching for target empty spaces for folder 901b and icon 901d, space (5,2) can be counted as an empty space.

[0143] See Figure 10 , Figure 10 Interface 1001 shown in (a) includes folder 1001a, card 1001b, card 1001c, and other interface elements. Folder 1001a is 2×1 in size and located at {(1,1),(1,2),(2,1),(2,2)}; card 1001b is 1×2 in size and located at {(1,3),(1,4)}; card 1001c is 1×1 in size and located at {(2,3),(2,4)}. The user can drag the border of folder 1001a (the first interface element) to the right, which will encroach on the space of card 1001b and card 1001c. The second interface element consists of card 1001b and card 1001c. The electronic device needs to find two empty spaces, each 2×1 in size. The electronic device can search from position (1,1) according to the aforementioned preset rules, finding a consecutive 2×1 empty space for card 1001b formed by positions (3,1) and (3,2); and finding a consecutive 2×1 empty space for card 1001c formed by positions (3,3) and (3,4). Furthermore, the electronic device can display... Figure 10 As shown in (b) of the diagram, interface 1002 displays an enlarged folder 1001a1 (the third interface element) with a size of 3×2 at positions {(1,1),(1,2),(1,3),(2,1),(2,2),(2,3)}. Card 1001b, occupying space, is displayed at positions {(3,1),(3,2)}, and card 1001c, occupying space, is displayed at positions {(3,3),(3,4)}. The user can continue to drag the border of folder 1001a1 to the right. At this point, the right side of folder 1001a1 is empty, without encroaching on the space of other interface elements. The electronic device can then display the enlarged folder again, with a size of 4×2, in all positions of the first and second rows.

[0144] See Figure 11 , Figure 11Interface 1101 shown in (a) includes folder 1101a, card 1101b, icon 1101c, and other interface elements. Folder 1101a is 2×1 in size and located at {(3,3),(3,4)}; card 1101b is 1×2 in size and located at {(4,3),(5,3)}; icon 1101c is 1×1 in size and located at (4,4). In interface 1101, positions (5,2) and (5,4) are two non-contiguous empty spaces. If the user drags down the border of folder 1101a (the first interface element), it will need to encroach on the positions of card 1101b and icon 1101c. The second interface element consists of card 1101b and icon 1101c. The electronic device needs to find an empty space of size 1×2 and an empty space of size 1×1. The electronic device starts searching for an empty space from position (3,3). Since interface 1101 only has two non-contiguous empty spaces at positions (5,2) and (5,4), which are different in size from card 1101b, it does not support moving card 1101b to an empty space. Therefore, no target empty space supporting the movement of the second interface element is found in interface 1101. In this case, the electronic device can output a prompt message, for example, the electronic device can display... Figure 11 The interface 1102 shown in (b) includes a prompt message 1102a, such as "Insufficient space remaining on the current page," which prompts the user that the current screen space does not meet the requirement for the first interface element to be enlarged. After seeing the prompt message, the user can abandon the operation or manually move the icon.

[0145] In another implementation, if the electronic device cannot find a continuous empty space of the same size as the second interface element according to the aforementioned preset rules, it can determine whether the number of remaining empty spaces on the first interface is the same as the number of grids occupied by the second interface element, based on the number of already recorded empty spaces. If the number of remaining empty spaces is the same as the number of grids occupied by the second interface element, then a target empty space supporting the movement of the second interface element is further determined.

[0146] The target empty space may include a first empty space. The first empty space and its adjacent positions constitute a continuous empty space with the same size as the second interface element. The fourth interface element is placed in the adjacent position of the first empty space. The electronic device can move the second interface element to the first empty space and its adjacent positions. In this case, it is equivalent to enlarging the first empty space and squeezing out the fourth interface element. The direction of enlargement is related to the size of the second interface element. Thus, the electronic device finds an empty space for the fourth interface element according to preset rules and moves the fourth interface element to another position. It should be noted that the other positions are other empty spaces in the target empty space and / or the empty spaces newly created after the second interface element is moved. If the fourth interface element still needs to squeeze out other interface elements when it is moved, the first interface element cannot be enlarged through the first operation. In this way, the requirement for the first interface element to be enlarged is met while minimizing the impact of the enlargement of the first interface element on other interface elements in the first interface.

[0147] See Figure 12 , Figure 12 Interface 1201 shown in (a) includes folder 1201a, card 1201b, icon 1201c, icon 1201d, and other interface elements. Folder 1201a has a size of 2×1 and is located at {(3,3),(3,4)}; card 1201b has a size of 1×2 and is located at {(4,3),(5,3)}; icon 1201c has a size of 1×1 and is located at (4,4); icon 1201d has a size of 1×1 and is located at (4,2). There are two empty spaces in interface 1201: empty space 1 is located at (5,2), and empty space 2 is located at (5,4).

[0148] The user can drag the border of folder 1101a (the first interface element) downwards, which will encroach on the positions of card 1201b and icon 1201c, and will also encroach on two grids, namely positions (4,3) and (4,4). In this case, the electronic device can determine that there are no consecutive empty spaces in interface 1201 with the same size as the second interface element, but the number of remaining empty spaces in interface 1201 is the same as the number of grids encroached on by the second interface element. Therefore, it can continue to search for target empty spaces that support the movement of the second interface element.

[0149] The electronic device first searches for a position for card 1201b, then for icon 1201c. When searching for a position for card 1201b, the electronic device starts from position (3,3) and checks from top to bottom and left to right to determine if there is a first empty space among the remaining empty spaces. In this example, it first determines whether empty space 1 is the first empty space that meets the conditions. The adjacent position to empty space 1 is icon 1201d (the fourth interface element). If card 1201b is moved to empty space 1, it needs to occupy the position (4,2) of icon 1201d. Under the preset conditions of folder 1201a becoming larger and card 1201b being moved to empty space 1 and its adjacent position, the electronic device searches for an empty space for icon 1201d from position (4,2). Since position (5,3) is vacated after card 1201b is moved, the electronic device can determine that position (5,3) is an empty space of the same size as icon 1201d; when moving icon 1201d to position (5,3), it does not need to occupy the position of other interface elements. Therefore, empty slot 1 is the first empty slot that meets the conditions. Card 1201b can be moved to empty slot 1 and its adjacent position, and icon 1201d can be moved to position (5,3). Then, the electronic device starts from position (3,3) to find a position for icon 1201c, and finally can move icon 1201c to position (5,4).

[0150] Therefore, electronic devices can display such as Figure 12 In the interface 1202 shown in (b), the enlarged folder 1201a1 (the third interface element) with a size of 2×2 is displayed at position {(3,3),(3,4),(4,3),(4,4)}; the card 1201b whose space is occupied is displayed at position {(4,2),(5,2)}; the icon 1201d whose space is occupied is displayed at position (5,3); and the icon 1201c whose space is occupied is displayed at position (5,4).

[0151] In addition to the methods described above, this application embodiment also provides a function to restore the original position of an interface element after it has been squeezed out. The method provided by this application embodiment may further include: after displaying the second interface and before exiting the first operation, the method further includes: detecting a second operation acting on a third interface element, the second operation being a rollback operation against the first operation; in response to the second operation, displaying a third interface, the third interface including a fifth interface element and a second interface element corresponding to the first interface element, the size of the fifth interface element being greater than or equal to the size of the first interface element and smaller than the size of the third interface element, and the position of the second interface element in the third interface being the same as the position of the second interface element in the first interface.

[0152] In other words, before exiting the drag-and-drop transformation, after enlarging the first interface element to a third interface element through the first operation, the user then uses a back operation to transform the third interface element back to the first interface element. In this way, the third interface element first occupies the position of the second interface element, which is then moved to the target empty space. Then, the space occupied by the third element is returned to the second interface element, which returns to its original position. If multiple drag-and-drop operations are performed consecutively, the user can perform multiple back operations, each returning the occupied space. Thus, if the user is not satisfied with the enlarged interface element after the first operation, they can perform a second operation, and the affected second interface element automatically returns to its original position. This avoids disrupting the interface layout after the user performs and then abandons the transformation, improving the user experience.

[0153] In practice, after detecting the first drag operation, the electronic device records the position of the occupied second interface element before and after it was occupied. Each subsequent user operation detected determines the type of user operation. The types of user operations include drag operations, back operations, and exit operations.

[0154] If a second drag operation is detected after the first one, the electronic device records the position of the occupied desktop element before and after it is occupied, in response to the second drag operation. For example, if desktop element 1's initial position (its position before being occupied) is position 1, after the first drag operation, desktop element 1 is occupied and moves to position 2 (its position after being occupied), the electronic device records the positions of desktop element 1 in the order {position 1, position 2}. After the second drag operation, desktop element 1 is moved to position 3, and the electronic device updates the position of desktop element 1 to {position 1, position 2, position 3}.

[0155] If a back action is detected after the first drag operation, in response to the back action, the electronic device moves the occupied desktop element from its post-occupation position back to its initial position based on the recorded positions of the occupied desktop element before and after it was occupied. For example, desktop element 1's initial position is position 1. After the first drag operation, desktop element 1 is occupied and moves from position 1 to position 2. Then, the user performs a back action, position 1 becomes available, and the electronic device moves desktop element 1 back from position 2 to position 1.

[0156] For example, desktop element 1 is initially located at position 1. After the first drag operation, desktop element 1 is pushed to position 2, and the electronic device records the positions of desktop element 1 sequentially as {position 1, position 2}. After the second drag operation, desktop element 1 is moved to position 3, and the electronic device updates its position to {position 1, position 2, position 3}. Then, if the user performs a back operation corresponding to the second drag operation, position 2 becomes available, and the electronic device moves desktop element 1 from position 3 back to position 2. Then, if the user performs another back operation corresponding to the first drag operation, position 1 becomes available, and the electronic device moves desktop element 1 from position 2 back to position 1.

[0157] If an exit operation is detected after the first drag operation, in response to this exit operation, the electronic device transforms the first interface element into a third interface element and clears the recorded position. The exit operation can be any operation other than drag and drop or back operations; for example, it could be clicking anywhere on the interface. The second interface displays the borders of the interface elements. After the exit operation, the electronic device does not display the borders of the interface elements. If the user then performs a back operation, the desktop element in the occupied position cannot return to its original location.

[0158] For example, see [link / reference] Figure 13A , Figure 13A The interface 1301 shown in (a) is the interface before the drag-and-drop operation. Interface 1301 includes a folder 1301a, a card 1301b, and an icon 1301c, and displays the border of folder 1301a. The positions of folder 1301a are {(3,3),(3,4)}, card 1301b is {(4,3),(5,3)}, and icon 1301c is (4,4). In response to the operation of dragging the border of folder 1301a downwards, the electronic device can display... Figure 13A The interface 1302 shown in (b) includes the enlarged folder 1301a1, card 1301b, and icon 1301c, and displays the border of folder 1301a1. The position of folder 1301a1 is {(3,3),(3,4),(4,3),(4,4)}, the position of card 1301b is {(4,1),(5,1)}, and the position of icon 1301c is (4,2).

[0159] Subsequently, in response to any other action triggered by the user, such as clicking on an empty area of ​​the desktop, the electronic device can display something like... Figure 13AThe interface 1303 shown in (c) includes a folder 1301a1, a card 1301b, and an icon 1301c. The border of 1301a1 is not displayed; that is, the user confirms the enlargement of folder 1301a1 into folder 1301a1 by triggering any other operation. Afterwards, in response to the user dragging the border of folder 1301a1 upwards, the electronic device can display as shown... Figure 13A The interface 1304 shown in (d) includes a folder 1301a, a card 1301b, and an icon 1301c. The position of folder 1301a is {(3,3),(3,4)}, the position of card 1301b is {(4,1),(5,1)}, and the position of icon 1301c is (4,2). That is to say, after folder 1301a1 is transformed into folder 1301a, the occupied positions (4,3) and (4,4) are freed up, but the positions of card 1301b and icon 1301c are the positions after the drag-and-drop transformation operation, and have not returned to their initial positions.

[0160] See Figure 13B , Figure 13B The interface 1301 shown in (a) is the interface before the drag-and-drop operation. Interface 1301 includes a folder 1301a, a card 1301b, and an icon 1301c, and displays the border of folder 1301a. The positions of folder 1301a are {(3,3),(3,4)}, card 1301b is {(4,3),(5,3)}, and icon 1301c is (4,4). In response to the operation of dragging the border of folder 1301a downwards, the electronic device can display... Figure 13B The interface 1302 shown in (b) includes the enlarged folder 1301a1, card 1301b, and icon 1301c, and displays the border of folder 1301a1. The position of folder 1301a1 is {(3,3),(3,4),(4,3),(4,4)}, the position of card 1301b is {(4,1),(5,1)}, and the position of icon 1301c is (4,2).

[0161] Subsequently, in response to the user dragging the border of folder 1301a1 upwards, the electronic device can display as follows: Figure 13BThe interface 1305 shown in (c) includes a folder 1301a2, a card 1301b, and an icon 1301c, and displays the border of 1301a2. The positions of folder 1301a2 are {(3,3),(3,4)}, card 1301b is {(4,3),(5,3)}, and icon 1301c is (4,4). The size of folder 1301a2 is greater than or equal to the size of folder 1301a and less than the size of folder 1301a1, meaning that folder 1301a2 is a form that is between folder 1301a and folder 1301a1. In other words, if the user does not trigger any other operations between multiple drag-and-drop operations, during the process of folder 1301a1 reverting back to folder 1301a, when folder 1301a1 shrinks and releases the occupied space but has not yet reverted back to folder 1301a, card 1301b and icon 1301c can return to their original positions. After folder 1301a1 reverts back to folder 1301a, the electronic device can display as follows: Figure 13B Interface 1306, shown in (d), is the same as interface 1301. Folder 1301a2 can be a fifth interface element.

[0162] Alternatively, during the process of folder 1301a1 transforming back into folder 1301a, the position of card 1301b and icon 1301c are in a state of moving from their occupied positions back to their initial positions. When folder 1301a1 transforms back into folder 1301a, the positions of card 1301b and icon 1301c return to their initial positions. This transformation process can be specifically determined based on the actual animation effect.

[0163] In another example, see Figure 14 , Figure 14 Interface 1401 shown in (a) includes icons 1401a, 1401b, 1401c, and 1401d, positioned at (4,3), (4,4), (5,3), and (5,4), respectively. Interface 1401 also displays the border of icon 1401a. In response to dragging the border of icon 1401a to the right, the electronic device can display... Figure 14 Interface 1402, shown in (b), includes icons 1401a1, 1401b, 1401c, and 1401d, located at {(4,3),(4,4)}, (5,1), (5,3), and (5,4) respectively. Interface 1402 also displays the border of icon 1401a1. In response to dragging the border of icon 1401a1 downwards, the electronic device can display... Figure 14Interface 1403, shown in (c), includes icons 1401a2, 1401b, 1401c, and 1401d, located at {(4,3),(4,4),(5,3),(5,4)}, (5,1), (5,2), and (1,1) respectively. Figure 14 (a) to (c) in the diagram show the process of performing two consecutive drag operations.

[0164] Interface 1403 also displays the border of icon 1401a2, and then, in response to the operation of dragging the border of icon 1401a2 upwards, the electronic device can display... Figure 14 Interface 1404, shown in (d), includes icons 1401a1, 1401b, 1401c, and 1401d, positioned at {(4,3),(4,4)}, (5,1), (5,3), and (5,4) respectively. This means that the user performed a back operation corresponding to the second drag operation; positions (5,3) and (5,4) were returned, and the interface elements (icons 1401c and 1401d) that had been squeezed out returned to positions (5,3) and (5,4). Interface 1404 also displays the border of icon 1401a1. Subsequently, in response to the operation of dragging the border of icon 1401a1 to the left, the electronic device can display... Figure 14 Interface 1405, shown in (e), includes icons 1401a, 1401b, 1401c, and 1401d, located at positions (4,3), (4,4), (5,3), and (5,4), respectively. This means that the user performed a back operation corresponding to the first drag operation; position (4,4) was returned, and the interface element (icon 1401a) that had been occupied returned to position (4,4).

[0165] From the above examples, it can be understood that the position of the third interface element in the second interface is the same as the position of the first interface element in the first interface. This can be understood as the third interface element and the first interface element occupying the same grid, or the position of the third interface element including the position of the first interface element, or the grid occupied by the first interface element being a part of the grid occupied by the third interface element. For example, if the position of the third interface element is {(4,3),(4,4)} and the position of the first interface element is (4,3), they occupy the same position (4,3).

[0166] The position of the second interface element in the second interface corresponds to the position of the target empty space in the first interface. This can be either that the second interface element and the target empty space are in the same coordinate system, or that the position of the second interface element includes the position of the target empty space.

[0167] In summary, in the display method provided by this application, if a second interface element is placed adjacent to a first interface element, after dragging the first interface element to enlarge it in place, the electronic device can automatically move the second interface element to an empty space on the current interface. In this way, regardless of whether there is an empty space adjacent to the first interface element, the first interface element can be enlarged through dragging, improving the user experience. Furthermore, it reduces the impact of enlarging the first interface element on other interface elements in the first interface, making the layout of the second interface as close as possible to the layout of the first interface, thus conforming to the user's original usage habits.

[0168] The display method provided in the embodiments of this application has been described above. The apparatus for performing the above method, provided in the embodiments of this application, will now be described.

[0169] Figure 15 This is a schematic diagram of a display device provided in an embodiment of this application. The display device may be an electronic device as described in this application embodiment, or a chip or chip system within an electronic device. Figure 15 As shown, the display device 1500 may include a display unit 1501 and a processing unit 1502. The display unit 1501 supports the display device 1500 in performing the aforementioned display steps. The processing unit 1502 supports the display device 1500 in performing the aforementioned processing steps.

[0170] In one implementation, the display device 1500 further includes a storage unit 1503. The storage unit 1503 and the processing unit 1502 are connected via a circuit. The storage unit 1503 may include one or more memories, which can be devices in one or more devices or circuits used for storing programs or data. The storage unit 1503 can exist independently and be connected to the processing unit 1502 via a communication bus. Alternatively, the storage unit 1503 can be integrated with the processing unit 1502.

[0171] Storage unit 1503 may store computer-executable instructions for methods in an electronic device, so that processing unit 1502 executes the methods in the above embodiments. Storage unit 1503 may be a register, cache, or random access memory (RAM), or it may be a read-only memory (ROM) or other types of static storage devices that can store static information and instructions.

[0172] Figure 16 This is a schematic diagram of a chip structure provided in an embodiment of this application. Figure 16As shown, chip 1600 includes one or more processors 1601, communication lines 1602 and communication interfaces 1603. Optionally, chip 1600 also includes memory 1604.

[0173] In some implementations, memory 1604 stores elements such as executable modules or data structures, or subsets thereof, or extended sets thereof.

[0174] The methods described in the embodiments of this application can be applied to, or implemented by, processor 1601. Processor 1601 may be an integrated circuit chip with signal processing capabilities. During implementation, each step of the above methods can be completed by integrated logic circuits in the hardware of processor 1601 or by instructions in software form. Processor 1601 may be a general-purpose processor (e.g., a microprocessor or conventional processor), a digital signal processor, an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gates, transistor logic devices, or discrete hardware components. Processor 1601 can implement or execute the methods, steps, and logic block diagrams disclosed in the embodiments of this application.

[0175] The steps of the method disclosed in the embodiments of this application can be directly implemented by a hardware decoding processor, or implemented by a combination of hardware and software modules in the decoding processor. The software modules can be located in mature storage media in the art, such as random access memory, read-only memory, programmable read-only memory, or electrically erasable programmable read-only memory (EEPROM). This storage medium is located in memory 1604, and processor 1601 reads information from memory 1604 and, in conjunction with its hardware, completes the steps of the above method.

[0176] The processor 1601, memory 1604 and communication interface 1603 can communicate with each other via communication line 1602.

[0177] In the above embodiments, the instructions stored in the memory for execution by the processor can be implemented in the form of a computer program product. This computer program product can be pre-written into the memory, or it can be downloaded and installed into the memory as software.

[0178] This application also provides a computer program product comprising one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the flow or function according to the embodiments of this application is generated. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, computer instructions may be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium may be any available medium that a computer can store or a data storage device such as a server or data center that integrates one or more available media. For example, available media may include magnetic media (e.g., floppy disks, hard disks, or magnetic tapes), optical media (e.g., digital versatile discs (DVDs)), or semiconductor media (e.g., solid-state drives (SSDs)).

[0179] This application provides an electronic device, which includes a processor and a memory. The memory stores a computer program, and the processor executes the computer program to perform the method described above.

[0180] This application provides a chip. The chip includes a processor, which is used to call a computer program in memory to execute the technical solutions in the above embodiments. Its implementation principle and technical effects are similar to those in the related embodiments described above, and will not be repeated here.

[0181] In the embodiments provided in this application, it should be understood that the disclosed devices / electronic devices and methods can be implemented in other ways. For example, the device / electronic device 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 couplings or direct couplings or communication connections may be through some interfaces; indirect couplings or communication connections between devices or units may be electrical, mechanical, or other forms. Additionally, the functional units in the various embodiments of this application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The integrated units described above can be implemented in hardware or as software functional units.

[0182] This application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the steps described in the various method embodiments above. The computer-readable storage medium stores a computer program or instructions. When executed by a processor, the computer program or instructions implement the methods described above. The methods described in the above embodiments can be implemented wholly or partially by software, hardware, firmware, or any combination thereof. If implemented in software, the functionality can be stored as one or more instructions or code on or transmitted over the computer-readable medium. The computer-readable medium can include computer storage media and communication media, and can also include any medium that can transfer a computer program from one place to another. The storage medium can be any target medium accessible by a computer.

[0183] As one possible design, computer-readable media may include compact disc read-only memory (CD-ROM), RAM, ROM, EEPROM, or other optical disc storage; computer-readable media may include disk storage or other disk storage devices. Furthermore, any connecting cable may also be appropriately referred to as computer-readable media. For example, if software is transmitted from a website, server, or other remote source using coaxial cable, fiber optic cable, twisted pair, DSL, or wireless technologies such as infrared, radio, and microwave, then coaxial cable, fiber optic cable, twisted pair, DSL, or wireless technologies such as infrared, radio, and microwave are included in the definition of media. As used herein, disks and optical discs include optical discs (CD), laser discs, optical discs, DVDs, floppy disks, and Blu-ray discs, where disks typically reproduce data magnetically, while optical discs optically reproduce data using lasers. Combinations of the above should also be included within the scope of computer-readable media.

[0184] This application describes embodiments with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processing unit of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processing unit of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations. Figure 1 a process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0185] In the foregoing description, specific details such as particular system architectures and techniques have been 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 can 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 to avoid unnecessary detail that could obscure the description of this application.

[0186] 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.

[0187] It should also be understood that, in the description of this application, unless otherwise stated, " / " means "or", for example, A / B can mean A or B; "and / or" in this document is merely a description of the relationship between related objects, referring to any combination and all possible combinations of one or more of the related listed items, and including these combinations, for example, A and / or B can mean: A alone, A and B together, and B alone.

[0188] As used in this specification and the appended claims, the term "if" can be interpreted as "when" or "upon" or "in response to determining" or "in response to detecting," depending on the context. Similarly, the phrase "if it is determined" or "if [described condition or event] is detected" can be interpreted as meaning "upon determination" or "in response to determining" or "upon detection of [described condition or event]" or "in response to detecting [described condition or event]," depending on the context.

[0189] References to "one embodiment" or "some embodiments" in this specification mean that a particular feature, structure, or characteristic described in conjunction with that embodiment is included in one or more embodiments of the present application. Thus, phrases such as "in one embodiment," "in some embodiments," "in other embodiments," and "in other embodiments" appearing in various places in this specification do not necessarily refer to the same embodiment, but rather mean "one or more but not all embodiments," unless otherwise specifically emphasized. The terms "including," "comprising," "having," and variations thereof all mean "including but not limited to," unless otherwise specifically emphasized.

[0190] The above-described embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the various embodiments of the present application, and should all be included in the scope of protection of the present application.

Claims

1. A display method, characterized in that: Applied to electronic equipment, the method comprises: Displaying a first interface, the first interface comprising a first interface element and a second interface element, the second interface element being adjacent to the first interface element in a first direction; A first operation is detected, where the first operation is used to drag the border of the first interface element in the first direction; In response to the first operation, searching the first interface for a target space that supports movement of the second interface element; If a target space supporting movement of the second interface element is found in the first interface, a second interface is displayed, wherein the second interface includes the second interface element and a third interface element, wherein the third interface element is obtained by performing the first operation on the first interface element, the size of the third interface element is larger than the size of the first interface element, the position of the third interface element in the second interface is the same as the position of the first interface element in the first interface, and the position of the second interface element in the second interface corresponds to the position of the target space in the first interface; Recording the position of the second interface element in the first interface and the position of the second interface element in the second interface; After displaying the second interface and before exiting the first operation, detecting a second operation acting on the third interface element, and determining a type of the second operation, where the type of operation includes a drag operation, a back operation, and an exit operation; When the second operation is a rollback operation for the first operation, in response to the second operation, displaying the third interface, wherein the third interface includes the first interface element and the second interface element; The second interface element is moved to an initial position according to the position of the second interface element in the first interface and the position of the second interface element in the second interface, and the position of the second interface element in the third interface is the same as the position of the second interface element in the first interface.

2. The method according to claim 1, characterized in that: The target vacancies include continuous vacancies having the same size as the second interface element, and the positions of the second interface element in the second interface are positions corresponding to the continuous vacancies.

3. The method according to claim 1, characterized in that The target vacancy includes a first vacancy, the size of the first vacancy is smaller than the size of the second interface element, a fourth interface element is placed at an adjacent position to the first vacancy, the position of the second interface element in the second interface is a position corresponding to the first vacancy and an adjacent position to the first vacancy, and the size of the first vacancy and an adjacent position to the first vacancy is the same as the size of the second interface element; The position of the fourth interface element in the second interface is other positions, and the other positions are other spaces in the target spaces and / or spaces newly added after the second interface element moves.

4. The method according to any one of claims 1 to 3, characterized in that The step of searching the first interface for a target space supporting movement of the second interface element includes: Starting from a first starting position of the first interface, the target space is searched in a preset order, wherein the first starting position is associated with the third interface element.

5. The method according to claim 4, characterized in that If the target vacancy does not exist after the first starting position, the method further includes: The target space is searched for in the preset order from a second starting position of the first interface to the first starting position, wherein the second starting position is a position before the first starting position.

6. The method according to claim 5, characterized in that The second starting position is the position of the upper left corner of the first interface.

7. The method according to claim 4, characterized in that The first starting position is the position corresponding to the upper left corner of the third interface element in the first interface.

8. The method according to claim 4, characterized in that Searching for the target vacancy according to the preset order includes: The target spaces are determined row by row from left to right.

9. The method according to any one of claims 1 to 3, characterized in that The method further comprises: When there is no target space in the first interface that supports the movement of the second interface element, a prompt message is output, where the prompt message is used to prompt the user that there is insufficient remaining space in the first interface.

10. An electronic device, characterized in that: include: one or more processors; one or more memories; The memory stores one or more programs, and when the one or more programs are executed by the processor, the electronic device executes the method according to any one of claims 1 to 9.

11. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores instructions, which, when executed on a computer, enable the computer to execute the method according to any one of claims 1 to 9.

12. A computer program product, characterized in that The invention comprises a computer program which, when being executed, causes a computer to execute the method according to any one of claims 1 to 9.

Images