Display method and electronic device

Abstract

Disclosed in the embodiments of the present application are a display method and an electronic device. In the method, combined display is formed between a plurality of live capsules and a plurality of screen cutouts, and a user can learn of, by means of outline appearances of the cutouts, different tasks that are currently running in the background, and can choose, by means of tapping a corresponding cutout, to expand the live capsule of a certain task, so as to view real-time information of the task. In this way, the linkage between live capsules and cutouts can be realized during user interaction, the live capsules and the cutouts are no longer isolated, and the cutouts can be fully utilized to display the live capsules, thereby increasing the available display space of a status bar and supporting simultaneous display of live capsules of a plurality of tasks; and when the live capsules of the plurality of tasks are simultaneously displayed, different cutouts can be used for linking with the live capsules of different tasks, such that the user can open the live capsules of different tasks by means of operating (e.g., tapping) different cutouts, thereby improving the interactive experience of the live capsules in the case of the plurality of tasks.

Description

Display methods and electronic devices

[0001] This application claims priority to Chinese Patent Application No. 202510207336.3, filed with the China National Intellectual Property Administration on February 21, 2025, entitled "Display Method and Electronic Device", and priority to Chinese Patent Application No. 202510433330.8, filed with the China National Intellectual Property Administration on April 7, 2025, entitled "Display Method and Electronic Device", the entire contents of which are incorporated herein by reference. Technical Field

[0002] This application relates to the field of computer technology, and more particularly to display methods and electronic devices. Background Technology

[0003] With the increasing number of applications installed on mobile phones, tablets, and other electronic devices, users often need to remain on the task's execution interface after starting a task within that application to stay updated on its real-time information. When users switch to the desktop or another application, they need to switch back to the task's execution interface or actively check the notification center for its real-time information. This results in users not being able to access task information promptly and often requires frequent interface switching, leading to low operational efficiency. Summary of the Invention

[0004] This application provides a display method and electronic device that enables linkage between Live Capsule and punch-hole in user interaction. Live Capsule and punch-hole are no longer separate, and the punch-hole can be fully utilized to display Live Capsule, increasing the available display space of the status bar and supporting the simultaneous display of Live Capsule for multiple tasks. When displaying Live Capsule for multiple tasks simultaneously, different punch-holes can be used to link Live Capsule for different tasks, allowing users to open Live Capsule for different tasks by operating (e.g., clicking) different punch-holes, thus improving the interactive experience of Live Capsule in multi-tasking situations.

[0005] In a first aspect, embodiments of this application provide a display method, which may include: an electronic device displaying an interface of a first application on a screen; the electronic device receiving a first operation to switch the first application to background operation; in response to the first operation, the electronic device switching the first application to background operation and displaying a first outline at the edge of a first punch-hole on the screen, the first outline indicating that the first application is running in the background. The electronic device may also detect a second operation to display real-time information of the first application; in response to the second operation, the electronic device displaying first real-time information of the first application in a first area on the screen, the first area being adjacent to the first punch-hole.

[0006] In the first aspect, the first punch-hole can be a physical punch-hole, or a fused punch-hole formed by combining a dark area displayed on the screen with a physical punch-hole, such as a capsule-shaped punch-hole. The second operation can be a user operation applied to the first punch-hole.

[0007] In the first aspect, when displaying real-time information of the first application in the first area, the electronic device stops displaying the first outline 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.

[0008] In conjunction with the first aspect, in some embodiments, the electronic device may also receive a third operation for switching the second application to run in the background; in response to the third operation, the electronic device may also switch the second application to run in the background.

[0009] In conjunction with the first aspect, in some embodiments, in response to the third operation, the electronic device may also display a second outline at the edge of the first punch-hole, the second outline being used to indicate that the second application is running in the background.

[0010] This punch-hole outline method is suitable for the following scenario: the first punch-hole only surrounds one physical punch-hole. In this scenario, the new background task will displace the old background task, meaning that only the outline of the new task is present at the first punch-hole.

[0011] Specifically, before the second outline appears at the edge of the first punch-hole, the electronic device can stop displaying the live information of the first application in the first area and display the live information of the second application in the first area. In this way, before the live capsule of the second application is hidden in the screen punch-hole, the user can still observe the live information of the second application in the first area, thus understanding what the live information will be subsequently hidden in the screen punch-hole.

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

[0013] This hole-cutting outline 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 hole splitting.

[0014] Specifically, before splitting the first punch hole into the second punch hole and the third punch hole, the electronic device can also decompose the outline of the first punch hole into a first part and a second part, the first part having the same appearance as the first outline and the second part having the same appearance as the second outline.

[0015] After the second application is switched to the background, the electronic device can also receive a fourth operation to switch the first application to the foreground. In response to the fourth operation, the electronic device can display the interface of the first application, merge the second and third punch-holes into a single punch-hole, and display a second outline on the edge of the first punch-hole. Thus, when the user switches the first application from the background to the foreground, the original two punch-holes will merge into one, and the punch-hole outline will only indicate the second application.

[0016] After the first application is switched to the foreground, the electronic device can receive the first operation again, i.e., the user switches the first application to the background again. In response to the first operation, the first application can be switched to the background again, and the first punch-hole is split into a second punch-hole and a third punch-hole. The first stroke is displayed on the edge of the second punch-hole, and the second stroke is displayed on the edge of the third punch-hole. In this way, the first application becomes the most recently switched application to the background, and the strokes of the second and third punch-holes are swapped. The edge of the second punch-hole no longer displays the second stroke but displays the first stroke, and the edge of the third punch-hole no longer displays the first stroke but displays the second stroke. By swapping the strokes of the two punch-holes, the user can understand that the order of the background applications has changed.

[0017] In conjunction with the first aspect, in some embodiments, the electronic device may also receive a fifth operation for displaying real-time information of the first application; in response to the fifth operation, the electronic device may display the real-time information of the first application in a first area, merging the second and third punch holes into a first punch hole, and displaying a second outline at the edge of the first punch hole. Thus, after the two punch holes are separated, if the user expands the real-time information of one of the tasks, punch hole merging will occur, and the merged punch hole can indicate the other unexpanded task.

[0018] 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 punch-hole into a second punch-hole and a third punch-hole, display a first outline on the edge of the second punch-hole, and display a second outline on the edge of the third punch-hole. Thus, when the capsule is unfolded and then retracted, the punch-hole decomposition occurs, and each decomposition can indicate different background tasks.

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

[0020] Specifically, the second stroke can 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 of the second application. Here, consistency can 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.

[0021] In conjunction with the first aspect, in some embodiments, the electronic device may also receive a seventh operation, such as a user operation of touching the first punch-hole 71. In response, the display of real-time information of the first application in the first area via the first component may be stopped first, a first outline may be displayed at the edge of the first punch-hole 71, and then the real-time information of the first application may be displayed in the second area of ​​the screen via the second component.

[0022] The second component can differ from the first component. It can present richer content than the first component. The first component can be a capsule-like component, such as a live capsule, while the second component can be a card-like component, such as a service card. Alternatively, the second component can be the same as the first component, such as both being capsule-like components.

[0023] In conjunction with the first aspect, in some embodiments, the electronic device can obtain the application theme color of the live window's ecosystem applications (such as the first application and the second application) and use it for the stroke color of the corresponding punch-hole. When a user operation to switch an application to the background is detected, the electronic device can set the stroke color of the punch-hole to the application theme color of the corresponding background application through the system UI human-computer interaction function.

[0024] Specifically, third-party applications can call the interface of the desktop application of electronic devices (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 the field, it sets the outline color of the punch-hole according to the theme color of the third-party application.

[0025] In conjunction with the first aspect, in some embodiments, the fusion process includes: displaying synapses connecting adjacent holes between adjacent holes, the synapses being dark in color; gradually increasing the size of the synapses until the thickened synapses and multiple holes are visually fused into a capsule-shaped hole.

[0026] In conjunction with the first aspect, in some embodiments, after multiple punch holes are merged into a capsule-shaped punch hole, the electronic device can also display on the screen the process of the capsule-shaped punch hole being decomposed into multiple punch holes as the number of real-time tasks increases; wherein, after decomposition, the real-time tasks are indicated by the outlines of the decomposed multiple punch holes.

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

[0028] In conjunction with the first aspect, in some embodiments, if the number of holes is three or more, the fusion process further includes: gradually increasing the size of the intermediate hole as the synapse is gradually enlarged.

[0029] In conjunction with the first aspect, in some embodiments, if the number of holes is three or more, the decomposition process further includes: gradually reducing the size of the intermediate hole while gradually reducing the size of the synapse.

[0030] In conjunction with the first aspect, in some embodiments, when the live capsule of the first task is displayed outside the cutout, the electronic device can also detect a user operation performed on the cutout; based on the user operation, the process of the unfolded live capsule being retracted into the cutout can be displayed first, and then the process of the service card of the first task unfolding outward from the cutout can be displayed.

[0031] In conjunction with the first aspect, in some embodiments, the electronic device can also detect a user operation to retract the service card after the service card of the first task unfolds from the cutout; 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 cutout, and then display the process of the live capsule of the first task unfolding outward from the cutout.

[0032] In conjunction with the first aspect, in some embodiments, after the service card of the first task unfolds from the cutout, the cutout presents a first appearance, which is related to the appearance of the service card of the first task. The electronic device can also detect a user operation of sliding the service card of the first task along a first direction; based on this user operation, the electronic device can display the process of the service card of the first task exiting the screen along the first direction and the service card of the second task entering the screen along the first direction; wherein, the first appearance being related to the appearance of the service card of the first task includes: the outline color of the cutout being the same as the theme color of the service card of the first task.

[0033] In conjunction with the first aspect, in some embodiments, during the process of displaying the service card of the first task exiting the screen along the first direction and the service card of the second task entering the screen along the first direction, the electronic device may further add an icon of the second task to the first side of the cutout when the service card of the second task enters the screen, the first side being 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 cutout is set to a second appearance, and the icon of the first task is displayed on the second side of the cutout, the second appearance being related to the appearance of the service card of the second task, the second side being the side where the first task exits the screen; wherein, the second appearance being related to the appearance of the service card of the second task includes: the color of the outline of the cutout being the same as the theme color of the service card of the second task.

[0034] In conjunction with the first aspect, in some embodiments, when displaying real-time information of the first task in the unfolded live capsule, the electronic device may also display a preset control corresponding to the first task in the unfolded live capsule; and when a user operation on the preset control is detected, a preset function corresponding to the preset control is executed.

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

[0036] Secondly, embodiments of this application provide a display method applied to an electronic device, characterized in that the screen of the electronic device has one or more front-facing punch-holes; the method may include:

[0037] Electronic devices hide multiple live capsules of real-time tasks in the cutout, and indicate the live capsules of multiple real-time tasks running in the background through the outline of the cutout.

[0038] The electronic device detects the first operation of unfolding the live capsule of the first task. The first task belongs to multiple tasks. The first operation is applied to the cutout of the live capsule that hides the first task.

[0039] According to the first operation, the electronic device unfolds the live capsule of the first task outward from the hole operated by the first operation and displays the real-time information of the first task in the unfolded live capsule.

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

[0041] A live capsule of a live task is hidden in a punch-hole, and the appearance of the punch-hole's outline is related to the application appearance of the live task.

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

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

[0044] Multiple punch-hole displays a dark area, which combines with the multiple punch-holes to form a capsule-shaped punch-hole on the screen. The outline of the capsule-shaped punch-hole indicates a live capsule of a real-time task hidden within it. The appearance of the outline of the capsule-shaped punch-hole is related to the application appearance of a real-time task.

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

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

[0047] The screen displays a dark area surrounded by multiple punch-hole displays. This dark area, combined with the multiple punch-holes, forms a unified capsule-shaped punch-hole on the screen. The outline of the capsule-shaped punch-hole is divided into multiple segments, each segment displaying a live capsule of multiple real-time tasks hidden within the punch-hole. The appearance of each segment of the outline is related to the application appearance of the multiple real-time tasks. Specifically, the color of each segment of the outline is the same as the application theme color of the multiple real-time tasks.

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

[0049] Multiple punch holes are divided into multiple groups, and one or more consecutive punch holes constitute a group of punch holes. One or more live capsules of real-time tasks are hidden in each group of punch holes. The stroke of each group of punch holes indicates the live capsule of the real-time task hidden in each group of punch holes. The appearance of the stroke of each group of punch holes is related to the application appearance of its corresponding real-time task.

[0050] The appearance of the outline of a set of punch holes is related to the application appearance of its corresponding real-time task, including: the color of the outline of a set of punch holes is the same as the application theme color of its corresponding real-time task.

[0051] In conjunction with the second aspect, in some embodiments, when the number of live capsules hidden at the physical cutout is greater than the number of physical cutouts, the electronic device may also add a display simulated cutout near the physical cutout; hide multiple live capsules of real-time tasks at the physical cutout and simulated cutout respectively, and indicate the multiple live capsules of real-time tasks hidden by the outlines of the physical cutout and simulated cutout.

[0052] In conjunction with the second aspect, in some embodiments, when the number of real-time tasks is reduced, the electronic device can also display on the screen the process of multiple punch holes merging into a capsule-shaped punch hole; wherein, before merging, the real-time tasks are indicated by the outlines of the multiple punch holes; after merging, the real-time tasks are indicated by the outlines of the capsule area.

[0053] In conjunction with the second aspect, in some embodiments, the fusion process includes: displaying synapses connecting adjacent holes between adjacent holes, the synapses being dark in color; gradually increasing the size of the synapses until the thickened synapses and multiple holes are visually fused into a capsule-shaped hole.

[0054] In conjunction with the second aspect, in some embodiments, after multiple punch holes are merged into a capsule-shaped punch hole, the electronic device can also display on the screen the process of the capsule-shaped punch hole being decomposed into multiple punch holes as the number of real-time tasks increases; wherein, after decomposition, the real-time tasks are indicated by the outlines of the decomposed multiple punch holes.

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

[0056] In conjunction with the second aspect, in some embodiments, if the number of holes is three or more, the fusion process further includes: gradually increasing the size of the intermediate hole as the synapse is gradually enlarged.

[0057] In conjunction with the second aspect, in some embodiments, if the number of holes is three or more, the decomposition process further includes: gradually reducing the size of the intermediate hole while gradually reducing the size of the synapse.

[0058] In conjunction with the second aspect, in some embodiments, when the unfolded live capsule of the first task is displayed outside the cutout, the electronic device can also detect a user operation performed on the cutout; based on the user operation, the process of the unfolded live capsule being retracted into the cutout can be displayed first, and then the process of the service card of the first task unfolding outward from the cutout can be displayed.

[0059] In conjunction with the second aspect, in some embodiments, the electronic device can also detect a user operation to retract the service card after the service card of the first task unfolds from the cutout; 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 cutout, and then display the process of the live capsule of the first task unfolding outward from the cutout.

[0060] In conjunction with the second aspect, in some embodiments, after the service card of the first task unfolds from the cutout, the cutout presents a first appearance, which is related to the appearance of the service card of the first task. The electronic device can also detect a user operation of sliding the service card of the first task along a first direction; based on this user operation, the electronic device can display the process of the service card of the first task exiting the screen along the first direction and the service card of the second task entering the screen along the first direction; wherein, the first appearance being related to the appearance of the service card of the first task includes: the color of the outline of the cutout being the same as the theme color of the service card of the first task.

[0061] In conjunction with the second aspect, in some embodiments, during the process of the service card of the first task exiting the screen along the first direction and the service card of the second task entering the screen along the first direction, the electronic device may further add an icon of the second task to the first side of the cutout when the service card of the second task enters the screen. 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 cutout is set to a second appearance, and the icon of the first task is displayed on the second side of the cutout. 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 being related to the appearance of the service card of the second task includes: the color of the outline of the cutout is the same as the theme color of the service card of the second task.

[0062] In conjunction with the second aspect, in some embodiments, when displaying real-time information of the first task in the unfolded live capsule, the electronic device can also display a preset control corresponding to the first task in the unfolded live capsule; and when a user operation on the preset control is detected, the preset function corresponding to the preset control is executed.

[0063] Thirdly, embodiments of this application provide an electronic device that 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 to implement the steps of the method described in the second aspect or any implementation thereof.

[0064] Fourthly, embodiments of this application provide a computer-readable storage medium storing a computer program thereon, characterized in that, when executed by a processor, the computer program can implement the steps of the method described in the first aspect or any implementation thereof, or can implement the steps of the method described in the second aspect or any implementation thereof.

[0065] Fifthly, embodiments of this application provide a computer program product, including a computer program, characterized in that, when executed by a processor, the computer program can implement the steps of the method described in the first aspect or any implementation thereof, or can implement the steps of the method described in the second aspect or any implementation thereof. Attached Figure Description

[0066] To more clearly illustrate the technical solutions in the embodiments of this application or the background art, the accompanying drawings used in the embodiments of this application or the background art will be described below.

[0067] Figures 1A-1C illustrate several typical applications of the Live Capsule;

[0068] Figure 2 illustrates the overall flow of the display method provided in the embodiments of this application;

[0069] Figure 3 illustrates, for example, the human-computer interaction of a live capsule with multiple tasks hidden and unfolded at multiple cutouts;

[0070] Figure 4 illustrates, for example, the different appearances of the cutout outline represented by dashed lines of different styles;

[0071] Figure 5A illustrates one implementation of a live capsule that hides a task at each of the cutouts A, B, and C;

[0072] Figure 5B illustrates one implementation of a live capsule that hides a single task at holes A, B, and C.

[0073] Figure 5C illustrates one implementation of a live capsule that hides two tasks at holes A, B, and C.

[0074] Figure 5D illustrates an alternative implementation of a live capsule that hides two tasks at holes A, B, and C.

[0075] Figure 5E illustrates one implementation of a live capsule that hides two tasks at cutout B;

[0076] Figures 6A-6B exemplarily illustrate how a live capsule indicates multiple tasks hidden at the cutout location through multi-layered outlines of the cutout;

[0077] Figure 7A illustrates an exemplary method of merging three physical holes A, B, and C into a single capsule-shaped hole.

[0078] Figure 7B illustrates, for example, how two physical holes A and B are merged into a single capsule-shaped hole;

[0079] Figures 8A-8E exemplarily illustrate the dynamic process of three physical holes merging into a capsule-shaped hole;

[0080] Figures 9A-9E exemplify the seamless, continuous motion effects between the Live Capsule and the Service Card;

[0081] Figures 10A-10D exemplarily illustrate the process of switching service cards via a swipe operation;

[0082] Figure 11A illustrates an example of how to add an end button to the expanded live capsule of a screen recording task;

[0083] Figure 11B illustrates, for example, how to add a shut-off button to the unfolded live capsule of the flashlight task;

[0084] Figure 12A illustrates, for example, how the expanded live capsule of a screen recording task collapses into an end button;

[0085] Figure 12B illustrates, for example, how the unfolded live capsule of the flashlight task retracts into a shut-off button;

[0086] Figure 12C illustrates an example of how the expanded live capsule of the screen casting task collapses into a start screen casting button;

[0087] Figures 13A-13E illustrate a specific implementation of the display method provided in an embodiment of this application;

[0088] Figures 14A-14E illustrate a specific implementation of the display method provided in an embodiment of this application;

[0089] Figures 15A-15C illustrate a further implementation of the display method provided in the embodiments of this application;

[0090] Figures 16A-16C show capsules used to display temporary notifications from the application;

[0091] Figure 17 illustrates the dynamic change process of a capsule shape;

[0092] Figure 18 illustrates the electronic device 100 provided in an embodiment of this application;

[0093] Figure 19 illustrates a software system provided in an embodiment of this application;

[0094] Figure 20 illustrates a program call flow. Detailed Implementation

[0095] The terminology used in the following embodiments of this application is for the purpose of describing particular embodiments only and is not intended to be a limitation of this application.

[0096] Live Capsule is a type of live view window, named for its capsule-like shape. When an app that supports Live Capsule is switched to the home screen or another app, a Live Capsule appears in the status bar. The Live Capsule displays a summary of the app's current task in real time, such as call duration, timer countdown time, and food delivery status. For example, as shown in Figure 1A, after starting recording, the user can see the recording duration (e.g., 3 seconds) through the Live Capsule. As shown in Figure 1B, during a call, even when switched to the home screen, the user can see the call duration (e.g., 11 minutes and 49 seconds) through the Live Capsule. As shown in Figure 1C, after placing an order through a food delivery app, the user can see the delivery status (e.g., "Delivering") through the Live Capsule even when switched to the home screen. This allows users to easily grasp the real-time progress of their tasks without frequently switching apps, making it convenient to stay informed about real-time information.

[0097] However, as shown in Figures 1A-1C, the Pro Evolution Soccer Capsules 11B, 12B, and 13B are visually disconnected from the screen cutouts 11A, 12A, and 13A. The Pro Evolution Soccer Capsules must avoid these cutouts to be displayed, resulting in insufficient available display space in the status bar. Furthermore, the position and number of screen cutouts may differ across devices, leading to a inconsistent user experience across different devices due to varying placement and number of cutouts. For example, in Figure 1A, there are three screen cutouts 11A centered, and Pro Evolution Soccer Capsules 11B are displayed on the left; in Figure 1B, there are two cutouts 12A centered, and Pro Evolution Soccer Capsules 12B are displayed in the center; in Figure 1C, there is only one cutout 13A centered, and Pro Evolution Soccer Capsules 13B are displayed on the left.

[0098] This application provides a display method that enables linkage between Live Capsule and punch-hole in user interaction. Live Capsule and punch-hole are no longer separate, and the punch-hole can be fully utilized to display Live Capsule, increasing the available display space of the status bar and supporting the simultaneous display of Live Capsule for multiple tasks. When displaying Live Capsule for multiple tasks simultaneously, different punch-holes can be used to link Live Capsule for different tasks, allowing users to open Live Capsule for different tasks by operating (e.g., clicking) different punch-holes, thus improving the interactive experience of Live Capsule in multi-tasking situations.

[0099] This application does not limit the shape of the live capsule; it can be transformed into other shapes, such as rectangular, L-shaped, etc.

[0100] Figure 2 illustrates the overall flow of the display method provided in this application embodiment. This method can be applied to electronic devices such as mobile phones and tablets. The screen of such electronic devices may have one or more physical cutouts, which can be used to house part or all of devices such as cameras, proximity sensors, etc., such as the lens portion of a front-facing camera.

[0101] As shown in Figure 2, the display method provided in this application embodiment may include the following steps:

[0102] S11. The electronic device can hide multiple live capsules of tasks in the cutout, and indicate the live capsules of these multiple tasks hidden in the cutout by the outline of the cutout.

[0103] S12. A user action is detected that unfolds the live capsule of the first task. This user action can be applied to the cutout that hides the first task, which belongs to the aforementioned multiple tasks.

[0104] S13. Based on the user's operation, unfold the live capsule of the first task outward from the hole where the user's operation is performed, and display the real-time information of the first task in the unfolded live capsule.

[0105] For example, as shown in Figure 3, the electronic device hides live capsules for the three tasks "Milk Tea Order Reminder", "Ride-hailing Progress Reminder", and "Travel Order Reminder" at cutouts A, B, and C, respectively. The outlines of cutouts A, B, and C have different appearances, and their outline appearances are related to the appearances of the three tasks mentioned above, which are used to indicate that live capsules 20, 21, and 22 for the three tasks "Milk Tea Order Reminder", "Ride-hailing Progress Reminder", and "Travel Order Reminder" are hidden at cutouts A, B, and C, respectively.

[0106] The three tasks, "milk tea order reminder," "ride-hailing progress reminder," and "travel order reminder," can belong to a specific milk tea purchasing app, a specific ride-hailing app, and a specific travel app, respectively.

[0107] The accompanying drawings in this application use dashed circles of different styles to represent different appearances of the punch-hole outline, as shown in Figure 4. The three different styles of dashed circles represent different colors of the punch-hole outline, a, b, and c, respectively. These colors can be extracted from the application theme colors of their respective tasks. In some cases, the application theme colors of different tasks may be the same. In this case, in order to distinguish between different tasks, SystemUI may assign different outline colors to different tasks, so that the punch-hole outline colors of different tasks are different, making it easier for users to distinguish them.

[0108] As shown in Figure 3, the user can swipe left on cutout A to expand the live capsule 20 for the "Milk Tea Order Reminder" task. In response, the electronic device expands the live capsule 20 from cutout A and displays real-time information such as order number "4517" to help the user understand the milk tea order number. As shown in Figure 3, the user can also swipe right on the expanded live capsule 20 to hide it back inside the cutout. In response, the electronic device hides the expanded live capsule 20 back inside cutout A and resets the appearance of cutout A to match the application theme of "Milk Tea Order Reminder," indicating that the live capsule for the "Milk Tea Order Reminder" task is hidden at cutout A.

[0109] After unfolding the live capsule of the first mission hidden in the cutout, the electronic device no longer needs to indicate the live capsule of the first mission by tracing the outline of the cutout.

[0110] In the example shown in Figure 3, when Live Capsule 20 is expanded, the electronic device can readjust the fusion shape between cutouts A, B, and C and the remaining Live Capsules, such as: cutouts A and B are used together to hide Live Capsule 21 for "Ride-hailing Progress Reminder," and cutout C is used to hide Live Capsule 22 for "Travel Order Reminder." How two or more cutouts can jointly hide a Live Capsule for a task will be explained in detail later and will not be discussed here.

[0111] In this way, multiple live capsules and multiple punch holes are combined to form a display. Users can see which different tasks are running in the background by looking at the outline of the punch holes, and can click on the corresponding punch hole to select and expand the live capsule of a certain task to view the real-time information of that task.

[0112] In this embodiment, the electronic device can surround a single cutout to display a live capsule, or surround multiple cutouts to display a single live capsule, or surround multiple cutouts to display multiple live capsules, and so on. When performing the aforementioned S11 step, the combined display strategy between the live capsule and the cutout may include, but is not limited to, one or more of the following:

[0113] Strategy 1: Hide a live capsule of a task within a cutout, displaying the outline of the cutout. The outline of the cutout indicates that the live capsule of this task is hidden within the cutout. The appearance of the cutout's outline is related to the application theme appearance of the task.

[0114] For example, as shown in Figure 5A, each of the cutouts A, B, and C hides a live capsule for a specific task: live capsule 20 for "Milk Tea Order Reminder," live capsule 21 for "Ride-Hailing Progress Reminder," and live capsule 22 for "Travel Order Reminder." The outline color of cutout A matches the application theme color for "Milk Tea Order Reminder," the outline color of cutout B matches the application theme color for "Ride-Hailing Progress Reminder," and the outline color of cutout C matches the application theme color for "Travel Order Reminder." In this way, users can identify which task's live capsule is hidden at each cutout by the color of its outline.

[0115] Strategy 1 can be applied to all cutouts, meaning that Strategy 1 is used for the combination of each cutout and the live capsule, and each cutout is combined with a live capsule for one mission. Strategy 1 can also be applied to some cutouts, meaning that only some cutouts are combined with the live capsule using Strategy 1, as shown in cutout C in Figure 5C below.

[0116] Strategy 2: Surround multiple punch-hole displays with a dark area. This dark area, combined with the multiple punch-holes, forms a unified capsule-shaped punch-hole on the screen. A live feed capsule for a task is hidden within this capsule-shaped punch-hole, and its outline is displayed, indicating that the task's live feed capsule is hidden within it. The appearance of the capsule-shaped punch-hole's outline is related to the application's appearance for that task. This relationship may include, but is not limited to, the color of the capsule-shaped punch-hole's outline being the same as the application's theme color for that task.

[0117] For example, as shown in Figure 5B, a dark area 25 is displayed surrounding the cutouts A, B, and C. The dark area 25 and the cutouts A, B, and C combine to form a visually integrated capsule-shaped cutout on the screen. The outline color of the capsule-shaped cutout 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-shaped cutout.

[0118] For example, as shown in Figure 5C, among the cutouts A, B, and C, a dark area 26 is selected to surround cutouts A and B. This dark area 26, combined with cutouts A and B, forms a visually unified capsule-shaped cutout on the screen. The outline color of this capsule-shaped area matches the application theme color of the "Ride-hailing Progress Reminder," indicating that a real-time capsule 21 for the "Ride-hailing Progress Reminder" is hidden within the capsule-shaped cutout. In the example of Figure 5C, the aforementioned strategy 1 is used between cutout C and the "Travel Order Reminder."

[0119] Strategy 2 can be applied to all hole-punches, forming a capsule-like hole-punch structure to hide a live capsule of a task, as shown in Figure 5B. Strategy 2 can also be applied to partial hole-punches, forming a capsule-like hole-punch structure to surround a portion of the hole-punch structure, as shown in Figure 5C.

[0120] Strategy 3: Surround multiple punch-hole displays with a dark area. This dark area, combined with multiple punch-holes, forms a unified capsule-shaped punch-hole on the screen. Live-action capsules for multiple tasks are centrally hidden within this capsule-shaped punch-hole. The outline of this capsule-shaped punch-hole is displayed, and its stroke is divided into multiple segments. These segments indicate the location of the live-action capsules for each task within the capsule-shaped punch-hole. The appearance of each segment of the outline is related to the application theme of each task. This relationship may include, but is not limited to, the color of each segment of the outline being the same as the application theme color of each task.

[0121] For example, as shown in Figure 5D, a dark area 25 is displayed surrounding the cutouts A, B, and C. The dark area 25, together with the cutouts A, B, and C, forms a visually integrated capsule-shaped cutout on the screen. The outline of this capsule-shaped cutout is divided into two segments. One segment is colored in the same color as the application theme color of "Ride-hailing Progress Reminder," and the other segment is colored in the same color as the application theme color of "Travel Order Reminder," to indicate that the capsule-shaped cutout hides the live capsule 2 of "Ride-hailing Progress Reminder" and the live capsule 22 of "Travel Order Reminder."

[0122] Strategy 3 can be applied to all drilling or to some drilling.

[0123] Strategy 4: Hide multiple live capsules of tasks within a cutout area, displaying the outline of the cutout. This outline is divided into multiple segments, each segment indicating which live capsule is hidden within the capsule-shaped cutout. The appearance of each segment is related to the application theme of the task. This relationship may include, but is not limited to, the color of each segment matching the application theme color of the task.

[0124] For example, as shown in Figure 5E, the outline of cutout B is divided into two segments. One segment is colored in the same color as the application theme color of "Ride Progress Reminder", and the other segment is colored in the same color as the application theme color of "Travel Order Reminder" to indicate that the live capsule 21 of "Ride Progress Reminder" and the live capsule 22 of "Travel Order Reminder" are hidden at cutout B.

[0125] Figure 5E illustrates the case where the screen has only one punch-hole. In fact, strategy 4 can also be applied to cases where the screen has multiple punch-holes; the punch-hole to which strategy 4 is applied can be one or more of these multiple punch-holes.

[0126] Strategies 3 and 4 described above can also achieve the runway appearance shown in Figures 6A and 6B, that is, forming multiple layers of outlines around the cutout to resemble a runway. These multiple layers of outlines indicate the presence of multiple task-related live capsules hidden within a cutout or a capsule-shaped cutout. For example, as shown in Figure 6A, there are two layers of outlines around the capsule-shaped cutout, and the colors of these two layers of outlines are consistent with the application theme colors of "Ride-hailing Progress Reminder" and "Travel Order Reminder," respectively, to indicate that the capsule-shaped cutout hides the live capsule 21 for "Ride-hailing Progress Reminder" and the live capsule 22 for "Travel Order Reminder." As another example, as shown in Figure 6B, there are two layers of outlines around cutout B, and the colors of these two layers of outlines are consistent with the application theme colors of "Ride-hailing Progress Reminder" and "Travel Order Reminder," respectively, to indicate that the cutout B hides the live capsule 21 for "Ride-hailing Progress Reminder" and the live capsule 22 for "Travel Order Reminder."

[0127] The punch holes mentioned above refer to physical punch holes. Electronic devices can also add virtual punch holes near the physical punch holes, such as black areas with the same shape as the physical punch holes, and hide the live capsules of multiple tasks within the physical and virtual punch holes. This technology is particularly effective when the number of tasks exceeds the number of physical punch holes. After adding virtual punch holes, the combination display strategy between the live capsules and punch holes (including physical and virtual punch holes) can still employ one or more of the strategies described above. The total number of punch holes after adding virtual punch holes is not limited in this application embodiment and can be determined according to actual application needs. For example, with only one physical punch hole, adding two virtual punch holes brings the total number of punch holes to three. Adding virtual punch holes can also be applied to situations where there are no punch holes, for example, where all three punch holes displayed on the screen are virtual punch holes. This allows for a consistent user experience across different electronic devices. For example, whether a device has three punch-holes, one punch-hole, or none at all, it can uniformly display three punch-holes and provide a consistent display logic for the Live Capsule based on the same number of punch-holes, offering a consistent user experience. This effect is particularly noticeable on foldable screens, such as a tri-fold screen with three screen sections. If this consistency is maintained when the folding form changes, a consistent and stable real-time information viewing experience can be provided to the user.

[0128] When there are multiple punch-holes, they can be divided into multiple groups, with one or more consecutive punch-holes constituting a group. Here, punch-holes can include physical punch-holes, virtual punch-holes, and capsule-like punch-holes. A group of punch-holes corresponds to one or more tasks. Electronic devices can hide one or more live capsules of tasks at each group of punch-holes, and the stroke of each group of punch-holes indicates the live capsule of the task hidden at each group. The appearance of the stroke of each group of punch-holes is related to the application theme appearance of its corresponding task. This appearance relationship may include, but is not limited to, the color of the stroke of a group of punch-holes being the same as the application theme color of its corresponding task. When a group of punch-holes contains only one punch-hole, the stroke of this group of punch-holes can be the stroke of that single punch-hole; when a group of punch-holes consists of multiple punch-holes, the stroke of this group of punch-holes can be the stroke of the capsule-like punch-holes surrounding these multiple punch-holes.

[0129] For the combined display of cutouts and live capsules, the same strategy can be used for each group of cutouts.

[0130] For example, as shown in Figure 5A, there are a total of three holes: holes A, B, and C. Holes A, B, and C each form a group, and all three groups employ the aforementioned strategy 1. The strategy used for each group of holes can be other strategies besides the one shown in Figure 5A. For another example, four holes are divided into two groups, both of which employ the aforementioned strategy 2 or strategy 3, and each group of holes is fused into a capsule-shaped hole. For yet another example, three holes are divided into three groups, and each group employs the aforementioned strategy 4. These examples are merely for explaining the embodiments of this application and should not be construed as limiting the scope of the application.

[0131] Different strategies can be used for different groups of holes to combine the display with the live capsule.

[0132] For example, as shown in Figure 5C, there are a total of three holes: holes A, B, and C. Holes A and B form one group, and hole C forms another. The first group uses strategy 2 described above, and the second group uses strategy 1 described above. Not limited to what is shown in Figure 5C, different strategies can be used for each group of holes in other forms. For example, in the example of Figure 5C, the first group of holes uses strategy 3 described above, and the second group uses strategy 4 described above. Another example is that four holes are divided into two groups, one using strategy 2 described above, and the other using strategy 3 described above. These examples are merely for explaining embodiments of this application and should not be construed as limiting the scope of the application.

[0133] In the case of multiple cutouts, the cutouts can also be divided into only one group, that is, visually forming an integrated capsule-shaped cutout that surrounds all the cutouts, and applying the above strategy 2 or strategy 3, as shown in Figure 5B, Figure 5D or Figure 5E.

[0134] The shape of the cutout can change dynamically, especially when the combination of live capsule and cutout display strategy changes. Physical cutouts can merge into capsule-shaped cutouts, and capsule-shaped cutouts can also split into physical cutouts. More details below.

[0135] 1. Multiple physical holes are merged into a capsule-shaped hole.

[0136] For example, as shown in Figure 7A, three physical punch holes A, B, and C can be merged into a single capsule-shaped punch hole 32. An electronic device can surround these three physical punch holes to display a dark area 31, and the dark area 31, combined with the three physical punch holes, forms the capsule-shaped punch hole 32. As another example, as shown in Figure 7B, two physical punch holes A and B can also be merged into a single capsule-shaped punch hole 34. An electronic device can surround these two physical punch holes to display a dark area 33, and the dark area, combined with the two physical punch holes, forms the capsule-shaped punch hole 34.

[0137] The dark area surrounding the physical punch-hole (e.g., 31 or 33) can appear gradually to create a more dynamic effect, transitioning from a physical punch-hole to a capsule-shaped punch-hole. For example, between adjacent physical punch-holes, dark synapses connecting them can be displayed, gradually increasing in size until the thickened synapses visually merge with the multiple punch-holes to form a capsule-shaped punch-hole. If there are three or more physical punch-holes, the central physical punch-hole can be gradually enlarged during the merging process as the synapses are added. Enlarging the central punch-hole refers to increasing the dark area surrounding it to visually create the effect of an enlarged central punch-hole, rather than physically increasing its size.

[0138] As shown in Figures 8A-8E, when the three physical holes are fused into a capsule-shaped hole, visually, the central hole gradually enlarges and moves downwards. Simultaneously, synapses form on both sides of the central hole, and synapses form on one side of the outline hole. After the synapses connect, the central hole gradually enlarges, and then gradually moves upwards back to its original position. Finally, the three holes are fused into a capsule-shaped hole. Figures 8A-8E are merely examples used to explain the embodiments of this application and should not be construed as limiting the scope of the application.

[0139] When two physical holes are merged into a capsule-shaped hole, a dynamic fusion effect similar to that shown in Figures 8A-8E can also be exhibited. Specifically, when two physical holes are merged into a capsule-shaped hole, both physical holes generate synapses on the side facing the middle. After the synapses connect, they gradually enlarge until the two holes merge into a capsule-shaped hole.

[0140] 2. The capsule-shaped hole splits into multiple physical holes.

[0141] For example, as shown in Figure 7A, the capsule-shaped punch-hole 32 can be split into three physical punch-holes A, B, and C. The electronic device can unshow the dark area 31 surrounding these three physical punch-holes to separate the three physical punch-holes A, B, and C from the capsule-shaped punch-hole 32. As another example, as shown in Figure 7B, the capsule-shaped punch-hole 34 can be split into two physical punch-holes A and B. The electronic device can unshow the dark area 33 surrounding these two physical punch-holes to separate the two physical punch-holes A and B from the capsule-shaped punch-hole 34.

[0142] The dark area surrounding the physical cutout (such as 31 or 33) can gradually disappear to create a more dynamic effect, showing the physical cutout gradually splitting from the capsule-like cutout. For example, the connecting synapses between adjacent physical cutouts can be gradually reduced until they disappear, thus allowing the physical cutout to split from the capsule-like cutout. If there are three or more cutouts, the central cutout can be gradually reduced in size during the splitting process as the synapses are gradually reduced. Reducing the size of the central cutout refers to reducing the dark area surrounding it to visually create the effect of the central cutout being smaller, rather than increasing its physical size.

[0143] As shown in Figures 8A-8E (in reverse order), they exemplify the dynamic process of a capsule-shaped hole splitting into three holes. Visually, as the capsule-shaped hole splits into three holes, it gradually shrinks or thins at the intervals between the original holes, forming connecting synapses. Simultaneously, the middle portion of the capsule-shaped hole moves downwards, then gradually shrinks and moves upwards, with the synapses further shrinking or thinning until they break, ultimately resulting in the capsule-shaped hole splitting into three holes.

[0144] When a capsule-shaped hole splits into two physical holes, a dynamic fusion effect similar to that shown in reverse in Figures 8A-8E can also be exhibited. Specifically, when a capsule-shaped hole splits into two physical holes, the dark area at the connection between adjacent physical holes gradually becomes thinner or smaller until the capsule-shaped hole splits into two parts, ultimately becoming two physical holes.

[0145] The dynamic switching between physical punch-hole and capsule-shaped punch-hole is not limited to the dynamic switching between virtual punch-hole and capsule-shaped punch-hole. This dynamic switching method for punch-hole shapes can be applied to all physical punch-holes on the screen, or only some of them.

[0146] Not limited to multiple punch holes, a single physical punch hole can also be merged into a capsule-shaped punch hole, which can then be reversed to split into individual physical punch holes. When a single physical punch hole is merged into a capsule-shaped punch hole, the electronic device can surround the physical punch hole to display a dark area and gradually enlarge the dark area until the dark area combines with the physical punch hole to form a capsule-shaped punch hole; when the capsule-shaped punch hole splits into individual physical punch holes, the electronic device can gradually shrink the dark area surrounding the individual physical punch hole, and finally the capsule-shaped punch hole decomposes into individual physical punch holes.

[0147] The number of Live Capsules hidden in the cutout area can change dynamically. For example, when a Live Capsule-enabled task finishes running, its Live Capsule disappears, and the number of Live Capsules hidden in the cutout area decreases; when a user launches a Live Capsule-enabled application and brings it to the background, the application's Live Capsules appear, and the number of Live Capsules hidden in the cutout area increases. Furthermore, referring to Figure 3, when a user expands a Live Capsule, the number of Live Capsules hidden in the cutout area decreases; conversely, when a user hides a Live Capsule, the number of Live Capsules hidden in the cutout area increases.

[0148] When the number of live capsules hidden in the cutouts increases or decreases, the electronic device can adapt its display strategy to achieve complete integration between the live capsules and the cutouts. For example, when the number of live capsules to be hidden in the cutouts decreases from three to one, the display strategy can change from Strategy 1 to Strategy 2. This change is accompanied by a switch in the cutout shape where the three physical cutouts merge into a single capsule-shaped cutout. Subsequently, when the number of live capsules to be hidden in the cutouts increases from one to two, the display strategy can change from Strategy 2 to Strategy 3. Similarly, when the number of live capsules to be hidden in the cutouts increases from one to two, the display strategy can change from Strategy 2 to Strategy 3. Subsequently, when the number of live capsules to be hidden in the cutouts increases from two to three, the display strategy can change from Strategy 3 to Strategy 1. This change is accompanied by a switch in the cutout shape where the capsule-shaped cutout splits into three physical cutouts. The examples are merely for explaining the embodiments of this application. As for how to change the combination display strategy between the live capsule and the cutout to accommodate the increase or decrease of the live capsule hidden in the cutout, the embodiments of this application do not impose any limitations.

[0149] In this embodiment, the live capsule of a task can also create a synchronized animation with the service card. When the expanded live capsule of the first task is displayed outside the cutout, the electronic device can detect a user operation on the cutout, such as clicking the cutout. Based on the user operation, the electronic device can first display the process of the expanded live capsule being retracted into the cutout, and then display the process of the service card of the first task expanding outward from the cutout. The first task can be any running task that supports the live capsule.

[0150] Specifically, electronic devices can achieve seamless, synchronized animation effects between the live capsule and the service card by controlling the start time of multi-stage animations. The following examples, illustrated in Figures 9A-9E, illustrate this. Figure 9A shows the initial state of the animation, while Figures 9B, 9C, 9D, and 9E show the first, second, third, and final stages of the animation, respectively. In the examples in Figures 9A-9C, the cutout 51 is a capsule-state cutout. However, this is not the only limitation; the cutout that can achieve synchronized animation effects with the service card of the task can also be a physical cutout or a virtual cutout.

[0151] As shown in Figures 9A and 9B, when the cutout 51 is clicked, if a live capsule 52 containing a task expands outward from the cutout 51, the electronic device can execute a motion effect to retract the cutout 51 onto the live capsule 52. This process can be considered the first stage of the linked motion effect. As shown in Figures 9B and 9C, when the progress of the motion effect displayed in the first stage reaches a specific duration T1, the electronic device can trigger the second stage of the motion effect linkage, that is, the cutout 51 presents one or more of the following motion effects: expansion / contraction motion effect, glowing motion effect, and outline motion effect. Among them, the expansion / contraction motion effect can be, for example, a change in the size of the cutout; the glowing motion effect can be, for example, a glowing motion effect from the cutout; the outline motion effect can be, for example, a motion effect where the outline of the cutout appears from nothing, with the outline color matching the outline color of the live capsule, which can be used to indicate that the live capsule is hidden at the cutout location. As shown in Figures 9C-9D, when the animation progress 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 linked animation. Figure 9E shows the unfolded appearance of the service card 53 after it flies out of the hole 51. The durations T1, T2, etc., can be set according to actual application requirements, and this embodiment does not limit them.

[0152] In this embodiment, the linkage effect between the live capsule and the service card of the task may further include the following process: the service card retracts into the cutout after unfolding, and the live capsule unfolds outward from the cutout. After the service card of the first task unfolds from the cutout, the electronic device can detect a user operation, such as a sliding operation of the service card towards the cutout; 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 cutout, and then display the process of the live capsule of the first task unfolding outward from the cutout. This linkage effect can be shown in reverse as shown in Figures 9A-9E.

[0153] Furthermore, after the service card is unfolded from the cutout, users can switch between service cards by swiping left or right, with new service cards appearing on the screen and old service cards disappearing.

[0154] Specifically, as shown in Figure 10A, after the service card 53 of the first task unfolds from the cutout, the cutout presents a first appearance, which is related to the appearance of the service card of the first task. This first appearance, related to the appearance of the service card of the first task, may include: the outline color 55 of the cutout being the same as the theme color 56 of the service card of the first task; in the examples of Figures 10A-10D, the appearance color is represented by a dashed line. As shown in Figures 10B-10D, after the service card 53 of the first task unfolds from the cutout, the electronic device can also detect a user operation of sliding the service card 53 of the first task along a first direction 63, and based on this user operation, 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. Figure 10D exemplarily illustrates the state in which the service card 54 of the second task is finally unfolded on the screen.

[0155] Furthermore, after the service card is unfolded from the cutout, the live capsule hidden in the cutout can be used as a navigation point for the service card displayed below it, with the outline color of the cutout corresponding to the service card below it. That is, when sliding the card, the cutout area can be used as a navigation point, with the same color tone as the current card, and the outline color of the cutout changes as the service card is switched.

[0156] Specifically, as shown in Figure 10A, during the process of the service card 53 of the first task exiting the screen along the first direction and the service card 54 of the second task entering the screen along the first direction, the electronic device can also add an icon 60 for displaying the second task on the first side of the cutout when the service card 54 of the second task enters the screen. The first side is the side where the service card of the second task enters the screen. As shown in Figure 10B, as more and more service cards 54 of the second task are displayed on the screen, the electronic device can, as a transition, set the appearance of the cutout to include both a first appearance 55 and a second appearance 57. As shown in Figure 10C, when more service cards 54 of the second task are displayed on the screen than service cards 53 of the first task, the electronic device can switch the appearance of the cutout from the first appearance 55 to the second appearance 57, and add an icon 61 for displaying the first task on the second side of the cutout. 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 that the outline color of the cutout is the same as the theme color of the service card of the second task. Figure 10D exemplarily shows the final state of the service card 54 for the second task displayed on the screen.

[0157] The service card can be switched in two ways, including but not limited to the following:

[0158] Non-follow-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 punch-hole outline color. The outline color flows and changes with the sliding direction, and moves the task icon with the sliding direction. For example, the icon 60 of the second task is hidden from the first side of the punch-hole, and then the icon 61 of the first task is displayed on the second side of the punch-hole.

[0159] The switching method follows the user's input: the transition of the punch-hole's outline color is consistent with the sliding offset of the first service card 53. For example, as shown in Figure 10B, when the service card 54 of the second task and the service card 53 of the first task are displayed on the screen simultaneously, as a transition, the electronic device can set the appearance of the punch-hole to include both the first appearance 55 and the second appearance 57. Furthermore, as more and more of the service card 54 of the second task is displayed on the screen, the proportion of the second appearance 57 on the punch-hole outline can increase until it completely occupies the punch-hole outline. Simultaneously, the task icon can also move according to the sliding direction of the fourth user's operation. For example, when the fourth user's sliding direction is from right to left, the task icon disappears into the punch-hole from the right side and then reappears from the left side. In the examples of Figures 10A-10C, the task icon disappearing into the punch-hole from the right side is specifically the icon 60 of the second task, and the task icon reappearing from the punch-hole from the left side is specifically the icon 61 of the first task. As the task icon moves in the direction of the fourth user's swipe, its transparency also changes in real time according to the swipe offset of the service card 53. For example, the task icon becomes more transparent as it enters the hole from the first side, and becomes less transparent as it exits the hole from the second side.

[0160] In this embodiment, controls, such as operable buttons, can be added to the unfolded live capsule. While displaying real-time information of the first task in the unfolded live capsule, the electronic device can also display a preset control corresponding to the first task. Once a user operation on the preset control is detected, a preset function corresponding to the preset space can be executed. The preset function corresponding to this control can be defined according to actual application requirements, and this embodiment does not impose any limitations on this.

[0161] For example, as shown in Figure 11A, an end button 66 can be added to the live recording capsule 65 for the screen recording task. Users can directly end the screen recording task by clicking button 66 without having to enter the screen recording interface again; the live recording capsule 65 will also disappear when the screen recording task ends. As another example, as shown in Figure 11B, an off button 68 can be added to the live recording capsule 67 for the flashlight task. Users can directly turn off the flashlight task by clicking button 68 without having to enter the flashlight interface again; the live recording capsule 67 will also disappear when the flashlight task ends.

[0162] Furthermore, the live capsules of ongoing missions can be collapsed into icon buttons, supporting quick operations or serving as quick access points.

[0163] For example, as shown in Figure 12A, the live recording capsule 65 can collapse into an end button 66, allowing the user to end the recording task by clicking the end button 66. As another example, as shown in Figure 12B, the live recording capsule 67 for the flashlight task can collapse into a close button 68, allowing the user to close the flashlight task by clicking the close button 68. Furthermore, as shown in Figure 12C, the live recording capsule for the screen casting task can collapse into a screen casting start button 69, allowing the user to start screen casting by clicking the screen casting start button 69, without requiring the user to pull up the screen casting task service card to trigger the start of screen casting.

[0164] Persistent tasks refer to tasks with a longer duration compared to short-lived tasks, potentially coinciding with the lifecycle of the UI main thread. The lifecycle of a persistent task is less than or equal to the application's lifecycle, while short-lived tasks are those with a fixed display time. The task type is generally determined by the application. The application can configure the task type when passing task data (such as real-time notifications) to the Live Capsule, thus determining whether the Live Capsule is a persistent task.

[0165] Figures 13A-13C and 13D-13E illustrate an embodiment of this application. The specific implementation of the method in this embodiment may include, but is not limited to, the following steps:

[0166] S21. As shown in Figure 13A, the electronic device can display the interface 70 of the first application. In the examples of Figures 13A-13E, the first application is a ride-hailing application. Not limited to this example, the first application could also be other applications that support Live Capsule.

[0167] S22. The electronic device can detect a first operation, which is used to switch a first application to run in the background. For example, as shown in Figure 13B, the first operation can be a swipe operation of sliding the interface 70 upward from the navigation bar, during which the interface 70 can gradually shrink. Not limited to this example, the first operation can also be other operations, such as pressing the Home button, etc.

[0168] S23. In response to the first operation, the electronic device can switch the first application to run in the background and display a first outline 72 on the edge of the first punch-hole 71 on the screen as shown in FIG13C, wherein the first outline 72 can be used to indicate that the first application is running in the background.

[0169] S23. Following S23, the electronic device can detect a second operation, which is used to expand the real-time information of the first application. For example, the first operation could be clicking the first punch-hole 71, or swiping left on the first punch-hole 71, etc.

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

[0171] As shown in Figures 13A-13C, the first punch-hole 71 can be a capsule-shaped punch-hole formed by surrounding multiple physical punch-holes A, B, and C on the screen, and can also be referred to as a capsule. Specifically, in response to the first operation, before displaying the first outline 72 of the first punch-hole 71, the electronic device can also surround these multiple physical punch-holes to form the first punch-hole 71 first. The punch-hole shape changes involved in the formation of the first punch-hole 71 by multiple physical punch-holes can be referred to the relevant content in the foregoing embodiments, and will not be repeated here.

[0172] As shown in Figures 13D-13E, in response to the second operation, while displaying the real-time information of the first application in the live capsule 73, the electronic device can also cancel the display of the first outline 72 around the first cutout 71.

[0173] As shown in reverse of Figures 13D-13E, the user can also collapse the live information of the first application displayed in capsule 73, such as by sliding capsule 73 towards the first punch-hole 71. In response, the electronic device no longer displays the live information of the first application near the first punch-hole 71, cancels the display of capsule 73, and redisplays the first outline 72 around the first punch-hole 71 to indicate that the capsule 73 of the first application running in the background is hidden at the first punch-hole 71.

[0174] Furthermore, Figures 14A-14E illustrate the process triggered when a user switches another application to the background when a background application's live feed is already displayed in the Live Capsule. (Details follow.)

[0175] S25. The electronic device can detect a third operation, which is used to switch the second application to run in the background. The second application is different from the first application; in the examples of Figures 14A-14E, the second application is a milk tea application. The third operation can be a user operation that involves swiping up the interface 74 of the second application from the bottom navigation bar. The implementation of the third operation can refer to the aforementioned description of the implementation of the first operation, and will not be repeated here.

[0176] S26. In response to the third operation, the electronic device can switch the second application to run in the background. As shown in Figures 14A-14C, the electronic device can also stop displaying the real-time information of the first application, such as "1.7 km", near the first punch-hole 71, while displaying the real-time information of the second application, such as "4517", near the first punch-hole 71 via a live capsule. After a short time (e.g., 1 second), the live capsule of the second application can be retracted into the first punch-hole 71. In this way, before hiding the live capsule of the second application in the screen punch-hole, it can be briefly displayed to the user near the screen punch-hole, making it easy for the user to quickly understand what the live capsule of the newly switched-to-the-background application looks like.

[0177] The display of real-time information for the first application stops near the first punch-hole 71, while real-time information for the second application is displayed near the first punch-hole 71, which can be implemented as a dynamic process. As shown in Figure 14B, the electronic device can gradually move the capsule 73 into the first punch-hole 71 until the capsule 73 is completely hidden inside the first punch-hole 71. Then, the electronic device displays the capsule 75 of the second application on one side of the first punch-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 punch-hole 71 to indicate that the capsule 73 of the first application is hidden in the first punch-hole 71. This dynamic process allows the user to observe the switching of real-time information display and understand the fusion of the punch-hole and the capsule.

[0178] S27. The electronic device may display a second outline at the edge of the screen cutout, the second outline being used to indicate that a second application is running in the background. In this way, the user can also understand which applications are currently running in the background by looking at the outline of the cutout.

[0179] Specifically, displaying a second outline at the edge of the screen cutout can be achieved in two ways, including but not limited to the following:

[0180] Method 1: As shown in Figures 14D-14E, the first punch hole 71 is split into a second punch hole 76 and a third punch hole 77. The second punch hole 76 is displayed at its edge, and a first outline 72 is displayed at the edge of the third punch hole 77. In this way, the user can access the real-time information of the second application by operating the second punch hole 76, and the user can access the real-time information of the first application by operating the third punch hole 77.

[0181] In Method 1, the hole split can occur after the live capsule of the second application is received into the first hole 71.

[0182] Method 2: Without splitting the first cutout 71, the first outline 72 is no longer displayed at the edge of the first cutout 71; instead, only the second cutout 76 is displayed to indicate that only the capsule 75 of the second application is hidden or integrated at the first cutout 71. In this way, the user knows that by operating the first cutout 71, the capsule 75 of the second application can be expanded to view the real-time information of the second application.

[0183] Furthermore, in the first method described above, to facilitate the hole splitting, the electronic device can also simultaneously display the splitting process of the hole's 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 part and a second part, wherein the first part has the same appearance as the first outline, and the second part has the same appearance as the second outline. The methods for achieving consistent appearance may include, but are not limited to, color consistency.

[0184] Furthermore, after executing S27 using the above method, the electronic device also receives a fourth operation. This fourth operation switches the first application to the foreground and, in response to the fourth operation, displays the interface of the first application, merging the second and third punch-holes into a single first punch-hole, and displaying a second outline at the edge of the first punch-hole. Thus, the first application is switched to the foreground, and the outline of the first punch-hole is correspondingly set to the second outline to indicate that real-time information of the second application is hidden at the punch-hole. The user can then operate the first punch-hole to expand the capsule of the second application and view its real-time information.

[0185] Subsequently, the electronic device can receive the first operation again, namely, the user switches the first application to the background again. In response to the first operation, the first application can be switched to the background again, and the first punch-hole is split into a second punch-hole and a third punch-hole. The first stroke is displayed on the edge of the second punch-hole, and the second stroke is displayed on the edge of the third punch-hole. In this way, the first application becomes the most recently switched application to the background, and the strokes of the second and third punch-holes are swapped. The edge of the second punch-hole no longer displays the second stroke but displays the first stroke, and the edge of the third punch-hole no longer displays the first stroke but displays the second stroke. By swapping the strokes of the two punch-holes, the user can understand that the order of the background applications has changed.

[0186] After splitting the first punch-hole into a second and a third punch-hole, and using different outlines of the second and third punch-holes to indicate the hidden live capsules of the first and second applications, the electronic device can also receive a fifth operation. This fifth operation is used to expand the live information of the first application, such as clicking the second punch-hole. In response to the fifth operation, the electronic device can re-merge the second and third punch-holes into the first punch-hole, display a second outline at the edge of the first punch-hole, and display the live information of the first application near the first punch-hole.

[0187] Subsequently, the electronic device may receive a sixth operation, which is used to hide or conceal the real-time information of the first application. Functionally, the sixth operation can be the inverse of the aforementioned 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 punch-hole, re-divide the first punch-hole into a second punch-hole and a third punch-hole, and display a first outline on the edge of the second punch-hole and a second outline on the edge of the third punch-hole.

[0188] When the number of background tasks is less than the number of punch-holes, the background tasks hidden at the punch-hole locations can rotate, with earlier-switched tasks being replaced by newly switched tasks. Simultaneously, the punch-hole outline color can also rotate accordingly, with the outline color of the punch-hole for an earlier-switched task being replaced by the outline color of the punch-hole for a newly switched task, indicating to the user that the background task hidden at the punch-hole has changed. Specifically, when the number of existing background tasks equals the number of punch-holes, if a new task switches to the background, the electronic device can first merge all punch-holes into a single capsule-shaped punch-hole, then split the punch-hole. In the resulting split punch-holes, none of the punch-holes will have the outline color of the application theme color of the earliest-switched task; instead, one punch-hole will have the outline color of the application theme color of the newly switched task. Furthermore, the order in which tasks switch to the background can correspond to the order of the punch-holes; for example, punch-holes further to the right correspond to earlier-switched tasks, and punch-holes further to the left correspond to later-switched tasks. Combining this, when the number of punch-holes is less than the number of background tasks, the punch-hole outline colors will exhibit a flowing, updating effect.

[0189] For example, suppose the screen has three punch-hole displays, and three tasks have already been switched to the background. The outline colors of these three punch-holes, from left to right, are red, yellow, and blue, indicating the three background tasks hidden in the punch-holes. Now, a new task switches to the background. The three punch-holes can first merge into a capsule-shaped punch-hole, and then split into three punch-holes. The outline colors of the three split punch-holes, from left to right, are updated to green, red, and yellow, where green is the application theme color of the new task. In this way, a visual effect of flowing punch-hole outline colors can be presented. The original red, yellow, and blue punch-hole outline colors all flow one punch-hole to the right. The original red outline flows to the middle punch-hole, the original yellow outline flows to the rightmost punch-hole, the original blue outline exits the punch-hole outline display, and the outline of the leftmost punch-hole is updated to the application theme color (red) of the new background task.

[0190] Here, the earliest background task refers to the earliest background task hidden in the cutout area. The new background task is relative to the existing background tasks; it switches to the background later than the existing background tasks.

[0191] After S24, the electronic device may also receive a seventh operation, such as a user operation that touches the first punch-hole 71. In response to this, the real-time information of the first application may be displayed in the first area (such as the screen area to the left of the punch-hole) through the first component, a first outline may be displayed at the edge of the first punch-hole 71, and then the real-time information of the first application may be displayed in the second area of ​​the screen (such as the screen area below the punch-hole) through the second component.

[0192] The second component can differ from the first component. It can present richer content than the first component. The first component can be a capsule-like component, such as a live capsule, while the second component can be a card-like component, such as a service card. Alternatively, the second component can be the same as the first component, such as both being capsule-like components.

[0193] Figures 15A-15C illustrate a further implementation of the display method provided in the embodiments of this application.

[0194] As shown in Figures 15A-15C, the first application can be an application with audio tasks such as making calls, recording, or playing music, which can capture or play audio in real time. When the first application is switched to the background, the electronic device can display audio waveform information on the edge of the corresponding punch-hole capsule. This 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 amplitude or loudness of the real-time audio without switching back to the audio capture or playback page, and the human-computer interaction effect is more vivid and interesting.

[0195] Among them, the outline appearance of the punch capsule corresponding to the first application is consistent with the application theme appearance of the first application, such as the same color.

[0196] When displaying audio waveform information on the edge of the punch capsule, as shown in Figures 8A and 8C, the electronic device can display the audio waveform information through dynamic waves. The waveform of this dynamic wave can be a proportionally scaled-down version of the actual waveform of the audio being captured or played.

[0197] When displaying audio waveform information on the edge of a perforated capsule, as shown in Figure 8B, the electronic device can also display audio waveform information using a dynamic aperture. This 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.

[0198] The color of the dynamic wave or dynamic aperture can be the album art color of the music being played. For calls and recordings, the color of the dynamic wave or dynamic aperture can be the system default color.

[0199] Beyond dynamic waves or dynamic apertures, electronic devices can also display real-time waveform information through other dynamic effects, such as dynamic bar charts, where the amplitude of the bars changes in accordance with the real-time amplitude of the audio being acquired or played.

[0200] In this embodiment, the capsule can also be used to display temporary notifications from the application, such as temporary notifications updating the Bluetooth headset connection status, temporary notifications updating the charging status, and temporary notifications updating the reminder mode. This allows users to easily and effectively receive temporary notifications.

[0201] As shown in Figures 16A-16C, when a temporary notification needs to be displayed in the capsule, the electronic device can integrate the punch-hole and the screen area on one side of the punch-hole to form an elongated capsule, and display the temporary notification in this screen area. In the example of Figure 16A, the temporary notification is used to update the Bluetooth headset connection status, such as "Freebuds Pro connected". In the example of Figure 16B, the temporary notification is used to update the device charging status, such as "Charging". In the example of Figure 16C, the temporary notification is used to update the device's notification mode for messages, incoming calls, etc., such as "Vibrate". In addition to text content, temporary notifications can also include icons to represent the notification content.

[0202] The specific side of the screen area adjacent to the punch-hole depends on the reading order of the selected language in the multilingual settings. For example, if the selected language is Chinese, to accommodate the left-to-right reading order of Chinese, the screen area on the left side of the punch-hole could be the screen area to the left of the punch-hole, and the notification content would also be displayed from left to right. Similarly, if the selected language is Tibetan, to accommodate the right-to-left reading order of Tibetan, the screen area on the right side of the punch-hole could be the screen area to the right of the punch-hole, and the notification content would also be displayed from right to left. Here, left and right refer to left and right when the user is facing the screen.

[0203] During the actual fusion process, as shown in Figure 17, the electronic device can first fuse the cutout 81 into a capsule 82, and then extend the capsule to the left or right, displaying a temporary notification in the extended capsule 83. The fusion process of 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.

[0204] In the example of Figure 17, cutout 81 can be multiple cutouts, but it is not limited to this; the cutouts fused into a capsule can also be a single cutout. The cutouts can be physical cutouts or virtual cutouts.

[0205] The length of the extended capsule 83 can be adapted to the length of the temporary notice content. The longer the content of the temporary notice, the longer the capsule 83; otherwise, the shorter the capsule 83.

[0206] The display time for the temporary notification is limited, such as 3 seconds. After the temporary notification ends, as shown in reverse in Figure 17, the electronic device can shrink the capsule length until capsule 83 reverts to capsule 82, and then disassemble capsule 82 to obtain hole 81. The disassembly process of capsule 82 can be referred to the reverse of Figures 8A-8E.

[0207] Figure 18 illustrates an electronic device 100 provided in an embodiment of this application.

[0208] Electronic device 100 can be any of the following: mobile phone, tablet computer, in-vehicle equipment (also known as vehicle system), smart home devices such as smart screen, wearable devices such as smartwatch and smart glasses, extended reality (XR) devices such as augmented reality (AR), virtual reality (VR), and mixed reality (MR), smart city devices, etc.

[0209] 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, antenna 1, 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, a headphone jack 170D, a sensor module 180, a display screen 190, etc. Among them:

[0210] Processors 110 can be one or more, and they can be integrated into an integrated circuit of a system-on-a-chip (SOC). An SOC is a system-on-a-chip. Processor 110 may include a central processing unit (CPU), a graphics processing unit (GPU), a neural network processing unit (NPU), etc. The CPU may include an application processor (AP), a baseband processor (BP), etc., where the AP is responsible for running the operating system, user interface, and applications on the terminal device; the BP is responsible for transmitting and receiving wireless signals and managing radio frequency services. The GPU is responsible for graphics rendering. The NPU processes input information by referencing biological neural network structures. The NPU can be used to run artificial intelligence algorithms. The CPU and GPU can be used to render and synthesize the image to be displayed on the display screen 190.

[0211] 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. Processor 110 can communicate with other components within electronic device 100 through these one or more interfaces.

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

[0213] The memory 120 may also store a computer program for the display method provided in the embodiments of this 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 embodiments of this application.

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

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

[0216] 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 one or more communication frequency bands. Different antennas can also be multiplexed to improve antenna utilization. For example, antenna 1 can be multiplexed as a diversity antenna for a wireless local area network. In some other embodiments, the antennas can be used in conjunction with tuning switches.

[0217] The mobile communication module 150 can provide solutions for wireless communication, including 2G / 3G / 4G / 5G, applied to the electronic device 100. The mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves via antenna 1, and perform filtering, amplification, and other processing on the received electromagnetic waves before transmitting them to a modem processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modem processor and convert it into electromagnetic waves for radiation via antenna 1.

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

[0219] Electronic device 100 can implement display functions through a GPU, display screen 190, and application processor. The GPU is a microprocessor for image processing, connected to the display screen 190 and the application processor. The GPU performs mathematical and geometric calculations for graphics rendering. Processor 110 may include one or more GPUs, which execute instructions to generate or modify display information. In some embodiments, after generating drawing commands for creating interface elements in the application's UI thread, the CPU can transmit (or share) these drawing commands to the GPU and instruct the GPU to render according to the drawing commands.

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

[0221] The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an accelerometer sensor 180E, a distance sensor 180F, a proximity light sensor 180G, etc.

[0222] The components in electronic device 100 can be implemented as hardware modules, software modules, or a combination of software and hardware modules. The device structure shown in FIG18 does not constitute a specific limitation on electronic device 100. In other embodiments of this application, electronic device 100 may include more or fewer components than shown, or combine some components, or split some components, or have different component arrangements.

[0223] In this embodiment, the application displaying real-time information in the Live Capsule, such as the aforementioned first and second applications, can be a third-party application. The software system (such as an operating system) running on the electronic device can provide development components for the third-party application to access the Live Capsule. These development components provide interfaces for the third-party application to access the Live Capsule. The third-party application becomes a Live Capsule-enabled application by implementing these interfaces. From a code perspective, the third-party application may include code that calls the relevant interfaces.

[0224] This series of interfaces can include the first interface. Third-party applications can launch Live Capsule by calling the first interface and set the display of Live Capsule and the outline of the punch-hole by passing parameters to the first interface. When switched to the background, the code in the third-party application that calls the first interface is executed to launch Live Capsule.

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

[0226] In embodiments where the Live Capsule and Service Card are not linked, the "ServiceCard" input parameter is not required.

[0227] Furthermore, to enable the addition of operable buttons within the Live Capsule, the input parameters of the first interface can also include content describing the operable button, such as its icon, and a corresponding callback function. When the electronic device detects user interaction with the operable button, it can execute the callback function to invoke the corresponding function of a third-party application, allowing the user to quickly operate that function. The corresponding function is the preset function of the operable button, such as turning the flashlight on or off.

[0228] This application does not limit 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 may also include other interfaces to achieve richer Live Capsule functions.

[0229] Figure 19 illustrates a software system provided in an embodiment of this application. This 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. This operating system can be various operating systems used in industry, such as operating systems developed based on OpenHarmony, such as HarmonyOS; or other operating systems such as Android™, iOS mobile operating systems; it can also be various open-source operating systems or their derivatives, such as LinuxOS, and other embedded operating systems; or it can be a future new operating system, such as an AI operating system based on artificial intelligence. An operating system is a set of interrelated system software programs that manage and control the operation of electronic devices, utilize and run hardware and software resources, and provide public services to organize user interaction.

[0230] As shown in Figure 19, this software system may include several layers, which, from top to bottom, may include, but are not limited to: application layer, interface layer, component layer, framework and system service layer. Layers can communicate with each other through software interfaces. Among them:

[0231] The application layer can include a wide variety of applications, such as map applications like "Gaode," ride-hailing applications like "Didi," and food delivery applications like "Meituan," etc. 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 details, such as capsule-shaped content and card-shaped content, to the component layer (such as the MetaBall component) through the interface layer to integrate with Live Capsule and other live window components. Because they integrate with Live Capsule and other live window components, these applications can also be called live window ecosystem applications.

[0232] The interface layer can include LiveViewManager. LiveViewManager enables third-party applications to directly call desktop applications. LiveViewManager is provided by SystemUI and can also be called an interface capability or the LiveViewManager module. SystemUI is part of the desktop application. Specifically, the LiveViewManager module provides the basic capabilities of the LiveView component (which can be called LiveViewKit), including functions for creating, updating, and closing LiveViews, obtaining LiveViews, and checking if LiveViews are on or off. The LiveViewManager module can include a series of interfaces that implement these basic capabilities, such as the isLiveViewEnable interface for checking if a LiveView is on or off, the startLiveView interface for creating a LiveView, the updateLiveView interface for updating a LiveView, and the stopLiveView interface for closing a LiveView.

[0233] The LiveViewManager can be passed in using the following parameters: LiveView, LiveViewData, and CapsuleData. Among them:

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

[0235] id: A unique identifier for the live view window;

[0236] event: Application scenarios of the live window, such as TAXI, DELIVERY, FLIGHT, where TAXI represents ride-hailing, DELIVERY represents instant delivery, and FLIGHT represents flight;

[0237] isMute: Message notification mode, TRUE for silent notification, FALSE for vibration notification;

[0238] timer: A timer that refreshes once per second during display.

[0239] liveViewData: Live View details, which is an instantiation of LiveViewData.

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

[0241] primary: Card format content;

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

[0243] external: Content related to the small folding outer screen.

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

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

[0246] CAPSULE_TYPE_PROGRESS, a state operation capsule CAPSULE_TYPE_STATUS_ACTION;

[0247] status: Live Capsule display status, 1 indicates capsule display is on, -1 indicates capsule display is off;

[0248] icon: The icon for the live capsule, whose value can be the file name of the resource under the local resource path;

[0249] backgroundColor: The background color of the Live Capsule;

[0250] themeColor: The application's theme color, used to outline the punch-hole display and create a punch-hole capsule effect. Third-party applications can pass the application's theme color through the themeColor parameter when calling liveViewManager. After receiving this parameter, the desktop application can outline the punch-hole based on the color value in themeColor.

[0251] Specifically, StatusActionCapsule is a capsule data structure for status operations, inheriting from CapsuleData. It can include, but is not limited to, the following fields:

[0252] type: Capsule type, inherited from parent class, value is CAPSULE_TYPE_STATUS_ACTION;

[0253] status: The status of the real-time capsule display, inherited from the parent class, 1 indicates display, -1 indicates end of display;

[0254] icon: The icon for Live Capsule, inherited from the parent class, and its value can be the file name of the resource under the local resource path;

[0255] backgroundColor: Inherited from the parent class, the background color of the capsule;

[0256] themeColor: Inherits from the parent class, applies the theme color, and is used to outline the holes, presenting a hole-punched capsule;

[0257] `action`: A field unique to capsules in the state operation class. It is the callback function executed when the capsule receives a click action. This field can be used to represent the operation attributes of the capsule, such as system operations like turning off the flashlight or ending recording.

[0258] 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 capsules and other live windows; text components can be used to display text; list components can be used to display multiple side-by-side elements; and image components can be used to display icons and other image UI elements.

[0259] Figure 20 illustrates a program call flow. Through this program call flow, ecosystem applications can access capsule components with device adaptive capabilities.

[0260] As shown in Figure 20, after an ecosystem application (such as a map application) switches to background operation, the ecosystem application can call `LiveViewManager.startLiveView(LiveView)` to initiate the capsule merging or splitting animation effects, and set the capsule shape content, such as the capsule's outline, by filling the passed-in parameter `LiveView`. Furthermore, when the ecosystem application calls the `startLiveView` interface, `systemUI` calls the `startFusionBallAnimation(status, animationOptions, colors, stroke)` interface in the `MetaBallController` module to initiate the capsule merging or splitting animation effects. The passed-in parameters for the `startFusionBallAnimation` interface are passed by `systemUI`.

[0261] The systemUI is the system's user interface (UI), which may include functions such as the status bar, navigation bar, lock screen, notification panel, and recent tasks. Its startup and initialization are completed during the power-on process of the electronic device. The systemUI can be considered part of the interface layer in the software system shown in Figure 19.

[0262] The following example illustrates the API calls when the number of background tasks changes from zero to one, then to two, and finally to three:

[0263] 1. Initialization Phase

[0264] During the initialization phase of SystemUI, to enable the live capsule component to adapt to multiple devices, SystemUI can read the current device's punch-hole specifications (such as the number, size, position, and shape of the punch-holes) and use these specifications to populate the parameters passed to the MetaBall component interface to initialize the MetaBall component. Besides the punch-hole specifications, the MetaBall component interface can also accept the following parameters: MetaBallController and onCapsuleClick. 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 on a food delivery app, the app is switched to the background. The food delivery app can then call `LiveViewManager.startLiveView(LiveView)` to initiate the capsule merging or splitting animation, passing in the `LiveView` parameter. The `LiveView` needs to be populated with `liveViewData`, and the `capsule` field in `liveViewData` defines the capsule's appearance. If more application information needs to be displayed via cards, the `primary` field in `liveViewData` can also be configured.

[0267] The `startLiveView` interface in the `LiveViewManager` module implements the `startFusionBallAnimation` interface in the `MetaBallController` module. When the food delivery application calls the `startLiveView` interface, `systemUI` calls `startFusionBallAnimation(status, animationOptions, colors, stroke)` in the `MetaBallController` module and fills in the passed parameters to start the relevant animation effects for capsule merging 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] The 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] The animationOptions can be configured as: {duration:500}, which represents the duration of the blended animation effect, such as 500 milliseconds;

[0271] The colors can be configured as: [Color.Green], which means that the outline color of the merged capsule is green; where green is the application theme color of the food delivery app;

[0272] The stroke can be configured to: 5, which represents the stroke width of the merged capsule, such as 5 pixels wide.

[0273] The animation effect of the above input parameter constraints can be: three physical holes are merged into a capsule by collision and adhesion (see Figures 8A-8E), and the edge of the capsule has a green outline with a width of 5 pixels.

[0274] 3. The second background task arrives.

[0275] For example, a user continues to use the ride-hailing app and switches it to the background after placing an order. The ride-hailing app can then call `LiveViewManager.startLiveView(LiveView)` to initiate the capsule merging or splitting animation, passing in the `LiveView` parameter. The `LiveView` needs to be populated with `liveViewData`, and the `capsule` field in `liveViewData` defines the capsule's appearance. If more application information needs to be displayed via cards, the `primary` field in `liveViewData` can also be configured.

[0276] When the ride-hailing application calls the `startLiveView` interface, `systemUI` calls `startFusionBallAnimation(status, animationOptions, colors, stroke)` in the `MetaBallController` module to initiate a switching animation between one background task and two background tasks hidden in the cutout area. The parameters passed to the `startFusionBallAnimation` interface can be configured as follows:

[0277] The status can be configured as [1,1,0], which means that the original long capsule splits into a short capsule and a hole, and the two physical holes on the left are merged into the short capsule.

[0278] The animationOptions can be configured as: {duration:500}, which represents the duration of the blended animation effect, such as 500 milliseconds;

[0279] The colors can be configured as: [Color.Orange,Color.Green], which means that the outline color of the left capsule is orange and the outline color of the right capsule is green; where orange and green are the application theme colors of the ride-hailing app and the food delivery app, respectively.

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

[0281] The animation effect constrained by the above input parameters can be as follows: the original longer capsule splits into a shorter capsule and a hole. The appearance after splitting can be seen in Figure 5C. The outline color of the short capsule on the left is orange, and the outline color of the hole on the right is green.

[0282] 4. The third background task arrives.

[0283] For example, a user continues to open a map application and switches it to the background after starting a navigation task. The ride-hailing application can then call `LiveViewManager.startLiveView(LiveView)` to initiate the capsule splitting animation, passing in the `LiveView` parameter. The `LiveView` needs to be populated with `liveViewData`, and the `capsule` field in `liveViewData` defines the capsule's appearance. If more application information needs to be displayed via cards, the `primary` field in `liveViewData` can also be configured.

[0284] When the map application calls the startLiveView interface, systemUI responds to the startLiveView interface call and calls startFusionBallAnimation(status, animationOptions, colors, stroke) in the MetaBallController module again to start the animation of the background tasks hidden at the cutout switching from two background tasks to three background tasks.

[0285] The input parameters for the startFusionBallAnimation interface can be configured as follows:

[0286] The status can be configured as [0,0,0], which means that the original short capsule splits into two pores;

[0287] The animationOptions can be configured as: {duration:500}, which represents the duration of the blended animation effect, such as 500 milliseconds;

[0288] The colors can be configured as: [Color.Blue,Color.Orange,Color.Green], which means that the outline colors of the three holes from left to right are blue, orange, and green, respectively; where blue, orange, and green are the application theme colors of the map application, ride-hailing application, and food delivery application, respectively.

[0289] The stroke can be configured to: 5, which represents the stroke width of the capsule, such as 5 pixels.

[0290] The animation effect constrained by the above input parameters can be as follows: the original short capsule is also split into two holes. The appearance of the three holes after splitting can be seen in Figure 5A. The outline colors of the three holes from left to right are blue, orange and green, respectively.

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

[0292] This application also provides a computer program product that, when executed by a processor, can implement all the steps in the above-described method embodiments.

[0293] This application also provides a chip system, which includes a processor coupled to a memory. The processor executes a computer program stored in the memory. When executed by the processor, the computer program can implement all the steps in the above-described method embodiments. The chip system can be a single chip or a chip module composed of multiple chips.

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

[0295] The above detailed embodiments further illustrate the purpose, technical solution, and beneficial effects of the embodiments of this application. It should be understood that the above are merely specific embodiments of the embodiments of this application and are not intended to limit the protection scope of the embodiments of this application. Any modifications, equivalent substitutions, improvements, etc., made on the basis of the technical solutions of the embodiments of this application should be included within the protection scope of the embodiments of this application.

Claims

1. A display method, the method being applied to an electronic device, characterized by, include: Display the interface of the first application on the screen; Receive a first operation, the first operation being used to switch the first application to run in the background; In response to the first operation, the first application is switched to run in the background, and a first outline is displayed at the edge of the first punch-hole on the screen, the first outline being used to indicate that the first application is running in the background. The detection second operation is used to display real-time information from 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, the first area being adjacent to the first cutout.

2. The method as described in claim 1, characterized in that, Also includes: Receive a third operation, the third operation being used to switch the second application to run in the background; In response to the third operation, the second application is switched to run in the background, and a second outline is displayed at the edge of the first cutout, the second outline being used to indicate that the second application is running in the background.

3. The method as described in claim 2, characterized in that, Before displaying a second outline at the edge of the first cutout, the method further includes: 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.

4. The method as described in claim 1, characterized in that, Also includes: Receive a third operation, the third operation being used to switch the second application to run in the background; In response to the third operation, the second application is switched to run in the background, the first hole is split into a second hole and a third hole, the second outline is displayed on the edge of the second hole, and the first outline is displayed on the edge of the third hole.

5. The method as described in claim 4, characterized in that, Before splitting the first borehole into the second and third boreholes, the method further includes: The outline of the first hole is decomposed into a first part and a second part. The first part has the same appearance as the first outline, and the second part has the same appearance as the second outline.

6. The method as described in claim 4 or 5, characterized in that, Also includes: Receive a fourth operation, the fourth operation being used to switch the first application to run in the foreground; In response to the fourth operation, the interface of the first application is displayed, the second and third holes are merged into the first hole, and the second outline is displayed on the edge of the first hole.

7. The method as described in claim 6, characterized in that, Also includes: Receive the first operation; In response to the first operation, the first application is switched to run in the background, the first hole is decomposed into a second hole and a third hole, and the first outline is displayed on the edge of the second hole and the second outline is displayed on the edge of the third hole.

8. The method according to any one of claims 4-7, characterized in that, Also includes: Receive a fifth operation, which 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 and third holes are merged into a first hole, and the second outline is displayed at the edge of the first hole.

9. The method as described in claim 8, characterized in that, Also includes: A sixth operation is received, the sixth operation being used to hide the real-time information of the first application; In response to the sixth operation, the display of real-time information of the first application in the first area is stopped, the first hole is decomposed into the second hole and the third hole, the first outline is displayed at the edge of the second hole, and the second outline is displayed at the edge of the third hole.

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

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

12. The method as described in claim 6 or 7, characterized in that, The fusion includes: Between adjacent holes, a dark-colored protrusion is shown connecting the adjacent holes; The synapse is gradually enlarged until the thickened synapse and the multiple holes are visually integrated into the capsule-shaped hole.

13. The method as described in claim 12, characterized in that, If the number of holes is three or more, the fusion further includes: gradually increasing the size of the intermediate hole as the synapse is gradually enlarged.

14. The method as described in claim 7, characterized in that, The decomposition includes: gradually shrinking the synapse until the synapse disappears.

15. The method as described in claim 14, characterized in that, If the number of holes is three or more, the decomposition further includes: gradually reducing the size of the intermediate hole while gradually reducing the size of the synapse.

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

17. The method as described in claim 16, characterized in that, When the real-time information of the first application is first stopped being displayed in the first area via the first component, and then the real-time information of the first application is displayed in the second area of ​​the screen via the second component, the method further includes: First, the process of the unfolded live capsule being retracted into the hole is shown, and then the process of the service card of the first task unfolding outward from the hole is shown.

18. The method as described in claim 17, characterized in that, Also includes: After the service card for the first task unfolds 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 unfolding outward from the hole is displayed.

19. The method as described in claim 17 or 18, characterized in that, After the service card for the first task unfolds from the cutout, the cutout presents a first appearance, which is related to the appearance of the service card for the first task. The method further includes: A user action was detected where the service card for the first task was slid along the first direction. Based on the user's operation of sliding the service card of the first task along the first direction, the process of displaying the service card of the first task exiting the screen along the first direction and the service card of the second task entering the screen along the first direction is shown. The first appearance is related to the appearance of the service card of the first task, including: the color of the outline of the hole is the same as the theme color of the service card of the first task.

20. The method as described in claim 19, characterized in that, During the process of the service card displaying the first task exiting the screen along the first direction and the service card of the second task entering 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 the first side of the cutout, which is the side of the screen where the service card of the second task enters. When more service cards for the second task are displayed on the screen than service cards for the first task, the appearance of the cutout is set to a second appearance, and the icon of the first task is displayed on the second side of the cutout. The second appearance is related to the appearance of the service cards for the second task, and the second side is the side on which the first task exits the screen. The second appearance is related to the appearance of the service card for the second task, including: the color of the outline of the hole is the same as the theme color of the service card for the second task.

21. The method according to any one of claims 1-20, characterized in that, Also includes: While displaying 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. If a user action is detected on the preset control, the 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, characterized in that the processor executes the computer program to implement the steps of the method according to any one of claims 1-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, it implements the steps of the method described in any one of claims 1-21.

24. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method described in any one of claims 1-21.

Images