CN117667274A

CN117667274A - Method and apparatus for displaying user interface

Info

Publication number: CN117667274A
Application number: CN202211045233.4A
Authority: CN
Inventors: 钱坤
Original assignee: Huawei Technologies Co Ltd
Current assignee: Huawei Technologies Co Ltd
Priority date: 2022-08-30
Filing date: 2022-08-30
Publication date: 2024-03-08
Also published as: WO2024046041A1

Abstract

The application provides a method and equipment for displaying a user interface, wherein the electronic equipment lays out the user interface of an application program according to a second width smaller than the width of a display area and a second height higher than the height of the display area so as to increase the content of the layout, and the canvas is adjusted so that the display screen of the electronic equipment displays the user interface in left and right parts (namely, the user interface is displayed in a double page mode), so that the content displayed by the electronic equipment is increased, and the user experience is improved.

Description

Method and apparatus for displaying user interface

Technical Field

The present disclosure relates to the field of terminal technologies, and in particular, to a method and an apparatus for displaying a User Interface (UI).

Background

At present, when the gesture of large-screen electronic equipment such as a tablet, a folding mobile phone and the like changes, for example, the tablet is switched from a vertical screen display to a horizontal screen display, or the folding mobile phone is switched from a folding state to an unfolding state, the width of a display area for displaying contents is increased, and an application program is rearranged according to the width of the display area, so that the display contents are enlarged, and the information quantity of the contents displayed on a screen is reduced.

Disclosure of Invention

The application provides a method and equipment for displaying a user interface, which are used for enabling the user interface to be displayed in a double-page mode when the gesture of electronic equipment is changed and switched to be displayed in a wide screen mode, so that the content of the display of the electronic equipment is increased, and the user experience is improved.

In a first aspect, the present application provides a method for displaying a user interface, applied to an electronic device, the method being implementable by the electronic device, including: when the first aspect ratio of the display screen of the electronic equipment is in a preset threshold value interval, a layout view is obtained according to the user interface of the second width and the second height layout application program; the layout view comprises a first part and a second part, the width of the first part and the width of the second part are equal to the second width, the first part is positioned above the second part, and the sum of the heights of the first part and the second part is smaller than or equal to the second height; the second width is smaller than the first width, the first width is the width of a window, and the window is used for displaying a user interface; the second height is greater than the first height, and the first height is the height of the window; the canvas is adjusted so that the left half of the window displays a first part and the right half of the window displays a second part; wherein the canvas is used to draw the user interface. According to the electronic device, the user interfaces of the application programs are arranged according to the second width smaller than the width of the display area and the second height higher than the height of the display area, so that the content of the arrangement is increased, and the canvas is adjusted, so that the display screen of the electronic device is divided into left and right parts to display the user interfaces (namely, the user interfaces are displayed in a double page mode), the content quantity displayed by the electronic device is increased, and the user experience is improved.

In one possible implementation, the adjusting canvas includes: the canvas is translated and/or cut so that the first canvas is positioned at the left half part of the window and the second canvas is positioned at the right half part of the window; wherein the first canvas is a portion of the canvas for drawing the first portion and the second canvas is a portion of the canvas for drawing the second portion.

In one possible implementation manner, before the user interface of the application program is laid out according to the second width and the second height, the method further includes: and when the first aspect ratio of the display screen is in the threshold interval, modifying the width of the display screen acquired by the application program to be a second width so that the element size in the user interface is smaller than or equal to the first size, wherein the first size is the element size of the user interface displayed under the second aspect ratio of the display screen, and the second aspect ratio is smaller than the first aspect ratio. Therefore, when the electronic equipment is switched to the wide screen display, if the electronic equipment is switched from the vertical screen display to the horizontal screen display or from the folded state display to the unfolded state display, the size of the displayed user interface element is kept unchanged or slightly smaller, and the user interface is displayed in double-sided mode, so that the content of the display can be effectively increased, and the user experience is improved.

In one possible implementation manner, after obtaining the layout view, the method further includes: traversing the elements in the user interface, and judging whether a first element exists or not; the top coordinate value of the first element is smaller than the first height, and the bottom coordinate value is larger than the first height; determining an offset and an offset direction when a first element is present, such that the first element is displayed entirely in a left half or a right half of the window; the offset and the offset direction are provided to the application. By traversing the user interface elements which are possibly cracked and providing the offset and the offset direction to the application program, the elements in the user interface can be completely displayed without being cracked even though the elements are adjusted by canvas, so that the user experience can be further improved.

In one possible implementation manner, after adjusting the canvas so that the left half of the window displays the first portion and the right half of the window displays the second portion, the method further includes: sensing a click event of the user interface; mapping the click event from the first location to the second location; the first position is the position of the click event in the right half part of the display screen, and the second position is the position of the first position which is shifted leftwards by a second width and downwards by a first height. The electronic device can still be enabled to respond if the user interface displayed in the right half is clicked.

In one possible implementation manner, before the user interface of the application program is laid out according to the second width and the second height, the method further includes: setting a first area at the left half part of the window; the first area is used for displaying fixed content; information of the first area is provided to the application. The user interface of the application program can be fixed in half content and slide in half content when the user interface of the application program is displayed on the two sides, so that application requirements of more application program providers are met, and user experience is further improved.

In one possible implementation manner, the method for displaying a user interface further includes: setting a second area on the left half part of the window, wherein the second area is positioned below the first area, and the content displayed in the second area is associated with the content displayed in the right half part of the window; information of the second area is provided to the application. The user interface layout of the application program can meet more requirements, and user experience is further improved.

In one possible implementation manner, the foregoing layout of the user interface of the application program according to the second width and the second height, to obtain a layout view, further includes: laying out a user interface containing a navigation bar according to the second width and the second height to obtain a layout view containing a navigation bar view; the navigation bar view is located below the second portion; the sum of the navigation bar view and the heights of the first part and the second part is less than or equal to the second height; for example, the second height is equal to 2×h_screen-3×h_b, where h_screen is the first height and h_b is the height of the navigation bar. The canvas is adjusted to enable the left half part of the window to display the first part and the right half part of the window to display the second part, and the canvas comprises the following components: through adjusting the canvas, the navigation bar view is displayed below the first part and the second part in the window, and user experience is further improved.

In one possible implementation, the adjusting the canvas to cause the navigation bar view to be displayed in the window below the first portion and the second portion includes: the navigation bar view is displayed in the window below the first portion and the second portion by zooming in on the third canvas. For example, the height and width of the third canvas are enlarged twice.

In a second aspect, the present application provides a method for displaying a user interface, applied to an electronic device, including: receiving an offset and an offset direction; a layout rule is formulated according to the offset and the offset direction; and laying out the user interface according to the layout rule so that the user interface is displayed in a left part and a right part in a display screen of the electronic equipment, and the elements in the user interface are kept complete. The method is suitable for processing elements which are possibly cracked in the method, so that the elements in the user interface are not cracked.

In a third aspect, the present application provides a method for displaying a user interface, applied to an electronic device, including: receiving information of a first area; setting a layout rule according to the information of the first area; and laying out the user interface according to the layout rule so that the user interface is displayed in a left part and a right part in a display screen of the electronic device, and the content in the first area is fixed. The method is suitable for setting the fixed area in the method and is used for improving user experience.

In one possible implementation manner, the method for displaying a user interface further includes: receiving information of a second area; setting a layout rule according to the information of the second area; and laying out the user interface according to the layout rule so as to enable the content displayed in the second area to be associated with the content of the right part of the user interface, thereby further improving user experience.

In a fourth aspect, the present application provides an apparatus for displaying a user interface, applied to an electronic device, including: layout module and display module. The layout module is used for obtaining a layout view according to the user interface of the second width and the second height layout application program when the first aspect ratio of the display screen of the electronic device is in a preset threshold value interval; the layout view comprises a first part and a second part, the width of the first part and the width of the second part are equal to the second width, the first part is positioned above the second part, and the sum of the heights of the first part and the second part is smaller than or equal to the second height; the second width is smaller than the first width, the first width is the width of a window, and the window is used for displaying a user interface; the second height is greater than the first height, and the first height is the height of the window; the display module is used for enabling the left half part of the window to display the first part and the right half part of the window to display the second part by adjusting the canvas; wherein the canvas is used to draw the user interface.

In one possible implementation manner, the display module is further configured to: the canvas is translated and/or cut so that the first canvas is positioned at the left half part of the window and the second canvas is positioned at the right half part of the window; wherein the first canvas is a portion of the canvas for drawing the first portion and the second canvas is a portion of the canvas for drawing the second portion.

In one possible implementation manner, the apparatus further includes: and the modifying module is used for modifying the width of the display screen acquired by the application program into a second width when the first aspect ratio of the display screen is in a threshold interval before the layout module obtains the layout view according to the second width and the second height, so that the element size in the user interface is smaller than or equal to the first size, the first size is the element size displayed by the user interface under the second aspect ratio of the display screen, and the second aspect ratio is smaller than the first aspect ratio.

In one possible implementation manner, the apparatus further includes: the system comprises a traversing module, an offset determining module and a first providing module, wherein the traversing module is used for traversing elements in a user interface after the layout module obtains a layout view according to a user interface of the application program with a second width and a second height, and judging whether the first elements exist or not; the top coordinate value of the first element is smaller than the first height, and the bottom coordinate value is larger than the first height; the offset determining module is used for determining an offset and an offset direction so that the first element is integrally displayed on the left half part or the right half part of the window; the first providing module is used for providing the offset and the offset direction to the application program.

In one possible implementation manner, the apparatus further includes: the sensing module is used for sensing click events of the user interface after the display module enables the left half part of the window to display the first part and the right half part of the window to display the second part by adjusting the canvas; the mapping module is used for mapping the click event from the first position to the second position; the first position is the position of the click event in the right half part of the display screen, and the second position is the position of the first position which is shifted leftwards by a second width and downwards by a first height.

In one possible implementation manner, the apparatus further includes: the first setting module is used for setting a first area at the left half part of the window before the layout module obtains a layout view according to the user interface of the application program with the second width and the second height; the first area is used for displaying fixed content; the second providing module is used for providing information of the first area to the application program.

In one possible implementation manner, the apparatus further includes: the second setting module is used for setting a second area at the left half part of the window, the second area is positioned below the first area, and the content displayed in the second area is associated with the content displayed in the right half part of the window; the second providing module is used for providing information of the second area to the application program.

In one possible implementation, the layout module is further configured to: laying out a user interface containing a navigation bar according to the second width and the second height to obtain a layout view containing a navigation bar view; the navigation bar view is located below the second portion; the sum of the navigation bar view and the heights of the first portion and the second portion is less than or equal to the second height. The display module is further used for: by adjusting the canvas, the navigation bar view is displayed in the window below the first portion and the second portion.

In one possible implementation manner, the display module is further configured to: by zooming in on the third canvas, the navigation bar view is displayed in the window below the first and second portions, e.g., by zooming in twice the height and width of the third canvas.

In a fifth aspect, the present application provides an apparatus for displaying a user interface, applied to an electronic device, including: the system comprises a receiving module, a rule executing module and a layout module, wherein the receiving module is used for receiving offset and offset direction; the rule execution module is used for making a layout rule according to the offset and the offset direction; the layout module is used for laying out the user interface according to the layout rules so that the user interface is displayed in a left part and a right part in a display screen of the electronic equipment, and elements in the user interface are kept complete.

In a sixth aspect, the present application provides an apparatus for displaying a user interface, applied to an electronic device, including: the first receiving module is used for receiving the information of the first area; the first rule module is used for formulating a layout rule according to the information of the first area; the first layout module is used for laying out the user interface according to the layout rule, so that the user interface is displayed in a display screen of the electronic device in a left part and a right part, and the content in the first area is fixed.

In one possible implementation manner, the apparatus further includes: the second receiving module is used for receiving information of a second area; the second rule module is used for formulating a layout rule according to the information of the second area; the second layout module is used for laying out the user interface according to the layout rules so that the content displayed in the second area is associated with the content of the right part of the user interface.

In a seventh aspect, the present application provides an electronic device, including the apparatus of any one of the fourth to sixth aspects.

In an eighth aspect, the present application provides a computer readable storage medium having a computer program stored therein, which when run on a computer causes the computer to perform the method of any one of the first to third aspects.

In a ninth aspect, the present application provides a computer program for performing the method of any one of the first to third aspects when the computer program is executed by a computer.

In one possible design, the program in the ninth aspect may be stored in whole or in part on a storage medium packaged with the processor, or in part or in whole on a memory not packaged with the processor.

Drawings

Fig. 1a is a view of a folding mobile phone in an unfolded state according to an embodiment of the present application;

fig. 1b is a view of a folding mobile phone in a folding process or unfolding process according to an embodiment of the present application;

fig. 1c is a schematic structural diagram of an electronic device according to an embodiment of the present application;

FIG. 2 is a schematic diagram showing the effect of switching the electronic device from the folded state to the unfolded state;

Fig. 3 is a schematic diagram showing an effect of switching an electronic device from a folded state to an unfolded state according to an embodiment of the present application;

FIG. 4 is a schematic diagram of an APP user interface in a layout and drawing process according to an embodiment of the present application;

FIG. 5a is a flow chart of a method for displaying a user interface according to an embodiment of the present application;

FIG. 5b is a schematic layout diagram of the content to be displayed according to the embodiment of the present application;

FIG. 5c is a schematic diagram of a display area in a screen for displaying content to be displayed according to an embodiment of the present application;

FIG. 5d is a schematic diagram of a cut canvas in an embodiment of the present application;

FIG. 5e is another schematic diagram of a cut canvas in an embodiment of the present application;

fig. 5f is a schematic diagram showing a display effect of an electronic device in an unfolded state without using the technical scheme in the embodiment of the present application;

FIG. 5g is a schematic view showing a display effect of an electronic device in an unfolded state using a method for displaying a user interface according to an embodiment of the present application;

FIG. 5h is a schematic diagram showing the unchanged length and width characteristics of the UI element in the embodiment of the application;

fig. 5i is a schematic flow chart of the electronic device in the embodiment of the present application when the electronic device is switched between the unfolded state and the folded state;

FIG. 5j is a schematic diagram of a UI element with a variable length and width in an embodiment of the application;

FIG. 6a is a flow chart of a mapping in a method for displaying a user interface provided in an embodiment of the present application;

FIG. 6b is a mapping diagram of a click event in an embodiment of the present application;

FIG. 7a is a schematic diagram of a layout of an APP user interface in an embodiment of the present application;

FIG. 7b is a diagram of the APP user interface canvas of FIG. 7a after adjustment in accordance with an embodiment of the present application;

FIG. 7c is a diagram showing another display effect of the display screen according to the embodiment of the present application;

FIG. 7d is a schematic diagram of a process flow of clicking events in an embodiment of the present application;

FIG. 8a is a flow chart illustrating another method for displaying a user interface according to an embodiment of the present application;

FIG. 8b is a schematic diagram of a drawing result in an embodiment of the present application;

FIG. 8c is a schematic diagram of another layout result according to an embodiment of the present application;

FIG. 8d is a diagram of another display effect of the display screen according to the embodiment of the present application;

FIG. 9a is a schematic illustration of a user interface element being broken as may occur in an embodiment of the present application;

FIG. 9b is a graphical illustration of a layout result of a user interface with possible fractured elements in an embodiment of the present application;

FIG. 9c is a diagram illustrating a result of the user interface being drawn after the user interface is deflected upwards in the embodiment of the present application;

FIG. 9d is a diagram illustrating a drawing result after the user interface is shifted downward in the embodiment of the present application;

FIG. 9e is a diagram illustrating a display effect after shifting the user interface according to an embodiment of the present application.

Detailed Description

The terminology used in the description section of the present application is for the purpose of describing particular embodiments of the present application only and is not intended to be limiting of the present application.

The electronic device applicable to the application can be electronic devices with folding screens, such as mobile phones, folding tablets, folding computers and the like, and can also be tablet computers, computers and the like without folding screens. Wherein the folding screen is a flexible screen. Fig. 1a shows a view of a folding mobile phone in an unfolded state, wherein the broken line is a broken line of a folding screen. Fig. 1b shows a view of a folding handset during folding or unfolding.

Fig. 1b shows a schematic structural diagram of an electronic device.

It should be understood that an electronic device may have more or fewer components than shown in the figures, may combine two or more components, or may have a different configuration of components. The various components shown in the figures 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.

The electronic device may include a processor 110, a memory 120, a power management module 130, an antenna 181, an antenna 182, a mobile communication module 140, a wireless communication module 150, a sensor module 160, a display 170, and the like. Wherein the sensor module 160 may include inertial sensors, and pressure sensors and/or touch sensors, among others.

The processor 110 may include an application processor (application processor, AP), a modem processor, a graphics processor (graphics processing unit, GPU), an image signal processor (image signal processor, ISP), a controller, a memory, a video codec, a digital signal processor (digital signal processor, DSP), a baseband processor, and/or a neural-Network Processor (NPU), etc. Wherein the different processing units may be separate devices or may be integrated in one or more processors.

Memory 120 may be used to store computer-executable program code, which may include instructions. The processor 110 executes instructions stored in the memory 120 to perform various functional applications of the electronic device and data processing. The memory 120 may include a program memory area and a data memory area. The program storage area may store an operating system, and an application program (such as a sound playing function, an image playing function, etc.) required for at least one function, and the like. The storage data area may store data created during use of the electronic device (e.g., audio data, phonebook, etc.), and so forth. Further, the memory 120 may include a high-speed random access memory, and may also include a nonvolatile memory, such as at least one magnetic disk storage device, a flash memory device, a universal flash memory (universal flash storage, UFS), and the like.

The touch sensor may form a touch screen (or "touch screen") with the display 170. The touch sensor is used to detect a touch operation acting on or near it. The touch sensor may communicate the detected touch operation to the application processor to determine the touch event type. The associated visual output may be manipulated through the display 170. In other embodiments, the touch sensor may also be disposed on a surface of the electronic device at a different location than the display 170. The pressure sensor is used for sensing a pressure signal and can convert the pressure signal into an electric signal. When a touch operation is applied to the display 170, the electronic device detects the intensity of the touch operation according to the pressure sensor and calculates the position of the touch according to the detection signal of the pressure sensor.

Inertial sensors typically include acceleration sensors, gyroscopes, and/or magnetic sensors, among others, for enabling gesture detection, among others, in electronic devices.

In some embodiments of the present application, the electronic device may switch between a portrait display (where the aspect ratio of the display area may be the second aspect ratio, and the second aspect ratio is less than 1 because the width is less than the height) and a landscape display (where the aspect ratio of the display area may be the first aspect ratio, and the first aspect ratio is greater than 1 because the width is greater than the height), or between a folded state display (where the aspect ratio of the display may be the second aspect ratio) and an unfolded state display (where the aspect ratio of the display may be the first aspect ratio, and the height is unchanged because the width is twice the width when in the folded state), according to the data of the sensor. When the electronic equipment is displayed on the horizontal screen or in the unfolded state, the displayed content is more than that of the electronic equipment in the vertical screen or in the folded state. For example, when the electronic device is a folding mobile phone and is displayed in an unfolded state, the application program is usually rearranged according to the width of the display area, as shown in fig. 2, so that the display content is enlarged and the content amount is reduced. In the embodiment of the application, as shown in fig. 3, the content displayed in the display area in the unfolded state of the folded mobile phone keeps the size of the content elements such as the picture characters consistent with the size of the content elements displayed in the folded state, and the content (measured by the area of the display content in the case of the same size of the content elements) is twice the content displayed in the folded state. In the display process of the electronic equipment, when the width of the display area is increased, an Application program (APP) rearranges the content to be displayed according to half of the increased width of the display area and the size larger than the height of the display area, so that the content to be displayed by the APP is increased relative to the content displayed in a folded state. As shown in fig. 4, the electronic device makes the width of the APP content to be displayed be half of the width of the display area in the unfolded state, and the height of the APP content to be displayed be greater than the height of the large screen and less than or equal to twice the height of the display area in the unfolded state, and draws the lower half of the APP content to be displayed to the right half of the display area in the unfolded state, so as to obtain the display effect shown by the display screen in the unfolded state in fig. 3. Similarly, when the electronic device is a tablet computer and is displayed on a horizontal screen, the size of content elements such as picture characters displayed by the APP is not larger than the size of content elements displayed on a vertical screen, the width of a page to be displayed by the APP can be half of the width of the horizontal screen, the height of the page to be displayed by the APP is twice of the height of the horizontal screen, or the page to be displayed is larger than the height of the horizontal screen and smaller than or close to the twice of the height of the horizontal screen, and the lower half part (the height slightly larger than the height of the upper half part) of the page to be displayed is drawn on the right half part of the horizontal screen.

The display effect described above may be achieved by software installed in the electronic device. The software includes an operating system of the electronic device and an APP installed in the electronic device.

The software in the electronic device may be a layered architecture. Taking an electronic device with an Android operating system as an example, the uppermost layer of software is an APP layer, and the next layer adjacent to the APP layer is an application Framework layer (i.e., framework layer). The APP layer may include an Activity (Activity) module, the frame layer may include a ViewRootImpl module (i.e., class), and the software in the electronic device may also include a Canvas module (i.e., class). The ViewRootImpl module is used to bridge UI and Window (Window), measure and layout the view, modify Canvas size, and adjust content rendering by calling an application programming interface (Application Programming Interface, API) provided by Canvas. The Activity module is used for managing page states and page life cycles, and under the mutual cooperation with the ViewRootImpl module, user interface layout is carried out on drawn contents (namely, contents displayed on a display screen) according to a given canvas size.

In some embodiments, the electronic device may modify the screen width value W acquired by the APP to W/2 when the aspect ratio of the screen display area is within a certain threshold interval, so that the APP formulates the size of the content element according to W/2, thereby implementing that the size of the content element is not greater when the landscape screen or the folded screen is displayed in the unfolded state than when the portrait screen or the folded state. The threshold interval can cover the aspect ratio of the flat computer in the horizontal screen display and the aspect ratio of the display area of the folding screen mobile phone in the unfolding state.

In some embodiments, the electronic device may modify the display area height value according to which the display content is displayed to be greater than the actual display area height and less than or equal to twice the actual display area height for use in measuring and laying out the APP view by modifying the display area width value according to which the display content is displayed to be half the actual display area width when the aspect ratio of the screen display area is within the threshold interval, such that the APP view width obtained after the layout is measured is half the screen width, and the height is greater than the screen height and less than or equal to twice the screen height.

Fig. 5a shows a flow diagram of a method for displaying a user interface.

When a user clicks a certain APP installed on an electronic device, a user interface display procedure of the APP comprises:

step 51: after the electronic equipment senses the clicking operation, triggering the clicked APP to start, and acquiring the size of a window actually displayed by the APP. Here, the window size is optionally equal to the display screen size. The manner of fetching may be to use context to fetch the width, e.g. most APP fetch window size through getreferences () function, getDisplayMetrics () function.

Step 52: the width of the display window is modified to a second width. When the electronic equipment detects that the aspect ratio of the display screen is in the threshold value interval, the width of the display screen acquired by the APP is modified to be a second width, so that the APP sets the size of the content element according to the second width. The second width is here smaller than the window width actually used for displaying the APP user interface, such that the content element to be displayed increases in size by a smaller proportion than the display window width. For example, when the electronic device detects that the aspect ratio of the display screen is within the threshold interval, if the window width value obtained by the getResources () function or the getdisplaymerics () function is W, the electronic device modifies the window width value in the getResources () function or the getdisplaymerics () function to W/2 by injecting, so that the APP designs or formulates the size of the content element in the view to be displayed according to W/2, instead of formulating the size of the content element in the view to be displayed according to W, thereby ensuring that the finally displayed view content element does not become larger compared with the vertical screen display or the folded state display.

Thereafter, the APP loads the layout file to set rules for subsequent measurements and layouts. Wherein the layout rules are given in the layout file. The electronic device then triggers the viewrootpmpl module to call the displayed overall flow function performTraversals to initiate layout and measurements.

Step 53: the electronic device modifies the width value W1 and the height value H1 of the display area according to the measurement layout to W2 and H2, respectively. Wherein W2 is less than W1, H1 is less than or equal to H2 and less than or equal to 2H1.

For example, when the electronic device senses that the aspect ratio of the display screen is still in the above threshold interval, the width of the display window mWinFrame is half of the original value, and the height is twice of the original value, so that the APP is laid out under a "super-high screen" (the aspect ratio of which is greater than the maximum aspect ratio of the current mobile phone, such as 18.5:9). mWinFrame represents a rectangle that characterizes the position and size of the window. The window is a region displayed on the screen of the display screen, and for a full screen APP, the window size is equal to the screen size of the display screen. The APP view displayed on the screen can typically slide up and down, so APP will make full use of the doubled screen height, laying out more content.

And step 54, measuring and laying out the content to be displayed according to the layout rules and W2 and H2. For example, the electronic device cooperates with the Activity module of the APP according to the width and height values of the modified mWinFrame and the layout rules in the layout file, and measures and lays out the view to be displayed. The measurement and layout result is the layout of the content to be displayed as shown in fig. 5 b. At this time, the size and shape of the canvas are the same as the content to be displayed, and the position of the content to be displayed in the canvas is also determined.

Step 55: and drawing the laid-out content to be displayed in an actual display area. For example, the APP layer calls the performDraw function to start the drawing flow, drawing the content to be displayed shown in fig. 5b into the actual display area shown in fig. 5 c. In some embodiments, the electronic device may first pan the Canvas (e.g., canvas) such that its top is aligned with the top of the actual display area and its left is aligned with the left of the actual display area, and then crop the Canvas along the bottom edge of the actual display area, leaving a portion of the Canvas (the first Canvas) located within the display area. Then, the corresponding content to be displayed is drawn in the first canvas. The electronic device then pans the canvas (pre-cropped canvas) such that its bottom is aligned with the bottom of the actual display area and the right is aligned with the right of the actual display area, and then cropped the canvas along the top edge of the actual display area, leaving a portion of the canvas (second canvas) located within the display area. Then, the corresponding content to be displayed is drawn in the second canvas. For example, when the upper half of the content to be displayed shown in fig. 5b is drawn on the left half of the actual display area shown in fig. 5c, first, as shown in fig. 5d, the electronic device pans the canvas to the left half of the actual display area shown in fig. 5c with the top of the canvas aligned with the top of the actual display area. And then cutting the canvas along the bottom of the actual display area, and removing the part of the canvas outside the actual display area to obtain a first canvas. The upper half of the content to be displayed shown in fig. 5b is then drawn in the first canvas. In some embodiments, the frame layer in the electronic device may call the API interface translate () provided by the Canvas to translate the Canvas to the left half of the actual display area shown in FIG. 5c, with the top of the Canvas aligned with the top of the actual display area. And then the electronic equipment calls an API interface cliprect () provided by the Canvas, and cuts the part of the Canvas in the actual display area to obtain a first Canvas. The APP layer calls drawRenderNode (), draws the upper half of the content to be displayed shown in fig. 5b in the first canvas, i.e., the upper half of the content to be displayed shown in fig. 5b is in the left half of the actual display area. Wherein the size of the canvas before being cut is the same as the whole size of the content to be displayed (i.e. the content RenderNode to be drawn in the drawing stage).

For example, when the lower half of the content to be displayed shown in fig. 5b is drawn on the right half of the actual display area shown in fig. 5c, first, as shown in fig. 5e, the electronic device pans the canvas to the right half of the actual display area shown in fig. 5c with the bottom of the canvas aligned with the bottom of the actual display area. And then cutting the canvas along the top of the actual display area, and removing the part of the canvas outside the actual display area to obtain a second canvas. The lower half of the content to be displayed shown in FIG. 5b is then drawn in the second canvas. In some embodiments, the frame layer in the electronic device may call the API interface translate () provided by the Canvas to translate the Canvas to the right half of the actual display area shown in FIG. 5c, with the bottom of the Canvas aligned with the bottom of the actual display area. And then the electronic equipment calls an API interface cliprect () provided by the Canvas, and cuts the part of the Canvas in the actual display area to obtain a second Canvas. The APP layer calls drawRenderNode (), draws the lower half of the content to be displayed shown in fig. 5b in the second canvas, i.e., the lower half of the content to be displayed shown in fig. 5b is in the right half of the actual display area. And then, sending the drawing result to the kernel layer for rendering, and finally displaying an APP user interface through a display screen.

It should be noted that, the steps 51 and 52 may be omitted. For example, in some embodiments, when the view is changed and redrawing is needed, such as when the user slides the APP user interface, the electronic device only needs to execute steps 53 to 55.

The embodiment modifies the screen width obtained by the APP, modifies the width and the height of the display window according to the layout, and controls the drawing of the Canvas, so that the APP can better adapt to the aspect ratio of the display screen of the electronic equipment. Fig. 5f and fig. 5g show schematic views of effects of the folded screen mobile phone before and after the technical solution provided by the above embodiment is used when the folded screen mobile phone is displayed in an unfolded state. It can be seen that by adopting the technical scheme provided by the embodiment, while elements are reduced, the spare area in the display screen is fully utilized, and the display content of one screen can be ensured to be from one Activity and not to be disordered. In addition, the calculation amount generated by the adaptation is relatively low, especially when the display screen of the electronic device is a folding screen, since the width of the display screen in the folding state is half of that of the display screen in the unfolding state, the width and height of each local UI element of the left and right half-screens drawn by using the technical scheme provided by the embodiment are practically consistent with those of the UI element in the folding state, and as shown in fig. 5h, the UI element has the characteristic of unchanged width and height (or length and width). Therefore, when the folding state and the unfolding state are switched, the process of adjusting the size (size) of the designated area is not needed, elements in the sub-elements are not needed to be rearranged, and drawing can be directly performed, so that a large amount of CPU resources are saved, the performance in folding and unfolding switching is accelerated, and the efficiency in folding and unfolding is improved. As shown in fig. 5i, when the gesture of the electronic device is switched between a folded state and an unfolded state, triggering a screen size change callback, and directly laying out and drawing by the APP under the condition that the UI element size is unchanged, so as to avoid re-measuring the layout and drawing; in the case of UI size change, the layout and drawing are re-measured. As shown in fig. 5j, when the electronic device is switched between the unfolded state and the folded state, the width and height of the UI element are changed, so that resources are consumed to redraw in a large area, and performance and efficiency between gesture switching are reduced.

As a variation on the above embodiment, the method for displaying a user interface may further include mapping the right half click event.

Fig. 6a shows a flow diagram of a mapping in a method for displaying a user interface.

Step 61: the electronic device perceives the click event. For example, the electronic device perceives a top view (DecorView) click event through the function supersepatchtouchvent ().

Step 62: after the electronic equipment senses the click event, judging whether the position of the click event is in the right half part of the display area. For example, the electronic device may determine whether the location of the click event is in the right half of the display area by determining whether the X-coordinate of the click event (e.g., the X-coordinate of the touch event of the DecorView) is greater than half of the width of the display area. If yes, then step 63 is performed next; otherwise, the process ends.

Step 63: the electronic device maps the location where the click event occurred to a second location. For example, as shown in fig. 6b, the electronic device is shifted leftwards along the X-coordinate (the length of the shift may be half the width of the display area) and downwards along the Y-coordinate (the length of the shift may be the height of the display area) from the position where the click event occurs, i.e. the second position is obtained. In FIG. 6b, the display content in the dashed box display area is adjusted to the layout or canvas illustration before the canvas after the layout is measured.

When the click event occurs in the right half of the display area in the above embodiment, the click event is mapped and shifted to the left and the bottom, so that the electronic device can correctly respond to the click event.

In some embodiments, the method for displaying a user interface may further include the electronic device fixing the left half of the content of the display area and setting the right half of the content to slide. In some embodiments, the electronic device may inform the APP: whether the user interface is displayed in left and right halves in the display area, and the size of the area is fixed (typically the left half of the display area). For example, the electronic device system may provide two interface functions, one for informing the APP whether the method for displaying a user interface provided by the above embodiment is used or not, and the other for informing the APP of the size of the fixed area.

Accordingly, APP needs to be adapted. When the APP provider chooses to use this function (the left half of the display area is fixed (non-slidable) and the right half is slidable), the corresponding layout rules can be formulated accordingly and the measurement layout is repeated so that the view layout effect is as shown in fig. 7a with the fixed area layout in the upper half and the sliding area layout in the lower half. After that, the canvas is processed and drawn so that the APP user interface is shown in fig. 7b with the fixed (non-slidable) area (i.e. the first area mentioned above) in the left half of the display and the sliding area in the right half of the display. Thus, after the APP in the electronic device is opened, the user interface thereof is displayed in two parts, namely, left and right parts, as shown in fig. 7c, the content displayed in the left part is fixed, and the content user displayed in the right part can slide and browse. The left fixed zone provides navigation functionality and the right waterfall stream provides quick browsing functionality. The embodiment is suitable for shopping applications, information applications, chat applications and the like, and the home page of the application comprises a fixed navigation area and a slidable area. When the electronic equipment is a folding screen mobile phone, the left half part of the folding screen is provided with a fixed navigation area, and the right half part of the folding screen is provided with an unfixed waterfall flow area, so that the user experience is better. Therefore, the technical scheme provided by the embodiment is applied to shopping class APP sliding on only a part of homepage, for example, a search box, a functional area, a fixed advertisement place and the like can be placed on the left side, and waterfall stream content can be placed on the right side. The effect is better. And, APP can be implemented with only a small amount of adaptation.

When the user slides the APP user interface, the APP performs the flow as shown in fig. 7 d:

step 71: the APP receives the sliding information. In some embodiments, the sliding information may include a sliding position (e.g., coordinates), in other embodiments, the sliding information may further include a sliding direction (e.g., up or down), and so on.

Step 72: the APP judges whether the sliding position is in the sliding area, if so, the step 73 is executed next; otherwise, the process is ended.

Step 73: and (5) sliding treatment. When the sliding position is in the sliding region, the content of the user interface is about to change, and the electronic device starts the measurement layout and drawing to update the content displayed in the sliding region in the user interface.

As another variation of the above embodiment, the lower half of the fixed area content is associated with the sliding area display content. For example, when the car picture appears in the sliding area, the area below the fixed area (i.e., the second area) displays more brands of car information, or displays more detailed information associated with the car picture in the sliding area, such as car specification parameters in the picture, user evaluations, and so on.

For the case where the bottom navigation bar is displayed below the right half screen as shown in fig. 5g, in some embodiments, the method for displaying the user interface differs from the method shown in fig. 5 a. As shown in fig. 8a, the difference is that:

Step 81: in the process of measuring the layout, the electronic device folds the width value of the display area according to the measurement layout by half, and changes the height value into 2×h_screen-3×h_b, so that the navigation bar is laid out at the bottom of the display area. Where h_screen is the display area height and h_b is the navigation bar height.

In order for the navigation bar to appear at the bottom of the display area as shown in fig. 8b, it is necessary to obtain a layout as shown in fig. 8c after measuring the layout, with the navigation bar being laid out below the content area to be displayed. Accordingly, the APP may call the Framework layer interface during the measurement layout process to mark the navigation bar in the lower area of the content to be displayed of the layout, resulting in the layout as shown in fig. 8 c.

In fig. 8b, the height of the display area is h_screen and the height of the navigation bar is 2×h_b, so that the heights of the first area and the second area are h_screen-2×h_b, the sum of the heights is 2× (h_screen-2×h_b), and the height h_b of the bottom navigation bar is added, thereby obtaining the height of the display area according to which the measurement layout is required to be modified to 2× (h_screen-2×h_b) +h_b=2×h_screen-3×h_b, thereby obtaining the layout shown in fig. 8 c.

Step 83: and drawing the content to be displayed, which is the content to be displayed and is the navigation bar, in an actual display area. For example, the frame layer calls functions translate () and clitRect (), and the control function drawrendernenode () draws content to be displayed in the first region to the upper left canvas and draws content to be displayed in the second region to the upper right canvas.

Step 84: the navigation bar is enlarged and drawn at the bottom of the display area. For example, the frame layer invokes a scaling interface (e.g., scale interface) of Canvas to double the length and width of the bottom navigation bar, and controls the function drawRenderNode () to draw the navigation bar in a third region at the bottom of the display region as shown in fig. 8 b.

According to the technical scheme provided by the embodiment, on the basis that the display area is divided into the left area display APP content and the right area display APP content, one area display navigation bar is added, the visual effect of the navigation bar is optimized, as shown in fig. 8d, the navigation bar is located below the whole interface, and compared with the navigation bar displayed in fig. 5g, the user experience is improved.

Fig. 9a and 5g show schematic views of a user interface element (UI element) being fractured that may occur using the method provided in fig. 5 a. To avoid splitting one UI element into two parts (as shown in FIG. 9a, the first element 910 is split into a first part 911 and a second part 912 for display during the rendering stage), as another variation of the above embodiment, the method for displaying the UI may further comprise, prior to the electronic device processing the canvas: for UI elements that are to be split during the rendering phase (i.e., the first element described above), an offset is calculated and provided to the APP.

As shown in fig. 9b, since the UI elements laid out in the android system are rectangles, the positions of the UI elements can be described in coordinates such as left (left), top (top), right (right), bottom (bottom).

When the electronic device judges whether the UI elements are cut in the drawing stage, the top and the bottom coordinate values of each UI element are traversed in the layout stage, and if the top value is smaller than the height (namely the height of the display area) h of the content area and the bottom value is larger than the height of the content area, the UI elements are cut. Accordingly, the electronic device may give the UI element a required offset distance of |h-top| or |bottom-h|, or a smaller value of |h-top| and |bottom-h|. Among them, it is preferable to set the offset distance to a smaller value of |h-top| and |bottom-h|. If the offset distance is |h-top|, the UI elements which are possibly cracked and the elements below the UI elements need to be offset downwards integrally; if the offset distance is |bottom-h|, the UI elements that may be fractured need to be offset upward. In some embodiments, when the UI element needs to be shifted downward, the shift distance may be greater than |h-top|, so long as the cut position is in the fourth region shown in fig. 9b after the shift is satisfied. In some embodiments, when the UI element needs to be shifted upward, the shift distance may be greater than |bottom-h|, so long as the cut position is located in the fifth area shown in fig. 9b after the shift is satisfied.

The electronic device may then send the offset information to the APP, which decides whether to offset the UI element that would be split. Wherein the offset information may be one or more of offset object (view) information, an offset distance, and an offset direction. When the APP decides to offset the UI element to avoid splitting of the UI element, the layout rules will be adjusted accordingly so that the UI element will not be split during the canvas adjustment phase. The APP may shift the content to be displayed as a whole, or may shift only UI elements that may be split (e.g., shift less than the distance between UI elements, shift only UI elements that may be split, i.e., compress the distance between UI elements adjacent in the shift direction). For example, after shifting the whole of the content to be displayed upward by |bottom-h|, the drawing result obtained in the drawing stage is as shown in fig. 9c, and the first element 910 is displayed in the position of the bottom of the left half of the screen as a whole; after shifting the whole of the content to be displayed downward by a distance greater than |h-top|, the drawing result obtained in the drawing stage is shown in fig. 9d, and the first element 910 is displayed in the whole at the position of the top of the right half of the screen. Only shifting UI elements that may be split may be used to solve the split picture "hua to" in fig. 5 g. It can be seen that the downward offset required for the split picture in fig. 5g is less than the distance between the picture and the underlying picture "folded cell phone", so APP will shift the "hua" picture downward during the measurement layout process. After the split picture "Huacheng" in fig. 5g is processed by the technical scheme provided by the embodiment, the effect shown in fig. 9e can be obtained, and the user experience is further improved.

An embodiment of an apparatus for displaying a user interface provided in an embodiment of the present application may include: layout module and display module. The layout module is used for obtaining a layout view according to the user interface of the second width and the second height layout application program when the first aspect ratio of the display screen of the electronic device is in a preset threshold value interval; the layout view comprises a first part and a second part, the width of the first part and the width of the second part are equal to the second width, the first part is positioned above the second part, and the sum of the heights of the first part and the second part is smaller than or equal to the second height; the second width is smaller than the first width, the first width is the width of a window, and the window is used for displaying a user interface; the second height is greater than the first height, and the first height is the height of the window; the display module is used for enabling the left half part of the window to display the first part and the right half part of the window to display the second part by adjusting the canvas; wherein the canvas is used to draw the user interface.

The above-described means for displaying a user interface is applied in the above-described electronic device (or the electronic device may comprise the means in this embodiment).

As a variation of the above embodiment, the above apparatus may further include: and the modifying module is used for modifying the width of the display screen acquired by the application program into a second width when the first aspect ratio of the display screen is in a threshold interval before the layout module obtains the layout view according to the second width and the second height, so that the element size in the user interface is smaller than or equal to the first size, the first size is the element size displayed by the user interface under the second aspect ratio of the display screen, and the second aspect ratio is smaller than the first aspect ratio.

As another variation of the above embodiment, the above apparatus may further include: the system comprises a traversing module, an offset determining module and a first providing module, wherein the traversing module is used for traversing elements in a user interface after the layout module obtains a layout view according to a user interface of the application program with a second width and a second height, and judging whether the first elements exist or not; the top coordinate value of the first element is smaller than the first height, and the bottom coordinate value is larger than the first height; the offset determining module is used for determining an offset and an offset direction so that the first element is integrally displayed on the left half part or the right half part of the window; the first providing module is used for providing the offset and the offset direction to the application program.

As another variation of the above embodiment, the above apparatus may further include: the sensing module is used for sensing click events of the user interface after the display module enables the left half part of the window to display the first part and the right half part of the window to display the second part by adjusting the canvas; the mapping module is used for mapping the click event from the first position to the second position; the first position is the position of the click event in the right half part of the display screen, and the second position is the position of the first position which is shifted leftwards by a second width and downwards by a first height.

As another variation of the above embodiment, the above apparatus may further include: the first setting module is used for setting a first area at the left half part of the window before the layout module obtains a layout view according to the user interface of the application program with the second width and the second height; the first area is used for displaying fixed content; the second providing module is used for providing information of the first area to the application program.

As another variation of the above embodiment, the above apparatus may further include: the second setting module is used for setting a second area at the left half part of the window, the second area is positioned below the first area, and the content displayed in the second area is associated with the content displayed in the right half part of the window; the second providing module is used for providing information of the second area to the application program.

As another variation of the above embodiment, the above layout module is further configured to: laying out a user interface containing a navigation bar according to the second width and the second height to obtain a layout view containing a navigation bar view; the navigation bar view is located below the second portion; the sum of the navigation bar view and the heights of the first part and the second part is less than or equal to the second height; the display module is further used for: by adjusting the canvas, the navigation bar view is displayed in the window below the first portion and the second portion.

As another modification of the above embodiment, the above display module is further configured to: the navigation bar view is displayed in the window below the first portion and the second portion by zooming in on the third canvas.

Another embodiment of an apparatus for displaying a user interface may include: the system comprises a receiving module, a rule executing module and a layout module, wherein the receiving module is used for receiving offset and offset direction (such as offset and offset direction sent by a frame layer); the rule execution module is used for making a layout rule according to the offset and the offset direction; the layout module is used for laying out the user interface according to the layout rules so that the user interface is displayed in a left part and a right part in a display screen of the electronic equipment, and elements in the user interface are kept complete. The device in this embodiment may be the APP in the foregoing method embodiment, and is applied to an electronic device (or the electronic device may include the device in this embodiment), where the APP includes the offset and the offset direction into the layout rule, with respect to the foregoing processing for avoiding splitting of the UI element, so as to avoid splitting of the UI element, and ensure the integrity of the UI element that is finally displayed.

Another embodiment of an apparatus for displaying a user interface may include: the first receiving module is used for receiving information of the first area (such as receiving the information of the first area sent by the frame layer); the first rule module is used for formulating a layout rule according to the information of the first area; the first layout module is used for laying out the user interface according to the layout rule, so that the user interface is displayed in a display screen of the electronic device in a left part and a right part, and the content in the first area is fixed. The apparatus in this embodiment may be the APP in the method embodiment described above, and be applied to an electronic device (or the electronic device may include the apparatus in this embodiment). Compared with the processing of fixing the other surface and sliding the other surface when the UI double-sided display in the display screen is realized, the APP brings the information of the first area into the layout rule, so that the possibility of fixing the UI of the APP and sliding the UI is provided.

As a variation on the embodiment of the Apparatus (APP), the apparatus may further include: the second receiving module is used for receiving information of a second area; the second rule module is used for formulating a layout rule according to the information of the second area; the second layout module is used for laying out the user interface according to the layout rule so as to be matched with the operation, so that the content of the second area is associated with the content of the right part of the user interface, and the user experience is further improved.

It is to be understood that some or all of the steps or operations in the above embodiments are merely examples, and embodiments of the present application may also perform other operations or variations of various operations. Furthermore, the various steps may be performed in a different order presented in the above embodiments, and it is possible that not all of the operations in the above embodiments are performed.

The embodiment of the application also provides electronic equipment, which comprises: one or more processors; a memory; and one or more computer programs, wherein the one or more computer programs are stored in the memory, the one or more computer programs comprising instructions, which when executed by the device, cause the device to perform the methods shown in the above embodiments.

The present embodiments also provide a computer-readable storage medium having a computer program stored therein, which when run on a computer, causes the computer to perform the method provided by the embodiments of the present application.

The present embodiments also provide a computer program product comprising a computer program which, when run on a computer, causes the computer to perform the method provided by the embodiments of the present application.

In this embodiment, "and/or" describes an association relationship of an association object, which means that there may be three relationships, for example, a and/or B, and may mean that there is a alone, a and B together, and B alone. Wherein A, B may be singular or plural. The character "/" generally indicates that the context-dependent object is an "or" relationship. "at least one of the following" and the like means any combination of these items, including any combination of single or plural items. For example, at least one of a, b and c may represent: a, b, c, a and b, a and c, b and c or a and b and c, wherein a, b and c can be single or multiple.

Those of ordinary skill in the art will appreciate that the various elements and algorithm steps described in the embodiments disclosed herein can be implemented as a combination of electronic hardware, computer software, and electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the solution. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present application.

It will be clear to those skilled in the art that, for convenience and brevity of description, specific working procedures of the above-described systems, apparatuses and units may refer to corresponding procedures in the foregoing method embodiments, and are not repeated herein.

In several embodiments provided herein, any of the functions, if implemented in the form of software functional units and sold or used as a stand-alone product, may be stored in a computer-readable storage medium. Based on such understanding, the technical solution of the present application may be embodied essentially or in a part contributing to the prior art or in a part of the technical solution, in the form of a software product stored in a storage medium, including several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the methods described in the embodiments of the present application. And the aforementioned storage medium includes: a usb disk, a removable hard disk, a Read-Only Memory (hereinafter referred to as ROM), a random access Memory (Random Access Memory) and various media capable of storing program codes such as a magnetic disk or an optical disk.

The foregoing is merely specific embodiments of the present application, and any person skilled in the art may easily conceive of changes or substitutions within the technical scope of the present application, which should be covered by the protection scope of the present application. The protection scope of the present application shall be subject to the protection scope of the claims.

Claims

1. A method for displaying a user interface, applied to an electronic device, comprising:

when the first aspect ratio of the display screen of the electronic equipment is in a preset threshold value interval, laying out the user interface of the application program according to the second width and the second height to obtain a layout view; the layout view comprises a first part and a second part, wherein the width of the first part and the width of the second part are equal to the second width, the first part is positioned above the second part, and the sum of the heights of the first part and the second part is smaller than or equal to the second height; the second width is smaller than the first width, the first width is the width of a window, and the window is used for displaying the user interface; the second height is larger than the first height, and the first height is the height of the window;

The canvas is adjusted so that the left half part of the window displays the first part and the right half part of the window displays the second part; wherein the canvas is used for drawing the user interface.

2. The method of claim 1, wherein adjusting the canvas comprises:

the canvas is translated and/or cut so that a first canvas is positioned at the left half part of the window and a second canvas is positioned at the right half part of the window; the first canvas is a part of the canvas for drawing the first part, and the second canvas is a part of the canvas for drawing the second part.

3. The method of claim 1 or 2, wherein laying out the user interface of the application program according to the second width and the second height, before obtaining the layout view, further comprises:

and when the first aspect ratio of the display screen is in the threshold interval, modifying the width of the display screen acquired by the application program to the second width so that the element size in the user interface is smaller than or equal to a first size, wherein the first size is the element size of the user interface displayed under the second aspect ratio of the display screen, and the second aspect ratio is smaller than the first aspect ratio.

4. A method according to any one of claims 1 to 3, wherein the user interface of the application program is laid out according to the second width and the second height, and after obtaining the layout view, further comprising:

traversing the elements in the user interface, and judging whether a first element exists or not; the top coordinate value of the first element is smaller than the first height, and the bottom coordinate value is larger than the first height;

determining an offset and an offset direction when the first element is present, such that the first element is displayed entirely in a left half or a right half of the window;

the offset and the offset direction are provided to the application.

5. The method of claim 4, wherein determining the offset and the offset direction comprises:

when the offset is |top-h||, the offset is downward as an offset direction; when the offset is |h-bottom|, the upward direction is taken as the offset direction.

6. The method of any of claims 1 to 5, wherein by adjusting the canvas such that a left half of the window displays the first portion and a right half of the window displays the second portion, further comprising:

Sensing a click event of the user interface;

mapping the click event from a first location to a second location; the first position is a position of the click event in the right half part of the display screen, and the second position is a position of the first position shifted leftwards by the second width and shifted downwards by the first height.

7. The method of any of claims 1 to 6, wherein laying out the user interface of the application program according to the second width and the second height, before obtaining the layout view, further comprises:

setting a first area at the left half part of the window; the first area is used for displaying fixed content;

and providing the information of the first area to the application program.

8. The method as recited in claim 7, further comprising: setting a second area on the left half part of the window, wherein the second area is positioned below the first area, and the content displayed in the second area is associated with the content displayed in the right half part of the window;

and providing the information of the second area to the application program.

9. The method of any of claims 1 to 8, wherein laying out the user interface of the application program according to the second width and the second height results in a layout view, further comprising:

Laying out the user interface containing the navigation bar according to the second width and the second height to obtain a layout view containing a navigation bar view; the navigation bar view is located below the second portion; the sum of the navigation bar view and the heights of the first portion and the second portion is less than or equal to the second height;

by adjusting the canvas such that the left half of the window displays the first portion and the right half of the window displays the second portion, comprising: and adjusting canvas to enable the navigation bar view to be displayed below the first part and the second part in the window.

10. The method of claim 9, wherein the navigation bar view is displayed in the window below the first and second portions by adjusting a canvas, comprising:

by zooming in on a third canvas, causing the navigation bar view to be displayed in the window below the first and second portions; the third canvas is a part of the canvas for drawing the navigation bar view.

11. A method for displaying a user interface, applied to an electronic device, comprising:

Receiving an offset and an offset direction;

a layout rule is formulated according to the offset and the offset direction;

and laying out the user interface according to the layout rule so that the user interface is displayed in a display screen of the electronic equipment in left and right parts, and elements in the user interface are kept complete.

12. A method for displaying a user interface, applied to an electronic device, comprising:

receiving information of a first area;

setting a layout rule according to the information of the first area;

and laying out the user interface according to the layout rule so that the user interface is displayed in a left part and a right part in a display screen of the electronic equipment, and the content in the first area is fixed.

13. The method as recited in claim 12, further comprising:

receiving information of a second area;

setting a layout rule according to the information of the second area;

and laying out the user interface according to the layout rule so as to enable the content displayed in the second area to be associated with the content of the right part of the user interface.

14. An apparatus for displaying a user interface, applied to an electronic device, comprising:

the layout module is used for laying out the user interface of the application program according to the second width and the second height when the first aspect ratio of the display screen of the electronic equipment is in a preset threshold value interval, so as to obtain a layout view; the layout view comprises a first part and a second part, wherein the width of the first part and the width of the second part are equal to the second width, the first part is positioned above the second part, and the sum of the heights of the first part and the second part is smaller than or equal to the second height; the second width is smaller than the first width, the first width is the width of a window, and the window is used for displaying the user interface; the second height is larger than the first height, and the first height is the height of the window;

The display module is used for enabling the left half part of the window to display the first part and the right half part of the window to display the second part by adjusting canvas; wherein the canvas is used for drawing the user interface.

15. The apparatus of claim 14, wherein the display module is further configured to: the canvas is translated and/or cut so that a first canvas is positioned at the left half part of the window and a second canvas is positioned at the right half part of the window; the first canvas is a part of the canvas for drawing the first part, and the second canvas is a part of the canvas for drawing the second part.

16. The apparatus according to claim 14 or 15, further comprising: and the modification module is used for modifying the width of the display screen acquired by the application program into the second width when the first aspect ratio of the display screen is in the threshold interval before the layout module obtains a layout view according to the second width and the second height, so that the element size in the user interface is smaller than or equal to the first size, wherein the first size is the element size of the user interface displayed under the second aspect ratio of the display screen, and the second aspect ratio is smaller than the first aspect ratio.

17. The apparatus according to any one of claims 14 to 16, further comprising:

the traversing module is used for traversing the elements in the user interface after the layout module lays out the user interface of the application program according to the second width and the second height to obtain a layout view and judging whether the first elements exist or not; the top coordinate value of the first element is smaller than the first height, and the bottom coordinate value is larger than the first height;

the offset determining module is used for determining an offset and an offset direction so that the first element is integrally displayed on the left half part or the right half part of the window;

and the first providing module is used for providing the offset and the offset direction for the application program.

19. The apparatus according to any one of claims 14 to 18, further comprising:

The sensing module is used for sensing a click event of the user interface after the display module displays the first part on the left half part of the window and the second part on the right half part of the window by adjusting the canvas;

a mapping module for mapping the click event from a first location to a second location; the first position is a position of the click event in the right half part of the display screen, and the second position is a position of the first position shifted leftwards by the second width and shifted downwards by the first height.

20. The apparatus according to any one of claims 14 to 19, further comprising:

the first setting module is used for setting a first area at the left half part of the window before the layout module lays out the user interface of the application program according to the second width and the second height to obtain a layout view; the first area is used for displaying fixed content;

and the second providing module is used for providing the information of the first area to the application program.

21. The apparatus as recited in claim 20, further comprising:

the second setting module is used for setting a second area on the left half part of the window, the second area is positioned below the first area, and the content displayed in the second area is associated with the content displayed on the right half part of the window;

And the second providing module is used for providing the information of the second area to the application program.

22. The apparatus of any one of claims 14 to 21, wherein the layout module is further configured to: laying out the user interface containing the navigation bar according to the second width and the second height to obtain a layout view containing a navigation bar view; the navigation bar view is located below the second portion; the sum of the navigation bar view and the heights of the first portion and the second portion is less than or equal to the second height;

the display module is further configured to: and adjusting canvas to enable the navigation bar view to be displayed below the first part and the second part in the window.

23. The apparatus of claim 22, wherein the display module is further configured to: and by zooming in on a third canvas, causing the navigation bar view to be displayed in the window below the first and second portions.

24. An apparatus for displaying a user interface, applied to an electronic device, comprising:

the receiving module is used for receiving the offset and the offset direction;

the rule execution module is used for formulating a layout rule according to the offset and the offset direction;

And the layout module is used for laying out the user interface according to the layout rule so that the user interface is displayed in a display screen of the electronic equipment in a left part and a right part, and elements in the user interface are kept complete.

25. An apparatus for displaying a user interface, applied to an electronic device, comprising:

the first receiving module is used for receiving the information of the first area;

the first rule module is used for formulating a layout rule according to the information of the first area;

and the first layout module is used for laying out the user interface according to the layout rule so that the user interface is displayed in a display screen of the electronic equipment in a left part and a right part, and the content in the first area is fixed.

26. The apparatus as recited in claim 25, further comprising:

the second receiving module is used for receiving information of a second area;

the second rule module is used for formulating a layout rule according to the information of the second area;

and the second layout module is used for laying out the user interface according to the layout rule so as to enable the content displayed in the second area to be associated with the content of the right part of the user interface.

27. An electronic device comprising an apparatus as claimed in any one of claims 14 to 23.

28. A computer readable storage medium, characterized in that the computer readable storage medium has stored therein a computer program which, when run on a computer, causes the computer to perform the method of any of claims 1 to 13.