Display method of column layout and related device

Abstract

The embodiment of the invention provides a column layout display method and a related device, the method is applied to electronic equipment, and the method can comprise the steps that when the electronic equipment is in a first physical state, a first interface of a first application is displayed, and the layout of the first interface is a first column layout; receiving a first user operation; in response to the first user operation, the physical state of the electronic equipment is converted into a second physical state from the first physical state, the electronic equipment displays a second interface of the first application, the layout of the second interface is a second column layout, the second column layout comprises a side navigation column, and the first column layout and the second column layout are different. The embodiment of the invention provides multiple column layouts, can adapt to the physical state of the electronic equipment, and is convenient for a user to operate.

Description

Technical Field

[0001] The present application relates to the technical field of electronic equipment, and in particular to a display method and related devices for a column layout. Background Art

[0002] With the widespread use of large-screen electronic devices (such as tablets, foldable screen mobile phones, etc.), users are accustomed to using the above large-screen electronic devices to manage files, notes or matters. When document management applications such as files, notes or matters are running, users click different options to display different contents, thereby switching between pages.

[0003] The navigation structure of the bottom tab is usually used. A navigation bar is displayed at the bottom of a large-screen electronic device, and the user clicks an option provided on the navigation bar to switch to the page corresponding to the option. For large-screen electronic devices, due to the large screen size, the navigation method of the bottom tab will cause inconvenience to the user's operation and affect the user's experience. Summary of the invention

[0004] The embodiments of the present application provide a method and a related device for displaying a column layout, which provide a variety of column layouts, can adapt to the physical state of the electronic device, and are convenient for user operation.

[0005] In a first aspect, an embodiment of the present application provides a method for displaying a column layout, which is applied to an electronic device, and the method includes: when the electronic device is in a first physical state, displaying a first interface of a first application, and the layout of the first interface is a first column layout; receiving a first user operation; in response to the first user operation, the physical state of the electronic device is changed from the first physical state to a second physical state, and the electronic device displays a second interface of the first application, and the layout of the second interface is a second column layout, the second column layout includes a side navigation bar, and the first column layout and the second column layout are different.

[0006] In the embodiment of the present application, as the physical state of the electronic device changes, the layout of the first interface of the first application will also change, thereby adapting to the screen characteristics of the electronic device. In addition, the electronic device can also provide a side navigation bar navigation for the interface of the first application to facilitate user operation.

[0007] In one possible implementation, when the electronic device is in the first physical state, the first interface is displayed through the first display area; when the electronic device is in the second physical state, the second interface is displayed through the second display area; the width of the first display area is different from the width of the second display area.

[0008] In an embodiment of the present application, when the physical state of the electronic device changes, the display area for displaying the interface of the first application will also change. When the display area is relatively wide, a side navigation bar navigation interface is provided for the first application. The side navigation bar can increase the information display density on the display screen of the electronic device, expand the capacity of the navigation area, and make the information hierarchy of the first application flatter. This facilitates user operation and improves the user experience.

[0009] In one possible implementation, the width of the first display area is less than or equal to a first threshold, the first column layout is a bottom navigation bar, the width of the second display area is greater than the first threshold, and the second column layout includes the side navigation bar and at least one column.

[0010] In the embodiment of the present application, if the width of the first display area is less than or equal to the first threshold, it means that the electronic device has a relatively small horizontal area for displaying content in a certain physical state, and a bottom navigation bar is used; if the width of the second display area is greater than the first threshold, it means that the electronic device has a relatively large horizontal area for displaying content in a certain physical state, and a side navigation bar and at least one column are used. In this way, the display area of ​​the electronic device can be fully utilized, and the information display density on the display area can be increased.

[0011] In one possible implementation, the width of the second display area is greater than the first threshold and less than or equal to a second threshold, the second column layout includes the side navigation bar and a first column, wherein the first column is used to display the content under the selected option in the side navigation bar, and the second threshold is greater than the first threshold.

[0012] In an embodiment of the present application, when the width of the second display area is within the range of the first threshold and the second threshold, it indicates that the electronic device has a relatively large horizontal area for displaying content in a certain physical state. In order to make full use of the display area, the layout of the first interface of the first application includes a side navigation bar and a first column.

[0013] In one possible implementation, the width of the second display area is greater than a second threshold, and the second column layout includes the side navigation bar, a first column, and a second column, wherein the first column is used to display the content under the selected option in the side navigation bar, and the second column is used to display the content under the selected option in the first column, and the second threshold is greater than the first threshold.

[0014] In an embodiment of the present application, when the width of the second display area is greater than the second threshold, it indicates that the electronic device has a larger horizontal area for displaying content in a certain physical state. In order to make full use of the display area, the layout of the first interface of the first application includes a side navigation bar, a first column, and a second column.

[0015] In one possible implementation, the width of the first display area is greater than a second threshold, the first column layout includes a side navigation bar, a first column, and a second column, the width of the second display area is greater than the first threshold and less than or equal to the second threshold, the second column layout includes the side navigation bar and the first column, wherein the first column is used to display the content under the selected option in the side navigation bar, the second column is used to display the content under the selected option in the first column, and the second threshold is greater than the first threshold.

[0016] In the embodiment of the present application, when the electronic device switches from the first physical state to the second physical state, since the width of the display area becomes shorter, the electronic device can switch the layout of the first interface of the first application from the side navigation bar, the first sub-column and the second sub-column to the side navigation bar and the first sub-column. Thus, the display area can be fully utilized and the information display density on the display screen can be increased.

[0017] It is understandable that when the electronic device is in different physical states, the width of the display screen / display screen is different. The electronic device can determine the layout of the first interface of the first application according to the width of the display screen / display area. After the width of the physical display screen / display area of ​​the electronic device changes, the layout of the first interface can be switched to the layout corresponding to the above width. The layout switching of the first interface includes but is not limited to: the first layout is switched from the bottom navigation bar to the side navigation bar and at least one sub-column, and the first layout is switched from the side navigation bar and at least one sub-column to the bottom navigation bar.

[0018] In one implementation, the first layout switches from the bottom navigation bar to the side navigation bar and at least one sub-column, including but not limited to: the first layout switches from the bottom navigation bar to the side navigation bar and the first sub-column, and the first layout switches from the bottom navigation bar to the side navigation bar, the first sub-column, and the second sub-column.

[0019] In one implementation, the first layout switches from the side navigation bar and at least one sub-column to the bottom navigation bar, including but not limited to: the first layout switches from the side navigation bar and the first sub-column to the bottom navigation bar, and the first layout switches from the side navigation bar, the first sub-column and the second sub-column to the bottom navigation bar.

[0020] In a possible implementation manner, the electronic device is a foldable electronic device, and when the first physical state is the unfolded state, the second physical state is a bent state or a folded state.

[0021] In the embodiment of the present application, the unfolded state, the bent state and the folded state of the foldable electronic device can be changed mutually. When the physical state of the foldable electronic device is changed, the first interface of the first application is switched to the layout of the first interface corresponding to the size of the display screen in order to adapt to the size of the display screen.

[0022] In a possible implementation, when the first physical state is the expanded state, the layout of the first interface includes a side navigation bar, a first column, and a second column, and the first interface displaying the first application includes:

[0023] The first display area includes a first area and a second area, and the first area and the second area are in the same plane;

[0024] The first area and the second area in the same plane display the first interface of the first application including the side navigation bar, the first sub-column and the second sub-column, wherein the first sub-column is used to display the content under the selected option in the side navigation bar, and the second sub-column is used to display the content under the selected option in the first sub-column.

[0025] In an embodiment of the present application, the electronic device is a foldable electronic device. When the first physical state is the unfolded state, the first area and the second area included in the first display area are on the same plane. In order to utilize the display area of ​​the electronic device, a side navigation bar, a first column and a second column can be used to increase the information display density on the display screen.

[0026] In a possible implementation, when the second physical state is the bent state, the layout of the first interface includes a side navigation bar and a first column, and the first interface displaying the first application includes:

[0027] The second display area includes a first area and a second area, the first area and the second area are not in the same plane, and the plane where the first area is located intersects with the plane where the second area is located;

[0028] Displaying the side navigation bar of the first application through the first area;

[0029] The first column layout of the first application is displayed through the second area.

[0030] In an embodiment of the present application, the electronic device is a foldable electronic device. When the second physical state is a bent state, the first area and the second area included in the first display area are not on the same plane. In order to utilize the display area of ​​the electronic device, a side navigation bar and a first column can be used. The first area is used to display the side navigation bar, and the second area is used to display the first column, which can increase the information display density on the display screen.

[0031] In a possible implementation, when the foldable electronic device is in the folded state, the layout of the first interface is a bottom navigation bar, and the first column layout for displaying the first application includes:

[0032] The second display area includes a first area and a second area, and a light emitting surface of the first area is opposite to a light emitting surface of the second area;

[0033] The bottom navigation bar layout of the first application is displayed through the first area or the second area.

[0034] In an embodiment of the present application, the electronic device is a foldable electronic device. When the second physical state is a folded state, the light emitting surface of the first area and the light emitting surface of the second area are opposite to each other. In order to utilize the display area of ​​the electronic device, a bottom navigation bar can be used.

[0035] In a second aspect, an embodiment of the present application provides a method for displaying a graphical user interface (GUI), which is applied to an electronic device, wherein when the electronic device is in a first physical state, the method for displaying a column layout provided by the first aspect or any one of the implementations of the first aspect is displayed through a first display area, and when the electronic device is in a second physical state, the method for displaying a column layout provided by the first aspect or any one of the implementations of the first aspect is displayed through a second display area.

[0036] In a third aspect, an electronic device is provided in an embodiment of the present application, the electronic device comprising: one or more processors; a memory; wherein the memory is coupled to the one or more processors, the memory is used to store computer program code, the computer program code comprises computer instructions, and the one or more processors call the computer instructions to enable the electronic device to execute the method of driving a sound-emitting device to produce sound described in the first aspect or any possible implementation of the first aspect.

[0037] In a fourth aspect, the present application provides a chip or a chip system, the chip or chip system comprising at least one processor and a communication interface, the communication interface and the at least one processor are interconnected through a line, and the at least one processor is used to run a computer program or instruction to execute the method of driving a sound-generating device to generate sound as described in the first aspect or any possible implementation of the first aspect. The communication interface in the chip may be an input / output interface, a pin, or a circuit, etc.

[0038] In a possible implementation, the chip or chip system described above in the embodiment of the present application further includes at least one memory, in which instructions are stored. The memory may be a storage unit inside the chip, such as a register, a cache, etc., or a storage unit of the chip (e.g., a read-only memory, a random access memory, etc.).

[0039] In a fifth aspect, an embodiment of the present application provides a computer storage medium, which stores a computer program. When the computer program is executed by a processor, the computer executes the column layout display method described in the first aspect or any possible implementation of the first aspect.

[0040] In a sixth aspect, an embodiment of the present application provides a computer program product, which, when executed on a communication device, enables the communication device to execute a method for displaying a column layout as described in the first aspect or any possible implementation of the first aspect.

[0041] It should be understood that the description of technical features, technical solutions, beneficial effects or similar language in this application does not imply that all features and advantages can be realized in any single embodiment. On the contrary, it is understood that the description of features or beneficial effects means that specific technical features, technical solutions or beneficial effects are included in at least one embodiment. Therefore, the description of technical features, technical solutions or beneficial effects in this specification does not necessarily refer to the same embodiment. Furthermore, the technical features, technical solutions and beneficial effects described in the present embodiment can also be combined in any appropriate manner. Those skilled in the art will understand that the embodiment can be realized without one or more specific technical features, technical solutions or beneficial effects of a specific embodiment. In other embodiments, additional technical features and beneficial effects can also be identified in a specific embodiment that does not embody all embodiments. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] The following is an introduction to the drawings used in the embodiments of the present application.

[0043] Figure 1A is a schematic diagram of the width and length of an electronic device provided by an embodiment of the present application;

[0044] Figure 1B Schematic diagrams of screens of various common electronic devices provided by embodiments of the present application are exemplified;

[0045] Figure 2A is a schematic diagram of an unfolded state of a foldable screen mobile phone provided in an embodiment of the present application;

[0046] Figure 2B is a schematic diagram of a folding screen mobile phone provided in an embodiment of the present application in a folded state;

[0047] Figure 2C is a schematic diagram of a folding state of a folding screen mobile phone provided in an embodiment of the present application;

[0048] Figure 3 Schematic diagrams of interfaces showing the bottom navigation bar layout of note-taking applications displayed on various common electronic devices are shown by way of example;

[0049] Figure 4 A schematic structural diagram of an electronic device 100 is shown;

[0050] Figure 5 is a software structure block diagram of the electronic device 100 according to an embodiment of the present application;

[0051] Fig. 6A Shown is a schematic diagram of an interface of a two-column layout provided in an embodiment of the present application;

[0052] Figure 6B The following is a schematic diagram of a three-column layout interface provided in an embodiment of the present application.

[0053] FIG. 7A to FIG. 7C The following example shows a UI with a column layout displayed on a tablet computer;

[0054] FIG. 8A to FIG. 8C The following example shows a UI with a column layout displayed on a mobile phone;

[0055] 9A to 9D An example of a UI with a column layout displayed on a foldable screen mobile phone is shown;

[0056] Fig. 10A and Fig. 10B The various components in the tablet computer are shown in an exemplary manner. Figure 7A-7C A collaborative relationship in the scenario shown;

[0057] Fig.11A and Fig. 11B The various components in the mobile phone are shown in an exemplary manner. Figure 8A-8C A collaborative relationship in the scenario shown;

[0058] Figure 12A-12C The various components of a foldable screen mobile phone are shown in an exemplary manner. Figure 9A-9D A collaborative relationship in the scenario shown;

[0059] Fig.13 A column layout display method is provided in an embodiment of the present application. DETAILED DESCRIPTION

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

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

[0062] The term "user interface (UI)" in the following embodiments of the present application refers to a medium interface for interaction and information exchange between an application or operating system and a user, which realizes the conversion between the internal form of information and the form acceptable to the user. The user interface is a source code written in a specific computer language such as Java and extensible markup language (XML). The interface source code is parsed and rendered on an electronic device, and finally presented as content that the user can recognize, such as pictures, text, buttons and other controls. A control, also called a widget, is a basic element of a user interface. Typical controls include a toolbar, menu bar, text box, button, scrollbar, picture and text. The properties and contents of controls in the interface are defined by tags or nodes, such as XML through <textview> 、 <imgview> 、 <videoview>The controls contained in the interface are specified by nodes such as . A node corresponds to a control or attribute in the interface. After parsing and rendering, the node is presented as user-visible content. In addition, many applications, such as hybrid applications, usually also contain web pages in their interfaces. A web page, also known as a page, can be understood as a special control embedded in the application interface. A web page is source code written in a specific computer language, such as hypertext markup language (GTML), cascading style sheets (CSS), JavaScript (JS), etc. The web page source code can be loaded and displayed as user-recognizable content by a browser or a web page display component with similar functions to a browser. The specific content contained in a web page is also defined by tags or nodes in the web page source code. For example, GTML is defined by 、 、 <video> 、 <canvas>To define the elements and attributes of a web page.

[0063] The most common form of user interface is graphical user interface (GUI), which refers to the user interface related to computer operation displayed in a graphical way. It can be visual interface elements such as text, icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, widgets, etc. displayed on the display screen of electronic devices.

[0064] First, the following concepts are introduced with reference to the accompanying drawings: the width and length of the display screen, and the width and length of the user interface.

[0065] In the present application, when a user holds an electronic device, the side of the display screen corresponding to the XOY plane in the spatial coordinate system XYZ (e.g., the side whose first angle is less than the first threshold) is called the wide side of the display screen, and the length of the wide side is the wide side of the display screen. The side of the display screen perpendicular to the wide side is called the long side of the display screen, and the length of the long side of the display screen is the length of the display screen. The XOY plane in the spatial coordinate system XYZ is parallel to the ground. The electronic device can obtain the first angle through sensors such as gyroscope sensors. The first threshold is configured by the electronic device system. The first threshold can be 10°, 20°, 30°, etc., which is not limited here.

[0066] like Figure 1A Schematic diagram of the width and length of an electronic device provided in an embodiment of the present application. Figure 1A In (a), side AB is the wide side of the display screen, and the corresponding size of the wide side is the width of the display screen. Side AC is the long side of the display screen, and the corresponding size of the long side is the height of the display screen. Figure 1A In (b), side AC is the wide side of the display screen, and the size corresponding to the wide side is the width of the display screen. Side AB is the long side of the display screen, and the size corresponding to the long side is the length of the display screen.

[0067] Figure 1A The electronic device shown in (b) may be Figure 1A The electronic device shown in (a) is rotated (for example, 90 degrees), so, Figure 1A The wide side of the display shown in (a) corresponds to Figure 1A The long side of the display in (b), Figure 1A The long side of the display screen shown in (a) corresponds to Figure 1A The wide side of the display in (b).

[0068] It is understandable that the user interface layout refers to the width, height, etc. of the user interface, as well as the size and position of each interface element in the user interface. The source code file of the application may include a file for defining the user interface layout, such as an extensible markup language (XML) file in Android. In order to adapt to electronic devices with display screens / display areas of different sizes, the user interface layout of the application can be adaptive when it is developed. Specifically, the width of the user interface can be determined according to the width of the display screen / display area, and the height of the user interface can be determined according to the height of the display screen / display area. For example, the width of the user interface can be the same as the width of the display screen / display area, and the height of the user interface can be the same as the height of the display screen / display area, so that the user interface can fill the entire display screen / display area.

[0069] The following concepts are introduced below with reference to the accompanying drawings: portrait screen state, landscape screen state, portrait screen display, landscape screen display, and portrait and landscape screen switching.

[0070] The posture of the electronic device includes but is not limited to the vertical screen state and the horizontal screen state. Figure 1A The electronic device shown in (a) is in a vertical screen state. Figure 1A The posture of the electronic device shown in (b) is in landscape mode.

[0071] Portrait display, that is, the user interface displayed when the electronic device is in portrait mode is portrait display.

[0072] Horizontal screen display, that is, the user interface displayed when the electronic device is in the horizontal screen state is a horizontal screen display.

[0073] The horizontal and vertical screen switching refers to the situation where the display state of the user interface switches from the vertical screen display to the horizontal screen display. Or, the situation where the display state of the user interface switches from the horizontal screen display to the vertical screen display.

[0074] Different electronic devices may have different screen characteristics such as screen size, screen shape, and screen resolution. In the embodiments of the present application, parameters such as screen size, screen aspect ratio, screen shape, and screen resolution may be referred to as the "screen characteristics" of the display screen. For the same electronic device, the area used for display in the display screen (referred to as the display area) may also be different in different scenarios. Accordingly, the display area of ​​the same electronic device may have different "screen characteristics" such as size, aspect ratio, shape, and resolution in different scenarios.

[0075] Figure 1B Screen diagrams of various common electronic devices provided in the embodiments of the present application are exemplified.

[0076] like Figure 1B As shown, electronic devices that users use more frequently may include Figure 1B The mobile phone shown in (a) Figure 1B (b) shows a tablet computer and Figure 1B The foldable screen mobile phone shown in (c) and so on.

[0077] Different electronic devices may have display screens of different sizes, shapes, and resolutions, and thus have different screen characteristics. During the use of the same electronic device, the display area of ​​the display screen may be variable, and thus the display area may also have different screen characteristics. For example Figure 1B The foldable screen mobile phone shown in (c) can have screen characteristics such as different sizes, shapes, aspect ratios, and resolutions in the unfolded state, the folded state, and the bent state.

[0078] Figure 1B (a) shows an example screen diagram of a mobile phone. For example, the screen size of the mobile phone can be 174.6mm x 85.4mm, the screen aspect ratio is X1:Y1=16:9, the screen shape is a rectangular narrow-border full screen, and the screen resolution is 2244 x 1080 pixels.

[0079] Figure 1B (b) shows a schematic diagram of the screen of a tablet computer. For example, the screen size of the tablet computer can be 291.71 mm x 191.12 mm, the screen aspect ratio is X2:Y2=16:10, the screen shape is rectangular, and the screen resolution is 2880 x 1840 pixels.

[0080] Figure 1B (c) shows a schematic diagram of the screen of a foldable screen mobile phone. By way of example, in the unfolded state, the size of the foldable screen mobile phone can be 160.4mmⅹ141.1mm, the screen aspect ratio is X3:Y3=10.3:9, and the screen resolution is 2272ⅹ1984 pixels; in the folded state, the size of the foldable screen mobile phone can be 160.4mmⅹ72.7mm, the screen aspect ratio is X4:Y3=21.3:9, and the screen resolution is 2560ⅹ1080 pixels.

[0081] Among them, screen resolution can be understood as the number of pixels in the horizontal and vertical directions of the display screen, and the unit is pixels (pixels, ps). It is generally expressed as "vertical pixels x horizontal pixels". It should be understood that under the condition of the same screen size, the higher the resolution, the clearer the screen and the more delicate the picture. For example, an electronic device with a resolution of 720 x 1280 indicates that the screen of the electronic device has 720 pixels in the width direction and 1280 pixels in the height direction.

[0082] The aspect ratio of the screen can also be called "aspect ratio" or "screen ratio". The aspect ratio of the screen is X:Y, which can be understood as the ratio of the width of the display screen to the height of the display screen is X:Y. The units of width and height can be length units, such as millimeters, centimeters, etc., or pixels, such as dots per inch (DPI), or density-independent pixels (dp).

[0083] It should be noted that density-independent pixels are virtual pixel units used when defining UI layouts, and are used to identify layout dimensions or positions in a density-independent manner. For example, a density-independent pixel is equal to a physical pixel on a 160dpi screen. At runtime, the system transparently handles any scaling of dp units as needed based on the actual density of the screen in use. dp units can be converted to screen pixels in the following way: resolution = dp x (dpi / 160). You should always use dp units when defining your application's UI to ensure that the UI is displayed properly on screens of different densities.

[0084] The screen shape may vary depending on the type of electronic device and the manufacturer. For example, the display screen of a mobile phone may generally be rectangular, and may further be designed as a water drop screen, a notch screen, a narrow-frame full screen, etc., which will not be described in detail in the embodiments of this application.

[0085] Next, the physical states of a foldable screen mobile phone are introduced by way of example, including the unfolded state, the bent state and the folded state.

[0086] See also Figure 2A , Figure 2A is a schematic diagram of an unfolded state of a folding screen mobile phone provided in an embodiment of the present application. Figure 2A (a) shows a schematic diagram of a foldable screen mobile phone from one viewing angle. Figure 2A (b) shows a schematic diagram of a foldable screen mobile phone from another viewing angle.

[0087] like Figure 2A As shown in (a), the folding screen mobile phone may include a first display screen 200 and a second display screen 300. The folding screen mobile phone can be in an unfolded state, a folded state or a bent state.

[0088] When the foldable screen mobile phone is in the unfolded state, the first display screen 200 is in the flattened state. Figure 2A As shown in (a), the bending angle α of the first display screen 200 is approximately 180 degrees, but not limited thereto. The bending angle of the first display screen 200 may also be greater than or equal to 170 degrees and less than or equal to 180 degrees. The present application does not limit the specific value of the bending angle of the first display screen 200 in the unfolded state. When the folding screen mobile phone is in the unfolded state, the light emitting surface of the first display screen 200 and the light emitting surface of the second display screen 300 are opposite to each other.

[0089] The first display screen 200 may include three areas, namely, the first area 201, the second area 202, and the third area 203. The third area 203 is bendable and is located at the bending part of the folding screen mobile phone. The two ends of the bending part of the folding screen mobile phone are connected to the first area 201 and the second area 202 respectively. The bending angle of the first display screen 200 can also be understood as: the angle α between the plane where the first area 201 is located and the plane where the second area 202 is located, that is, Figure 2A The angle α between the two ends of the bending part shown in (a). Figure 2A (a), when the first display screen 200 is in a flat state, the first area 201 and the second area 202 are equivalent to being in the same plane.

[0090] The second display screen 300 may include three areas, namely, a fourth area 301, a fifth area 302, and a sixth area 303. When the folding screen mobile phone is in the unfolded state, the first area 201 and the fourth area 301 are opposite to each other, the second area 202 and the sixth area 303 are opposite to each other, and the third area 203 and the fifth area 302 are opposite to each other.

[0091] like Figure 2A As shown in (b), the fifth area 302 of the second display screen 300 is bendable and is located at the bending part of the folding screen mobile phone. The bending part of the folding screen mobile phone is also connected to the fourth area 301 and the sixth area 303 at both ends. It can be understood that the bending angle α of the first display screen 200 is also: 360 degrees - the bending angle α of the second display screen 300 ′ , that is, α=360-α ′ The bending angle of the second display screen 300 can also be understood as: the angle between the plane where the fourth area 301 is located and the plane where the sixth area 303 is located.

[0092] like Figure 2A As shown in (b), when the second display screen 300 is in a flat state, the fourth area 301 and the sixth area 303 are equivalent to being in the same plane.

[0093] In some embodiments, Figure 2A The folding screen mobile phone in the unfolded state shown is partially folded (at this time, the angle between the two ends of the bending part of the folding screen mobile phone can be changed from α to β) to obtain the folding screen mobile phone in the bent state, as follows Figure 2B shown.

[0094] See also Figure 2B , Figure 2B is a schematic diagram of a folding screen mobile phone provided in an embodiment of the present application in a folded state. Figure 2B (a) shows a schematic diagram of a foldable screen mobile phone from one viewing angle. Figure 2B (b) shows a schematic diagram of a foldable screen mobile phone from another viewing angle.

[0095] like Figure 2B As shown in (a), when the folding screen mobile phone is in a bent state, the first display screen 200 is bent, and the plane where the first area 201 is located intersects with the plane where the second area 202 is located, as shown in FIG. Figure 2B As shown in (a), the bending angle β of the first display screen 200 can be approximately 120 degrees. Without limitation thereto, the bending angle of the first display screen 200 can also be greater than 0 degrees and less than 180 degrees, such as but not limited to 60 degrees, 90 degrees, 100 degrees, 120 degrees, etc. The present application does not limit the specific value of the bending angle of the first display screen 200 in the bent state. Figure 2B (b) Description and Figure 2B The above is similar to (a) and will not be described in detail.

[0096] In some embodiments, Figure 2A The foldable screen mobile phone in the unfolded state shown is folded (at this time, the angle between the two ends of the bending part of the foldable screen mobile phone can be changed from α to γ) to obtain the foldable screen mobile phone in the folded state. Figure 2B The folding screen mobile phone in the bent state shown is folded (at this time, the angle between the two ends of the bending part of the folding screen mobile phone can be changed from β to γ) to obtain the folding screen mobile phone in the folded state, as follows Figure 2C shown.

[0097] Figure 2C is a schematic diagram of a folding state of a folding screen mobile phone provided in an embodiment of the present application. Figure 2C As shown in (a), when the folding screen mobile phone is in the folded state, the first display screen 200 is bent or folded, such as Figure 2C As shown in (a), the bending angle γ of the first display screen 200 can be approximately 0 degrees. Not limited thereto, the bending angle of the first display screen 200 can also be greater than or equal to 0 degrees and less than or equal to 20 degrees. The present application does not limit the specific value of the bending angle of the first display screen 200 in the folded state.

[0098] It can be understood that when the foldable screen mobile phone is in a folded state, a bent state, or an unfolded state, the bending angle of the display screen 194 can be different, but the specific value of the bending angle of the display screen 194 is not limited.

[0099] like Figure 2C (a) and Figure 2C As shown in (b), when the foldable screen mobile phone is in a folded state, the first area 201 and the second area 202 are opposite to each other, the fourth area 301 and the sixth area 303 are opposite to each other, and the third area 203 and the fifth area 302 are opposite to each other.

[0100] For the convenience of description, this application takes the example that the folding screen mobile phone is in a folded state when the bending angle is less than the first angle threshold, the folding screen mobile phone is in an unfolded state when the bending angle is greater than the second angle threshold, and the folding screen mobile phone is in a bent state when the bending angle is greater than or equal to the first angle threshold and less than or equal to the second angle threshold. Exemplarily, the first angle threshold is 30 degrees and the second angle threshold is 160 degrees.

[0101] like Figure 2A-2C As shown, when the foldable screen mobile phone is in the unfolded state, if the first display screen 200 faces upward, the user interface is displayed through the first display screen 200, and if the second display screen 300 faces upward, the user interface is displayed through the second display screen 300. When the foldable screen mobile phone is in the folded state, if the fourth area 301 faces upward, the user interface is displayed through the fourth area 301 (optionally, and the fifth area 302). If the sixth area 303 faces upward, the user interface is displayed through the sixth area 303 (optionally, and the fifth area 302).

[0102] When an application in an electronic device is running, it can switch between multiple pages to display different contents. The multiple pages may include a home page of the application and at least one content page. The home page interface may be used to display one or more first-level tags in the application to the user. One content page corresponds to one first-level tag. When a user needs to view the details of a first-level tag, the electronic device may display the content page of the first-level tag on the display area of ​​the display screen, so that the user can view the specific functions in the first-level tag.

[0103] For example, taking a management application running in an electronic device as an example, the management application can be used to manage notes, documents, pictures, audio, compressed packages, application files, and the like. Figure 3 Schematic diagrams of interfaces showing the bottom navigation bar layout of note-taking applications displayed on various common electronic devices are shown by way of example.

[0104] Figure 3 (a) shows a schematic diagram of the interface layout of the bottom navigation bar of the note application displayed on the mobile phone, Figure 3 (b) shows a schematic diagram of the interface layout of the bottom navigation bar of a tablet computer displaying a note application. Figure 3 (c) shows a schematic diagram of the interface of the bottom navigation bar layout of the note application displayed on a foldable screen mobile phone.

[0105] like Figure 3 As shown, the bottom navigation bar layout includes a menu display area 101, a bottom navigation bar 102 and a content display area 103. The menu display area 101 is located above the display screen of the electronic device, the content display area 103 is located in the middle of the display screen of the electronic device, and the bottom navigation bar 102 is located below the display screen of the electronic device.

[0106] The bottom navigation bar 102 includes a note control 1021 and a to-do control 1022, and the pages can be switched by clicking different controls.

[0107] For example, when the user wants to view the details of a note, the user can click on the note control 1021. In response to the click operation on the note control 1021, the electronic device can display the content page corresponding to the note control 1021 in the content display area 103, for example, including the content of note 1. Similarly, when the user wants to view the details of a to-do item, the user can click on the to-do control 1022. In response to the click operation on the to-do control 1022, the electronic device can display the content page corresponding to the to-do control 1022 in the content display area 103 ( Figure 3 not shown).

[0108] from Figure 3 As can be seen from (a), for a small-sized mobile phone, the display mode of the bottom navigation bar 102 is adapted to the size of the mobile phone. For example, the display positions of the note control 1021 and the to-do control 1022 are convenient for user operation. Figure 3 (b) and Figure 3 As can be seen from (c), for large-sized electronic devices, such as tablet computers or unfolded foldable screen phones, due to the wide screen, the display positions of the note control 1021 and the to-do control 1022 are far from the user's hand-held position, resulting in inconvenience for the user to operate. In addition, the display mode of the bottom navigation bar 102 will result in insufficient information display density, wasting screen space.

[0109] In order to allow users to operate management applications more conveniently on electronic devices of various sizes, electronic devices can use different column layouts to display page content of management applications according to the screen characteristics of the display screen / display area, thereby improving user operation efficiency. The column layout includes but is not limited to a bottom navigation bar layout, a two-column layout, and a three-column layout, wherein the two-column layout includes a side navigation bar and a first column, and the three-column layout includes a side navigation bar, a first column, and a second column.

[0110] Next, the structure of an exemplary electronic device provided in an embodiment of the present application is introduced.

[0111] See also Figure 4 , Figure 4 A schematic structural diagram of an electronic device 100 is shown.

[0112] like Figure 4 As shown, the electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 1201, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, an angle sensor 180M, etc.

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

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

[0115] The controller can generate operation control signals according to the instruction operation code and timing signal to complete the control of instruction fetching and execution.

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

[0117] The charging management module 140 is used to receive charging input from a charger. The charger may be a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 140 may receive charging input from a wired charger through the USB interface 130. In some wireless charging embodiments, the charging management module 140 may receive wireless charging input through a wireless charging coil of the electronic device 100. While the charging management module 140 is charging the battery 142, it may also power the electronic device through the power management module 141.

[0118] The power management module 141 is used to connect the battery 142, the charging management module 140 and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140, and supplies power to the processor 110, the internal memory 1201, the display screen 194, the camera 193, and the wireless communication module 160. The power management module 141 can also be used to monitor parameters such as battery capacity, battery cycle number, battery health status (leakage, impedance), etc. In some other embodiments, the power management module 141 can also be set in the processor 110. In other embodiments, the power management module 141 and the charging management module 140 can also be set in the same device.

[0119] The wireless communication function of the electronic device 100 can be implemented through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor and the baseband processor.

[0120] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve the utilization of antennas. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In some other embodiments, the antenna can be used in combination with a tuning switch.

[0121] The mobile communication module 150 can provide solutions for wireless communications including 2G / 3G / 4G / 5G, etc., applied to the electronic device 100. The mobile communication module 150 may include at least one filter, a switch, a power amplifier, a low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves from the antenna 1, and filter, amplify, and process the received electromagnetic waves, and transmit them to the modulation and demodulation processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modulation and demodulation processor, and convert it into electromagnetic waves for radiation through the antenna 1. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the processor 110. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the same device as at least some of the modules of the processor 110.

[0122] The wireless communication module 160 can provide wireless communication solutions including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR), etc., which are applied to the electronic device 100. The wireless communication module 160 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, modulates the frequency of the electromagnetic wave signal and performs filtering, and sends the processed signal to the processor 110. The wireless communication module 160 can also receive the signal to be sent from the processor 110, modulate the frequency of it, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2.

[0123] In some embodiments, the antenna 1 of the electronic device 100 is coupled to the mobile communication module 150, and the antenna 2 is coupled to the wireless communication module 160, so that the electronic device 100 can communicate with the network and other devices through wireless communication technology. The wireless communication technology may include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), wideband code division multiple access (WCDMA), time-division code division multiple access (TD-SCDMA), long term evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technology. The GNSS may include a global positioning system (GPS), a global navigation satellite system (GLONASS), a Beidou navigation satellite system (BDS), a quasi-zenith satellite system (QZSS) and / or a satellite based augmentation system (SBAS).

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

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

[0126] In some embodiments, the display screen 194 of the electronic device 100 is a folding screen. In some embodiments, the display screen 194 may be an integrally formed flexible folding screen. Optionally, the first display screen and the second display screen may be different display areas on the flexible folding screen. In some embodiments, the display screen 194 may also be a spliced ​​display screen composed of two flexible display screens. Optionally, the first display screen and the second display screen may be these two flexible display screens. When the electronic device 100 is in a bent state and a folded state, the first display screen and the second display screen may be divided into at least two areas, respectively. In some embodiments, the display screen 194 may also be a spliced ​​screen composed of a plurality of rigid screens and a flexible screen located between any two rigid screens and other connecting components. For example, the electronic device 100 may include four rigid screens and two flexible screens, wherein two rigid screens and a flexible screen between the two rigid screens constitute the first display screen of the electronic device 100, and the other two rigid screens and a flexible screen between the two rigid screens constitute the second display screen of the electronic device 100. Examples of the first display screen and the second display screen can be found above. Figure 2A-2C The first display screen 200 and the second display screen 300 are not described in detail for the time being.

[0127] The electronic device 100 can implement the shooting function through the ISP, camera 193, video codec, GPU, display screen 194 and application processor, etc. In some embodiments, the electronic device 100 can implement face unlocking, access application lock, etc. through the face information obtained by the shooting function.

[0128] The ISP is used to process the data fed back by the camera 193. For example, when taking a photo, the shutter is opened, and the light is transmitted to the camera photosensitive element through the lens. The light signal is converted into an electrical signal, and the camera photosensitive element transmits the electrical signal to the ISP for processing and converts it into an image visible to the naked eye. The ISP can also perform algorithm optimization on the noise and brightness of the image. The ISP can also optimize the exposure, color temperature and other parameters of the shooting scene. In some embodiments, the ISP can be set in the camera 193.

[0129] The camera 193 is used to capture still images or videos. The object generates an optical image through the lens and projects it onto the photosensitive element. The photosensitive element can be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, and then passes the electrical signal to the ISP to be converted into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into an image signal in a standard RGB, YUV or other format. In some embodiments, the electronic device 100 may include 1 or N cameras 193, where N is a positive integer greater than 1.

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

[0131] The internal memory 1201 can be used to store computer executable program codes, which include instructions. The internal memory 1201 may include a program storage area and a data storage area. Among them, the program storage area may store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc. The data storage area may store data created during the use of the electronic device 100 (such as audio data, a phone book, etc.), etc. In addition, the internal memory 1201 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc. The processor 110 executes various functional applications and data processing of the electronic device 100 by running instructions stored in the internal memory 1201, and / or instructions stored in a memory provided in the processor.

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

[0133] The audio module 170 is used to convert digital audio information into analog audio signal output, and is also used to convert analog audio input into digital audio signals. The audio module 170 can also be used to encode and decode audio signals. In some embodiments, the audio module 170 can be arranged in the processor 110, or some functional modules of the audio module 170 can be arranged in the processor 110.

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

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

[0136] Microphone 170C, also called "microphone" or "microphone", is used to convert sound signals into electrical signals. When making a call or sending a voice message, the user can make a sound by putting his mouth close to microphone 170C to input the sound signal into microphone 170C. The electronic device 100 can be provided with at least one microphone 170C. In other embodiments, the electronic device 100 can be provided with two microphones 170C, which can not only collect sound signals but also realize noise reduction function. In other embodiments, the electronic device 100 can also be provided with three, four or more microphones 170C to realize collection of sound signals, noise reduction, identification of sound source, realization of directional recording function, etc.

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

[0138] The pressure sensor 180A is used to sense the pressure signal and can convert the pressure signal into an electrical signal. In some embodiments, the pressure sensor 180A can be set on the display screen 194. There are many types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, capacitive pressure sensors, etc. A capacitive pressure sensor can be a parallel plate including at least two conductive materials. When a force acts on the pressure sensor 180A, the capacitance between the electrodes changes. The electronic device 100 determines the intensity of the pressure based on the change in capacitance. When a touch operation acts on the display screen 194, the electronic device 100 can obtain the corresponding touch operation intensity based on the detection signal of the pressure sensor 180A. The electronic device 100 can also calculate the position of the touch area on the display screen 194 where the touch operation acts based on the detection signal of the pressure sensor 180A (referred to as the touch position for short). The electronic device 100 can also calculate the shape of the above-mentioned touch area based on the detection signal of the pressure sensor 180A.

[0139] In some embodiments, touch operations acting on the same touch position but with different touch operation strengths may correspond to different operation instructions. For example, when a touch operation with a touch operation strength less than a first pressure threshold acts on a short message application icon, an instruction to view a short message is executed. When a touch operation with a touch operation strength greater than or equal to the first pressure threshold acts on a short message application icon, an instruction to create a new short message is executed.

[0140] The gyro sensor 180B can detect the magnitude of the angular velocity of the electronic device 100 in various directions (generally three axes, namely the x, y and z axes), and can be used to determine the motion posture of the electronic device 100. Optionally, the gyro sensor 180B can be arranged on a circuit board of the electronic device 100. The electronic device 100 can determine whether the bending angle of the electronic device 100 has changed, or whether the electronic device 100 has flipped, based on the detection signal of the gyro sensor 180B. In some embodiments, the gyro sensor 180B can also be used for anti-shake shooting. For example, when the shutter is pressed, the gyro sensor 180B detects the angle of the shaking of the electronic device 100, calculates the distance that the lens module needs to compensate based on the angle, and allows the lens to offset the shaking of the electronic device 100 through reverse movement to achieve anti-shake. The gyro sensor 180B can also be used for navigation and somatosensory game scenes.

[0141] The acceleration sensor 180E can detect the magnitude of the acceleration of the electronic device 100 in various directions (generally three axes). When the electronic device 100 is stationary, the magnitude and direction of gravity can be detected. It can also be used to identify the posture of the electronic device, and is applied to applications such as horizontal and vertical screen switching, pedometers, etc. Optionally, the acceleration sensor 180E can be set on the circuit board of the electronic device 100. The electronic device 100 can determine whether the bending angle of the electronic device 100 has changed, or whether the electronic device 100 has flipped, based on the detection signal of the acceleration sensor 180E.

[0142] In some embodiments, the electronic device 100 may include a plurality of acceleration sensors 180E and / or a plurality of gyroscope sensors 180B. The display screen 194 is a folding screen, and the display screen 194 includes a first display area and a second display area. When the electronic device 100 is in an unfolded state, the first display area may be in a flattened state, and when the electronic device 100 is in a bent state and a folded state, the first display area may be bent. When the first display area is bent, it may be divided into two display areas, and the planes where the two display areas are located intersect. The above-mentioned multiple acceleration sensors 180E and / or multiple gyroscope sensors 180B may be respectively arranged on the circuit boards on the sides of the above-mentioned two display areas. Therefore, the electronic device 100 may determine whether the bending angle of the electronic device 100 changes, or whether the electronic device 100 is flipped, based on the detection signals of the multiple acceleration sensors 180E and / or multiple gyroscope sensors 180B.

[0143] The fingerprint sensor 180H is used to collect fingerprints. The electronic device 100 can use the collected fingerprint characteristics to implement fingerprint unlocking, access application locks, fingerprint photography, fingerprint call answering, etc.

[0144] The touch sensor 180K is also called a "touch device". In some embodiments, the touch sensor 180K can be arranged on the display screen 194, and the touch sensor 180K and the display screen 194 form a touch screen, also called a "touch screen". The touch sensor 180K is used to detect touch operations acting on or near it. The touch sensor can transmit the detected touch operation to the application processor to determine the position of the touch area on the display screen 194 where the touch operation acts, the shape of the touch area, and thus determine the type of touch event. The electronic device 100 can provide visual output related to the touch operation through the display screen 194. In other embodiments, the touch sensor 180K can also be arranged on the surface of the electronic device 100, which is different from the position of the display screen 194.

[0145] The angle sensor 180M can obtain angle information and convert it into a usable electrical signal output. In some embodiments, the angle sensor 180M can be set in the display screen 194 to detect the bending angle of the electronic device 100. The processor 110 can determine the physical state of the electronic device 100 and whether the physical state of the electronic device 100 changes according to the detection signal of the angle sensor 180M. For a foldable electronic device, the physical state includes an unfolded state, a bent state or a folded state. For a non-foldable electronic device, the physical state includes a horizontal screen state and a vertical screen state.

[0146] The present application does not limit the specific type of sensor used to detect the physical state.

[0147] The key 190 includes a power key, a volume key, etc. The key 190 may be a mechanical key or a touch key. The electronic device 100 may receive key input and generate key signal input related to user settings and function control of the electronic device 100.

[0148] Motor 191 can generate vibration prompts. Motor 191 can be used for incoming call vibration prompts, and can also be used for touch vibration feedback. For example, touch operations acting on different applications (such as taking pictures, audio playback, etc.) can correspond to different vibration feedback effects. For touch operations acting on different areas of the display screen 194, motor 191 can also correspond to different vibration feedback effects. Different application scenarios (for example: time reminders, receiving messages, alarm clocks, games, etc.) can also correspond to different vibration feedback effects. The touch vibration feedback effect can also support customization.

[0149] Indicator 192 may be an indicator light, which may be used to indicate charging status, power changes, messages, missed calls, notifications, etc.

[0150] The SIM card interface 195 is used to connect a SIM card. The SIM card can be connected to and separated from the electronic device 100 by inserting it into the SIM card interface 195 or pulling it out from the SIM card interface 195. The electronic device 100 can support 1 or N SIM card interfaces, where N is a positive integer greater than 1. The SIM card interface 195 can support Nano SIM cards, Micro SIM cards, SIM cards, and the like. Multiple cards can be inserted into the same SIM card interface 195 at the same time. The types of the multiple cards can be the same or different. The SIM card interface 195 can also be compatible with different types of SIM cards. The SIM card interface 195 can also be compatible with external memory cards. The electronic device 100 interacts with the network through the SIM card to implement functions such as calls and data communications. In some embodiments, the electronic device 100 uses an eSIM, i.e., an embedded SIM card. The eSIM card can be embedded in the electronic device 100 and cannot be separated from the electronic device 100.

[0151] The software system of the electronic device 100 may adopt a layered architecture, an event-driven architecture, a micro-core architecture, a micro-service architecture, or a cloud architecture. For example, the software system of the layered architecture may be an Android system. The embodiment of the present application takes the Android system of the layered architecture as an example to exemplify the software structure of the electronic device 100.

[0152] Figure 5 It is a software structure block diagram of the electronic device 100 according to an embodiment of the present application.

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

[0154] The application layer can include a series of application packages.

[0155] like Figure 5 As shown, the application layer may include file applications, note applications, event applications, diary applications, camera applications, gallery applications, instant messaging applications, and the like.

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

[0157] like Figure 5 As shown, the application framework layer may include a column layout module, a window manager, a content provider, a resource manager, a view system, an activity manager, a notification manager, and the like.

[0158] The column layout module is used to determine the column layout of the application according to the width of the display screen, wherein the column layout includes a single bottom navigation bar layout, a two-column layout and a three-column layout. Further, the two-column layout includes a side navigation bar and a first column, and the three-column layout includes a side navigation bar, a first column and a second column.

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

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

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

[0162] The view system includes visual controls, such as controls for displaying text, controls for displaying images, etc. The view system can be used to build applications. The display interface can be composed of one or more views. For example, the display interface of an application, including the display interface of the application's notification messages, can include a view for displaying text and a view for displaying images.

[0163] The activity manager is used to manage the activities corresponding to the applications in the application layer. It is responsible for starting, switching, and scheduling the components in the system, as well as managing and scheduling the applications.

[0164] The safe area module is used to provide a visible window range, and the content of the application in the safe area is not affected by "rounded corners", "bangs", and "small black bars". That is, due to the screen characteristics of the device itself, the content in the "rounded corners", "bangs", "small black bars" and other areas of the electronic device 100 cannot be displayed.

[0165] Android Runtime includes core libraries and virtual machines. Android runtime is responsible for scheduling and management of the Android system.

[0166] The core library consists of two parts: one is the function that needs to be called by the Java language, and the other is the Android core library.

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

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

[0169] The surface manager is used to manage the display subsystem and provide the fusion of 2D and 3D layers for multiple applications.

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

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

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

[0173] The kernel layer is the layer between hardware and software. The kernel layer contains at least display driver, camera driver, audio driver, and sensor driver. Among them, the sensor driver can be used to drive multiple sensors in the control hardware, such as Figure 4 The sensors shown include a pressure sensor 180A, a gyro sensor 180B, an acceleration sensor 180E, a touch sensor 180K, an angle sensor 180M, and the like.

[0174] The following is an illustrative description of the workflow of the software and hardware of the electronic device 100 in conjunction with the column layout scenario.

[0175] In response to the user's operation on the first application, the electronic device 100 runs the first application, and the activity manager starts the main activity (main activity) corresponding to the first application. The activity manager sends a layout instruction to load the first application to the column layout module. The column layout module obtains the width and height of the display screen of the electronic device 100 from the window manager, and obtains the safety area of ​​the first application from the safety area module. The column layout module determines the layout content of the user interface of the first application according to the width and safety area of ​​the display screen. The layout content of the user interface of the first application includes the visibility and display range of the side navigation bar, the column layout and the bottom navigation bar. The column layout module reports the layout content of the user interface of the first application to the activity manager, and the activity manager draws and displays the user interface of the first application on the display screen.

[0176] Taking the file management application as an example, the column layout provided by this application is described in combination with the UI interface provided on the electronic device.

[0177] Fig. 6A Shown is a schematic diagram of an interface with a two-column layout provided in an embodiment of the present application.

[0178] from Fig. 6A As can be seen from (a), in the two-column layout, the electronic device can divide the display area of ​​the display screen into two parts, including a side navigation bar 121 and a first column 122.

[0179] exist Fig. 6A In (a), the side navigation bar 121 is the navigation bar of the application, which may include multiple first-level groups and multiple second-level groups. Furthermore, one or more second-level groups may correspond to a first-level group. The first sub-column 122 includes a menu display area and multiple display areas, and the multiple display areas are used to display different content. It is understandable that the first sub-column 122 is used to display the content of the first-level group or the second-level group in the side navigation bar 121.

[0180] For example, if the first level group 1 is selected in the side navigation bar 121, the menu display area 1221 of the first sub-column 122 corresponds to one or more second level groups under the first level group 1, and the multiple display areas are used to display the content corresponding to different second level groups under the first level group 1, including but not limited to the display area 1222 of content 1, the display area 1223 of content 2 and the display area 1224 of content 3. Further, if the display area 1222 of content 1 is clicked, the detail page of content 1 is displayed in the first sub-column 122 ( Fig. 6A (a) not shown).

[0181] Fig. 6A (b) is a two-column layout corresponding to the file management application. Fig. 6A As can be seen from (b), the first-level grouping in the side navigation bar 121 may include one or more of the following: "Recent", "Favorites", "Files", "Quick Access", "Tags", "Locations", etc. A first-level grouping may correspond to one or more second-level groups. For example, the first-level grouping "Quick Access" may correspond to one or more of the following second-level groups: "Documents", "Pictures", "Audio", "Compressed Packages", "Installation Packages", "Application Files", etc. The first-level grouping "Tags" may correspond to one or more of the following second-level groups: "Important", "Expiring", "Work", "Life", "Travel", "Office", "Learning" and "Entertainment", etc.

[0182] exist Fig. 6A In the side navigation bar 121 of (b), if the first-level group "Recent" is selected, the second-level groups under "Recent" will be displayed in the menu display area 1221 in the first column 122, including but not limited to: "All", "Documents", "Pictures", "Audio", "Compressed Package", "Installation Package", etc. If the second-level group "All" is selected in the menu display area 1221, the content corresponding to the second-level group "All" will be displayed in the display area in the first column 122. For example, the content from "Honor Share" is displayed in the display area 1222, the content from "Instant Messenger 1" is displayed in the display area 1223, and the content from "Instant Messenger 2" is displayed in the display area 1224.

[0183] Furthermore, if document 1 in the display area 1221 is clicked, the detail page of document 1 is displayed in the first column 122 ( Fig. 6A (a) is not shown), for example, displayed under the display area 1223, or covering the existing content in the first column 122.

[0184] Figure 6B Shown is a schematic diagram of an interface of a three-column layout provided in an embodiment of the present application.

[0185] from Figure 6B As can be seen from (a), in the three-column layout, the electronic device can divide the display area of ​​the display screen into three parts, including a side navigation bar 121, a first sub-column 122 and a second sub-column 123.

[0186] in, Figure 6B For an introduction to the side navigation bar 121 and the first sub-bar 122 shown in (a), see Fig. 6A The relevant description in (a) will not be repeated here.

[0187] exist Figure 6B In (a), the first level group 1 is selected in the side navigation bar 121, and the first sub-column 122 is used to display the content under the first level group 1. The second sub-column 123 is used to display the detail page of the content under the first level group 1 in the first sub-column 122. For example, if the display area of ​​content 1 is currently selected, the second sub-column 123 displays the detail page of content 1.

[0188] Fig. 6A (b) is a three-column layout corresponding to the file management application, where: Figure 6B For an introduction to the side navigation bar 121 and the first sub-bar 122 shown in (b), see Fig. 6A The relevant description in (b) will not be repeated here.

[0189] exist Figure 6B In (b), the first-level group "Recent" is selected in the side navigation bar 121, and the first sub-column 122 corresponds to the content under "Recent". When "Document 1" is selected in the second sub-column 123, the second sub-column 123 is used to display the detail page corresponding to Document 1 (the content of the second-level group "Glory Share" under the first-level group "Recent"), for example, including but not limited to the label of Content 1, the saving time, the opening time, the pictures and texts of the document, etc.

[0190] The column layout method provided by this application is described in conjunction with a UI interface provided on an electronic device.

[0191] Scenario 1: When the electronic device is a tablet, FIG. 7A to FIG. 7C The following example shows a UI with a column layout displayed on a tablet computer.

[0192] Fig. 7A The system desktop 111 of the tablet computer involved in the embodiment of the present application is exemplarily shown.

[0193] like Fig. 7A As shown, a page with application icons is displayed in the desktop 111, and the page includes multiple application icons (for example, a settings application icon, an application market application icon, a gallery application icon, a browser application icon, a file management application icon, etc.). A page indicator is also displayed below the multiple application icons to indicate the positional relationship between the currently displayed page and other pages. A tray area is displayed below the page indicator. Among them, the tray area includes multiple tray icons, for example, a camera application icon, an address book application icon, a phone application icon, and a message application icon. The tray area remains displayed when the page is switched. In some embodiments, the above-mentioned page may also include multiple application icons and a page indicator. The page indicator may not be part of the page and exist independently. The above-mentioned tray icon is also optional, and the embodiments of the present application are not limited to this.

[0194] from Fig. 7A It can be seen that the tablet computer is in a horizontal screen state. The tablet computer can detect a user operation of opening a file management application, such as clicking a desktop icon of the file management application, and in response to the operation, obtain the height (the size corresponding to the side A1B1) and width (the size corresponding to the side A1C1) of the display screen / display area of ​​the tablet computer in the horizontal screen state. When the width of the display screen / display area (the size corresponding to the side A1C1) is greater than the first threshold, the side navigation bar is used.

[0195] In a possible implementation, if the width of the display screen / display area (the size corresponding to the side A1C1) is greater than the second threshold, the tablet computer determines that the user interface layout of the file management application is a three-column layout, and expands the side navigation bar by default.

[0196] In another possible implementation, when a three-column display layout is set in the configuration file of the file management application, the tablet computer determines that the user interface layout of the file management application is a three-column layout, and expands the side navigation bar.

[0197] Afterwards, the tablet computer determines the size, position, etc. of each element in the three-column layout of the file management application. At this point, the user interface of the three-column layout content to be displayed is determined. Finally, the tablet computer can render the user interface to be displayed and display the following in the first display area 1111: Figure 7B The three-column layout of the user interface is shown.

[0198] exist Figure 7B In the embodiment, the three-column layout displayed by the first display area 1111 includes a side navigation bar 121, a first sub-column 122, and a second sub-column 123. The description of the side navigation bar 121, the first sub-column 122, and the second sub-column 123 can be referred to. Fig. 6A and Figure 6B , I will not go into details here.

[0199] When a user changes the state of holding or placing the tablet computer while using the tablet computer, the posture of the tablet computer may change. When the posture of the tablet computer changes, the display form of the user interface in the tablet computer may change.

[0200] Figure 7C A schematic diagram of a tablet computer displaying a user interface in a vertical screen state. When a user turns the tablet computer from a horizontal screen state to a vertical screen state, the width (the size corresponding to the side A1B1) and height (the size corresponding to the side A11C) of the display screen in the vertical screen state are obtained. When the width of the display screen / display area (the size corresponding to the side A1B1) is greater than the first threshold, the side navigation bar is used.

[0201] In a possible implementation, if the width of the display screen / display area (the size corresponding to the side A1B1) is less than the second threshold, the tablet computer determines that the user interface layout of the file management application is a two-column layout, and expands the side navigation bar by default.

[0202] In another possible implementation, when a two-column display layout is set in a configuration file of the file management application, the tablet computer determines that the user interface layout of the file management application is a two-column layout.

[0203] In another possible implementation, if a column display layout is set in the configuration file of the file management application, but it is not a two-column display layout, if the width of the display screen / display area (the size corresponding to edge A1B1) is greater than the second threshold, the tablet computer determines that the user interface layout of the file management application is a two-column layout, and the side navigation bar is expanded by default.

[0204] Afterwards, the tablet computer determines the size, position, etc. of each element in the two-column layout of the file management application. At this point, the user interface of the two-column layout content to be displayed is determined. Finally, the tablet computer can render the user interface to be displayed and display it in the second display area 1112 as shown in FIG. Figure 7C The user interface shown is a two-column layout.

[0205] exist Figure 7C In the embodiment, the second display area 1112 displays a two-column layout including a side navigation bar 121 and a first column 122. The description of the side navigation bar 121 and the first column 122 can be referred to. Fig. 6A and Figure 6B , I will not go into details here.

[0206] It should be noted that if the tablet computer is switched from the portrait mode to the landscape mode, the interface of the first application changes from Figure 7C The side navigation bar and the first column switch to Figure 7B The side navigation bar, first column, and second column are shown.

[0207] Scenario 2: When the electronic device is a mobile phone, FIG. 8A to FIG. 8C The diagram exemplarily shows a UI with a column layout displayed on a mobile phone.

[0208] in:

[0209] Fig. 8A The system desktop 112 of the mobile phone involved in the embodiment of the present application is exemplarily shown.

[0210] like Fig. 8A As shown, a page with application icons is displayed in the desktop 112, and the page includes multiple application icons (for example, a settings application icon, an application market application icon, a gallery application icon, a browser application icon, a file management application icon, etc.). A page indicator is also displayed below the multiple application icons to indicate the positional relationship between the currently displayed page and other pages. A tray area is displayed below the page indicator. Among them, the tray area includes multiple tray icons, for example, a camera application icon, an address book application icon, a phone application icon, and a message application icon. The tray area remains displayed when the page is switched. In some embodiments, the above-mentioned page may also include multiple application icons and a page indicator. The page indicator may not be part of the page and exist independently. The above-mentioned tray icon is also optional, and the embodiments of the present application are not limited to this.

[0211] from Fig. 8A It can be seen that the mobile phone is in portrait mode. The mobile phone can detect the user operation of opening the file management application, such as clicking the desktop icon of the file management application, and in response to the operation, obtain the height (the size corresponding to the side A2C2) and width (the size corresponding to the side A2B2) of the display screen / display area of ​​the mobile phone in portrait mode. When the width of the display screen / display area (the size corresponding to the side A2B2) is less than or equal to the first threshold, the side navigation bar is not used. Display as Figure 8B The bottom navigation bar layout shown in FIG. 3 is a description of the bottom navigation bar layout, which will not be repeated here.

[0212] In a possible implementation, when the width of the display screen / display area (the size corresponding to the side A2B2) is greater than the first threshold, the side navigation bar is used. In the case where a two-column display layout is set in the configuration file of the file management application, if the width of the display screen / display area (the size corresponding to the side A2B2) is less than the second threshold, the side navigation bar is not displayed by default, and the following is displayed in the first display area 1121: Figure 8B The bottom navigation bar layout shown.

[0213] When a user is using a mobile phone, when the state of holding or placing the mobile phone changes, the posture of the mobile phone will change. When the posture of the mobile phone changes, the display form of the user interface in the mobile phone may change.

[0214] Figure 8C A schematic diagram of a mobile phone displaying a user interface in landscape mode. When a user turns a mobile phone from portrait mode to landscape mode, the width (size corresponding to side A2C2) and height (size corresponding to side A2B2) of the display screen / display area in landscape mode are obtained. When the width of the display screen / display area (size corresponding to side A2C2) is greater than a first threshold, a side navigation bar is used.

[0215] In a possible implementation, if the width of the display screen / display area (the size corresponding to the side A2C2) is smaller than the second threshold, it is determined that the user interface layout of the file management application is a two-column layout.

[0216] In another possible implementation, a two-column display layout is set in the configuration file of the file management application, and the mobile phone determines that the user interface layout of the file management application is a two-column layout, and expands the side navigation bar.

[0217] After that, the mobile phone determines the size, position, etc. of each element in the two-column layout of the file management application. At this point, the user interface of the two-column layout content to be displayed is determined. Finally, the mobile phone can render the user interface to be displayed and display it in the second display area 1122 as shown in FIG. Figure 8C The user interface shown is a two-column layout.

[0218] exist Figure 8C In the embodiment, the two-column layout displayed by the second display area 1122 includes a side navigation bar 121 and a first column 122. The description of the side navigation bar 121 and the first column 122 can be referred to. Fig. 6A and Figure 6B , I will not go into details here.

[0219] It should be noted that if the mobile phone is switched from portrait mode to landscape mode, the interface of the first application will change from Figure 8C The side navigation bar and the first column switch to Figure 8B The bottom navigation bar shown.

[0220] Scenario 3: When the electronic device is a foldable screen mobile phone, Figure 2A-2C An example of the physical state of a foldable phone. Figure 9A-9D The following example shows a UI with a column layout displayed on a foldable screen mobile phone.

[0221] Fig.9A The system desktop 113 of the folding screen mobile phone involved in the embodiment of the present application is exemplified.

[0222] like Fig.9A As shown, a page with application icons is displayed in the desktop 113, and the page includes multiple application icons (for example, a setting application icon, an application market application icon, a gallery application icon, a browser application icon, a file management application icon, etc.). A page indicator is also displayed below the multiple application icons to indicate the positional relationship between the currently displayed page and other pages. A tray area is displayed below the page indicator. Among them, the tray area includes multiple tray icons, for example, a camera application icon, an address book application icon, a phone application icon, and a message application icon. The tray area remains displayed when the page is switched. In some embodiments, the above-mentioned page may also include multiple application icons and a page indicator. The page indicator may not be part of the page and exist separately. The above-mentioned tray icon is also optional, and the embodiments of the present application are not limited to this.

[0223] from Fig.9A It can be seen that the foldable screen mobile phone is in the unfolded state. The foldable screen mobile phone can detect the user operation of opening the file management application, such as clicking the desktop icon of the file management application, and in response to the operation, obtain the height (the size corresponding to the side A3B3) and width (the size corresponding to the side A3C3) of the display screen / display area of ​​the foldable screen mobile phone in the unfolded state. When the width of the display screen / display area (the size corresponding to the side A3C3) is greater than the first threshold, the side navigation bar is used.

[0224] In one possible implementation, if the width of the display screen / display area (the size corresponding to edge A3C3) is greater than the second threshold, the foldable screen mobile phone determines that the user interface layout of the file management application is a three-column layout, and the side navigation bar is expanded by default.

[0225] In another possible implementation, a three-column display layout is set in the configuration file of the file management application, and the foldable screen mobile phone determines that the user interface layout of the file management application is a three-column layout, and the side navigation bar is expanded by default.

[0226] Afterwards, the foldable screen mobile phone determines the size, position, etc. of each element in the three-column layout of the file management application. At this point, the user interface of the three-column layout content to be displayed is determined. Finally, the foldable screen mobile phone can render the user interface to be displayed, and the first area 201 and the second area 202 included in the first display area 1131 are displayed as follows: Fig. 9B The three-column layout of the user interface is shown.

[0227] exist Fig. 9B In the embodiment, the three-column layout displayed by the first display area 1131 includes the side navigation bar 121, the first sub-column 122 and the second sub-column 123. The description of the side navigation bar 121, the first sub-column 122 and the second sub-column 123 can be referred to. Fig. 6A and Figure 6B , I will not go into details here.

[0228] Further, from Figure 2A It can be seen that when the foldable screen mobile phone is in the unfolded state, if the first display screen 200 is facing upward, the three-column layout user interface is displayed through the first area 201 and the second area 202 (further, also including the third area 203) of the first display screen 200; if the second display screen 300 is facing upward, the three-column layout user interface is displayed through the fourth area 301 and the sixth area 303 (further, also including the fifth area 302) of the second display screen 300.

[0229] Fig. 9B The folding screen mobile phone is shown with the first display screen 200 facing upward, and the three-column layout is displayed through the first display screen 200.

[0230] When using a mobile phone, users can Fig. 9B The foldable screen mobile phone in the unfolded state shown is partially folded to obtain the foldable screen mobile phone in the bent state. When the physical state of the foldable screen mobile phone changes, the display form of the user interface in the foldable screen mobile phone may change.

[0231] Fig. 9C A schematic diagram of a foldable screen mobile phone displaying a user interface in a bent state. When a user turns a foldable screen mobile phone from an unfolded state to a folded state, the width (determined by the size corresponding to the side A3C3 and the angle β) and height (the size corresponding to the side A2B2) of the display screen / display area in the bent state are obtained. When the width of the display screen / display area (determined by the size corresponding to the side A3C3 and the angle β) is greater than a first threshold, a side navigation bar is used.

[0232] In one possible implementation, if the width of the display screen / display area (determined by the size corresponding to edge A3C3 and the angle β) is greater than the first threshold and less than the second threshold, the foldable screen mobile phone determines that the user interface layout of the file management application is a two-column layout, and the side navigation bar is expanded by default.

[0233] In another possible implementation, a two-column display layout is set in the configuration file of the file management application, and the foldable screen mobile phone determines that the user interface layout of the file management application is a two-column layout, and expands the side navigation bar.

[0234] Afterwards, the foldable screen mobile phone determines the size, position, etc. of each element in the two-column layout of the file management application. At this point, the user interface of the two-column layout content to be displayed is determined. Finally, the foldable screen mobile phone can render the user interface to be displayed and display it in the second display area 1132 as shown in FIG. Fig. 9C The user interface shown is a two-column layout.

[0235] exist Fig. 9C In the embodiment, the side navigation bar 121 in the two-column layout is displayed through the first area 201 of the second display area 1132, and the first column 122 in the two-column layout is displayed through the second area 202 of the second display area 1132. The description of the side navigation bar 121 and the first column 122 can be referred to. Fig. 6A and Figure 6B , I will not go into details here.

[0236] Further, from Figure 2B It can be seen that when the foldable screen mobile phone is in a bent state, if the first display screen 200 faces upward, the side navigation bar in the two-column layout is displayed through the second area 202 of the first display screen 200, and the first column in the two-column layout is displayed through the first area 201 of the first display screen 200. If the second display screen 300 faces upward, the side navigation bar in the two-column layout is displayed through the fourth area 301 of the second display screen 300, and the first column in the two-column layout is displayed through the sixth area 303 of the second display screen 300.

[0237] When using a mobile phone, users can Fig. 9B The foldable screen mobile phone in the unfolded state shown in the figure is folded to obtain a foldable screen mobile phone in the folded state. Alternatively, the foldable screen mobile phone in the unfolded state can be folded to obtain a foldable screen mobile phone in the folded state. Fig. 9C The foldable screen mobile phone in the bent state shown is folded to obtain the foldable screen mobile phone in the folded state. When the physical state of the foldable screen mobile phone changes, the display form of the user interface in the foldable screen mobile phone may change.

[0238] Fig.9D Schematic diagram of a foldable screen mobile phone displaying a user interface in a folded state. When a user turns a foldable screen mobile phone from an unfolded state to a folded state or from a bent state to a folded state, the width (size corresponding to side A3D) and height (size corresponding to side B2D) of the display screen / display area in the folded state are obtained. When the width of the display screen / display area (size corresponding to side A3D) is less than or equal to the first threshold, the side navigation bar is not used. Display as Fig.9D The bottom navigation bar layout shown. For a description of the bottom navigation bar layout, refer to Figure 3 , I will not go into details here.

[0239] In a possible implementation, when the width of the display screen / display area (the size corresponding to the side A3D) is greater than the first threshold, the side navigation bar is used. In the case where a two-column display layout is set in the configuration file of the file management application, if the width of the display screen (the size corresponding to the side A3D) is less than the second threshold, the side navigation bar is not displayed by default, and the second display area 1133 is used to display the following information: Fig.9D The bottom navigation bar layout shown.

[0240] It should be noted that Fig.9D The foldable screen mobile phone is shown in a folded state with the first display screen 200 facing upwards. If the second display screen 300 faces upwards, the user interface is displayed on the second display screen 300, and the width of the display screen is determined by the side DA3.

[0241] It should also be noted that if Figure 2C If the fourth area 301 is facing upward, the bottom navigation bar layout is displayed in the fourth area 301 (optionally, and the fifth area 302 ), and if the sixth area 303 is facing upward, the bottom navigation bar layout is displayed through the sixth area 303 (optionally, and the fifth area 302 ).

[0242] Next, the electronic device 100 is exemplarily described as a tablet computer. Fig. 10A and Fig. 10B , Fig. 10A and Fig. 10B The various components in the tablet computer are shown in an exemplary manner. Figure 7A-7C A cooperative relationship in the illustrated scenario. The following example is described by using the angle sensor 180M to detect the posture of the electronic device 100. In a specific implementation, other sensors may also be used for detection.

[0243] like Fig. 10A As shown, the tablet computer Fig. 7A The state transformation shown is Figure 7B In the process of the status shown, the collaboration relationship is as follows:

[0244] 1. The tablet computer is in a horizontal screen state and receives a user's touch operation on a first application, the touch operation is used to start the first application. The first application includes but is not limited to a file management application, a note application, an event application, and other applications for managing documents.

[0245] When the tablet computer is in a horizontal screen state, the angle sensor 180M detects the posture of the tablet computer and reports the horizontal screen state of the tablet computer to the window manager.

[0246] 2. The first application calls the activity manager to start the main activity corresponding to the first application.

[0247] 3. The activity manager calls the column layout module to load the first application layout.

[0248] 4. The column layout module obtains display parameters from the window manager and obtains the safe area from the safe area module.

[0249] The window manager returns the display screen parameters to the column layout module, and the safe area module returns the safe area to the column layout module.

[0250] The display screen parameters include: display screen parameters corresponding to the horizontal screen state (including the width and height of the display screen).

[0251] 5. The column layout module determines that the user interface of the first application is a three-column layout according to the display screen parameters and the safe area.

[0252] The column layout module can provide a side navigation bar, a first column, a second column, and a bottom navigation layout. Therefore, the column layout module can determine the visibility of the side navigation bar, the first column, the second column, and the bottom navigation layout according to the width of the display screen. When the width of the display screen is greater than the first threshold, the column layout module uses the side navigation bar (that is, the side navigation bar is visible), and the bottom navigation bar layout is invisible.

[0253] In one embodiment, if the width of the display screen is greater than the second threshold, the user interface of the first application is determined to be a three-column layout including a side navigation bar, a first column, and a second column. The column layout module determines the display range of each element in the three-column layout according to the safe area, that is, the area outside the safe area does not display content. The second threshold is greater than the first threshold.

[0254] 6. The column layout module calls the activity manager to draw a three-column layout user interface of the first application.

[0255] 7. The activity manager instructs the display screen 194 to display the three-column layout user interface of the first application.

[0256] 8. Display screen 194 displays a three-column layout user interface of the first application.

[0257] like Fig. 10B As shown, the tablet computer Figure 7B The state transformation shown is Figure 7C In the process of the status shown, the collaboration relationship is as follows:

[0258] 9. The user rotates the tablet computer from the horizontal screen state to the vertical screen state, and the angle sensor 180M detects the posture of the tablet computer and reports to the column layout module that the tablet computer is in the vertical screen state.

[0259] 10. The column layout module obtains display parameters corresponding to the vertical screen state from the window manager and obtains the safe area from the safe area module.

[0260] The window manager returns the display screen parameters corresponding to the vertical screen state to the column layout module, and the safe area module returns the safe area to the column layout module.

[0261] 11. The column layout module determines that the user interface of the first application is a two-column layout according to the display screen parameters and the safety area corresponding to the vertical screen state.

[0262] The column layout module can provide a side navigation bar, a first column, a second column, and a bottom navigation layout. Therefore, the column layout module can determine the visibility of the side navigation bar, the first column, the second column, and the bottom navigation layout according to the width of the display screen. When the width of the display screen is greater than the first threshold, the column layout module uses the side navigation bar (that is, the side navigation bar is visible), and the bottom navigation bar layout is invisible.

[0263] In one embodiment, if the width of the display screen is less than or equal to the second threshold, the user interface of the first application is determined to be a two-column layout including a side navigation bar and a first column. The column layout module determines the display range of each element in the two-column layout according to the safe area, that is, the area outside the safe area does not display content. The second threshold is greater than the first threshold.

[0264] 12. The column layout module calls the activity manager to draw a two-column layout user interface of the first application.

[0265] 13. The activity manager instructs the display screen 194 to display the user interface of the first application in a two-column layout.

[0266] 14. Display screen 194 shows a two-column layout user interface of the first application.

[0267] Next, the electronic device 100 is exemplarily described as a mobile phone. Fig.11A and Fig. 11B , Fig.11A and Fig. 11B The various components in the mobile phone are shown in an exemplary manner. Figure 8A-8C A collaborative relationship in the scenario shown.

[0268] like Fig.11A As shown, the mobile phone Fig. 8A The state transformation shown is Figure 8B In the process of the status shown, the collaboration relationship is as follows:

[0269] 1. The mobile phone is in a vertical screen state and receives a user's touch operation on a first application, the touch operation is used to start the first application. The first application includes but is not limited to a file management application, a note application, an event application, and other applications for managing documents.

[0270] When the mobile phone is in landscape mode, the angle sensor 180M detects the posture of the tablet computer and reports the portrait mode of the mobile phone to the window manager.

[0271] 2. The first application calls the activity manager to start the main activity corresponding to the first application.

[0272] 3. The activity manager calls the column layout module to load the first application layout.

[0273] 4. The column layout module obtains display parameters from the window manager and obtains the safe area from the safe area module.

[0274] The window manager returns the display screen parameters to the column layout module, and the safe area module returns the safe area to the column layout module.

[0275] 5. The column layout module determines that the user interface of the first application is a bottom navigation bar layout according to the display screen parameters and the safe area.

[0276] The column layout module can provide a side navigation bar, a first column, a second column, and a bottom navigation bar layout. Therefore, the column layout module can determine the visibility of the side navigation bar, the first column, the second column, and the bottom navigation bar layout according to the width of the display screen. When the width of the display screen is less than the first threshold, the column layout module uses the bottom navigation bar layout (that is, the bottom navigation bar is visible), and the side navigation bar, the first column, and the second column are invisible. The column layout module determines the display range of each element in the bottom navigation bar layout according to the safe area, that is, the area outside the safe area does not display content. Among them, the second threshold is greater than the first threshold.

[0277] 6. The column layout module calls the activity manager to draw the user interface of the bottom navigation bar layout of the first application.

[0278] 7. The activity manager instructs the display screen 194 to display the user interface of the bottom navigation bar layout of the first application.

[0279] 8. Display screen 194 shows the user interface of the bottom navigation bar layout of the first application.

[0280] like Fig. 11B As shown, the mobile phone Figure 8B The state transformation shown is Figure 8C In the process of the status shown, the collaboration relationship is as follows:

[0281] 9. The user rotates the phone from portrait mode to landscape mode, and the angle sensor 180M detects the posture of the phone and reports to the column layout module that the phone is in landscape mode.

[0282] 10. The column layout module obtains display parameters corresponding to the horizontal screen state from the window manager and obtains the safe area from the safe area module.

[0283] The window manager returns the display screen parameters corresponding to the horizontal screen state to the column layout module, and the safe area module returns the safe area to the column layout module.

[0284] 11. The column layout module determines that the user interface of the first application is a two-column layout according to the display screen parameters and the safe area corresponding to the horizontal screen state.

[0285] The column layout module can provide a side navigation bar, a first column, a second column, and a bottom navigation layout. Therefore, the column layout module can determine the visibility of the side navigation bar, the first column, the second column, and the bottom navigation layout according to the width of the display screen. When the width of the display screen is greater than the first threshold, the column layout module uses the side navigation bar (that is, the side navigation bar is visible), and the bottom navigation bar layout is invisible.

[0286] In one embodiment, if the width of the display screen is less than or equal to the second threshold, the user interface of the first application is determined to be a two-column layout including a side navigation bar and a first column. The column layout module determines the display range of each element in the two-column layout according to the safe area, that is, the area outside the safe area does not display content. The second threshold is greater than the first threshold.

[0287] 12. The column layout module calls the activity manager to draw a two-column layout user interface of the first application.

[0288] 13. The activity manager instructs the display screen 194 to display the user interface of the first application in a two-column layout.

[0289] 14. Display screen 194 shows a two-column layout user interface of the first application.

[0290] Next, when the electronic device 100 is exemplarily described as a folding screen mobile phone, please refer to Figure 12A-12C , Figure 12A-12C The various components of a foldable screen mobile phone are shown in an exemplary manner. Figure 9A-9D A collaborative relationship in the scenario shown.

[0291] like Fig. 12A As shown, foldable screen mobile phones Fig.9A The state transformation shown is Fig. 9B In the process of the status shown, the collaboration relationship is as follows:

[0292] 1. The foldable screen mobile phone is in an unfolded state and receives a user's touch operation on a first application, where the touch operation is used to start the first application. The first application includes but is not limited to a file management application, a note application, an event application, and other applications for managing documents.

[0293] When the foldable screen mobile phone is in the unfolded state, the angle sensor 180M detects the physical state of the foldable screen mobile phone and reports the unfolded state of the foldable screen mobile phone to the window manager.

[0294] 2. The first application calls the activity manager to start the main activity corresponding to the first application.

[0295] 3. The activity manager calls the column layout module to load the first application layout.

[0296] 4. The column layout module obtains the display screen parameters of the expanded state from the window manager and obtains the safe area from the safe area module.

[0297] The window manager returns the display screen parameters of the expanded state to the column layout module, and the safe area module returns the safe area to the column layout module.

[0298] 5. The column layout module determines that the user interface of the first application is a three-column layout according to the display screen parameters and the safe area.

[0299] The column layout module can provide a side navigation bar, a first column, a second column, and a bottom navigation layout. Therefore, the column layout module can determine the visibility of the side navigation bar, the first column, the second column, and the bottom navigation layout according to the width of the display screen. When the width of the display screen is greater than the first threshold, the column layout module uses the side navigation bar (that is, the side navigation bar is visible), and the bottom navigation bar layout is invisible.

[0300] In one embodiment, if the width of the display screen is greater than the second threshold, the user interface of the first application is determined to be a three-column layout including a side navigation bar, a first column, and a second column. The column layout module determines the display range of each element in the three-column layout according to the safe area, that is, the area outside the safe area does not display content. The second threshold is greater than the first threshold.

[0301] 6. The column layout module calls the activity manager to draw a three-column layout user interface of the first application.

[0302] 7. The activity manager instructs the display screen 194 to display the three-column layout user interface of the first application.

[0303] 8. Display screen 194 displays a three-column layout user interface of the first application.

[0304] like Fig. 12B As shown, foldable screen mobile phones Fig. 9B The state transformation shown is Fig. 9C In the process of the status shown, the collaboration relationship is as follows:

[0305] 9. The user folds the foldable screen mobile phone from the unfolded state to the bent state. The angle sensor 180M detects the physical state of the foldable screen mobile phone and reports to the column layout module that the foldable screen mobile phone is in the bent state.

[0306] 10. The column layout module obtains display screen parameters corresponding to the bending state from the window manager and obtains the safe area from the safe area module.

[0307] The window manager returns display screen parameters corresponding to the bending state to the column layout module, and the safe area module returns the safe area to the column layout module.

[0308] 11. The column layout module determines that the user interface of the first application is a two-column layout according to the display screen parameters and the safety area corresponding to the bending state.

[0309] The column layout module can provide a side navigation bar, a first column, a second column, and a bottom navigation layout. Therefore, the column layout module can determine the visibility of the side navigation bar, the first column, the second column, and the bottom navigation layout according to the width of the display screen. When the width of the display screen is greater than the first threshold, the column layout module uses the side navigation bar (that is, the side navigation bar is visible), and the bottom navigation bar layout is invisible.

[0310] In one embodiment, if the width of the display screen is less than or equal to the second threshold, the user interface of the first application is determined to be a two-column layout including a side navigation bar and a first column. The column layout module determines the display range of each element in the two-column layout according to the safe area, that is, the area outside the safe area does not display content. The second threshold is greater than the first threshold.

[0311] 12. The column layout module calls the activity manager to draw a two-column layout user interface of the first application.

[0312] 13. The activity manager instructs the display screen 194 to display the user interface of the first application in a two-column layout.

[0313] 14. Display screen 194 shows a two-column layout user interface of the first application.

[0314] like Fig. 12C As shown, foldable screen mobile phones Fig. 9C The state transformation shown is Fig.9D During or from the status shown Fig. 9B The state transformation shown is Fig.9D In the process of the status shown, the collaboration relationship is as follows:

[0315] 15. The user folds the foldable screen mobile phone from the unfolded state or the bent state to the folded state, and the angle sensor 180M detects the physical state of the foldable screen mobile phone and reports to the column layout module that the foldable screen mobile phone is in the folded state.

[0316] 16. The column layout module obtains display parameters corresponding to the folding state from the window manager and obtains the safe area from the safe area module.

[0317] The window manager returns display screen parameters corresponding to the folding state to the column layout module, and the safe area module returns the safe area to the column layout module.

[0318] 17. The column layout module determines that the user interface of the first application is a bottom navigation bar layout according to the display screen parameters and the safe area.

[0319] The column layout module can provide the layout of the side navigation bar, the first column, the second column and the bottom navigation bar. Therefore, the column layout module can determine the visibility of the layout of the side navigation bar, the first column, the second column and the bottom navigation bar according to the width of the display screen. When the width of the display screen is less than the first threshold, the column layout module uses the bottom navigation bar layout (that is, the bottom navigation bar layout is visible), and the side navigation bar, the first column and the second column are invisible.

[0320] The column layout module determines the display range of each element in the bottom navigation bar layout according to the safe area, that is, the area outside the safe area does not display content. The second threshold is greater than the first threshold.

[0321] 18. The column layout module calls the activity manager to draw the user interface of the bottom navigation bar layout of the first application.

[0322] 19. The activity manager instructs the display screen 194 to display the user interface of the bottom navigation bar layout of the first application.

[0323] 20. Display screen 194 shows the user interface of the bottom navigation bar layout of the first application.

[0324] Based on the above Figure 1A-Figure 12C Some embodiments are shown, and the column layout display method provided by the present application is introduced below.

[0325] See also Fig.13 , Fig.13 A column layout display method provided in an embodiment of the present application can be applied to an electronic device 100. The method includes but is not limited to the following steps:

[0326] S1301: When the electronic device is in a first physical state, a first interface of a first application is displayed.

[0327] Specifically, when the electronic device is in the first physical state, it receives a user operation and starts the first application in response to the user operation. In the process of starting the first application, the first application transmits corresponding data to the column layout module, and the column layout module loads the layout and displays the first interface of the first application.

[0328] Step S1302: receiving a first user operation.

[0329] Step S1303: In response to the first user operation, the physical state of the electronic device changes from the first physical state to the second physical state, and the electronic device displays the second interface of the first application.

[0330] For example, Fig.13 The physical state shown can be found in Figure 1A or Figure 2A-2C .

[0331] For example, Fig.13 The first interface and the second interface of the first application shown in FIG. Figure 3 , Figure 6A-6B .

[0332] In one embodiment, when the electronic device is in a first physical state, a first interface is displayed through a first display area, and when the electronic device is in a second physical state, a second interface is displayed through a second display area, and a width of the first display area is different from a width of the second display area.

[0333] In one embodiment, the width of the first display area is less than or equal to a first threshold. Figure 8B The first display area 1121 or the upper Fig.9D In the second display area 1133 shown, the first column layout is a bottom navigation bar, for example, Figure 8B The bottom navigation bar or the top Fig.9D The bottom navigation bar shown in FIG. 1 has a width of the second display area greater than the first threshold, for example, Figure 8C , Fig. 9B or Fig. 9C In the display area shown, the second column layout includes a side navigation bar and at least one column, such as the upper Figure 7B , Figure 7C , Figure 8C , Fig. 9B or Fig. 9C Column layout shown.

[0334] In one embodiment, the width of the second display area is greater than the first threshold and less than or equal to the second threshold, the second column layout includes a side navigation bar and a first column, wherein the first column is used to display the content under the selected option in the side navigation bar, and the second threshold is greater than the first threshold. Figure 8C The second display area 1122, the side navigation bar 121 and the first column 122 shown, or Fig. 9C The second display area 1132 , the side navigation bar 121 and the first column 122 are shown.

[0335] In one embodiment, the width of the second display area is greater than the second threshold, the second column layout includes a side navigation bar, a first column, and a second column, wherein the first column is used to display the content under the selected option in the side navigation bar, the second column is used to display the content under the selected option in the first column, and the second threshold is greater than the first threshold. Fig. 9B The first display area 1131 , the side navigation bar 121 , the first column 122 and the second column 123 are shown.

[0336] In one embodiment, the width of the first display area is greater than a first threshold, and the first column layout includes a side navigation bar and a first column, for example Figure 7C The second display area 1112, the side navigation bar 121 and the first column 122 are shown. The width of the second display area is greater than the second threshold, and the second column layout includes the side navigation bar, the first column and the second column, for example Figure 7B The first display area 1111, the side navigation bar 121, the first sub-column 122 and the second sub-column 123 shown, wherein the first sub-column is used to display the content under the selected option in the side navigation bar, the second sub-column is used to display the content under the selected option in the first sub-column, and the second threshold is greater than the first threshold.

[0337] In a possible implementation, the first threshold may be 600 dp, and the second threshold may be 880 dp.

[0338] In one embodiment, the electronic device is a foldable electronic device, and when the first physical state is an unfolded state, the second physical state is a bent state or a folded state.

[0339] In one embodiment, when the first physical state is the expanded state, the layout of the first interface includes a side navigation bar, a first column and a second column, the first display area includes a first area and a second area, and the first area and the second area are in the same plane;

[0340] The first interface of the first application including the side navigation bar, the first sub-column and the second sub-column is displayed through the first area and the second area on the same plane, wherein the first sub-column is used to display the content under the selected option in the side navigation bar, and the second sub-column is used to display the content under the selected option in the first sub-column. Fig. 9B shown.

[0341] In one embodiment, when the second physical state is the bent state, the layout of the first interface includes the side navigation bar and the first sub-column, the second display area includes the first area and the second area, the first area and the second area are not in the same plane, and the plane where the first area is located intersects with the plane where the second area is located; the side navigation bar of the first application is displayed through the first area; and the first sub-column layout of the first application is displayed through the second area. Fig. 9C shown.

[0342] In one embodiment, when the foldable electronic device is in a folded state, the layout of the first interface is a bottom navigation bar, the second display area includes a first area and a second area, the light emitting surface of the first area and the light emitting surface of the second area are opposite to each other; the bottom navigation bar layout of the first application is displayed through the first area or the second area. Fig.9D shown.

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

[0344] In short, the above is only an embodiment of the technical solution of the present invention, and is not intended to limit the protection scope of the present invention. Any modification, equivalent replacement, improvement, etc. made according to the disclosure of the present invention shall be included in the protection scope of the present invention.

[0345] Obviously, those skilled in the art can make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if these modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include these modifications and variations.< / canvas> < / video> < / videoview> < / imgview> < / textview>

Claims

1. A method for displaying a column layout, characterized in that: Applied to electronic equipment, the method comprises: When the electronic device is in a first physical state, a first interface of a first application is displayed, and the layout of the first interface is a first column layout; receiving a first user operation; In response to the first user operation, the physical state of the electronic device changes from the first physical state to the second physical state, and the electronic device displays the second interface of the first application. The layout of the second interface is a second column layout, and the second column layout includes a side navigation bar. The first column layout and the second column layout are different.

2. The method according to claim 1, characterized in that When the electronic device is in the first physical state, the first interface is displayed in the first display area; When the electronic device is in the second physical state, the second interface is displayed in the second display area; The width of the first display area is different from the width of the second display area.

3. The method according to claim 2, characterized in that The width of the first display area is less than or equal to a first threshold, the first column layout is a bottom navigation bar, the width of the second display area is greater than the first threshold, and the second column layout includes the side navigation bar and at least one column.

4. The method according to claim 3, characterized in that The width of the second display area is greater than the first threshold and less than or equal to the second threshold, the second column layout includes the side navigation bar and the first column, wherein the first column is used to display the content under the selected option in the side navigation bar, and the second threshold is greater than the first threshold.

5. The method according to claim 3, characterized in that: The width of the second display area is greater than a second threshold, and the second column layout includes the side navigation bar, a first column and a second column, wherein the first column is used to display the content under the selected option in the side navigation bar, and the second column is used to display the content under the selected option in the first column, and the second threshold is greater than the first threshold.

6. The method according to claim 2, characterized in that The width of the first display area is greater than a second threshold, the first column layout includes a side navigation bar, a first column, and a second column, the width of the second display area is greater than the first threshold and less than or equal to the second threshold, the second column layout includes the side navigation bar and the first column, wherein the first column is used to display the content under the selected option in the side navigation bar, the second column is used to display the content under the selected option in the first column, and the second threshold is greater than the first threshold.

7. The method according to any one of claims 2 to 6, characterized in that: The electronic device is a foldable electronic device, and when the first physical state is the unfolded state, the second physical state is a bent state or a folded state.

8. The method according to claim 7, characterized in that When the first physical state is the expanded state, the layout of the first interface includes a side navigation bar, a first column, and a second column, and the first interface displaying the first application includes: The first display area includes a first area and a second area, and the first area and the second area are in the same plane; The first area and the second area in the same plane display the first interface of the first application including the side navigation bar, the first sub-column and the second sub-column, wherein the first sub-column is used to display the content under the selected option in the side navigation bar, and the second sub-column is used to display the content under the selected option in the first sub-column.

9. The method according to claim 8, characterized in that When the second physical state is the bent state, the layout of the first interface includes a side navigation bar and a first column, and the first interface displaying the first application includes: The second display area includes a first area and a second area, the first area and the second area are not in the same plane, and the plane where the first area is located intersects with the plane where the second area is located; Displaying the side navigation bar of the first application through the first area; The first column layout of the first application is displayed through the second area.

10. The method according to claim 8, characterized in that When the foldable electronic device is in the folded state, the layout of the first interface is a bottom navigation bar, and the first column layout for displaying the first application includes: The second display area includes a first area and a second area, and a light emitting surface of the first area is opposite to a light emitting surface of the second area; The bottom navigation bar layout of the first application is displayed through the first area or the second area.

11. An electronic device, characterized in that: The electronic device comprises: a plurality of sound-emitting devices; one or more processors; a memory; wherein the plurality of sound-emitting devices are used to play the sound signals of the electronic device; the memory is coupled to the one or more processors, the memory is used to store computer program code, the computer program code comprises computer instructions, the one or more processors call the computer instructions so that the electronic device executes the method as described in any one of claims 1-10.

12. A chip system, characterized in that: The chip system is applied to an electronic device, and the chip system includes one or more processors, and the processor is used to call computer instructions so that the electronic device executes the method as described in any one of claims 1-10.

13. A computer program product comprising instructions, characterized in that When the computer program product is executed on an electronic device, the electronic device is enabled to execute the method according to any one of claims 1 to 10.

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

Images