Display method and electronic equipment

Abstract

The embodiment of the invention discloses a display method and electronic equipment, in the method, combined display is formed between a plurality of live capsules and a plurality of screen digging holes, a user can know which different tasks are running in the background through stroked appearances of the digging holes, and the user experience is improved. And the real-time capsule of a certain task can be selected to be unfolded by clicking the corresponding digging hole, so that the real-time information of the task can be checked. Therefore, linkage between the live capsule and the dug hole can be achieved on user interaction, the live capsule and the dug hole are not split any more, the dug hole can be fully utilized to display the live capsule, the available display space of the status bar is increased, and the live capsule of multiple tasks can be displayed at the same time; when the live capsules of the multiple tasks are displayed at the same time, the different digging holes can be used for being linked with the live capsules of the different tasks, a user is supported to open the live capsules of the different tasks by operating (such as clicking) the different digging holes, and the live capsule interaction experience during multiple tasks is improved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a display method and an electronic device. Background Art

[0002] An increasing number of applications are installed on electronic devices such as mobile phones and tablets. After a user starts a task in an application, they must stay on the task execution interface to receive real-time information about the task. When the user switches to the desktop or another application, they must switch back to the task execution interface or go to the message center to actively view real-time information about the task. This results in users being unable to obtain timely real-time information about the task and often requires frequent switching between interfaces, resulting in low operational efficiency. Summary of the Invention

[0003] The embodiments of the present application provide a display method and an electronic device, which can realize the linkage between live capsules and holes in user interaction. The live capsules and holes are no longer separated, and the holes can be fully utilized to display the live capsules, thereby increasing the available display space of the status bar and supporting the simultaneous display of live capsules for multiple tasks. When the live capsules of multiple tasks are displayed simultaneously, different holes can be used to link the live capsules of different tasks, supporting users to open live capsules of different tasks by operating (such as clicking) different holes, thereby improving the live capsule interaction experience during multi-tasking.

[0004] In a first aspect, an embodiment of the present application provides a display method, which may include: an electronic device may display an interface of a first application on a screen; the electronic device may receive a first operation, the first operation being used to switch the first application to background operation; in response to the first operation, the electronic device may switch the first application to background operation and display a first stroke at the edge of a first cutout on the screen, the first stroke being used to indicate that the first application is running in the background. The electronic device may also detect a second operation, the second operation being used to display real-time information of the first application; in response to the second operation, the electronic device may display first real-time information of the first application in a first area on the screen, the first area being adjacent to the first cutout.

[0005] In the first aspect, the first hole may be a physical hole, or a fused hole formed by combining a dark area displayed on the screen with a physical hole, such as a capsule hole. The second operation may be a user operation acting on the first hole.

[0006] In the first aspect, when the real-time information of the first application is displayed in the first area, the electronic device stops displaying the first stroke at the edge of the first cutout to indicate that the real-time information of the first application is no longer hidden in the first cutout.

[0007] In combination with the first aspect, in some embodiments, the electronic device may further receive a third operation, where the third operation is used to switch the second application to background operation; in response to the third operation, the electronic device may further switch the second application to background operation.

[0008] In combination with the first aspect, in some embodiments, in response to the third operation, the electronic device may further display a second stroke on the edge of the first hole, where the second stroke is used to indicate that the second application is running in the background.

[0009] This hole-outlining method is suitable for the following scenario: the first hole only surrounds one physical hole. In this scenario, the new background task will squeeze out the old background task, that is, only the new task's outline will be placed at the first hole.

[0010] Specifically, before displaying the second outline at the edge of the first cutout, the electronic device may stop displaying the real-time information of the first application in the first area and display the real-time information of the second application in the first area. In this way, before hiding the live capsule of the second application in the screen cutout, the user can still observe the real-time information of the second application in the first area, thereby understanding the real-time information that will be hidden in the screen cutout.

[0011] In combination with the first aspect, in some embodiments, in response to the third operation, the electronic device may further split the first hole into a second hole and a third hole, display the second stroke at the edge of the second hole, and display the first stroke at the edge of the third hole.

[0012] This hole tracing method is suitable for the following scenario: the first hole surrounds multiple physical holes. In this scenario, the arrival of a new background task will trigger the hole splitting.

[0013] Specifically, before splitting the first hole into the second hole and the third hole, the electronic device may further decompose the stroke of the first hole into a first part and a second part, wherein the first part has the same appearance as the first stroke and the second part has the same appearance as the second stroke.

[0014] After switching the second application to the background, the electronic device may receive a fourth operation for switching the first application to the foreground. In response to the fourth operation, the electronic device may display the first application's interface, merge the second and third cutouts into the first cutout, and display a second outline around the edge of the first cutout. In this way, when the user switches the first application from the background to the foreground, the two cutouts merge into one, and the cutout outline only indicates the second application.

[0015] After switching the first application to the foreground, the electronic device may receive the first operation again, that is, the user switches the first application to the background again. In response to the first operation, the first application may be switched to the background again, the first hole may be decomposed into the second hole and the third hole, and the first stroke may be displayed at the edge of the second hole, and the second stroke may be displayed at the edge of the third hole. In this way, the first application becomes the latest application switched to the background, and the strokes of the second hole and the third hole are swapped. The second hole no longer displays the second stroke but displays the first stroke, and the third hole no longer displays the first stroke but displays the second stroke. By swapping the strokes of the two holes, the user can understand that the order of the old and new background applications has changed.

[0016] In conjunction with the first aspect, in some embodiments, the electronic device may also receive a fifth operation for displaying real-time information from the first application. In response to the fifth operation, the electronic device may display the real-time information from the first application in the first area, merge the second and third cutouts into the first cutout, and display a second outline around the edge of the first cutout. Thus, after the two cutouts are separated, if the user expands the real-time information for one task, the cutouts merge, and the merged cutout may indicate the other, unexpanded task.

[0017] In conjunction with the first aspect, in some embodiments, the electronic device may also receive a sixth operation for hiding the real-time information of the first application. In response to the sixth operation, the electronic device may stop displaying the real-time information of the first application in the first area, decompose the first hole into a second hole and a third hole, display the first stroke around the edge of the second hole, and display the second stroke around the edge of the third hole. In this way, when the short capsule is expanded and then collapsed, the holes will decompose, and each decomposition can indicate a different background task.

[0018] Specifically, the first stroke is used to indicate that the first application is running in the background, including: the appearance of the first stroke is consistent with the application theme appearance of the first application. Here, consistency can include but is not limited to the following implementation: the color of the first stroke is consistent with the application theme color of the first application.

[0019] Specifically, the second stroke may be used to indicate that the second application is running in the background, including: the appearance of the second stroke is consistent with the application theme appearance of the second application. Here, consistency may include but is not limited to the following implementation: the color of the second stroke is consistent with the application theme color of the second application.

[0020] In combination with the first aspect, in some embodiments, the electronic device can also receive a seventh operation, such as a user operation of touching the first hole 71. In response, it can first stop displaying the real-time information of the first application through the first component in the first area, display the first stroke at the edge of the first hole 71, and then display the real-time information of the first application through the second component in the second area on the screen.

[0021] The second component can be different from the first component and can present richer content than the first component. The first component can be a capsule component, such as a live capsule, and the second component can be a card component, such as a service card. The second component can also be the same as the first component, such as both being capsule components.

[0022] In conjunction with the first aspect, in some embodiments, the electronic device can obtain the application theme color of the ecological application (such as the first application and the second application) of the live window and use it as the stroke color of the corresponding hole. After detecting a user operation to switch the application to the background, the electronic device can set the stroke color of the hole to the application theme color of the corresponding background application through the system human-computer interaction function systemUI.

[0023] Specifically, the third-party application can call the interface of the electronic device's desktop application (such as liveViewManager), and pass the theme color corresponding to the third-party application to the desktop application through the application theme color field of the interface. When the desktop application receives this field, it sets the stroke color of the hole according to the theme color of the third-party application.

[0024] In combination with the first aspect, in some embodiments, the fusion process includes: displaying synapses connecting adjacent holes between adjacent holes, with the synapses being dark in color; and gradually enlarging the synapses until the thickened synapses and the multiple holes are fused in appearance into a capsule-like hole.

[0025] In combination with the first aspect, in some embodiments, after multiple holes are merged into a capsule-state hole, the electronic device can also display on the screen the process of decomposing the capsule-state hole into multiple holes when the number of real-time tasks increases; wherein, after the decomposition, the real-time task is indicated by the strokes of the multiple holes decomposed.

[0026] In combination with the first aspect, in some embodiments, the decomposition process includes: gradually shrinking the synapse until the synapse disappears.

[0027] In combination with the first aspect, in some embodiments, if the number of the holes is three or more, the fusion process further includes: gradually increasing the number of the middle holes when gradually increasing the number of synapses.

[0028] In combination with the first aspect, in some embodiments, if the number of the holes is three or more, the decomposition process further includes: gradually reducing the middle hole when gradually reducing the synapse.

[0029] In combination with the first aspect, in some embodiments, when an expanded live capsule of the first task is displayed outside the hole, the electronic device can also detect a user operation acting on the hole; based on the user operation, the electronic device can first display the process of the expanded live capsule being retracted into the hole, and then display the process of the service card of the first task expanding outward from the hole.

[0030] In combination with the first aspect, in some embodiments, the electronic device can also detect a user operation of retracting the service card of the first task after the service card of the first task is expanded from the hole; based on the user operation, the electronic device can first display the process of the service card of the first task being retracted into the hole, and then display the process of the live capsule of the first task expanding outward from the hole.

[0031] In conjunction with the first aspect, in some embodiments, after the service card for the first task is expanded from the cutout, the cutout presents a first appearance, where the first appearance is related to the appearance of the service card for the first task. The electronic device may further detect a user operation of sliding the service card for the first task in a first direction; based on the user operation, the electronic device may display a process in which the service card for the first task exits the screen in the first direction and the service card for the second task enters the screen in the first direction; wherein the first appearance is related to the appearance of the service card for the first task, including: the color of the outline of the cutout being the same as the theme color of the service card for the first task.

[0032] In combination with the first aspect, in some embodiments, when the service card of the first task exits the screen along the first direction and the service card of the second task enters the screen along the first direction, the electronic device may also add an icon of the second task on the first side of the hole when the service card of the second task enters the screen, and the first side is the side where the service card of the second task enters the screen; when the service card of the second task is displayed more on the screen than the service card of the first task, the appearance of the hole is set to the second appearance, and the icon of the first task is displayed on the second side of the hole, and the second appearance is related to the appearance of the service card of the second task, and the second side is the side where the first task exits the screen; wherein the second appearance is related to the appearance of the service card of the second task, including: the color of the stroke of the hole is the same as the theme color of the service card of the second task.

[0033] In combination with the first aspect, in some embodiments, when displaying real-time information of the first task in the expanded live capsule, the electronic device may also display a preset control corresponding to the first task in the expanded live capsule; detect a user operation acting on the preset control, and execute a preset function corresponding to the preset control.

[0034] Specifically, an application can call an interface (such as liveViewManager) on the electronic device's desktop application and pass in a callback function to be executed through the interface's state operation capsule data structure. When a user action on a preset control is detected, the desktop application executes the function method corresponding to the callback function. For example, if the application is a system application such as a flashlight or a recorder, the desktop application can directly call the system kit interface or the system action corresponding to the operation enumeration value to execute the callback operation; or jump back to the application through inter-process communication (IPC) to execute the callback operation.

[0035] In a second aspect, an embodiment of the present application provides a display method, which is applied to an electronic device, characterized in that one or more front-mounted holes are provided on the screen of the electronic device; the method may include:

[0036] The electronic device hides live capsules of multiple real-time tasks in the hole, and indicates that the live capsules of multiple real-time tasks are running in the background through the outline of the hole;

[0037] The electronic device detects a first operation of expanding a live capsule of a first task, the first task belongs to a plurality of tasks, and the first operation acts on a hole that hides the live capsule of the first task;

[0038] According to the first operation, the electronic device expands the live capsule of the first task outward from the hole affected by the first operation and displays the real-time information of the first task in the expanded live capsule.

[0039] In conjunction with the second aspect, in some embodiments, the electronic device hides live capsules of multiple real-time tasks at the hole, and indicates the real-time tasks running in the background by tracing the hole, including:

[0040] Hiding a live capsule of a real-time task at a hole, and indicating the hidden live capsule of the real-time task through a hole stroke, wherein the appearance of the hole stroke is related to the application appearance of the real-time task;

[0041] The appearance of the stroke of a hole is respectively related to the application appearance of a real-time task, including: the color of the stroke of a hole is respectively the same as the application theme color of a real-time task.

[0042] In conjunction with the second aspect, in some embodiments, the electronic device hides live capsules of multiple real-time tasks at the hole, and indicates the real-time tasks running in the background by tracing the hole, including:

[0043] A dark area is displayed surrounding the multiple holes. The dark area is combined with the multiple holes to form an integrated capsule-shaped hole on the screen. The stroke of the capsule-shaped hole indicates a live capsule of a real-time task hidden in the capsule-shaped hole. The appearance of the stroke of the capsule-shaped hole is related to the application appearance of the real-time task.

[0044] The appearance of the stroke of the capsule area is related to the application appearance of a real-time task, including: the color of the stroke of the capsule hole is the same as the application theme color of a real-time task.

[0045] In conjunction with the second aspect, in some embodiments, the electronic device hides live capsules of multiple real-time tasks at the hole, and indicates the real-time tasks running in the background by tracing the hole, including:

[0046] Surrounding multiple holes to display a dark area, the dark area combines with the multiple holes to form an integrated capsule-state hole on the screen, and the stroke of the capsule-state hole is divided into multiple segments, and the live capsules of the multiple real-time tasks hidden in the capsule-state holes are respectively displayed through the multiple-segment strokes, and the appearance of the multiple-segment strokes is respectively related to the application appearance of the multiple real-time tasks; wherein, the appearance of the multiple-segment strokes is respectively related to the application appearance of the multiple real-time tasks, including: the colors of the multiple-segment strokes are respectively the same as the application theme colors of the multiple real-time tasks.

[0047] In conjunction with the second aspect, in some embodiments, the electronic device hides live capsules of multiple real-time tasks at the hole, and indicates the real-time tasks running in the background by tracing the hole, including:

[0048] Divide the plurality of holes into a plurality of groups, wherein one or more consecutive holes constitute a group of holes, hide one or more live capsules of real-time tasks at each group of holes, and indicate the live capsules of the real-time tasks hidden at each group of holes through the stroke of each group of holes, wherein the appearance of the stroke of each group of holes is related to the application appearance of the corresponding real-time task;

[0049] The appearance of the strokes of a group of holes is respectively related to the application appearance of the corresponding real-time tasks, including: the color of the strokes of a group of holes is respectively the same as the application theme color of the corresponding real-time tasks.

[0050] In combination with the second aspect, in some embodiments, when the number of live capsules hidden at the physical hole is greater than the number of physical holes, the electronic device can also add a simulated hole for display near the physical hole; hide the live capsules of multiple real-time tasks at the physical hole and the simulated hole respectively, and indicate the hidden multiple real-time task live capsules through the strokes of the physical hole and the simulated hole.

[0051] In combination with the second aspect, in some embodiments, when the number of real-time tasks decreases, the electronic device can also display on the screen the process of multiple holes merging into capsule-state holes; wherein, before fusion, the real-time task is indicated by the stroke of multiple holes; after fusion, the real-time task is indicated by the stroke of the capsule area.

[0052] In combination with the second aspect, in some embodiments, the fusion process includes: displaying synapses connecting adjacent holes between adjacent holes, with the synapses being dark in color; and gradually enlarging the synapses until the thickened synapses and the multiple holes are fused in appearance into a capsule-like hole.

[0053] In combination with the second aspect, in some embodiments, after multiple holes are merged into a capsule-state hole, the electronic device can also display on the screen the process of decomposing the capsule-state hole into multiple holes when the number of real-time tasks increases; wherein, after the decomposition, the real-time task is indicated by the strokes of the multiple holes decomposed.

[0054] In combination with the second aspect, in some embodiments, the decomposition process includes: gradually shrinking the synapse until the synapse disappears.

[0055] In combination with the second aspect, in some embodiments, if the number of the holes is three or more, the fusion process further includes: gradually increasing the number of the middle holes when gradually increasing the number of synapses.

[0056] In combination with the second aspect, in some embodiments, if the number of the holes is three or more, the decomposition process further includes: gradually reducing the middle hole when gradually reducing the synapse.

[0057] In combination with the second aspect, in some embodiments, when an expanded live capsule of the first task is displayed outside the hole, the electronic device can also detect a user operation acting on the hole; based on the user operation, the electronic device can first display the process of the expanded live capsule being retracted into the hole, and then display the process of the service card of the first task expanding outward from the hole.

[0058] In combination with the second aspect, in some embodiments, the electronic device can also detect a user operation of retracting the service card after the service card of the first task is expanded from the hole; based on the user operation, the electronic device can first display the process of the service card of the first task being retracted into the hole, and then display the process of the live capsule of the first task expanding outward from the hole.

[0059] In conjunction with the second aspect, in some embodiments, after the service card for the first task is expanded from the cutout, the cutout presents a first appearance, where the first appearance is related to the appearance of the service card for the first task. The electronic device may further detect a user operation of sliding the service card for the first task in a first direction; based on the user operation, the electronic device may display a process in which the service card for the first task exits the screen in the first direction and the service card for the second task enters the screen in the first direction; wherein the first appearance is related to the appearance of the service card for the first task, including: the color of the outline of the cutout being the same as the theme color of the service card for the first task.

[0060] In combination with the second aspect, in some embodiments, when the service card of the first task exits the screen along the first direction and the service card of the second task enters the screen along the first direction, the electronic device may also add an icon of the second task on the first side of the hole when the service card of the second task enters the screen, and the first side is the side where the service card of the second task enters the screen; when the service card of the second task is displayed more on the screen than the service card of the first task, the appearance of the hole is set to the second appearance, and the icon of the first task is displayed on the second side of the hole, and the second appearance is related to the appearance of the service card of the second task, and the second side is the side where the first task exits the screen; wherein the second appearance is related to the appearance of the service card of the second task, including: the color of the stroke of the hole is the same as the theme color of the service card of the second task.

[0061] In combination with the second aspect, in some embodiments, when displaying the real-time information of the first task in the expanded live capsule, the electronic device may also display a preset control corresponding to the first task in the expanded live capsule; detect a user operation acting on the preset control, and execute a preset function corresponding to the preset control.

[0062] In a third aspect, an embodiment of the present application provides an electronic device, which may include: a processor, a memory, and a computer program stored in the memory. The processor executes the computer program to implement the steps of the method described in the first aspect or any implementation thereof, or may implement the steps of the method described in the second aspect or any implementation thereof.

[0063] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium on which a computer program is stored, characterized in that when the computer program is executed by a processor, it can implement the steps of the method described in the first aspect or any implementation thereof, or it can implement the steps of the method described in the second aspect or any implementation thereof.

[0064] In a fifth aspect, an embodiment of the present application provides a computer program product, comprising a computer program, characterized in that when the computer program is executed by a processor, it can implement the steps of the method described in the aforementioned first aspect or any implementation thereof, or it can implement the steps of the method described in the aforementioned second aspect or any implementation thereof. BRIEF DESCRIPTION OF THE DRAWINGS

[0065] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the background technology, the drawings required for use in the embodiments of the present application or the background technology will be described below.

[0066] Figure 1A-1C Several typical applications of real-time capsules are shown;

[0067] Figure 2 The overall process of the display method provided by the embodiment of the present application is shown;

[0068] Figure 3 The human-computer interaction of hiding and unfolding live capsules of multiple tasks at multiple holes is exemplified;

[0069] Figure 4 The following example shows different appearances of the hole stroke represented by different styles of dotted circles;

[0070] Figure 5A An exemplary implementation of a live capsule that hides a task at each of holes A, B, and C is shown;

[0071] Figure 5B An example of an implementation method of hiding a live capsule of a task at holes A, B, and C is shown;

[0072] Figure 5C An example of an implementation method of hiding two tasks in the live capsule at holes A, B, and C is shown;

[0073] Figure 5D Another implementation of a live capsule that hides two tasks at holes A, B, and C is shown as an example.

[0074] Figure 5E An exemplary implementation of a live capsule method for hiding two tasks at hole B is shown;

[0075] Figure 6A-6B The embodiment exemplifies the implementation of a live capsule method of indicating multiple tasks hidden in a hole through a multi-layer outline of the hole;

[0076] Figure 7A The example shows how three physical holes A, B, and C are fused into one capsule hole;

[0077] Figure 7B The example shows how two physical holes A and B are merged into one capsule hole;

[0078] Figures 8A-8E The dynamic process of three physical holes merging into a capsule hole is shown as an example.

[0079] Figures 9A-9E An example shows the one-shot linkage effect between the live capsule and the service card;

[0080] Figures 10A-10D The process of switching service cards by sliding operation is exemplified;

[0081] Figure 11A This example shows how to add an end button to the expanded live capsule of the screen recording task;

[0082] Figure 11B The embodiment shows how to add a close button to the expanded live capsule of the flashlight task;

[0083] Figure 12A The following example shows how to collapse the expanded live capsule of the screen recording task into an end button.

[0084] Figure 12B The embodiment shows how to collapse the expanded live capsule into a close button in the flashlight task;

[0085] Figure 12C The following example shows how to implement the method of collapsing the expanded live capsule of the screen casting task into a start screen casting button;

[0086] Figures 13A-13E A specific implementation of the display method provided in an embodiment of the present application is shown;

[0087] Figures 14A-14E A specific implementation of the display method provided in an embodiment of the present application is shown;

[0088] Figures 15A-15C A further implementation of the display method provided in the embodiment of the present application is shown;

[0089] Figures 16A-16C A capsule for displaying temporary notifications of an application is shown;

[0090] Figure 17 The dynamic change process of a capsule morphology is shown;

[0091] Figure 18 An electronic device 100 provided in an embodiment of the present application is shown;

[0092] Figure 19A software system provided by an embodiment of the present application is shown;

[0093] Figure 20 A program calling flow is shown. DETAILED DESCRIPTION

[0094] The terms used in the following embodiments of the present application are only for the purpose of describing specific embodiments and are not intended to limit the present application.

[0095] Live Capsules are a type of live window, named after their capsule-like shape. When an application that supports Live Capsules is switched to the desktop, or switched to another application, a Live Capsule will appear in the status bar. The Live Capsule will display a summary of the current task of the application in real time, such as call duration, timer countdown, and food delivery status. For example, Figure 1A As shown in , after starting the recording, the user can learn the recording duration (such as 3 seconds) through the live capsule. Figure 1B As shown in , during a call, even if the user switches to the desktop, the user can still know the call duration (such as 11 minutes and 49 seconds) through the live capsule. Figure 1C As shown in the example, after placing an order through a food delivery app, users can use the live capsule to check the delivery status (such as "delivering") even when switching to the desktop. This way, users can easily grasp the real-time progress of the order without having to frequently switch apps, making it easy to pay attention to real-time information at any time.

[0096] However, if Figure 1A-1C As shown, the live capsules 11B, 12B, and 13B are visually separated from the screen holes 11A, 12A, and 13A. The live capsules need to avoid the screen holes to be displayed, and the available display space in the status bar is insufficient. Moreover, the position and number of screen holes may vary from device to device, which results in the live capsules avoiding different positions and numbers of screen holes on different devices, making it impossible to provide a unified user experience. For example, Figure 1A There are three screen holes 11A in the center, and the live capsule 11B is set to be displayed on the left side; Figure 1B There are two holes 12A in the middle and located on the left, and the live capsule 12B is set to be displayed in the middle; Figure 1C There is only one hole 13A in the middle, and the live capsule 13B is set to be displayed on the left.

[0097] The embodiments of the present application provide a display method that can realize the linkage between live capsules and holes in user interaction. The live capsules and holes are no longer separated. The holes can be fully utilized to display the live capsules, which increases the available display space of the status bar and supports the simultaneous display of live capsules for multiple tasks. When the live capsules of multiple tasks are displayed at the same time, different holes can be used to link the live capsules of different tasks, supporting users to open live capsules of different tasks by operating (such as clicking) different holes, thereby improving the live capsule interaction experience during multi-tasking.

[0098] The present application does not limit the shape of the live capsule, which can be transformed into other shapes, such as rectangular, L-shaped, etc.

[0099] Figure 2 The overall process of the display method provided by the embodiment of the present application is shown. The method can be applied to electronic devices such as mobile phones and tablets, which may have one or more physical holes on the screen. The holes can be used to accommodate part or all of devices such as cameras and proximity light sensors, such as the lens part of the front camera.

[0100] like Figure 2 As shown, the display method provided in the embodiment of the present application may include the following steps:

[0101] S11. The electronic device may hide live capsules of multiple tasks at the digging holes, and indicate the live capsules of the multiple tasks hidden at the digging holes respectively through the outlines of the digging holes.

[0102] S12: Detecting a user operation of expanding a live capsule of a first task. The user operation may act on a hole that hides the first task, which belongs to the aforementioned multiple tasks.

[0103] S13. According to the user operation, expand the live capsule of the first task outward from the hole affected by the user operation, and display the real-time information of the first task in the expanded live capsule.

[0104] For example, Figure 3 As shown, the electronic device hides the live capsules of the three tasks of "milk tea order reminder", "taxi progress reminder" and "travel order reminder" at holes A, B and C respectively. The appearance of the strokes of holes A, B and C are different, and the appearance of their strokes is related to the appearance of the aforementioned three tasks, respectively, and is used to indicate that the live capsules 20, 21 and 22 of the three tasks of "milk tea order reminder", "taxi progress reminder" and "travel order reminder" are hidden at holes A, B and C respectively.

[0105] The three tasks of "milk tea order reminder", "taxi progress reminder" and "travel order reminder" may belong to a milk tea purchasing application, a taxi application and a travel application respectively.

[0106] The figures of this application use different styles of dotted circles to represent the different appearances of the hole strokes, such as Figure 4 As shown, the three different dashed circles represent the different hole-punch stroke colors (a, b, and c). These colors can be derived from the application theme colors of their respective tasks. In some cases, the application theme color may be the same for different tasks. In this case, to distinguish different tasks, the system UI may assign different stroke colors to different tasks, making the hole-punch stroke colors different for users to distinguish.

[0107] like Figure 3 As shown, the user can swipe left on the hole A to expand the live capsule 20 of the task "Milk tea order reminder". In response, the electronic device can expand the live capsule 20 of the task "Milk tea order reminder" from the hole A and display the real-time information of the "Milk tea order reminder" in the expanded live capsule 20, such as the order number "4517", so that the user can understand the milk tea order number. Figure 3 As shown, the user can also perform a right swipe operation on the expanded live capsule 20 to hide it back in the hole. In response, the electronic device can hide the expanded live capsule 20 back in the hole A and reset the appearance of the hole A so that its appearance is related to the application theme appearance of "Milk Tea Order Reminder" to indicate that the live capsule of the task "Milk Tea Order Reminder" is hidden in the hole A.

[0108] After the live capsule of the first task hidden in the hole is expanded, the electronic device may no longer indicate the live capsule of the first task through the outline of the hole.

[0109] exist Figure 3 In this example, when Live Capsule 20 is expanded, the electronic device can reconfigure the integration between holes A, B, and C and the remaining Live Capsules. For example, holes A and B may be used to hide Live Capsule 21, which displays a "ride-hailing progress reminder," while hole C may be used to hide Live Capsule 22, which displays a "travel order reminder." How two or more holes can collectively hide a task's Live Capsules will be explained in detail later and will not be discussed here.

[0110] In this way, multiple live capsules and multiple holes are combined for display. Users can understand the different tasks running in the background through the outline appearance of the holes, and can choose to expand the live capsule of a task by clicking the corresponding hole to view the real-time information of the task.

[0111] In the embodiment of the present application, the electronic device may surround one hole to display one live capsule, or surround multiple holes to display one live capsule, or surround multiple holes to display multiple live capsules, etc. When executing the aforementioned step S11, the combination display strategy between the live capsule and the hole may include but is not limited to one or more of the following:

[0112] Strategy 1: Hide a task's Live Capsule in a hole, display the hole's stroke, and indicate that the task's Live Capsule is hidden in the hole through the hole's stroke. The appearance of the hole's stroke is related to the application theme appearance of the task.

[0113] For example, Figure 5A As shown, holes A, B, and C each hide a Live Action Capsule for a task: Live Action Capsule 20 for "Milk Tea Order Reminder," Live Action Capsule 21 for "Taxi Progress Reminder," and Live Action Capsule 22 for "Travel Order Reminder." The outline color of hole A matches the app theme color for "Milk Tea Order Reminder," the outline color of hole B matches the app theme color for "Taxi Progress Reminder," and the outline color of hole C matches the app theme color for "Travel Order Reminder." This way, users can identify which Live Action Capsule is hidden in a hole by the color of the outline.

[0114] Strategy 1 can be applied to all holes, that is, the combination between each hole and the real capsule adopts Strategy 1, and each hole is combined with the real capsule of a task. Strategy 1 can also be applied to some holes, that is, only some of the holes are combined with the real capsule using Strategy 1. Please refer to the following Figure 5C Hole C in the hole.

[0115] Strategy 2: Surround multiple cutouts to display a dark area. The dark area combines with the multiple cutouts to form a single capsule-shaped cutout on the screen. A task's Live Action Capsule is hidden within the capsule-shaped cutout, and the stroke of the capsule-shaped cutout is displayed, indicating that the task's Live Action Capsule is hidden within the capsule-shaped cutout. The appearance of the capsule-shaped cutout's stroke is related to the application appearance of the task. This correlation may include, but is not limited to: the color of the capsule-shaped cutout's stroke being the same as the application theme color of the task.

[0116] For example, Figure 5B As shown, a dark area 25 is displayed surrounding the holes A, B, and C. The dark area 25 is combined with the holes A, B, and C to form a visually integrated capsule-state hole on the screen. The color of the stroke of the capsule-state hole is consistent with the application theme color of "Travel Order Reminder" to indicate that the live capsule 22 of "Travel Order Reminder" is hidden in the capsule-state hole.

[0117] For example, Figure 5CAs shown, among the holes A, B, and C, a dark area 26 is selected to surround the holes A and B. The dark area 26 is combined with the holes A and B to form a visually integrated capsule-shaped hole on the screen. The stroke color of the capsule-shaped area is consistent with the application theme color of the "Taxi Progress Reminder" to indicate that the live capsule 21 of the "Taxi Progress Reminder" is hidden in the capsule-shaped hole. Figure 5C In the example, the aforementioned strategy 1 is used between hole C and "travel order reminder".

[0118] Strategy 2 can be applied to all holes, that is, to surround all holes to form a capsule state hole to hide the actual capsule of a task, such as Figure 5B Strategy 2 can also be applied to partial digging, that is, to surround the partial digging to form a capsule digging, such as Figure 5C Example.

[0119] Strategy 3: Surround multiple cutouts to display a dark area. The dark area combines with the multiple cutouts to form a single capsule-shaped cutout on the screen. Live Action Capsules for multiple tasks are collectively hidden within the capsule-shaped cutout. The stroke of the capsule-shaped cutout is displayed, divided into multiple segments. These multiple stroke segments indicate that Live Action Capsules for multiple tasks are hidden within the capsule-shaped cutout. The appearance of these multiple stroke segments is correlated with the appearance of the application themes for these multiple tasks. This correlation may include, but is not limited to, the colors of the multiple stroke segments being the same as the application theme colors for the multiple tasks.

[0120] For example, Figure 5D As shown, a dark area 25 is displayed surrounding the holes A, B, and C. The dark area 25 is combined with the holes A, B, and C to form a visually integrated capsule-state hole on the screen. The stroke of the capsule-state hole is divided into two sections, one section has the same color as the application theme color of "Taxi Progress Reminder", and the other section has the same color as the application theme color of "Travel Order Reminder", to indicate that the capsule-state hole hides the live capsule 2 of "Taxi Progress Reminder" and the live capsule 22 of "Travel Order Reminder".

[0121] Strategy 3 can be applied to all or part of the holes.

[0122] Strategy 4: Hide the Live Action Capsules of multiple tasks in a single hole. Display the stroke of the hole, which is divided into multiple segments. These multiple stroke segments indicate that the Live Action Capsules of multiple tasks are hidden in the capsule-state hole. The appearance of these multiple stroke segments is related to the application theme appearance of these multiple tasks. This relationship may include, but is not limited to: the colors of the multiple stroke segments are the same as the application theme color of the multiple tasks.

[0123] For example, Figure 5EAs shown, the stroke of hole B is divided into two segments, the color of one segment is consistent with the application theme color of "Taxi Progress Reminder", and the color of the other segment is consistent with the application theme color of "Travel Order Reminder", indicating that the live capsule 21 of "Taxi Progress Reminder" and the live capsule 22 of "Travel Order Reminder" are hidden in hole B.

[0124] Figure 5E The example shown is a case where the screen has only one hole. In fact, Strategy 4 can also be applied to a case where the screen has multiple holes, and the hole to which Strategy 4 is applied can be one or more of the multiple holes.

[0125] The above strategies 3 and 4 can also be implemented as Figure 6A-Figure 6B The runway appearance shown is a multi-layered stroke that surrounds the hole to form a runway-like shape. This multi-layered stroke indicates that the live capsules of multiple tasks are hidden in one hole or one capsule-state hole. Figure 6A As shown, there are two layers of strokes around the capsule-state hole. The colors of these two layers of strokes are consistent with the application theme colors of "Taxi Progress Reminder" and "Travel Order Reminder", respectively, to indicate that the capsule-state hole hides the live capsule 21 of "Taxi Progress Reminder" and the live capsule 22 of "Travel Order Reminder". For another example, Figure 6B As shown, there are two layers of strokes around the hole B. The colors of these two layers of strokes are consistent with the application theme colors of "Taxi Progress Reminder" and "Travel Order Reminder", respectively, to indicate that the live capsule 21 of "Taxi Progress Reminder" and the live capsule 22 of "Travel Order Reminder" are hidden in the hole B.

[0126] The holes mentioned above all refer to physical holes. The electronic device can also add virtual holes near the physical holes, such as a black area with the same shape as the physical holes, and hide the live capsules of these multiple tasks in the physical holes and virtual holes. This technical implementation can especially occur when the number of tasks is greater than the number of physical holes. After adding virtual holes, the combined display strategy between live capsules and holes (including physical holes and virtual holes) can still adopt one or more of the above strategies. As for the total number of holes after adding virtual holes, the embodiment of the present application does not limit it and can be determined according to actual application requirements. For example, when there is only one physical hole, two virtual holes are added, and the total number of holes is equal to three. Adding virtual holes can also be applied to situations where there are no holes, for example, the three holes displayed on the screen are all virtual holes. This allows for a consistent user experience across different electronic devices. For example, regardless of whether a device has three cutouts, one, or even no cutouts, all three cutouts can be displayed uniformly, and the same display logic for the live content capsules can be provided based on the same number of cutouts, providing a consistent user experience. This effect is particularly evident on foldable screens. For example, a tri-fold screen with three screen sections may have different numbers of physical cutouts. Maintaining this effect when switching between foldable forms allows for a consistent and stable real-time information viewing experience.

[0127] In the case of multiple holes, the holes can be divided into multiple groups, and one or more consecutive holes can constitute a group of holes. Here, the holes can include physical holes, virtual holes, and capsule-state holes. A group of holes corresponds to one or more tasks. The electronic device can hide the live capsules of one or more tasks at each group of holes, and indicate the live capsules of the tasks hidden at each group of holes through the strokes of each group of holes. The appearance of the strokes of each group of holes is related to the application theme appearance of the task to which it corresponds. The appearance relevance may include but is not limited to: the color of the strokes of a group of holes is the same as the application theme color of the task to which it corresponds. When a group of holes has only one hole, the stroke of this group of holes can be the stroke of this one hole; when a group of holes consists of multiple holes, the stroke of this group of holes can be the stroke of the capsule-state holes surrounding the multiple holes.

[0128] For the combined display between hole digging and live capsule, each group of hole digging can adopt the same strategy.

[0129] For example, Figure 5A As shown, there are three holes in total: holes A, B and C. Holes A, B and C are each a group, and all adopt the above strategy 1. Figure 5AIn the above-described Strategy 1, each group of holes may also use another strategy. For another example, four holes may be divided equally into two groups, both of which use Strategy 2 or Strategy 3, and each group of holes may be fused into a capsule-shaped hole. For another example, three holes may be divided into three groups, each of which uses Strategy 4. These examples are provided solely to illustrate the embodiments of this application and should not be construed as limiting.

[0130] For the combined display between hole digging and live capsule, each group of hole digging can also adopt different strategies.

[0131] For example, Figure 5C As shown, there are three holes in total: holes A, B and C. Holes A and B are a group, and hole C is a group. The former group adopts the above strategy 2, and the latter group adopts the above strategy 1. Figure 5C As shown in FIG, each group of holes can adopt different strategies to form other forms. For example, Figure 5C In this example, the first group of holes uses Strategy 3, and the second group uses Strategy 4. For another example, a total of four holes are divided equally into two groups, one using Strategy 2 and the other using Strategy 3. These examples are intended only to illustrate the embodiments of this application and should not be construed as limiting.

[0132] In the case of multiple holes, the holes can also be divided into only one group, that is, all holes are surrounded to form an integrated capsule hole visually, and the above strategy 2 or strategy 3 is applied, such as Figure 5B 、 Figure 5D or Figure 5E shown.

[0133] The hole-punch pattern can change dynamically, especially when the combined display strategy of live capsules and hole-punch changes. Physical hole-punch patterns can merge into capsule-shaped hole-punch patterns, and capsule-shaped hole-punch patterns can also split back into physical hole-punch patterns. More on this below.

[0134] 1. Multiple physical holes are merged into a capsule hole.

[0135] For example, Figure 7A As shown, three physical holes A, B, and C can be merged into a capsule-shaped hole 32. The electronic device can surround these three physical holes to display a dark area 31, and the dark area 31 combines with the three physical holes to form a capsule-shaped hole 32. For example, Figure 7B As shown, the two physical holes A and B can also be merged into a capsule-shaped hole 34. The electronic device can surround the two physical holes and display a dark area 33, and the dark area combines with the two physical holes to form the capsule-shaped hole 34.

[0136] The dark area (such as 31 or 33) surrounding the physical holes can appear gradually to present a gradual effect from physical holes to capsule holes, which is more vivid. For example, between adjacent physical holes, dark synapses connecting adjacent physical holes are displayed, and the dark synapses are gradually enlarged until the thickened dark synapses and multiple physical holes are merged into a capsule hole in appearance. If the number of physical holes is three or more, during the fusion process, when the synapses are gradually increased, the middle physical hole can be gradually enlarged. Among them, enlarging the middle hole refers to enlarging the dark area surrounding the middle physical hole to visually present the effect of the middle hole being enlarged, rather than enlarging the middle hole in physical size.

[0137] like Figures 8A-8E As shown, when the three physical holes are merged into the capsule hole, in terms of visual effects, the middle hole gradually becomes larger and moves downward. At the same time, the middle hole generates synapses on both sides of it, and the stroked hole generates synapses on one side of it. After the synapses are connected, they gradually become larger. The middle hole then gradually moves upward back to its original position. Finally, the three holes are merged into the capsule hole. Figures 8A-8E This is merely an example used to explain the embodiments of the present application and should not be construed as limiting.

[0138] When two physical holes are fused into a capsule hole, a similar Figures 8A-8E Specifically, when two physical holes merge into a capsule hole, both holes generate synapses toward the center. After the synapses are connected, they gradually grow larger until the two holes merge into a capsule hole.

[0139] 2. Capsule-state digging is split into multiple physical digging holes.

[0140] For example, Figure 7A As shown, the capsule-state hole 32 can be split into three physical holes A, B, and C. The electronic device can cancel the dark area 31 surrounding the three physical holes to split the three physical holes A, B, and C from the capsule-state hole 32. For another example, Figure 7B As shown, the capsule-state hole 34 can be split into two physical holes A and B. The electronic device can cancel the display of the dark area 33 surrounding the two physical holes to split the two physical holes A and B from the capsule-state hole 34.

[0141] The dark area (such as 31 or 33) surrounding the physical holes can be gradually disappeared to present a dynamic effect of the physical holes gradually splitting out from the capsule-state holes, which is more vivid. For example, the connecting synapses between adjacent physical holes are gradually reduced until the synapses disappear, so that the physical holes can be split out from the capsule-state holes. If the number of holes is three or more, during the splitting process, when the synapses are gradually reduced, the middle hole can be gradually reduced. Among them, reducing the middle hole refers to reducing the dark area surrounding the middle hole to visually present the effect of the middle hole being reduced, rather than increasing the physical size of the middle hole.

[0142] like Figures 8A-8E The reverse diagram shows the dynamic process of a capsule-shaped hole splitting into three holes. Visually, the capsule-shaped hole gradually shrinks or tapers at the interval between the original holes, forming a connecting synapse. Simultaneously, the middle portion of the capsule-shaped hole moves downward, then gradually shrinks and moves upward. The synapse further shrinks or tapers until it breaks, and the capsule-shaped hole finally splits into three holes.

[0143] When the capsule hole is split into two physical holes, it can also present a similar Figures 8A-8E The reverse dynamic fusion effect is shown. Specifically, when the capsule-state hole splits into two physical holes, the dark area at the connection between adjacent physical holes gradually becomes thinner or smaller until the capsule-state hole splits into two parts and finally becomes two physical holes.

[0144] The above-described dynamic switching between physical and capsule-shaped holes is not limited to the dynamic switching between virtual and capsule-shaped holes. The above-described dynamic switching between hole shapes can also be applied to all or some of the physical holes on the screen.

[0145] The system is not limited to multiple holes; a single physical hole can also be fused into a capsule hole, which can then be split back into a single physical hole. When a single physical hole is fused into a capsule hole, the electronic device can surround the physical hole to display a dark area, gradually enlarging the dark area until the dark area combines with the physical hole to form a capsule hole. When the capsule hole splits into a single physical hole, the electronic device can gradually shrink the dark area surrounding the single physical hole, ultimately decomposing the capsule hole into a single physical hole.

[0146] The number of live capsules hidden in the hole can change dynamically. For example, when a task that supports live capsules ends, the live capsule of the task will disappear, and the number of live capsules hidden in the hole will decrease; when the user launches a new application that supports live capsules and puts the application in the background, the live capsule of the application's task will appear, and the number of live capsules hidden in the hole will increase. In addition, refer to Figure 3 It can be seen that when the user expands a live capsule, the number of live capsules hidden at the digging hole will decrease; conversely, when the user hides a live capsule, the number of live capsules hidden at the digging hole will increase.

[0147] When the number of live capsules hidden in the holes increases or decreases, the electronic device can adapt the display strategy between the live capsules and the holes to achieve a comprehensive integration between the live capsules and the holes. For example, when the number of live capsules that need to be hidden in the holes decreases from three to one, the display strategy between the live capsules and the holes can change from the aforementioned strategy 1 to the aforementioned strategy 2. This strategy change process is also accompanied by a hole-shaped switch in which three physical holes merge into one capsule-shaped hole. Thereafter, when the number of live capsules that need to be hidden in the holes increases from one to two, the display strategy between the live capsules and the holes can change from the aforementioned strategy 2 to the aforementioned strategy 3. For another example, when the number of live capsules that need to be hidden in the holes increases from one to two, the display strategy between the live capsules and the holes can change from the aforementioned strategy 2 to the aforementioned strategy 3. Thereafter, when the number of live capsules that need to be hidden in the holes increases from two to three, the display strategy between the live capsules and the holes can change from the aforementioned strategy 3 to the aforementioned strategy 1. This strategy change process is also accompanied by a hole-shaped switch in which one capsule-shaped hole splits into three physical holes. The examples are only used to explain the embodiments of the present application. As for how to change the combination display strategy between the live capsules and the holes to adapt to the increase or decrease of the live capsules hidden in the holes, the embodiments of the present application do not limit it.

[0148] In an embodiment of the present application, the task's Live Capsule can also form a linked animation with the service card. When the Live Capsule of the first task is displayed outside the hole, the electronic device can detect a user operation on the hole, such as clicking the hole. Based on the user operation, the electronic device can first display the process of the expanded Live Capsule being retracted into the hole, and then display the process of the service card of the first task expanding outward from the hole. The first task can be any running task that supports Live Capsules.

[0149] Specifically, the electronic device can realize the one-shot linkage effect between the live capsule and the service card by controlling the start time of the multi-stage dynamic effect. Figures 9A-9E Example description, where Figure 9AThis shows the initial state of the animation. Figure 9B 、 Figure 9C 、 Figure 9D 、 Figure 9E The first stage, second stage, third stage and final state of the animation are shown respectively. Figures 9A-9C In this example, the hole 51 is a capsule hole. However, the hole that can achieve a linkage effect with the task service card can also be a physical hole or a virtual hole.

[0150] like Figure 9A-9B As shown, when the hole 51 is clicked, if a live capsule 52 of a task is expanded outside the hole 51, the electronic device can perform the dynamic effect of retracting the live capsule 52 of the task. This process can be regarded as the first stage of the linkage dynamic effect. Figure 9B-9C As shown, when the progress of the animation displayed in the first stage reaches a specific duration T1, the electronic device can trigger the second stage of the animation linkage, that is, the hole 51 presents one or more of the following animations: expansion and contraction animation, luminous animation, and stroke animation. Among them, the expansion and contraction animation can be, for example, the expansion and contraction of the hole size; the luminous animation can be, for example, the animation of the hole showing a luminous effect; the stroke animation can be, for example, the animation of the hole's stroke showing an effect from nothing to something, and the stroke color is consistent with the stroke color of the live capsule, which can be used to indicate that the hole is hidden in the live capsule. Figure 9C-9D As shown, when the progress of the animation displayed in the second stage reaches a specific duration T2, the electronic device can trigger the animation of the service card 53 flying out of the hole 51. This process can be regarded as the third stage of the linkage animation. Figure 9E The figure shows the service card 53 after it is unfolded after flying out of the hole 51. The time lengths such as T1 and T2 can be set according to actual application requirements, and the embodiment of the present application does not limit this.

[0151] In an embodiment of the present application, the linkage effect between the live capsule of a task and the service card may also include the following process: the service card is retracted into the hole after being expanded, and the live capsule is expanded outward from the hole. After the service card of the first task is expanded from the hole, the electronic device may detect a user operation, such as sliding the service card toward the hole; based on the user operation, the electronic device may first display the process of the service card of the first task being retracted into the hole, and then display the process of the live capsule of the first task being expanded outward from the hole. This linkage effect can be as follows: Figures 9A-9E Shown in reverse.

[0152] Furthermore, after the service card is expanded from the hole, the user can switch the service card through user operations such as sliding left and right, and the new service card enters the screen and the old service card exits the screen.

[0153] Specifically, such as Figure 10AAs shown, after the service card 53 of the first task is expanded from the hole, the hole presents a first appearance, which is related to the appearance of the service card of the first task. The first appearance is related to the appearance of the service card of the first task, and may include: the color 55 of the stroke of the hole is the same as the theme color 56 of the service card of the first task, Figures 10A-10D In the example, the appearance color is represented by a dotted line style. Figures 10B-10D As shown, after the service card 53 of the first task is expanded from the hole, the electronic device can also detect the user operation of sliding the service card 53 of the first task along the first direction 63, and can display the process of the service card 53 of the first task exiting the screen along the first direction 63 and the service card 54 of the second task entering the screen along the first direction based on the user operation. Figure 10D The state in which the service card 54 of the second task is finally expanded on the screen is exemplarily shown.

[0154] Furthermore, after a service card is expanded from the hole, the live capsule hidden in the hole can be used as a navigation point for the service card displayed below it, and the hole's stroke color corresponds to the service card below it. In other words, when sliding the card, the hole area can be used as a navigation point, with the same color as the current card, and the hole's stroke color changes as the service card switches.

[0155] Specifically, such as Figure 10A As shown, when the service card 53 of the first task exits the screen along the first direction and the service card 54 of the second task enters the screen along the first direction, the electronic device can also add an icon 60 for the second task on the first side of the hole at the beginning of the service card 54 of the second task entering the screen. The first side is the side where the service card of the second task enters the screen. Figure 10B As shown, when the service card 54 of the second task is gradually displayed more and more on the screen, as a transition, the electronic device can set the appearance of the hole to include both the first appearance 55 and the second appearance 57. Figure 10C As shown, when the service card 54 of the second task is displayed more on the screen than the service card 53 of the first task, the electronic device can switch the appearance of the hole punch from the first appearance 55 to the second appearance 57, and add an icon 61 for the first task on the second side of the hole punch. The second side is the side where the first task exits the screen. The second appearance 57 is related to the appearance 58 of the service card 54 of the second task. The second appearance is related to the appearance of the service card of the second task, including: the color of the stroke of the hole punch is the same as the theme color of the service card of the second task. Figure 10D The final state of the service card 54 of the second task displayed on the screen is exemplarily shown.

[0156] The service card switching methods include but are not limited to the following two:

[0157] Non-hand switching method: When the sliding offset of the first service card 53 reaches a specific distance threshold W1, the electronic device triggers the switching effect of the hole stroke color. The stroke color flows and replaces in the sliding direction, and the task icon moves in the sliding direction, such as hiding the second task icon 60 from the first side of the hole into the hole, and then displaying the first task icon 61 on the second side of the hole.

[0158] Follow-up switching mode: The switching progress of the stroke color of the hole is consistent with the sliding offset of the first service card 53. For example, Figure 10B As shown, when the service card 54 of the second task and the service card 53 of the first task are displayed on the screen at the same time, as a transition, the electronic device can set the appearance of the hole to include both the first appearance 55 and the second appearance 57. Moreover, as the service card 54 of the second task is gradually displayed more and more on the screen, the proportion of the second appearance 57 on the hole stroke can become larger and larger until it completely occupies the hole stroke. At the same time, the task icon can also be moved following the sliding direction of the fourth user operation. For example, when the sliding direction of the fourth user operation is from right to left, the task icon is hidden in the hole from the right side of the hole, and the task icon comes out from the left side of the hole. Figures 10A-10C In this example, the task icon entering the hole from the right side is specifically the second task icon 60, and the task icon exiting the hole from the left side is specifically the first task icon 61. As the task icon moves in the sliding direction of the fourth user operation, the transparency of the task icon can also change in real time with the sliding offset of the service card 53. For example, the transparency of the task icon increases as the task icon enters the hole from the first side, and decreases as the task icon exits the hole from the second side.

[0159] In an embodiment of the present application, controls, such as actionable buttons, may be added to the expanded live capsule. When displaying the real-time information of a first task in the expanded live capsule, the electronic device may also display a preset control corresponding to the first task in the expanded live capsule. Upon detecting a user operation on the preset control, a preset function corresponding to the preset space may be executed. The preset function corresponding to the control may be defined based on actual application requirements, and this embodiment of the present application does not impose any restrictions thereon.

[0160] For example, Figure 11A As shown, an end button 66 can be added to the live capsule 65 of the screen recording task. The user can directly end the screen recording task by clicking the button 66 without having to enter the screen recording interface to end the screen recording; with the end of the screen recording task, the live capsule 65 will also disappear. For example, Figure 11BAs shown, a close button 68 can be added to the live capsule 67 of the flashlight task. The user can directly close the flashlight task by clicking the button 68 without having to enter the flashlight interface to turn off the flashlight. With the end of the flashlight task, the live capsule 67 will also disappear.

[0161] Furthermore, the expanded live capsule of a resident task can be collapsed into an icon button, which can support quick operations or be used as a quick entry.

[0162] For example, Figure 12A As shown, the live capsule 65 of the screen recording task can be shrunk into an end button 66, and the user can end the screen recording task by clicking the end button 66. Figure 12B As shown, the live capsule 67 of the flashlight task can be collapsed into a close button 68, and the user can close the flashlight task by clicking the close button 68. Figure 12C As shown, the live capsule of the screen projection task can be shrunk into a screen projection start button 69. The user can start screen projection by clicking the screen projection start button 69, without the user having to pull up the service card of the screen projection task to trigger the start of screen projection.

[0163] A resident task can refer to a task that lasts longer than a short-term task and may coincide with the lifecycle of the UI main thread. The lifecycle of a resident task is less than or equal to the lifecycle of the application. A short-term task is a task with a fixed display duration. The task type is generally determined by the application. When the application passes task data (such as real-time notifications) to the Live Capsule, it can configure the task type, so that the application can determine whether the Live Capsule is a resident task.

[0164] Figures 13A-13C and Figure 13D-13E An embodiment of the present application is shown. The specific implementation of the display method in this embodiment may include but is not limited to the following steps:

[0165] S21. Figure 13A As shown, the electronic device can display the interface 70 of the first application. Figures 13A-13E In this example, the first application is a taxi-hailing application. However, the first application may also be other applications that support live capsules.

[0166] S22. The electronic device may detect a first operation, which is used to switch the first application to background operation. Figure 13B As shown, the first operation can be a sliding operation of sliding the interface 70 upward from the navigation bar, and the interface 70 can be gradually reduced during the sliding process. Without being limited to the example, the first operation can also be other operations, such as pressing the home button, etc.

[0167] S23. In response to the first operation, the electronic device can switch the first application to the background operation, and Figure 13C The edge of the first hole 71 shown on the screen displays a first stroke 72 , wherein the first stroke 72 can be used to indicate that the first application is running in the background.

[0168] S23. After S23, the electronic device may detect a second operation, which is used to expand the real-time information of the first application. For example, the first operation may be clicking the first hole 71, or sliding the first hole 71 to the left, etc.

[0169] S24. In response to the second operation, Figure 13D-13E As shown, the electronic device can display real-time information of the first application, such as "1.7 kilometers", near the first hole 71. Specifically, the real-time information can be displayed in a live capsule 73 on one side of the first hole 71. The live capsule 73 is essentially a small screen area, which can be called the first area.

[0170] like Figures 13A-13C As shown, the first cutout 71 can be a capsule-shaped cutout formed by surrounding multiple physical cutouts A, B, and C on the screen, also known as a capsule. Specifically, in response to the first operation, before displaying the first outline 72 of the first cutout 71, the electronic device can also surround the multiple physical cutouts to form the first cutout 71. The changes in the cutout shape involved in forming the first cutout 71 from multiple physical cutouts can be referred to the relevant content of the previous embodiment and will not be repeated here.

[0171] like Figure 13D-13E As shown, in response to the second operation, while expanding the real-time information of the first application in the live capsule 73 , the electronic device may also cancel the display of the first stroke 72 around the first hole 71 .

[0172] like Figure 13D-13E As shown in the reverse direction, the user can also collapse the real-time information of the first application displayed in capsule 73, for example, by sliding capsule 73 toward first cutout 71 to trigger the collapse of capsule 73. In response, the electronic device no longer displays the real-time information of the first application near first cutout 71, cancels the display of capsule 73, and redisplays the first stroke 72 around first cutout 71 to indicate that capsule 73 of the first application running in the background is hidden in first cutout 71.

[0173] Further, Figures 14A-14E This shows the process triggered when a user switches another application to the background, when the real-time information of a background application is already expanded in a live capsule.

[0174] S25. The electronic device may detect a third operation, which is used to switch the second application to the background. The second application is different from the first application. Figures 14A-14E In this example, the second application is a milk tea application. The third operation may be a user operation of sliding up the interface 74 of the second application from the bottom navigation bar. The implementation of the third operation can refer to the aforementioned implementation description of the first operation, which will not be repeated here.

[0175] S26. In response to the third operation, the electronic device can switch the second application to the background operation, and Figures 14A-14C As shown, the electronic device can also stop displaying the real-time information of the first application near the first cutout 71, such as "1.7 kilometers", and can display the real-time information of the second application, such as "4517", near the first cutout 71 through a live capsule. After a short period of time (such as 1 second), the live capsule of the second application can be retracted into the first cutout 71. In this way, before the live capsule of the second application is hidden in the screen cutout, the live capsule of the second application can be briefly displayed to the user near the screen cutout, so that the user can quickly understand what the live capsule of the application newly switched to the background looks like.

[0176] Stopping the display of the real-time information of the first application near the first hole 71 and displaying the real-time information of the second application near the first hole 71 can be realized as a dynamic process. Figure 14B As shown, the electronic device can gradually move the capsule 73 into the first hole 71 until the capsule 73 is completely hidden in the first hole 71. The electronic device then displays a capsule 75 of the second application on one side of the first hole 71 and displays the real-time information of the second application in the live capsule 75. At the same time, the electronic device also displays a first outline around the first hole 71 to indicate that the capsule 73 of the first application is hidden in the first hole 71. This dynamic process allows the user to observe the switching of the display of real-time information and understand the integration of the hole and the capsule.

[0177] S27. The electronic device may display a second border around the edge of the screen hole, the second border being used to indicate that the second application is running in the background. In this way, the user can also understand which applications are currently running in the background through the border of the screen hole.

[0178] Specifically, displaying the second stroke on the edge of the screen hole may include but is not limited to the following two methods:

[0179] Method 1: Figure 14D-14E As shown, the first cutout 71 is split into a second cutout 76 and a third cutout 77. The second cutout 76 is displayed at the edge of the second cutout 76, and the first stroke 72 is displayed at the edge of the third cutout 77. In this way, the user can expand the real-time information of the second application by operating the second cutout 76, and the user can expand the real-time information of the first application by operating the third cutout 77.

[0180] In the first approach, the hole splitting may occur after the live capsule of the second application is placed in the first hole 71 .

[0181] Method 2: First hole 71 is not split. Instead, the first outline 72 is no longer displayed around the edge of first hole 71. Instead, only second hole 76 is displayed to indicate that only capsule 75 of the second app is hidden or merged at first hole 71. This allows the user to know that by operating first hole 71, capsule 75 of the second app can be expanded to view the second app's real-time information.

[0182] Furthermore, in the first embodiment described above, to facilitate the splitting of the hole, the electronic device can also display the splitting process of the hole outline. Specifically, before splitting the first hole 71 into the second hole 76 and the third hole 77, the electronic device can decompose the outline of the first hole 71 into a first portion and a second portion, wherein the first portion has the same appearance as the first outline, and the second portion has the same appearance as the second outline. Methods for achieving consistent appearance include, but are not limited to, color consistency.

[0183] Furthermore, after executing S27 in the first embodiment of the above method, the electronic device receives a fourth operation for switching the first application to the foreground. In response to the fourth operation, the electronic device displays the interface of the first application, merges the second and third cutouts into the first cutout, and displays a second outline around the edge of the first cutout. Thus, the first application is switched to the foreground, and the outline of the first cutout is correspondingly changed to the second outline to indicate that the cutout contains real-time information about the second application. The user can expand the capsule of the second application and view the real-time information about the second application by operating the first cutout.

[0184] Afterwards, the electronic device may receive the first operation again, that is, the user switches the first application to the background again. In response to the first operation, the first application may be switched to the background again, the first hole may be decomposed into the second hole and the third hole, and the first stroke may be displayed at the edge of the second hole, and the second stroke may be displayed at the edge of the third hole. In this way, the first application becomes the most recently switched to the background application, and the strokes of the second hole and the third hole are swapped. The second hole no longer displays the second stroke but displays the first stroke, and the third hole no longer displays the first stroke but displays the second stroke. By swapping the strokes of the two holes, the user can understand that the order of the old and new background applications has changed.

[0185] After decomposing the first hole into the second and third holes, and indicating the Live Capsules of the first and second applications hidden in various locations using different strokes in the second and third holes, the electronic device may also receive a fifth operation for expanding the real-time information of the first application, such as clicking on the second hole. In response to the fifth operation, the electronic device may re-merge the second and third holes into the first hole, display the second stroke around the edge of the first hole, and display the real-time information of the first application near the first hole.

[0186] Afterward, the electronic device may also receive a sixth operation for retracting or hiding the real-time information of the first application. Functionally, the sixth operation may be the reverse of the fifth operation. In response to the sixth operation, the electronic device may stop displaying the real-time information of the first application near the first cutout, re-decompose the first cutout into a second cutout and a third cutout, and display the first stroke around the edge of the second cutout and the second stroke around the edge of the third cutout.

[0187] When there are fewer holes than background tasks, the background tasks hidden in the holes can rotate, with the task that was switched to the background earlier being replaced by the task that was recently switched to the background. Simultaneously, the hole's stroke color can also rotate accordingly, with the hole's stroke color of the task that was switched to the background earlier being replaced by the hole's stroke color of the task that was recently switched to the background, indicating to the user that the background task hidden in the hole has changed. Specifically, if the number of existing background tasks equals the number of holes, and a new task is switched to the background, the electronic device can first merge all holes into a single capsule-shaped hole, then split the hole. After the split, the stroke color of the holes that no longer have holes is the application theme color of the task that was switched to the background earliest, while the stroke color of the hole that appears is the application theme color of the task that was recently switched to the background. Furthermore, the order in which tasks are switched to the background can correspond to the order of the holes, such that holes further to the right correspond to tasks that were switched to the background earlier, and holes further to the left correspond to tasks that were switched to the background later. Combined with this, when there are fewer holes than background tasks, the hole's stroke color will exhibit a fluid, updating effect.

[0188] For example, suppose the screen has three holes, and three tasks have been switched to the background. The stroke colors of these three holes are red, yellow, and blue from left to right, indicating the three background tasks hidden in the three holes. At this time, a new task is switched to the background. The three holes can first be merged into a capsule hole, and then split into three holes. The stroke colors of the three holes after the split are updated from left to right to: green, red, and yellow, among which green is the application theme color of the new task. In this way, a visual effect of the hole stroke color flowing and switching can be presented. The original red, yellow, and blue hole stroke colors all flow one hole to the right. The original red stroke flows to the right to the middle hole, the original yellow stroke flows to the right to the rightmost hole, and the original blue stroke exits the hole stroke display. The stroke of the leftmost hole is updated to the application theme color (red) of the new background task.

[0189] Here, the earliest background task refers to the earliest one among the background tasks hidden in the hole. The new background task is relative to the existing background tasks, and it is switched to the background later than the existing background tasks.

[0190] After S24, the electronic device may also receive a seventh operation, such as a user operation of touching the first hole 71. In response, it may first stop displaying the real-time information of the first application through the first component in the first area (such as the screen area to the left of the hole), display the first stroke at the edge of the first hole 71, and then display the real-time information of the first application through the second component in the second area on the screen (such as the screen area below the hole).

[0191] The second component can be different from the first component and can present richer content than the first component. The first component can be a capsule component, such as a live capsule, and the second component can be a card component, such as a service card. The second component can also be the same as the first component, such as both being capsule components.

[0192] Figures 15A-15C A further implementation of the display method provided in an embodiment of the present application is shown.

[0193] like Figures 15A-15C As shown, the first application can be an application with audio tasks such as calls, recordings, and music playback, and its audio tasks can collect or play audio in real time. After the first application is switched to the background, the electronic device can display audio waveform information on the edge of the hole-digging capsule corresponding to the first application. The audio waveform information changes in real time, such as real-time changes in amplitude or loudness. In this way, users can easily understand the changes in the amplitude or loudness of real-time audio without switching back to the audio collection or playback page, and the human-computer interaction effect is more vivid and interesting.

[0194] The stroke appearance of the hole capsule corresponding to the first application is consistent with the application theme appearance of the first application, such as the color.

[0195] When displaying audio waveform information on the edge of the hole capsule, such as Figure 8A and Figure 8C As shown, the electronic device can display audio waveform information through dynamic waves. The waveform of the dynamic wave can be a proportional reduction of the actual waveform of the audio being collected or played.

[0196] When displaying audio waveform information on the edge of the hole capsule, such as Figure 8B As shown, electronic devices can also display audio waveform information using a dynamic aperture. The dynamic aperture can expand outward or contract inward as the amplitude or loudness changes dynamically. For example, the dynamic aperture can expand outward when the real-time amplitude or loudness increases, and contract inward when the real-time amplitude or loudness decreases.

[0197] The color of the dynamic wave or dynamic light circle can be the cover theme color of the album to which the currently playing music belongs. For calls and recordings, the color of the dynamic wave or dynamic light circle can be the system default color.

[0198] Not limited to dynamic waves or dynamic apertures, electronic devices can also display real-time waveform information through other dynamic effects, such as dynamic columnar waveforms, where the columnar amplitudes in the dynamic columnar waveforms can change with the real-time amplitude changes of the audio being collected or played.

[0199] In the embodiment of the present application, the capsule can also be used to display temporary notifications of the application, such as temporary notifications of updating the Bluetooth headset connection status, temporary notifications of updating the charging status, and temporary notifications of updating the reminder mode. In this way, users can effectively obtain temporary notifications.

[0200] like Figures 16A-16C As shown in FIG, when a temporary notification is to be displayed in a capsule, the electronic device can merge the hole and the screen area on one side of the hole to form a longer capsule, and display the temporary notification in the screen area. Figure 16A In this example, temporary notifications are used to update the Bluetooth headset connection status, such as "Freebuds pro is connected". Figure 16B In this example, a temporary notification is used to update the device charging status, such as "Charging". Figure 16C In this example, a temporary notification is used to update the device's notification mode for messages, incoming calls, etc., such as "vibrate." In addition to text content, a temporary notification may also include an icon that represents the notification content.

[0201] The specific side of the hole on which the screen area on the side of the hole is located can be determined according to the reading order of the language selected in the multi-language settings. For example, if the selected language is Chinese, in order to adapt to the reading order of Chinese from left to right, the screen area on the side of the hole can be the screen area on the left side of the hole, and the display order of the notification content is also arranged from left to right. For another example, if the selected language is Tibetan, in order to adapt to the reading order of Tibetan from right to left, the screen area on the side of the hole can be the screen area on the right side of the hole, and the display order of the notification content is also arranged from right to left. Here, left and right refer to left and right when the user is facing the screen.

[0202] When performing fusion, Figure 17 As shown, the electronic device can first fuse the hole 81 into a capsule 82, then extend the capsule to the left or right, and display the temporary notification in the extended capsule 83. The fusion process of the capsule 82 can be referred to Figures 8A-8E In this way, a vivid and gradually changing capsule fusion process can be presented to the user.

[0203] exist Figure 17 In the example, the holes 81 are multiple holes, but the present invention is not limited thereto. The holes fused into a capsule may also be a single hole. The holes may be physical holes or virtual holes.

[0204] The length of the extended capsule 83 can adapt to the length of the content of the temporary notification. The longer the content of the temporary notification is, the longer the capsule 83 is; otherwise, the shorter the capsule 83 is.

[0205] The display time of temporary notification is limited, such as 3 seconds. Figure 17 As shown in reverse, the electronic device can reduce the length of the capsule until the capsule 83 is restored to the capsule 82, and then decompose the capsule 82 to obtain the hole 81. The decomposition process of the capsule 82 can be referred to Figures 8A-8E Shown in reverse.

[0206] Figure 18 An electronic device 100 provided by an embodiment of the present application is shown.

[0207] The electronic device 100 can be any one of a mobile phone, a tablet computer, a vehicle-mounted device (also known as a car computer), smart home devices such as smart large screens, wearable devices such as smart watches and smart glasses, extended reality (XR) devices such as augmented reality (AR), virtual reality (VR), and mixed reality (MR), smart city devices, etc.

[0208] The electronic device 100 may include a processor 110, a memory 120, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a display screen 190, etc. Among them:

[0209] The processor 110 may be one or more, and they may be integrated into an integrated circuit of a system on chip (SOC). SOC is a system-on-chip. The processor 110 may include a central processing unit (CPU), a graphics processing unit (GPU), a neural-network processing unit (NPU), etc. Among them, the CPU may include an application processor (AP), a baseband processor chip (BP), etc., wherein the AP may be responsible for running the operating system, user interface, and application programs on the terminal device; the BP may be responsible for sending and receiving wireless signals and managing radio frequency services. The GPU may be responsible for graphics rendering. The NPU processes input information by drawing on the structure of biological neural networks. The NPU can be used to run artificial intelligence algorithms. The CPU and GPU can be used to render and synthesize images to be displayed on the display screen 190.

[0210] The processor 110 may include one or more interfaces, such as 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, etc. The processor 110 may communicate with other components within the electronic device 100 through the one or more interfaces.

[0211] The memory 120 may include a program storage area and a user data storage area. The program storage area may store an operating system and one or more application programs (such as game applications), and the data storage area may store data (such as photos and contacts) created by the user while using the electronic device 100. The memory 120 may be a high-speed random access memory or a non-volatile memory such as a disk, flash memory, or universal flash storage (UFS). The memory 120 may also be an external memory card such as a Micro SD card.

[0212] The memory 120 may also store a computer program for the display method provided in the embodiment of the present application. When the processor 110 reads the computer program from the memory 120 and runs the computer program, the electronic device 100 may execute the display method provided in the embodiment of the present application.

[0213] The charging management module 140 can be used to receive charging input from a charger. This charging input can be wireless charging input or wired charging input received through a USB interface. The power management module 141 is used to connect the battery 142, the charging management module 140 and the processor 110.

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

[0215] Antenna 1 and Antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve antenna utilization. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In other embodiments, the antennas can be used in conjunction with a tuning switch.

[0216] The mobile communication module 150 can provide wireless communication solutions, including 2G / 3G / 4G / 5G, for the electronic device 100. The mobile communication module 150 may include at least one filter, a switch, a power amplifier, a low-noise amplifier (LNA), and the like. The mobile communication module 150 can receive electromagnetic waves from the antenna 1, filter and amplify the received electromagnetic waves, and transmit them to the modem processor for demodulation. The mobile communication module 150 can also amplify the signals modulated by the modem processor and convert them into electromagnetic waves for radiation via the antenna 1.

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

[0218] The electronic device 100 can implement display functions through a GPU, a display screen 190, and an application processor. The GPU is a microprocessor for image processing, which is connected to the display screen 190 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs that execute instructions to generate or change display information. In some embodiments, after the CPU generates a drawing command for the UI thread of the application to create an interface element, the drawing command can be transmitted (or shared) to the GPU and the GPU is notified to render according to the drawing command.

[0219] The electronic device 100 can implement audio functions such as music playback and recording through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone jack 170D, and the application processor.

[0220] The sensor module 180 may include a pressure sensor 180A, a gyro sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, and the like.

[0221] The components in the electronic device 100 may be implemented as hardware modules, or as software modules, or as a combination of software and hardware modules. Figure 18 The device structure shown does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may include more or fewer components than shown, or combine or separate some components, or arrange the components differently.

[0222] In the embodiments of the present application, the application that displays real-time information in the live capsule, such as the aforementioned first application and second application, can be a third-party application. The software system (such as an operating system) running on the electronic device can provide the third-party application with a development component for accessing the live capsule. The development component provides the third-party application with an interface for accessing the live capsule. The third-party application becomes an application that supports the live capsule by implementing this series of interfaces. From a code perspective, the third-party application may include code for calling relevant interfaces.

[0223] This series of interfaces may include a first interface. A third-party application may launch a live capsule by calling the first interface and set the display of the live capsule and the outline of the hole by passing parameters to the first interface. When the application is switched to the background, the code in the third-party application that calls the first interface is executed to launch the live capsule.

[0224] For example, the first interface can be expressed as "start(ServiceCard, Capsule)." The two input parameters, "ServiceCard" and "capsule," can represent the service card content and capsule content, respectively. The service card content may include the content to be rendered on the service card mentioned in the previous embodiments, such as images and multi-level titles on the card. The capsule content may include the content to be displayed within the capsule, such as real-time information. Furthermore, the capsule content may also include stroke parameters. For example, the stroke parameters may include a stroke color, which can be the theme color of the third-party application.

[0225] In an embodiment where the live capsule is not linked to the service card, the "ServiceCard" input parameter is not required.

[0226] Furthermore, in order to implement the addition of an operable button in the live capsule, the input parameters of the first interface may also include content for describing the operable button, such as an icon of the operable button, and a callback function corresponding to the operable button. When the electronic device detects that the user operates the operable button, the electronic device can execute the callback function to call up the corresponding function of the third-party application to support the user to quickly operate the corresponding function. The corresponding function is the preset function corresponding to the operable button, such as turning on or off the flashlight.

[0227] The embodiment of the present application does not restrict the data format of the input parameters of the first interface. For example, "capsule" can be implemented as a single structure or multiple structures. In addition to the first interface, the interface for accessing the live capsule can also include other interfaces to implement richer live capsule functions.

[0228] Figure 19A software system provided by an embodiment of the present application is shown. The software system can run on an electronic device 100. The software system can be implemented as an operating system (OS) on the electronic device 100. The operating system can be various operating systems used in the industry, such as an operating system developed based on OpenHarmony, such as HarmonyOS; or other operating systems such as AndroidTM, iOS mobile operating system; it can also be various open source operating systems or their derivative operating systems, such as Linux OS, and other embedded operating systems; it can also be a new type of operating system in the future, such as an AI operating system based on artificial intelligence. The operating system is a set of interrelated system software programs that manage and control the operation of electronic devices, use and run hardware and software resources, and provide public services to organize user interactions.

[0229] like Figure 19 As shown, the software system can include several layers, including but not limited to the application layer, interface layer, component layer, framework and system service layer from top to bottom. The layers can communicate with each other through software interfaces.

[0230] The application layer can include a variety of applications, such as map applications like AutoNavi, ride-hailing applications like Didi, and food delivery applications like Meituan. After switching to background operation, these applications can call the MetaBall component in the component layer through the interface layer to launch the Live Capsule. These applications can also pass their own Live Window detailed information, such as capsule-shaped content and card-shaped content, to the component layer (such as the MetaBall component) through the interface layer to access Live Window components such as Live Capsules. Because they access Live Window components such as Live Capsules, these applications can also be called Live Window ecological applications.

[0231] The interface layer may include: LiveViewManager. LiveViewManager is the ability of a third-party application to directly call a desktop application. LiveViewManger is provided by systemUI, which can also be called interface capability, and can also be called LiveViewManager module. SystemUI is part of the desktop application. Specifically, the LiveViewManager module can provide the basic capabilities of the live window component (which can be called Live View Kit), which may include the functions of creating, updating and ending the live window, obtaining the live window, and checking the live window switch. The LiveViewManager module may include a series of interfaces that implement this basic capability, such as the isLiveViewEnable interface for viewing the live window switch, the startLiveView interface for creating a live window, the updateLiveView interface for updating the live window, the stopLiveView interface for ending the live window, etc.

[0232] The input parameters of LiveViewManager can be implemented by the following parameters: LiveView, LiveViewData, CapsuleData. Among them:

[0233] 1. LiveView is a parameter of the live window object, which may include but is not limited to the following fields:

[0234] id: unique identifier of the live window;

[0235] Event: Application scenarios of the live window, such as TAXI, DELIVERY, and FLIGHT, where TAXI represents taxi hailing, DELIVERY represents instant delivery, and FLIGHT represents flights;

[0236] isMute: message reminder mode, TRUE is silent reminder, FALSE is vibration reminder;

[0237] timer: timer, refresh once per second when displayed;

[0238] liveViewData: detailed information about the live window, which is an instance of LiveViewData.

[0239] 2. LiveViewData is the detailed information of the live window, which may include but is not limited to the following fields:

[0240] primary: card form content;

[0241] capsule: capsule-shaped content, which is an instantiation of CapsuleData;

[0242] external: content in the form of a small folding external screen.

[0243] 3.CapsuleData is a capsule data object, which may include but is not limited to the following fields:

[0244] type: capsule type, such as text capsule CAPSULE_TYPE_TEXT, timer capsule CAPSULE_TYPE_TIMER, progress capsule

[0245] CAPSULE_TYPE_PROGRESS, status action capsule CAPSULE_TYPE_STATUS_ACTION;

[0246] status: Live capsule display status, 1 means capsule display, -1 means capsule display is ended;

[0247] icon: The icon of the live capsule, which can be the resource file name in the local resource path;

[0248] backgroundColor: the background color of the live capsule;

[0249] themeColor: The application theme color is used for tracing the hole and presenting a hole capsule. When calling liveViewManager, the third-party application passes the application theme color through the themeColor parameter. After receiving the parameter, the desktop application can stroke the hole according to the color value in themeColor.

[0250] Specifically, StatusActionCapsule is a status action capsule data structure that inherits CapsuleData. It may include but is not limited to the following fields:

[0251] type: capsule type, inherited from the parent class, value is CAPSULE_TYPE_STATUS_ACTION;

[0252] status: Live video capsule display status, inherited from the parent class, 1 means display, -1 means end display;

[0253] Icon: The icon of the live capsule, which inherits the parent class. Its value can be the resource file name under the local resource path;

[0254] backgroundColor: inherited from the parent class, capsule background color;

[0255] themeColor: inherits the parent class and applies the theme color, which is used to stroke the hole and present the hole capsule;

[0256] action: A unique field for state-action capsules. This field is used to indicate the callback function executed when the capsule receives a click action. This field can be used to indicate the action attributes of the capsule, such as turning off the flashlight, ending recording, and other system operations.

[0257] The component layer can include, but is not limited to, MetaBall components, text components, list components, and image components. MetaBall components can be used to display live windows such as live capsules; text components can be used to display text; list components can be used to display multiple elements in parallel; and image components can be used to display graphical UI elements such as icons.

[0258] Figure 20 A program calling process is shown, through which ecological applications can access capsule components with device adaptive capabilities.

[0259] like Figure 20 As shown, after the ecological application (such as a map application) switches to the background, the ecological application can call

[0260] LiveViewManager.startLiveView(LiveView) starts the capsule fusion or splitting animation and sets the capsule's shape content, such as the capsule's stroke, by filling in the incoming LiveView parameter. Furthermore, when an ecosystem app calls the startLiveView API, systemUI calls the startFusionBallAnimation(status, animationOptions, colors, stroke) API in the MetaBallController module to start the capsule fusion or splitting animation. The incoming parameters of the startFusionBallAnimation API are passed by systemUI.

[0261] SystemUI is the system human-computer interaction function (user interface, UI), which may include status bar, navigation bar, lock screen, notification panel, recent tasks and other functions. Its startup and initialization are completed during the power-on process of the electronic device. Figure 19 The interface layer in the software system shown.

[0262] The following example shows how the number of background tasks changes from zero to one, then to two, and then to three, to further explain the interface calls when the number of background tasks changes:

[0263] 1. Initialization phase

[0264] During the initialization phase of systemUI, to enable multi-device adaptive live capsule components, systemUI reads the current device's hole specifications (such as the number of holes, hole size, hole location, and hole shape) and uses these hole specifications to populate the incoming parameters of the MetaBall component interface to initialize the MetaBall component. In addition to the hole specifications, the incoming parameters of the MetaBall component interface can also include: MetaBallController and onCapsuleClick. Among them, MetaBallController is the animation controller, which calls the animation playback controller startFusionBallAnimation; onCapsuleClick is the callback function executed when the capsule receives a click event.

[0265] 2. The first background task arrives

[0266] For example, after a user places an order in a food delivery app, the app is moved to the background. The app can call LiveViewManager.startLiveView(LiveView) to start the capsule merging or splitting animation, passing in the LiveView parameter. LiveView must be populated with liveViewData. The capsule field in liveViewData defines the capsule's display appearance. If you need to display more app information using cards, you can also configure the primary field in liveViewData.

[0267] The startLiveView interface in the LiveViewManager module implements the startFusionBallAnimation interface in the MetaBallController module. When the food delivery app calls the startLiveView interface, the systemUI calls the startFusionBallAnimation(status, animationOptions, colors, stroke) method in the MetaBallController module and fills in the passed parameters to start the relevant animation effects for capsule fusion or splitting.

[0268] Taking the fusion of three physical holes into a capsule as an example, the input parameters of the startFusionBallAnimation interface can be configured as follows:

[0269] Status can be configured as: [1,1,1], which means that each physical hole participates in capsule fusion, and three physical holes are fused into one capsule;

[0270] animationOptions can be configured as: {duration:500}, which indicates the duration of the fusion animation, such as 500 milliseconds;

[0271] Colors can be configured as: [Color.Green], which means the stroke color of the fused capsule is green. Green is the theme color of the food delivery app.

[0272] The stroke can be configured as: 5, which means the stroke width of the fused capsule, such as 5 pixels.

[0273] The dynamic effect of the above parameter constraints can be: three physical holes are fused into a capsule through collision and adhesion (see Figures 8A-8E ), and the edge of the capsule has a green stroke of 5 pixels.

[0274] 3. The second background task arrives

[0275] For example, a user might keep their ride-hailing app open and, after placing an order, switch it to the background. The ride-hailing app can call LiveViewManager.startLiveView(LiveView) to start the capsule merging or splitting animation, passing in the LiveView parameter. LiveView must be populated with liveViewData, and the capsule field in liveViewData defines the capsule's appearance. If you need to display more app information using cards, you can also configure the primary field in liveViewData.

[0276] When the ride-hailing app calls the startLiveView API, systemUI calls the startFusionBallAnimation(status, animationOptions, colors, stroke) method in the MetaBallController module to start the transition animation from one background task to two background tasks hidden in the hole. The parameters passed to the startFusionBallAnimation API can be configured as follows:

[0277] Status can be configured as: [1,1,0], which means that the original long capsule is split into a short capsule and a hole, and the two physical holes on the left are merged into the short capsule;

[0278] animationOptions can be configured as: {duration:500}, which indicates the duration of the fusion animation, such as 500 milliseconds;

[0279] The colors can be configured as: [Color.Orange, Color.Green], which means the stroke color of the left capsule is orange and the stroke color of the right capsule is green. Orange and green are the theme colors of the taxi app and food delivery app respectively.

[0280] The stroke can be configured as: 5, which means the stroke width of the capsule, such as 5 pixels.

[0281] The dynamic effect of the above parameter constraints can be: the original long capsule is split into a short capsule and a hole. The appearance after the split can be referred to Figure 5C As shown, the stroke color of the short capsule on the left is orange, and the stroke color of the hole on the right is green.

[0282] 4. The third background task arrives

[0283] For example, if the user keeps the Maps app open and starts navigation, the app moves it to the background. The ride-hailing app can call LiveViewManager.startLiveView(LiveView) to start the capsule splitting animation, passing in the LiveView parameter. LiveView must be populated with liveViewData, and the capsule field in liveViewData defines the capsule's appearance. If you need to display more app information using cards, you can also configure the primary field in liveViewData.

[0284] When the map application calls the startLiveView API, the systemUI responds to the startLiveView API call and calls the startFusionBallAnimation(status, animationOptions, colors, stroke) method in the MetaBallController module again to start the animation of switching the background tasks hidden in the hole from two background tasks to three background tasks. The input parameters of the startFusionBallAnimation API can be configured as follows:

[0285] Status can be configured as: [0,0,0], which means the original short capsule is split into two holes;

[0286] animationOptions can be configured as: {duration:500}, which indicates the duration of the fusion animation, such as 500 milliseconds;

[0287] Colors can be configured as: [Color.Blue, Color.Orange, Color.Green], which means the stroke colors of the three holes from left to right are blue, orange, and green respectively; among them, blue, orange, and green are the application theme colors of the map application, taxi application, and food delivery application respectively;

[0288] The stroke can be configured as: 5, which means the stroke width of the capsule, such as 5 pixels.

[0289] The dynamic effect of the above parameter constraints can be: the original short capsule is also split into two holes, and the appearance of the three holes after splitting can be seen in Figure 5A The stroke colors of the three holes from left to right are blue, orange, and green respectively.

[0290] An embodiment of the present application further provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the steps in the above-mentioned method embodiments can be implemented.

[0291] The embodiments of the present application also provide a computer program product, which, when executed by a processor, can implement all the steps in the above-mentioned method embodiments.

[0292] The present application also provides a chip system, comprising a processor coupled to a memory, which executes a computer program stored in the memory. When executed by the processor, the computer program implements all of the steps in each of the above method embodiments. The chip system can be a single chip or a chip module composed of multiple chips.

[0293] Those skilled in the art will appreciate that, in one or more of the above examples, the functions described in the embodiments of the present application may be implemented using hardware, software, firmware, or any combination thereof. When implemented using software, these functions may be stored in a computer-readable medium or transmitted as one or more instructions or codes on a computer-readable medium.

[0294] The above specific implementation methods further explain in detail the purpose, technical solutions and beneficial effects of the embodiments of the present application. It should be understood that the above are only specific implementation methods of the embodiments of the present application and are not intended to limit the scope of protection of the embodiments of the present application. Any modifications, equivalent replacements, improvements, etc. made on the basis of the technical solutions of the embodiments of the present application should be included in the scope of protection of the embodiments of the present application.

Claims

1. A display method, said method being applied to an electronic device, characterized in that: include: Displaying the interface of the first application on the screen; receiving a first operation, where the first operation is used to switch the first application to background operation; In response to a first operation, switching the first application to run in the background, and displaying a first stroke at an edge of the first hole on the screen, where the first stroke is used to indicate that the first application is running in the background; detecting a second operation, where the second operation is used to display real-time information of the first application; In response to the second operation, first real-time information of the first application is displayed in a first area on the screen, where the first area is adjacent to the first hole.

2. The method according to claim 1, wherein Also includes: receiving a third operation, where the third operation is used to switch the second application to background operation; In response to the third operation, the second application is switched to run in the background, and a second stroke is displayed on the edge of the first hole, where the second stroke is used to indicate that the second application is running in the background.

3. The method according to claim 2, wherein Before displaying a second stroke on the edge of the first hole, the method further includes: The real-time information of the first application is stopped from being displayed in the first area, and the real-time information of the second application is displayed in the first area.

4. The method according to claim 1, wherein Also includes: receiving a third operation, where the third operation is used to switch the second application to background operation; In response to the third operation, the second application is switched to background operation, the first hole is split into a second hole and a third hole, the second stroke is displayed at the edge of the second hole, and the first stroke is displayed at the edge of the third hole.

5. The method according to claim 4, wherein Before splitting the first hole into the second hole and the third hole, the method further includes: The stroke of the first hole is decomposed into a first portion and a second portion, wherein the first portion is consistent with the appearance of the first stroke, and the second portion is consistent with the appearance of the second stroke.

6. The method according to claim 4 or 5, characterized in that Also includes: receiving a fourth operation, where the fourth operation is used to switch the first application to the foreground; In response to the fourth operation, the interface of the first application is displayed, the second hole and the third hole are merged into the first hole, and the second stroke is displayed on the edge of the first hole.

7. The method according to claim 6, wherein Also includes: receiving the first operation; In response to the first operation, the first application is switched to background operation, the first hole is decomposed into the second hole and the third hole, and the first stroke is displayed at the edge of the second hole and the second stroke is displayed at the edge of the third hole.

8. The method according to any one of claims 4 to 7, wherein Also includes: receiving a fifth operation, where the fifth operation is used to display real-time information of the first application; In response to the fifth operation, real-time information of the first application is displayed in the first area, the second hole and the third hole are merged into a first hole, and the second stroke is displayed at an edge of the first hole.

9. The method according to claim 8, wherein Also includes: receiving a sixth operation for hiding the real-time information of the first application; In response to the sixth operation, stop displaying the real-time information of the first application in the first area, decompose the first hole into the second hole and the third hole, display the first stroke at the edge of the second hole, and display the second stroke at the edge of the third hole.

10. The method according to any one of claims 1 to 9, wherein The first stroke is used to indicate that the first application is running in the background, including: a color of the first stroke is consistent with an application theme color of the first application.

11. The method according to any one of claims 2 to 9, wherein The second stroke is used to indicate that the second application is running in the background, including: a color of the second stroke is consistent with an application theme color of the second application.

12. The method according to claim 6 or 7, wherein: The fusion comprises: Between adjacent holes, synapses connecting the adjacent holes are displayed, and the synapses are dark in color; The synapse is gradually enlarged until the thickened synapse and the plurality of pores are merged in appearance into the capsule-shaped pores.

13. The method according to claim 12, wherein: If the number of the holes is three or more, the fusion further comprises: gradually enlarging the middle hole when gradually enlarging the synapse.

14. The method according to claim 7, wherein The decomposition includes gradually shrinking the synapse until the synapse disappears.

15. The method according to claim 14, wherein If the number of the holes is more than three, the decomposition further includes: gradually reducing the middle hole when gradually reducing the synapse.

16. The method according to any one of claims 1 to 15, wherein after displaying the first real-time information of the first application in the first area on the screen, the method further comprises: Receive the seventh operation; According to the seventh operation, the real-time information of the first application is first stopped from being displayed in the first area through the first component, and then the real-time information of the first application is displayed in the second area of ​​the screen through the second component.

17. The method according to claim 16, wherein When the real-time information of the first application is first stopped from being displayed in the first area by using the first component, and the real-time information of the first application is then displayed in the second area of ​​the screen by using the second component, the method further includes: First, a process of the expanded live capsule being retracted into the hole is displayed, and then a process of the service card of the first task being expanded outward from the hole is displayed.

18. The method according to claim 17, wherein Also includes: After the service card for the first task is unfolded from the hole, an eighth user operation is detected; According to the eighth user operation, the process of the service card of the first task being retracted into the hole is first displayed, and then the process of the live capsule of the first task being expanded outward from the hole is displayed.

19. The method according to claim 17 or 18, wherein: After the service card for the first task is unfolded from the hole, the hole presents a first appearance, the first appearance being related to the appearance of the service card for the first task; The method further comprises: detecting a user operation of sliding the service card of the first task along a first direction; According to the user operation of sliding the service card of the first task along the first direction, the service card of the first task exits the screen along the first direction, and the service card of the second task enters the screen along the first direction; The first appearance is related to the appearance of the service card of the first task, including: the color of the stroke of the hole is the same as the theme color of the service card of the first task.

20. The method according to claim 19, wherein When the service card displaying the first task exits the screen along the first direction and the service card displaying the second task enters the screen along the first direction, the method further includes: When the service card of the second task first enters the screen, an icon of the second task is added to a first side of the hole, where the first side is the side where the service card of the second task enters the screen; When the service card of the second task is displayed more on the screen than the service card of the first task, setting the appearance of the cutout to a second appearance, and displaying the icon of the first task on a second side of the cutout, wherein the second appearance is related to the appearance of the service card of the second task, and the second side is the side where the first task exits the screen; The second appearance is related to the appearance of the service card of the second task, including: the color of the stroke of the hole is the same as the theme color of the service card of the second task.

21. The method according to any one of claims 1 to 20, wherein Also includes: When displaying the real-time information of the first task in the expanded live capsule, a preset control corresponding to the first task is also displayed in the expanded live capsule; A user operation acting on the preset control is detected, and a preset function corresponding to the preset control is executed.

22. An electronic device, characterized in that: include: A processor, a memory, and a computer program stored in the memory, wherein the processor executes the computer program to implement the steps of the method according to any one of claims 1 to 21.

23. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 21 are implemented.

24. A computer program product comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 21 are implemented.

Images