WO2024046041A1

WO2024046041A1 - Method and device for displaying user interface

Info

Publication number: WO2024046041A1
Application number: PCT/CN2023/111481
Authority: WO
Inventors: 钱坤
Original assignee: 华为技术有限公司
Priority date: 2022-08-30
Filing date: 2023-08-07
Publication date: 2024-03-07
Also published as: CN117667274A

Abstract

A method and device for displaying a user interface. In the method, by means of laying out a user interface of an application program according to a second width which is less than the width of a display area and a second height which is greater than the height of the display area, an electronic device increases layout content; and by means of adjusting a canvas, the left half portion of a display screen of the electronic device displays a first portion of the user interface, and the right half portion thereof displays a second portion of the user interface.

Description

Methods and devices for displaying user interfaces

Technical field

The present application relates to the field of terminal technology, and in particular to a method and device for displaying a user interface (User Interface, UI).

Background technique

Currently, when the posture of large-screen electronic devices such as tablets and foldable mobile phones changes, such as when a tablet switches from a vertical screen display to a horizontal screen display, or a foldable mobile phone switches from a folded state to an unfolded state, the width of the display area used to display content increases. , and the application is rearranged according to the width of the display area, enlarging the display content, resulting in a reduction in the amount of content information displayed on the screen.

Application content

Embodiments of the present application provide a method and device for displaying a user interface, so that when the posture of the electronic device changes and switches to wide-screen display, the user interface is displayed on two pages, which increases the amount of content displayed by the electronic device and improves user experience. experience.

In a first aspect, this application provides a method for displaying a user interface, which is applied to an electronic device. The method can be implemented by the electronic device, including: when the first aspect ratio of the display screen of the electronic device is within a preset threshold interval , layout the user interface of the application according to the second width and the second height, and obtain the layout view; the layout view includes the first part and the second part, the widths of the first part and the second part are both equal to the second width, and the first part is located in the second part above, the sum of the heights of the first part and the second part is less than or equal to the second height; wherein, the second width is less than the first width, the first width is the width of the window, and the window is used to display the user interface; the second height is greater than the first width. One height, the first height is the height of the window; by adjusting the canvas, the left half of the window displays the first part, and the right half of the window displays the second part; where the canvas is used to draw the user interface. The electronic device of the present application lays out the user interface of the application program according to a second width smaller than the width of the display area and a second height higher than the height of the display area to increase the content of the layout, and by adjusting the canvas, the display screen of the electronic device The user interface is displayed in two parts on the left and right (that is, the user interface is displayed on two pages), which increases the amount of content displayed on the electronic device and improves the user experience.

In a possible implementation, the above adjustment of the canvas includes: by panning and/or cutting the canvas, so that the first canvas is located in the left half of the window, and the second canvas is located in the right half of the window; where, the first canvas is the part of the canvas used to draw the first part, and the second canvas is the part of the canvas used to draw the second part.

In a possible implementation, the above-mentioned layout of the user interface of the application program according to the second width and the second height, before obtaining the layout view, further includes: when the first aspect ratio of the display screen is in the threshold interval, the application program is The obtained width of the display screen is modified to the second width so that the element size in the user interface is less 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 The aspect ratio is smaller than the first aspect ratio. In this way, when the electronic device switches to wide-screen display, such as when the electronic device switches from portrait-screen display to landscape-screen display, or switches from folded state display to expanded state display, the size of the displayed user interface elements remains unchanged or even becomes slightly smaller, and The user interface is displayed on two sides, which can effectively increase the amount of displayed content and improve user experience.

In a possible implementation, the above layout of the user interface of the application program based on the second width and the second height, and after obtaining the layout view, also includes: traversing the elements in the user interface to determine whether the first element exists; The top coordinate value is less than the first height, and the bottom coordinate value is greater than the first height; when the first element exists, the offset and offset direction are determined so that the first element is displayed as a whole on the left side of the window Half or right half; provides the offset and offset direction to the application. By traversing to find user interface elements that may be split, and providing the offset and offset direction to the application, the elements in the user interface may be displayed completely without being split even after the canvas is adjusted, which can further improve the user experience. experience.

In a possible implementation, the above method adjusts the canvas so that the left half of the window displays the first part and the right half of the window displays the second part. The method further includes: sensing a click event of the user interface; and transferring the click event from the first part to the second part. One position is mapped to a second position; where the first position is the position of the click event in the right half of the display screen, and the second position is the first position offset to the left by the second width and downward by the first height. Location. This enables the electronic device to still respond when the user interface displayed in the right half is clicked.

In a possible implementation, the above-mentioned layout of the user interface of the application program according to the second width and the second height, before obtaining the layout view, further includes: setting a first area in the left half of the window; the first area is For displaying fixed content; providing the information of the first area to the application. This enables the user interface of an application to have half of the content fixed and half of the content sliding when displayed on both sides, meeting the application needs of more application providers and further improving the user experience.

In a possible implementation, the above method for displaying a user interface further includes: setting a second area in the left half of the window, the second area is located below the first area, and the content displayed in the second area is consistent with the content of the window. The content displayed in the right half is associated; information from the second area is provided to the application. This enables the user interface layout of the application to meet more needs and further enhance the user experience.

In a possible implementation, the above-mentioned layout of the user interface of the application program according to the second width and the second height to obtain a layout view also includes: laying out the user interface including the navigation bar according to the second width and the second height, Get the layout view containing the navigation bar view; the navigation bar view is located below the second part; the sum of the heights of the navigation bar view and the first and second parts 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 above method adjusts the canvas so that the left half of the window displays the first part and the right half of the window displays the second part, including: adjusting the canvas so that the navigation bar view is displayed below the first and second parts in the window. Further improve user experience.

In one possible implementation, the above method is to adjust the canvas so that the navigation bar view is displayed below the first and second parts in the window, including: enlarging the third canvas so that the navigation bar view is displayed in the window. Below Parts One and Two. For example, double the height and width of the third canvas.

In a second aspect, this application provides a method for displaying a user interface, which is applied to an electronic device and includes: receiving an offset and an offset direction; formulating layout rules according to the offset and the offset direction; and laying out the user according to the layout rules. interface, so that the user interface is displayed on the display screen of the electronic device in two parts, the left and right parts, and the elements in the user interface remain intact. This method adapts to the processing of elements that may be split in the above method, so that the elements in the user interface are not split.

In a third aspect, the present application provides a method for displaying a user interface, applied to an electronic device, including: receiving information in a first area; formulating layout rules according to the information in the first area; and laying out the user interface according to the layout rules so that The user interface is displayed on the display screen of the electronic device in two parts: left and right, and the content in the first area is fixed. This method is adapted to the fixed area set in the above method and is used to improve user experience.

In a possible implementation, the above method for displaying a user interface further includes: receiving information of the second area; formulating layout rules according to the information of the second area; laying out the user interface according to the layout rules so that the second area is displayed The content is associated with the content in the right part of the user interface to further enhance the user experience.

In a fourth aspect, this application provides a device for displaying a user interface, which is applied to electronic equipment and includes: a layout module and a display module. The layout module is used to layout 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 device is within a preset threshold interval, and obtain a layout view; the layout view includes a first part and a third part. Two parts, the widths of the first part and the second part are both equal to the second width, the first part is located above the second part, and the sum of the heights of the first part and the second part is less than or equal to the second height; where the second width is less than the second part One width, the first width is the width of the window, and the window is used to display the 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 to adjust the canvas so that the left half of the window displays the second One part, the right half of the window shows the second part; within it, the canvas is used to draw the user interface.

In a possible implementation, the above display module is also used to: translate and/or cut the canvas so that the first canvas is located in the left half of the window and the second canvas is located in the right half of the window; wherein, the first canvas is located in the left half of the window. The canvas is the part of the canvas used to draw the first part, and the second canvas is the part of the canvas used to draw the second part.

In a possible implementation, the above device further includes: a modification module, configured to layout the user interface of the application according to the second width and the second height in the layout module, and before obtaining the layout view, modify the first width and height of the display screen. When the ratio is in the threshold interval, modify the width of the display screen obtained by the application to the second width, so that the size of the elements in the user interface is less than or equal to the first size, and the first size is the second width and height of the user interface on the display screen. The second aspect ratio is smaller than the first aspect ratio of the displayed element dimensions.

In a possible implementation, the above device further includes: a traversal module, an offset determination module and a first providing module. The traversal module is used to layout the user interface of the application according to the second width and the second height in the layout module, to obtain After laying out the view, traverse the elements in the user interface to determine whether there is the first element; the top coordinate value of the first element is less than the first height, and the bottom coordinate value is greater than the first height; the offset determination module is used to determine the offset. and offset direction, so that the first element is displayed in the left half or right half of the window as a whole; the first providing module is used to provide the offset and offset direction to the application program.

In a possible implementation, the above device also includes: a perception module and a mapping module. The perception module is used to adjust the canvas in the display module so that the left half of the window displays the first part and the right half of the window displays the second part. After that, the click event of the user interface is sensed; the mapping module is used to map the click event from the first position to the second position; where the first position is the position of the click event in the right half of the display screen, and the second position is the first The position is offset to the left by the second width and down by the first height.

In a possible implementation, the above device further includes: a first setting module and a second providing module. The first setting module is configured to layout the user interface of the application according to the second width and the second height in the layout module to obtain the layout. Before the view, a first area is set in the left half of the window; the first area is used to display fixed content; the second providing module is used to provide information in the first area to the application.

In a possible implementation, the above device further includes: a second setting module and a second providing module. The second setting module is used to set a second area in the left half of the window, and the second area is located below the first area. , the content displayed in the second area is associated with the content displayed in the right half of the window; the second providing module is used to provide the information of the second area to the application program.

In a possible implementation, the above layout module is also used to: layout the user interface including the navigation bar according to the second width and the second height, and obtain a layout view including the navigation bar view; the navigation bar view is located below the second part ;The sum of the heights of the navigation bar view and the first and second parts is less than or equal to the second height. The above display module is also used to adjust the canvas so that the navigation bar view is displayed below the first part and the second part in the window.

In a possible implementation, the above display module is also used to: by enlarging the third canvas, the navigation bar view is displayed below the first part and the second part in the window, for example, by enlarging the height and width of the third canvas. double.

In a fifth aspect, this application provides a device for displaying a user interface, which is applied to electronic equipment and includes: a receiving module, a rule execution module and a layout module. The receiving module is used to receive an offset and an offset direction; the rule execution module Used to formulate layout rules based on offset and offset direction; the layout module is used to lay out the user interface according to the layout rules, so that the user interface is displayed in two parts on the display screen of the electronic device, and the elements in the user interface remain intact .

In a sixth aspect, the present application provides a device for displaying a user interface, which is applied to an electronic device and includes: a first receiving module, a first rule module and a first layout module. The first receiving module is used to receive a first region's information. information; the first rule module is used to formulate layout rules according to the information in the first area; the first layout module is used to layout the user interface according to the layout rules, so that the user interface is displayed on the display screen of the electronic device in two parts, and the The content in an area is fixed.

In a possible implementation, the above device further includes: a second receiving module, a second rule module and a second layout module, the second receiving module is used to receive the information of the second area; the second rule module is used to according to the first The information in the second area formulates layout rules; the second layout module is used to layout the user interface according to the layout rules, so that the content displayed in the second area is associated with the content in the right part of the user interface.

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

In an eighth aspect, the present application provides a computer-readable storage medium in which a computer program is stored. The program, when run on a computer, causes the computer to execute the method of any one of the first aspect to the third aspect.

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

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 that is not packaged with the processor.

Description of drawings

Figure 1a is a view of a foldable mobile phone in an unfolded state according to an embodiment of the present application;

Figure 1b is a view of a folding mobile phone during the folding or unfolding process provided by the embodiment of the present application;

Figure 1c is a schematic structural diagram of an electronic device provided by an embodiment of the present application;

Figure 2 is a schematic diagram of the effect of switching an existing electronic device from a folded state to an unfolded state to display content;

Figure 3 is a schematic diagram of the effect of switching the electronic device from a folded state to an expanded state to display content in an embodiment of the present application;

Figure 4 is a schematic diagram of the APP user interface in the layout and drawing process in the embodiment of the present application;

Figure 5a is a flow chart of a method for displaying a user interface provided by an embodiment of the present application;

Figure 5b is a schematic layout diagram of content to be displayed in the embodiment of the present application;

Figure 5c is a schematic diagram of a display area on a screen used to display content to be displayed in an embodiment of the present application;

Figure 5d is a schematic diagram of cutting the canvas in the embodiment of the present application;

Figure 5e is another schematic diagram of cutting the canvas in the embodiment of the present application;

Figure 5f is a schematic diagram of the display effect of the electronic device in the expanded state without using the technical solution of the present application in the embodiment of the present application;

Figure 5g is a schematic diagram of a display effect of an electronic device using a method for displaying a user interface in an expanded state in an embodiment of the present application;

Figure 5h is a schematic diagram in which the length and width characteristics of the UI elements remain unchanged in the embodiment of the present application;

Figure 5i is a schematic flow chart of an electronic device switching between an unfolded state and a folded state in an embodiment of the present application;

Figure 5j is a schematic diagram of changes in the length and width of UI elements in the embodiment of the present application;

Figure 6a is a schematic flowchart of mapping in a method for displaying a user interface provided by an embodiment of the present application;

Figure 6b is a mapping schematic diagram of click events in the embodiment of the present application;

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

Figure 7b is a schematic diagram of the APP user interface canvas shown in Figure 7a after adjustment in the embodiment of the present application;

Figure 7c is another display effect diagram of the display screen in the embodiment of the present application;

Figure 7d is a schematic flowchart of a processing flow of click events in the embodiment of the present application;

Figure 8a is another schematic flow chart for displaying a user interface provided by an embodiment of the present application;

Figure 8b is a schematic diagram of a drawing result in the embodiment of the present application;

Figure 8c is a schematic diagram of another layout result in the embodiment of the present application;

Figure 8d is another display effect diagram of the display screen in the embodiment of the present application;

Figure 9a is a schematic diagram of possible splitting of user interface elements in this embodiment of the present application;

Figure 9b is a schematic diagram of a layout result of a user interface with elements that may be split in the embodiment of the present application;

Figure 9c is a schematic diagram of a drawing result after the user interface is shifted upward in the embodiment of the present application;

Figure 9d is a schematic diagram of a drawing result after the user interface is shifted downward in the embodiment of the present application;

Figure 9e is a display effect diagram after shifting the user interface in the embodiment of the present application.

Detailed ways

The terms used in the embodiments of the present application are only used to explain specific embodiments of the present application and are not intended to limit the present application.

Electronic devices applicable to this application may be electronic devices with folding screens, such as mobile phones, folding tablets, folding computers, etc., or tablets, computers, etc. without folding screens. Among them, the folding screen is a flexible screen. Figure 1a shows a folded The view of the folded mobile phone in the unfolded state, in which the dotted line is the fold line of the folding screen. Figure 1b shows a view of a folding mobile phone during the folding or unfolding process.

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

It will 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 screen 170, and the like. The sensor module 160 may include an inertial sensor, a pressure sensor and/or a touch sensor, etc.

The processor 110 may include an application processor (application processor, AP), modem processor, graphics processing unit (GPU), image signal processor (image signal processor, ISP), controller, memory, video Codec, digital signal processor (DSP), baseband processor, and/or neural network processing unit (NPU), etc. Among them, different processing units can be independent devices or 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 execute various functional applications and data processing of the electronic device. Memory 120 may include program storage and data storage. Among them, the program storage area can store the operating system and the application program required for at least one function (such as a sound playback function, an image playback function, etc.). The storage data area can store data created during the use of electronic equipment (such as audio data, phone books, etc.). In addition, the memory 120 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc.

The touch sensor may be combined with display screen 170 to form a touch screen (or "touch screen"). Touch sensors are used to detect touches on or near them. The touch sensor can pass the detected touch operation to the application processor to determine the touch event type. Relevant visual output can be operated through display screen 170 . In other embodiments, the touch sensor may also be disposed on the surface of the electronic device at a different location from the display screen 170 . Pressure sensors are used to sense pressure signals and convert pressure signals into electrical signals. When a touch operation is performed on the display screen 170, the electronic device detects the strength of the touch operation based on the pressure sensor, and calculates the touch position based on the detection signal of the pressure sensor.

Inertial sensors usually include acceleration sensors, gyroscopes and/or magnetic sensors, etc., and are used to implement attitude detection in electronic devices.

In some embodiments of the present application, the electronic device can perform vertical screen display based on sensor data (in this case, the aspect ratio of the display area of the display screen can be the second aspect ratio. Since the width is smaller than the height, the second aspect ratio is less than 1 ) and horizontal screen display (at this time, the aspect ratio of the display area of the display screen can be the first aspect ratio. Since the width is greater than the height, the first aspect ratio is greater than 1), or the folding state display of the folding screen ( At this time, the aspect ratio of the display screen can be the second aspect ratio) and in the unfolded state (at this time, the aspect ratio of the display screen can be the first aspect ratio), because the width is twice the width in the folded state, and the height unchanged, therefore, the first aspect ratio is greater than the second aspect ratio when displaying in the folded state) switching. When an electronic device is displayed in a horizontal screen or an expanded state, more content is displayed compared to a vertical screen display or a folded state. For example, when the electronic device is a foldable mobile phone and is displayed in an unfolded state, usually, as shown in Figure 2, the application is rearranged according to the width of the display area, so that the displayed content is enlarged and the content volume is reduced. In the embodiment of the present application, the content displayed in the display area of the folded mobile phone in the unfolded state can be shown in Figure 3. The size of the content elements such as pictures and text is kept consistent with the size of the content elements displayed in the folded state. At the same time, the content amount (in the content element size Under the same circumstances, measured by the area of the displayed content) is twice the amount of displayed content in the folded state. During the display process of the electronic device, when the width of the display area increases, the application (Application, APP) rearranges the content to be displayed according to half of the increased width of the display area and a size greater than the height of the display area, so that the APP waits The amount of displayed content has increased compared to the content displayed in the folded state. As shown in Figure 4, the electronic device makes the width of the content to be displayed on the APP be half the width of the display area in the expanded state, and the height is greater than the height of the large screen and less than or equal to twice the height of the display area in the expanded state, and the content to be displayed is The lower half is drawn to the right half of the display area in the expanded state, thereby obtaining the display effect shown on the display screen in the expanded state in Figure 3. Similarly, when the electronic device is a tablet, when displayed in landscape orientation, the size of the pictures, text and other content elements displayed by the APP shall not be larger than The size of the content elements displayed in the vertical screen can make the width of the page to be displayed in the APP half the width of the horizontal screen and the height twice the height of the horizontal screen, or greater than the height of the horizontal screen and less than or close to twice the height of the horizontal screen, and Draw the lower half of the page to be displayed (the height is slightly greater than the height of the upper half) to the right half of the horizontal screen.

The above display effects can be achieved through software installed in the electronic device. Software includes the operating system of the electronic device and the APP installed in the electronic device.

Software in electronic devices can be layered. Taking an electronic device installed with the Android operating system as an example, the top layer of its software is the APP layer, and the next layer adjacent to the APP layer is the application framework layer (i.e. Framework layer). The APP layer may include an Activity module, the Framework layer may include a ViewRootImpl module (that is, a class), and the software in the electronic device may also include a Canvas module (that is, a class). The ViewRootImpl module is used to bridge the UI and the window (Window), measure and layout the view, modify the canvas size, and adjust the content drawing by calling the application programming interface (Application Programming Interface, API) provided by Canvas. The Activity module is used to manage page status and page life cycle. In cooperation with the ViewRootImpl module, it layouts the user interface of the drawn content (that is, the content displayed on the display) according to the given canvas size.

In some embodiments, when the aspect ratio of the screen display area is within a certain threshold interval, the electronic device can modify the screen width value W obtained by the APP to W/2, so that the APP can formulate the content element according to W/2. Size, so that the size of the content element displayed when the horizontal screen or the folded screen is in the expanded state is not larger than the size of the content element when the vertical screen or the folded screen is displayed. This threshold range can cover the aspect ratio of the tablet computer when it is displayed horizontally, and the aspect ratio of the display area of the folding screen mobile phone when it is unfolded.

In some embodiments, when the aspect ratio of the screen display area is within the threshold interval, the electronic device can change the display area width value based on which the content is displayed to half of the actual display area width. The display area height value is modified to be greater than the actual display area height and less than or equal to twice the actual display area height, for use when measuring and laying out the APP view, so that the APP view width obtained after measuring the layout is half the screen width and the height is greater than the screen height. And less than or equal to twice the screen height.

Figure 5a shows a schematic flowchart of a method for displaying a user interface.

When a user clicks on an APP installed on an electronic device, the user interface display process of the APP includes:

Step 51: After the electronic device senses the click operation, it triggers the Activity module of the clicked APP to start, and the APP obtains the window size actually displayed by the Activity module. Here, the window size is optionally equal to the display screen size. The way to obtain it is to use the context to obtain the width. For example, most APPs obtain the window size through the getResources() function and getDisplayMetrics() function.

Step 52: Modify the width of the display window to the second width. When the electronic device detects that the aspect ratio of the display screen is within the above threshold interval, it modifies the width of the display screen obtained by the APP to the second width, so that the APP sets the size of the content element according to the second width. Here, the second width is smaller than the width of the window actually used to display the APP user interface, so that the size increase ratio of the content element to be displayed is smaller than the increase ratio of the display window width. For example, when the electronic device detects that the aspect ratio of the display screen is within the above threshold interval, if the window width value obtained by the getResources() function or the getDisplayMetrics() function is W, the electronic device will inject getResources() The window width value in the function or getDisplayMetrics() function is modified to W/2, so that the APP designs or formulates the size of the content elements in the view to be displayed based on W/2 instead of formulating the size of the content elements in the view to be displayed based on W. This ensures that the final displayed view content elements will not become larger compared to portrait display or folded display.

Afterwards, the APP loads the layout file to set rules for subsequent measurements and layout. Among them, the layout rules are given in the layout file. Then, the electronic device triggers the ViewRootImpl module to call the displayed total process function performTraversals to start layout and measurement.

Step 53: The electronic device modifies the width value W1 and the height value H1 of the display area on which the measurement layout is based to W2 and H2 respectively. Among them, W2<W1, H1<H2≤2H1.

For example, when the electronic device senses that the aspect ratio of the display screen is still within the above-mentioned threshold range, the width of the display window mWinFrame is modified to be half of the original value and the height is twice the original value, so that the APP can be displayed on an "ultra-tall screen" (which The aspect ratio is larger than the current maximum aspect ratio of mobile phones (18.5:9). mWinFrame represents a rectangle, which represents the position and size of the window. The window is an area displayed on the screen of the display screen. 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 usually be slid up and down, so the APP will make full use of the doubled screen height to lay out more content.

Step 54: Measure and lay 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 to measure and lay out the view to be displayed based on the modified width and height values of mWinFrame and the layout rules in the layout file. The measurement and layout results are the layout of the content to be displayed as shown in Figure 5b. 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: Draw the laid out content to be displayed in the actual display area. For example, the APP layer calls the performDraw function to start the drawing process and draw the content to be displayed shown in Figure 5b into the actual display area shown in Figure 5c. In some embodiments, the electronic device can first translate the canvas (such as Canvas) so that its top is aligned with the top of the actual display area and its left side is aligned with the left side of the actual display area, and then, the canvas is cut along the bottom edge of the actual display area, Keep the part of the canvas that is within the display area (the first canvas). After that, draw the corresponding content to be displayed in the first canvas. Then, the electronic device translates the canvas (the canvas before cutting) so that its bottom is aligned with the bottom of the actual display area and the right side is aligned with the right side of the actual display area. After that, the canvas is cut along the top edge of the actual display area, retaining Part of the canvas (second canvas) located within the display area. After that, 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 Figure 5b is drawn on the left half of the actual display area shown in Figure 5c, first, as shown in Figure 5d, the electronic device translates the canvas to the actual display area shown in Figure 5c The left half of the area, with the top of the canvas aligned with the top of the actual display area. Then the canvas is cut along the bottom of the actual display area, and the part of the canvas outside the actual display area is removed to obtain the first canvas. Then the upper part of the content to be displayed shown in Figure 5b is drawn in the first canvas. In some embodiments, the Framework layer in the electronic device can call the API interface translate() provided by Canvas to make the Canvas translate to the left half of the actual display area shown in Figure 5c, and the top of the Canvas is aligned with the top of the actual display area. Then the electronic device calls the API interface cliprect() provided by Canvas to crop the part of the Canvas within the actual display area to obtain the first canvas. The APP layer calls drawRenderNode() to draw the upper half of the content to be displayed as shown in Figure 5b on the first canvas, that is, the upper half of the content to be displayed as shown in Figure 5b is on the left half of the actual display area. The size of the canvas before being cut is the same as the overall size of the content to be displayed (that is, the content to be drawn in the rendering phase of the RenderNode).

For example, when the lower half of the content to be displayed shown in Figure 5b is drawn on the right half of the actual display area shown in Figure 5c, first, as shown in Figure 5e, the electronic device translates the canvas to the actual display area shown in Figure 5c The right half of the area, with the bottom of the canvas aligned with the bottom of the actual display area. Then cut the canvas along the top of the actual display area, remove the part of the canvas outside the actual display area, and obtain a second canvas. Then the lower part of the content to be displayed shown in Figure 5b is drawn in the second canvas. In some embodiments, the Framework layer in the electronic device can call the API interface translate() provided by Canvas to make the Canvas translate to the right half of the actual display area shown in Figure 5c, and the bottom of the Canvas is aligned with the bottom of the actual display area. Then the electronic device calls the API interface cliprect() provided by Canvas to crop the part of the Canvas within the actual display area to obtain the second canvas. The APP layer calls drawRenderNode() to draw the lower half of the content to be displayed as shown in Figure 5b on the second canvas, that is, the lower half of the content to be displayed as shown in Figure 5b is on the right half of the actual display area. After that, the drawing results are sent to the kernel layer for rendering, and the APP user interface is finally displayed through the display screen.

It should be noted that the above steps 51 and 52 can be omitted. For example, in some embodiments, when the view changes and needs to be redrawn, such as when the user slides the APP user interface, the electronic device only needs to perform the above steps 53 to 55.

The above embodiments enable the APP to better adapt to the aspect ratio of the electronic device display screen by modifying the screen width obtained by the APP, modifying the width and height of the display window on which the layout is based, and controlling the drawing of the Canvas. Figures 5f and 5g show schematic diagrams of the effects before and after using the technical solution provided by the above embodiment when the folding screen mobile phone is displayed in the unfolded state. It can be seen that the technical solution provided by the above embodiment can make full use of the free area in the display screen while reducing the elements, and can also ensure that the content displayed on one screen comes from one Activity and will not be cluttered. Moreover, the amount of calculation 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 folded state is half of the display screen in the unfolded state, the above embodiments are used to provide The width and height of each local UI element of the left and right half screens drawn by the technical solution are actually the same as the width and height of the UI element in the folded state. As shown in Figure 5h, the UI element has an unchanged width and height (or length and width). characteristic. In this way, when the folded state and the expanded state switch between each other, there is no need to go through the process of resizing the specified area, and there is no need to rearrange the elements inside the sub-elements. They can be drawn directly, thus saving a lot of CPU resources and accelerating folding. Improve the performance when opening and switching, and improve the efficiency when folding and unfolding. As shown in Figure 5i, when the posture of the electronic device switches between the folded state and the unfolded state, the APP triggers the screen size change callback. The APP directly layouts and draws the UI elements without changing the size, avoiding re-measurement of layout and drawing; UI size changes In case of change, re-measure the layout and drawing. As shown in Figure 5j, when the electronic device switches between the unfolded state and the folded state, the width and height of the UI elements change, which requires resources to be redrawn in a large area, reducing the performance and efficiency between posture switches.

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

Figure 6a shows a schematic flowchart of mapping in a method for displaying a user interface.

Step 61: The electronic device senses the click event. For example, the electronic device senses the click event of the top view (DecorView) through the function superdispatchTouchEvent().

Step 62: After sensing the click event, the electronic device determines whether the location where the click event occurred is in the right half of the display area. For example, the electronic device can determine whether the location where the click event occurs is in the right half of the display area by determining whether the X coordinate of the click event (such as the X coordinate of the touch event of DecorView) is greater than half the width of the display area. If yes, the next step is step 63; otherwise, this process ends.

Step 63: The electronic device maps the location where the click event occurs to the second location. For example, as shown in Figure 6b, the electronic device is offset to the left along the X coordinate from the position where the click event occurs (the length of the offset can be half the width of the display area), and is offset downward along the Y coordinate (the length of the offset can be is the height of the display area), that is, the second position is obtained. In Figure 6b, the display content in the dotted frame display area shows the layout or canvas diagram before adjusting the canvas after measuring the layout.

When a click event occurs in the right half of the display area in the above embodiment, the click event is mapped and shifted to the lower left, 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 content of the left half of the display area and setting the content of the right half to slide. In some embodiments, the electronic device can tell the APP whether the user interface is divided into left and right halves to be displayed in the display area, and the size of the fixed area (usually the left half of the display area). For example, the electronic device system may provide two interface functions, one interface function is used to inform the APP whether to use the method for displaying the user interface provided in the above embodiment, and the other interface function is used to inform the APP the size of the fixed area.

Accordingly, APP needs to be adapted. When the supplier of the APP chooses to use this function (the left half of the display area is fixed (not sliding) and the right half is sliding), the corresponding layout rules can be formulated accordingly and the measurement layout can be re-measured so that the view layout effect is as shown below As shown in 7a, the fixed area is arranged in the upper half and the sliding area is arranged in the lower half. After processing the canvas and drawing, the APP user interface is as shown in Figure 7b. The fixed (non-sliding) area (i.e. the above-mentioned first area) is in the left half of the display screen, and the sliding area is in the right half of the display screen. In this way, after the APP in the electronic device is opened, its user interface is displayed in two parts, as shown in Figure 7c. The content displayed in the left half is fixed, and the content displayed in the right half can be swiped by the user. The fixed area on the left provides navigation functions, and the waterfall flow on the right provides quick browsing functions. This embodiment is suitable for shopping, information, chat and other applications. The home page of such applications includes a fixed navigation area and a sliding area. When the electronic device is a folding screen mobile phone, the navigation area is fixed in the left half of the folding screen and the waterfall flow area is not fixed in the right half, which can make the user experience better. Therefore, the technical solution provided by this embodiment is applied to shopping APPs that only slide part of the homepage. For example, a search box, a functional area, a fixed advertising space, etc. can be placed on the left side, and waterfall flow content can be placed on the right side. Better results. Moreover, the APP only needs a small amount of adaptation to achieve it.

When the user slides the APP user interface, the APP executes the process shown in Figure 7d:

Step 71: APP receives sliding information. In some embodiments, the sliding information may include the sliding position (such as coordinates). In other embodiments, the sliding information may further include the sliding direction (such as upward or downward).

Step 72: The APP determines whether the sliding position is in the sliding area. If so, the next step is step 73; otherwise, the process ends.

Step 73: Sliding processing. When the sliding position is in the sliding area, it means that the user interface content is about to change. At this time, the electronic device starts measuring layout and drawing to update the content displayed in the sliding area in the user interface.

As another variation of the above embodiment, the content of the lower half of the fixed area is associated with the content displayed in the sliding area. For example, when a car picture appears in the sliding area, the area below the fixed area (ie, the second area mentioned above) displays more brand car information, or displays more detailed information associated with the car picture in the sliding area, such as in the picture Car specifications, user reviews, etc.

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

Step 81: During the process of measuring the layout, the electronic device halves the width value of the display area based on the measurement layout and changes the height value to It is 2×h_screen-3×h_b so that the navigation bar is laid out at the bottom of the display area. Among them, h_screen is the height of the display area, and h_b is the height of the navigation bar.

In order to make the navigation bar appear at the bottom of the display area as shown in Figure 8b, it is necessary to obtain the layout as shown in Figure 8c after measuring the layout, and layout the navigation bar below the content area to be displayed. Therefore, the APP can call the Framework layer interface during the measurement layout process to mark the navigation bar in the area below the content to be displayed in the layout, resulting in a layout as shown in Figure 8c.

In Figure 8b, the height of the display area is h_screen, and the height of the navigation bar is 2×h_b. Therefore, the heights of the first area and the second area are both h_screen-2×h_b, and the sum of their heights is 2×(h_screen-2 ×h_b), plus the height h_b of the bottom navigation bar, it is obtained that the height of the display area based on the measurement layout needs to be modified to 2×(h_screen-2×h_b)+h_b=2×h_screen-3×h_b, This results in the layout shown in Figure 8c.

Step 83: Draw the content to be displayed except for the navigation bar after the layout in the actual display area. For example, the Framework layer calls the functions translate() and clitRect(), and the control function drawRenderNode() draws the content to be displayed in the first area on the upper left canvas, and draws the content to be displayed in the second area on the upper left canvas. In the upper canvas on the right.

Step 84: Enlarge the navigation bar and draw it at the bottom of the display area. For example, the Framework layer calls the scaling interface of Canvas (such as the scale interface) to double the length and width of the bottom navigation bar, and controls the function drawRenderNode() to draw the navigation bar at the bottom of the display area as shown in Figure 8b. in the area.

The technical solution provided by this embodiment is based on dividing the display area into two left and right areas to display the APP content, and adds an area to display the navigation bar, which optimizes the visual effect of the navigation bar. As shown in Figure 8d, the navigation bar is located below the entire interface. , compared with the navigation bar shown in Figure 5g, the user experience is improved.

Figures 9a and 5g show schematic diagrams of possible splitting of user interface elements (UI elements) using the method provided in Figure 5a. In order to avoid a UI element being split into two parts (as shown in Figure 9a, the first element 910 is split into a first part 911 and a second part 912 during the drawing stage), as another variation of the above embodiment, in electronic Before the device processes the canvas, the method for displaying the UI may also include: calculating the offset of the UI element that will be split during the drawing phase (ie, the above-mentioned first element), and providing it to the APP.

As shown in Figure 9b, since the UI elements laid out in the Android system are rectangular, coordinates (such as left, top, right, and bottom) can be used to describe the position of the UI element.

When the electronic device determines whether the UI element will be split during the drawing phase, it first traverses the top and bottom coordinate values of each UI element in the layout phase. If the top value is less than the height of the content area (i.e., the height of the display area) h, and the bottom value is greater than the content If the area height is high, it is determined that it will be split. Accordingly, the electronic device can provide that the UI element requires an offset distance of |h-top| or |bottom-h|, or the smaller value of |h-top| and |bottom-h|. Among them, it is better to set the offset distance to the smaller value of |h-top| and |bottom-h|. If the offset distance is |h-top|, you need to offset the UI elements that may be split and the elements below them downward as a whole; if the offset distance is |bottom-h|, you need to move the UI elements that may be split The element is offset upwards. In some embodiments, when the UI element needs to be offset downward, the offset distance can be greater than |h-top|, as long as the cutting position is located in the fourth area shown in Figure 9b after the offset is satisfied. In some embodiments, when the UI element needs to be offset upward, the offset distance can be greater than |bottom-h|, as long as the cutting position is located in the fifth area shown in Figure 9b after the offset is met.

Afterwards, the electronic device can send the offset information to the APP, and the APP decides whether to offset the UI elements that will be split. The offset information may be one or more of offset object (view) information, offset distance, and offset direction. When the APP decides to offset UI elements to avoid splitting of UI elements, the layout rules will be adjusted accordingly so that UI elements will not be split during the canvas adjustment stage. The APP can offset the content to be displayed as a whole, or only offset the UI elements that may be split depending on the situation (for example, when the offset is less than the distance between UI elements, only the UI elements that may be split can be offset, that is, compression and The distance between adjacent UI elements in the offset direction). For example, after the entire content to be displayed is shifted upward |bottom-h|, the drawing result obtained in the drawing stage is shown in Figure 9c. The first element 910 is displayed as a whole at the bottom of the left half of the screen; the content to be displayed is After the overall downward shift is greater than |h-top|, the drawing result obtained in the drawing stage is shown in Figure 9d. The first element 910 is displayed as a whole at the top of the right half of the screen. Offsetting only UI elements that may be fragmented can be used to solve the fragmented picture "Huawei" in Figure 5g. It can be seen that the downward offset required for the split picture in Figure 5g is less than the distance between this picture and the picture below "Folding Phone". Therefore, during the measurement layout process, the APP biases the "Huawei" picture downward. Just move it. After the split picture "Huawei" in Figure 5g is processed by the technical solution provided in this embodiment, the effect shown in Figure 9e can be obtained, further improving the user experience.

An embodiment of a device for displaying a user interface provided by an embodiment of the present application may include: a layout module and a display module. The layout module is used to layout 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 device is within a preset threshold interval, and obtain a layout view; the layout view includes a first part and a third part. Two parts, the widths of the first part and the second part are both equal to the second width, the first part is located above the second part, and the sum of the heights of the first part and the second part is less than or equal to the second height; where the second width is less than the second part One width, the first width is the width of the window, and the window is used to display the 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 to adjust the canvas so that the left half of the window displays the second One part, the right half of the window shows the second part; within it, the canvas is used to draw the user interface.

The above-mentioned device for displaying a user interface is applied in the above-mentioned electronic device (or in other words, the electronic device may include the device in this embodiment).

As a variation of the above embodiment, the above device may further include: a modification module, configured to layout the user interface of the application program according to the second width and the second height in the layout module and obtain the layout view in the first width of the display screen. When the height ratio is in the threshold interval, modify the width of the display screen obtained by the application to the second width, so that the size of the elements in the user interface is less than or equal to the first size, and the first size is the second width of the user interface on the display screen. The size of the element displayed in an aspect ratio where the second aspect ratio is smaller than the first aspect ratio.

As another variation of the above embodiment, the above device may further include: a traversal module, an offset determination module and a first providing module. The traversal module is used to layout the user interface of the application according to the second width and the second height in the layout module. , after obtaining the layout view, traverse the elements in the user interface to determine whether the first element exists; the top coordinate value of the first element is less than the first height, and the bottom coordinate value is greater than the first height; the offset determination module is used to determine the offset The offset and offset direction are used to make the first element appear in the left half or the right half of the window as a whole; the first providing module is used to provide the offset and offset direction to the application.

As another variation of the above embodiment, the above device may further include: a sensing module and a mapping module. The sensing module is configured to adjust the canvas in the display module so that the left half of the window displays the first part and the right half of the window displays the third part. After the second part, the click event of the user interface is sensed; the mapping module is used to map the click event from the first position to the second position; where the first position is the position of the click event in the right half of the display screen, and the second position is The first position is offset to the left by the second width and downward by the first height.

As another variation of the above embodiment, the above device may further include: a first setting module and a second providing module. The first setting module is used to layout the user interface of the application according to the second width and the second height in the layout module, Before obtaining the layout view, a first area is set in the left half of the window; the first area is used to display fixed content; and the second providing module is used to provide information in the first area to the application.

As another variation of the above embodiment, the above device may further include: a second setting module and a second providing module. The second setting module is used to set a second area in the left half of the window, and the second area is located in the first area. below, the content displayed in the second area is associated with the content displayed in the right half of the window; the second providing module is used to provide information in the second area to the application.

As another variation of the above embodiment, the above layout module is also used to: layout the user interface including the navigation bar according to the second width and the second height, and obtain a layout view including the navigation bar view; the navigation bar view is located in the second part Below; the sum of the heights of the navigation bar view and the first and second parts is less than or equal to the second height; the above display module is also used to: adjust the canvas so that the navigation bar view is displayed in the first and second parts in the window below.

As another variation of the above embodiment, the above display module is also used to: by enlarging the third canvas, the navigation bar view is displayed below the first part and the second part in the window.

Another device embodiment for displaying a user interface may include: a receiving module, a rule execution module and a layout module. The receiving module is configured to receive offsets and offset directions (such as receiving offsets and offsets sent by the Framework layer). direction); the rule execution module is used to formulate layout rules based on offset and offset direction; the layout module is used to lay out the user interface according to layout rules, So that the user interface is displayed on the display screen of the electronic device in two parts, the left and right parts, and the elements in the user interface remain intact. The device in this embodiment can be the APP in the above method embodiment, applied to electronic equipment (or in other words, the electronic device can include the device in this embodiment). Compared with the above processing to prevent UI elements from being split, The APP incorporates offset and offset direction into layout rules to prevent UI elements from being split and ensure the integrity of the final displayed UI elements.

Another device embodiment for displaying a user interface may include: a first receiving module, a first rule module and a first layout module. The first receiving module is configured to receive information of the first area (such as receiving the first information sent by the Framework layer). information of one area); the first rule module is used to formulate layout rules according to the information of the first area; the first layout module is used to lay out the user interface according to the layout rules, so that the user interface is displayed on the display screen of the electronic device in two parts: left and right parts , and the content in the first area is fixed. The device in this embodiment may be the APP in the above method embodiment, applied to an electronic device (or in other words, the electronic device may include the device in this embodiment). Compared with the above-mentioned processing to achieve double-sided display of the UI on the display screen with one side fixed and the other sliding, the APP incorporates the information in the first area into the layout rules, thus making it possible to further realize the APP's UI with one side fixed and the other sliding.

As a modification of the above device (APP) embodiment, the above device may also include: a second receiving module, a second rule module and a second layout module. The second receiving module is used to receive information of the second area; the second rule The module is used to formulate layout rules according to the information in the second area; the second layout module is used to layout the user interface according to the layout rules to cooperate with the above operations so that the content of the second area is associated with the content of the right part of the user interface, and further Improve user experience.

It can be understood that some or all of the steps or operations in the above embodiments are only examples, and the embodiments of the present application can also perform other operations or variations of various operations. In addition, various steps may be performed in a different order than presented in the above-described embodiments, and it is possible that not all operations in the above-described embodiments are performed.

An embodiment of the present application also provides an electronic device, including: one or more processors; a memory; and one or more computer programs, wherein the one or more computer programs are stored in the memory, and the one or multiple computer programs include instructions that, when executed by the device, cause the device to perform the method shown in the above embodiments.

Embodiments of the present application also provide a computer-readable storage medium. The computer-readable storage medium stores a computer program that, when run on a computer, causes the computer to execute the method provided by the embodiments of the present application.

An embodiment of the present application also provides a computer program product, which includes a computer program that, when run on a computer, causes the computer to execute the method provided by the embodiment of the present application.

In the embodiment of this application, "and/or" describes the association relationship of associated objects, indicating that there can be three relationships, for example, A and/or B, which can mean that A exists alone, A and B exist simultaneously, and B exists alone. Condition. Where A and B can be singular or plural. The character "/" generally indicates that the related objects are in an "or" relationship. "At least one of the following" and similar expressions refers to any combination of these items, including any combination of single or plural items. For example, at least one of a, b and c can mean: a, b, c, a and b, a and c, b and c or a and b and c, where a, b, c can be single, also Can be multiple.

Those of ordinary skill in the art can realize that each unit and algorithm step described in the embodiments disclosed herein can be implemented by a combination of electronic hardware, computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Skilled artisans may implement the described functionality using different methods for each specific application, but such implementations should not be considered beyond the scope of this application.

Those skilled in the art can clearly understand that for the convenience and simplicity of description, the specific working processes of the systems, devices and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be described again here.

In the several embodiments provided in this application, if any function is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the existing technology or the part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a storage medium, including Several instructions are used to cause a computer device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in various embodiments of this application. The aforementioned storage media include: U disk, mobile hard disk, read-only memory (Read-Only Memory; hereinafter referred to as: ROM), random access memory (Random Access Memory; hereinafter referred to as: RAM), magnetic disks or optical disks, etc. A medium on which program code can be stored.

The above are only specific embodiments of the present application. Any person familiar with the technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, and they should be covered by the protection scope of the present application. The protection scope of this application shall be subject to the protection scope of the claims.

Claims

A method for displaying a user interface, applied to electronic devices, characterized by including:

When the first aspect ratio of the display screen of the electronic device is within a preset threshold interval, the user interface of the application program is laid out according to the second width and the second height to obtain a layout view; the layout view includes a first part and a second part, the width of the first part and the second part is equal to the second width, the first part is located above the second part, and the sum of the heights of the first part and the second part is less than or Equal to the second height; wherein the second width is smaller than the first width, the first width is the width of a window, and the window is used to display the user interface; the second height is greater than the first height, The first height is the height of the window;

By adjusting the canvas, the left half of the window displays the first part, and the right half of the window displays the second part; wherein the canvas is used to draw the user interface.
The method according to claim 1, characterized in that adjusting the canvas includes:

By translating and/or cutting the canvas, the first canvas is located in the left half of the window, and the second canvas is located in the right half of the window; wherein, the first canvas is used on the canvas The part for drawing the first part, and the second canvas is the part of the canvas used for drawing the second part.
The method according to claim 1 or 2, characterized in that, before laying out the user interface of the application program according to the second width and the second height, and obtaining the layout view, it further includes:

When the first aspect ratio of the display screen is in the threshold interval, the width of the display screen obtained by the application program is modified to the second width, so that the element size in the user interface is smaller than Or equal to a first size, which is an element size of the user interface displayed in a second aspect ratio of the display screen, and the second aspect ratio is smaller than the first aspect ratio.
The method according to any one of claims 1 to 3, characterized in that, after laying out the user interface of the application program according to the second width and the second height, and obtaining the layout view, it further includes:

Traverse the elements in the user interface and determine whether there is a first element; the top coordinate value of the first element is less than the first height, and the bottom coordinate value is greater than the first height;

When the first element exists, determine the offset amount and offset direction so that the first element is displayed as a whole in the left half or the right half of the window;

Provide the offset and offset direction to the application.
The method of claim 4, wherein determining the offset amount and offset direction includes:

Use |top-h|, |h-bottom|, or the smaller value of |top-h| and |h-bottom| as the offset; where h is the first height;

When the offset is |top-h|, downward is used as the offset direction; when the offset is |h-bottom|, upward is used as the offset direction.
The method according to any one of claims 1 to 5, characterized in that by adjusting the canvas, the left half of the window displays the first part, and the right half of the window displays the second part. ,Also includes:

Sense click events on the user interface;

The click event is mapped from a first position to a second position; wherein the first position is the position of the click event in the right half of the display screen, and the second position is the first position Offset the second width to the left and offset the first height downward.
The method according to any one of claims 1 to 6, characterized in that, before laying out the user interface of the application program according to the second width and the second height, and obtaining the layout view, it further includes:

A first area is set in the left half of the window; the first area is used to display fixed content;

Information of the first area is provided to the application.
The method according to claim 7, further comprising: setting a second area in the left half of the window, the second area being located below the first area, and the second area displaying Content associated with content displayed in the right half of said window;

Information of the second area is provided to the application.
The method according to any one of claims 1 to 8, characterized in that, laying out the user interface of the application program according to the second width and the second height to obtain a layout view, further comprising:

The user interface including the navigation bar is laid out according to the second width and the second height to obtain a layout view including the navigation bar view; the navigation bar view is located below the second part; the navigation bar view is connected to the third part. The sum of the heights of one part and the second part is less than or equal to the second height;

By adjusting the canvas, the left half of the window displays the first part, and the right half of the window displays the second part, including: adjusting the canvas so that the navigation bar view is in the window, Shown below the first and second parts.
The method according to claim 9, characterized in that by adjusting the canvas so that the navigation bar view is displayed below the first part and the second part in the window, the method includes:

By enlarging the third canvas, the navigation bar view is displayed below the first part and the second part in the window; wherein the third canvas is used to draw the navigation bar on the canvas. part of the view.
A method for displaying a user interface, applied to electronic devices, characterized by including:

Receive offset and offset direction;

Develop layout rules based on the offset and offset direction;

The user interface is laid out according to the layout rules, so that the user interface is displayed on the display screen of the electronic device in two parts, the left and right parts, and the elements in the user interface remain intact.
A method for displaying a user interface, applied to electronic devices, characterized by including:

Receive information from the first area;

Develop layout rules based on the information in the first area;

The user interface is laid out according to the layout rules, so that the user interface is displayed on the display screen of the electronic device in two parts, the left and right parts, and the content in the first area is fixed.
The method of claim 12, further comprising:

Receive information from the second area;

Develop layout rules based on the information in the second area;

The user interface is laid out 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.
A device for displaying a user interface, applied to electronic equipment, characterized by including:

a layout module, configured to lay 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 device is within a preset threshold interval, and obtain a layout view; The layout view includes a first part and a second part, the widths of the first part and the second part are both equal to the second width, the first part is located above the second part, and the first part and the second part are The sum of heights is less than or equal to the second height; wherein the second width is less than the first width, the first width is the width of a window, and the window is used to display the user interface; the second height Greater than a first height, which is the height of the window;

A display module is configured to adjust the canvas so that the left half of the window displays the first part and the right half of the window displays the second part; wherein the canvas is used to draw the user interface.
The device according to claim 14, wherein the display module is further configured to: translate and/or cut the canvas so that the first canvas is located in the left half of the window and the second canvas is located in the left half of the window. The right half of the window; wherein, the first canvas is the part of the canvas used to draw the first part, and the second canvas is the part of the canvas used to draw the second part.
The device according to claim 14 or 15, further comprising: a modification module configured to layout the user interface of the application program according to the second width and the second height by the layout module and before obtaining the layout view, When the first aspect ratio of the display screen is in the threshold interval, the width of the display screen obtained by the application program is modified to the second width, so that the element size in the user interface is smaller than Or equal to a first size, which is an element size of the user interface displayed at a second aspect ratio of the display screen, and the second aspect ratio is smaller than the first aspect ratio.
The device according to any one of claims 14 to 16, further comprising:

A traversal module configured to traverse the elements in the user interface and determine whether the first element exists after the layout module layouts the user interface of the application program according to the second width and the second height and obtains the layout view; The top coordinate value of the first element is less than the first height, and the bottom coordinate value is greater than the first height;

An offset determination module, used to determine the offset amount and offset direction so that the first element is displayed as a whole in the left half or the right half of the window;

A first providing module is used to provide the offset amount and offset direction to the application program.
The device according to claim 17, wherein the offset determination module is further configured to, when the first element exists, change |top-h|, |h-bottom|, or |top-h| The smaller value of |h-bottom| is used as the offset; where h is the first height; it is also used when the offset is |top-h|, downward is used as the offset direction; when When the offset is |h-bottom|, upward will be used as the offset direction.
The device according to any one of claims 14 to 18, further comprising:

A sensing module configured to sense click events on the user interface after the display module adjusts the canvas so that the left half of the window displays the first part and the right half of the window displays the second part;

A mapping module for mapping the click event from a first position to a second position; wherein the first position is the position of the click event in the right half of the display screen, and the second position is The first position is offset to the left by the second width and is offset downward by the first height.
The device according to any one of claims 14 to 19, further comprising:

A first setting module configured to set a first area in the left half of the window before the layout module layouts the user interface of the application program according to the second width and the second height and obtains a layout view; the first setting module One area is used to display fixed content;

The second providing module is used to provide the information of the first area to the application program.
The device according to claim 20, further comprising:

The second setting module is used to set a second area in the left half of the window, the second area is located below the first area, and the content displayed in the second area is different from the right half of the window. Relevance of displayed content;

The second providing module is used to provide the information of the second area to the application program.
The device according to any one of claims 14 to 21, characterized in that the layout module is further configured to: lay out the user interface including the navigation bar according to the second width and the second height, and obtain the user interface including the navigation bar view. Layout view; the navigation bar view is located below the second part; the sum of the heights of the navigation bar view, the first part and the second part is less than or equal to the second height;

The display module is also configured to adjust the canvas so that the navigation bar view is displayed below the first part and the second part in the window.
The device according to claim 22, wherein the display module is further configured to: display the navigation bar view in the first part and the second part in the window by enlarging the third canvas. below.
A device for displaying a user interface, applied to electronic equipment, characterized by including:

Receiving module, used to receive offset and offset direction;

a rule execution module, used to formulate layout rules based on the offset and offset direction;

A layout module, configured to lay out the user interface according to the layout rules, so that the user interface is displayed on the display screen of the electronic device in two parts, the left and right parts, and the elements in the user interface remain intact.
A device for displaying a user interface, applied to electronic equipment, characterized by including:

The first receiving module is used to receive information in the first area;

A first rule module, configured to formulate layout rules based on the information of the first area;

The first layout module is configured to lay out the user interface according to the layout rules, so that the user interface is displayed in two parts on the display screen of the electronic device, and the content in the first area is fixed.
The device according to claim 25, further comprising:

The second receiving module is used to receive information in the second area;

A second rule module, configured to formulate layout rules based on the information of the second area;

A second layout module, configured to lay 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.
An electronic device, characterized by comprising the device according to any one of claims 14 to 23.
A computer-readable storage medium, characterized in that the computer-readable storage medium stores a computer program that, when run on a computer, causes the computer to execute the method described in any one of claims 1 to 13.