Display method, electronic equipment and readable storage medium

Abstract

The embodiment of the invention provides a display method, electronic equipment and a readable storage medium. In the method, the electronic equipment can adjust the interface layout of the image editing interface displayed in the electronic equipment according to the interface layout of the image editing interface displayed in a reference screen and the size of a display screen of the electronic equipment. By implementing the technical scheme provided by the invention, the image editing interface displayed by the electronic equipment is closer to the effect of displaying the image editing interface in the reference screen, so that a user can conveniently watch the image editing interface.

Description

Technical Field

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

[0002] In order to enrich the video content and increase the interest of the video, users often use image editing applications in electronic devices to edit the video. For example, users can use image editing applications to crop and splice the video, add text and stickers to the video, or add audio to the video. Summary of the invention

[0003] The present application provides a display method, an electronic device, and a readable storage medium. The electronic device can obtain the height of the interface elements of the image editing interface when it is displayed on the reference screen and the size of the electronic device display screen, and then the electronic device can calculate the height of each interface element of the image editing interface when it is displayed on the electronic device display screen according to the above data, and then the electronic device can display the image editing interface according to the calculated interface element height.

[0004] In a first aspect, the present application provides a display method, which is applied to an electronic device, comprising: the electronic device determines a first height, the first height is the height of an editing area in an image editing interface when it is displayed on a display screen of the electronic device, the editing area includes multiple editing options, the image editing interface also includes a preview area, the preview area displays a preview image of a video or photo to be edited, the height of the preview area changes to adapt to the height change of the editing area, and is in an inverse correlation; wherein the ratio of the first height to the second height is equal to the ratio of the height of the display screen of the electronic device to the height of a reference screen, the second height is the height of the editing area in the reference screen when the image editing interface is displayed in the reference screen; the electronic device displays the image editing interface, wherein the height of the editing area in the image editing interface is the first height.

[0005] In combination with the first aspect, in some embodiments, the electronic device determines the first height specifically including: the electronic device calculates a first ratio of the height of the display screen of the electronic device to the height of a reference screen; the electronic device multiplies the first ratio by the second height to obtain the first height.

[0006] In combination with the first aspect, in some embodiments, the electronic device determines the first height, specifically including: the electronic device calculates a second ratio, where the second ratio is the ratio of the second height to the height of a reference screen; the electronic device multiplies the second ratio by the height of the display screen of the electronic device to obtain the first height.

[0007] Among them, the image editing interface may include an editing area and a preview area. The preview area is used to display a preview image of the video or photo to be edited, and the editing area is used to implement one or more functions when editing a video or photo. The height of the preview area will adapt to the height change of the editing area, that is, when the height of the editing area increases, the height of the preview area will decrease; when the height of the editing area decreases, the height of the preview area will increase. The electronic device may store the height of the editing area when the image editing interface is displayed on the reference screen, and the height of the reference screen. Then the electronic device can determine the height of the editing area in the image editing interface when it is displayed on the electronic device display screen according to the above two heights and the height of the electronic device display screen, and this height can also be called the first height. The electronic device determines the first height in two ways: 1. The electronic device can calculate the first ratio of the height of the electronic device display screen to the height of the reference screen, wherein when the electronic device is in a horizontal screen state, the height of the display screen is the length of the short side of the display screen, and when the electronic device is in a vertical screen state, the height of the display screen is the length of the long side of the display screen. Then the electronic device can multiply the first ratio by the height of the editing area in the image editing interface when it is displayed on the reference screen to obtain the first height, wherein the height of the editing area in the image editing interface when it is displayed on the reference screen can also be called the second height. 2. The electronic device may first calculate the ratio of the second height to the height of the reference screen, which ratio may also be referred to as the second ratio, and then the electronic device may multiply the second ratio by the height of the electronic device display screen to obtain the first height. After the electronic device calculates the first height, the height of the preview area in the image editing interface when displayed on the electronic device display screen may be adapted according to the first height. For example, the electronic device may first subtract the height of the editing area from the height of the electronic device display screen, and then subtract the height of other interface elements other than the editing area and the preview area on the display screen, thereby obtaining the height of the preview area.

[0008] It can be seen that the electronic device can obtain the height of the editing area in the image editing interface when displayed on the electronic device display screen based on the height of the editing area in the image editing interface when displayed on the reference screen and the height of the reference screen. The adjusted ratio of the height of the editing area in the image editing interface when displayed on the reference screen to the height of the reference screen is equal to the ratio of the height of the editing area in the image editing interface when displayed on the electronic device display screen to the height of the display screen. In this way, the electronic device can adjust the height of the editing area in the image editing interface when displayed on the display screen according to the height of its own display screen, avoiding the situation where the editing area displays the same height on electronic device displays of different heights, resulting in the adaptation height of the preview area being too high or too low.

[0009] In combination with the first aspect, in some embodiments, the height of the image editing interface is equal to the height of the display screen of the electronic device.

[0010] Among them, the image editing interface being equal to the height of the display screen of the electronic device means that the image editing interface is displayed in full screen on the display screen. In this way, the interface displayed on the display screen of the electronic device does not include the status bar of the system. The electronic device can increase the height of the status bar to the height of the preview area, so that the preview screen in the preview area can be increased accordingly, thereby improving the problem that the preview screen is too small when the image editing interface is displayed on the display screen of the electronic device in some scenarios.

[0011] In combination with the first aspect, in some embodiments, the image editing interface further includes a title bar, the top of the title bar is not lower than the top of the preview area, and the height of the preview area covers part or all of the height of the title bar.

[0012] The top of the area where the title bar is located may not be lower than the top of the area where the preview area is located. Moreover, in the image editing interface, the title bar and the preview area may be two adjacent areas. The height of the preview area covers part or all of the height of the title bar, that is, the area where the preview area is located may partially or completely cover the area where the title bar is located. In this way, when the electronic device display screen displays the preview screen of the preview area, part of the preview screen can be displayed in the area where the title bar is located, which can improve the problem of the preview screen being too small displayed on the electronic device display screen in some scenarios.

[0013] In combination with the first aspect, in some embodiments, the title bar may include one or more of the following: a first control displayed on the left, a second control displayed on the right; the aspect ratio of the preview screen displayed in the preview area does not exceed a third ratio, and the third ratio is greater than or equal to 1.

[0014] In combination with the first aspect, in some embodiments, the third ratio is equal to the ratio of the width of the available horizontal space of the title bar to the third height, the available horizontal space of the title bar is the space between the right border of the first control and the left border of the second control in the title bar, and the third height is greater than or equal to the height of the image editing interface minus the height of the title bar and the height of the editing area.

[0015] When the aspect ratio of the preview screen is greater than 1, the preview screen is a horizontal screen, that is, the horizontal width of the preview screen is longer than the vertical height of the preview screen. When the aspect ratio of the preview screen is less than 1, the preview screen is a vertical screen, that is, the horizontal width of the preview screen is shorter than the vertical height of the preview screen. When the third ratio is 1, it indicates that the electronic device can partially or completely overlap the preview area with the title bar area only when the preview screen is a vertical screen. When the third ratio is greater than 1, the third ratio can be less than or equal to the ratio of the width of the available horizontal space of the title bar to the third height. Figure 1ATaking the embodiment shown as an example, the first control may be a back button, and the second control may be a drop-down menu. Then the available horizontal space of the title bar may be the space between the right border of the back button and the left border of the drop-down menu. Then the width of the available horizontal space of the title bar is equal to the horizontal distance between the right border of the back button and the left border of the drop-down menu. The ratio of the width of the available horizontal space to the third height may be less than the maximum aspect ratio of the preview screen that does not cover the back button and the drop-down menu when the preview area partially or completely overlaps with the title bar.

[0016] In combination with the first aspect, in some embodiments, the electronic device is in a horizontal state.

[0017] Since the preview area is too small due to the low height of the preview area in the horizontal screen state, the electronic device can overlap the preview area and the title bar to increase the height of the preview area when it determines that it is in the horizontal screen state. In the vertical screen state, the preview area is higher, and the preview area does not need to occupy the area where the title bar is located to increase the preview screen. The electronic device can not overlap the preview area and the title bar in the vertical screen state, which avoids the problem that the preview screen in the vertical screen state may block the title bar controls.

[0018] In combination with the first aspect, in some embodiments, the editing area includes multiple editing options, the multiple editing options include a track area and an operation area, the track area includes one or more tracks; the track area and the operation area are arranged in sequence from top to bottom in the image editing interface; the height of the track area changes to adapt to the height change of the operation area, and is in an inversely correlated relationship; after the electronic device determines the first height, the method also includes: the electronic device reduces the height of the operation area.

[0019] In combination with the first aspect, in some embodiments, a tab bar is displayed in the operation area; the method also includes: the electronic device detects a user operation of selecting a first tab from the tab bar, displays a track editing option corresponding to the first tab in the operation area, and cancels the display of the tab bar.

[0020] In combination with the first aspect, in some embodiments, a tab bar and a track editing option are displayed in the operation area; and the electronic device reducing the height of the operation area specifically includes one or more of the following: reducing the height of the track editing option, or reducing the height of the tab bar.

[0021] Among them, after detecting the user operation of selecting the first tag from the tag bar, the electronic device can display the track editing option corresponding to the first tag and cancel the display of the tag bar. The electronic device can also receive the user operation of canceling the display of the track editing option and displaying the tag bar, and then display the tag bar and cancel the display of the track editing option. In this way, the electronic device can increase the height of the track area by reducing the height of the operation area. The operation area displayed by the electronic device can also display the tag bar and the track editing option, that is, the two can be displayed in the image editing interface at the same time. The total height of the track area and the track editing option changes to adapt to the height change of the tag bar, and is in an inversely correlated relationship. The electronic device can achieve the purpose of reducing the height of the operation area by reducing one or more of the track editing option height and the tag bar height in the operation area. Then the electronic device can increase the height of the track area so that the track area displays more tracks. In this way, the user can view more tracks at the same time without operating the track area, thereby improving the user experience.

[0022] In combination with the first aspect, in some embodiments, the method further includes: the electronic device determines that the height of the display screen of the electronic device is greater than or less than the height of the reference screen.

[0023] The electronic device can adjust the height of each area in the image editing interface only when it is determined that the height of the display screen is greater than or less than the height of the reference screen. When the electronic device is in landscape orientation, the height of the electronic device display screen is the length of the short side of the display screen; when the electronic device is in portrait orientation, the height of the electronic device display screen is the length of the long side of the display screen.

[0024] In combination with the first aspect, in some embodiments, the video editing interface displays a third control, and the method also includes: the electronic device receives a downward sliding operation acting on the third control; in response to the downward sliding operation, the electronic device increases the height of the preview area and reduces the height of the track area.

[0025] In combination with the first aspect, in some embodiments, the method also includes: the electronic device receives an upward sliding operation acting on the third control; in response to the upward sliding operation, the electronic device reduces the height of the track area and increases the height of the preview area.

[0026] That is to say, the electronic device can receive and adjust the height of the track area and the preview area in response to user operations to improve the user experience.

[0027] In a second aspect, the present application provides an electronic device, comprising a display screen, a memory, and a processor coupled to the memory; the display screen is used to display an image editing interface, the memory stores a computer program, and when the processor executes the above computer program, the electronic device implements any one of the methods described in the above first aspect.

[0028] In a third aspect, the present application provides a computer-readable storage medium, which stores a computer program or computer instructions, and the aforementioned computer program or computer instructions are executed by a processor to implement any method described in the first aspect above.

[0029] In a fourth aspect, an embodiment of the present application provides a computer program product. When the computer program product is executed by a processor, the method described in any one of the above-mentioned first aspects will be implemented.

[0030] In a fifth aspect, an embodiment of the present application provides a chip, comprising a processor and a memory, wherein the memory is used to store computer programs or computer instructions, and the processor is used to execute the computer programs or computer instructions stored in the memory, so that the chip executes any method described in the first aspect above.

[0031] The solutions provided in the second to fifth aspects are used to implement or cooperate with the corresponding methods provided in the first aspect, and therefore can achieve the same or corresponding beneficial effects as the corresponding methods in the first aspect, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] Figure 1A is an example diagram of an image editing interface displayed in the electronic device 100 provided in an embodiment of the present application;

[0033] Figure 1B , Figure 1C is a comparison diagram of the image editing interface provided by the embodiment of the present application displayed on the electronic device 100 and the electronic device 101;

[0034] Figure 2A is a flow chart of a display method provided by an embodiment of the present application;

[0035] Figure 2B is a comparison diagram of the image editing interface of the electronic device 100 and the electronic device 101 provided in the embodiment of the present application when they are scaled to the same height;

[0036] Figure 2C-2F It is an image editing interface displayed by the electronic device 101 in different scenarios provided by the embodiments of the present application;

[0037] Figure 3A This is an example diagram of an image editing interface when the electronic device provided by an embodiment of the present application cancels display of the status bar;

[0038] Figure 3B is an example diagram of an image editing interface when the electronic device provided by an embodiment of the present application partially overlaps the title bar and the preview area;

[0039] Figure 3CThis is an example diagram showing a horizontal picture in an image editing interface of an electronic device provided in an embodiment of the present application;

[0040] Figure 3D , Figure 3E This is an example diagram of an image editing interface after the height of the operating area of ​​the electronic device provided by the embodiment of the present application is adjusted;

[0041] Figure 4A-4D This is an example diagram of an image editing interface for an electronic device receiving a user operation to adjust the heights of a preview area and a track area provided by an embodiment of the present application;

[0042] Figure 5 is a schematic diagram of the structure of an electronic device 101 provided in an embodiment of the present application;

[0043] Figure 6 It is a schematic diagram of the software structure of the electronic device 101 provided in an embodiment of the present application. DETAILED DESCRIPTION

[0044] The terms used in the following embodiments of the present application are only for the purpose of describing specific embodiments, and are not intended to be used as limitations to the present application. As used in the specification and appended claims of the present application, the singular expressions "one", "a kind of", "said", "above", "the" and "this" are intended to also include plural expressions, unless there is a clear indication to the contrary in the context. It should also be understood that the term "and / or" used in the present application refers to and includes any or all possible combinations of one or more listed items.

[0045] In the following, the terms "first" and "second" are used for descriptive purposes only and are not to be understood as suggesting or implying relative importance or implicitly indicating the number of the indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features, and in the description of the embodiments of the present application, unless otherwise specified, "plurality" means two or more.

[0046] The present application embodiment will relate to an image editing interface, such as Figure 1AAs shown, an image editing interface is displayed in the electronic device 100, and the image editing interface mainly includes a preview area and an editing area. The preview area is used to display a preview screen of the video or image to be edited, and the editing area includes multiple editing options for editing the video or image. Among them, the height of the editing area is an absolute layout in the image editing interface, that is, the physical height of the editing area is equal when the image editing interface is displayed in different electronic devices. The height of the preview area can be a relative layout in the image editing interface, and the above relative layout means that the height of the preview area can be adaptively adjusted according to the height of the display screen and the height of the interface elements in the display screen. Among them, the height of the preview area changes with the change of the height of the editing area, showing an inverse correlation. That is to say, when the height of the editing area increases, the height of the preview area will decrease; when the height of the editing area decreases, the height of the preview area will increase. After the electronic device 100 determines the height of the editing area, it can adapt the height of the preview area according to the value obtained by subtracting the height of the editing area from the height of the electronic device display screen. The above preview area is used to preview the video being edited. When the video is opened in the image editing application, the preview screen can be displayed in the preview area. The multiple editing options included in the editing area can edit the preview area. Furthermore, the image editing interface may also include a title bar. In this case, the height of the preview area further depends on the height occupied by the title bar. The height of the preview area does not exceed the remaining height after deducting the height of the editing area and the height of the title bar from the height of the display screen. Without limitation, the image editing interface may also include more interface elements occupying the height of the display screen (e.g. Figure 1A If there is a play bar as shown in the figure, the electronic device 100 also needs to adjust the height of the preview area according to the height of other interface elements.

[0047] In addition to the image editing interface, the status bar of the system can also be displayed on the display screen of the electronic device 100. The status bar also occupies part of the height of the display screen when displayed, so the electronic device 100 also needs to further adapt the height of the preview area according to the height of the status bar.

[0048] The height of each interface element in the image editing interface can be designed with reference to the vertical screen state of the electronic device 100. When the image editing interface is displayed in electronic devices of other sizes, the height of the preview area is different due to the different heights of the display screens. This will lead to the problem of unreasonable layout of the image editing interface when it is displayed in some electronic devices.

[0049] like Figure 1B As shown, the electronic device 101 is in a horizontal screen state, and the height of the display screen of the electronic device 101 is equal to the length of the short side of the electronic device 101. The length of the short side of the electronic device 101 is lower than the height of the electronic device 101 in the vertical screen state (i.e., the length of the long side of the electronic device 101). Figure 1BIt can be seen that the height of the editing area displayed in the portrait mode of the electronic device 100 is equal to the height of the editing area displayed in the landscape mode of the electronic device 101. Since the height of the display screen of the electronic device 101 in the landscape mode is lower than that of the display screen of the electronic device 101 in the portrait mode, the proportion of the height of the editing area to the height of the electronic device 101 is greater than the proportion of the editing area to the height of the electronic device 100, and the height of the electronic device 101 for displaying the preview area is less, so the size of the preview screen displayed in the preview area is very small, which is not conducive to user viewing.

[0050] like Figure 1C As shown, the electronic device 101 is in a vertical screen state, and the height of the display screen of the electronic device 101 is equal to the length of the long side of the electronic device 101. The length of the long side of the electronic device 101 is higher than the height of the electronic device 100 in the vertical screen state (i.e., the length of the long side of the electronic device 100). Figure 1C It can be seen that the height of the editing area displayed in the portrait state of the electronic device 100 is equal to the height of the editing area displayed in the portrait state of the electronic device 101. Since the height of the display screen of the electronic device 101 in the portrait state is lower than the height of the display screen of the electronic device 100 in the portrait state, the proportion of the height of the editing area to the height of the electronic device 101 is smaller than the proportion of the editing area to the height of the electronic device 100, and the height of the electronic device 101 used to display the preview area is relatively large, so the size of the preview screen displayed in the preview area is too large, which affects the user's viewing experience.

[0051] For the convenience of description and better understanding, the embodiment of the present application takes the electronic device 100 as a mobile phone and the electronic device 101 as a tablet computer as an example to introduce the display method provided by the embodiment of the present application. The electronic device 100 is not limited to being a mobile phone, and the electronic device 100 can also be other types of devices; the electronic device 101 is not limited to being a tablet computer, and the electronic device 101 can also be other types of devices. The embodiment of the present application does not limit the types of the electronic devices 100 and 101.

[0052] In order to solve the problem of unreasonable layout when the image editing interface is displayed in some electronic devices, the embodiment of the present application provides a display method, such as Figure 2A As shown, the method may include but is not limited to the following steps:

[0053] S201. The electronic device determines a first height, where the first height is the height of an editing area in an image editing interface when it is displayed on a display screen of the electronic device, and a height of the preview area is inversely correlated with a height of the editing area.

[0054] Taking the electronic device 101 as an example, the electronic device 101 may determine a first height, where the first height is a height of an editing area in an image editing interface when it is displayed on a display screen of the electronic device 101 .

[0055] The electronic device 101 may store the height of each interface element when the image editing interface is displayed in the electronic device 100, wherein the length unit of the height of the above-mentioned interface element may be device independent pixels (device independent pixels, dp). Among them, device independent pixels, also known as density-independent pixels, are an abstract pixel unit. The electronic device can calculate the actual number of physical pixels in its display screen based on the number of device independent pixels. The display screen of the electronic device 100 in the portrait mode may be referred to as a reference screen. The length of the long side of the electronic device 100 may be referred to as the reference screen height. The height of the editing area in the reference screen when the image editing interface is displayed in the reference screen is referred to as the second height, and the method for the electronic device 101 to determine the first height may include the following two methods:

[0056] Method 1: First height = second height * (height of display screen of electronic device 101 / height of reference screen)

[0057] Method 2: First height = height of display screen of electronic device 101 * (second height / reference screen height)

[0058] Among them, the ratio of the height of the display screen of the electronic device 101 to the reference screen height can be called a first ratio, and the ratio of the second height to the reference screen height can be called a second ratio.

[0059] When the electronic device 101 is in landscape mode, the height of the display screen of the electronic device 101 is equal to the length of the short side of the display screen of the electronic device 101. When the electronic device 101 is in portrait mode, the height of the display screen of the electronic device 101 is equal to the length of the long side of the display screen of the electronic device 101.

[0060] S202. The electronic device displays an image editing interface, wherein the height of the editing area in the image editing interface is a first height, the ratio of the first height to the second height is equal to the ratio of the display screen height to the reference screen height, and the second height is the height of the editing area in the reference screen when the image editing interface is displayed in the reference screen.

[0061] The electronic device 101 can display an image editing interface, wherein the height of the editing area in the image editing interface is equal to the first height. The ratio of the first height to the second height is equal to the ratio of the display screen height to the reference screen height, that is, Figure 2BTaking the horizontal screen state of the electronic device 101 as an example, when the display screen of the electronic device 101 is scaled to be equal to the height of the reference screen, the height of the editing area in the reference screen is equal to the height of the editing area in the display screen of the electronic device 101 after scaling. Furthermore, the electronic device 101 can adapt the height of the preview area displayed in the display screen of the electronic device 101 according to the first height. Among them, the height of the preview area in the display screen of the electronic device 101 can be equal to the height of the display screen of the electronic device 101 minus the first height and the height occupied by other interface elements other than the editing area and the preview area.

[0062] Combination Figure 2A The display method shown is described below. Two application scenarios of the display method are described below.

[0063] Scenario 1: The height of the horizontal screen of the electronic device is lower than the reference screen height.

[0064] like Figure 2C The electronic device 101 is in the horizontal screen state. Figure 2A After the method shown processes the height of the editing area in the image editing interface, a comparison diagram of the image editing interface in the landscape state of the electronic device 101 and the image editing interface in the reference screen is shown. The height of the display screen of the electronic device 101 in the landscape state is the length of the short side of the electronic device 101. The height of the display screen of the electronic device 101 in the landscape state is lower than the reference screen height (i.e., the length of the long side of the electronic device 100). The height of the editing area in the display screen of the electronic device 101 in the landscape state (i.e., the first height) is reduced relative to the height of the editing area in the reference screen. Comparison Figure 1B and Figure 2C It can be seen that after the adjustment, the height of the editing area in the electronic device 101 is reduced, so that the preview area can occupy more height, so that the height of the preview screen is increased, improving the user experience of viewing the preview screen in the horizontal screen state of the electronic device 101.

[0065] like Figure 2D The electronic device 101 is shown in the vertical screen state. Figure 2A After the method shown processes the height of the editing area in the image editing interface, a comparison diagram of the image editing interface in the vertical screen state of the electronic device 101 and the image editing interface in the reference screen. The height of the display screen of the electronic device 101 in the vertical screen state is the length of the long side of the electronic device 101. Among them, the height of the display screen of the electronic device 101 in the vertical screen state is higher than the reference screen height. Figure 2D It can be seen from the figure that the height of the editing area in the display screen of the electronic device 101 in the vertical screen state (ie, the first height) is higher than the height of the editing area in the reference screen. Figure 1C and Figure 2DIt can be seen that after adjustment, the height of the editing area in the electronic device 101 increases, and the height of the preview area decreases. In this way, it can be avoided that the preview screen displayed in the preview area is too large to affect the user's perception, and at the same time, the editing area in the image editing interface can display more editing options for the user to operate.

[0066] Scenario 2: The horizontal screen height of the electronic device is higher than the reference screen height.

[0067] like Figure 2E The electronic device 102 is in the horizontal screen state. Figure 2A After the method shown processes the height of the editing area in the image editing interface, a comparison diagram of the image editing interface of the electronic device 102 in landscape mode and the image editing interface in the reference screen is shown. The electronic device 102 may be a tablet computer, but is not limited to a tablet computer. It may also be other types of devices. The embodiment of the present application does not limit the type of the electronic device 102. The height of the display screen of the electronic device 102 in landscape mode (i.e., the length of the short side of the electronic device 102) is higher than the height of the reference screen. Figure 2E It can be seen that the height of the editing area of ​​the electronic device 102 in the horizontal screen state is higher than the height of the editing area in the reference screen.

[0068] like Figure 2F The electronic device 102 is in the vertical screen state according to Figure 2A After the method shown processes the height of the editing area in the image editing interface, a comparison diagram of the image editing interface in the portrait mode of the electronic device 102 and the image editing interface in the reference screen is shown. The height of the display screen of the electronic device 102 in the portrait mode (i.e., the length of the long side of the electronic device 102) is higher than the height of the reference screen. The height of the editing area in the display screen of the electronic device 101 in the portrait mode is increased relative to the height of the editing area in the reference screen, and the corresponding preview area height is reduced.

[0069] from Figure 2C-2F It can be seen that electronic devices of different sizes can adapt the height of the editing area according to the height of the display screen, so that the ratio of the height of the editing area displayed on the display screen to the height of the display screen is consistent with the ratio of the height of the editing area displayed on the reference screen to the height of the reference screen. In this way, when designing an image editing interface, you only need to design the size of each interface element when the image editing interface is displayed on the reference screen, and it can be applied to electronic devices of different sizes.

[0070] The electronic device can also adjust other interface elements to improve the user's experience of viewing the preview screen and operating the editing options in the editing area. The following takes the electronic device 101 in the horizontal screen state as an example to introduce other contents of the display method.

[0071] In some embodiments, when the electronic device 101 displays the image editing interface, the height of the image editing interface may be the height of the electronic device display screen. In other words, when the electronic device 101 displays the image editing interface, the system status bar may not be displayed. The above status bar is used to display one or more signal strength indicators of mobile communication signals (also referred to as cellular signals), wireless high fidelity (wireless fidelity, Wi-Fi) signal strength indicators, battery status indicators, time indicators, etc.

[0072] like Figure 3A As shown, the height of the image editing interface occupies the entire height of the display screen of the electronic device 101. The electronic device 101 can increase the height occupied by the status bar to the height of the preview area, so that the preview screen can be enlarged while reducing the content irrelevant to video editing in the display screen, thereby improving the user's video editing experience. Optionally, the electronic device 101 can also increase the height occupied by the status bar to the height of the editing area, so that the electronic device 101 can display more editing options for the user to operate.

[0073] In some embodiments, the electronic device 101 may allow the height of the preview area to cover part or all of the height of the title bar. Figure 3B As shown, the title bar may include a back button 301, a drop-down menu 302, and an export button 303. The back button 301 is used to exit the image editing interface, the drop-down menu 302 is used to adjust the resolution of the video or image edited by the image editing application, and the export button 303 is used to export the video. The electronic device may overlap the area where the title bar is located with the preview area so that the top of the preview screen can be displayed in the height area where the title bar is located. In this way, the preview screen displayed by the electronic device 101 is larger, which improves the user's experience when viewing the preview screen. Optionally, since the height of the preview screen of the electronic device 101 in the vertical screen state is relatively large, the electronic device 101 may cover part or all of the height of the title bar with the height of the preview area only in the horizontal screen state.

[0074] In some embodiments, in order to avoid the preview screen covering the buttons in the title bar when the height of the preview area covers part or all of the height of the title bar, the electronic device 101 may cover part or all of the height of the title bar with the height of the preview area only when the aspect ratio of the preview screen does not exceed a third ratio, wherein the aspect ratio may be 1. Figure 3CAs shown, when the aspect ratio of the preview screen exceeds 1, the preview screen is a horizontal frame, and the height of the preview area may not occupy the height of the title bar. Optionally, the above aspect ratio may also be the ratio of the width of the available horizontal space of the title bar to the height of the preview area. The above available horizontal space of the title bar may refer to the space between the right boundary of the back button 301 and the left boundary of the drop-down menu 302 in the title bar. In an embodiment of the present application, the back button 301 may be referred to as a first control, and the drop-down menu 302 may be referred to as a second control. In this way, when the electronic device 101 displays the image editing interface, it can be ensured that the preview screen does not cover the back button 301, the drop-down menu 302, etc.

[0075] In some embodiments, the multiple editing options in the editing area of ​​the image editing interface may include a track area and an operation area. Figure 3D In the illustrated embodiment, the operation area may display a toolbar and a tab bar, wherein the track area, the toolbar, and the tab bar are located at different heights and the track area, the toolbar, and the tab bar are located at different heights in the image editing interface.

[0076] The track area may include one or more tracks. The above tracks are used to display the status of the video picture, audio, etc. at different time points. Exemplarily, the track area may include a video picture track, an audio track, a text track, etc. Exemplarily, the video picture track may display the picture displayed in the video as time goes backward; the audio track may display the amplitude of the audio in the video as time goes by; the text track may display the time when the text appears in the video, etc.

[0077] The toolbar may include one or more buttons corresponding to track editing options, each track editing option being used to edit the track to implement a different function.

[0078] The tab bar is used to filter the track editing options in the toolbar. The electronic device can display the corresponding track editing options in the toolbar according to the selected tab. For example, when the "Clip" tab in the tab bar is selected, buttons corresponding to functions related to video clipping can be displayed in the toolbar.

[0079] The total height of the track area and track editing options changes with the height of the tab bar, showing an inverse correlation. The height of the track area is positively correlated with the above total height. That is, when the height of the tab bar decreases, the total height of the track area and track editing options will increase, and then the height of the track area will increase. At the same time, when the height of the track editing options decreases, the height of the track area will increase. When the height of the track area increases, more tracks can be displayed in the track area.

[0080] Here, the horizontal screen state of the electronic device 102 is taken as an example. In some embodiments, in order to display more tracks in the preview screen, the electronic device 101 can also reduce the height of the toolbar and the tab bar. For example, the electronic device 101 can reduce the size of the button corresponding to the track editing option in the toolbar by proportion A to reduce the height occupied by the toolbar, and / or the electronic device 101 can reduce the size of the label in the tab bar by proportion B to reduce the height occupied by the tab bar. Furthermore, the electronic device 101 can add the reduced height of the toolbar and / or tab bar to the height of the track area, so that the preview screen can display more tracks. Among them, proportion A and proportion B can be the same or different. Optionally, the electronic device 101 can reduce the buttons in the toolbar or the labels in the tab bar when the number of tracks displayed in the track area does not exceed the second threshold. The above-mentioned second threshold can be 3, 4, etc., and the embodiment of the present application does not limit the number of the second threshold.

[0081] In some embodiments, after reducing the height of the toolbar and / or tab bar, the electronic device 101 may also add the reduced height of the toolbar and / or tab bar to the height of the preview area, so that the preview area displays a higher preview image.

[0082] In some embodiments, when the height of the electronic device display screen is higher than the height of the reference plane (for example, the electronic device 102 is in the horizontal screen state), the actual physical size of the button in the toolbar or the label in the tab bar when the image editing interface is displayed on the electronic device display screen will be larger than the actual physical size when it is displayed on the reference screen (i.e., the electronic device 100 display screen). The electronic device can multiply the height of the button in the toolbar by a fourth ratio, wherein the fourth ratio can be equal to the ratio of the actual physical size of the height of the toolbar button when the image editing interface is displayed on the electronic device display screen to the actual physical size of the height of the toolbar button when the image editing interface is displayed on the reference screen. Similarly, the electronic device can multiply the height of the label in the tab bar by a fifth ratio, wherein the fifth ratio can be equal to the ratio of the actual physical size of the height of the tab bar label when the image editing interface is displayed on the electronic device display screen to the actual physical size of the height of the tab bar label when the image editing interface is displayed on the reference screen. The fourth ratio and the fifth ratio can be less than 1. That is to say, the height of the toolbar and the height of the tab bar are reduced. Then the electronic device can adapt the height of the track area according to the reduced height of the toolbar and the tab bar, so that the track area displays more tracks for user operation.

[0083] In some embodiments, in the image editing interface displayed by the electronic device 101, the operation area may only display the toolbar or only display the tab bar. Figure 3EAs shown, the operation area in the image editing area can only display the tab bar. The electronic device can receive and respond to the user's operation of selecting the first tab in the tab bar, display the toolbar, and cancel the display of the tab bar. The button in the toolbar can correspond to the first tab selected by the user. The first tab can be Figure 3E When the operation area in the image editing interface only displays the toolbar or the tab bar, the electronic device can reduce the height of the operation area, thereby increasing the height of the track area, so that more tracks can be displayed in the track area.

[0084] Since the user's requirements for the image editing interface vary when using the image editing application, in some embodiments, the electronic device 101 can also receive user operations to adjust the heights of the track area and the preview area. Figure 4A As shown, taking the horizontal screen state of the electronic device 101 as an example, the image editing interface 400 displayed in the electronic device 101 may include a drag button 401. The drag button 401 is used to adjust the height of the track area and the preview area in the image editing interface 400.

[0085] The electronic device 101 may receive an operation in which the user presses the drag button 401 and drags the x height upward. Figure 4B As shown, in response to this operation, the electronic device 101 can increase the height of the track area by x and reduce the height of the preview area by x. In this way, more track bars can be displayed in the track area at one time for user operation without the need for the user to frequently slide the track area.

[0086] like Figure 4C As shown, the electronic device 101 may receive an operation in which the user presses the drag button 401 and drags the y height downward. Figure 4D As shown, in response to this operation, the electronic device 101 can reduce the height of the track area by y and increase the height of the preview area by y, so that the preview area occupies a larger space in the image editing interface and can display a larger preview screen.

[0087] Among them, the electronic device 101 can change the maximum adjustment value of the track area height and the preview area height according to the height of the image editing interface. Optionally, the maximum adjustment value can be 1 / 2 of the total height of the image editing interface. For example, when the electronic device 101 receives the operation of the user pressing the drag button 401 and dragging the x height upward, if x does not exceed 1 / 2 of the height of the image editing interface (the short side length of the electronic device 101 in the horizontal screen state), the electronic device 101 can increase the height of the track area by x and reduce the height of the preview area by x. If x exceeds 1 / 2 of the height of the image editing interface, the electronic device 101 will no longer continue to increase the track area height / reduce the preview area height after the value of the track area height increase / reduce the preview area height reaches 1 / 2 of the height of the image editing interface. The above-mentioned maximum adjustment values ​​of the track area height and the preview area height are only used as examples and are not limited to the embodiments of the present application.

[0088] When the user operates the track area to edit the video, the height of the track area in the image editing interface can be increased, and the height of the preview area can be reduced, so that more tracks are displayed in the image editing interface for user operation; when the user completes the track operation, the height of the preview area in the image editing interface can be increased. The image editing interface displays a larger preview screen, which is convenient for users to view the effect of video editing. Not limited to the above content, in some embodiments, the image editing interface may also include a play bar, wherein the play bar may display the playback progress of the video, and one or more buttons for controlling the playback of the preview screen in the preview area.

[0089] The display method of the electronic device 101 in the portrait mode and the display methods of other electronic devices can refer to the display method of the electronic device 101 in the landscape mode in the above embodiment, which will not be described in detail here. In the embodiment of the present application, the drag button 401 can also be referred to as the third control.

[0090] Not limited to Figure 4A-4C The drag button 401 shown may also be a control of other types or shapes in some embodiments. The embodiment of the present application does not limit the type and shape of the control used to change the height of the track area and the height of the preview area.

[0091] The following first introduces an exemplary electronic device 101 provided in an embodiment of the present application.

[0092] Figure 5 It is a schematic diagram of the structure of the electronic device 101 provided in an embodiment of the present application.

[0093] The following is a detailed description of the embodiment using the electronic device 101 as an example. It should be understood that the electronic device 101 may have more than Figure 5More or fewer components may be shown, two or more components may be combined, or there may be a different configuration of components. Figure 5 The various components shown in the EMBODIMENTS 2000 may be implemented in hardware, software, or a combination of hardware and software, including one or more signal processing and / or application specific integrated circuits.

[0094] The electronic device 101 may include: a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a camera 193, a display screen 194, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an acceleration sensor 180C, a touch sensor 180D, etc.

[0095] It is understood that the structure illustrated in the embodiment of the present invention does not constitute a specific limitation on the electronic device 101. In other embodiments of the present application, the electronic device 101 may include more or fewer components than shown in the figure, or combine some components, or split some components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0096] The processor 110 may include one or more processing units, for example, the processor 110 may include an application processor (AP), a modem processor, a graphics processor (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.

[0097] The controller may be the nerve center and command center of the electronic device 101. The controller may generate an operation control signal according to the instruction operation code and the timing signal to complete the control of fetching and executing instructions.

[0098] The processor 110 may also be provided with a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory may store instructions or data that the processor 110 has just used or cyclically used. If the processor 110 needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0099] The charging management module 140 is used to receive charging input from a charger, where the charger can be a wireless charger or a wired charger.

[0100] The power management module 141 is used to connect the battery 142, the charging management module 140 and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140 to power the processor 110, the internal memory 121, the external memory, the display screen 194, the camera 193, etc.

[0101] The modem processor may include a modulator and a demodulator. Among them, the modulator is used to modulate the low-frequency baseband signal to be sent into a medium-high frequency signal. The demodulator is used to demodulate the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After the low-frequency baseband signal is processed by the baseband processor, it is passed to the application processor. The application processor outputs a sound signal through an audio device (not limited to a speaker 170A, a receiver 170B, etc.), or displays an image or video through a display screen 194. In some embodiments, the modem processor may be an independent device. In other embodiments, the modem processor may be independent of the processor 110 and be arranged in the same device with other functional modules.

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

[0103] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light emitting diode or an active-matrix organic light emitting diode (AMOLED), a flexible light-emitting diode (FLED), Miniled, MicroLed, Micro-oLed, a quantum dot light-emitting diode (QLED), etc. In some embodiments, the electronic device 101 may include 1 or N display screens 194, where N is a positive integer greater than 1.

[0104] The ISP is used to process the data fed back by the camera 193. The ISP can also perform algorithm optimization on the noise, brightness, and color of the image. The ISP can also optimize the exposure, color temperature, and other parameters of the shooting scene. In some embodiments, the ISP can be set in the camera 193.

[0105] The camera 193 is used to capture still images or videos. In some embodiments, the electronic device 101 may include 1 or N cameras 193, where N is a positive integer greater than 1.

[0106] The digital signal processor is used to process digital signals, and can process not only digital image signals but also other digital signals. For example, when the electronic device 101 is selecting a frequency point, the digital signal processor is used to perform Fourier transform on the frequency point energy.

[0107] Video codecs are used to compress or decompress digital videos. The electronic device 101 may support one or more video codecs. Thus, the electronic device 101 may play or record videos in a variety of coding formats, such as Moving Picture Experts Group (MPEG) 1, MPEG2, MPEG3, MPEG4, etc.

[0108] NPU is a neural network (NN) computing processor. By drawing on the structure of biological neural networks, such as the transmission mode between neurons in the human brain, it can quickly process input information and can also continuously self-learn. Through NPU, applications such as intelligent cognition of electronic device 101 can be realized, such as image recognition, face recognition, voice recognition, text understanding, etc.

[0109] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 101. The external memory card communicates with the processor 110 through the external memory interface 120 to implement a data storage function, such as storing music, video and other files in the external memory card.

[0110] The internal memory 121 can be used to store computer executable program codes, which include instructions. The processor 110 executes various functional applications and data processing of the electronic device 101 by running the instructions stored in the internal memory 121. The internal memory 121 may include a program storage area and a data storage area. Among them, the program storage area may store an operating system, applications required for at least one function (such as face recognition function, fingerprint recognition function, mobile payment function, etc.), etc. The data storage area may store data created during the use of the electronic device 101 (such as face information template data, fingerprint information template, etc.), etc. In addition, the internal memory 121 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc.

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

[0112] The audio module 170 is used to convert digital audio information into analog audio signal output, and also used to convert analog audio input into digital audio signal. The audio module 170 can also be used to encode and decode audio signals.

[0113] The speaker 170A, also called a "speaker", is used to convert an audio electrical signal into a sound signal. The electronic device 101 can listen to music or listen to a hands-free call through the speaker 170A.

[0114] The receiver 170B, also called a "earpiece", is used to convert audio electrical signals into sound signals. When the electronic device 101 receives a call or voice message, the voice can be received by placing the receiver 170B close to the human ear.

[0115] Microphone 170C, also called "microphone" or "microphone", is used to convert sound signals into electrical signals. When making a call or sending a voice message, the user can speak by approaching the microphone 170C with his mouth to input the sound signal into the microphone 170C. The electronic device 101 can be provided with at least one microphone 170C.

[0116] The earphone interface 170D is used to connect a wired earphone and can be a USB interface 130 or a 3.5 mm open mobile terminal platform (OMTP) standard interface or a cellular telecommunications industry association of the USA (CTIA) standard interface.

[0117] The pressure sensor 180A is used to sense the pressure signal and can convert the pressure signal into an electrical signal. In some embodiments, the pressure sensor 180A can be set on the display screen 194. There are many types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, capacitive pressure sensors, etc. The capacitive pressure sensor can be a parallel plate including at least two conductive materials. When a force acts on the pressure sensor 180A, the capacitance between the electrodes changes. The electronic device 101 determines the intensity of the pressure according to the change in capacitance. When a touch operation acts on the display screen 194, the electronic device 101 detects the touch operation intensity according to the pressure sensor 180A. The electronic device 101 can also calculate the touch position according to the detection signal of the pressure sensor 180A. In some embodiments, touch operations acting on the same touch position but with different touch operation intensities can correspond to different operation instructions. For example: when a touch operation with a touch operation intensity less than the first pressure threshold acts on the short message application icon, an instruction to view the short message is executed. When a touch operation with a touch operation intensity greater than or equal to the first pressure threshold acts on the short message application icon, an instruction to create a new short message is executed.

[0118] The gyro sensor 180B can be used to determine the motion posture of the electronic device 101. In some embodiments, the angular velocity of the electronic device 101 around three axes (ie, x, y, and z axes) can be determined by the gyro sensor 180B. The gyro sensor 180B can be used for anti-shake shooting.

[0119] The acceleration sensor 180C can detect the magnitude of the acceleration of the electronic device 101 in all directions (generally three axes). When the electronic device 101 is stationary, the magnitude and direction of gravity can be detected. It can also be used to identify the posture of the electronic device and is applied to applications such as horizontal and vertical screen switching and pedometers.

[0120] The electronic device 101 can measure the rotation angle of the electronic device 101 in various directions according to the acceleration sensor 180C, and then determine whether the electronic device 101 is in a horizontal or vertical state. Finally, the electronic device 101 can adapt the size of each part in the image editing interface according to its own horizontal or vertical state. It is not limited to determining the horizontal or vertical state through the acceleration sensor 180C. In some embodiments, the electronic device 101 can also determine the horizontal or vertical state through the gyroscope sensor 180B. The method for determining the horizontal or vertical state of the electronic device 101 in the embodiment of the present application is not limited.

[0121] The touch sensor 180D is also called a "touch panel". The touch sensor 180D can be set on the display screen 194, and the touch sensor 180D and the display screen 194 form a touch screen, also called a "touch screen". The touch sensor 180D is used to detect touch operations acting on or near it. The touch sensor can pass the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through the display screen 194. In other embodiments, the touch sensor 180D can also be set on the surface of the electronic device 101, which is different from the position of the display screen 194.

[0122] The structure of the electronic device 102 can be referred to the electronic device 101 and will not be described in detail here.

[0123] Figure 6 It is a software structure block diagram of the electronic device 101 according to an embodiment of the present application.

[0124] The layered architecture divides the software into several layers, each with clear roles and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the system is divided into four layers, from top to bottom, namely the application layer, the application framework layer, the runtime and system library, and the kernel layer. The application layer can include a series of application packages.

[0125] like Figure 6 As shown, the application package may include applications (also referred to as applications) such as gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, image editing applications, etc.

[0126] The application framework layer provides an application programming interface (API) and a programming framework for the applications in the application layer. The application framework layer includes some predefined functions.

[0127] like Figure 6As shown, the application framework layer may include a window manager, a content provider, a view system, a phone manager, a resource manager, a notification manager, and the like.

[0128] The window manager is used to manage window programs. The window manager can obtain the display screen size, determine whether there is a status bar, lock the screen, capture the screen, etc.

[0129] Content providers are used to store and retrieve data and make it accessible to applications. The data may include videos, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.

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

[0131] The phone manager is used to provide communication functions for the electronic device 101, such as management of call status (including connecting, hanging up, etc.).

[0132] The resource manager provides various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.

[0133] The notification manager enables applications to display notification information in the status bar. It can be used to convey notification-type messages and can disappear automatically after a short stay without user interaction. For example, the notification manager is used to notify download completion, message reminders, etc. The notification manager can also be a notification that appears in the system top status bar in the form of a chart or scroll bar text, such as notifications from applications running in the background, or a notification that appears on the screen in the form of a dialogue interface. For example, a text message is displayed in the status bar, a prompt sound is emitted, an electronic device vibrates, an indicator light flashes, etc.

[0134] The runtime includes the core library and the virtual machine. The runtime is responsible for the scheduling and management of the system.

[0135] The core library consists of two parts: one part is the function that the programming language (for example, Java language) needs to call, and the other part is the core library of the system.

[0136] The application layer and the application framework layer run in a virtual machine. The virtual machine executes the programming files (e.g., java files) of the application layer and the application framework layer as binary files. The virtual machine is used to perform functions such as object life cycle management, stack management, thread management, security and exception management, and garbage collection.

[0137] The system library may include multiple functional modules, such as surface manager, media library, 3D graphics processing library (such as OpenGL ES), 2D graphics engine (such as SGL), etc.

[0138] The surface manager is used to manage the display subsystem and provides the fusion of two-dimensional (2D) and three-dimensional (3D) layers for multiple applications.

[0139] The media library supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc. The media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.

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

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

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

[0143] The electronic device 101 can obtain the length of the long side and the short side of the display screen through the window manager, and the sensor driver in the electronic device 101 can determine the horizontal and vertical screen state of the electronic device 101 according to the data obtained by the acceleration sensor. Furthermore, the electronic device 101 can calculate the height of each area of ​​the image editing interface according to the first template. The first template can be stored in the internal memory of the electronic device 101. Each area and control in the image editing interface corresponds to a view in the view system. For example, the preview area in the image editing interface corresponds to a view, and the preview screen displayed in the preview area corresponds to a subview in the above view. The electronic device 101 can display the image editing interface through the view system.

[0144] For an introduction to the software structure of electronic device 102 , reference may be made to electronic device 101 , which will not be repeated here.

[0145] The image editing interface described in the embodiments of the present application is only an example interface and does not limit the present application. In other embodiments, the image editing interface may include more or fewer areas, may include more or fewer controls, and may add or reduce other functional options, as long as they are based on the same inventive concept provided by the present application, they are all within the scope of protection of the present application.

[0146] As described above, the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present application.

[0147] As used in the above embodiments, the term "when..." may be interpreted to mean "if..." or "after..." or "in response to determining..." or "in response to detecting...", depending on the context. Similarly, the phrases "upon determining..." or "if (the stated condition or event) is detected" may be interpreted to mean "if determining..." or "in response to determining..." or "upon detecting (the stated condition or event)" or "in response to detecting (the stated condition or event)", depending on the context.

[0148] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in the embodiment of the present application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions can be transmitted from a website site, computer, server or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line) or wireless (e.g., infrared, wireless, microwave, etc.) mode to another website site, computer, server or data center. 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 contains one or more available media integration. The available medium can be a magnetic medium, (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state hard disk), etc.

[0149] Those skilled in the art can understand that to implement all or part of the processes in the above-mentioned embodiments, the processes can be completed by computer programs to instruct related hardware, and the programs can be stored in computer-readable storage media. When the programs are executed, they can include the processes of the above-mentioned method embodiments. The aforementioned storage media include: ROM or random access memory RAM, magnetic disk or optical disk and other media that can store program codes.

Claims

1. A display method, which is applied to an electronic device, characterized in that: include: The electronic device determines a first height, the first height being the height of an editing area in an image editing interface when it is displayed on a display screen of the electronic device, the image editing interface further comprising a preview area, the preview area displaying a preview image of a video or photo to be edited, the height of the preview area changing to adapt to a height change of the editing area, in an inversely correlated relationship; The ratio of the first height to the second height is equal to the ratio of the height of the display screen of the electronic device to the height of the reference screen, and the second height is the height of the editing area in the reference screen when the image editing interface is displayed in the reference screen; The electronic device displays the image editing interface, wherein the height of the editing area in the image editing interface is the first height.

2. The method according to claim 1, characterized in that The electronic device determines a first height, specifically comprising: The electronic device calculates a first ratio of a height of a display screen of the electronic device to a height of the reference screen; The electronic device multiplies the first ratio by the second height to obtain the first height.

3. The method according to claim 1 or 2, characterized in that: The electronic device determines a first height, specifically comprising: The electronic device calculates a second ratio, where the second ratio is a ratio of the second height to the height of the reference screen; The electronic device multiplies the second ratio by the height of the display screen of the electronic device to obtain the first height.

4. The method according to any one of claims 1 to 3, characterized in that: The height of the image editing interface is less than or equal to the height of the display screen of the electronic device.

5. The method according to any one of claims 1 to 4, characterized in that: The image editing interface also includes a title bar, the top of the title bar is not lower than the top of the preview area, and the height of the preview area covers part or all of the height of the title bar.

6. The method according to claim 5, characterized in that The title bar includes one or more of the following: a first control displayed on the left, a second control displayed on the right; the aspect ratio of the preview image displayed in the preview area does not exceed a third ratio, and the third ratio is greater than or equal to 1.

7. The method according to claim 6, characterized in that The third ratio is equal to the ratio of the width of the available horizontal space of the title bar to the third height, the available horizontal space of the title bar is the space between the right border of the first control and the left border of the second control in the title bar, and the third height is greater than or equal to the height of the image editing interface minus the height of the title bar and the height of the editing area.

8. The method according to any one of claims 5 to 7, characterized in that: The electronic device is in a horizontal screen state.

9. The method according to any one of claims 1 to 8, characterized in that: The editing area includes a plurality of editing options, the plurality of editing options include a track area and an operation area, the track area includes one or more tracks; the track area and the operation area are arranged in sequence from top to bottom in the image editing interface; the height of the track area changes in accordance with the height of the operation area, and is in an inversely correlated relationship; After the electronic device determines the first height, the method further includes: the electronic device reducing the height of the operating area.

10. The method according to claim 9, characterized in that A tab bar is displayed in the operation area; the method further includes: the electronic device detects a user operation of selecting a first tab from the tab bar, displays a track editing option corresponding to the first tab in the operation area, and cancels the display of the tab bar.

11. The method according to claim 9, characterized in that The operation area displays a label bar and a track editing option; the electronic device reducing the height of the operation area specifically includes one or more of the following: reducing the height of the track editing option, or reducing the height of the label bar.

12. The method according to any one of claims 1 to 11, characterized in that: The method also includes: the electronic device determining that the height of the display screen of the electronic device is greater than or less than the height of the reference screen.

13. The method according to any one of claims 1 to 12, characterized in that: The video editing interface displays a third control, and the method further includes: The electronic device receives a downward sliding operation on the third control; In response to the downward sliding operation, the electronic device increases the height of the preview area and decreases the height of the track area.

14. The method according to claim 13, characterized in that The method further comprises: The electronic device receives an upward sliding operation on the third control; In response to the upward sliding operation, the electronic device reduces the height of the preview area and increases the height of the track area.

15. An electronic device, characterized in that: The electronic device comprises: a display screen, a memory and a processor coupled to the memory; the display screen is used to display an image editing interface, the memory stores a computer program, and when the processor executes the computer program, the electronic device implements the method as described in any one of claims 1 to 14.

16. A computer-readable storage medium comprising computer instructions, characterized in that: When the computer instructions are executed on an electronic device, the electronic device is caused to execute the method according to any one of claims 1 to 14.

Images