Screen layout method and device and storage medium

Abstract

The invention provides a screen layout method and device and a storage medium. According to the method, after a user selects a target layout template, a mask layer is displayed on a user interface to cover an application program, meanwhile, the position and shape of the mask layer are adjusted according to the starting point position of the application program and the end point position of a template area in the target layout template, and a window of the application program is redrawn after adjustment is completed. Layout of multiple application programs can be rapidly achieved, and the convenience of multi-application layout of a user is improved.

Description

Technical Field

[0001] This application relates to the field of terminal devices, and more particularly to a screen layout method, device, and storage medium. Background Technology

[0002] With the continuous development of electronic device technology, smartphones, tablets, and other smart electronic devices have become indispensable products in people's daily lives, work, and entertainment. To enhance the user experience, smart electronic devices offer larger displays.

[0003] Larger displays have created a demand and scenario for users to multitask simultaneously, such as chatting while watching videos or shopping online. However, to achieve this, users need to start one task, then select another using the split-screen function, and manually adjust the size of each screen after enabling split-screen. In short, it's not possible to quickly arrange multiple tasks on the same screen. Summary of the Invention

[0004] This application provides a screen layout method, device, and storage medium, which aims to quickly lay out multiple applications on the display screen using a pre-set layout template in free screen mode, thereby improving the user experience.

[0005] In a first aspect, embodiments of this application provide a screen layout method for an electronic device. The method includes: receiving a first operation applied to a first interface; at a first moment, in response to the first operation, displaying a second interface, the second interface including a template selection area corresponding to the first operation displayed on the first interface, the template selection area including multiple layout templates, each layout template including multiple template areas, and parameters of each template area including its corresponding endpoint position; at a second moment, receiving a second operation applied to the second interface, the second operation being a layout template selection operation; in response to the second operation, obtaining a selected target layout template, and if the number of template areas of the target layout template is the same as the number of multiple applications running on the electronic device at the current moment, displaying a third interface, the third interface including multiple first overlays. Each of the multiple applications corresponds one-to-one, and each first mask is generated based on the starting position of its corresponding application. At the third moment, a fourth interface is displayed, which includes multiple second masks, each corresponding one-to-one with the multiple first masks. Each second mask is obtained by adjusting the position and shape of the first mask based on the starting position of its corresponding first mask and the ending position of a non-repeating template area in a target layout template. At the fourth moment, a fifth interface is displayed, which includes multiple applications, each displayed in its corresponding first display window. Each first display window is redrawn based on the ending position of its corresponding second mask. The second moment is later than the first moment, the third moment is later than the second moment, and the fourth moment is later than the third moment.

[0006] For example, the first interface can be understood as the user interface after entering the free screen mode, such as interface 30c, interface 40b, etc.

[0007] For example, the second interface can be understood as a user interface that displays a list of templates, such as... Figure 14 The template selection area can be... Figure 14 The area contained in pop-up window 50a-1. The target list contains multiple layout templates, and the number of template areas for each layout template includes, but is not limited to, 2, 3, and 4.

[0008] For example, the second operation can be understood as selecting the corresponding layout template in the template column.

[0009] For example, each template area in the layout template has an endpoint position, which is indicated by the bounds value of the focus position of that area.

[0010] For example, when the applications currently running on the electronic device are APP-1, APP-2, and APP-3, when the user selects layout template 50a-2, the number of applications is the same as the number of template areas of the layout template; when the user selects layout template 50a-5, the number of applications is less than the number of template areas of the layout template; and when the user selects layout template 50a-6, the number of applications is greater than the number of template areas of the layout template.

[0011] For example, each application generates a mask to cover it, and the first mask in the third interface can be generated based on the starting position of its corresponding application, for example... Figure 16 Interface 50b.

[0012] For example, the second mask layer in the fourth interface can be obtained by deforming and adjusting the position of the first mask layer, for example... Figure 17 The interface is 50c.

[0013] For example, after completing the layout, it is also necessary to redraw the window of the corresponding application at the location of each second mask layer to display the fifth interface, for example... Figure 18 The interface shown is 50d.

[0014] Therefore, in this embodiment of the application, when the user has entered the free screen mode and launched multiple applications, the user can select a quick layout from the template list to adjust the position and size of multiple applications with one click, which greatly improves the user experience.

[0015] According to the first aspect, the method further includes: displaying a sixth interface when the number of template regions in the target layout template is greater than the number of multiple applications, the sixth interface including multiple first overlays; displaying a seventh interface at a fifth moment, the seventh interface including multiple second overlays and at least one first mask, the first mask being generated based on the endpoint positions of template regions in the target layout template that fail to match the multiple applications; and displaying an eighth interface at a sixth moment, the eighth interface including the multiple applications and the first mask; wherein the fifth moment is later than the second moment, and the sixth moment is later than the fifth moment.

[0016] For example, when the applications currently running on the electronic device are APP-1, APP-2 and APP-3, and the user selects layout template 50a-5, the number of applications is less than the number of template areas of the layout template.

[0017] For example, the sixth interface is an interface that uses a mask to cover the application, such as... Figure 16Interface 50b.

[0018] For example, since the number of applications is less than the number of template areas in the layout template, after the first mask completes its deformation and position adjustment to the second mask, another mask needs to be generated to fill the blank area, which is then displayed as the seventh interface, for example. Figure 19 Interface 60a is shown.

[0019] For example, after the mask deformation and position adjustment are completed, each application needs to be redrawn to display the eighth interface, such as... Figure 20 The interface shown is 60b.

[0020] Therefore, in this embodiment of the application, when the number of template areas of the layout template selected by the user is greater than the number of currently launched applications, a blank mask is used to fill the template areas of the layout template for unmatched applications, thereby realizing a quick layout that can adjust the position and size of multiple applications with one click, greatly improving the user experience.

[0021] According to the first aspect, or any implementation of the first aspect above, the method further includes: when the number of template areas in the target layout template is less than the number of multiple applications, displaying a ninth interface, the ninth interface including at least one third mask and at least two screenshots, the third mask being generated based on the starting position of the target application, the target application being one or more of the multiple applications, and the screenshots being obtained from screenshots of the remaining at least two applications; at a seventh moment, displaying a tenth interface, the tenth interface including at least one fourth mask and at least one second mask, the fourth mask corresponding one-to-one with the third mask, the fourth mask being positioned by matching the starting position of its corresponding third mask and the ending position of a non-repeating template area in the target layout template. After shape adjustment, the second mask is generated from the endpoint position of the template area that failed to match the third mask layer, and the second mask displays all the interface screenshots; at the eighth moment, the eleventh interface is displayed, the eleventh interface includes the target application and the second mask, the target application is displayed in its corresponding second display window, the second display window is redrawn according to the endpoint position of its corresponding fourth mask; at the ninth moment, a third operation is received acting on the eleventh interface, the third operation is an interface screenshot selection operation; in response to the third operation, the selected application corresponding to the selected interface screenshot is obtained, and the selected application is redrawn according to the endpoint position of the second mask; wherein, the seventh moment is later than the second moment, the eighth moment is later than the seventh moment, and the ninth moment is later than the eighth moment.

[0022] For example, when the applications currently running on the electronic device are APP-1, APP-2 and APP-3, and the user selects layout template 50a-6, the number of applications is greater than the number of template areas of the layout template.

[0023] For example, the ninth interface is an interface for covering the target application with a mask and generating screenshots of the remaining applications, for example... Figure 23 The interface shown is 70a. When there are multiple target applications, you can refer to... Figure 16 The mask layer is generated and processed.

[0024] For example, the tenth interface is a user interface for deforming and adjusting the position of the mask, placing the screenshot into the corresponding mask, for example... Figure 24 The interface shown is 70b. When there are multiple target applications, you can refer to... Figure 17 The layer deformation method in the process is used to process it.

[0025] For example, the eleventh screen is a user screenshot that is redrawn at the overlay location, corresponding to the application window, for example... Figure 25 The interface shown is 70c.

[0026] For example, the third operation is the user clicking the screenshot and selecting the corresponding application as the application to be displayed, for example... Figure 25 Interface 70c is shown.

[0027] For example, after the user selects the application to be displayed, the electronic device redraws the window based on the endpoint of the mask, as shown below. Figure 26 The interface shown is 70d.

[0028] Therefore, in this embodiment of the application, when the number of template areas in the layout template selected by the user is less than the number of currently launched applications, the application determined by the user is displayed in the last template area, thereby realizing a quick layout that allows for one-click adjustment of the position and size of multiple applications, greatly improving the user experience.

[0029] According to the first aspect, or any implementation of the first aspect above, the template selection area displays different layout templates based on the current posture information of the electronic device, wherein the posture information includes landscape and portrait orientations.

[0030] For example, electronic devices can also detect the screen orientation using a gravity sensor, thereby displaying the corresponding layout template for landscape mode, such as... Figure 15 The template list shown in (1) is used to display the layout template corresponding to the portrait mode in portrait mode, for example... Figure 15 The template list shown in (2) is as follows.

[0031] According to the first aspect, or any implementation of the first aspect above, after displaying the third interface, the method further includes: displaying an application icon in each overlay, wherein the application icon is the icon of the application corresponding to each overlay.

[0032] For example, application icons can help users identify the application corresponding to each overlay. Therefore, displaying application icons can help users understand the entire layout process and improve the user experience, such as interfaces 50b, 50c, 60a, 70a, and 70b.

[0033] According to the first aspect, or any implementation of the first aspect above, after displaying the third interface, the method further includes: displaying a first animation effect, wherein the first animation effect is an animation effect that transitions from multiple first overlays to multiple second overlays.

[0034] For example, the first motion effect could be a motion effect in which the mask deforms and adjusts its position according to the starting and ending positions.

[0035] According to the first aspect, or any implementation of the first aspect above, the motion effect is the motion effect of each first layer deforming and transitioning to its corresponding second layer.

[0036] According to the first aspect, or any implementation of the first aspect above, after displaying the third interface, the method further includes: switching all the applications to run in the background, and removing the foreground window corresponding to each application in the second interface.

[0037] According to the first aspect, or any implementation of the first aspect above, after displaying the fifth interface, the method further includes: removing all of the second mask layer.

[0038] According to the first aspect, or any implementation of the first aspect above, before displaying the first interface, the method includes: displaying a main interface, the main interface including a taskbar display area, the taskbar display area including a control for entering free screen mode; receiving a fourth operation applied to the control for entering free screen mode; and displaying the first interface.

[0039] For example, the main interface is the interface displayed after the electronic device is started, including a desktop display area and a taskbar area. The desktop display area typically displays icons for multiple applications, and the taskbar area includes controls for entering free screen mode and icons for frequently used applications, such as... Figure 9 Interface 30a is shown.

[0040] According to the first aspect, or any implementation of the first aspect above, before displaying the first interface, the method further includes: displaying a second animation effect, wherein the second animation effect is an animation effect that transitions from the main interface to the first interface.

[0041] For example, the second motion effect could be Figure 10 The animation shows three overlapping rectangles moving back and forth.

[0042] Secondly, embodiments of this application provide an electronic device. The electronic device includes: a memory and a processor, the memory and the processor being coupled; the memory stores program instructions, which, when executed by the processor, cause the electronic device to perform the methods of the first aspect or any possible implementation thereof.

[0043] Thirdly, embodiments of this application provide a computer-readable medium for storing a computer program, the computer program including instructions for performing the method in the first aspect or any possible implementation of the first aspect.

[0044] Fourthly, embodiments of this application provide a computer program including instructions for performing the method in the first aspect or any possible implementation thereof.

[0045] Fifthly, embodiments of this application provide a chip including a processing circuit and transceiver pins. The transceiver pins and the processing circuit communicate with each other via an internal connection path. The processing circuit executes the method in the first aspect or any possible implementation of the first aspect to control the receiving pin to receive signals and to control the transmitting pin to transmit signals. Attached Figure Description

[0046] Figure 1 A schematic diagram of a user interface is shown as an example;

[0047] Figure 2 This is an example of a user interface diagram for enabling split-screen mode;

[0048] Figure 3 This is an example of a split-screen taskbar user interface diagram.

[0049] Figure 4 This is an example of a user interface diagram in split-screen mode;

[0050] Figure 5 This is an example illustration of three applications displayed side-by-side in split-screen mode;

[0051] Figure 6 This is an example of a multi-application window display in free screen mode;

[0052] Figure 7 This is a schematic diagram of the hardware structure of an electronic device as an example.

[0053] Figure 8 This is a schematic diagram of the software structure of an electronic device, as exemplarily shown.

[0054] Figure 9 This is an illustrative diagram of the user interface for entering the free screen mode;

[0055] Figure 10 This is an illustrative diagram of the animation effect for entering a free screen;

[0056] Figure 11 This is an example of a user interface diagram in free screen mode;

[0057] Figure 12 This is an example illustration of a user opening an application in free screen mode.

[0058] Figure 13 This is an example illustration of a user opening multiple applications in free screen mode.

[0059] Figure 14 This is an example of a template list pop-up display in free screen mode;

[0060] Figure 15 This is an example of a layout template shown in the template list;

[0061] Figure 16 A schematic diagram illustrating the application layout preparation in the free screen mode;

[0062] Figure 17 This is an example illustration of the application layout process in free screen mode;

[0063] Figure 18 This is an example of an application layout completed in free screen mode;

[0064] Figure 19 This is an example illustration of the application layout process in free screen mode;

[0065] Figure 20 This is an example of an application layout completed in free screen mode;

[0066] Figure 21 This is an example illustration of the application launch interaction in free screen mode;

[0067] Figure 22 This is an example of an application layout completed in free screen mode;

[0068] Figure 23 A schematic diagram illustrating the application layout preparation in the free screen mode;

[0069] Figure 24 This is an example illustration of the application layout process in free screen mode;

[0070] Figure 25 This is an example of an application layout interaction diagram in free screen mode;

[0071] Figure 26 This is an example of an application layout completed in free screen mode;

[0072] Figure 27 This is a schematic diagram illustrating a screen layout method as an example;

[0073] Figure 28 This is an example of an application layout interaction diagram in free screen mode;

[0074] Figure 29 This is an example illustration of the application layout process in free screen mode;

[0075] Figure 30 This is an example of an application layout interaction diagram in free screen mode;

[0076] Figure 31 This is an example illustration of the application layout process in free screen mode;

[0077] Figure 32 This is an example illustration of the application layout process in free screen mode;

[0078] Figure 33 This is an example of an application layout interaction diagram in free screen mode;

[0079] Figure 34 This is an example of an application layout completed in free screen mode;

[0080] Figure 35 This is a schematic diagram illustrating another screen layout method as an example. Detailed Implementation

[0081] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0082] In this article, the term "and / or" is merely a description of the relationship between related objects, indicating that there can be three relationships. For example, A and / or B can represent three situations: A exists alone, A and B exist simultaneously, and B exists alone.

[0083] The terms "first" and "second," etc., used in the specification and claims of this application are used to distinguish different objects, not to describe a specific order of objects. For example, "first target object" and "second target object," etc., are used to distinguish different target objects, not to describe a specific order of target objects.

[0084] In the embodiments of this application, the terms "exemplary" or "for example" are used to indicate that something is an example, illustration, or description. Any embodiment or design that is described as "exemplary" or "for example" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or design. Specifically, the use of the terms "exemplary" or "for example" is intended to present the relevant concepts in a specific manner.

[0085] In the description of the embodiments in this application, unless otherwise stated, "multiple" means two or more. For example, multiple processing units means two or more processing units; multiple systems means two or more systems.

[0086] In the description of the embodiments in this application, unless otherwise stated, only one user interface can be displayed at a time. For example, if interface 10a is displayed, interface 20a will not be displayed on the current screen. Conversely, if interface 20a is displayed, interface 10a will not be displayed on the current screen.

[0087] To facilitate understanding, the relevant terms involved in the embodiments of this application will be introduced below.

[0088] (1) Free screen

[0089] The free screen is a display method proposed in the embodiments of this application for displaying multiple applications on the same screen.

[0090] In this display mode, when a user taps an application on the screen to open its interface, the application opens and is displayed in window mode by default. Users can select a window and move or resize the application, thus customizing the display area for each application.

[0091] (2) Template List

[0092] The template list is a template list for quick layout of multiple application windows on the same screen, provided in the embodiments of this application.

[0093] The template list contains multiple pre-set layout templates. When a user opens multiple applications in free screen mode, clicking on any layout template in the template list will allow the electronic device to quickly arrange multiple applications using that layout template, thus achieving the effect of one-click layout of multiple applications on the same screen.

[0094] It should be noted that during rapid layout, the layout order of multiple applications can be based on the order in which the user launches the applications, the order in which the user uses the applications historically, or the reverse order in which the user operates.

[0095] Furthermore, it should be noted that each layout template includes at least two template areas, and the order of these areas can be set from left to right or from top to bottom. For example, when the layout template consists of four template areas stacked in pairs, the top-left template area is the first template area, and the bottom-right template area is the last template area. In a quick layout with four applications, and the layout order is based on the order in which the applications are launched, the first launched application will be placed in the first template area (top-left area), and the last launched application will be placed in the last template area (bottom-right area).

[0096] It should be understood that the above description is merely an example provided to better understand the technical solution of this embodiment, and is not intended to be the sole limitation of this embodiment. In practical applications, adjusting the display layout of multiple applications using preset layout templates can be considered as the template list layout method described in this application embodiment. Whether the user needs to select or click during the process based on this layout method is not limited in this application embodiment.

[0097] With the continuous development of electronic device technology, smartphones, tablets, and other smart electronic devices have become indispensable products in people's daily lives, work, and entertainment. To enhance the user experience, smart electronic devices offer larger displays. In some usage scenarios, users utilize the split-screen function of electronic devices to simultaneously display multiple applications. For ease of understanding, the following explanation of split-screen functionality is provided with accompanying illustrations.

[0098] See Figures 1 to 4 This example illustrates the specific process by which a user uses the split-screen function to display two applications on the same screen.

[0099] Figure 1The interface 10a shown is the user interface displayed by the electronic device (such as a tablet or mobile phone) after the user turns it on. Interface 10a displays one or more display areas. For example, there is a home screen display area 10a-1 and a taskbar display area 10a-2. Areas 10a-1 and 10a-2 each display one or more icons or controls. For example, area 10a-2 displays the icon 10a-3 for application APP-1, the icon 10a-4 for application APP-2, and the icon 10a-5 for application APP-3.

[0100] It should be noted that, in some embodiments of this application, the main screen display area 10a-1 displays by default icons corresponding to all or some of the applications installed on the electronic device. These icons are used to launch the corresponding applications after the user clicks them. After the user clicks an application icon in area 10a-1, the electronic device launches the corresponding application and displays its corresponding application interface in area 10a-1.

[0101] Understandably, in some embodiments of this application, the icons in region 10a-1 may include all application icons in region 10a-2. The icons in region 10a-2 may be arranged according to the user's usage frequency and recent usage time. Alternatively, the icons in region 10a-2 may be fixed in place by the system and not updated according to the user's usage frequency or time; this application does not impose any limitations on this arrangement.

[0102] For example, in some embodiments of this application, a user can click icon 10a-3 to open application APP-1. Application APP-1 can be an instant messaging application, a video application, or a shopping application. Specifically, when a user clicks icon 10a-3, the electronic device responds to the user's operation by displaying... Figure 2 The interface shown is 10b.

[0103] Figure 2 The interface 10b shown is the user interface displayed by the electronic device after the user clicks icon 10a-3. By default, the electronic device displays the content of application APP-1 in full-screen mode within area 10b-1. If the user needs to open other applications to display both applications on the same screen, they need to slide their finger along the left or right side of the screen towards the center to lift the floating ball 10b-2. After the floating ball 10b-2 reaches the designated position, the electronic device will display the taskbar. Figure 3 The interface shown is 10c.

[0104] Figure 3The interface 10c shown is the interface where the user pulls up the floating ball to bring up the taskbar. This interface includes a taskbar 10c-1. The taskbar 10c-1 displays multiple application icons, such as the icon 10c-2 for APP-2.

[0105] It should be noted that the application icons in the taskbar 10c-1 can include all application icons installed on the electronic device. When it cannot display all application icons, it can also display them by scrolling. Alternatively, it can display application icons that are frequently used on the electronic device. Or it can display icons of applications that the user has recently used. This application embodiment does not limit this.

[0106] For example, in some embodiments of this application, a user can click icon 10c-2 to simultaneously open application APP-2 and display it. Figure 4 The interface shown is 10d. The APP-2 application can be an instant messaging application, a video application, or a shopping application.

[0107] Figure 4 The interface 10d shown is the user interface displayed by the electronic device after the user clicks icon 10c-2. The screen of the electronic device is divided into two display areas: area 10d-1 and area 10d-2. Area 10d-1 displays the content of application APP-1, and area 10d-2 displays the content of application APP-2. The electronic device also provides controls 10d-3 and 10d-4 for the user to adjust the size of the display areas of areas 10d-1 and 10d-2. The user can adjust the size of the display areas of areas 10d-1 and 10d-2 by pressing and sliding controls 10d-3 or 10d-4 up or down.

[0108] This allows two applications to be displayed on the same screen using the split-screen function of electronic devices.

[0109] However, in some use cases, users may open a third application and want all three applications to be displayed on the same screen. For example, while chatting, a user might also want to watch a show and shop online. In this case, the user can... Figure 2 The method shown calls up Figure 3 After accessing the taskbar 10c-1, clicking the APP-3 app icon in the taskbar 10c-1 aims to display the APP-3 app on the screen simultaneously. However, the split-screen function provided by electronic devices only supports two screens at the same time, so it is not possible to use the split-screen function to display the APP-3 app.

[0110] In some possible implementations, electronic devices may also provide a floating window mode, displaying the APP-3 application as a floating window in the above scenario, showing something like... Figure 5 The interface shown is 10e.

[0111] Figure 5 The interface 10e shown is the user interface displayed by the electronic device after the user opens three applications. Among them, the screen of the electronic device displays APP-1 and APP-2 applications through the split-screen function, while APP-3 application is displayed through the floating window 10e-1.

[0112] Clearly, while the floating window mode fulfills the requirement of displaying three applications on the same screen, the floating window 10e-1 obscures parts of the content of APP-1 and APP-2, undoubtedly degrading the user experience. Furthermore, without understanding how to access the taskbar 10c-1, users will find it difficult to smoothly implement the split-screen function, significantly diminishing the user experience.

[0113] Therefore, this application embodiment also provides a free screen mode. Specifically, in this application embodiment, after the electronic device enters the free screen mode, when the user clicks any application icon in the free screen, the electronic device will display it in a window, as shown below. Figure 6 Interface 20a is shown.

[0114] The electronic device can enter the free screen mode by opening the settings interface of the electronic device, by clicking the shortcut button provided by the taskbar of the electronic device, or by operating the physical button on the side of the electronic device. This application embodiment does not limit this.

[0115] Figure 6 The interface 20a shown is the user interface displayed by the electronic device when the user enters free screen mode and simultaneously opens the display interfaces of three applications. Specifically, when the user clicks icons 20a-1, 20a-2, and 20a-3 in the taskbar, the electronic device responds to the operation by displaying the APP-1 application, APP-2 application, and APP-3 application in window form, respectively, with corresponding windows 20a-4, 20a-5, and 20a-4.

[0116] See also Figure 6 ,exist Figure 6 It is evident that the windows of the three applications are arranged haphazardly, with some overlapping and obscuring each other. Users will need to manually adjust the size and position of each window for a better user experience.

[0117] Therefore, in this free screen mode, users still cannot quickly arrange multiple applications on the same screen, making it difficult to effectively improve the user experience.

[0118] In view of this, this application also provides a screen layout method. By setting a shortcut button for free screen mode in the taskbar of the electronic device, the user can quickly enter free screen mode by clicking the shortcut button, thereby allowing the user to conveniently open multiple applications in window mode. At the same time, a template list control is also provided in the taskbar in free screen mode. The user can select any layout template in the template list to realize one-click layout of multiple window applications on the same screen, which greatly improves the convenience of layout in scenarios where multiple applications are displayed on the same screen.

[0119] For example, based on the screen layout method provided in the embodiments of this application, in some embodiments, for example... Figure 1 In the scenario shown (which can be understood as a multi-application simultaneous screen scenario), in order to enable free layout of the windows corresponding to the three tasks, APP-1, APP-2 and APP-3, a global entry point for entering the free screen mode is provided.

[0120] Understandably, in this embodiment of the application, a user can first open multiple applications and then select a layout template to quickly lay out the multiple applications; or a user can first select a layout template and then open multiple applications, so that the multiple applications are directly displayed in the corresponding area of ​​the layout template.

[0121] Optionally, in some embodiments of this application, the taskbar in the electronic device can actively avoid the background and enter a hidden state after entering free screen mode. The user can trigger the display of the taskbar by pulling up.

[0122] Optionally, in some other embodiments of this application, after the taskbar in the electronic device enters free screen mode, it can also be hidden by the user clicking on a blank area outside the taskbar area on the screen. The user can also display the taskbar by clicking on a blank area outside the taskbar area.

[0123] Optionally, in some embodiments of this application, the free screen mode shortcut button may be set in the taskbar, or it may be set in the system settings interface, or it may be bound to a physical button on the side of the electronic device. This application does not limit this.

[0124] Optionally, in some embodiments of this application, the layout templates in the template list may be pre-installed in the electronic device before leaving the factory, or they may be updated periodically by a cloud server. This application does not limit this.

[0125] Optionally, in some embodiments of this application, users can interact with the electronic device by directly clicking the screen of the electronic device, or by clicking a touch device such as a touchpad, or by operating other devices set to interact with the electronic device. This application does not limit this.

[0126] It should be understood that the above description is merely an example provided to better understand the technical solution of this embodiment, and is not intended as the only limitation on this embodiment.

[0127] Furthermore, in the embodiments of this application, the electronic device may be an electronic device with a large screen, such as a desktop computer, laptop computer, smart TV, or smartphone with a large screen, etc., which will not be listed here. This application does not impose any restrictions on the specific type of electronic device.

[0128] Depending on the screen size, the number of windows that an electronic device can support displaying simultaneously varies, meaning the types of shortcut targets in the template list also differ. For example, a tablet computer can support up to four windows, meaning it can display four applications simultaneously.

[0129] Therefore, by pre-setting different layout templates in different electronic devices, the screen layout method provided in this application embodiment can be better applied to different electronic devices and meet the user's multi-application needs for different electronic devices.

[0130] Regarding the various electronic devices mentioned above, their hardware structures can be as follows: Figure 7 As shown. See also Figure 7 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 (including: speaker 170A, receiver 170B, microphone 170C, headphone jack 170D, etc.), sensor module 180, button 190, motor 191, indicator 192, camera 193, display screen 194, and subscriber identification module (SIM) card interface 195, etc.

[0131] The processor 110 may include one or more processing units, such as an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, a smart sensor hub, etc., which will not be listed here and this application does not limit them.

[0132] For example, in some implementations, the different processing units can be independent devices. That is, each processing unit can be viewed as a processor. In other implementations, the different processing units can be integrated into one or more processors.

[0133] In addition, the processor 110 may also include one or more interfaces. These 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., which will not be listed here, and this application does not impose any limitations on them.

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

[0135] The external memory 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 memory interface 120 to perform data storage.

[0136] The internal memory 121 can be used to store computer executable program code, which includes instructions. The processor 110 executes various functional applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 121. The 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, etc. The data storage area may store data created or needed during the use of the electronic device 100. Furthermore, the 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.

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

[0138] The button 190 may include a power button, volume buttons, etc. The button 190 may be a mechanical button or a touch button. The electronic device 100 can receive button input and generate signal inputs related to user settings and function control of the electronic device 100.

[0139] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. In some implementations, the electronic device 100 may include one or N display screens 194, where N is a positive integer greater than 1.

[0140] The sensor module 180 may include pressure sensors, gyroscope sensors, barometric pressure sensors, magnetic sensors, accelerometers, distance sensors, proximity sensors, fingerprint sensors, temperature sensors, touch sensors, ambient light sensors, bone conduction sensors, etc., which will not be listed here, and this application does not limit them.

[0141] This concludes the introduction to the hardware structure of electronic device 100. It should be understood that... Figure 7 The electronic device 100 shown is merely an example. In a specific implementation, the electronic device 100 may have more or fewer components than shown in the figure, may combine two or more components, or may have different component configurations. Figure 7The various components shown can be implemented in hardware, software, or a combination of hardware and software, including one or more signal processing and / or application-specific integrated circuits.

[0142] Regarding the aforementioned electronic devices, their software structures can be as follows: Figure 8 As shown. Before describing the software structure of the electronic device 100, we will first describe the architecture that the software system of the electronic device 100 can adopt.

[0143] Specifically, in practical applications, the software system of electronic device 100 can adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture.

[0144] Furthermore, it is understood that the software systems used by mainstream electronic devices currently include, but are not limited to, Windows, Android, and iOS systems. For ease of explanation, this application embodiment uses the layered architecture of the Android system as an example to illustrate the software structure of the electronic device 100.

[0145] Furthermore, the screen layout schemes provided in the embodiments of this application are also applicable to other systems in specific implementations.

[0146] See Figure 8 The diagram illustrates the software architecture of the electronic device 100. The layered architecture divides the software into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. In some implementations, the Android system is divided into four layers, from top to bottom: the application layer, the application framework layer (which can be understood as the system service framework), the Android runtime and system libraries (i.e., the native framework and runtime environment, also known as the Native layer), and the kernel layer.

[0147] The application layer can include a series of application packages. The application framework layer provides application programming interfaces (APIs) and programming frameworks for the applications in the application layer. In some implementations, these APIs and frameworks can be described as functions. The native layer provides some native services and commonly used system libraries. The kernel layer is the operating system's kernel layer, which includes various hardware drivers.

[0148] See also Figure 8 For example, in some implementations, the application layer of an electronic device may include application packages such as settings, APP-1, APP-2, APP-3, and APP-4 as described in the above embodiments.

[0149] See also Figure 8 For example, the application framework layer may include a window manager, a content provider, a view system, a phone manager, a resource manager, etc., which will not be listed here, and this application does not limit them.

[0150] See also Figure 8 For example, the Android Runtime in the Native layer is responsible for the scheduling and management of the Android system, and may include core libraries and virtual machines.

[0151] The core library consists of two parts: one part contains the functionalities that Java calls, and the other part is the Android core library. 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.

[0152] See also Figure 8 For example, the system libraries in the Native layer may include multiple functional modules. Examples include: surface manager, media libraries, 3D graphics processing libraries (e.g., OpenGL ES), 2D graphics engines (e.g., SGL), etc.

[0153] The Surface Manager manages the display subsystem and provides 2D and 3D layer blending for multiple applications. 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. The 3D Graphics Processing Library implements 3D graphics drawing, image rendering, compositing, and layer processing.

[0154] In addition, it should be noted that the 2D graphics engine mentioned above is a 2D drawing engine.

[0155] See also Figure 8 For example, the kernel layer may include a display driver, a camera driver, a power management driver, a sensor driver, etc. For example, a sensor driver can be used to output detection signals from a sensor (such as a touch sensor) to the view system, so that the view system responds to the detection signals and displays the corresponding application interface.

[0156] This concludes the introduction to the software architecture of electronic device 100. It is understandable that... Figure 8The layers in the illustrated software structure and the components contained in each layer 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 layers than illustrated, and each layer may include more or fewer components; this application does not impose any limitations.

[0157] To facilitate understanding of the screen layout method in the embodiments of this application, the following embodiments use... Figure 7 The hardware structure shown and Figure 8 The electronic device with the software structure shown is a tablet computer, and the screen layout scheme provided in the embodiments of this application will be specifically described with reference to the accompanying drawings.

[0158] See Figure 9 , Figure 9 An interface 30a is shown, in which a global entry point for the FreeScreen is set in the taskbar. This interface 30a includes a desktop display area and a taskbar area. The desktop display area displays icons for all / some of the applications installed on the tablet by default. The taskbar area displays the FreeScreen entry point 30a-1 (which can also be understood as the FreeScreen application), frequently used applications, and recently used applications.

[0159] Optionally, the taskbar area mentioned above can be fixed at the bottom of the desktop display area in this interface 30a, and will change according to the switching between landscape and portrait modes of the tablet computer.

[0160] Optionally, the aforementioned free screen entry 30a-1 includes a task icon, which instructs the user to click on the free screen entry 30a-1. Furthermore, after long-pressing the task icon, a pop-up window will appear displaying a description of the free screen entry's functions.

[0161] Optionally, the task icon for the aforementioned free screen entry can be three overlapping rectangular box images.

[0162] Understandably, after the user clicks the FreeScreen entry 30a-1 mentioned above, the tablet will switch its current default display mode to FreeScreen display mode. Once in FreeScreen display mode, all applications launched by the user will open and be displayed in windowed mode.

[0163] For example, the location of the aforementioned free screen entry 30a-1 includes, but is not limited to, being set in the taskbar area, and may also include other areas. For instance, it could be set in the taskbar that slides out from the left or right side of the tablet (e.g.,...). Figure 3 The taskbar 10c-1 in the tablet computer; the physical button on the side of the tablet computer (triggered by long press / short press); and the control center interface that pops up when pulled down at the top of the tablet computer are all included. This application embodiment does not limit these features.

[0164] For example, when a user clicks the Free Screen entry 30a-1, the tablet computer responds to the operation by switching the tablet computer's current display mode to Free Screen mode.

[0165] Optionally, during the switch to free screen mode, to improve the user experience, a mask can be placed on interface 30a to cover it. Simultaneously, three rectangles that scale outwards and partially overlap can be placed in the center of the mask to simulate the display mode switching effect, making the user interface more vivid and interesting. For example... Figure 10 The interface 30b shown is a mask 30b-1 set on the original interface 30a to cover it. At the same time, a motion effect display area 30b-2 is set in the center of the mask, and the switching motion effect is displayed in the motion effect display area 30b-2.

[0166] Optionally, the switching animation displayed in the aforementioned animation display area 30b-2 can be a corresponding animation built based on the task icon of the aforementioned free screen entry, thereby reminding the user that the display mode is being switched.

[0167] For example, after completing the free screen mode switch, the tablet removes the overlay and the switching animation on the overlay, displaying as shown below. Figure 11 Interface 30c is shown in the figure.

[0168] Figure 11 The interface 30c shown is the user interface displayed after the tablet computer completes the free screen mode switch. This interface 30c includes a desktop display area and a taskbar area 30c-1. The desktop display area includes all applications installed on the tablet computer, while the taskbar area 30c-1 displays a template list control 30c-2, an exit free screen control 30c-3, and frequently used and recently used applications.

[0169] For example, after the user clicks to exit the FreeScreen control 30c-3, the tablet computer responds to the operation, exits FreeScreen mode, enters the default display mode, and displays as shown below. Figure 9 The interface shown is 30a.

[0170] For example, the template list control 30c-2 is used to trigger a pop-up template list after the user clicks, which displays multiple layout templates preset in the tablet's storage.

[0171] In some embodiments of this application, users can simultaneously open multiple applications in free screen mode, displaying them on the screen at the same time. During the process of opening multiple applications, the user will click on the icons of the applications sequentially to open them.

[0172] For example, the user first clicks the APP-1 application icon 30c-4 in the taskbar of interface 30c (or it can be an icon in the desktop display area). The tablet responds to this operation and launches the APP-1 application in window form, displaying as shown below. Figure 12 Interface 40a is shown.

[0173] Figure 12 The user interface 40a shown illustrates a user opening multiple applications in free screen mode. This interface 40a includes a taskbar display area and a desktop display area 40a-7. The taskbar display area displays icons for multiple applications, including icon 40a-1 for application APP-2 and icon 40a-2 for application APP-3; the desktop display area 40a-7 displays a window 40a-3. Window 40a-3 includes a top operation bar 40a-4, an application display area 40a-5, and a bottom operation bar 40a-6.

[0174] For example, the top operation bar 40a-4 of window 40a-3 displays zoom controls, minimize controls, position / size adjustment controls, and window close controls; the application display area 40a-5 displays the application interface of application APP-1; and the bottom operation bar 40a-6 displays position / size adjustment controls.

[0175] Optionally, the desktop display area 40a-7 may also include an opaque overlay, which is used to cover the desktop display area 40a-7 (the content displayed in the desktop display area 40a-7 before covering can be found in [reference]). Figure 11 The desktop display area in the 30c interface is designed to avoid displaying too much content on the desktop, which would distract the user and reduce the user experience.

[0176] Optionally, the display position and size of the aforementioned window 40a-3 can be calculated by the tablet computer based on its screen size. Typically, the tablet computer displays three complete windows on the desktop by default, expanding sequentially from left to right according to the order of clicks. After the user launches more than three applications, the windows of later launched applications will be superimposed on these three complete windows. Simultaneously, the tablet computer can also limit the number of applications that can be launched and run simultaneously based on its performance, preventing lag and overheating caused by too many applications running concurrently.

[0177] Optionally, the size of the window corresponding to each application can be generated according to a fixed system preset value, or it can be set according to the window size when the application last exited in free screen mode.

[0178] After the user clicks the APP-1 application icon to launch the APP-1 application, the user will also click icons 40a-1 and 40a-2 on interface 40a in sequence. The tablet computer responds to this operation, launching the corresponding applications APP-2 and APP-3 respectively, and presenting them in window form upon launch, displaying as shown below. Figure 13 Interface 40b is shown.

[0179] Figure 13 A user interface 40b is shown that allows a user to launch multiple applications simultaneously. The desktop display area of ​​this interface 40b simultaneously displays the windows corresponding to APP-1, APP-2 (window 40b-1), and APP-3 (window 40b-2).

[0180] Understandably, although interface 40b supports the simultaneous display of three applications (APP-1, APP-2, and APP-3), gaps are clearly visible between the applications, indicating that the entire screen display area is not being fully utilized. Furthermore, since the three applications have the same window size, the utilization of the display area varies depending on the type of application launched by the user (e.g., video, chat, and shopping applications), resulting in wasted display space.

[0181] For example, when the application type of APP-1 is video, the video content may only be displayed in the middle area of ​​its corresponding window; when the application type of APP-2 is chat, the user only needs to know the current information sent by the other party, and does not need to display multiple historical messages in window 40b-1, so the display area of ​​window 40b-1 may be wasted.

[0182] In some embodiments of this application, users need to adjust the position and size of the three application windows to obtain a better multi-application simultaneous display experience. Specifically, users can also click on the template list 40b-3 in the taskbar of interface 40b to quickly arrange the three applications using the layout templates in the template list. After the user clicks on template list 40b-3, the tablet computer displays as follows: Figure 14 Interface 50a is shown.

[0183] Figure 14 The user interface 50a shown is displayed after the user clicks on the template list. Interface 50a includes a desktop display area and a taskbar display area. The desktop display area includes windows for multiple applications and a pop-up window 50a-1 corresponding to the template list. The taskbar display area includes icons for multiple applications.

[0184] For example, window 50a-1 includes a window name, a function description, and multiple layout templates. The window name is "Quick Layout," the function description is "Click the following icons to quickly layout desktop windows," and the layout templates include six preset layout templates. Each layout template includes multiple template areas and the endpoint position of each template area (i.e., the bounds value of the diagonal position of each template area, where the bounds value is the absolute value relative to the top-left corner of the screen).

[0185] Optionally, window 50a-1 can also be a semi-transparent window.

[0186] Understandably, the window 50a-1 mentioned above may contain more or fewer layout templates, and when the number of layout templates exceeds the maximum number that can be displayed in the window, they may also be displayed in the form of a drop-down list.

[0187] Optionally, the layout templates in the above template list can also display different layout templates depending on the current screen state of the tablet (landscape or portrait). For example, Figure 15 Area 50a-3 in (1) shows several layout templates in landscape mode; Figure 15 Area 50a-4 in (2) shows several layout templates in portrait mode.

[0188] Optionally, each template area in the above layout template is arranged sequentially from left to right and from top to bottom.

[0189] See also Figure 14 In some embodiments of this application, by clicking on layout template 50a-2 in the template list, the above-mentioned APP-1, APP-2, and APP-3 applications are quickly laid out. Specifically, after the user clicks on layout template 50a-2, the tablet computer obtains the endpoint position of each template area in layout template 50a-2, and the starting position of each window in the desktop display area (i.e., the bounds value of the diagonal position of each window), and quickly lays out the windows in the desktop display area based on the starting position of each window and its corresponding endpoint position.

[0190] For details, please refer to [link / reference]. Figure 14 After the user clicks on layout template 50a-2, the tablet computer obtains the starting position of each window in the desktop display area and generates a corresponding mask based on this starting position. Each mask is used to cover the window corresponding to the application. Simultaneously, it obtains the icon of the application corresponding to each window and places the icon in the center of the mask to identify the application corresponding to that mask, displaying as shown below. Figure 16 The interface shown is 50b.

[0191] Figure 16 The user interface 50b shows the layer generated after the user clicks on the layout template. This interface 50b includes a desktop display area and a taskbar display area. The desktop display area shows three layers: layer 50b-1, layer 50b-2, and layer 50b-3. Each layer has an icon in the center: icon 50b-4, icon 50b-5, and icon 50b-6.

[0192] contrast Figure 13 As shown in interface 40b, layer 50b-1 is used to cover the window of application APP-1 based on the starting position of application APP-1, and icon 50b-4 is the icon of application APP-1; layer 50b-2 is used to cover the window of application APP-2 based on the starting position of application APP-2, and icon 50b-5 is the icon of application APP-2; layer 50b-3 is used to cover the window of application APP-3 based on the starting position of application APP-3, and icon 50b-6 is the icon of application APP-3.

[0193] Optionally, after the windows corresponding to APP-1, APP-2 and APP-3 in interface 40b are covered by their respective overlays, the tablet computer can also hide them, that is, their corresponding windows are not displayed in the desktop display area.

[0194] Optionally, the taskbar in interface 50b is hidden when the user clicks on the layout template and their finger leaves the screen, triggering a lift-up event. Simultaneously, the taskbar can be brought back up when the user swipes inward along the bottom edge of the screen. In this embodiment, the example of the taskbar not being hidden is described.

[0195] After all the masks are generated in interface 50b, the tablet computer deforms each mask from its corresponding starting position, transforming it to the ending position of the corresponding template area in the selected layout template.

[0196] Optionally, the above deformation process can also be an animation playback process processed by a motion effects engine. The tablet computer inputs the starting position of each mask and the ending position of the template area into the motion effects engine, so that the motion effects engine outputs an animation, which is then played in the interface 50b.

[0197] After the deformation ends or the animation finishes playing, the tablet displays the deformed mask, such as... Figure 17 The interface shown is 50c.

[0198] Figure 17The user interface 50c of the deformed mask is shown. This interface includes a desktop display area and a taskbar display area. The desktop display area includes mask 50c-1, mask 50c-2, and mask 50c-3.

[0199] contrast Figure 14 The layout template 50a-2 selected by the user is completely consistent with the layout of the transformed interface 50c.

[0200] Understandably, at this point, the foreground windows of APP-1, APP-2, and APP-3 have been hidden by the tablet, and the three applications are running in the background. Icons 1, 2, and 3 in interface 50c correspond to the icons of the three applications, respectively.

[0201] After the deformation is complete, the tablet computer obtains the endpoint position of each mask and redraws the windows of the three applications running in the background based on these endpoint positions. This ensures that the window of each application is placed at its corresponding mask position. Simultaneously, the mask and icons in the desktop display area are removed, displaying the screen as shown below. Figure 18 The interface shown is 50d.

[0202] Understandably, before the window is drawn and the mask is removed, the user can still only see the mask and icon in the desktop display area, thus giving each application time to load / refresh the interface. The mask and icon are removed after each application's interface is ready.

[0203] Optionally, before redrawing the window for each application, the tablet can also obtain the user's current login account and currently accessed page for each application, and reload the corresponding application based on the current login account and currently accessed page to improve the user experience.

[0204] Figure 18 The user interface 50d after the quick layout is shown. In interface 50d, the layout of APP-1, APP-2, and APP-3 applications has been switched to the layout that the user sees in the background. Figure 14 The layout template 50a-2 is selected in interface 50a.

[0205] Therefore, in this embodiment of the application, when the user has entered the free screen mode and launched multiple applications, the user can select a quick layout from the template list to adjust the position and size of multiple applications with one click, which greatly improves the user experience.

[0206] In some embodiments of this application, in scenarios where multiple applications are displayed on the same screen, the number of template areas in the selected layout template may be greater than the number of currently launched applications.

[0207] For example, see [link to previous article] Figure 14 The interface shown is 50a. The user currently has APP-1, APP-2, and APP-3 applications running. When the user selects layout template 50a-5, the number of template areas (4) in layout template 50a-5 is greater than the number of running applications (3). At this time, the tablet computer obtains the starting position of each window in the desktop display area and generates a corresponding mask based on that starting position. Each mask is used to cover the window corresponding to the application. Simultaneously, the icon of the application corresponding to each window is obtained and placed in the center of the mask to identify the application corresponding to that mask, as shown below. Figure 16 The interface shown is 50b.

[0208] After all the masks are generated in interface 50b, the tablet computer deforms each mask from its corresponding starting position, transforming it to the ending position of the corresponding template area in the selected layout template.

[0209] For example, since the number of template areas is greater than the number of applications, the tablet associates the mask in interface 50b with the template areas of layout templates 50a-5 according to the order in which the applications are opened and the order of the template areas from left to right and from top to bottom. After the association is completed, each mask is deformed, and the deformed mask is displayed as shown. Figure 19 Interface 60a is shown.

[0210] Figure 19 The user interface 60a after the mask deformation is shown. This interface 60a includes a desktop display area and a taskbar display area. The desktop display area includes mask 60a-1, mask 60a-2, mask 60a-3, and a template area 60a-4.

[0211] Understandably, since there are currently 3 applications running and 4 template areas in the layout template, there is no corresponding application icon in the last template area 60a-4 of the layout template.

[0212] Optionally, template area 60a-4 may include a mask to indicate that no application is currently displayed in the area, and may also be used to indicate that applications launched by the user will be displayed in the area.

[0213] After the deformation is complete, the tablet computer obtains the endpoint position of each mask and redraws the windows of the three background applications based on these endpoint positions. This ensures that the window of each application is placed at its corresponding mask position, while simultaneously removing its corresponding mask and icon, displaying as shown below. Figure 20 The interface shown is 60b.

[0214] Figure 20 The user interface 60b after the application windows have been redrawn is shown. This interface 60b includes a desktop display area and a taskbar area. The desktop display area shows the windows of the three applications currently open by the user, as well as a blank template area 60b-1.

[0215] contrast Figure 14 In interface 50a, the layout template 50a-5 selected by the user and the currently launched application are displayed. In interface 60b, the currently launched application is the same as that in interface 50a, and the layout of interface 60b is the same as that in layout template 50a-5.

[0216] After completing the layout of the current multiple applications, the user will launch another application and want to place it in the blank template area 60b-1.

[0217] Optionally, users can click the application icon in the taskbar to quickly launch an application. The tablet will then set the window position of the newly launched application to the blank template area 60b-1, thus displaying the application in the blank template area 60b-1.

[0218] Alternatively, users can click on the blank template area 60b-1, or click on the "More apps" icon 60b-2 in the taskbar, to make the tablet display currently available applications.

[0219] For example, when a user clicks icon 60b-2, a pop-up window appears on the tablet displaying a list of currently launchable applications, such as... Figure 21 The interface shown is 60c.

[0220] Figure 60c shows a user interface 60c in which a pop-up window appears when a user launches more applications. In this interface 60c, a pop-up window 60c-1 is displayed in the desktop display area. The pop-up window 60c-1 displays a list of applications that the user can launch at present. The list of applications includes icons for the clock application, calendar application, gallery application, and APP-4 application, etc.

[0221] Optionally, the application list in the floating window 60c-1 may also include the icons of launched applications, such as the icons of APP-1, APP-2, and APP-3. When the user clicks the icon of one of the launched applications again, the application will be launched again as an application clone and a new window will be opened.

[0222] For example, after a user clicks the icon 60c-2 of application APP-4 in the list of launchable applications mentioned above, the tablet displays as follows: Figure 22 The interface shown is 60d.

[0223] Specifically, after the user clicks icon 60c-2, the tablet computer responds to the operation, obtains the endpoint position of the blank template area 60b-1, and uses this endpoint position to draw the window of the APP-4 application when the APP-4 application starts, so that the APP-4 application generates a drawing window at the position of the blank template area 60b-1 and displays the interface 60d.

[0224] Figure 22 The user interface 60d is shown after the user launches more applications. After the blank template area 60b-1 of the APP-4 application is drawn, a window like 60d-1 is displayed.

[0225] Therefore, in this embodiment of the application, when the number of template areas in the layout template selected by the user is greater than the number of currently launched applications, the applications launched by the user are placed in the blank template area, thereby realizing a quick layout that can adjust the position and size of multiple applications with one click, which greatly improves the user experience.

[0226] In some embodiments of this application, in scenarios where multiple applications are displayed on the same screen, the number of template areas in the selected layout template may be less than the number of currently launched applications.

[0227] For example, see [link to previous article] Figure 14 The interface shown is 50a. The user currently has APP-1, APP-2, and APP-3 applications running. When the user selects layout template 50a-6, the number of template areas (2) in layout template 50a-6 is less than the number of running applications (3). At this time, the tablet can only determine which application (APP-1) will be displayed in the first template area; it cannot determine which application (APP-2 or APP-3) will be displayed in the second template area. Therefore, the tablet obtains the starting position and icon of application APP-1, generates a mask based on these coordinates, and places the icon in the center of the mask. It also takes screenshots of the windows of applications APP-2 and APP-3, displaying them as shown below. Figure 23 Interface 70a is shown.

[0228] Figure 23 A user interface 70a for generating overlays and screenshots on a tablet computer is shown. In interface 70a, the desktop display area displays overlay 70a-1, window screenshot 70a-2, and window screenshot 70a-3.

[0229] Understandably, when overlay 70a-1, window screenshot 70a-2, and window screenshot 70a-3 are displayed, the windows corresponding to APP-1, APP-2, and APP-3 are hidden by the tablet computer and switched to run in the background.

[0230] Optionally, window screenshots 70a-2 and 70a-3 may be the last frame before the tablet screenshot is displayed.

[0231] Alternatively, if users do not need to distinguish between screenshots and overlays, window screenshots 70a-2 and 70a-3 can also be displayed using an overlay with an application icon.

[0232] After the mask and screenshots are generated, the tablet computer obtains the endpoint position of each template area in the layout template 50a-6, and deforms the mask 70a-1 based on the starting position of the APP-1 application and its corresponding endpoint position (the first template area). Simultaneously, a mask is generated based on the endpoint position of the second template area, and window screenshots 70a-2 and 70a-3 are placed as optional controls within this mask, displaying as shown... Figure 24 The interface shown is 70b.

[0233] Figure 24 The user interface 70b after the mask deformation is shown. In this interface 70b, the desktop display area includes mask 70b-1 and mask 70b-2. Window screenshots 70a-2 and 70a-3 are placed within mask 70b-2.

[0234] Optionally, before placing the window screenshots 70a-2 and 70a-3 into the mask 70b-2, they can be scaled according to the endpoint position of the mask 70b-2 (i.e., the endpoint position of the second template area in the layout template).

[0235] After the mask completes its deformation, the tablet computer obtains the endpoint position of the mask in the desktop display area and redraws the corresponding application window based on this endpoint position. This ensures that the window of application APP-1 is set at the mask position, while simultaneously removing its corresponding mask and icon, displaying as shown below. Figure 25 The interface shown is 70c.

[0236] Figure 25 The user interface 70c after the APP-1 application has been laid out is shown. In this interface 70c, the APP-1 application is displayed according to the layout template, but the APP-2 and APP-3 applications are still displayed as window screenshots and optional controls in the masked area. At this time, the user needs to click on optional control 70c-1 or optional control 70c-2 to determine which application is displayed in the masked area.

[0237] For example, when a user clicks on optional control 70c-1, the APP-2 application is identified as the application displayed in the masked area. In response to this action, the tablet computer obtains the starting position of optional control 70c-1 and generates a mask and icon based on that starting position (see...). Figure 23 The middle mask layer (70a-1) is used to obtain the endpoint position of the mask area. Based on the start and end positions, the mask layer is deformed. After the deformation is completed, the window of the APP-2 application is redrawn so that the window of the APP-2 application is set at the position of the mask layer. At the same time, its corresponding mask layer and icon are removed, and the display is as shown. Figure 26 The interface shown is 70d.

[0238] Figure 26 The completed user interface 70d is shown. In this interface 70d, the second template area of ​​the layout template is displayed as the APP-2 application selected by the user.

[0239] Therefore, in this embodiment of the application, when the number of template areas in the layout template selected by the user is less than the number of currently launched applications, the application determined by the user is displayed in the last template area, thereby realizing a quick layout that allows for one-click adjustment of the position and size of multiple applications, greatly improving the user experience.

[0240] To better understand the layout process of multiple applications using the screen layout method provided in this application, the following embodiments still use a tablet computer as an example to illustrate the layout process of multiple applications displayed on the same screen.

[0241] See Figure 27 , Figure 27 The screen layout process for this application embodiment includes:

[0242] Step S101: Click the Free Screen button in the taskbar.

[0243] For example, the aforementioned free screen button can be Figure 9 The free screen entry 30a-1 is shown in the taskbar area.

[0244] Optionally, the location of the aforementioned free screen entry 30a-1 may include, but is not limited to, being set in the taskbar area, and may also include other areas. For example, it may be set in the taskbar that slides out from the left or right side of the tablet computer (such as...). Figure 3 The taskbar 10c-1 in the tablet computer; the physical button on the side of the tablet computer (triggered by long press / short press); and the control center interface that pops up when pulled down at the top of the tablet computer are all included. This application embodiment does not limit these features.

[0245] Understandably, this free-screen button / entry point is rendered by the system-level user interface (SystemUI). When the user clicks this button, it triggers the SystemUI to enter free-screen mode.

[0246] Step S102: Enable Free Screen Mode.

[0247] Understandably, after the user clicks the aforementioned FreeScreen button, the tablet will enter FreeScreen mode. During the process of entering FreeScreen mode, a process animation can also be displayed, such as... Figure 10 The process animation shown in the image. And after entering free screen mode, the following is displayed: Figure 11 The interface shown is 30c.

[0248] For example, the interface 30c includes a desktop display area and a taskbar area 30c-1. The desktop display area includes all applications installed on the tablet computer, and the taskbar area 30c-1 displays a template list control 30c-2, an exit free screen control 30c-3, and frequently used applications and recently used applications.

[0249] Understandably, the template list control 30c-2 and the exit free screen control 30c-3 in the taskbar area of ​​this interface can be displayed in the taskbar area after SystemUI has completed rendering.

[0250] Step S103: Click on the template list in the taskbar.

[0251] Optionally, before clicking the template list in the taskbar, the user can launch multiple applications that they wish to display simultaneously. The process for enabling this can be found in [link to relevant documentation]. Figures 11 to 13 .

[0252] Step S104: A template list will pop up.

[0253] Specifically, after the user clicks on the template list in the taskbar, the tablet will display a pop-up window 50a-1, the content of which can be found in [reference needed]. Figure 15 .

[0254] Optionally, the tablet computer can also display different layout templates in the template list based on the user's posture information.

[0255] Step S105: Click on the target template in the template list.

[0256] For example, users can... Figure 14 In the pop-up box 50a-1 of the interface 50a shown, select different layout templates as the target template, such as layout template 50a-2, layout template 50a-5 or layout template 50a-6.

[0257] Step S106: Calculate the endpoint position of each region in the target template.

[0258] Understandably, the aforementioned template list may be pre-installed in the tablet's storage, containing the endpoint position of each layout template, i.e., the bounds value of the diagonal position of each template area. The bounds value is the absolute value relative to the top-left corner (0) of the screen. Since mobile terminals have different screen sizes, relative values ​​can also be set, allowing the tablet to calculate the endpoint position based on the relative value.

[0259] Step 107: Obtain the application name, application icon, and starting position of the application window of the currently launched application.

[0260] Understandably, the application name mentioned above can be a unique ID for the application. The application icon mentioned above is used to place on the subsequently generated overlay to identify its corresponding application; an illustration can be found here. Figure 16 Icons 50b-4, 50b-4, and 50b-4 are shown in the image. The starting position of the application window is used to generate the mask, and the ending position in the target template is used to deform the mask or generate deformation effects.

[0261] Step S108: Generate a mask layer for each application, and use the mask layer to cover the application according to the starting position of each application.

[0262] For example, the user interface after being covered is displayed as follows: Figure 16 , Figure 19 and Figure 23 The user interface shown.

[0263] Step S109: Based on the starting position of each application and the ending position of each region, apply animation effects to each mask layer, while hiding the layer of each application.

[0264] Step S110: Encapsulate the endpoint of each application and pass it to Systemserver.

[0265] In step S111, Systemserver parses the endpoint position of each application and updates it to the storage space; it notifies each application to redraw so that the application can complete the window redraw at its corresponding endpoint position.

[0266] Specifically, after each mask layer completes its deformation, the application needs to be redrawn and displayed. Therefore, the system server will also notify the background application to redraw based on the aforementioned endpoint position.

[0267] In step S112, Systemserver sends parameters such as the start position, end position, layer, and layer operation of each application to SystemUI.

[0268] Specifically, Systemserver sends the start and end positions, layers, and layer operations (display) of each application to SystemUI. These layers can be the interface layers that each application has redrawn.

[0269] In step S113, SystemUI displays each application in the template area of ​​the target template based on the above parameters.

[0270] Specifically, SystemUI displays various applications in the template area of ​​the target template based on the above instructions and operations, as shown in the example below. Figure 18 , Figure 20 and Figure 26 The user interface shown.

[0271] Therefore, in this embodiment of the application, when the user has entered the free screen mode and launched multiple applications, the user can select a quick layout from the template list to adjust the position and size of multiple applications with one click, which greatly improves the user experience.

[0272] In some embodiments of this application, when a user quickly lays out multiple applications using the screen layout method provided in this application, they may first select a layout template and then launch the multiple applications that need to be displayed on the same screen sequentially. This application embodiment still uses the user... Figure 9 Enter in the manner shown Figure 11 The free screen mode shown is used as an example for explanation.

[0273] For example, see [link to previous article] Figure 11 When a user clicks the template list control 30c-2, the tablet computer responds by displaying a template list pop-up window, showing the following: Figure 28 The interface shown is 80a.

[0274] Figure 28 The user interface 80a is shown, in which the user selects a layout template before launching an application. This interface 80a includes a desktop display area, a taskbar area, and a template list. The desktop display area and the taskbar area each display icons for applications that can be launched.

[0275] Specifically, when a user clicks on layout template 80a-1 in the template list, the tablet responds by generating a mask to cover the desktop display area. Simultaneously, it generates masks based on the endpoint positions of each template area within layout template 80a-1, including masks 80b-1, 80b-2, and 80b-3. Then, the user clicks on icons 80b-4, 80b-5, and 80b-6 in the taskbar to launch applications APP-1, APP-2, and APP-3, finally displaying the following... Figure 18 The interface shown is 50d.

[0276] Therefore, in this embodiment of the application, when the user enters the free screen mode, the user first selects a layout template to generate a corresponding mask, and then places the applications launched by the user into the corresponding positions of each mask in order. This achieves a quick layout that allows for one-click adjustment of the position and size of multiple applications, greatly improving the user experience.

[0277] To provide a better interactive experience, this application embodiment also provides another screen layout scheme. After the electronic device enters the free screen mode, after the user selects a layout template, it takes screenshots of multiple applications launched by the user, and generates multiple masks corresponding to the layout template (each mask corresponds one-to-one with the template area in the layout template). The screenshots of multiple applications are then used to generate optional controls, which are placed in the first mask. When the user clicks on any optional control in the mask, the corresponding application is redrawn and displayed at that mask position. This enables quick layout of multiple window applications on the same screen, greatly improving the convenience of layout for users in scenarios where multiple applications are displayed on the same screen.

[0278] In some embodiments of this application, in scenarios where multiple applications are displayed on the same screen, the number of template areas in the selected layout template may be equal to the number of currently launched applications.

[0279] For example, see [link to previous article] Figure 14 After the user selects layout template 50a-2, the tablet takes screenshots of applications APP-1, APP-2, and APP-3 respectively. Based on the multiple screenshots, it generates optional controls and multiple masks corresponding to layout template 50a-2, and places all the optional controls into the first mask, displaying them as shown. Figure 30 Interface 90a is shown.

[0280] Figure 30The user interface 90a is shown after an application screenshot is placed under a mask. This interface 90a includes masks 90a-1, 90a-2, and 90a-3. Optional controls corresponding to applications APP-1, APP-2, and APP-3 are placed within mask 90a-1. When a user clicks on an optional control corresponding to application APP-1, the tablet responds by generating a mask at the corresponding location in mask 90a-1 and moving the optional controls corresponding to applications APP-2 and APP-3 to mask 90a-2, displaying as shown below. Figure 31 The interface shown is 90b.

[0281] Figure 31 The user interface 90b is shown after the user selects an optional control. In this interface 90b, the optional controls corresponding to the APP-2 and APP-3 applications are moved to the mask 90a-2, and the positions corresponding to the mask 90a-1 are covered by the mask 90b-1.

[0282] Optionally, an icon corresponding to the APP-1 application can also be placed in the overlay 90b-1 to identify the application displayed in this area as the APP-1 application.

[0283] After the mask is generated, the tablet computer notifies the APP-1 application to redraw based on the endpoint position of the mask, so that the window of the APP-1 application is displayed at the endpoint position.

[0284] Furthermore, when a user clicks on the optional control corresponding to the APP-2 application within mask 90a-2, the tablet generates a mask layer corresponding to the APP-2 application based on the endpoint position of mask 90a-2, and simultaneously places the optional control corresponding to the APP-3 application into mask 90a-3. Since the optional control corresponding to the APP-3 application is the last optional control, the tablet directly generates the mask layer corresponding to the APP-3 application based on the endpoint position of mask 90a-3.

[0285] After the mask is generated, the tablet computer, based on the endpoint position of the mask, notifies APP-2 and APP-3 to redraw, ensuring that APP-2 and APP-3 are displayed at their corresponding mask positions. Simultaneously, all masks are removed, resulting in the display as shown below. Figure 18 The interface shown is 50d, which enables quick layout of multiple applications on the same screen.

[0286] Therefore, in this embodiment of the application, after the user selects a layout template, multiple overlays corresponding to the layout template are generated, and the application displayed at each overlay position is confirmed after interaction with the user, thereby enhancing the user's sense of interaction in the layout process and improving the convenience of multi-application layout on the same screen.

[0287] In some embodiments of this application, in scenarios where multiple applications are displayed on the same screen, the number of template areas in the selected layout template may be greater than the number of currently launched applications.

[0288] For example, see [link to previous article] Figure 14 The interface shown is 50a. The user currently has APP-1, APP-2, and APP-3 applications running. When the user selects layout template 50a-5, the number of template areas (4) in layout template 50a-5 is greater than the number of running applications (3). After the user clicks on layout template 50a-5, the tablet takes screenshots of APP-1, APP-2, and APP-3 applications respectively. Based on the multiple screenshots, it generates selectable controls and multiple masks corresponding to layout template 50a-5, placing all selectable controls into the first mask. See the illustration for details. Figure 30 Interface 90a is shown.

[0289] For example, after the user selects the application corresponding to each mask in sequence, the tablet first generates a mask for that mask, and then redraws the application based on the endpoint of the mask, as shown below. Figure 33 Interface 100a is shown.

[0290] Optionally, the process of applying redrawing and display can be found in [reference needed]. Figures 30 to 32 The process of displaying the APP-1 application shown is not described in detail in this embodiment of the application.

[0291] Figure 33 The user interface 100a after the layout is completed is shown. In this interface 100a, multiple mask positions corresponding to layout templates 50a-5 display applications APP-1, APP-2, and APP-3, respectively. A control for launching more applications is displayed in the last mask 100a-1 of layout templates 50a-5. When the user clicks this control, the tablet responds by displaying... Figure 21 The interface shown is 60c. And after the user selects a program to launch, it displays as follows: Figure 22 The interface shown is 60d.

[0292] Therefore, in this embodiment of the application, when the number of template areas in the layout template selected by the user is greater than the number of currently launched applications, the applications launched by the user are placed in the blank template area, thereby realizing a quick layout that can adjust the position and size of multiple applications with one click, which greatly improves the user experience.

[0293] In some embodiments of this application, in scenarios where multiple applications are displayed on the same screen, the number of template areas in the selected layout template may be less than the number of currently launched applications.

[0294] For example, see [link to previous article] Figure 14 The interface shown is 50a. The user currently has APP-1, APP-2, and APP-3 applications running. When the user selects layout template 50a-6, the number of template areas (2) in layout template 50a-6 is less than the number of running applications (3). After the user clicks on layout template 50a-6, the tablet takes screenshots of APP-1, APP-2, and APP-3 applications respectively. Based on the multiple screenshots, it generates selectable controls and multiple masks corresponding to layout template 50a-6, placing all selectable controls into the first mask. See the illustration for details. Figure 30 Interface 90a is shown.

[0295] For example, after the user selects the application corresponding to each mask in sequence, the tablet first generates a mask for that mask, and then redraws the application based on the endpoint of the mask, as shown below. Figure 34 The interface shown is 110a.

[0296] Optionally, the process of applying redrawing and display can be found in [reference needed]. Figures 30 to 32 The process of displaying the APP-1 application shown is not described in detail in this embodiment of the application.

[0297] Figure 34 The user interface 110a after the layout is completed is shown. In this interface 110a, a floating ball icon 110a-1 is displayed. Because the number of template areas in the layout template 50a-6 selected by the user is less than the number of applications, after the user selects an application displayed in the last template area, the tablet switches the remaining applications to the background, while simultaneously displaying icon 110a-1. After the user clicks the floating ball icon, the tablet displays the background applications in a window.

[0298] Therefore, when the number of template areas in the layout template selected by the user is less than the number of currently launched applications, applications that cannot be displayed in the foreground are switched to the background and a floating ball icon is provided for quick recall. This enables quick layout of multiple applications with one click to adjust their position and size, greatly improving the user experience.

[0299] In addition, it should be noted that in the above user interface, users can end the current shortcut layout by clicking on any blank area of ​​the desktop display area, thereby displaying each application in the form of a window.

[0300] To better understand the layout process of multiple applications using the screen layout method provided in this application, the following embodiments still use a tablet computer as an example to illustrate the layout process of multiple applications displayed on the same screen.

[0301] See Figure 35 , Figure 35 The screen layout process for this application embodiment includes:

[0302] Step S201: The user clicks the Free Screen button in the taskbar.

[0303] Step S202: Enable Free Screen Mode.

[0304] Step S203: Click the template list in the taskbar.

[0305] Step S204: A template list will pop up.

[0306] Step S205: The user clicks on the target template in the template list.

[0307] Step S206: Calculate the endpoint position of each region in the target template.

[0308] Step S207: Obtain the application name, application icon, and starting position of the application window of the launched application.

[0309] Step S208: Generate a mask for each template area corresponding to the target template, take a screenshot of the launched application, generate optional controls based on the screenshot, and place all optional controls corresponding to the screenshot into the first template area.

[0310] In step S209, the user selects the application to be displayed in the current template area.

[0311] Step S210: Encapsulate the endpoint position of the currently selected application (i.e., the endpoint position of the current template area) and pass it to Systemserver.

[0312] Step S211: Obtain the endpoint location, update it to the storage space, and notify the application to redraw.

[0313] In step S212, Systemserver sends parameters such as the start position, end position, layer, and layer operation of each application to SystemUI.

[0314] Step S213: Display the application in the current template area of ​​the desktop display area until the layout is completed.

[0315] Therefore, in this embodiment of the application, when the user has entered the free screen mode and launched multiple applications, the user can select a quick layout from the template list to adjust the position and size of multiple applications with one click, which greatly improves the user experience.

[0316] Furthermore, it is understood that, in order to achieve the aforementioned functions, the electronic device includes hardware and / or software modules corresponding to the execution of each function. Based on the algorithmic steps of the various examples described in conjunction with the embodiments disclosed herein, this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed in a hardware-driven or software-driven manner depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application in conjunction with the embodiments, but such implementation should not be considered beyond the scope of this application.

[0317] Furthermore, it should be noted that in practical application scenarios, the screen layout methods provided in the above embodiments, implemented by electronic devices, can also be executed by a chip system included in the electronic device. This chip system may include a processor. The chip system can be coupled to a memory, enabling it to call computer programs stored in the memory during runtime to implement the steps executed by the electronic device. The processor in the chip system can be an application processor or a non-application processor.

[0318] In addition, this application embodiment also provides a computer-readable storage medium storing computer instructions. When the computer instructions are executed on an electronic device, the electronic device performs the above-mentioned related method steps to implement the screen layout method in the above embodiment.

[0319] In addition, this application also provides a computer program product that, when run on an electronic device, causes the electronic device to perform the above-mentioned related steps to implement the screen layout method in the above embodiments.

[0320] In addition, embodiments of this application also provide a chip (which may also be a component or module), which may include one or more processing circuits and one or more transceiver pins; wherein the transceiver pins and the processing circuits communicate with each other through internal connection paths, and the processing circuits execute the above-mentioned related method steps to implement the screen layout method in the above embodiments, so as to control the receiving pins to receive signals and control the transmitting pins to transmit signals.

[0321] Furthermore, as can be seen from the above description, the electronic devices, computer-readable storage media, computer program products, or chips provided in the embodiments of this application are all used to execute the corresponding methods provided above. Therefore, the beneficial effects they can achieve can be referred to the beneficial effects in the corresponding methods provided above, and will not be repeated here.

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

Claims

1. A screen layout method characterized by, Applied to electronic devices, the method includes: Receive the first operation applied to the first interface; At the first moment, in response to the first operation, a second interface is displayed. The second interface includes a template selection area corresponding to the first operation displayed on the first interface. The template selection area includes multiple layout templates. Each layout template includes multiple template areas. The parameters of each template area include its corresponding endpoint position. At the second moment, a second operation is received on the second interface, the second operation being a layout template selection operation; In response to the second operation, a selected target layout template is obtained. If the number of template areas in the target layout template is the same as the number of multiple applications running on the electronic device at the current moment, a third interface is displayed. The third interface includes multiple first overlays, each of which corresponds to one of the multiple applications. Each first overlay is generated based on the starting position of its corresponding application. At the third moment, a fourth interface is displayed. The fourth interface includes multiple second masks, each of which corresponds one-to-one with multiple first masks. Each second mask is obtained by adjusting the position and shape of the first mask through the starting position of its corresponding first mask and the ending position of a non-repeating template area in the target layout template. At the fourth moment, a fifth interface is displayed, which includes multiple applications, each of which is displayed in its corresponding first display window, and each first display window is redrawn according to the end position of its corresponding second overlay. Wherein, the second time is later than the first time, the third time is later than the second time, and the fourth time is later than the third time.

2. The method of claim 1, wherein, The method further includes: If the number of template areas in the target layout template is greater than the number of the multiple applications, a sixth interface is displayed, the sixth interface including multiple first overlays; At the fifth moment, a seventh interface is displayed, which includes multiple second masks and at least one first mask, the first mask being generated based on the end positions of template regions in the target layout template that fail to match the multiple applications; At the sixth moment, an eighth interface is displayed, which includes the plurality of the applications and the first mask; The fifth time point is later than the second time point, and the sixth time point is later than the fifth time point.

3. The method of claim 1, wherein, The method further includes: If the number of template areas in the target layout template is less than the number of the multiple applications, a ninth interface is displayed. The ninth interface includes at least one third overlay and at least two interface screenshots. The third overlay is generated based on the starting position of the target application, which is one or more of the multiple applications. The interface screenshots are obtained from screenshots of the remaining at least two of the applications. At the seventh moment, the tenth interface is displayed. The tenth interface includes at least one fourth mask and at least one second mask. The fourth mask corresponds one-to-one with the third mask. The fourth mask is obtained by adjusting the position and shape of the third mask by matching the starting position of its corresponding third mask and the ending position of a non-repeating template area in the target layout template. The second mask is generated by the ending position of a template area that fails to match the third mask. The second mask displays all the screenshots of the interface. At the eighth moment, the eleventh interface is displayed, which includes the target application and the second mask. The target application is displayed in its corresponding second display window, which is redrawn based on the end position of its corresponding fourth mask. At the ninth moment, a third operation is received on the eleventh interface, the third operation being an interface screenshot selection operation; In response to the third operation, the selected application corresponding to the selected interface screenshot is obtained, and the selected application is redrawn according to the endpoint position of the second mask; The seventh time is later than the second time, the eighth time is later than the seventh time, and the ninth time is later than the eighth time.

4. The method of claim 1, wherein, The template selection area displays different layout templates based on the current posture information of the electronic device, including landscape and portrait orientations.

5. The method of claim 1, wherein, After displaying the third interface, the method further includes: An application icon is displayed in each overlay, and the application icon is the icon of the application corresponding to each overlay.

6. The method of claim 1, wherein, After displaying the third interface, the method further includes: The first animation effect is displayed, which is a transition effect from multiple first layers to multiple second layers.

7. The method of claim 6, wherein, The motion effect is the motion effect of each first layer deforming and transitioning to its corresponding second layer.

8. The method of claim 1, wherein, After displaying the third interface, the method further includes: Switch all the applications to run in the background, and remove the foreground window corresponding to each application in the second interface.

9. The method of claim 1, wherein, After displaying the fifth interface, the method further includes: removing all of the second mask layer.

10. The method of claim 1, wherein, Before displaying the first interface, the method includes: The main interface is displayed, including a taskbar display area, which includes a control for entering free screen mode. The fourth operation applied to the control for entering the free screen mode is received, and the first interface is displayed.

11. The method of claim 10, wherein, Before displaying the first interface, the method further includes: The second animation effect is a transition effect from the main interface to the first interface.

12. An electronic device, comprising: The electronic device includes: a memory and a processor, the memory and the processor being coupled; the memory stores program instructions, which, when executed by the processor, cause the electronic device to perform the screen layout method as described in any one of claims 1 to 11.

13. A computer-readable storage medium, characterized in that, Includes a computer program that, when run on an electronic device, causes the electronic device to perform the screen layout method as described in any one of claims 1 to 11.

Images