Display method, electronic device, and storage medium

Abstract

The application relates to the technical field of electronic devices, and provides a display method. In the method, in the case that the size of the first floating window needs to be adjusted when the second floating window of the second application of the electronic device is popped up, the electronic device can calculate the scaling ratio of the first floating window and the display elements in the first floating window based on the current size of the first floating window, the size of the floating window display area on the screen of the electronic device and the size of the second floating window. Then, the first layer where the first floating window is located is scaled according to the scaling ratio. When the first layer is scaled according to the scaling ratio, the first floating window and the display elements in the first floating window drawn on the first layer are also scaled, and the scaling ratio of the first floating window and the display elements in the first floating window is consistent. In this way, the abnormal display of the display elements in the first floating window can be avoided.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of electronic devices, and in particular to a display method, an electronic device, and a storage medium. BACKGROUND

[0002] With the increasing needs of users, some electronic devices (such as mobile phones, tablet computers, etc.) can support one or more applications to be displayed in the form of a floating window on a screen, so that the user can operate the application displayed in the floating window and can also operate the desktop or other applications outside the floating window.

[0003] For example, when the electronic device displays an application interface of an application, such as an instant messaging application, if an input method application is invoked, the soft keyboard of the input method application will pop up from the bottom of the screen of the electronic device, and the application interface of the instant messaging application will be displayed in the form of a floating window. In some scenarios, the screen of the electronic device can simultaneously accommodate the floating window of the instant messaging application and the soft keyboard, and no occlusion phenomenon occurs. In this case, the size of the floating window does not need to be adjusted, and the elements displayed in the floating window will not appear to be displayed abnormally. In another case, the screen of the electronic device cannot simultaneously accommodate the floating window of the instant messaging application and the soft keyboard, that is, the occlusion phenomenon occurs. In this case, the size of the floating window needs to be adjusted, and if only the size of the floating window is adjusted and the size of the elements displayed in the floating window is not adjusted or the size adjustment of the display elements in the floating window is unreasonable, the display elements in the floating window will appear to be displayed abnormally. SUMMARY

[0004] Some embodiments of the present application provide a display method, an electronic device, and a computer-readable storage medium. The following aspects of the present application are described below, and the embodiments and advantages of the following aspects can be referred to each other.

[0005] In a first aspect, the present application provides a display method, comprising: displaying a first floating window of a first application, the first floating window being located on a first layer; detecting a triggering event of displaying a second floating window of a second application; determining a first scale ratio of scaling processing of the first floating window based on a first size of the first floating window, a second size of a floating window display area on a screen of the electronic device, and a third size of the second floating window; performing scaling processing on the first layer based on the first scale ratio, so that the first floating window and the display elements in the first floating window on the first layer are scaled according to the first scale ratio, and the second floating window and the scaled first floating window are displayed in the floating window display area, wherein there is no overlapping area between the first floating window and the second floating window.

[0006] When the first layer is scaled according to the first scale ratio, the first floating window drawn on the first layer and the display elements inside the first floating window are also scaled, and the first floating window and the display elements inside the first floating window are scaled at the same scale ratio. In this way, the abnormal display of the display elements inside the first floating window caused by the size of the display elements inside the first floating window not being adjusted or being adjusted unreasonably after the size of the first floating window is adjusted can be avoided, such as the display elements inside the first floating window being reduced or the size of the display elements inside the first floating window being out of proportion.

[0007] The first application can be an instant messaging application or a short video application mentioned in the present application. The first floating window can be a floating window for displaying the first application. The first layer can be a floating window layer mentioned in the present application. The second application can be an input method application mentioned in the present application. The second floating window can be a soft keyboard of the input method application. The floating window display area can be a display area of the entire screen of the electronic device, or a display area on the screen of the electronic device except the status bar.

[0008] For example, when the floating window of the instant messaging application is displayed on the corresponding floating window layer of the screen of the electronic device, when the electronic device detects a trigger event of displaying the soft keyboard of the input method application, the electronic device can determine a first scale ratio for scaling the floating window of the instant messaging application based on the size of the floating window of the instant messaging application, the size of the floating window display area on the screen of the electronic device, and the size of the soft keyboard of the input method application. Then the electronic device performs scaling processing on the floating window layer on which the floating window of the instant messaging application is located based on the first scale ratio, so that the floating window of the instant messaging application on the floating window layer and the display elements in the floating window of the instant messaging application are scaled at the first scale ratio. Finally, the electronic device displays the soft keyboard of the input method application and the floating window of the instant messaging application in the floating window display area. There is no overlapping area between the soft keyboard of the input method application and the floating window of the instant messaging application.

[0009] In some embodiments, detecting the trigger event of displaying the second floating window of the second application includes detecting a first operation of the user triggering the electronic device to display the second floating window of the second application.

[0010] In some embodiments, the first operation includes any one of the following operations: a first operation on an application interface of the first application displayed in the first floating window; a first operation on an application interface of a third application displayed under the first floating window; a first operation in a third floating window currently displayed by the electronic device.

[0011] The third application can be a short message application mentioned in the present application. The third floating window can be a floating window of the short message application mentioned in the present application.

[0012] For example, when the user clicks on the edit box on the application interface of the first application displayed in the first floating window displayed by the electronic device, the electronic device detects the first operation triggering the electronic device to display the second floating window of the second application, and displays the second floating window of the second application.

[0013] For another example, the lower layer of the first floating window of the first application displayed by the electronic device displays a third application, which can be displayed in a full-screen display mode or a split-screen display mode. When the user clicks on the edit box on the application interface of the third application, the electronic device detects the first operation triggering the electronic device to display the second floating window of the second application, and displays the second floating window of the second application.

[0014] For another example, the lower layer of the first floating window of the first application displayed by the electronic device displays a third application, which can be displayed in a full-screen display mode or a split-screen display mode. When the user clicks on the edit box on the application interface of the third application, the electronic device detects the first operation triggering the electronic device to display the second floating window of the second application, and displays the second floating window of the second application.

[0015] In some embodiments, the first scale for scaling the first floating window is determined based on the first size of the first floating window, the second size of the floating window display area on the screen of the electronic device, and the third size of the second floating window, including: in a case where the first size and the third size in the first size direction are determined to be greater than the second size, the first scale for scaling the first floating window is determined based on the first size, the second size, and the third size.

[0016] In some embodiments, the first size direction includes a vertical direction of the current display interface of the electronic device.

[0017] In some embodiments, the first scale is less than or equal to a first value, where the first value is a ratio of a size difference between the second size and the third size in the first size direction to the first size in the first size direction.

[0018] The size in the first size direction can be the height mentioned in the present application.

[0019] For example, in a case where the height of the floating window of the instant messaging application and the soft keyboard of the input method application is greater than the height of the floating window display area, when the soft keyboard of the input method application pops up from the bottom of the floating window display area, there will be an occlusion between the floating window of the instant messaging application and the soft keyboard of the input method application. In order to avoid the occlusion, scaling processing needs to be performed on the floating window of the instant messaging application. At this time, the first scale for scaling processing of the floating window of the instant messaging application can be determined according to the height of the floating window of the instant messaging application, the height of the soft keyboard of the input method application, and the height of the floating window display area. For example, the first scale is less than or equal to a first value, and the first value is a ratio between the height difference between the floating window display area and the soft keyboard of the input method application and the height of the floating window of the instant messaging application.

[0020] In some embodiments, displaying the second floating window and the scaled first floating window in the floating window display area includes: displaying the scaled first floating window at the top of the floating window display area along the first dimension direction, and displaying the second floating window at the bottom of the floating window display area along the first dimension direction.

[0021] For example, when the electronic device displays the soft keyboard of the input method application and the floating window of the instant messaging application scaled at the first scale in the floating window display area of the screen, the electronic device can display the scaled floating window of the instant messaging application at the top of the floating window display area, and display the soft keyboard of the input method application at the bottom of the floating window display area.

[0022] In some embodiments, the first layer is scaled based on the first scale, so that the first floating window on the first layer and the display elements in the first floating window are scaled at the first scale, and the second floating window and the scaled first floating window are displayed in the floating window display area. Displaying the second floating window and the scaled first floating window in the floating window display area includes: displaying the dynamic effect of the second floating window, and determining and displaying the dynamic effect of switching from the first floating window to the scaled first floating window based on the first scale, wherein the dynamic effect of the first floating window includes at least one scaled image of the first floating window, and the scaling scale of the scaled image is determined based on the first scale and the number of the scaled image.

[0023] When the electronic device displays the second floating window in the floating window display area, the electronic device can play a display animation of the second floating window. During the playing of the display animation of the second floating window, the electronic device can determine a zooming scale of each frame of the zoomed image in the process of switching the first floating window to the zoomed first floating window, and then perform zooming on each frame based on the zooming scale. The zooming scale of the zoomed image is determined based on the first scale and the number of zoomed images, for example, the product of the first scale and the number of zoomed images can be taken as the zooming scale of each zoomed image. The animation of the first floating window can be linked with the animation of the second floating window, that is, in the process of the gradual display of the second floating window, the first floating window is gradually zoomed out. For example, in the process of the gradual display of the soft keyboard of the input method application from the bottom of the screen of the electronic device, the floating window of the instant messaging application is gradually reduced from the current position to the top of the floating window display area.

[0024] In a second aspect, the embodiments of the present application provide an electronic device, comprising: a memory for storing instructions executed by one or more processors of the electronic device; and the processor, when executing the instructions in the memory, can cause the electronic device to perform the method of the first aspect of the present application. The beneficial effects achieved by the second aspect can refer to the beneficial effects of the method provided by any of the embodiments of the first aspect, which will not be repeated here.

[0025] In a third aspect, the embodiments of the present application provide a computer-readable storage medium, and the computer-readable storage medium stores instructions, which, when executed on a computer, can cause the computer to perform the method of any of the embodiments of the first aspect. The beneficial effects achieved by the third aspect can refer to the beneficial effects of the method provided by any of the embodiments of the first aspect, which will not be repeated here.

[0026] In a fourth aspect, the embodiments of the present application provide a computer program product, and the computer program product includes computer program code, which, when executed on a computer, causes the computer to implement the method of any of the embodiments of the first aspect. The beneficial effects achieved by the fourth aspect can refer to the beneficial effects of the method provided by any of the embodiments of the first aspect, which will not be repeated here. BRIEF DESCRIPTION OF DRAWINGS

[0027] Figure 1 Display examples of floating windows provided for some embodiments Figure 1 ;

[0028] Figure 2 Display examples of floating windows provided for some embodiments Figure 2 ;

[0029] Figure 3 Display examples of floating windows provided for some embodiments Figure 3 ;

[0030] Figure 4 Display example of a floating window provided for some embodiments Figure 4 ;

[0031] Figure 5 Application scenario example provided for embodiments of the present application Figure 1 ;

[0032] Figure 6 Application scenario example provided for embodiments of the present application Figure 2 ;

[0033] Figure 7 Example of equal scaling of a floating window provided for embodiments of the present application Figure 1 ;

[0034] Figure 8 Example of equal scaling of a floating window provided for embodiments of the present application Figure 2 ;

[0035] Figure 9 Flowchart example of a display method provided for embodiments of the present application

[0036] Figure 10 Example of a floating window display process provided for embodiments of the present application Figure 1 ;

[0037] Figure 11 Example of a floating window display process provided for embodiments of the present application Figure 2 ;

[0038] Figure 12 Example diagram of a user manually zooming in on a floating window provided for embodiments of the present application

[0039] Figure 13 Example diagram of a user moving a floating window provided for embodiments of the present application

[0040] Figure 14A Example of a scenario triggering a second floating window of a second application provided for embodiments of the present application Figure 1 ;

[0041] Figure 14B Example of a scenario triggering a second floating window of a second application provided for embodiments of the present application Figure 2 ;

[0042] Figure 14C Example of a scenario triggering a second floating window of a second application provided for embodiments of the present application Figure 3 ;

[0043] Figure 14D Example of a scenario triggering a second floating window of a second application provided for embodiments of the present application Figure 4;

[0044] Figure 15 An example of the enlarged floating window provided by the embodiment of the present application being displayed after being reduced Figure 1 ;

[0045] Figure 16 An example of the enlarged floating window provided by the embodiment of the present application being displayed after being reduced Figure 2 ;

[0046] Figure 17 An example of the enlarged floating window provided by the embodiment of the present application being displayed after being reduced An example of the framework of the system

[0047] Figure 18 A flowchart of displaying a floating window by the electronic device of the embodiment of the present application

[0048] Figure 19 An example of the structure of the electronic device provided by the embodiment of the present application is shown. DETAILED DESCRIPTION

[0049] The embodiment of the present application is used to provide a display method. The display method of the present application will be described below in combination with specific embodiments.

[0050] The present application does not limit the specific form of the electronic device, for example, the electronic device can be a mobile phone, a notebook computer, a tablet, a large-screen device, a wearable device (for example, a watch, smart glasses, a helmet), a desktop computer, an augmented reality (AR) / virtual reality (VR) device, a personal digital assistant (PDA), etc. Hereinafter, a mobile phone 100 will be described as an example of the electronic device.

[0051] It can be understood that the floating window described in the embodiments of the present application can be a floating window displaying various applications, such as a floating window displaying an instant messaging application, a short video application, an input method application, etc. The floating window can be an application window, a sub-window, or a system window, etc. In addition, the floating window of the currently displayed application can be referred to as a first floating window, and the newly popped-up floating window in response to a user operation or an internal calling instruction of the application can be referred to as a second floating window. Hereinafter, the first floating window will be taken as an example of the floating window of the instant messaging application or the floating window of the short video application, and the second floating window will be taken as an example of the soft keyboard of the input method application.

[0052] As described above, in some scenarios, when the floating window of the instant messaging application and the soft keyboard are displayed on the screen of the electronic device in their respective default sizes, no occlusion phenomenon occurs, and in this case, there is no need to adjust the default size of the floating window, and the elements displayed in the floating window will not appear to be displayed abnormally.

[0053] For example, as shown in FIG. 14A, the floating window of the instant messaging application is displayed at the top left of the screen, and the area left below is sufficient to display the soft keyboard of the input method application. Therefore, when the soft keyboard of the input method application pops up, the floating window of the instant messaging application will not be blocked, and there is no need to adjust the size of the floating window of the instant messaging application, and the elements displayed in the floating window of the instant messaging application will not appear display abnormalities. Figure 1 For example, as shown in FIG. 14B, the floating window of the instant messaging application overlaps with the to-be-displayed area of the soft keyboard of the input method application, but the size is small. When the soft keyboard of the input method application pops up, the floating window of the instant messaging application moves up, and the area left below the floating window of the instant messaging application is sufficient to display the soft keyboard of the input method application. Therefore, only by moving the floating window of the instant messaging application up, the floating window of the instant messaging application can be avoided to be blocked by the soft keyboard of the input method application, and similarly, since there is no need to adjust the size of the floating window of the instant messaging application, the elements displayed in the floating window of the instant messaging application will not appear display abnormalities.

[0054] Figure 2 For example, as shown in FIG. 14C, the size of the floating window of the instant messaging application is large, and overlaps with the to-be-displayed area of the soft keyboard of the input method application. When the soft keyboard of the input method application pops up, the electronic device moves the floating window of the instant messaging application to the top right corner of the screen, and reduces the size of the soft keyboard of the input method application, to avoid the soft keyboard of the input method application from blocking the floating window after popping up. In this scenario, the size of the floating window of the instant messaging application does not change, and the elements displayed in the floating window of the instant messaging application will not appear display abnormalities. However, after the soft keyboard of the input method application is reduced, it is not convenient for the user to type. Therefore, the electronic device usually does not choose to reduce the size of the soft keyboard, but to reduce the size of the floating window of the instant messaging application.

[0055] For example, as shown in FIG. 14D, the size of the floating window of the instant messaging application is large and overlaps with the to-be-displayed area of the soft keyboard of the input method application. When the soft keyboard of the input method application pops up, the electronic device moves the floating window of the instant messaging application to the top left corner of the screen, and reduces the size of the floating window of the instant messaging application, to reserve sufficient space for the soft keyboard of the input method application, to avoid the soft keyboard of the input method application from blocking the floating window of the instant messaging application after popping up. However, when the size of the floating window of the instant messaging application changes, it may cause some display abnormalities of the elements displayed in the floating window of the instant messaging application. Figure 3

[0056] Figure 4

[0057] ​​​​For example, when the electronic device reduces the height of the floating window of the instant messaging application, if the size and layout of the elements displayed in the floating window of the instant messaging application remain unchanged, the elements displayed in the floating window of the instant messaging application can be reduced. If, in order to avoid the reduction of the elements displayed in the floating window of the instant messaging application, the height of the elements displayed in the floating window of the instant messaging application is reduced while the width of the elements displayed in the floating window of the instant messaging application remains unchanged, the size ratio of the reduced elements in the floating window of the instant messaging application can be inconsistent.

[0058] Specifically, for example, as shown in Figure 5 the screen 10 of the mobile phone 100 displays a floating window L1 of an instant messaging application 11 (not shown in the figure) drawn on a floating window layer c1 (not shown in the figure), the height of the floating window L1 is H1, and the width of the floating window L1 is D1. The floating window layer c1 is consistent with the position and size of the floating window L1. The floating window L1 displays a chat interface M1 of the instant messaging application 11. When the mobile phone 100 detects that the user clicks on an edit box A1 of the chat interface M1 of the instant messaging application 11 displayed in the floating window L1, the mobile phone 100 can calculate the height of the floating window L1 as H1’ according to the height H2 of the screen 10, the reserved height H3 at the top of the screen 10, and the height H4 of the soft keyboard 21 of the input method application, such as H1’ = H2-H3-H4. Then, the mobile phone 100 reduces the height of the floating window L1 from H1 to H1’, and displays the reduced floating window L1 at the top left corner of the screen 10. The upper edge of the floating window L1 coincides with the lower edge of the top reserved area of the screen 10. The size of the floating window layer c1 is determined by the size of the floating window L1, and after the height of the floating window L1 is reduced from H1 to H1’, the height of the floating window layer c1 is also reduced from H1 to H1’. Since the display elements inside the floating window L1 are also drawn on the floating window layer c1, when the size of the floating window layer c1 is adjusted, the mobile phone 100 needs to redraw the chat interface M1 of the instant messaging application 11 on the floating window layer c1 in the floating window L1. In some cases, the mobile phone 100 does not adjust the layout and size of the interface elements when redrawing the chat interface M1 of the instant messaging application 11 in the floating window L1, but due to the reduction of the height of the floating window L1, the displayable area of the chat interface M1 is reduced, resulting in a reduction of the information displayed by the chat interface M1, which affects the user’s viewing of the chat information.

[0059] For another example, as shown in Figure 6As shown, the screen 10 of the mobile phone 100 displays a floating window L2 of a short video application 12 (not shown) drawn on a floating window layer c2 (not shown), which has a height H1 and a width D1. The floating window layer c2 is consistent with the position and size of the floating window L2. The floating window L2 displays a main interface M2 of the short video application 12. When the mobile phone 100 detects that the user clicks on an edit box A2 of the main interface M2 of the short video application 12 displayed in the floating window L2, the mobile phone 100 can calculate the height H1' of the floating window L2 according to the height H2 of the screen 10, the reserved height H3 at the top of the screen 10, and the height H4 of the soft keyboard 21 of the input method application, such as H1' = H2-H3-H4. Then, the mobile phone 100 reduces the height of the floating window L2 from H1 to H1', and displays the floating window L2 with the reduced height at the top left corner of the screen 10. The upper edge of the floating window L2 coincides with the lower edge of the reserved area at the top of the screen 10. The size of the floating window layer c2 is determined by the size of the floating window L2, and the height of the floating window layer c2 is reduced from H1 to H1' after the height of the floating window L2 is reduced from H1 to H1'. Since the display elements inside the floating window L2 are also drawn on the floating window layer c2, the mobile phone 100 needs to redraw the main interface M2 of the short video application 12 on the floating window layer c2 in the floating window L2 after the size of the floating window layer c2 is adjusted. In some cases, the mobile phone 100 reduces the height of the video window P1 when redrawing the main interface M2 of the short video application 12, but does not proportionally reduce the width of the video window P1, so that the video picture displayed by the video window P1 is only compressed in height, resulting in an inconsistent size ratio of the video picture and affecting user viewing.

[0060] It should be noted that the height mentioned herein is the size in the first size direction, and the width is the size in the second size direction. The first size direction is the vertical direction of the current display interface of the electronic device, such as the vertical direction of the main interface M2 of the short video application 12 displayed by the mobile phone 100 as shown. Figure 6 The second size direction is the horizontal direction of the current display interface of the electronic device, such as the horizontal direction of the main interface M2 of the short video application 12 displayed by the mobile phone 100 as shown. Figure 6 The second size direction is the horizontal direction of the current display interface of the electronic device, such as the horizontal direction of the main interface M2 of the short video application 12 displayed by the mobile phone 100 as shown.

[0061] To solve the above technical problems, the present application provides a display method. In the display method, for the case that the size of the first floating window needs to be adjusted when the second floating window pops up, the scale ratio at which the first floating window and the display elements inside the first floating window need to be scaled can be calculated based on the current size of the first floating window, the size of the floating window display area on the screen of the electronic device (such as the entire display area of the screen, the display area outside the top reserved area (such as the status bar area, etc.) on the screen, etc.), and the size of the second floating window. Then the first layer where the first floating window is located is scaled according to the scale ratio. When the first layer is scaled according to the scale ratio, the first floating window and the display elements inside the first floating window drawn on the first layer will also be scaled at the same time, and the scaling ratio of the first floating window and the display elements inside the first floating window is consistent. In this way, the abnormal display of the display elements inside the first floating window caused by the size of the first floating window being adjusted while the size of the display elements inside the first floating window is not adjusted, or the size of the display elements inside the first floating window being adjusted unreasonably, such as the display elements inside the first floating window being reduced, or the size ratio of the display elements inside the first floating window being inconsistent, etc. can be avoided.

[0062] It can be understood that the method of the embodiments of the present application scales the floating window and the display elements inside the floating window on the layer by scaling the layer of the floating window, without redrawing the floating window and the display elements inside the floating window on the layer, so that the display abnormality caused by the redrawing of the floating window and the display elements inside the floating window can be avoided.

[0063] For example, as Figure 7As shown, a floating window L1 (as an example of a first floating window) of an instant messaging application 11 (as an example of a first application) drawn on a floating window layer c1 (not shown in the figure, as an example of a first layer) is displayed on the screen 10 of the mobile phone 100. The floating window L1 is consistent with the size and position of the floating window layer c1. A chat interface M1 of the instant messaging application 11 is displayed in the floating window L1. When the mobile phone 100 detects that the user clicks on an edit box A1 in the chat interface M1 of the instant messaging application 11 in the floating window L1, the mobile phone 100 can calculate the height of the floating window display area as H2-H3 according to the height H2 of the screen 10 and the reserved height H3 at the top of the screen 10. Then, according to the current height H1 of the floating window L1, the height H4 of the soft keyboard 21 (as an example of a second floating window) of the input method application (as an example of a second application), and the height H2-H3 of the floating window display area, it is determined whether the soft keyboard 21 of the input method application will block the floating window L1 after being popped up. If yes, the scaling ratio of the floating window layer c1 on which the floating window L1 is located is calculated, and the floating window layer c1 is scaled based on the scaling ratio, so that the floating window L1 on the floating window layer c1 is scaled. If no, the floating window L1 does not need to be scaled, and in this case, the scaling ratio of the floating window layer c1 does not need to be calculated.

[0064] For example, when H1>(H2-H3-H4), it can be determined that the soft keyboard 21 of the input method application will block the floating window L1 after being popped up. When H1≤(H2-H3-H4), it can be determined that the soft keyboard 21 of the input method application will not block the floating window L1 after being popped up.

[0065] In some scenarios, such as Figure 7As shown, when the mobile phone 100 determines that the soft keyboard 21 of the input method application will obscure the floating window L1 after it pops up, it can calculate the scaled height of the floating window layer c1 as H1' based on the height of the floating window display area (H2-H3) and the height of the soft keyboard 21 (H4). For example, H1' = H2-H3-H4, or H1' can be any value less than H2-H3-H4 and greater than 0. Then, the mobile phone 100 can calculate the scaling ratio of the floating window layer c1 (H1' / H1) based on the current height H1 and the scaled height H1', ​​and proportionally reduce the height and width of the floating window layer c1 according to this scaling ratio, so that the width of the floating window layer c1 is reduced from D1 to D1', and the height is reduced from H1 to H1'. Where D1' / D1 = H1' / H1. It is understandable that the elements on the floating window L1 on the floating window layer c1, and the elements on the chat interface M1 of the instant messaging application 11 displayed within the floating window L1, will shrink proportionally as the floating window layer c1 shrinks. Thus, the number of elements displayed on the chat interface M1 of the instant messaging application 11 within the floating window L1 will not decrease, meaning the amount of chat information will not decrease, thereby not affecting the user's ability to view chat information.

[0066] For example, such as Figure 8 As shown, the screen 10 of the mobile phone 100 displays a floating window L2 (as an example of a first floating window) of a short video application 12 (as an example of a first application) drawn on a floating window layer c1. The main interface M2 of the short video application 12 is displayed within the floating window L2. When the mobile phone 100 detects that the user clicks the edit box A2 on the main interface M2 of the short video application 12 within the floating window L2, the mobile phone 100 can calculate the height of the floating window display area as H2-H3 based on the height H2 of the screen 10 and the reserved height H3 at the top of the screen 10. Then, based on the current height H1 of the floating window L2, the height H4 of the soft keyboard 21 of the input method application, and the height H2-H3 of the floating window display area, it determines whether the soft keyboard 21 of the input method application will obscure the floating window L1 after it pops up. When the mobile phone 100 determines that the soft keyboard 21 of the input method application will obscure the floating window L2 after it pops up, the mobile phone 100 can use the method described above... Figure 7The same calculation method in the example calculates the scaling ratio of the floating window layer c1: H1' / H1, and reduces the height and width of the floating window layer c1 in accordance with the scaling ratio, so that the width of the floating window layer c1 is reduced from D1 to D1', and the height is reduced from H1 to H1'. When the floating window layer c1 is reduced, the floating window L2 on the floating window layer c1 and the elements on the main interface M2 of the short video application 12 displayed in the floating window L2 are reduced in proportion to the reduction of the floating window layer c1. In this case, the video window P1 on the main interface M2 is also reduced in proportion. The height of the video window P1 is reduced from H5 to H5', and the width is reduced from D1 to D1'. Wherein, D1' / D1=H5' / H5. It can be understood that when the height and width of the video window P1 are reduced in proportion, the length and width of the video displayed inside the video window P1 are also reduced in proportion at the same ratio, so that the abnormal phenomenon of size ratio of the video displayed in the video window P1 is avoided.

[0067] Figure 9 The flowchart of the display method provided by the embodiments of the present application is shown in the figure. As shown in the figure, the display method comprises the following steps: Figure 9

[0068] S101: The electronic device displays a first floating window of a first application, and the first floating window is located on a first layer.

[0069] The first application can be an instant messaging application, a short video application, a photo album application, a map application, etc. The first floating window can be an application window, a sub-window, or a system window for displaying a floating window. The first layer is a layer for drawing the first floating window and the display elements inside the first floating window. The display elements can include videos, texts, pictures, buttons, icons, etc.

[0070] In some embodiments, when the electronic device detects a trigger operation of the first floating window, the electronic device can create a first layer with a default size, and create a system window with a default size on the first layer as the first floating window. Wherein, the default size of the first layer is less than or equal to the default size of the system window. The size of the first layer can be determined by the size of the first floating window, that is, after the first floating window is created on the first layer, the size of the first layer is consistent with the size of the created first floating window. Then, the electronic device embeds an application window of the first application in the first floating window, and displays a first application interface of the first application for triggering a second application in the application window. The second application can be an input method application, a short message application, a call application, a settings application, etc.

[0071] For example, as Figure 10 ​As shown, when the phone 100 (as an example of an electronic device) detects a user's operation of sliding inwards along the right side edge of the screen 10, the phone 100 can display the dock 30. The dock 30 includes application icons on the phone 100 desktop. When the user clicks the icon 11' of the instant messaging application 11 (as an example of a first application) in the dock 30, the phone 100 can create a floating window layer cl (as an example of a first layer) on the screen 10, such as a floating window layer cl of a default size at a center position of the screen 10. Then, the phone 100 creates a floating window L1 (as an example of a first floating window) in the floating window layer cl, which is smaller than or equal to the floating window layer cl in size, and embeds an application window (not shown in the figure) of the instant messaging application 11 in the floating window L1. Then, a contact interface M3 of the instant messaging application 11 is drawn in the application window. When the user clicks the "Group A" entry on the contact interface M3 of the instant messaging application 11 in the floating window L1, the phone 100 redraws the application interface displayed in the floating window L1 to update the contact interface M3 currently displayed in the floating window L1 to a chat interface M1 (as an example of a first application interface).

[0072] For another example, as shown in FIG. 1C, when the phone 100 detects a user's operation of sliding inwards along the lower edge of the screen 10, the phone 100 can display a thumbnail Figure 11 of the chat interface M1 of the instant messaging application 11 on the screen 10 of the phone 100. Figure 15 and a thumbnail Figure 15 of the chat interface M1 of the instant messaging application 11. When the phone 100 detects a user's operation of clicking the floating window control 16, the phone 100 can create a floating window layer cl on the screen 10, such as a floating window layer cl of a default size at a center position of the screen 10. Then, the phone 100 creates a floating window L1 in the floating window layer cl, which is smaller than or equal to the floating window layer cl in size, and embeds an application window of the instant messaging application 11 in the floating window L1. Finally, the chat interface M1 of the instant messaging application 11 is drawn in the application window.

[0073] In some scenarios, after the electronic device displays a first floating window of a default size, the user can adjust the size of the first floating window according to his / her own needs, resulting in an occlusion between the first floating window and a second floating window of a default size displayed by the electronic device, such as the second floating window occluding the first floating window or the first floating window occluding the second floating window.

[0074] For example, as shown in FIG. 1C, when the phone 100 detects a user's operation of sliding inwards along the lower edge of the screen 10, the phone 100 can display a thumbnail Figure 12As shown, mobile phone 100 displays a floating window L1 with a height of H1' and a width of D1' at the center of the window display area on screen 10. When mobile phone 100 detects a user's zoom-in operation on floating window L1, mobile phone 100 can respond to this zoom-in operation by enlarging the size of the floating window layer c1 corresponding to floating window L1, thus enlarging floating window L1 on floating window layer c1, for example, increasing the height of floating window L1 from H1' to H1, and increasing the width of floating window L1 from D1' to D1. Combined with... Figure 11 As shown in the example, after the height of the floating window L1 is increased from H1' to H1, when the soft keyboard 21 of the input method application pops up from the bottom of the screen 10 of the mobile phone 100, even if the floating window L1 moves up to the top of the floating window display area, it will still be obscured by the soft keyboard 21 of the input method application.

[0075] It's understandable that when a layer is scaled, the elements displayed on that layer will be scaled proportionally. When the floating window layer c1 is enlarged, the floating window L1 on the floating window layer c1 and the elements displayed inside the floating window L1 will also be enlarged proportionally.

[0076] It should be noted that in this embodiment, the pop-up position and size of the soft keyboard 21 of the input method application are preset. This embodiment does not limit the pop-up position and default size of the soft keyboard 21 of the input method application. For example, the display keyboard 21 of the input method application can also pop up from the top, left, or right side of the screen 10 of the mobile phone 100.

[0077] In some embodiments, after the electronic device displays the first floating window on the screen, when the electronic device detects a user's movement operation on the first floating window, the electronic device may move the position of the first floating window in response to the operation.

[0078] For example, such as Figure 13 As shown, when the mobile phone 100 detects that the user moves the floating window L1 to the upper left of the screen 10, the mobile phone 100 can control the floating window L1 to follow the user's finger and move to the corresponding position in the upper left of the screen 10.

[0079] S102: In response to the detection of a trigger event that displays a second floating window of a second application, the electronic device determines a first scaling ratio for scaling the first floating window based on the first size of the first floating window, the second size of the floating window display area on the screen of the electronic device, and the third size of the second floating window.

[0080] The floating window display area can be the entire display area of ​​the electronic device's screen, or it can be a specific display area on the screen of the electronic device that is set to display the floating window, such as the display area outside the reserved area at the top of the screen of the electronic device (such as the area where the status bar is located), etc. There is no limitation on this.

[0081] In the embodiments of the present application, the second application can be triggered in various ways to display the second floating window. The following describes the triggering method of the second floating window of the second application.

[0082] In some embodiments, the desktop of the electronic device only displays the first floating window of the first application. When the user performs an operation on the interface of the first application in the first floating window to trigger the second floating window of the second application, the electronic device can detect the triggering event of displaying the second floating window of the second application.

[0083] For example, as shown in FIG. 1A, the desktop of the screen 10 of the mobile phone 100 displays the floating window L1 (as an example of the first floating window) of the instant messaging application 11 (as an example of the first application). The chat interface M1 of the instant messaging application 11 displayed in the floating window L1 includes an edit box A1. When the user clicks the edit box A1 on the chat interface M1, the mobile phone 100 detects the triggering event of displaying the soft keyboard 21 (as an example of the second floating window) of the input method application (as an example of the second application). Figure 14A In other embodiments, when the user performs an operation on the application interface of the third application displayed under the first floating window to trigger the second floating window of the second application, the electronic device can detect the triggering event of displaying the second floating window of the second application.

[0084] For example, as shown in FIG. 1B, the screen 10 of the mobile phone 100 displays the message editing interface M4 of the message application 13 (not shown in the figure, as an example of the third application). The message editing interface M4 displays the floating window L3 (as an example of the first floating window) of the gallery application 14 (as an example of the first application), and the video M5 is displayed in the floating window L3. When the user clicks the edit box A3 on the message editing interface M4, the mobile phone 100 detects the triggering event of the soft keyboard 21 of the input method application.

[0085] Figure 14B For example, as shown in FIG. 1C, the chat interface M1 of the instant messaging application 11 and the message editing interface M5 of the message application 13 (as an example of the third application) are displayed in split screen on the screen 10 of the mobile phone 100. The chat interface M1 of the instant messaging application 11 is located above the message editing interface M5 of the message application 13. The floating window L3 of the gallery application 14 is suspended on the split screen interface of the instant messaging application 11 and the message application 13. When the user clicks the edit box A3 on the message editing interface M5 of the message application 13, the mobile phone 100 detects the triggering event of the soft keyboard 21 of the input method application.

[0086] For example, as shown in FIG. 1C, the chat interface M1 of the instant messaging application 11 and the message editing interface M5 of the message application 13 (as an example of the third application) are displayed in split screen on the screen 10 of the mobile phone 100. The chat interface M1 of the instant messaging application 11 is located above the message editing interface M5 of the message application 13. The floating window L3 of the gallery application 14 is suspended on the split screen interface of the instant messaging application 11 and the message application 13. When the user clicks the edit box A3 on the message editing interface M5 of the message application 13, the mobile phone 100 detects the triggering event of the soft keyboard 21 of the input method application. Figure 14C

[0087] ​​In yet some embodiments, the first application is a gallery application, and the at least one application is a short message application. The first floating window of the gallery application and the floating window of the short message application are displayed on the screen of the electronic device. When the user performs an operation of triggering the second floating window of the second application on the application interface displayed in the floating window of the at least one application, the electronic device can detect a second floating window display triggering event of the second application.

[0088] For example, as shown in FIG. 1A, the floating window L3 of the gallery application 14 (as an example of the first application) and the floating window L4 of the short message application 13 are displayed on the screen 10 of the mobile phone 100. The short message editing interface M5 of the short message application 13 is displayed in the floating window L4 of the short message application 13. When the user clicks the edit box A3 on the short message editing interface M5 of the short message application 13, the mobile phone 100 detects a triggering event of the soft keyboard 21 of the input method application. Figure 14D

[0089] In some embodiments, after the electronic device detects the triggering event of displaying the second floating window of the second application, in response to the triggering event, the electronic device can determine whether there is an overlapping area between the first floating window and the second floating window when the second floating window is displayed according to the size of the first floating window, the second size of the floating window display area on the screen of the electronic device, and the second size of the second floating window. When the electronic device determines that there is an overlapping area between the first floating window and the second floating window when the second floating window is displayed, the electronic device can determine a first scale ratio of the scaling processing of the first floating window according to the first size of the first floating window, the second size of the floating window display area on the screen of the electronic device, and the third size of the second floating window, and scale the first layer on which the first floating window is located according to the first scale ratio.

[0090] For example, as shown in FIG. 1A, the floating window L3 of the gallery application 14 (as an example of the first application) and the floating window L4 of the short message application 13 are displayed on the screen 10 of the mobile phone 100. The short message editing interface M5 of the short message application 13 is displayed in the floating window L4 of the short message application 13. When the user clicks the edit box A3 on the short message editing interface M5 of the short message application 13, the mobile phone 100 detects a triggering event of the soft keyboard 21 of the input method application. Figure 14A ​As shown, when the mobile phone 100 detects that the user clicks on the edit box A1 in the chat interface M1 in the floating window L1 of the instant messaging application 11, the mobile phone 100 can calculate the height of the floating window display area according to the height H2 of the screen 10 and the height H3 of the top reserved area of the screen 10: H2-H3. Then, according to the height H1 of the floating window L1, the height H2-H3 of the floating window display area, and the height H4 of the soft keyboard 21 of the input method application, it is determined whether there is an obstruction between the soft keyboard 21 of the input method application after it is popped up and the floating window L1. When H1≤(H2-H3-H4), it can be determined that there is no obstruction between the soft keyboard 21 of the input method application after it is popped up and the floating window L1, and at this time the mobile phone 100 does not need to continue the scaling processing of the floating window L1. When H1>(H2-H3-H4), it can be determined that there is an obstruction between the soft keyboard 21 of the input method application after it is popped up and the floating window L1. At this time, the mobile phone 100 can calculate the height of the floating window L1 after scaling according to the current height H1 of the floating window L1, the height (H2-H3) of the floating window display area, and the height H4 of the soft keyboard 21 of the input method application. For example, H1’=H2-H3-H4, or H1’ can also be any value less than H2-H3-H4 and greater than 0. Finally, according to the current height H1 and the height H1’ after scaling of the floating window L1, the first scaling ratio of the floating window L1 is calculated: H1’ / H1.

[0091] It should be noted that Figure 14B 、 Figure 14C and Figure 14D the determination process of the scaling ratio of the first floating window in the scenario shown is substantially the same as the determination process of the scaling ratio of the first floating window in the scenario shown in Figure 14A , which will not be described here.

[0092] In some other embodiments, after the electronic device detects the triggering event of displaying the second floating window of the second application, the electronic device can also directly respond to the triggering event to determine the first scaling ratio of the first floating window according to the size of the first floating window, the second size of the floating window display area, and the second size of the second floating window, and to scale the first layer where the first floating window is located according to the first scaling ratio.

[0093] S103: The electronic device performs scaling processing on the first layer based on the first scaling ratio, so that the first floating window and the display elements in the first floating window on the first layer are scaled according to the first scaling ratio.

[0094] After the electronic device determines the first scaling ratio of the first floating window, the electronic device can perform scaling processing on the first layer where the first floating window is located based on the first scaling ratio, so that the first floating window and the display elements in the first floating window on the first layer are scaled according to the first scaling ratio.

[0095] It should be noted that when the value of the first ratio is less than 1, the electronic device scales the first layer containing the first floating window based on the first ratio, which means the first floating window is shrunk. When the value of the first ratio is greater than or equal to 1, it means that there is no obstruction between the second floating window and the first floating window, and the electronic device does not need to scale the first layer containing the first floating window.

[0096] S104: The electronic device displays a scaled-down first floating window and a second floating window within the floating window display area, wherein there is no overlapping area between the first floating window and the second floating window.

[0097] After the electronic device scales the first floating window, it can display the scaled first and second floating windows respectively in the default position within the floating window display area, and there is no overlapping area between the first and second floating windows, that is, there is no obstruction between the second and first floating windows.

[0098] For example, such as Figure 15 As shown, a floating window L1 of an instant messaging application 11 is displayed on the screen 10 of the mobile phone 100. The floating window L1 has a height of H1 and a width of D1. The chat interface M1 of the instant messaging application 11 is displayed within the floating window L1. When the mobile phone 100 detects that a user clicks the edit box A1 on the chat interface M1 of the instant messaging application 11, the mobile phone 100 can shrink the floating window layer c1 containing the floating window L1 based on a first ratio (H1' / H1), causing the height of the floating window L1 to shrink from H1 to H1' and the width to shrink from D1 to D1'. Where H1' / H1 = D1' / D1. Combined with the above... Figure 11 As shown in the example, after the height of the floating window L1 is reduced to H1', ​​the soft keyboard 21 of the input method application will not obscure the floating window L1 when it pops up from the bottom of the screen 10. Then, the mobile phone 100 displays the reduced floating window L1 in the upper left corner of the floating window display area and displays the soft keyboard 21 of the input method application at the bottom of the floating window display area. Since the floating window layer c1 on which the floating window L1 is located is reduced, the floating window L1 on the floating window layer c1 and the display elements inside the floating window L1 will be reduced proportionally. Therefore, the elements (such as chat messages) on the chat interface M1 of the communication application 11 displayed in the floating window L1 are not reduced, which can avoid the display abnormality of the display elements inside the floating window L1.

[0099] For example, such as Figure 16As shown, the screen 10 of the mobile phone 100 displays a floating window L2 of a short video application 12, and the height of the floating window L2 is H1 and the width is D1. The main interface M2 of the short video application 12 is displayed in the floating window L2. When the mobile phone 100 detects that the user clicks the edit box A2 on the main interface M2 of the short video application 12, the mobile phone 100 can reduce the floating window layer c2 in which the floating window L2 is located based on the first ratio (H1’ / H1), so that the height of the floating window L2 is reduced from H1 to H1’, and the width is reduced from D1 to D1’. Wherein, H1’ / H1=D1’ / D1. In combination with the above Figure 11 As shown in the example, after the height of the floating window L1 is reduced to H1’, when the soft keyboard 21 of the input method application is popped up from the bottom of the screen 10, the floating window L2 is not blocked. Then, the mobile phone 100 can display the reduced floating window L2 in the upper left corner of the floating window display area, and display the soft keyboard 21 of the input method application in the bottom of the floating window display area. Since the floating window layer c2 in which the floating window L2 is located is reduced, the floating window L2 on the floating window layer c2 and the display elements inside the floating window L2 are all reduced by the same ratio. For example, the height of the video window P1 displayed inside the floating window L2 is reduced from H5 to H5’, and the width is reduced from D1 to D1’, wherein H5’ / H5=D1’ / D1. Since the height and width of the video window P1 are reduced by the same ratio, the height and width of the video picture displayed inside the video window P1 are also reduced by the same ratio, so that no abnormal phenomenon of inconsistent size ratio occurs.

[0100] In the embodiments of the present application, when the first floating window is scaled, the first floating window is scaled by scaling the first layer in which the first floating window is located. Since the first floating window and the display elements inside the first floating window on the first layer are scaled by the same ratio when the first layer is scaled, that is, the scaling ratio of the first floating window and the display elements inside the first floating window is consistent, the display elements inside the first floating window can be prevented from displaying abnormally.

[0101] In some embodiments, when the electronic device displays the second floating window and the scaled first floating window in the floating window display area, the electronic device can display the dynamic effect of the second floating window, and determine and display the dynamic effect of switching from the first floating window to the scaled first floating window based on the first ratio. Wherein, the dynamic effect includes at least one scaled image of the first floating window, and the scaling ratio of the scaled image is determined based on the first ratio and the number of scaled images, for example, the scaling ratio of the scaled image can be equal to the product of the first ratio and the number of scaled images. Wherein, the number of scaled images is predetermined, which is not limited.

[0102] In addition, during the zooming of the first floating window, the display position of each zoomed image of the first floating window also changes accordingly, so that the first floating window moves from the current display position to the top position of the floating window display area.

[0103] In some embodiments, the electronic device can determine the moving direction and moving distance of the first floating window based on the current position of the first floating window and the display position of the first floating window after zooming, and then determine the display position of each zoomed image of the first floating window, i.e., the display position of each frame during the zooming of the first floating window, based on the moving direction and moving distance of the first floating window and the number of zoomed images. Then, the electronic device can display the animation effect of the first floating window based on the display position of each zoomed image and the zooming ratio.

[0104] It should be understood that the animation effect of the first floating window can be linked with the animation effect of the second floating window, that is, the first floating window is gradually zoomed during the gradual display of the second floating window. For example, as shown in Figure 15 , the soft keyboard 21 of the input method application gradually displays from the bottom of the screen 10 of the mobile phone 100, and the floating window L1 of the instant messaging application 11 gradually shrinks and moves.

[0105] In some embodiments, the system of the electronic device can the system, the system, and the like. Hereinafter, the system architecture of the electronic device will be exemplarily described by taking the system as an example.

[0106] Figure 17 The system provided by the embodiments of the present application The system architecture example diagram of the system. As shown in Figure 17 , the Android system can be divided into four layers, from top to bottom, the application layer, the application framework layer, the Android runtime, the system library and the kernel layer. The layers communicate with each other through software interfaces.

[0107] The application layer can include instant messaging applications, short video applications, input method applications, cameras, galleries, calendars, calls, maps, navigation, Bluetooth, SMS, and the like.

[0108] The application framework layer provides application programming interfaces (APIs) and programming frameworks for the applications in the application layer. The application framework layer includes some pre-defined functions.

[0109] As shown in Figure 17 , the application framework layer can include an application window management module, an input method framework, an input method display state module, an input method animation linkage management module, a floating window management module, a view system, and the like.​

[0110] The application window management module is configured to manage the view tree of the application interface, including layout, drawing, event response, pop-up event of the soft keyboard of the input method application, and the like. For example, as shown in FIG. 1, when the application window management module of the mobile phone 100 detects that the edit library A1 on the chat interface M1 of the instant messaging application 11 in the floating window L1 is triggered, the application window management module can display the soft keyboard 21 of the input method application on the screen 10 of the mobile phone 100. Figure 15

[0111] The input method framework is configured to provide an input method interface, and manage the function setting of the input method application, the display of the soft keyboard of the input method application, the hiding life cycle of the soft keyboard of the input method application, and the like. When the electronic device displays the soft keyboard of the input method application, the application management module of the electronic device can call the soft keyboard of the input method application by calling the input method interface provided by the input method framework.

[0112] The input method display state module is configured to manage the properties of the window (such as the soft keyboard) of the input method application, such as size, direction, visibility (such as transparency), display state, and the like, and distribute the state of the input method application to the application window or a specific listener. For example, when the application window management module calls the soft keyboard of the input method application by calling the input method interface provided by the input method framework, the input method display state module can update the display state of the soft keyboard of the input method from the non-display state to the display state, such as updating the identifier for indicating the display state of the soft keyboard of the input method from 1 to 0, or from false to true, and the like.

[0113] The floating window management module is configured to manage the position, size, shape, scaling ratio, and operation mode of the floating window, and the like. For example, when the floating window management module of the electronic device detects a movement operation of the user on the floating window displayed on the screen of the electronic device, the floating window management module can move the position of the floating window based on the movement operation. When the floating window management module of the electronic device detects a scaling operation of the user on the floating window displayed on the screen of the electronic device, the floating window management module can scale the size of the floating window based on the scaling operation. When the floating window management module determines that the popped-up soft keyboard of the input method application will block the floating window, the floating window management module can determine the scaling ratio of the floating window according to the size of the window display area on the screen of the electronic device, the size of the floating window, and the size of the soft keyboard of the input method application. Then, the floating window layer where the floating window is located is scaled based on the scaling ratio of the floating window, so that the size of the floating window on the floating window layer is scaled, so that the scaled floating window will not be blocked by the popped-up soft keyboard of the input method application.

[0114] ​The input method animation linkage management module is used to sense the attributes of the input method window and realize the linkage animation effects between the input method application window and the current window. During the display of the input method application's soft keyboard, the input method animation linkage management module can link with the floating window management module to simultaneously play the pop-up animation of the input method application's soft keyboard and the movement and scaling animation effects of the floating window, making the pop-up of the input method application's soft keyboard and the movement and scaling of the floating window smoother.

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

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

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

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

[0119] The system library can include multiple functional modules. For example: surface manager, media library, 3D graphics processing library, 2D graphics engine, etc.

[0120] The Surface Manager is used for layer creation and management, such as creating floating window layers and scaling floating window layers.

[0121] The media library supports playback and recording of various common audio and video formats, as well as still image files.

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

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

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

[0125] The following is combined Figure 17 shown The system architecture is described in the embodiments of this application.

[0126] Figure 18 This is an example diagram illustrating the display process of a floating window when the soft keyboard of an input method application pops up, as provided in an embodiment of this application.

[0127] like Figure 18 As shown, the process includes the following steps:

[0128] S201: The application window management module detected that the user clicked the edit box.

[0129] In some embodiments, when an application on an electronic device is displayed as a floating window on the screen of the electronic device, the electronic device can call the Surface Manager service to create a floating window layer on the screen of the electronic device, and then call the Floating Window Management module to create a system window as a floating window on the floating window layer. After the floating window is created, the electronic device can call the Application Window Management module to create the application window of the application within the floating window, and draw the application interface of the application within the application window.

[0130] In some embodiments, the application interface displayed in the application window within the floating window includes an edit box. When the application window management module of the electronic device detects that the user clicks on the edit box on the application interface, the edit box gains focus, and the application window management module can then invoke the soft keyboard of the input method application.

[0131] For example, such as Figure 15 As shown, a floating window L1 of an instant messaging application 11 is displayed on the screen 10 of the mobile phone 100. The floating window L1 displays the chat interface M1 of the instant messaging application 11, which includes an edit box A1. When the user clicks on the edit box A1 on the chat interface M1, the edit box A1 gains focus, and the application window management module of the mobile phone 100 can call the soft keyboard 21 of the input method application.

[0132] It should be noted that calling the input method application's soft keyboard by clicking the edit box is only an example. In other embodiments, other methods can be used to call the input method application's soft keyboard, such as clicking the edit button, or triggering the input method application's soft keyboard through preset shortcut operations such as swiping up, swiping sideways, or long-pressing.

[0133] S202: The application window management module calls the input method interface provided by the input method framework.

[0134] Once the edit box on the application interface displayed in the floating window gains focus, the application window manager can call the input method interface provided by the input method framework to invoke the soft keyboard of the input method application through the input method interface.

[0135] S203: The input method framework calls the soft keyboard of the input method application.

[0136] In some embodiments, after the application window management module invokes the input method interface provided by the input method framework, the input method framework can invoke the soft keyboard of the input method application for the user to use.

[0137] S204: The input method framework sends a call message of the soft keyboard of the input method application to the input method display state module.

[0138] In some embodiments, after the input method framework invokes the soft keyboard of the input method application, the input method framework can send a message to the input method display state module that the soft keyboard of the input method application is invoked.

[0139] S205: The input method display state module constructs a state parameter set of the soft keyboard of the input method application.

[0140] In some embodiments, after the input method display state module receives the message sent by the input method framework, the input method display state module acquires the state parameters of the soft keyboard of the input method application, such as the size, position, transparency, display state identifier, and the like, in response to the message, and constructs the corresponding parameter set. In some embodiments, the display state identifier can be represented in different ways, such as 1 (indicating display) or 0 (indicating non-display), true (indicating display) or false (indicating non-display), and the like, which are not limited. Since the soft keyboard of the input method application is invoked, the soft keyboard display state identifier is updated, such as from 0 to 1, or from false to true, and the like.

[0141] S206: The input method display state module sends a display state change message of the soft keyboard of the input method application to the input method motion effect linkage management module.

[0142] In some embodiments, after the input method display state module determines that the display state identifier of the soft keyboard of the input method application is updated, the input method display state module can send a display state change message of the soft keyboard of the input method application to the input method motion effect linkage management module to notify the input method motion effect linkage management module to link with the floating window management module to avoid the soft keyboard of the input method application from blocking the floating window of the application program after being popped up.

[0143] S207: The input method motion effect linkage management module plays a display motion effect of the soft keyboard of the input method application.

[0144] After the input method effect linkage management module receives the display state change message of the soft keyboard of the input method application sent by the input method display state module, the input method effect linkage module can play the display effect of the soft keyboard of the input method application. For example, the soft keyboard of the input method application pops up from the bottom of the screen of the electronic device. In other embodiments, the soft keyboard of the input method application can also pop up from other positions on the screen of the electronic device, such as the left side, the right side, the top, etc.

[0145] S208: The input method effect linkage management module sends the effect play notification of the floating window layer to the floating window management module.

[0146] In some embodiments, during the process of the soft keyboard of the input method application popping up from the bottom of the screen of the electronic device, the input method effect linkage management module can send the effect play notification of the floating window layer to the floating window management module by calling the onAnimationStart function, to inform the floating window management module to play the display effect of the floating window layer.

[0147] S209: The floating window management module determines the initial scaling ratio of the floating window layer.

[0148] In some embodiments, after the floating window management module receives the effect play notification sent by the input method effect linkage management module, based on the current size of the floating window, the size of the floating window display area on the screen of the electronic device, and the size of the soft keyboard of the input method application, it determines whether there is an overlapping area between the soft keyboard of the input method application and the floating window after the soft keyboard pops up. If yes, the floating window management module can determine the initial scaling ratio of the floating window layer according to the size of the floating window display area, the size of the soft keyboard of the input method application, and the current size of the floating window. For example, the scaling ratio = (the height of the floating window display area - the height of the soft keyboard of the input method application) / the current height of the floating window. In some embodiments, the height of the floating window display area = the height of the screen of the electronic device - the reserved height of the top area of the screen of the electronic device. If no, the floating window management module does not perform the process of determining the scaling ratio of the floating window layer.

[0149] It can be understood that when the height of the floating window is greater than the height difference between the floating window display area and the soft keyboard of the input method application, it can be determined that the soft keyboard of the input method application will block the floating window after it pops up. When the height of the floating window is less than or equal to the height difference between the floating window display area and the soft keyboard of the input method application, it can be determined that the soft keyboard of the input method application will not block the floating window after it pops up.

[0150] For example, as shown in FIG. 14, the height of the screen 10 of the mobile phone 100 is H2, the height of the top reserved area of the screen 10 is H3, and the height of the floating window display area on the screen 10 is H2-H3. Since H1>(H2-H3-H4), it can be determined that the soft keyboard 21 of the input method application will block the floating window L1 after being popped up, and at this time, the floating window management module of the mobile phone 100 can determine the initial scaling ratio of the floating window layer c1 in which the floating window L1 is located according to the height H4 of the input keyboard 21 of the input method application and the current height H1 of the floating window L1, for example, (H2-H3-H4) / H1.

[0151] In some other embodiments, after receiving the animation playing notification sent by the input method animation linkage management module, the floating window management module can directly determine the initial scaling ratio of the floating window layer based on the current size of the floating window, the size of the floating window display area on the screen of the electronic device, and the size of the soft keyboard of the input method application.

[0152] S210: The input method animation linkage management module sends an update notification of the floating window layer to the floating window management module.

[0153] In some embodiments, the input method animation linkage management module can send the update notification to the floating window management module by calling the onAnimationUpdate function to notify the top-up scaling animation of the floating window layer and update the scaling ratio of each frame of the floating window layer during the playing process. The top-up scaling animation is an animation in which the floating window layer moves to the top of the floating window display area on the screen of the electronic device and is scaled.

[0154] S211: The floating window management module plays the top-up scaling animation of the floating window layer.

[0155] In some embodiments, after receiving the update notification of the floating window layer sent by the input method animation linkage management module, the floating window management module can play the top-up scaling animation of the floating window layer, that is, move the floating window layer to the top position of the floating window display area and perform scaling processing on the floating window layer during the moving process. Since the floating window management module performs scaling on the floating window layer frame by frame, the floating window management module can determine the scaling ratio of each frame of the floating window layer based on the scaling frame number of the floating window layer and the initial scaling ratio. Then, the floating window management module can perform scaling processing on the floating window layer based on the scaling ratio of the floating window layer of the current frame each time the floating window layer is scaled. Similarly, the floating window management module can determine the moving position of each frame based on the initial position of the floating window layer and the target position to which the floating window layer is finally moved, and then the floating window management module moves the floating window layer to the corresponding position each time the floating window layer is moved. The target position can be a pre-set position, which is not limited.

[0156] S212: The input method animation linkage management module sends a notification to the floating window management module that the animation of the floating window layer has ended.

[0157] In some embodiments, when the animation playback duration of the floating window layer reaches the set playback duration, the input method animation linkage management module can send an animation end notification to the floating window management module by calling the onAnimationUpdate function. It can be understood that the floating window layer completes scaling within the set playback duration.

[0158] S213: The floating window management module displays the scaled-down floating window and the soft keyboard of the input method application.

[0159] It is understandable that when the floating window layer is scaled, the floating window on the floating window layer and the displayed elements inside the floating window will also be scaled proportionally.

[0160] In some embodiments, the pop-up duration of the input method application's soft keyboard is consistent with the scaling duration of the floating window layer. When the scaling of the floating window layer is complete, the input method application's soft keyboard also fully pops up simultaneously. After receiving the animation end notification sent by the input method animation linkage management module, the floating window management module can display the scaled floating window and the input method application's soft keyboard, which pops up in the default position, at the target location of the floating window display area on the electronic device's screen.

[0161] For example, such as Figure 15 As shown, a floating window L1 of an instant messaging application 11 is displayed in the lower right corner of the floating window display area on the screen 10 of the mobile phone 100. L1 has a height of H1 and a width of D1. When the user clicks the edit box A1 on the chat interface M1 of the instant messaging application 11 displayed within the floating window L1, the floating window management module of the mobile phone 100 can shrink the height of the floating window L1 from H1 to H1' and the width from D1 to D1'. Where H1' / H1 = D1' / D1. The floating window management module of the mobile phone 100 then moves the shrunken floating window L1 to the upper left corner of the floating window display area and displays the soft keyboard 21 of the input method application at the bottom of the floating window display area.

[0162] In this embodiment, the floating window management module of the electronic device scales the floating window layer, and the floating window and its internal display elements are scaled proportionally. Because the scaling ratio of the floating window and its internal display elements is consistent, display abnormalities caused by the floating window's size being adjusted while the internal elements' sizes are not adjusted or are improperly adjusted can be avoided.

[0163] Figure 19A structural diagram of the electronic device 1000 is shown. The electronic device 1000 can be a mobile phone, a notebook computer, a tablet, a large-screen device, a wearable device (for example, a watch, smart glasses, a helmet), a desktop computer, an AR / VR device, a PDA mentioned in the present application. The electronic device 1000 can include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a key 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 can include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0164] The processor 100 can execute instructions stored in the internal memory 121, and calculate a first scale ratio for scaling the first floating window based on a first size of the first floating window, a second size of the floating window display area, and a third size of the second floating window.

[0165] The display screen 194 can also be referred to as a screen, and is used to display the first floating window of the first application and the second floating window of the second application.

[0166] The touch sensor 180K is used to detect the operation of the user triggering the display of the floating window of the first application and the second floating window of the second application.

[0167] It can be understood that the structure shown in the embodiments of the present application does not constitute a specific limitation on the electronic device 1000. In other embodiments of the present application, the electronic device 1000 can include more or fewer components than the diagram, or combine certain components, or split certain components, or different component arrangements. The components shown can be implemented in hardware, software, or a combination of software and hardware.

[0168] The processor 110 can include one or more processing units, for example: the processor 110 can include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. In some embodiments, the processor 110 can include one or more interfaces. The interfaces can include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a SIM interface.

[0169] The charging management module 140 is configured to receive charging input from a charger. The charger can be a wireless charger or a wired charger. In some embodiments of wired charging, the charging management module 140 can receive charging input from a wired charger through the USB interface 130. In some embodiments of wireless charging, the charging management module 140 can receive wireless charging input through a wireless charging coil of the electronic device 1000. The charging management module 140 can supply power to the electronic device through the power management module 141 while charging the battery 142.

[0170] The power management module 141 connects the battery 142, the charging management module 140, and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140, providing power to the processor 110, internal memory 121, display screen 194, camera 193, and wireless communication module 160, etc. The power management module 141 can also monitor parameters such as battery capacity, battery cycle count, and battery health status (leakage current, impedance). In some other embodiments, the power management module 141 may also be located within the processor 110. In other embodiments, the power management module 141 and the charging management module 140 may be located in the same device.

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

[0172] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 1000 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 a tuning switch.

[0173] The mobile communication module 150 can provide wireless communication solutions, including 2G / 3G / 4G / 5G, for use on the electronic device 1000. The mobile communication module 150 can receive electromagnetic waves via the antenna 1, and perform filtering, amplification, and other processing on the received electromagnetic waves before transmitting them to the 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 the antenna 1. In some embodiments, at least some functional modules of the mobile communication module 150 can be housed in the processor 110. In some embodiments, at least some functional modules of the mobile communication module 150 and at least some modules of the processor 110 can be housed in the same device.

[0174] The modem processor can include a modulator and a demodulator. The modulator is configured to modulate a low-frequency baseband signal to be transmitted into a medium-high frequency signal. The demodulator is configured to demodulate a received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. The low-frequency baseband signal, after being processed by the baseband processor, is transmitted to the application processor. The application processor outputs a sound signal through an audio device (not limited to a speaker 170A, a microphone 170B, etc.), or displays an image or a video through the display screen 194. In some embodiments, the modem processor can be a separate device. In other embodiments, the modem processor can be independent of the processor 110 and disposed in the same device as the mobile communication module 150 or other functional modules.

[0175] The wireless communication module 160 can provide a wireless communication solution including a wireless local area network (WLAN) (such as a wireless fidelity (Wi-Fi) network), Bluetooth (BT), a global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR) technology, and the like, which are applied to the electronic device 1000. The wireless communication module 160 can be one or more devices that integrate at least one communication processing module. The wireless communication module 160 receives an electromagnetic wave via the antenna 2, performs frequency modulation and filtering processing on the electromagnetic wave signal, and transmits the processed signal to the processor 110. The wireless communication module 160 can also receive a signal to be transmitted from the processor 110, perform frequency modulation, amplification, and convert it into electromagnetic wave radiation via the antenna 2.

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

[0177] The electronic device 1000 implements a display function through a GPU, a display screen 194, and an application processor, etc. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 can include one or more GPUs that execute program instructions to generate or change display information.

[0178] The display screen 194 is configured to display images, videos, and the like. The display screen 194 includes a display panel. In some embodiments, the electronic device 1000 can include one or N display screens 194, where N is a positive integer greater than one.

[0179] The electronic device 1000 can implement the photographing function through the ISP, the camera 193, the video codec, the GPU, the display screen 194, and the application processor.

[0180] The external memory interface 120 can be configured to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 1000. The external memory card communicates with the processor 110 through the external memory interface 120 to implement the data storage function. For example, the external memory card is configured to store messages, videos, and the like.

[0181] The internal memory 121 can be configured to store computer-executable program codes including instructions. The internal memory 121 can include a program storage area and a data storage area. The program storage area can store an operating system, at least one application program (such as an image playing function, etc.) required by a function, and the like. The data storage area can store data (such as audio data, a phonebook, etc.) created during the use of the electronic device 1000, and the like. In addition, the internal memory 121 can include a high-speed random access memory, and can further include a non-volatile memory, such as at least one magnetic disk storage device, a flash memory device, etc. The processor 110 executes various function applications and data processing of the electronic device 1000 by running the instructions stored in the internal memory 121 and / or the instructions stored in the memory disposed in the processor.

[0182] Embodiments disclosed in the present application can be implemented in hardware, software, firmware, or a combination thereof. Embodiments of the present application can be implemented as computer programs or program codes executed on programmable systems including at least one processor, a storage system (including volatile and non-volatile memory and / or storage elements), at least one input device, and at least one output device.

[0183] The program code can be applied to input instructions to perform the functions described in the present application and generate output information. The output information can be applied to one or more output devices in a known manner. For the purposes of the present application, a processing system includes any system that has a processor, such as for example a digital signal processor, a microcontroller, an application specific integrated circuit, or a microprocessor.

[0184] The program code can be implemented in a high level of procedural or object oriented programming language to communicate with a processing system. In an implementation, the program code can be implemented in assembly or machine language, if desired. In fact, the mechanisms described herein are not limited in scope to any particular programming language. In any case, the language can be a compiled or interpreted language.

[0185] In some cases, the disclosed embodiments can be implemented in hardware, firmware, software, or any combination thereof. The disclosed embodiments can also be implemented as instructions carried by or stored on a transitory or non-transitory machine-readable (e.g., computer-readable) medium, which can be read and executed by one or more processors. For example, the instructions can be distributed over the network or by other computer readable media. Thus, a machine-readable medium can include any mechanism for storing or transmitting information in a form readable by a machine (e.g., a computer), including without limitation, recordable non-transitory media, floppy diskettes, optical disks, magneto-optical disks, ROMs, RAMs, EPROMs, EEPROMs, magnetic or optical cards, flash memory, or tangible, machine-readable storage used in the transmission of information over the Internet or other networks. Accordingly, the machine-readable medium includes any type of tangible, machine-readable medium suitable for storing or transmitting electronic instructions or information in a form readable by a machine (e.g., a computer).

[0186] In the drawings, some of the structural or methodological features can be shown in particular arrangements and / or orders. It should be understood that such specific arrangements and / or orders can not be required. Instead, these features can be arranged in a different manner and / or order than that shown in the illustrative figures, in some embodiments. Additionally, inclusion of structural or methodological features in a particular figure is not meant to imply that such features are required in all embodiments, and these features can be excluded or combined with other features in some embodiments.

[0187] The embodiments of the present application further provide a computer readable storage medium, which stores a computer program. The computer program is executed by a processor to implement the steps in each of the above-mentioned method embodiments.

[0188] It should be noted that each unit / module mentioned in each device embodiment of the present application is a logical unit / module, and in the physical world, one logical unit / module can be a physical unit / module, or a part of a physical unit / module, or be realized in a combination of multiple physical unit / modules, and the physical realization of these logical units / modules is not the most important thing, and the combination of the functions implemented by these logical units / modules is the key to solving the technical problems proposed in the present application. In addition, in order to highlight the innovative part of the present application, the above-mentioned device embodiments of the present application do not introduce the units / modules that are not closely related to solving the technical problems proposed in the present application, which does not mean that the above-mentioned device embodiments do not have other units / modules.

[0189] It should be noted that in the examples and descriptions of the present patent, the relationship terms such as first and second are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between the entities or operations. Moreover, the terms "include", "contain" or any other variants thereof are intended to cover non-exclusive inclusion, so that the process, method, article or device including a series of elements not only includes those elements, but also includes other elements not explicitly listed or inherent to such process, method, article or device. Without more limitations, the element defined by the statement "including one" does not exclude the presence of other identical elements in the process, method, article or device including the element.

[0190] Although the present application has been illustrated and described with reference to certain preferred embodiments thereof, it should be understood by those skilled in the art that various changes in form and details can be made therein without departing from the scope of the present application.

Claims

1. A display method for an electronic device, the method comprising: The method comprises: displaying a first floating window of a first application, the first floating window being located on a first layer; detecting a triggering event of displaying a second floating window of a second application; determining a first scale ratio of scaling the first floating window based on a first size of the first floating window, a second size of a floating window display area on a screen of the electronic device, and a third size of the second floating window; scaling the first layer based on the first scale ratio, so that the first floating window on the first layer and display elements in the first floating window are scaled according to the first scale ratio, and displaying the second floating window and the scaled first floating window in the floating window display area, wherein there is no overlapping area between the first floating window and the second floating window; The scaling the first layer based on the first scale ratio, so that the first floating window on the first layer and display elements in the first floating window are scaled according to the first scale ratio, and displaying the second floating window and the scaled first floating window in the floating window display area, comprises: displaying a dynamic effect of the second floating window, and determining and displaying a dynamic effect of switching from the first layer to the scaled first floating window based on the first scale ratio, wherein the dynamic effect of the first floating window comprises at least one scaled image of the first floating window, and the scale ratio of the scaled image is determined based on the first scale ratio and the number of the scaled image.

2. The method of claim 1, wherein, The detecting a triggering event of displaying a second floating window of a second application comprises: detecting a first operation of triggering the electronic device to display the second floating window of the second application by a user.

3. The method of claim 2, wherein, The first operation comprises any one of the following operations: the first operation on an application interface of the first application displayed in the first floating window; the first operation on an application interface of a third application displayed under the first floating window; the first operation in a third floating window currently displayed by the electronic device.

4. The method of claim 1, wherein, The determining a first scale ratio of scaling the first floating window based on a first size of the first floating window, a second size of a floating window display area on a screen of the electronic device, and a third size of the second floating window comprises: in a case where the first size and the third size in a first size direction are determined to be greater than the second size, determining a first scale ratio of scaling the first floating window based on the first size, the second size, and the third size.

5. The method of claim 4, wherein, The first scale ratio is less than or equal to a first value, wherein the first value is a ratio of a size difference of the second size and the third size in the first size direction to the first size in the first size direction.

6. The method of claim 5, wherein, The first size direction is a vertical direction of a current display interface of the electronic device.

7. The method of claim 6, wherein, The displaying the second floating window and the scaled first floating window in the floating window display area comprises: The first floating window that has been zoomed is displayed at the top of the floating window display area along the first dimension direction, and the second floating window is displayed at the bottom of the floating window display area along the first dimension direction.

8. The method of claim 1, wherein, The second application includes an input method application, and the second floating window includes a soft keyboard of the input method application.

9. An electronic device, comprising: Comprising: a memory for storing instructions executed by one or more processors of the electronic device; a processor, when executing the instructions in the memory, can cause the electronic device to perform the display method of any one of claims 1-8.

10. A computer-readable storage medium, characterized in that, The computer readable storage medium has instructions stored thereon, which when executed on a computer, cause the computer to perform the display method of any one of claims 1-8.

Images