Display method and electronic device

Abstract

The present application provides a display method and an electronic device. The method comprises: mapping the size of an application window to two-dimensional coordinate points; when the size of the application window changes, on the basis of first coordinate points mapped to the window size, determining layout parameters corresponding to second coordinate points that match a current window size; and using the layout parameters corresponding to the second coordinate points as the layout parameters of the window size corresponding to the first coordinate points. Thus, adaptive changes in the interface layout during window size change can be achieved, thereby improve user experience.

Description

Display method and electronic device

[0001] Cross-reference to Related Applications

[0002] This application claims priority to the Chinese Patent Application No. 202410712256.9, filed on June 3, 2024, and entitled "A display method and electronic device", the content of which is incorporated herein by reference in its entirety. TECHNICAL FIELD

[0003] The present application relates to the technical field of terminal, and in particular, to a display method and electronic device. BACKGROUND

[0004] Generally, the display screen of an electronic device can display a window of an application program, and when the size of the window can be adjusted, the window can be understood as a free window. At present, when a user adjusts the size of the free window, the interface layout of the free window needs to be further manually adjusted by the user to adapt to the current window size. Obviously, this way is relatively cumbersome, and the user experience is poor. SUMMARY

[0005] The present application provides a display method and electronic device to enable the interface layout of a free window to be automatically adjusted when the size of the free window is adjusted, without the need for manual operation by the user, thereby improving the user experience.

[0006] In a first aspect, the present application provides a display method, which comprises: first, displaying a first window; then, in response to a first operation of a user on the first window, displaying a second window. The first operation is used to adjust the size of the first window, the size of the second window is different from the size of the first window, and the interface layout of the second window is different from the interface layout of the first window.

[0007] Through the above technical solution, the adaptive change of the interface layout can be automatically realized when the size of the window is adjusted, without the need for manual adjustment by the user, which can reduce the user operation and improve the user experience.

[0008] In a possible implementation, the layout parameters of the interface layout include at least one of the following: font size, font, position, color, transparency, and window border size.

[0009] Through the above technical solution, when the user adjusts the size of the window, at least one of the font size, font, position, color, transparency, and window border size in the interface layout of the window can change with the change of the size of the window, which realizes the adaptive adjustment of the interface layout when the size of the window changes, and can improve the user experience.

[0010] In a possible implementation, the layout parameter of the interface layout of the first window is a first layout parameter, and the layout parameter of the interface layout of the second window is a second layout parameter; and the method further includes: determining the second layout parameter.

[0011] In a possible implementation, determining the second layout parameter can include the following two manners:

[0012] Firstly, a width and a height corresponding to the window size of the second window are mapped to a two-dimensional coordinate point; a target coordinate point that is closest to the two-dimensional coordinate point corresponding to the window size of the second window is determined from a plurality of preset two-dimensional coordinate points, and a layout parameter corresponding to the window size of the target coordinate point is taken as the second layout parameter, wherein the plurality of preset two-dimensional coordinate points are respectively coordinate points corresponding to a plurality of different window sizes.

[0013] Secondly, a width and a height corresponding to the window size of the second window are mapped to a two-dimensional coordinate point; at least one coordinate point whose distance to the two-dimensional coordinate point corresponding to the window size of the second window is within a set range is determined from a plurality of preset two-dimensional coordinate points, wherein the plurality of preset two-dimensional coordinate points are respectively coordinate points corresponding to a plurality of different window sizes; a layout parameter corresponding to the window size of the at least one coordinate point is weighted to obtain a weighted layout parameter, and the weighted layout parameter is taken as the second layout parameter.

[0014] Through the above technical solution, different window sizes can be mapped to different coordinate points in a two-dimensional coordinate system, and then a layout parameter corresponding to a coordinate point matching a current window size can be found in the two-dimensional coordinate system, and the corresponding layout parameter is applied as a layout parameter of a window after the window size is adjusted. In the above two manners, one option is a coordinate point closest to a coordinate point corresponding to a current window size, and the other option is at least one coordinate point whose distance to a coordinate point corresponding to a current window size is within a set range, and then a layout parameter is determined through a weighting method. Compared with the first manner, the second manner can make the layout switching between breakpoints more smooth during window size switching, and can improve user experience.

[0015] In a possible implementation, the second window includes a first control, and a layout parameter of the first control is a third layout parameter; and the method further includes: determining the third layout parameter.

[0016] Through the above technical solution, controls in the same window can use the same layout parameter or different layout parameters. When the layout parameters of different controls in a window are different, the layout parameter of each control needs to be determined.

[0017] In a possible implementation, determining the third layout parameter of the control can include the following two manners:

[0018] The first kind: mapping the position of the first control to a two-dimensional coordinate point; determining a target coordinate point closest to the two-dimensional coordinate point corresponding to the position of the first control in a plurality of preset two-dimensional coordinate points, and taking the corresponding layout parameter of the target coordinate point as the third layout parameter, wherein the plurality of preset two-dimensional coordinate points are coordinate points corresponding to controls in different positions.

[0019] The second kind: mapping the position of the first control to a two-dimensional coordinate point; determining at least one coordinate point within a set range from the two-dimensional coordinate point corresponding to the position of the first control in a plurality of preset two-dimensional coordinate points, wherein the plurality of preset two-dimensional coordinate points are coordinate points corresponding to controls in different positions; weighting the layout parameters corresponding to the at least one coordinate point to obtain a weighted layout parameter, and taking the weighted layout parameter as the third layout parameter.

[0020] Through the above technical solutions, the position of the control can be mapped to a two-dimensional coordinate system, and then the layout parameter corresponding to the coordinate point matched with the position of the current control in the two-dimensional coordinate system is found, and the layout parameter is applied as the layout parameter of the current control. Compared with the above two kinds of ways, the second kind of way can make the layout switching between breakpoints more smooth during the switching process of the window size, and can improve the user experience.

[0021] In a possible implementation, the first window displays first content, and the second window displays second content.

[0022] The interface layout of the second window is different from the interface layout of the first window, including:

[0023] The font size of the first content is different from the font size of the second content; and / or the font of the first content is different from the font of the second content; and / or the position of the first content is different from the position of the second content; and / or the transparency of the first window is different from the transparency of the second window; and / or the window border size of the first window is different from the window border size of the second window.

[0024] Through the above technical solutions, when the interface layout of the window changes, the changes in the font size, font, position, transparency, etc. of the content displayed by the window can be included, and the changes in the window border size and the transparency of the window can also be included, so that the interface layout after the size of the window changes is more adapted to the size of the window, the visual effect of the user is better, and the user experience is better.

[0025] In a possible implementation, the first window is any one of the following windows:

[0026] Any one of the plurality of windows included in the floating window, the split screen interface, the application window displayed on the folding screen electronic device, the application window displayed when the electronic device is in the first state, the first state being a horizontal screen state or a vertical screen state.

[0027] Through the above technical solution, the user can adjust the window size in the scene of the floating window, the split screen, the folding screen, the horizontal and vertical screen state, and then the interface layout of the window is adaptively adjusted with the change of the window size, which can improve the user experience.

[0028] In a second aspect, the present application provides an electronic device, comprising a processor, a memory and one or more computer programs; wherein the one or more computer programs are stored in the one or more memories, and the one or more computer programs comprise instructions which, when invoked to execute by the one or more processors, cause the device to perform the method of the first aspect and any possible design of the first aspect.

[0029] In a third aspect, the present application also provides an electronic device comprising modules / cells for performing the method of the first aspect or any possible design of the first aspect; these modules / cells can be implemented by hardware, or by hardware executing corresponding software.

[0030] In a fourth aspect, the present application also provides a computer readable storage medium, wherein the computer readable storage medium stores instructions, and when the instructions run on an electronic device, cause the electronic device to perform the method of the first aspect and any possible design of the first aspect.

[0031] In a fifth aspect, the present application also provides a computer program product, when the computer program product runs on an electronic device, causes the electronic device to perform the method of the first aspect and any possible design of the first aspect.

[0032] The above-mentioned second aspect to fifth aspect and the technical effects that can be achieved by each aspect are described above with respect to the technical effects that can be achieved by the various possible schemes of the first aspect, which will not be repeated here. BRIEF DESCRIPTION OF DRAWINGS

[0033] FIG. 1 is a schematic diagram of the hardware structure of an electronic device according to an embodiment of the present application;

[0034] FIG. 2 is a schematic diagram of a user interface according to an embodiment of the present application;

[0035] FIG. 3 is a schematic diagram of a two-dimensional coordinate system according to an embodiment of the present application;

[0036] FIG. 4 is a schematic diagram of a user interface according to an embodiment of the present application;

[0037] FIG. 5 is a schematic diagram of a user interface provided by an embodiment of the present application;

[0038] FIG. 6 is a schematic diagram of a user interface provided by an embodiment of the present application;

[0039] FIG. 7 is a schematic diagram of a user interface provided by an embodiment of the present application;

[0040] FIG. 8 is a schematic diagram of a user interface provided by an embodiment of the present application;

[0041] FIG. 9 is a schematic diagram of a technical effect provided by an embodiment of the present application;

[0042] FIG. 10 is a schematic diagram of the structure of another electronic device provided by an embodiment of the present application. DETAILED DESCRIPTION

[0043] The technical solutions in the embodiments of the present application will be described in detail below with reference to the accompanying drawings in the embodiments of the present application.

[0044] First, some terms in the embodiments of the present application will be explained to facilitate understanding by those skilled in the art.

[0045] 1. Free window

[0046] The height and width of a window displayed on a display screen can be freely changed. It can also be understood that the height and width of a window are not fixed. Taking a window displayed on a notebook computer as an example, suppose that a user opens a document on the notebook computer, and the document window can be displayed on the display screen, and the width and / or height of the document window can be changed according to the user's operation (such as the user's dragging operation on the window boundary). Therefore, the document window can be regarded as a free window.

[0047] 2. Breakpoint

[0048] The critical point at which the interface layout and style of an application program change under different screen sizes.

[0049] Currently, when the size of a free window changes, the interface layout of the window needs to be manually adjusted by the user to adapt to the adjusted window size. That is, the interface layout of the window cannot be automatically adjusted as the window size changes. In view of this, the present application provides a display method, which determines the interface layout parameters suitable for the current window size when the size of a free window changes, and then performs interface layout using the determined interface layout parameters, thereby solving the problem that the interface layout cannot be automatically adjusted when the size of a free window changes, and improving the user experience.

[0050] The display method provided in the application can be applied to electronic devices with display screens, such as mobile phones, notebook computers, tablet computers and the like, and embodiments of the application are not limited thereto. The electronic devices involved in the embodiments of the application can be foldable electronic devices, such as foldable mobile phones, foldable tablet computers and the like, and the application is not limited thereto. In addition, exemplary embodiments of the electronic device include, but are not limited to, electronic devices running Harmony or other operating systems.

[0051] In addition, the adaptive layout method of the interface in the embodiments of the application can realize one-time development and multi-terminal deployment, and does not need to be designed separately for the screen characteristics of different terminal devices, can adapt to any multi-category device size, and ensures layout efficiency. In addition, it can be automatically adapted on new devices, which can reduce product adaptation costs.

[0052] First, the application scenarios of the embodiments of the application are introduced. Taking a mobile phone as an example, the free window displayed on the mobile phone can include a window in a split-screen scenario, a window in a floating screen scenario, and a window in a horizontal and vertical screen switching scenario. When the mobile phone is a foldable screen mobile phone, the free window can also include a window in a scenario of the mobile phone in different forms, such as a window in a scenario from a folded state to an unfolded state. Taking a notebook computer as an example, the free window displayed on the notebook computer can include all windows with variable window sizes, such as chat windows, document display windows and the like.

[0053] Next, taking a mobile phone 100 as an example, the structure of the electronic device to which the embodiments of the application are applicable is introduced.

[0054] As shown in FIG. 1, the mobile phone 100 can include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charge management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a loudspeaker 170A, a receiver 170B, a microphone 170C, a headset interface 170D, a sensor module 180, a key 190, a motor 191, an indicator 192, a camera 193, a display screen 194 and the like. The sensor module 180 can include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M and the like.

[0055] The processor 110 can include one or more processing units such as: an application processor (AP), a modem processor, a graphics processing unit (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 can be independent devices or integrated in one or more processors. The controller can be the nerve center and command center of the mobile phone 100. The controller can generate operation control signals according to instruction operation codes and timing signals, and complete the control of fetching and executing instructions. A memory can also be provided in the processor 110 for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory can save instructions or data that the processor 110 has just used or repeatedly uses. If the processor 110 needs to use the instructions or data again, it can directly call them from the memory. This avoids repeated access and reduces the waiting time of the processor 110, thereby improving the efficiency of the system.

[0056] The display screen 194 is configured to display a display interface of an application, 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 (AMOLED), a flexible light-emitting diode (FLED), a Miniled, a MicroLed, a Micro-oLed, a quantum dot light emitting diode (QLED), etc. In some embodiments, the mobile phone 100 can include one or N display screens 194, where N is a positive integer greater than 1. In the embodiments of the present application, the display screen 194 can be configured to display an application window, and the size of the application window is adjustable.

[0057] It can be understood that the components shown in FIG. 1 do not constitute a specific limitation on the mobile phone, and the mobile phone can also include more or fewer components than shown, or combine certain components, or split certain components, or different component arrangements.

[0058] It should be understood that the notebook computer and the tablet computer involved in the embodiments of the present application can also be applicable to the architecture shown in FIG. 1. The examples of electronic devices involved in the following embodiments (such as notebook computers, mobile phones, tablet computers, folding screen mobile phones) are described by taking the architecture shown in the mobile phone 100 shown in FIG. 1 as an example.

[0059] In addition, at least one of the following embodiments includes one or more, wherein the plurality refers to greater than or equal to two. In addition, it should be understood that in the description of the present application, the words "first", "second", etc. are only used for the purpose of distinguishing the description.

[0060] The following describes the display method in the embodiments of the present application by taking the window in different scenarios as an example.

[0061] Scenario 1: window displayed on a notebook computer

[0062] For example, as shown in FIG. 2, it is assumed that the display screen of the notebook computer displays an interface 200, and the interface 200 can include a window 201. When the user adjusts the size of the window 201, the notebook computer can detect the triggering operation of the user, and then adjust the size of the window 201 and the corresponding display page layout. For example, the triggering operation of the user is to adjust the size of the window 201 along the direction of the dashed arrow shown in the figure, and then the notebook computer can detect the dragging operation triggered by the user, and then respond to the dragging operation, such as displaying an interface 210. The interface 210 can include a window 211, and the interface 210 is the interface after adjusting the size of the window. The height and width of the window 211 have changed compared with the window 201. In addition, the corresponding interface layout also changes when the user drags the window 201, that is, the interface layout of the window 211 is not the same as that of the window 201. The interface layout can include a plurality of layout parameters, such as the displayed font size, font, position, color, transparency (interface background transparency or character transparency), window border size, etc. As an example, in the schematic diagram shown in FIG. 2, the font size in the window 211 is larger than that in the window 201. In actual product implementation, it is not limited to the change of the font size, for example, the font and the position can also be changed.

[0063] It should be understood that the width 1, width 2, height 1, and height 2 shown in FIG. 2 are only used to clearly distinguish the changes in the width and height of the window, and in actual product implementation, the text indications of the width and height will not be displayed.

[0064] For convenience of description, the window before resizing is referred to as a first window, and the window after resizing is referred to as a second window in the embodiments of the present application. The process of how the interface layout of the window 211 in the interface 210 is determined is introduced below.

[0065] In some embodiments of the present application, the layout parameters under multiple different sizes of windows can be pre-stored, and a two-dimensional coordinate system is established based on the height and width of the multiple sizes of windows, in which each point represents a window of a height and a width. In actual application, the height and width of the second window can be acquired first, and the coordinate point corresponding to the height and width of the second window is found in the two-dimensional coordinate system, and then the target point closest to the coordinate point is found according to the nearest neighbor search algorithm, and the layout parameters corresponding to the target point under the height and width are used as the layout parameters to be used by the second window.

[0066] As shown in FIG. 3, it is a two-dimensional coordinate diagram of layout parameters provided by the embodiments of the present application. The x-axis can be the width, and the y-axis can be the height. Assuming that p0 is the coordinate point corresponding to the height h0 and the width w0 of the current window (i.e., the second window), p1, p2, and p3 are the two-dimensional coordinate points corresponding to three different sizes of windows, for example, p1 is the coordinate point corresponding to the height w1 and the height h1, p2 is the coordinate point corresponding to the height w2 and the height h2, and p3 is the coordinate point corresponding to the height w3 and the height h3. Then, the coordinate point closest to p0 is found based on p0. Assuming that the distance between p0 and p1 is d2, the distance between p0 and p2 is d1, and the distance between p0 and p3 is d3, and taking the three points shown in the figure as an example, the coordinate point closest to p0 is p2, and then the layout parameters corresponding to the width and the height of the p2 coordinate point are acquired, and the layout parameters corresponding to the width and the height of the p2 coordinate point are used as the layout parameters of the second window, and finally the layout parameters are applied. It should be understood that only three points are taken as an example in FIG. 3, and more or fewer coordinate points corresponding to windows can be included in the embodiments of the present application. It should be understood that the x-axis in the two-dimensional coordinate system can also be the height, and the y-axis can be the width, which is not limited in the present application.

[0067] In some embodiments, the N (N is a positive integer) coordinate points corresponding to the height and width of the second window can be determined in the two-dimensional coordinate system, and then the N coordinate points can be used for weighted calculation, and the weighted calculation result can be used as the layout parameter of the second window. For example, as shown in FIG. 3, it is assumed that the N coordinate points corresponding to the height and width of the second window include p1, p2 and p3. The layout parameters of the three coordinate points can be weighted according to the distances of the three coordinate points from p0 and the layout parameters of the three coordinate points. For example, it is assumed that the layout parameter of p1 is q1, the layout parameter of p2 is q2, and the layout parameter of p3 is q3. The distances of p1, p2 and p3 from p0 are r1, r2 and r3 respectively. Then, the weighted value p is r1*q1+r2*q2+r3*q3. Finally, the weighted layout parameter p can be used as the layout parameter of the second window.

[0068] Compared with the method of searching for the coordinate point with the shortest distance, the weighted method can make the layout switching between breakpoints more smooth during the switching of the window size, thereby improving the user experience.

[0069] It should be understood that the schematic diagram shown in FIG. 3 is used as an example of the different widths and heights of the window as the coordinate points. In the embodiments of the present application, the coordinate points can also be coordinate points corresponding to the layout parameters of different controls. That is, different controls can correspond to different layout parameters on the same interface. For example, it is assumed that p1, p2 and p3 in FIG. 3 are three two-dimensional coordinate points corresponding to three different controls respectively, and p0 is a two-dimensional coordinate point corresponding to a current position control. Then, the coordinate point with the shortest distance from p0 can be determined from p1, p2 and p3, for example, p2. The layout parameter of the control at p2 can be used as the layout parameter corresponding to p0. It can also be understood that the layout parameter of the control corresponding to p0 can apply the layout parameter of the control corresponding to p2.

[0070] Another example is that N (N is a positive integer) coordinate points corresponding to p0 can be determined in the two-dimensional coordinate system, and then the N coordinate points can be used for weighted calculation, and the weighted calculation result can be used as the layout parameter of the control corresponding to p0.

[0071] Scenario 2: split screen scenario

[0072] Taking the mobile phone 100 as an example, a user can trigger a split-screen instruction on the mobile phone 100, and the mobile phone 100 can enter a split-screen interface in response to the split-screen instruction after detecting the split-screen instruction triggered by the user. It should be understood that the specific operation for triggering the split-screen interface is not limited in the embodiments of the present application.

[0073] Taking the split-screen of two applications as an example, in the split-screen interface, a user can adjust the size of the two split-screen windows. For example, as shown in FIG. 4, it is assumed that the mobile phone 100 displays an interface 400, which can be a split-screen interface of application 1 and application 2. For example, the application 1 can be a chat software, and the application 2 can be a shopping software. The interface 400 can include a window 401 of the application 1, a window 402 of the application 2, and a window size adjustment button 403. The user can adjust the size of the window on the interface 400 through the window size adjustment button 403, for example, move the window 401 of the application 1 upwards according to the direction shown in the figure. The mobile phone 100 can display an interface after the movement, for example, an interface 410, in response to the operation. The interface 410 can include a window 411 of the application 1 and a window 412 of the application 2. Compared with the window 401, the height of the window 411 is reduced and the width is unchanged. Compared with the window 402, the height of the window 412 is increased and the width is unchanged. In addition, when the user adjusts the size of the window through the window size adjustment button 403, the window 401 changes to the window 411, and the window 402 changes to the window 412, and the interface layout of the two windows changes. As an example, in the diagram shown in FIG. 4, compared with the window 401, the font size displayed in the window 411 changes, and compared with the window 402, the size of the control displayed in the window 412 changes. In actual product implementation, other layout parameters can also change, which is not limited in the present application.

[0074] It should be understood that the split-screen interface, the window size adjustment button 403, and the like shown in the figure are only an example. In actual product implementation, the interface can also be a left-right split-screen interface, and the window size adjustment button 403 can also have other styles, which are not limited in the present application.

[0075] In some embodiments, for the page layout of the window 411 on the interface 410, the method shown in FIG. 3 introduced in scenario 1 can be used to determine the coordinate point closest to the two-dimensional coordinate point corresponding to the width and height of the window 411 from a plurality of coordinate points corresponding to a plurality of preconfigured window sizes, and then the layout parameter corresponding to the coordinate point closest to the two-dimensional coordinate point is used as the layout parameter of the window 411. Similarly, for the page layout of the window 412, the method shown in FIG. 3 can be used to determine the coordinate point closest to the two-dimensional coordinate point corresponding to the width and height of the window 412 from a plurality of coordinate points corresponding to a plurality of preconfigured window sizes, and then the layout parameter corresponding to the coordinate point closest to the two-dimensional coordinate point is used as the layout parameter of the window 412.

[0076] In some other embodiments, the N coordinate points whose distances are within a preset range can be determined from a plurality of coordinate points corresponding to a plurality of preconfigured window sizes, and then the two weighted layout parameters can be calculated according to the weighting method introduced in scenario 1, and then the two weighted layout parameters are used as the layout parameters of the window 411 and the window 412, respectively. For details, please refer to the description in scenario 1, which will not be repeated here.

[0077] Scenario 3: Suspended screen scenario

[0078] Taking the mobile phone 100 as an example, the user can trigger an instruction to open the suspended screen on the mobile phone 100. After receiving the instruction triggered by the user, the mobile phone 100 can respond to the trigger instruction and enter the interface of the suspended screen. It should be understood that the user operation for triggering the entry into the suspended screen is not limited in the embodiments of the present application.

[0079] As shown in FIG. 5, assuming that the phone 100 displays an interface 500, which can be a home interface, on which the user can trigger a floating screen, for example, the user can trigger the operation of swiping a preset distance along the right edge of the display screen to the left on the home interface 500 along the direction shown in the figure, and the phone 100 can display an interface 510 in response to the triggering operation. The interface 510 can be an application selection interface of the floating screen application, and the interface 510 can include an application selection list 511, in which the user can select an application, for example, the user clicks the memo application, and the phone 100 can display an interface 520 in response to the user's click operation, which is a floating screen interface. The interface 520 can include a floating screen 521, the size of which is adjustable. It should be understood that the floating screen 521 is an application interface of the memo application, which is displayed in the form of a floating screen on the home interface. Assuming that the user adjusts the size of the floating screen 521 according to the direction shown in the figure, for example, the size of the floating screen 521 is enlarged to the size of a floating screen 531 shown in an interface 530. The width and height of the floating screen 521 change compared with the floating screen 531. In addition, the page layout of the floating screen 521 also changes compared with the floating screen 531. As an example, when the window 521 changes to the window 531 in FIG. 5, the font size and font of the content displayed in the window change. In actual product implementation, only the font or the font size can change, or other layout parameters can change, which are not limited.

[0080] In some embodiments, for the page layout of the floating screen 531 on the interface 530, the method shown in FIG. 3 introduced in scenario 1 can be used to determine the two-dimensional coordinate point closest to the coordinate point corresponding to the width and height of the floating screen 531 from a plurality of preconfigured coordinate points corresponding to window sizes, and then the layout parameter corresponding to the closest coordinate point is used as the layout parameter of the floating screen 531.

[0081] In some embodiments, for the page layout of the floating screen 531 on the interface 530, the method shown in FIG. 3 introduced in scenario 1 can be used to determine the two-dimensional coordinate point closest to the coordinate point corresponding to the width and height of the floating screen 531 from a plurality of preconfigured coordinate points corresponding to window sizes, and then the layout parameter corresponding to the closest coordinate point is used as the layout parameter of the floating screen 531.

[0082] Scenario 4: Landscape / portrait screen switching scenario

[0083] Taking the mobile phone 100 as an example, it is assumed that the mobile phone 100 displays an interface 600 in a portrait screen state, for example, the interface 600 can be an interface of a memo application. When the user adjusts the mobile phone 100 from the portrait screen state to a landscape screen state, the mobile phone 100 can display an interface 610. Compared with the interface 600, the height of the memo application interface in the interface 600 can be the width of the memo application interface in the interface 610, and the width of the memo application interface in the interface 600 can be the height of the memo application interface in the interface 610. In addition, in order to adapt to the switching of the screen between the portrait screen and the landscape screen, the interface layout will also change with the change of the width and height of the application interface. As an example, in FIG. 6, when the mobile phone 100 changes from the portrait screen state to the landscape screen state, the positions of the controls displayed in the window change. In actual product implementation, the font or the font size or other layout parameters can also change, which is not limited herein.

[0084] For the interface layout of the interface 610, a two-dimensional coordinate point corresponding to the height and width of the memo application interface of the mobile phone 100 in the landscape screen state can be found in a two-dimensional coordinate system, then a coordinate point closest to the two-dimensional coordinate point corresponding to the height and width of the memo application interface in the landscape screen state can be found in a plurality of preconfigured coordinate points, and the layout parameter corresponding to the closest coordinate point can be used as the layout parameter of the interface layout of the interface 610.

[0085] Alternatively, the two-dimensional coordinate point corresponding to the height and width of the memo application interface of the mobile phone 100 in the landscape screen state can be found in a two-dimensional coordinate system first, then at least one coordinate point whose distance from the two-dimensional coordinate point corresponding to the height and width of the memo application interface in the landscape screen state is within a preset range can be found in a plurality of preconfigured coordinate points, and finally the layout parameters of the at least one coordinate point can be weighted, and the weighted layout parameters can be used as the layout parameters of the interface layout of the mobile phone 100 in the landscape screen state.

[0086] Scenario 5: Scenario in which the folding screen mobile phone is in different forms

[0087] Since the screen size of the foldable-screen mobile phone will be different in different forms, the size of the window displayed on the screen will also be different when the foldable-screen mobile phone is in different forms. For example, as shown in FIG. 7, taking the gallery application as an example, it is assumed that the interface of the gallery application is interface 700 when the mobile phone 100 is in the folded state. When the mobile phone 100 changes from the folded state to the half-folded state, the screen of the mobile phone 100 is larger than that when the mobile phone is in the folded state, and at this time, the interface of the gallery application when the mobile phone 100 is in the half-folded state can be interface 710. Among them, compared with interface 700, the window width of the application interface is wider, and the interface layout also changes with the size of the window. As an example, the position of the control displayed in the window changes in the schematic diagram shown in FIG. 7. In actual product implementation, font or font size or other layout parameters may also change, which is not limited.

[0088] Then, when the mobile phone 100 changes from the half-folded state to the unfolded state, the screen of the mobile phone 100 is larger than that when the mobile phone is in the half-folded state, and at this time, the interface of the gallery application when the mobile phone 100 is in the unfolded state can be interface 720. Among them, compared with interface 710, the window width of the application interface is wider, and the interface layout also changes with the size of the window.

[0089] Among them, the determination method of the layout parameters of the interface layout of interface 710 and interface 720 can also refer to the two methods introduced in scenario 1. For example, taking interface 710 as an example, the two-dimensional coordinate point closest to the width and height of interface 710 can be found in the coordinate system, and then the layout parameters of the coordinate point closest to the distance are taken as the layout parameters of interface 710.

[0090] From the above several specific scenario embodiments, it can be known that different window sizes can be abstracted as different coordinate points in a two-dimensional coordinate system in the present application, and each coordinate point corresponds to a layout parameter of a window size. By finding the layout parameter corresponding to the coordinate point suitable for the window size based on the two-dimensional coordinate point of the window size when the window size changes, and then taking the layout parameter as the layout parameter after the window size changes, the page layout can be adaptively adjusted when the window size changes, and the user experience can be improved.

[0091] As shown in FIG. 8, a display method flowchart provided by an embodiment of the present application is shown. Referring to FIG. 8, the method can include the following steps:

[0092] Step 801, the electronic device displays a first window.

[0093] It should be understood that in the embodiments of the present application, at least one window can be included on the same interface, such as two or more windows in a split screen scenario. In the embodiment shown in FIG. 8, only one window is taken as an example for introduction.

[0094] In some embodiments, a first interface can be displayed on the electronic device, and the first interface can include a first window.

[0095] At step 802, in response to a first operation of the user on the first window, a second window is displayed.

[0096] The size of the second window is different from the size of the first window. For example, the size of the second window can be greater than the size of the first window, or the size of the second window can be less than the size of the first window.

[0097] In some embodiments, the first operation can be a zoom operation on the first window, or can also be a magnification operation on the first window. For example, the first operation can be a drag operation of the finger of the user on the window frame, or can also be an adjustment operation of the mouse of the user on the window size, etc.

[0098] After the size of the first window is adjusted by the user, the interface layout of the first window and the second window is different from each other, in addition to the size. The interface layout can include the font size, font, position, color, transparency (transparency of the interface background or transparency of the word), window frame size, and other layout parameters.

[0099] Taking the notebook computer scenario shown in FIG. 2 as an example, the first window can be the window 201 on the interface 200 shown in the schematic diagram of FIG. 2, the first operation can be the drag operation of the finger of the user shown in the figure, and the second window can be the window 211 on the interface 210. The specific determination process of the interface layout of the window 211 can refer to the detailed introduction in scenario 1, which will not be repeated here.

[0100] In addition, as shown in FIG. 9, the effect of the breakpoint switching achieved by different algorithms in the embodiments of the present application is shown. The effect of the algorithm of the prior art is shown in (a) of FIG. 9, and the effect diagram after the layout parameters obtained by the weighted algorithm in the embodiments of the present application are applied is shown in (b) of FIG. 9. Compared with the prior art, the algorithm of the present application makes the breakpoint switching look smoother, rather than a cliff-like switching. It should be understood that the different filling patterns of the regions in FIG. 9 are only for the purpose of showing the different breakpoints of the interface layout switching.

[0101] It should be noted that all or part of each of the above embodiments provided by the present application can be freely and arbitrarily combined. The combined technical solutions are also within the protection scope of the present application.

[0102] In the embodiments of the present application, the method provided by the embodiments of the present application is introduced from the perspective of the electronic device as an execution subject. To implement each function in the method provided by the embodiments of the present application, the electronic device can include a hardware structure and / or a software module, and implement the above functions in the form of hardware structure, software module, or hardware structure plus software module. Whether a certain function in the above functions is implemented in the form of hardware structure, software module, or hardware structure plus software module depends on the specific application of the technical solution and design constraints.

[0103] As shown in FIG. 10, some other embodiments of the present application disclose an electronic device. Referring to FIG. 10, the electronic device 1000 includes a processor 1001, a memory 1002, a display screen 1003, and one or more computer programs 1004 (not shown in the figure), and the above devices can be connected through one or more communication buses 1005.

[0104] The memory 1002 stores one or more computer programs, and when the instructions are called and executed by the processor 1001, the electronic device 1000 performs the method steps in the above embodiments. The display screen 1003 is used to display the window of the application interface.

[0105] For example, when the instructions are called and executed by the processor 1001, the electronic device 1000 performs the following steps:

[0106] displaying a first window; and in response to a first operation of a user on the first window, displaying a second window, wherein the first operation is used to adjust the size of the first window, the size of the second window is different from the size of the first window, and the interface layout of the second window is different from the interface layout of the first window.

[0107] In the embodiments of the present application, the processor 1001 can be a general-purpose processor, a digital signal processor, an application-specific integrated circuit, a field programmable gate array, or other programmable logic device, a discrete gate or transistor logic device, a discrete hardware component, and can implement or execute the disclosed methods, steps, and logic block diagrams in the embodiments of the present application. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the method disclosed in conjunction with the embodiments of the present application can be directly embodied as hardware processor execution, or executed by a combination of hardware and software modules in the processor. The software module can be located in the memory 1002, and the processor 1001 reads the program instructions in the memory 1002 and combines the hardware to complete the steps of the above method.

[0108] In the embodiments of the present application, the memory 1002 can be a non-volatile memory, such as a hard disk drive (HDD) or a solid-state drive (SSD), and can also be a volatile memory, such as a RAM. The memory can also be any other medium capable of carrying or storing desired program codes in the form of instructions or data structures and capable of being accessed by a computer, but is not limited to this. The memory in the embodiments of the present application can also be a circuit or any other device capable of realizing a storage function, used for storing instructions and / or data.

[0109] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the above-described devices and units can refer to the corresponding processes in the foregoing method embodiments, which will not be described here.

[0110] Based on the above embodiments, the present application further provides a computer storage medium, which stores a computer program. When the computer program is executed by a computer, the computer executes the method provided in the above embodiments.

[0111] The embodiments of the present application also provide a computer program product, which includes instructions that, when executed on a computer, cause the computer to execute the method provided in the above embodiments.

[0112] The embodiments of the present application are described with reference to flowcharts and / or block diagrams according to the methods, devices (systems), and computer program products of the embodiments of the present application. It should be understood that each flow and / or block in the flowcharts and / or block diagrams, and the combination of the flows and / or blocks in the flowcharts and / or block diagrams can be implemented by instructions. These instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing apparatus to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing apparatus produce a device that implements the functions specified in one or more flows in the flowcharts and / or one or more blocks in the block diagrams.

[0113] These computer program instructions can also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to work in a specific manner, so that the instructions stored in the computer-readable memory produce a manufactured product including instruction devices that implement the functions specified in one or more flows in the flowcharts and / or one or more blocks in the block diagrams.

[0114] These computer program instructions can also be loaded into a computer or other programmable data processing devices, so that a series of operational steps are generated to realize the computer-implemented processes, and the instructions executed on the computer or other programmable devices provide steps for realizing the functions specified in one or more flows of the flowchart and / or one or more blocks of the block diagram.

Claims

1. A display method characterized by comprising: The method comprises: displaying a first window; in response to a first operation of a user on the first window, displaying a second window, wherein the first operation is used to adjust the size of the first window, the size of the second window is different from the size of the first window, and the interface layout of the second window is different from the interface layout of the first window.

2. The method of claim 1, wherein, The layout parameters of the interface layout include at least one of: font size, font, position, color, transparency, window border size.

3. The method of claim 1 or 2, wherein, The layout parameters of the interface layout of the first window are first layout parameters, and the layout parameters of the interface layout of the second window are second layout parameters. The method further comprises determining the second layout parameters.

4. The method of claim 3, wherein, The determination of the second layout parameters comprises: mapping the width and height corresponding to the window size of the second window into a two-dimensional coordinate point; determining a target coordinate point closest to the two-dimensional coordinate point corresponding to the window size of the second window in a plurality of preset two-dimensional coordinate points, and taking the layout parameters corresponding to the window size of the target coordinate point as the second layout parameters, wherein the plurality of preset two-dimensional coordinate points are respectively coordinate points corresponding to a plurality of different window sizes.

5. The method of claim 3, wherein, The determination of the second layout parameters comprises: mapping the width and height corresponding to the window size of the second window into a two-dimensional coordinate point; determining at least one coordinate point within a set range from the two-dimensional coordinate point corresponding to the window size of the second window in a plurality of preset two-dimensional coordinate points, wherein the plurality of preset two-dimensional coordinate points are respectively coordinate points corresponding to a plurality of different window sizes; weighting the layout parameters corresponding to the window size of the at least one coordinate point to obtain weighted layout parameters, and taking the weighted layout parameters as the second layout parameters.

6. The method of claim 1 or 2, wherein, The second window includes a first control, and the layout parameters of the first control are third layout parameters. The method further comprises determining the third layout parameters.

7. The method of claim 6, wherein, The determination of the third layout parameters comprises: mapping the position of the first control into a two-dimensional coordinate point; determining a target coordinate point closest to the two-dimensional coordinate point corresponding to the position of the first control in a plurality of preset two-dimensional coordinate points, and taking the corresponding layout parameters of the target coordinate point as the third layout parameters, wherein the plurality of preset two-dimensional coordinate points are respectively coordinate points corresponding to controls at a plurality of different positions.

8. The method of claim 6, wherein, The determination of the third layout parameters comprises: mapping the position of the first control into a two-dimensional coordinate point; determining at least one coordinate point within a set range from the two-dimensional coordinate point corresponding to the position of the first control in a plurality of preset two-dimensional coordinate points, wherein the plurality of preset two-dimensional coordinate points are respectively coordinate points corresponding to controls at a plurality of different positions; weighting the layout parameters corresponding to the at least one coordinate point to obtain weighted layout parameters, and taking the weighted layout parameters as the third layout parameters.

9. The method according to any one of claims 1 to 8, wherein, The first window displays first content, and the second window displays second content; The interface layout of the second window is different from the interface layout of the first window, including: the font size of the first content is different from the font size of the second content; and / or the first content is different from the second content in font; and / or the first content is different from the second content in position; and / or the first window is different from the second window in transparency; and / or the first window is different from the second window in window frame size.

10. The method of any one of claims 1-9, wherein, the first window is any one of the following: a floating window, any one of a plurality of windows included in a split screen interface, an application window displayed on a foldable screen electronic device, an application window displayed when the electronic device is in a first state, the first state being a landscape state or a portrait state.

11. An electronic device, comprising: the electronic device comprises a transceiver; a processor; a memory and one or more computer programs; wherein the one or more computer programs are stored in the one or more memories, and the one or more computer programs comprise instructions that, when invoked to execute by the one or more processors, cause the electronic device to perform the method of any one of claims 1 to 10.

12. A computer-readable storage medium having stored therein instructions, the computer-readable storage medium comprising: the instructions, when executed on the electronic device, cause the electronic device to perform the method of any one of claims 1 to 10.

13. A computer program product, characterised in that, the computer program product, when executed on the electronic device, cause the electronic device to perform the method of any one of claims 1 to 10.

Images