Interface display method, device and storage medium

Abstract

The application provides an interface display method and device, equipment and storage medium, wherein the method comprises: in response to a first display operation for content, displaying a display layer with a first value of transparency on a screen visible area of a display screen; according to the display layer, dividing the screen visible area into a first display area and a second display area; according to the second display area, determining a third display area on the display layer; displaying a first interface corresponding to the content in the first display area and a second interface corresponding to the content in the third display area. The application can display different function interfaces of the same application program in the display screen of the terminal equipment, so as to not interrupt the function being used by the user, so that the user can continuously and smoothly use the function being used, and the use convenience of the application program can be improved.

Description

Technical Field

[0001] This application relates to the field of terminal technology, and in particular to an interface display method, apparatus, device, and storage medium. Background Technology

[0002] With the popularization of mobile internet and the development of terminal devices, the functions of applications (APPs) have become increasingly rich.

[0003] In related technologies, when a user needs to use other functions of an application while using it, they can switch the application's current interface to that function by clicking on other function buttons or options. For example, when watching a video in a video playback application, if the user needs to adjust the playback speed, they can click the playback speed option in the video playback interface to switch to the playback speed adjustment interface. After adjusting the playback speed in this interface, if they want to continue watching the video, they can click the "Done" option in the playback speed adjustment interface to switch back to the video playback interface and continue playing the video at the adjusted speed.

[0004] However, the above methods will interrupt the functions that the user is using, making it impossible for the user to use the function continuously and smoothly, thus reducing the ease of use of the application. Summary of the Invention

[0005] This application provides an interface display method, apparatus, device, and storage medium that can display different functional interfaces of the same application on the display screen of a terminal device, thereby not interrupting the function that the user is using, allowing the user to continuously and smoothly use the function they are using, and improving the ease of use of the application.

[0006] In a first aspect, embodiments of this application provide an interface display method applied to a terminal device, the terminal device including a display screen, the method comprising:

[0007] In response to a first display operation on the content, a display layer with a transparency of a first value is displayed on the visible area of ​​the display screen;

[0008] Based on the display layer, the visible area of ​​the screen is divided into a first display area and a second display area;

[0009] Based on the second display area, a third display area is determined on the display layer;

[0010] A first interface corresponding to the content is displayed in the first display area, and a second interface corresponding to the content is displayed in the third display area.

[0011] Secondly, embodiments of this application provide an interface display device configured in a terminal device, the terminal device including a display screen, comprising:

[0012] A response module is configured to, in response to a first display operation on the content, display a display layer with a transparency of a first value on the visible area of ​​the display screen;

[0013] The split-screen module is used to divide the visible area of ​​the screen into a first display area and a second display area according to the display layer;

[0014] A region determination module is used to determine a third display region on the display layer based on the second display region;

[0015] The display module is used to display a first interface corresponding to the content in the first display area and a second interface corresponding to the content in the third display area.

[0016] Thirdly, embodiments of this application provide an electronic device, including:

[0017] A processor and a memory, the memory being used to store a computer program, and the processor being used to call and run the computer program stored in the memory to perform the interface display method as described in the foregoing first aspect embodiment and various implementations.

[0018] Fourthly, embodiments of this application provide a computer-readable storage medium for storing a computer program that causes a computer to execute the interface display method as described in the first aspect embodiment and its various implementations.

[0019] Fifthly, embodiments of this application provide a computer program product containing program instructions, which, when executed on an electronic device, cause the electronic device to perform the interface display method as described in the first aspect embodiment and its various implementations.

[0020] The technical solution disclosed in this application, in response to a first display operation on content, displays a display layer with a transparency of a first value on the visible area of ​​the display screen. Based on the display layer, the visible area of ​​the screen is divided into a first display area and a second display area. Then, based on the second display area, a third display area is determined on the display layer. A first interface corresponding to the content is displayed in the first display area, and a second interface corresponding to the content is displayed in the third display area. In this way, different functional interfaces of the same application can be displayed on the display screen of the terminal device without interrupting the function the user is using. This allows the user to continuously and smoothly use the function they are using, improving the ease of use of the application. Attached Figure Description

[0021] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0022] Figure 1 A flowchart illustrating the first interface display method provided in this application embodiment;

[0023] Figure 2 This is a schematic diagram illustrating how a woken-up display layer is displayed on the visible area of ​​the screen with zero transparency, as provided in an embodiment of this application.

[0024] Figure 3 This is a schematic diagram illustrating a method for displaying a video playback interface in a first display area of ​​the visible screen and a comment interface in a third display area of ​​a display layer, as provided in an embodiment of this application.

[0025] Figure 4a This is a schematic diagram illustrating the adjustment of the size information of a first interface, provided in an embodiment of this application.

[0026] Figure 4b This is a schematic diagram illustrating another method for adjusting the size information of the first interface, as provided in an embodiment of this application.

[0027] Figure 5 A flowchart illustrating the second interface display method provided in this application embodiment;

[0028] Figure 6a A schematic diagram illustrating the determination of a first display area within the visible area of ​​a screen, provided in an embodiment of this application;

[0029] Figure 6b Another schematic diagram illustrating the determination of a first display area within the visible area of ​​a screen, provided as an embodiment of this application;

[0030] Figure 6c A schematic diagram illustrating the determination of a second display area within the visible area of ​​a screen, provided as an embodiment of this application;

[0031] Figure 6d Another schematic diagram illustrating the determination of a second display area within the visible area of ​​the screen, provided as an embodiment of this application;

[0032] Figure 7a A schematic diagram illustrating a method for dividing the visible area of ​​a screen into a first display area and a second display area, as provided in this application embodiment;

[0033] Figure 7b A schematic diagram illustrating another method of dividing the visible area of ​​a screen into a first display area and a second display area, provided as an embodiment of this application;

[0034] Figure 8 A flowchart illustrating the third interface display method provided in this application embodiment;

[0035] Figure 9 A flowchart illustrating the fourth interface display method provided in this application embodiment;

[0036] Figure 10 A schematic diagram of a first interactive component and a second interactive component in a video playback function interface provided in an embodiment of this application;

[0037] Figure 11 A flowchart illustrating the fifth interface display method provided in this application embodiment;

[0038] Figure 12 A schematic diagram illustrating a screen for switching the content displayed on a second interface, provided in an embodiment of this application;

[0039] Figure 13 A schematic block diagram of an interface display device provided in an embodiment of this application;

[0040] Figure 14 This is a schematic block diagram of an electronic device provided in an embodiment of this application. Detailed Implementation

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

[0042] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or server that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or devices.

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

[0044] In the description of the embodiments in this application, unless otherwise stated, "multiple" means two or more, that is, at least two. "At least one" means one or more. "Any" means any one or any several.

[0045] As mentioned earlier, in related technologies, when a user needs to use other functions of an application while using it, they can switch the application's current interface to that function by clicking on a button or option for another function. For example, when watching a video in a video playback application, if the user needs to adjust the playback speed, they can click on the playback speed option in the video playback interface to switch to the playback speed adjustment interface. After adjusting the playback speed in this interface, if they want to continue watching the video, they can click on the "Done" option in the playback speed adjustment interface to switch back to the video playback interface and continue playing the video at the adjusted speed. However, this method interrupts the function the user is currently using, preventing the user from using the function continuously and smoothly, thus reducing the application's ease of use.

[0046] To address the aforementioned technical problems, this application provides an interface display method, apparatus, device, and storage medium to solve the problem that when user needs are met by switching functional interfaces, the interruption of the function being used by the user results in the user being unable to use the function continuously and smoothly, thus reducing the ease of use of the application.

[0047] The technical solutions provided by the embodiments of this application will be described in detail below through some examples. The embodiments described below can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments.

[0048] Figure 1 This is a flowchart illustrating an interface display method provided in an embodiment of this application. The interface display method of this application embodiment can be executed by an interface display device, which can consist of hardware and / or software and can be integrated into a terminal device with a display screen. In this application, a terminal device can be understood as an electronic device with a display screen. The terminal device may include, but is not limited to, smartphones, tablets, in-vehicle terminals, laptops, desktop computers, smart TVs, and wearable devices. Wearable devices may include smart glasses and head-mounted devices. No limitation is made on the type of electronic device herein.

[0049] like Figure 1 As shown, the method may include the following steps:

[0050] S101, in response to a first display operation for content, displays a display layer with a transparency of a first value on the visible area of ​​the display screen.

[0051] In this application, the aforementioned content refers to the content provided by the first function in any application that the user is currently using. This content can be video, images, text, audio, documents, or other types of content, and is not limited herein.

[0052] Furthermore, the aforementioned applications can be of any type, such as social, entertainment, tool, education, office, shopping, and medical applications, without any restrictions.

[0053] The aforementioned first display operation can be a split-screen operation where the user instructs the terminal device to display other functional interfaces.

[0054] Furthermore, the split-screen operation can be sent by the user triggering the split-screen option or button in the current display interface; or by the user triggering other function options or buttons in the current display interface; or by the user performing a preset gesture in the current display interface, etc. This application does not impose specific restrictions on the specific method by which the user sends a split-screen operation for the content.

[0055] The aforementioned visible area of ​​the screen refers to the portion of the display screen that the user can directly observe. In other words, the visible area of ​​the screen is the effective display area of ​​the display screen.

[0056] The first value mentioned above refers to the transparency value of the display layer. This transparency value is a quantitative indicator used to describe the degree to which the content below the display layer is allowed to pass through when displayed. For example, when the transparency value of the display layer is 0% or 0, it means that the display layer is completely transparent, and the content below the display layer is fully visible. When the transparency value of the display layer is 100% or 100, it means that the display layer is completely opaque, and the content below the display layer is completely invisible and obscured by the display layer. When the transparency value of the display layer is greater than 0% and less than 100%, or greater than 0 and less than 100, it means that the display layer has a certain degree of transparency, allowing some of the content below the display layer to be visible.

[0057] In other words, the higher the transparency value of the display layer, the less transparent the display layer is, and the more difficult it is to see the content below the display layer; conversely, the lower the transparency value of the display layer, the more transparent the display layer is, and the easier it is to see the content below the display layer.

[0058] In this application, the first value mentioned above can be 0% or 0.

[0059] In some optional embodiments, when a user is using the first function of any application on a terminal device, if the user needs to use other functions of the application (i.e., the second function) and wishes to continue using the first function without interrupting the use of the first function by using the second function, the user can send a first display operation to the content provided by the running application, so that the terminal device can perform a screen splitting operation on the visible area of ​​the display screen according to the first display operation sent by the user.

[0060] Optionally, when this application performs a screen splitting operation on the visible area of ​​the display screen based on the first display operation sent by the user, it may first wake up a preset display layer from a hidden or dormant state. Then, the woken display layer is displayed on the visible area of ​​the display screen with an transparency value of a first value. Finally, the screen splitting operation is performed on the visible area of ​​the display screen based on this display layer.

[0061] For example, such as Figure 2 As shown, this illustrates the specific process of waking up a hidden display layer based on a first display operation sent by the user, and displaying the awakened display layer with zero transparency on the visible area of ​​the display screen.

[0062] S102, based on the display layer, divide the visible area of ​​the screen into a first display area and a second display area.

[0063] In some optional embodiments, there is a preset area in the display layer above the visible area of ​​the screen, and the size information of the preset area can be obtained, wherein the size information of the preset area includes the height information and width information of the preset area.

[0064] Therefore, this application can obtain the size information of the preset area in the display layer, and then perform screen splitting processing on the visible area of ​​the screen according to the size information of the preset area, so as to split the visible area of ​​the screen into a first display area and a second display area.

[0065] Optionally, the above-mentioned screen splitting process based on the size information of the preset area may include the following steps:

[0066] The first step is to determine whether the size information of the display layer is the same as the size information of the visible area of ​​the screen. If they are the same, proceed to the second step; otherwise, proceed to the third step.

[0067] The second step is to determine a display area with the same size information as the preset area within the visible area of ​​the screen, and use this display area as the second display area. The remaining display area in the visible area of ​​the screen other than the second display area is used as the first display area.

[0068] The third step is to determine a display area with the same width information as the preset area within the visible area of ​​the screen, and use this display area as the second display area. The remaining display area in the visible area of ​​the screen other than the second display area is used as the first display area.

[0069] S103, Based on the second display area, determine the third display area on the display layer.

[0070] In some alternative embodiments, the center point position and size information of the second display area can be determined. Then, the center point position of the second display area is projected onto the display layer using orthographic projection to obtain a projection point on the display layer. Next, using this projection point as the center point position of the third display area and the size information of the second display area as the size information of the third display area, a third display area is determined on the display layer.

[0071] The aforementioned orthographic projection method refers to projection lines that are perpendicular to the projection surface and parallel to each other. That is, this application uses the center point of the second display area as the starting point of the projection lines and projects in a direction perpendicular to the display layer.

[0072] For example, assuming the center point of the second display area in the visible area of ​​the screen is Z(x1,y1), and the size information of the second display area is Δx*Δy, the center point Z(x1,y1) of the second display area can be projected onto the display layer using orthographic projection to obtain the projection point Z'(x1',y1') on the display layer. Then, using this projection point Z'(x1',y1') as the center point of the display area, and using the size information Δx*Δy of the second display area as the size information of the third display area, a third display area is determined on the display layer, with the center point of the third display area being Z'(x1',y1') and the size information being Δx*Δy.

[0073] S104, display the first interface corresponding to the content in the first display area, and display the second interface corresponding to the content in the third display area.

[0074] In this application, the first interface and the second interface can be different functional interfaces provided by the application being used by the user. For example, the first interface can be a functional interface corresponding to a first function; the second interface can be a functional interface corresponding to a second function. The second function can be understood as other functions.

[0075] In other words, the first interface is the first functional interface displayed before the visible area of ​​the screen is split; the second interface is the second functional interface added after the visible area of ​​the screen is split.

[0076] It should be noted that, in this application, the second interface can be a functional interface that is related to the first interface, such as a comment interface, a forwarding interface, or a homepage interface. Alternatively, the second interface can also be a functional interface corresponding to other functions that are not related to the first interface.

[0077] In some optional embodiments, when the second interface is a functional interface that is associated with the first interface, this application may display the first interface in the first display area of ​​the visible screen area. Specifically, the first interface is the first functional interface corresponding to the first function, and the second interface that is associated with the first interface may be displayed in the third display area of ​​the display layer.

[0078] For example, such as Figure 3 As shown, assuming the first functional interface displayed before the screen's visible area is split, i.e., the first interface is the video playback interface, and the second functional interface is added after the screen's visible area is split, i.e., the second interface is the comment interface, then the video playback interface can be displayed in the first display area of ​​the screen's visible area, and the comment interface can be displayed in the third display area of ​​the display layer.

[0079] In some alternative embodiments, when the second interface is a function interface corresponding to other functions that are not associated with the first interface, this application may display the first interface in the first display area of ​​the visible screen area and display the function interface corresponding to the other function in the third display area of ​​the display layer.

[0080] For example, suppose the first functional interface displayed before the screen's visible area is split is the video playback interface, and the second functional interface is added after the screen's visible area is split, that is, the playback speed adjustment interface corresponding to the playback speed function triggered by the user. Then the video playback interface can be displayed in the first display area of ​​the screen's visible area, and the playback speed adjustment interface can be displayed in the third display area of ​​the display layer.

[0081] In other words, in this application, the first interface displays the first information corresponding to the content, and the second interface displays the second information corresponding to the content. As an optional implementation, when the content is a video, the first information displayed on the first interface corresponding to the video can be a video frame, and the second information displayed on the second interface corresponding to the content can be interactive information, such as comment information or forwarding information. When the content is a document, the first information displayed on the first interface corresponding to the document can be a document frame, and the second information displayed on the second interface corresponding to the content can be other document frames. These other document frames may or may not be associated with the document frame; this application does not impose any restrictions on this. For example, the first interface displays the first document frame corresponding to the first document, and the second interface displays the second document frame corresponding to the second document. The second document can be another document that is associated with the first document, or it can be another document that is not associated with the first document.

[0082] The technical solution disclosed in this application, in response to a first display operation on content, displays a display layer with a transparency of a first value on the visible area of ​​the display screen. Based on the display layer, the visible area of ​​the screen is divided into a first display area and a second display area. Then, based on the second display area, a third display area is determined on the display layer. A first interface corresponding to the content is displayed in the first display area, and a second interface corresponding to the content is displayed in the third display area. In this way, different functional interfaces of the same application can be displayed on the display screen of the terminal device without interrupting the function the user is using. This allows the user to continuously and smoothly use the function they are using, improving the ease of use of the application.

[0083] In some optional embodiments, this application may also include: adjusting the size information of the first interface and the second interface in response to a size adjustment operation on the first interface or the second interface.

[0084] Optionally, when it is necessary to adjust the size information of the first or second interface, the following implementation methods can be included:

[0085] In the first implementation method, users can dynamically adjust the size information of the first or second interface by dragging any top corner or any border of the first or second interface using a mouse or gestures.

[0086] Dragging any corner can simultaneously adjust the width and height of both the first and second interfaces. Figure 4a As shown.

[0087] Dragging any border can adjust the width or height of the first and second interfaces, as shown in Figure 4b.

[0088] In the second implementation method, users can click on any blank area with a mouse or finger to wake up the display settings that are in a dormant or hidden state, and adjust the scaling ratio of the first or second interface in the display settings to dynamically adjust the size information of the first and second interfaces.

[0089] It should be noted that the above two implementation methods are merely illustrative examples of this application and are not intended as specific implementations of this application.

[0090] In some optional embodiments, during the process of adjusting the size information of at least one of the first interface and the second interface, there may be a situation where the size information of the first interface is adjusted to be the same as the size information of the screen's visible area, or the size information of the second interface is adjusted to be the same as the size information of the screen's visible area. In this case, the split-screen display of the screen's visible area can be turned off to restore the full-screen display of the screen's visible area.

[0091] The full-screen display of the visible area can be achieved by displaying the first information corresponding to the content through a first interface, or by displaying the second information corresponding to the content through a second interface. Specifically, when the size of the first interface is the same as the size of the visible area, the full-screen display of the visible area is achieved by displaying the first information corresponding to the content through the first interface; when the size of the second interface is the same as the size of the visible area, the full-screen display of the visible area is achieved by displaying the second information corresponding to the content through the second interface. This allows users to dynamically adjust the size of the interfaces displayed in the first and third display areas, thereby enhancing their personalized usage experience.

[0092] In some optional embodiments, the embodiments of this application may also include: in response to a second display operation on the content, turning off the split-screen display of the visible area of ​​the screen and restoring the full-screen display of the visible area of ​​the screen.

[0093] The second display operation refers to the split-screen closing operation sent by the user. This split-screen closing operation can be a preset split-screen closing gesture input by the user, or it can be triggered by a split-screen closing button or option, etc., without specific limitations here.

[0094] Optionally, when it is necessary to disable the split-screen function, the user can send a second display operation for the content. Then, upon receiving the second display operation sent by the user, the terminal device can identify whether the second display operation is a preset split-screen disabling operation. If it is, the split-screen display of the visible area of ​​the screen is turned off, and the full-screen display of the visible area of ​​the screen is restored; otherwise, the split-screen display of the visible area of ​​the screen continues to be executed.

[0095] The preset split-screen closing action can be a pre-defined split-screen closing gesture, button, or option icon. The split-screen closing gesture can be a swipe or double-tap gesture, etc. The split-screen closing button or option icon can be any unique identifier for the split-screen closing function, such as a name or ID; no specific restrictions are placed on it here.

[0096] In some optional embodiments, the embodiments of this application may also include: in response to a vertical scrolling operation on the content, updating the first interface corresponding to the content displayed in the first display area, and updating the second interface corresponding to the content displayed in the third display area.

[0097] Optionally, users may need to swipe up or down while viewing content to update the content displayed in the visible area of ​​the screen. Therefore, when an upward swipe is detected, the system can update the first interface corresponding to the content displayed in the first display area to the next first interface adjacent to the first interface, and simultaneously update the second interface corresponding to the content displayed in the third display area to the next second interface adjacent to the second interface; when an upward swipe is detected, the system can update the first interface corresponding to the content displayed in the first display area to the previous first interface adjacent to the first interface, and simultaneously update the second interface corresponding to the content displayed in the third display area to the previous second interface adjacent to the second interface.

[0098] In other words, this application can automatically switch between the first interface displayed in the first display area and the second interface displayed in the third display area based on the user's swipe-up or swipe-down operation, thus achieving the effect of synchronously updating the first and second interfaces.

[0099] In some optional embodiments, considering that the display layer may include a preset area, and the first size information of the preset area is a second value, this second value can be understood as a default value, and this default value can support subsequent adjustment operations. Therefore, the following will combine... Figure 5 The content described in step S102 of the foregoing embodiments will be further explained and illustrated. For example... Figure 5 As shown, step S102 above may include the following steps S102-1 to S102-4:

[0100] S102-1, Obtain the first size information and the second size information of the visible area of ​​the screen.

[0101] The first size information of the screen's visible area can refer to the width of the screen's visible area; the second size information of the screen's visible area can refer to the height of the screen's visible area.

[0102] In some alternative embodiments, the first and second size information of the screen's visible area can be obtained by calling a function to obtain the screen's visible area size information.

[0103] Optionally, the functions for obtaining the screen visible area size information mentioned above include, but are not limited to, the OnMeasure function and the OnLayout function. These functions for obtaining the screen visible area size information can also be referred to as screen visible area size information acquisition functions.

[0104] Considering that different terminal devices may have different operating systems, such as terminal device X1 using the Android operating system and terminal device X2 using the iOS operating system, etc.

[0105] Therefore, to ensure compatibility with different terminal device operating systems and to obtain the required screen viewable area size information for different operating systems, this application optionally calls a first screen viewable area size information acquisition function to obtain the first and second screen viewable area size information when acquiring the first and second screen viewable area size information. If the first and second screen viewable area size information are obtained based on the first screen viewable area size information acquisition function, the acquisition operation stops. If the first and second screen viewable area size information are not obtained based on the first screen viewable area size information acquisition function, the first screen viewable area size information acquisition function is switched to a second screen viewable area size information acquisition function, and the first and second screen viewable area size information are obtained based on the second screen viewable area size information acquisition function. If the first and second screen viewable area size information are obtained based on the second screen viewable area size information acquisition function, the acquisition operation stops. If the second function for obtaining the screen's visible area size information fails to retrieve the first and second dimensions, the function is switched to a third function. The first and second dimensions are then retrieved using this third function, and so on, until both dimensions are obtained. By using different functions to retrieve the screen's visible area size information, compatibility with different operating systems is ensured, allowing for more efficient and accurate acquisition of the screen's visible area size information.

[0106] For example, assuming the functions for obtaining screen visible area size information are the OnMeasure and OnLayout functions, the OnMeasure function can be called first to obtain the first and second size information of the screen visible area. If the first and second size information of the screen visible area are obtained based on the OnMeasure function, the acquisition operation stops. If the first and second size information of the screen visible area cannot be obtained based on the OnMeasure function, it indicates that the OnMeasure function is incompatible with the operating system of the terminal device. In this case, the OnMeasure function is switched to the OnLayout function, and the first and second size information of the screen visible area are obtained based on the OnLayout function.

[0107] S102-2, determine the current display state of the screen's visible area based on the first and second size information of the screen's visible area.

[0108] Based on the width and height information of the screen's visible area, the screen orientation of the visible area can be determined. This screen orientation can be understood as the display state of the screen's visible area. The display state can include landscape and portrait display states.

[0109] Therefore, this application can determine the current display state of the screen's visible area based on the first size information (i.e., width information) and the second size information (i.e., height information) of the screen's visible area.

[0110] In some alternative embodiments, the current display state of the screen's visible area can be determined through the following steps:

[0111] Step 11: Determine whether the first size information of the screen visible area is greater than the second size information of the screen visible area.

[0112] Step 12: If the first size information of the screen visible area is greater than the second size information of the screen visible area, then the current display state of the screen visible area is determined to be the first display state.

[0113] Step 13: If the first size information of the screen visible area is less than or equal to the second size information of the screen visible area, determine the current display state of the screen visible area as the second display state.

[0114] The first display state specifically refers to the landscape display state; the second display state specifically refers to the portrait display state.

[0115] S102-3, when the current display state of the screen's visible area is the first display state, the screen's visible area is divided into a first display area and a second display area according to the first size information of the preset area and the first size information of the screen's visible area.

[0116] The first dimension information of the preset area refers to the width information of the preset area.

[0117] In some alternative embodiments, when it is determined that the visible area of ​​the screen is in landscape display mode, this application can divide the visible area of ​​the screen into a first display area and a second display area.

[0118] Optionally, the visible area of ​​the screen can be divided into a first display area and a second display area, which can be achieved through the following steps:

[0119] Step 21: Determine the first size information of the first display area based on the first size information of the preset area and the first size information of the screen visible area.

[0120] In some embodiments, the first size information of the first display area can be obtained by subtracting the first size information of the preset area from the first size information of the screen's visible area.

[0121] For example, assuming the first size information of the visible area of ​​the screen is widthSize, and the first size information of the preset area is 360dp, then the first size information of the first display area can be calculated as widthSize-360dp based on widthSize-360dp.

[0122] It should be understood that the aforementioned dp (Density-independent Pixels) is a unit of screen width used in the Android operating system.

[0123] Step 22: Determine the first display area within the visible area of ​​the screen based on the first size information of the first display area.

[0124] In some alternative embodiments, an area identical to the first size information may be determined in the visible area of ​​the screen, and this area may be defined as the first display area.

[0125] Optionally, when determining the first display area within the visible area of ​​the screen, one of the following scenarios may be included:

[0126] In the first scenario, following a left-to-right order, an area identical to the first size information is determined from the visible area of ​​the screen, and this area is designated as the first display area. An example could be... Figure 6a As shown.

[0127] In the second scenario, following a right-to-left order, an area identical to the first size information is determined from the visible area of ​​the screen, and this area is designated as the first display area. An example could be... Figure 6b As shown.

[0128] Step 23: Determine the second display area within the visible area of ​​the screen based on the first size information of the preset area.

[0129] In step 22 above Figure 6a To continue the explanation, let's assume the first display area is located on the left side of the screen's visible area, and the second display area is located on the right side of the screen's visible area. Furthermore, the first size information of this second display area is the first size information of a preset area. Figure 6c As shown.

[0130] In step 22 above Figure 6b To continue the explanation, let's assume the first display area is located on the right side of the screen's visible area, and the second display area is located on the left side of the screen's visible area. Furthermore, the first size information of this second display area is the first size information of a preset area. Figure 6d As shown.

[0131] S102-4, When the current display state of the visible area of ​​the screen is the second display state, the visible area of ​​the screen is divided into the first display area and the second display area according to the preset screen splitting method.

[0132] The preset split-screen method can be to divide the visible area of ​​the screen into a first display area and a second display area in an equal proportion; or it can be to divide the visible area of ​​the screen into a first display area and a second display area in a non-equal proportion.

[0133] In some optional embodiments, when the current display state of the screen's visible area is portrait mode, the screen's visible area is divided into a first display area and a second display area according to a preset screen splitting method.

[0134] For example, this application divides the visible area of ​​the screen into a first display area and a second display area in a proportional manner, as shown below. Figure 7a As shown. The visible area of ​​the screen is divided into a first display area and a second display area in a non-uniform proportion, as shown below. Figure 7b As shown.

[0135] In some alternative embodiments, considering the diverse types of terminal devices, some terminal devices may have relatively small display screens. Therefore, if it is determined that the visible area of ​​the screen is in a second display state, i.e., a portrait display state, splitting the visible area of ​​the screen in the portrait display state into a first display area and a second display area may cause the service interface displayed in the first and second display areas after the split to become distorted and unclear, affecting the user experience.

[0136] Therefore, when the current display state of the visible area of ​​the screen is the second display state, this application may optionally not perform the operation of splitting the visible area of ​​the screen into the first display area and the second display area, that is, not respond to the user's first display operation on the content, and switch the awakened display layer from the awake state to the sleep state or the hidden state again.

[0137] In other words, this application can determine the display state of the screen's visible area based on the first and second size information of the screen's visible area. Then, depending on the display state, it can divide the screen's visible area into a first display area and a second display area using different methods to meet the user's split-screen needs under different display states, thereby improving the user experience. Furthermore, when it is determined that the screen's visible area is not suitable for split-screen operation, it can also ignore the user's first display operation and continue to display in full screen within the visible area, thus ensuring that the user can always view a highly reliable and clear service interface.

[0138] The following is combined Figure 8 The content described in step S103 of the foregoing embodiments will be further explained and illustrated. For example... Figure 8 As shown, step S103 above may include the following steps S103-1 to S103-3:

[0139] Step S103-1: Adjust the first size information of the display layer according to the first size information of the visible area of ​​the screen.

[0140] Step S103-2: Adjust the second size information of the display layer according to the second size information of the visible area of ​​the screen.

[0141] Step S103-3: Determine the second display area on the adjusted display layer based on the center point position of the second display area and the first size information.

[0142] It should be noted that the relationship between the above steps S103-1 and S103-2 is an AND / OR relationship, that is, it can be step S103-1, or it can be step S103-2, or it can be both step S103-1 and step S103-2. No specific restrictions are made here.

[0143] Considering that the size information of the display layer located above the screen's visible area may differ from the size information of the screen's visible area, for example, the size information of the display layer may be larger than the size information of the screen's visible area. That is, the first size information and / or the second size information of the display layer may differ from the first size information and / or the second size information of the screen's visible area.

[0144] It should be understood that the first and / or second size information of the aforementioned display layer may differ from the first and / or second size information of the screen's visible area. Specifically, the first size information of the display layer may differ from the first size information of the screen's visible area; or, the second size information of the display layer may differ from the second size information of the screen's visible area; or, both the first and second size information of the display layer may differ from the first and second size information of the screen's visible area.

[0145] Therefore, this application can adjust the first size information of the display layer according to the first size information of the screen's visible area, so that the adjusted first size information of the display layer is the same as the first size information of the screen's visible area; and / or, adjust the second size information of the display layer according to the second size information of the screen's visible area, so that the adjusted second size information of the display layer is the same as the second size information of the screen's visible area. That is, at least one of the first size information and the second size information of the screen's visible area is used to adjust at least one of the first size information and the second size information of the display layer, so that the adjusted size information of the display layer is the same as the size information of the screen's visible area.

[0146] Then, based on the center point position of the second display area and the first size information, the third display area is determined on the adjusted display layer. Specifically, the center point position of the second display area is projected onto the adjusted display layer using orthographic projection to obtain a projection point on the adjusted display layer. Then, using this projection point as the center point position of the third display area and the first size information of the second display area as the first size information of the third display area, the third display area is determined on the display layer.

[0147] In some optional embodiments, the size information of the display layer located above the screen's visible area may differ from the size information of the screen's visible area. For example, the display layer's size information may be larger than the screen's visible area's size information; that is, the first and / or second size information of the display layer may differ from the first and / or second size information of the screen's visible area. Besides adjusting the first and / or second size information of the display layer based on the first and / or second size information of the screen's visible area, this application can also directly project the center point of the second display area onto the display layer using orthographic projection to obtain a projection point on the display layer. Then, using this projection point as the center point of the third display area, the first size information of the second display area as the first size information of the third display area, and the second size information of the second display area as the second size information of the third display area, the third display area is determined on the display layer.

[0148] In some alternative embodiments, considering that the display layer size information located above the screen's visible area may be the same as the screen's visible area size information, that is, the first and second size information of the display layer are the same as the first and second size information of the screen's visible area.

[0149] To address this, this application projects the center point of the second display area onto the display layer using orthographic projection, obtaining a projection point on the display layer. Then, using this projection point as the center point of the third display area and the first size information of the second display area as the first size information of the third display area, the third display area is determined on the display layer.

[0150] In other words, when the first size information and the second size information of the display layer are the same as the first size information and the second size information of the screen's visible area, this application determines a third display area on the display layer based on the second display area, including: determining a third display area on the display layer based on the center point position of the second display area and the first size information.

[0151] This application embodiment allows for the determination of a third display area corresponding to the second display area on the display layer using different methods based on the size relationship between the display layer and the visible area of ​​the screen. This increases the diversity of methods for determining the third display area, thereby meeting users' personalized needs and improving user satisfaction.

[0152] In some optional embodiments, considering that the first interface displayed in the first display area may include various interactive components, in order to correctly and clearly display each interactive component in the first display area, this application may also adjust the size information and display position of each interactive component in the first interface. The following is in conjunction with... Figure 9 The document provides a detailed explanation of the adjustment process for the size information and display position of each interactive component in the first interface.

[0153] like Figure 9 As shown, the method may include the following steps:

[0154] S201, in response to a first display operation for content, displays a display layer with a transparency of a first value on the visible area of ​​the display screen.

[0155] S202, based on the display layer, divide the visible area of ​​the screen into a first display area and a second display area.

[0156] S203, Based on the second display area, determine the third display area on the display layer.

[0157] S204, based on the first size information of the preset area, adjust the size information and display position of the first interactive component and the second interactive component in the first interface.

[0158] The first interactive component and the second interactive component can be determined according to the first function type provided by the application. Furthermore, the number of the first interactive component and the second interactive component can be one or more, i.e., at least one.

[0159] For example, when the application providing the content is a video playback application, then the first function type provided by the video playback application is video playback function. In this case, the first interactive component can be a channel component and a prompt component, and the second interactive component can be a video playback component, as shown below. Figure 10 As shown in the image. The tooltip component can be understood as a global component.

[0160] In some optional embodiments, adjusting the size information and display position of the first interactive component and the second interactive component based on the first size information of a preset area in the display layer may include the following steps:

[0161] Step 31: Adjust the first size information and center point position of the first interactive component according to the first size information of the preset area.

[0162] Optionally, adjusting the center point position of the first interactive component may include the following:

[0163] In scenario one, if the first interface is displayed in the first display area and the first display area is located on the left side of the visible area of ​​the screen, the center point position of the first interactive component can be obtained, and the first size information of the preset area can be subtracted from the horizontal coordinate of the center point position of the first interactive component to obtain the adjusted center point position of the first interactive component.

[0164] In scenario two, if the first interface is displayed in the first display area and the first display area is located on the right side of the visible area of ​​the screen, the center point position of the first interactive component can be obtained, and the first size information of the preset area can be added to the horizontal coordinate of the center point position of the first interactive component to obtain the adjusted center point position of the first interactive component.

[0165] Furthermore, the first size information of the first interactive component can be obtained, and the first size information of the preset area can be subtracted from the first size information of the first interactive component to obtain the adjusted first size information of the first interactive component.

[0166] For example, assuming the first size information of the preset area is a, the center point position of the first interactive component S is D1(x2,y2) and the first size information is L, and the first interface to which the first interactive component S belongs is displayed on the left side of the visible area of ​​the screen, then the adjusted center point position of the first interactive component S can be calculated as D1'(x2-a,y2) by subtracting the first size information a of the preset area from the horizontal coordinate X2 of the center point position D1(x2,y2) of the first interactive component S, and the adjusted first size information of the first interactive component S is L'=La.

[0167] Step 32: Adjust the first size information, center point position, and second size information of the second interactive component according to the first size information of the preset area.

[0168] Optionally, adjusting the center point position of the second interactive component may include the following:

[0169] In scenario one, if the first interface is displayed in the first display area and the first display area is located on the left side of the visible area of ​​the screen, the center point position of the second interactive component can be obtained, and the first size information of the preset area can be subtracted from the horizontal coordinate of the center point position of the second interactive component to obtain the adjusted center point position of the second interactive component.

[0170] In scenario two, if the first interface is displayed in the first display area and the first display area is located on the right side of the visible area of ​​the screen, the center point position of the second interactive component can be obtained, and the first size information of the preset area can be added to the horizontal coordinate of the center point position of the second interactive component to obtain the adjusted center point position of the second interactive component.

[0171] Furthermore, the first size information of the second interactive component can be obtained, and the first size information of the preset area can be subtracted from the first size information of the second interactive component to obtain the adjusted first size information of the second interactive component.

[0172] In addition, the second size information of the second interactive component can be obtained, and the second size information of the preset area can be subtracted from the second size information of the second interactive component to obtain the adjusted second size information of the second interactive component.

[0173] For example, assuming the first size information of the preset area is a, the center point position of the second interactive component W is D2(x3,y3), the first size information is b, and the second size information is c, and the first interface to which the second interactive component W belongs is displayed on the left side of the visible area of ​​the screen, then the adjusted center point position of the second interactive component W can be calculated as D2'(x3-a,y3), the adjusted first size information of the second interactive component W is b'=ba, and the adjusted second size information of the second interactive component W is c'=ca, based on the x-coordinate X3 of the center point position D2(x3,y3) of the second interactive component W.

[0174] In some alternative embodiments, considering that the current display state of the screen's visible area can be a second display state, i.e., a portrait display state, then when the screen's visible area is in a portrait display state, the first display area obtained by splitting the screen's visible area can be located in the upper part of the screen's visible area, and the second display area can be located in the lower part of the screen's visible area; or, the first display area can be located in the lower part of the screen's visible area, and the second display area can be located in the upper part of the screen's visible area.

[0175] At this time, the size information and display position of the first interactive component and the second interactive component in the first interface can be adjusted by obtaining the second size information of the second display area and adjusting the second size information and center point position of the first interactive component according to the second size information of the second display area.

[0176] Optionally, adjusting the center point position of the first interactive component based on the second size information of the second display area may include the following situations:

[0177] In scenario one, if the first interface is displayed in the first display area and the first display area is located in the upper part of the visible area of ​​the screen, the center point position of the first interactive component can be obtained, and the second size information of the second display area can be added to the vertical coordinate of the center point position of the first interactive component to obtain the adjusted center point position of the first interactive component.

[0178] In scenario two, if the first interface is displayed in the first display area and the first display area is located in the lower part of the visible area of ​​the screen, the center point position of the first interactive component can be obtained, and the second size information of the second display area can be subtracted from the vertical coordinate of the center point position of the first interactive component to obtain the adjusted center point position of the first interactive component.

[0179] Furthermore, the second size information of the first interactive component can be obtained, and the second size information of the second display area can be subtracted from the second size information of the first interactive component to obtain the adjusted second size information of the first interactive component.

[0180] In some alternative embodiments, adjusting the center point position of the second interactive component based on the second size information of the second display area may include the following situations:

[0181] In scenario one, if the first interface is displayed in the first display area and the first display area is located in the upper part of the visible area of ​​the screen, the center point position of the second interactive component can be obtained, and the second size information of the second display area can be added to the vertical coordinate of the center point position of the second interactive component to obtain the adjusted center point position of the second interactive component.

[0182] In scenario two, if the first interface is displayed in the first display area and the first display area is located in the lower part of the visible area of ​​the screen, the center point position of the second interactive component can be obtained, and the second size information of the second display area can be subtracted from the vertical coordinate of the center point position of the second interactive component to obtain the adjusted center point position of the second interactive component.

[0183] Furthermore, the second size information of the second interactive component can be obtained, and the second size information of the second display area can be subtracted from the second size information of the second interactive component to obtain the adjusted second size information of the second interactive component.

[0184] In addition, the first size information of the second interactive component can be obtained, and the second size information of the second display area can be subtracted from the first size information of the second interactive component to obtain the adjusted first size information of the second interactive component.

[0185] S205, the first interface corresponding to the content is displayed in the first display area, and the second interface corresponding to the content is displayed in the third display area.

[0186] In the first interface, the first interactive component and the second interactive component are both first interactive components and second interactive components whose size information and display position have been adjusted.

[0187] The technical solution disclosed in this application, in response to a first display operation on content, displays a display layer with a transparency of a first value on the visible area of ​​the display screen. Based on the display layer, the visible area of ​​the screen is divided into a first display area and a second display area. Then, based on the second display area, a third display area is determined on the display layer. A first interface corresponding to the content is displayed in the first display area, and a second interface corresponding to the content is displayed in the third display area. In this way, different functional interfaces of the same application can be displayed on the display screen of the terminal device, without interrupting the function being used by the user. This allows the user to continuously and smoothly use the function they are using, improving the ease of use of the application. Furthermore, by adjusting the size information and display position of each interactive component in the first interface according to the first size information of a preset area, the display effect of each interactive component in the first interface is coordinated with the visual effect of the first display area, thereby improving the visual comfort and readability of each interactive component.

[0188] In some optional embodiments, considering that the second interface displayed in the third display area may include at least one third interactive component, and that this third interactive component may be associated with different functions, the user can trigger any third interactive component by clicking or selecting it, and the corresponding function interface of the third interactive component will be displayed on the second interface. The following is in conjunction with... Figure 11The process of displaying the functional interface corresponding to the third interactive component in the second interface in the embodiments of this application will be described in detail below.

[0189] like Figure 11 As shown, the method may include the following steps:

[0190] S301, in response to a first display operation for content, displays a display layer with a transparency of a first value on the visible area of ​​the display screen.

[0191] S302, based on the display layer, divides the visible area of ​​the screen into a first display area and a second display area.

[0192] S303, Based on the second display area, determine the third display area on the display layer.

[0193] S304, the first interface corresponding to the content is displayed in the first display area, and the second interface corresponding to the content is displayed in the third display area.

[0194] S305, in response to a trigger operation on any third interactive component, the second information currently displayed in the second interface is switched to the second information associated with the third interactive component.

[0195] In this application, the third interactive component can be various functional components located in the second interface. For example, when the second interface is a comment interface, the third interactive component in the comment interface can be icons of different commenters and identification information of each commenter. As another example, when the second interface is a sharing interface, the third interactive component in the sharing interface can be user information to be shared, forwarding options, recommendation options, and other options.

[0196] In some optional embodiments, while viewing the first information displayed on the first interface and the second information displayed on the second interface, if the user needs to use the function corresponding to any third interactive component on the second interface, the user can trigger the third interactive component by clicking or selecting it. When the terminal device receives the user's trigger operation on the third interactive component, it obtains the function interface corresponding to the third interactive component and switches the currently displayed second information on the second interface to the second information associated with the function interface corresponding to the third interactive component. This allows for continuous switching of function interfaces with different functions within the second display area, thereby satisfying the user's need to continuously switch the second information in the second display area while continuously viewing the first information in the first display area, further improving the user experience.

[0197] For example, such as Figure 12As shown, when a user views the first information displayed on the first interface as a video frame and the second information displayed on the second interface as comment information, if the user needs to view the homepage information of a certain commenter in the comment content, the user can click on the commenter's icon to send a trigger operation to the terminal device for that commenter's icon. This allows the terminal device to obtain the homepage interface corresponding to the commenter's icon and switch the currently displayed comment information on the second interface to the homepage information corresponding to that commenter's icon.

[0198] The following is a reference to the appendix. Figure 13 This application describes an interface display device based on an embodiment. The interface display state is configured in a terminal device, which includes a display screen. Figure 13 As shown, the interface display device 400 includes: a response module 410, a split-screen module 420, a region determination module 430, and a display module 440.

[0199] The response module 410 is used to display a display layer with a transparency of a first value on the visible area of ​​the display screen in response to a first display operation on the content.

[0200] The split-screen module 420 is used to split the visible area of ​​the screen into a first display area and a second display area according to the display layer;

[0201] The region determination module 430 is used to determine a third display region on the display layer based on the second display region;

[0202] Display module 440 is used to display a first interface corresponding to the content in the first display area and a second interface corresponding to the content in the third display area.

[0203] In one optional implementation of this application embodiment, the display layer includes: a preset area whose first size information is a second value; and a split-screen module 420, including:

[0204] Information acquisition unit, used to acquire first size information and second size information of the visible area of ​​the screen;

[0205] A state determination unit is used to determine the current display state of the visible area of ​​the screen based on the first size information and the second size information of the visible area of ​​the screen;

[0206] The split-screen unit is used to split the screen's visible area into a first display area and a second display area according to the first size information of the preset area and the first size information of the screen's visible area when the current display state of the screen's visible area is the first display state.

[0207] In one optional implementation of this application embodiment, the state determination unit is specifically used for:

[0208] If the first size information of the visible area of ​​the screen is greater than the second size information of the visible area of ​​the screen, then the current display state of the visible area of ​​the screen is determined to be the first display state;

[0209] If the first size information of the visible area of ​​the screen is less than or equal to the second size information of the visible area of ​​the screen, then the current display state of the visible area of ​​the screen is determined to be the second display state.

[0210] One optional implementation of this application embodiment includes a screen splitting unit, specifically used for:

[0211] The first size information of the first display area is determined based on the first size information of the preset area and the first size information of the screen visible area;

[0212] The first display area is determined within the visible area of ​​the screen based on the first size information of the first display area.

[0213] The second display area is determined within the visible area of ​​the screen based on the first size information of the preset area.

[0214] In one optional implementation of this application embodiment, when the first size information and the second size information of the display layer are the same as the first size information and the second size information of the screen visible area, the area determination module 430 is specifically used for:

[0215] The third display area is determined on the display layer based on the center point position of the second display area and the first size information.

[0216] In one optional implementation of this application embodiment, when the first size information and / or second size information of the display layer are not the same as the first size information and / or second size information of the screen visible area, the area determination module 430 is specifically used for:

[0217] Adjust the first size information of the display layer according to the first size information of the visible area of ​​the screen;

[0218] And / or, adjust the second size information of the display layer according to the second size information of the visible area of ​​the screen;

[0219] The third display area is determined on the adjusted display layer based on the center point position of the second display area and the first size information.

[0220] In an optional implementation of this application, when the first interface includes a first interactive component and a second interactive component, the interface display device 400 further includes: a first adjustment module;

[0221] The first adjustment module is used to adjust the size information and display position of the first interactive component and the second interactive component in the first interface according to the first size information of the preset area.

[0222] In one optional implementation of this application embodiment, the adjustment module is specifically used for:

[0223] Based on the first size information of the preset area, adjust the first size information and center point position of the first interactive component;

[0224] Based on the first size information of the preset area, adjust the first size information, center point position, and second size information of the second interactive component.

[0225] In one optional implementation of this application, the first interface displays first information corresponding to the content, and the second interface displays second information corresponding to the content.

[0226] In one optional implementation of this application, the second interface includes at least one third interactive component, and the interface display device 400 further includes: a content switching module;

[0227] The content switching module is used to switch the second information currently displayed in the second interface to the second information associated with the third interactive component in response to a trigger operation on any third interactive component.

[0228] In one optional implementation of this application embodiment, the interface display device 400 further includes: a second adjustment module;

[0229] The second adjustment module is used to adjust the size information of the first interface and the second interface in response to a size adjustment operation on the first interface or the second interface.

[0230] In one optional implementation of this application embodiment, the interface display device 400 further includes: a display control module;

[0231] The display control module is used to respond to a second display operation on the content by turning off the split-screen display of the visible area of ​​the screen and restoring the full-screen display of the visible area of ​​the screen.

[0232] It should be understood that the device embodiments and the foregoing method embodiments can correspond to each other, and similar descriptions can be referred to the method embodiments. To avoid repetition, further details will not be provided here. Specifically, Figure 13The device 400 shown can perform Figure 1 The corresponding method embodiments, and the foregoing and other operations and / or functions of each module in device 400 are respectively implemented to achieve Figure 1 For the sake of brevity, the corresponding processes in each method are not described in detail here.

[0233] The apparatus 400 of this application embodiment has been described above from the perspective of functional modules in conjunction with the accompanying drawings. It should be understood that this functional module can be implemented in hardware, in software instructions, or in a combination of hardware and software modules. Specifically, the steps of the first aspect method embodiment in this application can be completed by integrated logic circuits in the processor's hardware and / or by software instructions. The steps of the first aspect method disclosed in this application embodiment can be directly embodied as being executed by a hardware decoding processor, or by a combination of hardware and software modules in the decoding processor. Optionally, the software module can be located in a mature storage medium in the art, such as random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, registers, etc. This storage medium is located in memory, and the processor reads information from the memory and, in conjunction with its hardware, completes the steps of the first aspect method embodiment described above.

[0234] Figure 14 This is a schematic block diagram of an electronic device provided as an embodiment of this application. Figure 14 As shown, the electronic device 500 may include a memory 510 and a processor 520. The memory 510 stores computer programs and transmits the program code to the processor 520. In other words, the processor 520 can call and run the computer program from the memory 510 to implement the interface display method described in the first aspect of this application embodiment.

[0235] For example, the processor 520 can be used to execute the above-described interface display method according to instructions in the computer program.

[0236] In some alternative embodiments, the above-described interface display method is applied to a terminal device, the terminal device including a display screen, and the method includes:

[0237] In response to a first display operation on the content, a display layer with a transparency of a first value is displayed on the visible area of ​​the display screen;

[0238] Based on the display layer, the visible area of ​​the screen is divided into a first display area and a second display area;

[0239] Based on the second display area, a third display area is determined on the display layer;

[0240] A first interface corresponding to the content is displayed in the first display area, and a second interface corresponding to the content is displayed in the third display area.

[0241] In some optional embodiments, the display layer includes: a preset area whose first size information is a second value; the step of dividing the screen's visible area into a first display area and a second display area according to the display layer includes:

[0242] Obtain the first and second size information of the visible area of ​​the screen;

[0243] The current display state of the screen's visible area is determined based on the first size information and the second size information of the screen's visible area;

[0244] When the current display state of the screen's visible area is the first display state, the screen's visible area is divided into a first display area and a second display area according to the first size information of the preset area and the first size information of the screen's visible area.

[0245] In some optional embodiments, determining the current display state of the screen's visible area based on the first size information and the second size information includes:

[0246] If the first size information of the visible area of ​​the screen is greater than the second size information of the visible area of ​​the screen, then the current display state of the visible area of ​​the screen is determined to be the first display state;

[0247] If the first size information of the visible area of ​​the screen is less than or equal to the second size information of the visible area of ​​the screen, then the current display state of the visible area of ​​the screen is determined to be the second display state.

[0248] In some optional embodiments, dividing the screen's visible area into a first display area and a second display area based on the first size information of the preset area and the first size information of the screen's visible area includes:

[0249] The first size information of the first display area is determined based on the first size information of the preset area and the first size information of the screen visible area;

[0250] The first display area is determined within the visible area of ​​the screen based on the first size information of the first display area.

[0251] The second display area is determined within the visible area of ​​the screen based on the first size information of the preset area.

[0252] In some optional embodiments, when the first size information and the second size information of the display layer are the same as the first size information and the second size information of the screen visible area, determining the third display area on the display layer based on the second display area includes:

[0253] The third display area is determined on the display layer based on the center point position of the second display area and the first size information.

[0254] In some optional embodiments, when the first size information and / or second size information of the display layer are not the same as the first size information and / or second size information of the screen visible area, determining the third display area on the display layer based on the second display area includes:

[0255] Adjust the first size information of the display layer according to the first size information of the visible area of ​​the screen;

[0256] And / or, adjust the second size information of the display layer according to the second size information of the visible area of ​​the screen;

[0257] The third display area is determined on the adjusted display layer based on the center point position of the second display area and the first size information.

[0258] In some optional embodiments, when the first interface includes a first interactive component and a second interactive component, the method further includes:

[0259] Based on the first size information of the preset area, adjust the size information and display position of the first interactive component and the second interactive component in the first interface.

[0260] In some optional embodiments, adjusting the size and display position of the first interactive component and the second interactive component according to the first size information of the preset area includes:

[0261] Based on the first size information of the preset area, adjust the first size information and center point position of the first interactive component;

[0262] Based on the first size information of the preset area, adjust the first size information, center point position, and second size information of the second interactive component.

[0263] In some alternative embodiments, the first interface displays first information corresponding to the content, and the second interface displays second information corresponding to the content.

[0264] In some alternative embodiments, the second interface includes at least one third interactive component, and the method further includes:

[0265] In response to a trigger operation on any third interactive component, the second information currently displayed in the second interface is switched to the second information associated with the third interactive component.

[0266] In some alternative embodiments, the method further includes:

[0267] In response to a size adjustment operation on the first interface or the second interface, the size information of the first interface and the second interface is adjusted.

[0268] In some alternative embodiments, the method further includes:

[0269] In response to a second display operation on the content, the split-screen display of the visible area of ​​the screen is turned off, and the full-screen display of the visible area of ​​the screen is restored.

[0270] In some embodiments of this application, the processor 520 may include, but is not limited to:

[0271] General-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc.

[0272] In some embodiments of this application, the memory 510 includes, but is not limited to:

[0273] Volatile memory and / or non-volatile memory. Non-volatile memory can be read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), or flash memory. Volatile memory can be random access memory (RAM), which is used as an external cache. By way of example, but not limitation, many forms of RAM are available, such as Static RAM (SRAM), Dynamic RAM (DRAM), Synchronous DRAM (SDRAM), Double Data Rate SDRAM (DDR SDRAM), Enhanced Synchronous DRAM (ESDRAM), Synchronous Link DRAM (SLDRAM), and Direct Rambus RAM (DR RAM).

[0274] In some embodiments of this application, the computer program may be divided into one or more modules, which are stored in the memory 510 and executed by the processor 520 to complete the interface display method provided in this application. The one or more modules may be a series of computer program instruction segments capable of performing specific functions, which describe the execution process of the computer program in the electronic device.

[0275] like Figure 14 As shown, the electronic device 500 may further include:

[0276] Transceiver 530, which can be connected to processor 520 or memory 510.

[0277] The processor 520 can control the transceiver 530 to communicate with other devices; specifically, it can send information or data to other devices or receive information or data sent by other devices. The transceiver 530 may include a transmitter and a receiver. The transceiver 530 may further include antennas, and the number of antennas may be one or more.

[0278] It should be understood that the various components in the electronic device are connected through a bus system, which includes a data bus, a power bus, a control bus, and a status signal bus.

[0279] This application also provides a computer storage medium storing a computer program thereon, which, when executed by a computer, enables the computer to perform the interface display method described in the first aspect above.

[0280] In some alternative embodiments, the above-described interface display method is applied to a terminal device, the terminal device including a display screen, and the method includes:

[0281] In response to a first display operation on the content, a display layer with a transparency of a first value is displayed on the visible area of ​​the display screen;

[0282] Based on the display layer, the visible area of ​​the screen is divided into a first display area and a second display area;

[0283] Based on the second display area, a third display area is determined on the display layer;

[0284] A first interface corresponding to the content is displayed in the first display area, and a second interface corresponding to the content is displayed in the third display area.

[0285] In some optional embodiments, the display layer includes: a preset area whose first size information is a second value; the step of dividing the screen's visible area into a first display area and a second display area according to the display layer includes:

[0286] Obtain the first and second size information of the visible area of ​​the screen;

[0287] The current display state of the screen's visible area is determined based on the first size information and the second size information of the screen's visible area;

[0288] When the current display state of the screen's visible area is the first display state, the screen's visible area is divided into a first display area and a second display area according to the first size information of the preset area and the first size information of the screen's visible area.

[0289] In some optional embodiments, determining the current display state of the screen's visible area based on the first size information and the second size information includes:

[0290] If the first size information of the visible area of ​​the screen is greater than the second size information of the visible area of ​​the screen, then the current display state of the visible area of ​​the screen is determined to be the first display state;

[0291] If the first size information of the visible area of ​​the screen is less than or equal to the second size information of the visible area of ​​the screen, then the current display state of the visible area of ​​the screen is determined to be the second display state.

[0292] In some optional embodiments, dividing the screen's visible area into a first display area and a second display area based on the first size information of the preset area and the first size information of the screen's visible area includes:

[0293] The first size information of the first display area is determined based on the first size information of the preset area and the first size information of the screen visible area;

[0294] The first display area is determined within the visible area of ​​the screen based on the first size information of the first display area.

[0295] The second display area is determined within the visible area of ​​the screen based on the first size information of the preset area.

[0296] In some optional embodiments, when the first size information and the second size information of the display layer are the same as the first size information and the second size information of the screen visible area, determining the third display area on the display layer based on the second display area includes:

[0297] The third display area is determined on the display layer based on the center point position of the second display area and the first size information.

[0298] In some optional embodiments, when the first size information and / or second size information of the display layer are not the same as the first size information and / or second size information of the screen visible area, determining the third display area on the display layer based on the second display area includes:

[0299] Adjust the first size information of the display layer according to the first size information of the visible area of ​​the screen;

[0300] And / or, adjust the second size information of the display layer according to the second size information of the visible area of ​​the screen;

[0301] The third display area is determined on the adjusted display layer based on the center point position of the second display area and the first size information.

[0302] In some optional embodiments, when the first interface includes a first interactive component and a second interactive component, the method further includes:

[0303] Based on the first size information of the preset area, adjust the size information and display position of the first interactive component and the second interactive component in the first interface.

[0304] In some optional embodiments, adjusting the size and display position of the first interactive component and the second interactive component according to the first size information of the preset area includes:

[0305] Based on the first size information of the preset area, adjust the first size information and center point position of the first interactive component;

[0306] Based on the first size information of the preset area, adjust the first size information, center point position, and second size information of the second interactive component.

[0307] In some alternative embodiments, the first interface displays first information corresponding to the content, and the second interface displays second information corresponding to the content.

[0308] In some alternative embodiments, the second interface includes at least one third interactive component, and the method further includes:

[0309] In response to a trigger operation on any third interactive component, the second information currently displayed in the second interface is switched to the second information associated with the third interactive component.

[0310] In some alternative embodiments, the method further includes:

[0311] In response to a size adjustment operation on the first interface or the second interface, the size information of the first interface and the second interface is adjusted.

[0312] In some alternative embodiments, the method further includes:

[0313] In response to a second display operation on the content, the split-screen display of the visible area of ​​the screen is turned off, and the full-screen display of the visible area of ​​the screen is restored.

[0314] This application also provides a computer program product containing program instructions that, when executed on an electronic device, cause the electronic device to perform the interface display method described in the first aspect above.

[0315] In some alternative embodiments, the above-described interface display method is applied to a terminal device, the terminal device including a display screen, and the method includes:

[0316] In response to a first display operation on the content, a display layer with a transparency of a first value is displayed on the visible area of ​​the display screen;

[0317] Based on the display layer, the visible area of ​​the screen is divided into a first display area and a second display area;

[0318] Based on the second display area, a third display area is determined on the display layer;

[0319] A first interface corresponding to the content is displayed in the first display area, and a second interface corresponding to the content is displayed in the third display area.

[0320] In some optional embodiments, the display layer includes: a preset area whose first size information is a second value; the step of dividing the screen's visible area into a first display area and a second display area according to the display layer includes:

[0321] Obtain the first and second size information of the visible area of ​​the screen;

[0322] The current display state of the screen's visible area is determined based on the first size information and the second size information of the screen's visible area;

[0323] When the current display state of the screen's visible area is the first display state, the screen's visible area is divided into a first display area and a second display area according to the first size information of the preset area and the first size information of the screen's visible area.

[0324] In some optional embodiments, determining the current display state of the screen's visible area based on the first size information and the second size information includes:

[0325] If the first size information of the visible area of ​​the screen is greater than the second size information of the visible area of ​​the screen, then the current display state of the visible area of ​​the screen is determined to be the first display state;

[0326] If the first size information of the visible area of ​​the screen is less than or equal to the second size information of the visible area of ​​the screen, then the current display state of the visible area of ​​the screen is determined to be the second display state.

[0327] In some optional embodiments, dividing the screen's visible area into a first display area and a second display area based on the first size information of the preset area and the first size information of the screen's visible area includes:

[0328] The first size information of the first display area is determined based on the first size information of the preset area and the first size information of the screen visible area;

[0329] The first display area is determined within the visible area of ​​the screen based on the first size information of the first display area.

[0330] The second display area is determined within the visible area of ​​the screen based on the first size information of the preset area.

[0331] In some optional embodiments, when the first size information and the second size information of the display layer are the same as the first size information and the second size information of the screen visible area, determining the third display area on the display layer based on the second display area includes:

[0332] The third display area is determined on the display layer based on the center point position of the second display area and the first size information.

[0333] In some optional embodiments, when the first size information and / or second size information of the display layer are not the same as the first size information and / or second size information of the screen visible area, determining the third display area on the display layer based on the second display area includes:

[0334] Adjust the first size information of the display layer according to the first size information of the visible area of ​​the screen;

[0335] And / or, adjust the second size information of the display layer according to the second size information of the visible area of ​​the screen;

[0336] The third display area is determined on the adjusted display layer based on the center point position of the second display area and the first size information.

[0337] In some optional embodiments, when the first interface includes a first interactive component and a second interactive component, the method further includes:

[0338] Based on the first size information of the preset area, adjust the size information and display position of the first interactive component and the second interactive component in the first interface.

[0339] In some optional embodiments, adjusting the size and display position of the first interactive component and the second interactive component according to the first size information of the preset area includes:

[0340] Based on the first size information of the preset area, adjust the first size information and center point position of the first interactive component;

[0341] Based on the first size information of the preset area, adjust the first size information, center point position, and second size information of the second interactive component.

[0342] In some alternative embodiments, the first interface displays first information corresponding to the content, and the second interface displays second information corresponding to the content.

[0343] In some alternative embodiments, the second interface includes at least one third interactive component, and the method further includes:

[0344] In response to a trigger operation on any third interactive component, the second information currently displayed in the second interface is switched to the second information associated with the third interactive component.

[0345] In some alternative embodiments, the method further includes:

[0346] In response to a size adjustment operation on the first interface or the second interface, the size information of the first interface and the second interface is adjusted.

[0347] In some alternative embodiments, the method further includes:

[0348] In response to a second display operation on the content, the split-screen display of the visible area of ​​the screen is turned off, and the full-screen display of the visible area of ​​the screen is restored.

[0349] When implemented using software, it can be implemented entirely or partially as a computer program product. This computer program product includes one or more computer instructions. When these computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of this application are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., digital video disc (DVD)), or a semiconductor medium (e.g., solid-state disk (SSD)).

[0350] Those skilled in the art will recognize that the modules and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0351] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of modules is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple modules or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or modules may be electrical, mechanical, or other forms.

[0352] The modules described as separate components may or may not be physically separate. The components shown as modules may or may not be physical modules; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. For example, the functional modules in the various embodiments of this application may be integrated into one processing module, or each module may exist physically separately, or two or more modules may be integrated into one module.

[0353] In this application embodiment, the terms "module" or "unit" refer to a computer program or part of a computer program that has a predetermined function and works with other related parts to achieve a predetermined goal, and can be implemented wholly or partially using software, hardware (such as processing circuitry or memory), or a combination thereof. Similarly, a processor (or multiple processors or memory) can be used to implement one or more modules or units. Furthermore, each module or unit can be part of an overall module or unit that includes the functionality of that module or unit.

[0354] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A method for displaying an interface, characterized in that, Applied to a terminal device, the terminal device including a display screen, the method includes: In response to a first display operation on the content, a display layer with a transparency of a first value is displayed on the visible area of ​​the display screen; Based on the display layer, the visible area of ​​the screen is divided into a first display area and a second display area; Based on the second display area, a third display area is determined on the display layer; A first interface corresponding to the content is displayed in the first display area, and a second interface corresponding to the content is displayed in the third display area.

2. The method according to claim 1, characterized in that, The display layer includes: a preset area whose first size information is a second value; the step of dividing the visible area of ​​the screen into a first display area and a second display area according to the display layer includes: Obtain the first and second size information of the visible area of ​​the screen; The current display state of the screen's visible area is determined based on the first size information and the second size information of the screen's visible area; When the current display state of the screen's visible area is the first display state, the screen's visible area is divided into a first display area and a second display area according to the first size information of the preset area and the first size information of the screen's visible area.

3. The method according to claim 2, characterized in that, Determining the current display state of the screen's visible area based on the first size information and the second size information includes: If the first size information of the visible area of ​​the screen is greater than the second size information of the visible area of ​​the screen, then the current display state of the visible area of ​​the screen is determined to be the first display state; If the first size information of the visible area of ​​the screen is less than or equal to the second size information of the visible area of ​​the screen, then the current display state of the visible area of ​​the screen is determined to be the second display state.

4. The method according to claim 2, characterized in that, The step of dividing the screen's visible area into a first display area and a second display area based on the first size information of the preset area and the first size information of the screen's visible area includes: The first size information of the first display area is determined based on the first size information of the preset area and the first size information of the screen visible area; The first display area is determined within the visible area of ​​the screen based on the first size information of the first display area. The second display area is determined within the visible area of ​​the screen based on the first size information of the preset area.

5. The method according to claim 1, characterized in that, When the first size information and the second size information of the display layer are the same as the first size information and the second size information of the screen's visible area, determining the third display area on the display layer based on the second display area includes: The third display area is determined on the display layer based on the center point position of the second display area and the first size information.

6. The method according to claim 1, characterized in that, When the first size information and / or second size information of the display layer are not the same as the first size information and / or second size information of the visible area of ​​the screen, determining the third display area on the display layer based on the second display area includes: Adjust the first size information of the display layer according to the first size information of the visible area of ​​the screen; And / or, adjust the second size information of the display layer according to the second size information of the visible area of ​​the screen; The third display area is determined on the adjusted display layer based on the center point position of the second display area and the first size information.

7. The method according to claim 1, characterized in that, When the first interface includes a first interactive component and a second interactive component, the method further includes: Based on the first size information of the preset area, adjust the size information and display position of the first interactive component and the second interactive component in the first interface.

8. The method according to claim 7, characterized in that, The step of adjusting the size and display position of the first interactive component and the second interactive component according to the first size information of the preset area includes: Based on the first size information of the preset area, adjust the first size information and center point position of the first interactive component; Based on the first size information of the preset area, adjust the first size information, center point position, and second size information of the second interactive component.

9. The method according to claim 1, characterized in that, The first interface displays first information corresponding to the content, and the second interface displays second information corresponding to the content.

10. The method according to claim 9, characterized in that, The second interface includes at least one third interactive component, and the method further includes: In response to a trigger operation on any third interactive component, the second information currently displayed in the second interface is switched to the second information associated with the third interactive component.

11. The method according to any one of claims 1-10, characterized in that, The method further includes: In response to a size adjustment operation on the first interface or the second interface, the size information of the first interface and the second interface is adjusted.

12. The method according to any one of claims 1-10, characterized in that, The method further includes: In response to a second display operation on the content, the split-screen display of the visible area of ​​the screen is turned off, and the full-screen display of the visible area of ​​the screen is restored.

13. An interface display device, characterized in that, Configured in a terminal device, the terminal device including a display screen, including: A response module is configured to, in response to a first display operation on the content, display a display layer with a transparency of a first value on the visible area of ​​the display screen; The split-screen module is used to divide the visible area of ​​the screen into a first display area and a second display area according to the display layer; A region determination module is used to determine a third display region on the display layer based on the second display region; The display module is used to display a first interface corresponding to the content in the first display area and a second interface corresponding to the content in the third display area.

14. An electronic device, characterized in that, include: A processor and a memory, the memory being used to store a computer program, the processor being used to invoke and run the computer program stored in the memory to perform the method as described in any one of claims 1 to 12.

15. A computer-readable storage medium, characterized in that, Used to store a computer program that causes a computer to perform the method as described in any one of claims 1 to 12.

16. A computer program product containing program instructions, characterized in that, When the program instructions are executed on the electronic device, the electronic device causes the electronic device to perform the method as described in any one of claims 1 to 12.

Images