User interface control method, device and storage medium

Abstract

The embodiments of the present disclosure disclose a method, device, electronic device and storage medium for controlling a user interface; the method comprises: obtaining a first user interface UI of an area to be displayed; generating a second UI based on the sizes of a main display area and an edge display area, wherein the second UI comprises: a transparent rounded rectangular area and a black area outside the rounded rectangular area; the rounded rectangular area covers the main display area and extends from the main display area to the edge of the edge display area away from the main display area; based on the rounded rectangular area of ​​the second UI, the first UI is retracted; wherein the display size of the retracted first UI is consistent with the display size of the rounded rectangular area; stacking the rounded rectangular areas of the retracted first UI and the second UI to generate a third UI; displaying the third UI; the method has a rounded effect when displaying the third UI, and both sides of the third UI are not black, which can enhance the user experience.

Description

Technical Field

[0001] The present disclosure relates to the field of electronic technology, and in particular to a method, device and storage medium for controlling a user interface. Background Art

[0002] In the related art, electronic devices, such as mobile phones, have display screens with different curvatures, such as notch screens, curved screens, and waterfall screens. As the curvature increases, the display of the user interface (UI) will exceed the human field of vision. For example, the curvature of the waterfall screen is as high as 80° to 90°. When the user is facing the display screen, the content displayed on both sides of the display screen cannot be seen; this will cause some important information to be omitted, affecting the user experience.

[0003] Although some manufacturers can currently perform corresponding processing based on application programs, the display effect is not very good when the user interfaces corresponding to these application programs are displayed in electronic devices. Summary of the invention

[0004] The present disclosure provides a method, device, terminal and storage medium for controlling a user interface.

[0005] According to a first aspect of the present disclosure, a method for controlling a user interface is provided, which is applied to an electronic device, wherein the electronic device includes a display screen, wherein the display screen includes: a main display area and an edge display area located at an edge of the main display area; the method includes:

[0006] Get the first UI of the area to be displayed;

[0007] Based on the sizes of the main display area and the edge display area, a second UI is generated; wherein the second UI includes: a transparent rounded rectangular area and a black area outside the rounded rectangular area; the rounded rectangular area covers the main display area and extends from the main display area to a first edge of the edge display area; the first edge is an edge of the edge display area away from the main display area;

[0008] Based on the rounded rectangular area of ​​the second UI, the first UI is retracted; wherein the display size of the retracted first UI is consistent with the display size of the rounded rectangular area;

[0009] Overlaying the retracted first UI and the rounded rectangular area of ​​the second UI to generate a third UI;

[0010] The third UI is displayed.

[0011] In the above scheme, the method further comprises:

[0012] According to the determination strategy, it is determined whether it is necessary to generate the third UI including the indented first UI.

[0013] In the above solution, the determining whether it is necessary to generate the third UI including the indented first UI according to the determination strategy includes at least one of the following:

[0014] If the first UI based on the preset configuration needs to be retracted, determining that the third UI including the retracted first UI needs to be generated;

[0015] If the first UI does not need to be retracted based on the preset configuration, determining that the third UI including the retracted first UI does not need to be generated;

[0016] If the number of times of indentation based on the historical display data of the first UI is greater than or equal to a predetermined number, determining that the third UI including the indented first UI needs to be generated;

[0017] If the number of times of indentation based on the historical display data of the first UI is less than the predetermined number, it is determined that there is no need to generate the third UI including the indented first UI;

[0018] If a retraction triggering operation is detected within a predetermined time range, it is determined that the third UI including the retracted first UI needs to be generated;

[0019] If the retraction triggering operation is not detected within a predetermined time range, it is determined that there is no need to generate the third UI including the retracted first UI.

[0020] In the above solution, generating the second UI based on the sizes of the main display area and the edge display area includes:

[0021] Generate N second UIs based on the sizes of the main display area and the edge display area; wherein the area of ​​the rounded rectangular area of ​​the n-1th second UI is smaller than the area of ​​the rounded rectangular area of ​​the nth second UI, wherein n is an integer greater than or equal to 1 and less than or equal to N;

[0022] The step of shrinking the first UI within the rounded rectangular area based on the second UI includes:

[0023] Based on the mth second UI, the first UI is shrunk to obtain the mth first UI after shrunk; wherein m is a positive integer less than or equal to N;

[0024] The rounded rectangular area on the first UI and the second UI after the stacking and shrinking generates a third UI, including:

[0025] Overlaying the indented mth first UI on the mth second UI to generate the mth third UI;

[0026] The displaying the third UI includes:

[0027] The N third UIs are displayed in sequence according to the generation order of the N third UIs.

[0028] In the above solution, generating the second UI based on the sizes of the main display area and the edge display area includes:

[0029] Determining a first arc line based on the lengths of the two adjacent sides of the top angle of the main display area;

[0030] generating the black area of ​​the second UI based on the area enclosed by the first arc and the two adjacent sides;

[0031] The rounded rectangular area of ​​the second UI is generated based on an area other than a black area in the main display area and the edge display area.

[0032] In the above solution, generating the black area of ​​the second UI based on the area enclosed by the first arc and the two adjacent sides includes:

[0033] The pixel parameter value of the area enclosed by the first arc and the two adjacent sides is modified to generate the black area of ​​the second UI.

[0034] In the above scheme, the method further comprises:

[0035] If no inward adjustment is required according to the determination strategy, the first UI is displayed based on the full screen of the display screen.

[0036] According to a second aspect of the present disclosure, a user interface control device is provided, which is applied to an electronic device, wherein the electronic device includes a display screen, wherein the display screen includes: a main display area and an edge display area located at an edge of the main display area; the device includes:

[0037] An acquisition module, used for acquiring a first UI of the area to be displayed;

[0038] A generating module, configured to generate a second UI based on the sizes of the main display area and the edge display area; wherein the second UI comprises: a transparent rounded rectangular area and a black area outside the rounded rectangular area; the rounded rectangular area covers the main display area and extends from the main display area to a first edge of the edge display area; the first edge is an edge of the edge display area away from the main display area;

[0039] A retracting module, configured to retract the first UI based on the rounded rectangular area of ​​the second UI; wherein the display size of the retracted first UI is consistent with the display size of the rounded rectangular area;

[0040] A stacking module, used for stacking the indented first UI and the rounded rectangular area of ​​the second UI to generate a third UI;

[0041] The display module is used to display the third UI.

[0042] In the above solution, the device further comprises:

[0043] The determination module is used to determine whether it is necessary to generate the third UI including the indented first UI according to a determination strategy.

[0044] In the above solution, the determining module is used for at least one of the following:

[0045] If the interface corresponding to the first UI based on the preset configuration needs to be retracted, determining that the third UI including the retracted first UI needs to be generated;

[0046] If the interface corresponding to the first UI based on the preset configuration does not need to be retracted, determining that the third UI including the retracted first UI does not need to be generated;

[0047] If the number of times of indentation based on the historical display data of the interface corresponding to the first UI is greater than or equal to a predetermined number, determining that the third UI including the indented first UI needs to be generated;

[0048] If the number of times of indentation based on the historical display data of the interface corresponding to the first UI is less than the predetermined number, it is determined that there is no need to generate the third UI including the indented first UI;

[0049] If a retraction triggering operation is detected within a predetermined time range, it is determined that the third UI including the retracted first UI needs to be generated;

[0050] If the retraction triggering operation is not detected within a predetermined time range, it is determined that there is no need to generate the third UI including the retracted first UI.

[0051] In the above solution, the generating module is used to generate N second UIs based on the sizes of the main display area and the edge display area; wherein the area of ​​the rounded rectangular area of ​​the n-1th second UI is smaller than the area of ​​the rounded rectangular area of ​​the nth second UI, wherein n is an integer greater than or equal to 1 and less than or equal to N;

[0052] The retraction module is configured to retract the first UI based on the mth second UI to obtain the retracted mth first UI; wherein m is a positive integer less than or equal to N;

[0053] The stacking module is used to stack the indented mth first UI on the mth second UI to generate the mth third UI;

[0054] The display module is used to display the N third UIs in sequence according to the generation order of the N third UIs.

[0055] In the above solution, the generating module is used to determine the first arc based on the length of each side of the two adjacent sides of the top angle of the main display area; and generate the black area of ​​the second UI based on the area enclosed by the first arc and the two adjacent sides;

[0056] The generating module is further configured to generate the rounded rectangular area of ​​the second UI based on the area other than the black area in the main display area and the edge display area.

[0057] In the above solution, the generating module is used to modify the pixel parameter value of the area enclosed by the first arc and the two adjacent sides to generate the black area of ​​the second UI.

[0058] In the above solution, the display module is used to display the first UI based on the full screen of the display screen if no indentation adjustment is required according to the determination strategy.

[0059] According to a third aspect of the present disclosure, there is provided an electronic device, including:

[0060] processor;

[0061] a memory for storing processor-executable instructions;

[0062] The processor is configured to implement the user interface control method described in any embodiment of the present disclosure when running the executable instructions.

[0063] According to a fourth aspect of the present disclosure, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores an executable program, wherein when the executable program is executed by a processor, the method for controlling a user interface described in any embodiment of the present disclosure is implemented.

[0064] The technical solution provided by the embodiments of the present disclosure may have the following beneficial effects:

[0065] In an embodiment of the present disclosure, a second UI is generated based on the sizes of a main display area and an edge display area of ​​a display screen, wherein the second UI includes: a transparent rounded rectangular area and a black area outside the rounded rectangular area; the rounded rectangular area covers the main display area and extends from the main display area to the edge display area away from the edge of the main display area; and the first UI of the area to be displayed is obtained, and the first UI is retracted based on the rounded rectangular area of ​​the second UI; and the retracted first UI and the second UI are stacked to generate and display the third UI.

[0066] In this way, the embodiment of the present disclosure can display the retracted third UI on the display screen with the third UI having a rounded corner effect; and when displaying the third UI, the two sides of the third UI are not black, thereby improving the user experience.

[0067] Moreover, since the first UI is displayed inwardly, that is, at least a part of it is not displayed in the edge display area, it can also reduce accidental touches of controls in the first UI caused by the user touching the edge display area when holding the electronic device.

[0068] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0069] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the invention and, together with the description, serve to explain the principles of the invention.

[0070] Figure 1 The figure is a flow chart of a method for controlling a user interface according to an exemplary embodiment.

[0071] Figure 2 It is a schematic diagram of a user interface according to an exemplary embodiment.

[0072] Figure 3 It is a schematic diagram of a user interface according to an exemplary embodiment.

[0073] Figure 4 It is a schematic diagram of a user interface according to an exemplary embodiment.

[0074] Figure 5 It is a schematic diagram of a user interface according to an exemplary embodiment.

[0075] Figure 6 The figure is a flow chart of a method for controlling a user interface according to an exemplary embodiment.

[0076] Figure 7 The figure is a flow chart of a method for controlling a user interface according to an exemplary embodiment.

[0077] Figure 8 The invention is a block diagram of a device for controlling a user interface according to an exemplary embodiment.

[0078] Fig. 9 It is a block diagram of an electronic device according to an exemplary embodiment. DETAILED DESCRIPTION

[0079] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present invention. Instead, they are merely examples of devices and methods consistent with some aspects of the present invention as detailed in the appended claims.

[0080] The present disclosure provides a method for controlling a user interface, the method being applied to an electronic device, wherein the electronic device comprises a display screen, the display screen comprising: a main display screen area and an edge display area located at an edge of the main display area; Figure 1 As shown, the method comprises the following steps:

[0081] Step S11: Acquire the first UI of the area to be displayed;

[0082] Step S12: generating a second UI based on the sizes of the main display area and the edge display area;

[0083] The second UI includes: a transparent rounded rectangular area and a black area outside the rounded rectangular area; the rounded rectangular area covers the main display area and extends from the main display area to the first edge of the edge display area; the first edge is an edge of the edge display area away from the main display area;

[0084] Step S13: shrinking the first UI based on the rounded rectangular area of ​​the second UI;

[0085] The display size of the retracted first UI is consistent with the display size of the rounded rectangular area;

[0086] Step S14: stacking the indented first UI and the rounded rectangular area of ​​the second UI to generate a third UI;

[0087] Step S15: Display the third UI.

[0088] In the disclosed embodiment, the electronic device may be a mobile phone, a computer, or a tablet computer. The display screen of the electronic device includes but is not limited to at least one of the following: a waterfall screen, a curved screen, an outward folding screen, and a notch screen. The curvature and the radius of curvature may be used to identify the degree of curvature of the display screen; wherein the magnitude of the curvature is positively correlated with the degree of curvature of the display screen, and the magnitude of the curvature is inversely correlated with the degree of curvature of the display screen.

[0089] For example, in one embodiment, the main display area has a first curvature, the edge display area has a second curvature, and the first curvature is smaller than the second curvature.

[0090] For another example, in another embodiment, the main display area has a first radius of curvature, the edge display area has a second radius of curvature, and the first radius of curvature is greater than the second radius of curvature.

[0091] In the embodiment of the present disclosure, the main display area may be a plane area, and the edge display area may be a curved display area; there is an edge display area on each of the two opposite sides of the main display area.

[0092] For example, if the display screen is a waterfall display screen, the main display area is the planar area of ​​the first surface, and the edge display area is the waterfall display area of ​​the second surface and the third surface; wherein the second surface and the third surface are arranged opposite to each other and are respectively connected to both sides of the first surface.

[0093] The first UI here is the application interface of various application programs (APP); for example, Figure 2 As shown, it can be the application interfaces of email, smart display, Taobao mobile, Mi Home, Alipay, etc.

[0094] In the embodiment of the present disclosure, the area to be displayed includes: a main display area and an edge display area. In this example, if the area to be displayed includes the main display area and the edge display area, the first UI is prepared to be displayed in the entire display screen before being retracted.

[0095] In other embodiments, the area to be displayed may also include: a main display area. In this example, if the area to be displayed includes the main display area, the first UI is prepared to be displayed in the main display area of ​​the display screen before being retracted.

[0096] In one embodiment, before step S12, the method further includes: obtaining sizes of the main display area and the edge display area.

[0097] The size of the main display area here includes: the first side length and the second side length of the main display area, and the first side length and the second side length are perpendicular to each other. The size of the edge display area here includes: the third side length of the edge display area, and the fourth side length of the edge display area, and the third side length and the fourth side length are perpendicular to each other. If the first side length is the horizontal edge of the main display area, the second side length is the vertical edge of the main display area, the third side length is the horizontal edge of the edge display area, and the fourth side length is the vertical edge of the edge display area, then the second side length is the same as the fourth side length.

[0098] In the above example, the first edge may be a vertical edge, and the first edge is an edge of the edge display area away from the main display area.

[0099] In the embodiment of the present disclosure, the rounded rectangular area covers part or all of the edge display area.

[0100] In some embodiments, the step S13 includes: scaling down the first UI in proportion to the size of the rounded rectangular area. For example, the first UI is 4×4 cm 2 The rounded rectangular area of ​​the second UI window is: 3×3cm 2 window, the first UI is The scale is reduced to 3×3cm 2 window.

[0101] In other embodiments, the display size of the first UI is consistent with the size of the rounded area covering the main display area. Thus, in this example, the first UI is only displayed in the main display area.

[0102] The third UI here may include: the first UI after being retracted. Here, in the step S14, the size of the first UI used for stacking is the same as the size of the rounded rectangular area.

[0103] The third UI here may also include: the retracted first UI and a transparent area. Here, in step S14, the size of the first UI used for stacking is the same as the size of the main display area; the transparent area is a part of the rounded rectangular area covering the edge display area.

[0104] In the embodiment of the present disclosure, a second UI is generated based on the size of the main display area and the edge display area of ​​the display screen, wherein the second UI includes: a transparent rounded rectangular area and a black area outside the rounded rectangular area; the rounded rectangular area covers the main display area and extends from the main display area to the edge of the edge display area away from the main display area; and the first UI of the acquired area to be displayed is indented based on the rounded rectangular area of ​​the second UI; and the indented first UI and the second UI are stacked to generate and display the third UI. In this way, when the indented third UI is displayed on the display screen, it can have a rounded effect; and when the third UI is displayed, the two sides of the third UI are not black, which improves the user experience.

[0105] In some application scenarios, if the electronic device is in a portrait mode, the edge display area is on the left and right sides of the electronic device, and the two sides of the third UI are not left black, which means the left and right sides of the electronic device. In other application scenarios, if the electronic device is in a landscape mode, the edge display area is on the upper and lower sides of the electronic device, and the two sides of the third UI are not left black, which means the upper and lower sides of the electronic device are not left black.

[0106] In the disclosed embodiment, since the first UI is displayed inwardly, that is, at least a portion is not displayed in the edge display area, it can also reduce accidental touches of controls in the first UI caused by the user touching the edge display area when holding the electronic device.

[0107] In some embodiments, the method further includes: determining, according to a determination strategy, whether it is necessary to generate the third UI including the indented first UI.

[0108] The determining, according to the determination strategy, whether it is necessary to generate the third UI including the indented first UI includes one of the following:

[0109] If the interface corresponding to the first UI based on the preset configuration needs to be retracted, determining that the third UI including the retracted first UI needs to be generated;

[0110] If the interface corresponding to the first UI based on the preset configuration does not need to be retracted, determining that the third UI including the retracted first UI does not need to be generated;

[0111] If the number of times of indentation based on the historical display data of the interface corresponding to the first UI is greater than or equal to a predetermined number, determining that the third UI including the indented first UI needs to be generated;

[0112] If the number of times of indentation based on the historical display data of the interface corresponding to the first UI is less than the predetermined number, it is determined that there is no need to generate the third UI including the indented first UI;

[0113] If a retraction triggering operation is detected within a predetermined time range, it is determined that the third UI including the retracted first UI needs to be generated;

[0114] If the retraction triggering operation is not detected within a predetermined time range, it is determined that there is no need to generate the third UI including the retracted first UI.

[0115] An implementation method based on pre-configuration here may be: pre-dividing the first UI corresponding to all applications of the electronic device into a first UI that needs to be retracted and a first UI that does not need to be retracted; when the electronic device obtains the first UI, it may determine whether the first UI needs to generate the third UI including the retracted first UI based on the pre-configuration.

[0116] For example, Figure 2 As shown, the user interfaces corresponding to email, smart travel, Taobao Mobile, Mi Home, Bilibili and Alipay can be set as the first UI that needs to be retracted, and the user interface corresponding to WPS Office can be set as the first UI that does not need to be retracted.

[0117] Another implementation method based on the preset configuration here may be: based on a whitelist pre-set in the electronic device. For example, in one embodiment, the method includes: pre-setting a whitelist, wherein the whitelist includes at least one candidate application; the candidate application is an application corresponding to the first UI that needs to be indented;

[0118] The determining, according to the determination strategy, whether it is necessary to generate the third UI including the indented first UI includes:

[0119] If the current application corresponding to the first UI in the to-be-displayed area is the candidate application, determining that the third UI including the retracted first UI needs to be generated;

[0120] If the current application corresponding to the first UI in the to-be-displayed area is not the candidate application, it is determined that there is no need to generate the third UI including the retracted first UI.

[0121] Thus, in this embodiment, whether to display the third UI including the first UI may be determined based on the attribute of the application corresponding to each first UI.

[0122] The historical display data here includes: the number of historical indentations, wherein the number of historical indentations is the number of indentations during the historical display of the first UI. In other embodiments, the historical display data may also include the number of non-indentations during the historical display of the first UI.

[0123] The historical number of indentations of the first UI here may be the historical number of indentations of at least one of the electronic devices, or the historical number of indentations of the same type of interface corresponding to the first UI. The historical number of indentations here may be stored in the electronic device, or may be obtained from a cloud server.

[0124] For example, a predetermined number of times can be pre-set in the electronic device. If the number of times the first UI is retracted during historical display is greater than the predetermined number of times, it is determined that the third UI including the retracted first UI needs to be generated; if the number of times the first UI is retracted during historical display is less than the predetermined number of times, it is determined that the third UI including the retracted first UI does not need to be generated.

[0125] Thus, in this embodiment, it can be determined based on the historical configuration of the first UI whether the third UI including the retracted first UI is currently displayed.

[0126] The retraction triggering operation here at least includes: a first operation of starting to retract the first UI, and a second operation of not starting to retract the first UI.

[0127] For example, in one application scenario, the first operation includes closing the extended display shortcut key, and the second operation includes opening the extended display shortcut key. Here, the extended display shortcut key is a shortcut key for full-screen display based on the display screen.

[0128] For example, in another application scenario, the first operation includes opening a retracted display shortcut key, and the second operation includes closing the retracted display shortcut key. Here, the retracted display shortcut key is a shortcut key for retracting display based on the main display area.

[0129] In one embodiment, the predetermined time is less than or equal to 5 seconds.

[0130] Thus, in the embodiment of the present disclosure, whether to generate the third UI including the indented part can be determined based on whether a trigger operation is detected within a predetermined time range; thus, whether to generate the trigger operation can be determined based on the user's selection.

[0131] Of course, in other embodiments, the determining whether to generate the third UI including the retracted first UI according to the determination strategy and the retraction trigger operation may also be:

[0132] In response to detecting a first operation acting on the first UI, determining to generate the third UI including the retracted first UI; or,

[0133] In response to detecting a second operation acting on the first UI, it is determined not to generate the third UI including the retracted first UI.

[0134] In the embodiment of the present disclosure, whether to display the third UI including the retracted first UI may be determined according to different determination strategies, so that a more appropriate display mode of the current first UI may be determined based on multiple methods.

[0135] Of course, in other embodiments, the determining whether it is necessary to generate the third UI including the indented first UI according to the determination strategy includes at least one of the following:

[0136] Determine, according to the determination strategy obtained based on the preset configuration, whether to generate the third UI including the indented first UI;

[0137] Determine whether to generate the third UI including the indented first UI according to the determination strategy and the historical display data of the interface corresponding to the first UI;

[0138] According to the determination strategy and the retraction trigger operation, it is determined whether to generate the third UI including the retracted first UI.

[0139] In one embodiment, determining whether to generate the third UI including the indented first UI according to the determination strategy obtained based on a preset configuration includes one of the following:

[0140] If the first UI based on the preset configuration needs to be retracted, determining that the third UI including the retracted first UI needs to be generated;

[0141] If the first UI based on the preset configuration does not need to be retracted, it is determined that the third UI including the retracted first UI does not need to be generated.

[0142] In one embodiment, determining whether to generate the third UI including the indented first UI according to the determination strategy and the historical display data of the interface corresponding to the first UI includes one of the following:

[0143] If the number of times of indentation based on the historical display data of the first UI is greater than or equal to a predetermined number, determining that the third UI including the indented first UI needs to be generated;

[0144] If the number of times the indentation is performed based on the historical display data of the first UI is less than the predetermined number, it is determined that there is no need to generate the third UI including the indented first UI.

[0145] In one embodiment, the determining whether to generate the third UI including the retracted first UI according to the determination strategy and the retraction trigger operation includes one of the following:

[0146] If a retraction triggering operation is detected within a predetermined time range, it is determined that the third UI including the retracted first UI needs to be generated;

[0147] If the retraction triggering operation is not detected within a predetermined time range, it is determined that there is no need to generate the third UI including the retracted first UI.

[0148] In some embodiments, the method comprises:

[0149] If no inward adjustment is required according to the determination strategy, the first UI is displayed based on the full screen of the display screen.

[0150] In the embodiment of the present disclosure, if it is determined that the first UI does not need to be displayed inwardly, the first UI can be displayed in full screen directly based on the display screen; in this way, the display area for displaying content can be increased.

[0151] In some embodiments, the step S12 includes:

[0152] Generate N second UIs based on the sizes of the main display area and the edge display area; wherein the area of ​​the rounded rectangular area of ​​the n-1th second UI is smaller than the area of ​​the rounded rectangular area of ​​the nth second UI, wherein n is an integer greater than or equal to 1 and less than or equal to N;

[0153] The step 13 comprises:

[0154] Based on the mth second UI, the first UI is shrunk to obtain the mth first UI after shrunk; wherein m is a positive integer less than or equal to N;

[0155] The step 14 comprises:

[0156] Overlaying the indented mth first UI on the mth second UI to generate the mth third UI;

[0157] The step 15 comprises:

[0158] The N third UIs are displayed in sequence according to the generation order of the N third UIs.

[0159] Here, the rounded rectangular area of ​​the Nth second UI covers the main display area and extends from the main display area to the edge display area away from the edge of the main display area.

[0160] In one embodiment, the generation order of the N third UIs includes: sequentially generating the first third UI, the second third UI, ..., the N-1th third UI, and the Nth third UI. Thus, in this example, when the N third UIs are displayed sequentially, the third UIs are displayed in an animated expanded manner.

[0161] In another embodiment, the generation order of the N third UIs includes: sequentially generating the Nth third UI, the N-1th third UI, ... the second third UI and the first third UI. Thus, in this example, when the N third UIs are displayed sequentially, the third UIs are displayed in an animated zoomed-out manner.

[0162] In the embodiment of the present disclosure, when the first UI is started or exited, the third UI including the retracted first UI can be animated to enlarge or reduce, so that the window animation can have a rounded corner effect; and no black is left on both sides of the third UI during the animation process. Figure 3 As shown, it is a process of animating the shrinking of the third UI. In the schematic diagram, the third UI has a rounded corner effect, and the two sides of the third UI are where the areas that originally had black borders on both sides have been cropped, presenting an effect of no black left on both sides.

[0163] In some embodiments, generating the second UI based on the sizes of the main display area and the edge display area includes:

[0164] Determining a first arc line based on the lengths of the two adjacent sides of the top angle of the main display area;

[0165] generating the black area of ​​the second UI based on the area enclosed by the first arc and the two adjacent sides;

[0166] The rounded rectangular area of ​​the second UI is generated based on an area other than a black area in the main display area and the edge display area.

[0167] In one embodiment, the number of vertex corners of the main display area is 4. Two adjacent sides of the vertex corners are part of the side lengths of two sides of the main display area.

[0168] For example, Figure 4As shown, the two sides of the main display area are the first side length and the second side length, and the two adjacent sides of the vertex are the first side length of the first part and the second side length of the first part. The first arc here is an arc connecting the first endpoint of the first side length of the first part and the first endpoint of the second side length of the first part, wherein the first endpoint of the first side length of the first part is the end of the first side length of the first part away from the intersection with the second side length of the first part, and the first end of the second side length of the first part is the end of the second side length of the first part away from the intersection with the second side length of the first part. The area enclosed by the first arc, the first side length of the first part and the second side length of the first part is a black area; Figure 4 The available area A indicates the black area.

[0169] In the above example, the area enclosed by the first arc, the first side length of the second part and the second side length of the second part is the rounded rectangular area; Figure 4 The available area B indicates the rounded rectangular area. Here, the first side length of the second portion is the side length of the first side length excluding the first side length of the first portion, and the second side length of the second portion is the side length of the second side length excluding the second side length of the first portion.

[0170] Of course, in other embodiments, see Figure 4 and 5 If the rounded rectangular area in the second UI also covers the edge extending from the main display area to the edge display area away from the main display area, then the rounded rectangular area includes area B and area C enclosed by the first arc, the first side length of the first part and the second side length of the first part; wherein, area C is part or all of the edge display area.

[0171] In one embodiment, determining the first arc based on the lengths of the sides of two adjacent sides of the top corner of the main display area includes: determining the cube of the radius of the first arc based on the sum of the cubes of the sides of the two adjacent sides.

[0172] For example, the first arc is: 3 +Y 3 =R 3 ; wherein X is the first side length of the first portion, Y is the second side length of the first portion, and R is the radius of the first arc. Thus, in this example, the radius of the first arc can be determined based on the first side length of a portion and the second side length of the first portion, thereby determining the first arc.

[0173] In the disclosed embodiment, the first arc can be determined by the length of each side of two adjacent sides of the top corner of the main display area, so that the rounded corner effect of the second UI display is relatively smooth, thereby improving the user experience.

[0174] In some embodiments, generating the black area of ​​the second UI based on the area enclosed by the first arc and the two adjacent sides includes:

[0175] The pixel parameter value of the area enclosed by the first arc and the two adjacent sides is modified to generate the black area of ​​the second UI.

[0176] In one embodiment, the pixel parameter value is used to represent the transparency or opacity of a color.

[0177] In an application scenario, the pixel parameter value may be an Alpha channel. The pixel parameter value here may be set to the interval [0, 1]; for example, when the pixel parameter value of a region is set to 0, the region is fully transparent black; for another example, when the pixel parameter value of a region is set to 1, the region is opaque white.

[0178] In the disclosed embodiment, the transparency of the pixels in the area enclosed by the first arc and the two adjacent sides of the top corner of the main display area can be set so that the area can display color and thus present a rounded corner effect; and this method is simple and easy to implement.

[0179] In another embodiment, generating the black area of ​​the second UI based on the area enclosed by the first arc and the two adjacent sides includes:

[0180] The color parameter value of the area enclosed by the first arc and the two adjacent sides is modified to generate the black area of ​​the second UI.

[0181] The color parameter values ​​here include: a first color parameter value, a second color parameter value and a third color parameter value. The first color parameter value, the second color parameter value and the third color parameter value can all be set to [0, 255].

[0182] In an application scenario, the first color parameter value is red, the second color parameter value is green, and the third color parameter value is blue; wherein the first color parameter value, the second color parameter value, and the third color parameter value can all be set to 0, then the area enclosed by the first arc and the two adjacent sides of the top corner of the main display area is black.

[0183] Thus, in this embodiment, the color of the pixels in the area enclosed by the first arc and the two adjacent sides of the top corner of the main display area can be set so that the area can display black, thereby presenting a rounded corner effect.

[0184] A specific example is provided below in combination with any of the above embodiments:

[0185] like Figure 6 As shown, an embodiment of the present disclosure provides a method for controlling a user interface, which is applied to an electronic device, wherein the electronic device includes a display screen, and the display screen includes: a main display area and an edge display area located at the edge of the main display area; the method includes the following steps:

[0186] Step S61: Initialize the electronic device;

[0187] Step S62: Obtain and store the size of the edge display area;

[0188] In an optional embodiment, the electronic device loads the size of the edge display area from a resource file, and stores the size of the edge display area in the global display frame information.

[0189] The global display frame here includes the size of the display screen.

[0190] Step S63: Acquire the first UI to be displayed;

[0191] In an optional embodiment, the electronic device obtains the first UI to be displayed on the display screen.

[0192] Step S64: according to the determination strategy, determine whether to generate a third UI including the indented first UI; if so, execute step S65; if not, execute step S66;

[0193] In an optional embodiment, the electronic device determines whether to generate a third UI including the indented first UI according to historical display data of the interface corresponding to the first UI.

[0194] In another optional embodiment, the electronic device determines whether to generate a third UI including the retracted first UI according to a retraction triggering operation on the first UI.

[0195] For example, in an actual application scenario, a possible implementation method for determining whether the first UI is retracted is also provided:

[0196] Control whether to shrink the first UI by setting the appUseSideMode property in PackageSettingBase;

[0197] appUseSideMode = 1; / / Extension;

[0198] appUseSideMode=0; / / retract;

[0199] Set PackageSettingBase as follows:

[0200] PackageManagerEx.setAppUseSideMode("com.miui.settings",0;

[0201] Here PackageManagerEx also defines the following:

[0202] public static int getAppUseSideMode(String packageName);

[0203] public static boolean isAllAppsUseSideMode(List <string>packageNameList);

[0204] public static boolean restoreAllAppsUseSideMode();

[0205] public static boolean setAllAppsUseSideMode(boolean isUse).

[0206] Step S65: generating the third UI including the indented UI;

[0207] In an optional embodiment, the electronic device reads an area excluding the edge display area from the global display frame as a second UI; and based on the second UI, shrinks the first UI; and embeds the shrunken first UI on the second UI to generate the third UI including the shrunken first UI.

[0208] For example, Figure 7 As shown, in an actual application scenario, a feasible method for generating a retracted first UI is also provided:

[0209] Step S6501: Save the size of the edge display area in the DisplayCutout class;

[0210] The size of the edge display area here includes the length and width of the edge display area.

[0211] Step S6502: Start layout in the DisplayContent class;

[0212] Step S6503: in the display content class, a clipping area of ​​the edge display area is calculated according to the turn;

[0213] Step S6504: setting the length and width of the display rectangle in the display clipping class;

[0214] The length and width of the display rectangle are set here to be determined according to the cropping area of ​​the edge display area. The length and width of the display rectangle here are the second UI of the above embodiment.

[0215] Step S6505: Set the length and width of the display rectangle in the display policy (MiuiDisplay Policy) class;

[0216] Step S6506: Call the length and width of the display rectangle in the DisplayFrames class;

[0217] Step S6507: Call the length and width of the display rectangle in the window state (WindowState) class.

[0218] The display frame type here may be the global display frame in the above embodiment.

[0219] In this example, before the display content class performs window layout, the indentation width (i.e., the size of the edge display area) is saved in the display cropping class, and then layout is started; the display frame class calls the layout in the display content class according to the indentation attribute corresponding to the first UI, and calculates the display rectangle (mDisplayExceptSide) after removing the indentation width based on the indentation width; finally, the display frame class saves the display rectangle, and the window state class transmits the third UI with the embedded display rectangle to the application end for layout drawing work.

[0220] Step S66: determining not to shrink the first UI;

[0221] In an optional embodiment, the electronic device does not adjust the global display frame.

[0222] Step S67: modifying the third UI according to the configured rounded corner information to generate the third UI with rounded corners;

[0223] In an optional embodiment, the electronic device generates a second arc based on two adjacent sides of the third UI vertex; and sets an area enclosed by the second arc and the two adjacent sides as a black area to generate the third UI with rounded corners.

[0224] Step S68: Add corresponding display content in the third UI.

[0225] In the embodiment of the present disclosure, the third UI including the retracted first UI may be displayed in an animated manner without leaving black on both sides, and a rounded corner effect may be presented when the third UI is displayed, thereby improving the user experience.

[0226] Furthermore, in the embodiments of the present disclosure, it can be determined whether the first UI is to be displayed inwardly based on a policy, thereby selecting a suitable display mode for the first UI corresponding to each application; and when the first UI is displayed inwardly, it can also reduce accidental touches of controls in the first UI caused by the user touching the edge display area when holding the electronic device.

[0227] Figure 8 is a block diagram of a user interface control device according to an exemplary embodiment, wherein the user interface control device is applied to an electronic device, wherein the electronic device comprises a display screen, wherein the display screen comprises: a main display area and an edge display area located at an edge of the main display area; Figure 8 As shown, the device comprises:

[0228] An acquisition module 71 is used to acquire a first UI of the area to be displayed;

[0229] A generating module 72 is configured to generate a second UI based on the sizes of the main display area and the edge display area, wherein the second UI includes: a transparent rounded rectangular area and a black area outside the rounded rectangular area; the rounded rectangular area covers the main display area and extends from the main display area to a first edge of the edge display area; the first edge is an edge of the edge display area away from the main display area;

[0230] A retracting module 73, configured to retract the first UI based on the rounded rectangular area of ​​the second UI; wherein the display size of the retracted first UI is consistent with the display size of the rounded rectangular area;

[0231] A stacking module 74, configured to stack the retracted first UI and the rounded rectangular area of ​​the second UI to generate a third UI;

[0232] The display module 75 is used to display the third UI.

[0233] In some embodiments, the apparatus further comprises:

[0234] The determination module 76 is used to determine whether it is necessary to generate the third UI including the indented first UI according to a determination strategy.

[0235] In some embodiments, the determination module 76 is used for at least one of the following:

[0236] Determine, according to the determination strategy obtained based on the preset configuration, whether to generate the third UI including the indented first UI;

[0237] Determine whether to generate the third UI including the indented first UI according to the determination strategy and the historical display data of the interface corresponding to the first UI;

[0238] According to the determination strategy and the retraction trigger operation, it is determined whether to generate the third UI including the retracted first UI.

[0239] In some embodiments, the determination module 76 is used for at least one of the following:

[0240] If the first UI based on the preset configuration needs to be retracted, determining that the third UI including the retracted first UI needs to be generated;

[0241] If the first UI does not need to be retracted based on the preset configuration, determining that the third UI including the retracted first UI does not need to be generated;

[0242] If the number of times of indentation based on the historical display data of the first UI is greater than or equal to a predetermined number, determining that the third UI including the indented first UI needs to be generated;

[0243] If the number of times of indentation based on the historical display data of the first UI is less than the predetermined number, it is determined that there is no need to generate the third UI including the indented first UI;

[0244] If a retraction triggering operation is detected within a predetermined time range, it is determined that the third UI including the retracted first UI needs to be generated;

[0245] If the retraction triggering operation is not detected within a predetermined time range, it is determined that there is no need to generate the third UI including the retracted first UI.

[0246] In some embodiments, the generating module 72 is configured to generate N second UIs based on the sizes of the main display area and the edge display area; wherein the area of ​​the rounded rectangular area of ​​the n-1th second UI is smaller than the area of ​​the rounded rectangular area of ​​the nth second UI, wherein n is an integer greater than or equal to 1 and less than or equal to N;

[0247] The retracting module 73 is configured to retract the first UI based on the mth second UI to obtain the retracted mth first UI; wherein m is a positive integer less than or equal to N;

[0248] The stacking module 74 is used to stack the indented mth first UI on the mth second UI to generate the mth third UI;

[0249] The display module 75 is used to display the N third UIs in sequence according to the generation order of the N third UIs.

[0250] In some embodiments, the generating module 72 is used to determine a first arc based on the lengths of the two adjacent sides of the top corner of the main display area; and generate the black area of ​​the second UI based on the area enclosed by the first arc and the two adjacent sides;

[0251] The generating module 72 is further configured to generate the rounded rectangular area of ​​the second UI based on the area other than the black area in the main display area and the edge display area.

[0252] In some embodiments, the generating module 72 is used to modify the pixel parameter value of the area enclosed by the first arc and the two adjacent sides to generate the black area of ​​the second UI.

[0253] In some embodiments, the display module 75 is configured to display the first UI based on the full screen of the display screen if no indentation adjustment is required according to the determination strategy.

[0254] Regarding the device in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0255] An embodiment of the present disclosure further provides an electronic device, including:

[0256] processor;

[0257] a memory for storing processor-executable instructions;

[0258] The processor is configured to implement the user interface control method described in any embodiment of the present disclosure when running the executable instructions.

[0259] The memory may include various types of storage media, which are non-transitory computer storage media that can continue to memorize information stored thereon after the communication device loses power.

[0260] The processor may be connected to the memory through a bus or the like, and is used to read the executable program stored in the memory, for example, to implement the following Figure 1 , Figure 6 At least one of the methods shown.

[0261] The embodiments of the present disclosure further provide a computer-readable storage medium, wherein the computer-readable storage medium stores an executable program, wherein the executable program, when executed by a processor, implements the user interface control method described in any embodiment of the present disclosure. Figure 1 , Figure 6 At least one of the methods shown.

[0262] Regarding the device in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0263] Fig. 9 8 is a block diagram of an electronic device 800 according to an exemplary embodiment. For example, the electronic device 800 may be a mobile phone, a computer, a digital broadcast terminal, a messaging device, a game console, a tablet device, a medical device, a fitness device, a personal digital assistant, etc.

[0264] Reference Fig. 9 , the electronic device 800 may include one or more of the following components: a processing component 802 , a memory 804 , a power component 806 , a multimedia component 808 , an audio component 810 , an input / output (I / O) interface 812 , a sensor component 814 , and a communication component 816 .

[0265] The processing component 802 generally controls the overall operation of the electronic device 800, such as operations associated with display, phone calls, data communications, camera operations, and recording operations. The processing component 802 may include one or more processors 820 to execute instructions to complete all or part of the steps of the above-mentioned method. In addition, the processing component 802 may include one or more modules to facilitate the interaction between the processing component 802 and other components. For example, the processing component 802 may include a multimedia module to facilitate the interaction between the multimedia component 808 and the processing component 802.

[0266] The memory 804 is configured to store various types of data to support operations on the device 800. Examples of such data include instructions for any application or method operating on the electronic device 800, contact data, phone book data, messages, pictures, videos, etc. The memory 804 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk or optical disk.

[0267] The power supply component 806 provides power to the various components of the electronic device 800. The power supply component 806 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power for the electronic device 800.

[0268] The multimedia component 808 includes a screen that provides an output interface between the electronic device 800 and the user. In some embodiments, the screen may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive input signals from the user. The touch panel includes one or more touch sensors to sense touch, slide, and gestures on the touch panel. The touch sensor may not only sense the boundaries of the touch or slide action, but also detect the duration and pressure associated with the touch or slide operation. In some embodiments, the multimedia component 808 includes a front camera and / or a rear camera. When the device 800 is in an operating mode, such as a shooting mode or a video mode, the front camera and / or the rear camera may receive external multimedia data. Each front camera and the rear camera may be a fixed optical lens system or have a focal length and optical zoom capability.

[0269] The audio component 810 is configured to output and / or input audio signals. For example, the audio component 810 includes a microphone (MIC), and when the electronic device 800 is in an operating mode, such as a call mode, a recording mode, and a voice recognition mode, the microphone is configured to receive an external audio signal. The received audio signal can be further stored in the memory 804 or sent via the communication component 816. In some embodiments, the audio component 810 also includes a speaker for outputting audio signals.

[0270] I / O interface 812 provides an interface between processing component 802 and peripheral interface modules, such as keyboards, click wheels, buttons, etc. These buttons may include but are not limited to: home button, volume button, start button, and lock button.

[0271] The sensor assembly 814 includes one or more sensors for providing various aspects of status assessment for the electronic device 800. For example, the sensor assembly 814 can detect the open / closed state of the device 800, the relative positioning of components, such as the display and keypad of the electronic device 800, and the sensor assembly 814 can also detect the position change of the electronic device 800 or a component of the electronic device 800, the presence or absence of contact between the user and the electronic device 800, the orientation or acceleration / deceleration of the electronic device 800, and the temperature change of the electronic device 800. The sensor assembly 814 may include a proximity sensor configured to detect the presence of nearby objects without any physical contact. The sensor assembly 814 may also include an optical sensor, such as a CMOS or CCD image sensor, for use in imaging applications. In some embodiments, the sensor assembly 814 may also include an accelerometer, a gyroscope sensor, a magnetic sensor, a pressure sensor, or a temperature sensor.

[0272] The communication component 816 is configured to facilitate wired or wireless communication between the electronic device 800 and other devices. The electronic device 800 can access a wireless network based on a communication standard, such as WiFi, 2G or 3G, or a combination thereof. In an exemplary embodiment, the communication component 816 receives a broadcast signal or broadcast-related information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communication component 816 also includes a near field communication (NFC) module to facilitate short-range communication. For example, the NFC module can be implemented based on radio frequency identification (RFID) technology, infrared data association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology and other technologies.

[0273] In an exemplary embodiment, the electronic device 800 may be implemented by one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic components to perform the above methods.

[0274] In an exemplary embodiment, a non-transitory computer-readable storage medium including instructions is also provided, such as a memory 804 including instructions, and the instructions can be executed by a processor 820 of an electronic device 800 to perform the above method. For example, the non-transitory computer-readable storage medium can be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.

[0275] Those skilled in the art will readily appreciate other embodiments of the present invention after considering the specification and practicing the invention disclosed herein. This application is intended to cover any variations, uses or adaptations of the present invention that follow the general principles of the present invention and include common knowledge or customary techniques in the art that are not disclosed in this disclosure. The specification and examples are to be considered exemplary only, and the true scope and spirit of the present invention are indicated by the following claims.

[0276] It should be understood that the present invention is not limited to the exact construction that has been described above and shown in the drawings and that various modifications and changes may be made without departing from the scope thereof. The scope of the present invention is limited only by the appended claims.< / string>

Claims

1. A method for controlling a user interface, characterized in that: Applied to an electronic device, the electronic device comprises a display screen, the display screen comprises: a main display area and an edge display area located at the edge of the main display area; the method comprises: Get the first user interface UI of the area to be displayed; Generate a second UI based on the sizes of the main display area and the edge display area; wherein the second UI includes: a transparent rounded rectangular area and a black area outside the rounded rectangular area; the rounded rectangular area covers the main display area and extends from the main display area to a first edge of the edge display area; the first edge is an edge of the edge display area away from the main display area; the generating the second UI based on the sizes of the main display area and the edge display area includes: generating N second UIs based on the sizes of the main display area and the edge display area; wherein the area of ​​the rounded rectangular area of ​​the n-1th second UI is smaller than the area of ​​the rounded rectangular area of ​​the nth second UI, wherein n is an integer greater than or equal to 1 and less than or equal to N; Based on the rounded rectangular area of ​​the second UI, the first UI is retracted; wherein the display size of the retracted first UI is consistent with the display size of the rounded rectangular area; the retracting the first UI based on the rounded rectangular area of ​​the second UI comprises: based on the mth second UI, retracting the first UI to obtain the mth first UI after retracting; wherein m is a positive integer less than or equal to N; The method comprises: stacking the retracted first UI and the rounded rectangular area of ​​the second UI to generate a third UI; the method comprising: stacking the retracted m-th first UI on the m-th second UI to generate an m-th third UI; Displaying the third UI; displaying the third UI includes: displaying the N third UIs in sequence according to the generation order of the N third UIs.

2. The method according to claim 1, characterized in that The method further comprises: According to the determination strategy, it is determined whether it is necessary to generate the third UI including the indented first UI.

3. The method according to claim 2, characterized in that The determining, according to the determination strategy, whether it is necessary to generate the third UI including the indented first UI includes at least one of the following: If the first UI based on the preset configuration needs to be retracted, determining that the third UI including the retracted first UI needs to be generated; If the first UI does not need to be retracted based on the preset configuration, determining that the third UI including the retracted first UI does not need to be generated; If the number of times of indentation based on the historical display data of the first UI is greater than or equal to a predetermined number, determining that the third UI including the indented first UI needs to be generated; If the number of times of indentation based on the historical display data of the first UI is less than the predetermined number, it is determined that there is no need to generate the third UI including the indented first UI; If a retraction triggering operation is detected within a predetermined time range, it is determined that the third UI including the retracted first UI needs to be generated; If the retraction triggering operation is not detected within a predetermined time range, it is determined that there is no need to generate the third UI including the retracted first UI.

4. The method according to any one of claims 1 to 3, characterized in that: The generating the second UI based on the sizes of the main display area and the edge display area includes: Determining a first arc line based on the lengths of the two adjacent sides of the top angle of the main display area; generating the black area of ​​the second UI based on the area enclosed by the first arc and the two adjacent sides; The rounded rectangular area of ​​the second UI is generated based on an area other than a black area in the main display area and the edge display area.

5. The method according to claim 4, characterized in that The step of generating the black area of ​​the second UI based on the area enclosed by the first arc and the two adjacent sides includes: The pixel parameter value of the area enclosed by the first arc and the two adjacent sides is modified to generate the black area of ​​the second UI.

6. A control device for a user interface, characterized in that: Applied to an electronic device, the electronic device comprises a display screen, the display screen comprises: a main display area and an edge display area located at the edge of the main display area; the device comprises: An acquisition module, used for acquiring a first user interface UI of the area to be displayed; A generating module, configured to generate a second UI based on the sizes of the main display area and the edge display area; wherein the second UI includes: a transparent rounded rectangular area and a black area outside the rounded rectangular area; the rounded rectangular area covers the main display area and extends from the main display area to a first edge of the edge display area; the first edge is an edge of the edge display area away from the main display area; the generating module is configured to generate N second UIs based on the sizes of the main display area and the edge display area; wherein the area of ​​the rounded rectangular area of ​​the n-1th second UI is smaller than the area of ​​the rounded rectangular area of ​​the nth second UI, wherein n is an integer greater than or equal to 1 and less than or equal to N; a retracting module, configured to retract the first UI based on the rounded rectangular area of ​​the second UI; wherein the display size of the retracted first UI is consistent with the display size of the rounded rectangular area; the retracting module is configured to retract the first UI based on the mth second UI to obtain the mth first UI after retracting; wherein m is a positive integer less than or equal to N; A stacking module, used for stacking the rounded rectangular area of ​​the first UI and the second UI after shrinking to generate a third UI; the stacking module is used for stacking the mth first UI after shrinking on the mth second UI to generate the mth third UI; The display module is used to display the third UI; the display module is used to display the N third UIs in sequence according to the generation order of the N third UIs.

7. The device according to claim 6, characterized in that The device also includes: The determination module is used to determine whether it is necessary to generate the third UI including the indented first UI according to a determination strategy.

8. The device according to claim 7, characterized in that The determining module is used for at least one of the following: If the first UI based on the preset configuration needs to be retracted, determining that the third UI including the retracted first UI needs to be generated; If the first UI does not need to be retracted based on the preset configuration, determining that the third UI including the retracted first UI does not need to be generated; If the number of times of indentation based on the historical display data of the first UI is greater than or equal to a predetermined number, determining that the third UI including the indented first UI needs to be generated; If the number of times of indentation based on the historical display data of the first UI is less than the predetermined number, it is determined that there is no need to generate the third UI including the indented first UI; If a retraction triggering operation is detected within a predetermined time range, it is determined that the third UI including the retracted first UI needs to be generated; If the retraction triggering operation is not detected within a predetermined time range, it is determined that there is no need to generate the third UI including the retracted first UI.

9. The device according to any one of claims 6 to 8, characterized in that The generating module is configured to determine a first arc based on the lengths of the two adjacent sides of the top corner of the main display area; and generate the black area of ​​the second UI based on the area enclosed by the first arc and the two adjacent sides; The generating module is further configured to generate the rounded rectangular area of ​​the second UI based on the area other than the black area in the main display area and the edge display area.

10. The device according to claim 9, characterized in that The generating module is used to modify the pixel parameter value of the area enclosed by the first arc and the two adjacent sides to generate the black area of ​​the second UI.

11. An electronic device, characterized in that: include: processor; a memory for storing processor-executable instructions; Wherein, the processor is configured to: implement the user interface control method described in any one of claims 1-5 when running the executable instructions.

12. A computer-readable storage medium, characterized in that: The readable storage medium stores an executable program, wherein the executable program, when executed by a processor, implements the method for controlling a user interface according to any one of claims 1 to 5.

Images