Page display layout method and electronic equipment

Abstract

The embodiment of the invention provides a page display layout method and electronic equipment, and the method is executed by the electronic equipment and comprises the steps that in the process that an application program displays a page, first information and second information are obtained, the first information is information of a security margin set by the electronic equipment for a display screen, and the second information is information of a security margin set by the electronic equipment for the display screen; the second information is information of other invisible areas except the security margin set by the electronic equipment; under the condition that the value of the first information is not zero and the value of the second information is zero, determining indentation display information of the page content based on the value of the first information; under the condition that the value of the first information is zero and the value of the second information is not zero, determining indentation display information of the page content based on the value of the second information; under the condition that the value of the first information and the value of the second information are not zero, determining indentation display information of the page content based on the value of the first information and the value of the second information; and performing display layout on the page according to the indented display information of the page content. Therefore, the page display effect can be improved.

Description

Technical Field

[0001] The present application relates to the field of electronic technology, and in particular to a page display layout method and an electronic device. Background Art

[0002] Currently, electronic devices (such as mobile phones, tablet computers, etc.) can display pages of various applications, and the display layout of the pages is crucial to the display effect.

[0003] Usually, when an application loads a display page, it can be laid out based on the display area of ​​the electronic device display. However, due to the wide variety of display screens, the display areas set are also different. If the page display layout is not well adapted to the display screen, it will cause abnormal page display. Summary of the invention

[0004] The present application provides a page display layout method and an electronic device, which can make the page display layout mode better adapt to the display screen and improve the page display effect.

[0005] In a first aspect, the present application provides a method for displaying and laying out a page, which is executed by an electronic device and includes: in a process of displaying a page by an application, obtaining first information and second information, the first information being information about a safety margin set by the electronic device for a display screen, and the second information being information about other invisible areas set by the electronic device except for the safety margin; when the value of the first information is not zero and the value of the second information is zero, determining indentation display information of the page content based on the value of the first information; when the value of the first information is zero and the value of the second information is not zero, determining indentation display information of the page content based on the value of the second information; when both the value of the first information and the value of the second information are not zero, determining indentation display information of the page content based on the value of the first information and the value of the second information; and displaying and laying out the page according to the indentation display information of the page content.

[0006] That is to say, when displaying a page, the application in the electronic device can actively obtain the information of the invisible area set by the electronic device, including the information of the safety margin and other invisible areas. Then, based on the information of the invisible area, the indentation display information of the page content to be displayed is determined, that is, the area avoiding the safety margin and other invisible areas, thereby adjusting the display layout information of the page, so that the display layout of the page is better adapted to the display screen, and the page display effect is improved.

[0007] In combination with the first aspect, in some implementations of the first aspect, the value of the first information includes the value of the left margin, the value of the top margin, the value of the right margin, and the value of the bottom margin in the safety margin, and the value of the second information includes the value of the spacing of other invisible areas in the x-axis direction and the value of the spacing in the y-axis direction.

[0008] Among them, the safety margin may include the left margin, the top margin, the right margin and the bottom margin, and the electronic device may obtain the values ​​of these four margins respectively. Other invisible areas may correspond to the spacing in the x-axis direction and the spacing in the y-axis direction according to the position of the xy-axis coordinate system, and the electronic device may obtain the values ​​of these two spacings respectively. Thus, the display layout information of the page can be adjusted based on the information of the invisible area.

[0009] In combination with the first aspect, in some implementations of the first aspect, the above-mentioned obtaining of the first information and the second information includes: obtaining the value of the left margin through the insets.getSystemWindowInsetLeft() interface, obtaining the value of the top margin through the insets.getSystemWindowInsetTop() interface, obtaining the value of the right margin through the insets.getSystemWindowInsetRight() interface, and obtaining the value of the bottom margin through the insets.getSystemWindowInsetBottom() interface; obtaining the value of the spacing in the x-axis direction through the getLocationOnScreen_x interface, and obtaining the value of the spacing in the y-axis direction through the getLocationOnScreen_y interface.

[0010] That is to say, the system of the electronic device can provide the above interface to respectively and accurately obtain the value of each information, and then accurately determine the display layout information to improve the page display effect.

[0011] In combination with the first aspect, in some implementations of the first aspect, when the value of the first information is not zero and the value of the second information is zero, determining the indentation display information of the page content based on the value of the first information includes:

[0012] When the values ​​of the left margin and the right margin are not zero and the values ​​of the top margin and the bottom margin are zero, the value of the left margin is determined as the indentation value of the left side of the page content, and the value of the right margin is determined as the indentation value of the right side of the page content;

[0013] When the values ​​of the top margin and the bottom margin are not zero and the values ​​of the left margin and the right margin are zero, the value of the top margin is determined as the indentation value of the upper side of the page content, and the value of the bottom margin is determined as the indentation value of the lower side of the page content;

[0014] When the values ​​of the top margin, the bottom margin, the left margin and the right margin are all non-zero, the value of the left margin is determined as the indent value of the left side of the page content, the value of the right margin is determined as the indent value of the right side of the page content, the value of the top margin is determined as the indent value of the upper side of the page content, and the value of the bottom margin is determined as the indent value of the lower side of the page content.

[0015] Among them, the value of the left margin and the value of the right margin are not zero, that is, the electronic device has safety margins for the left margin and the right margin, then the indentation display information of the page content can be view.setPadding(safeInsetLeft, 0, safeInsetRight, 0). The value of the top margin and the value of the bottom margin are not zero, that is, the electronic device has safety margins for the top margin and the bottom margin, then the indentation display information of the page content can be view.setPadding(0, safeInsetTop, 0, safeInsetBottom). The value of the top margin, the value of the bottom margin, the value of the left margin and the value of the right margin are not zero, that is, the electronic device has safety margins for the top margin, the bottom margin, the left margin and the right margin at the same time, then the indentation display information of the page content can be view.setPadding(safeInsetLeft, safeInsetTop, safeInsetRight, safeInsetBottom), where the four parameters in view.setPadding respectively represent the indentation value of the left side, the indentation value of the top side, the indentation value of the right side and the indentation value of the bottom side of the page content.

[0016] In combination with the first aspect, in some implementations of the first aspect, when the value of the first information is zero and the value of the second information is not zero, determining the indentation display information of the page content based on the value of the second information includes:

[0017] When the value of the spacing in the x-axis direction is not zero and the value of the spacing in the y-axis direction is zero, the value of the spacing in the x-axis direction is determined as the indentation value of the left side of the page content;

[0018] When the value of the spacing in the x-axis direction is zero and the value of the spacing in the y-axis direction is not zero, the value of the spacing in the y-axis direction is determined as the indentation value of the upper side of the page content;

[0019] When the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction are not zero, the value of the spacing in the x-axis direction is determined as the indentation value of the left side of the page content, and the value of the spacing in the y-axis direction is determined as the indentation value of the top side of the page content.

[0020] Among them, the value of the spacing in the x-axis direction is not zero, that is, the electronic device has a left spacing, then the indentation display information of the page content can be view.setPadding(X, 0, 0, 0). The value of the spacing in the y-axis direction is not zero, that is, the electronic device has an upper spacing, then the indentation display information of the page content can be view.setPadding(0, Y, 0, 0). The value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction are not zero, that is, the electronic device has a left spacing and an upper spacing, then the indentation display information of the page content can be view.setPadding(X, Y, 0, 0), where the four parameters in view.setPadding respectively represent the indentation value of the left side, the indentation value of the upper side, the indentation value of the right side, and the indentation value of the bottom side of the page content.

[0021] In combination with the first aspect, in some implementations of the first aspect, when the value of the first information and the value of the second information are both not zero, determining the indentation display information of the page content based on the value of the first information and the value of the second information includes:

[0022] In a case where the values ​​of the left margin and the right margin are not zero and at least one of the values ​​of the spacing in the x-axis direction and the spacing in the y-axis direction is not zero, determining the indentation display information of the page content based on the values ​​of the left margin and the right margin, the values ​​of the spacing in the x-axis direction and the values ​​of the spacing in the y-axis direction;

[0023] When the value of the top margin and the value of the bottom margin are not zero and at least one of the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction is not zero, determining the indentation display information of the page content based on the value of the top margin and the value of the bottom margin, the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction;

[0024] When the values ​​of the top margin, the bottom margin, the left margin, and the right margin are all non-zero and at least one of the values ​​of the spacing in the x-axis direction and the value of the spacing in the y-axis direction is non-zero, the indentation display information of the page content is determined based on the values ​​of the top margin, the bottom margin, the left margin, and the right margin, the value of the spacing in the x-axis direction, and the value of the spacing in the y-axis direction.

[0025] That is, when the value of the first information and the value of the second information are not zero, the electronic device can respectively consider the different situations of the value of the left margin and the value of the right margin, the value of the top margin and the value of the bottom margin, the value of the spacing in the x-axis direction, and the value of the spacing in the y-axis direction to determine the indentation display information of the page content in different situations.

[0026] In combination with the first aspect, in some implementations of the first aspect, determining the indentation display information of the page content based on the value of the left margin and the value of the right margin, the value of the spacing in the x-axis direction, and the value of the spacing in the y-axis direction includes:

[0027] When the value of the spacing in the x-axis direction is not zero and the value of the spacing in the y-axis direction is zero, the sum of the value of the left margin and the value of the spacing in the x-axis direction is determined as the indentation value of the left side of the page content, and the value of the right margin is determined as the indentation value of the right side of the page content;

[0028] When the value of the spacing in the x-axis direction is zero and the value of the spacing in the y-axis direction is not zero, the value of the left margin is determined as the indentation value of the left side of the page content, the value of the spacing in the y-axis direction is determined as the indentation value of the top side of the page content, and the value of the right margin is determined as the indentation value of the right side of the page content;

[0029] When the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction are not zero, the sum of the value of the left margin and the value of the spacing in the x-axis direction is determined as the indentation value of the left side of the page content, the value of the spacing in the y-axis direction is determined as the indentation value of the top side of the page content, and the value of the right margin is determined as the indentation value of the right side of the page content.

[0030] Among them, when the values ​​of the left margin and the right margin are not zero, if the value of the spacing in the x-axis direction is not zero, the indentation display information of the page content can be view.setPadding(X+safeInsetLeft, 0, safeInsetRight, 0). If the value of the spacing in the y-axis direction is not zero, the indentation display information of the page content can be view.setPadding(safeInsetLeft, Y, safeInsetRight, 0). If the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction are not zero, the indentation display information of the page content can be view.setPadding(X+safeInsetLeft, Y, safeInsetRight, 0), where the four parameters in view.setPadding respectively represent the indentation value of the left side, the indentation value of the top side, the indentation value of the right side, and the indentation value of the bottom side of the page content.

[0031] In combination with the first aspect, in some implementations of the first aspect, determining the indentation display information of the page content based on the value of the top margin and the value of the bottom margin, the value of the spacing in the x-axis direction, and the value of the spacing in the y-axis direction includes:

[0032] When the value of the spacing in the x-axis direction is not zero and the value of the spacing in the y-axis direction is zero, the value of the spacing in the x-axis direction is determined as the indentation value of the left side of the page content, the value of the top margin is determined as the indentation value of the top side of the page content, and the value of the bottom margin is determined as the indentation value of the bottom side of the page content;

[0033] When the value of the spacing in the x-axis direction is zero and the value of the spacing in the y-axis direction is not zero, the sum of the value of the top margin and the value of the spacing in the y-axis direction is determined as the indentation value of the upper side of the page content, and the value of the bottom margin is determined as the indentation value of the lower side of the page content;

[0034] When the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction are not zero, the value of the spacing in the x-axis direction is determined as the indentation value of the left side of the page content, the sum of the value of the top margin and the value of the spacing in the y-axis direction is determined as the indentation value of the upper side of the page content, and the value of the bottom margin is determined as the indentation value of the lower side of the page content.

[0035] Among them, when the value of the top margin and the value of the bottom margin are not zero, if the value of the spacing in the x-axis direction is not zero, the indentation display information of the page content can be view.setPadding(X, safeInsetTop, 0, safeInsetBottom). If the value of the spacing in the y-axis direction is not zero, the indentation display information of the page content can be view.setPadding(0, Y+safeInsetTop, 0, safeInsetBottom). If the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction are not zero, the indentation display information of the page content can be view.setPadding(X, Y+safeInsetTop, 0, safeInsetBottom), where the four parameters in view.setPadding represent the indentation values ​​of the left side, the top side, the right side, and the bottom side of the page content, respectively.

[0036] In combination with the first aspect, in some implementations of the first aspect, determining the indentation display information of the page content based on the value of the top margin, the value of the bottom margin, the value of the left margin, the value of the right margin, the value of the spacing in the x-axis direction, and the value of the spacing in the y-axis direction includes:

[0037] When the value of the spacing in the x-axis direction is not zero and the value of the spacing in the y-axis direction is zero, the sum of the value of the left margin and the value of the spacing in the x-axis direction is determined as the indentation value of the left side of the page content, the value of the top margin is determined as the indentation value of the top side of the page content, the value of the right margin is determined as the indentation value of the right side of the page content, and the value of the bottom margin is determined as the indentation value of the bottom side of the page content;

[0038] When the value of the spacing in the x-axis direction is zero and the value of the spacing in the y-axis direction is not zero, the value of the left margin is determined as the indentation value of the left side of the page content, the sum of the value of the top margin and the value of the spacing in the y-axis direction is determined as the indentation value of the top side of the page content, the value of the right margin is determined as the indentation value of the right side of the page content, and the value of the bottom margin is determined as the indentation value of the bottom side of the page content;

[0039] When the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction are not zero, the sum of the value of the left margin and the value of the spacing in the x-axis direction is determined as the indentation value of the left side of the page content, the sum of the value of the top margin and the value of the spacing in the y-axis direction is determined as the indentation value of the top of the page content, the value of the right margin is determined as the indentation value of the right side of the page content, and the value of the bottom margin is determined as the indentation value of the bottom of the page content.

[0040] Among them, when the values ​​of the left margin, the right margin, the top margin, and the bottom margin are not zero, if the value of the spacing in the x-axis direction is not zero, the indentation display information of the page content can be view.setPadding(X+safeInsetLeft, safeInsetTop, safeInsetRight, safeInsetBottom). If the value of the spacing in the y-axis direction is not zero, the indentation display information of the page content can be view.setPadding(safeInsetLeft, Y+safeInsetTop, safeInsetRight, safeInsetBottom). If the values ​​of the spacing in the x-axis direction and the spacing in the y-axis direction are not zero, the indentation display information of the page content can be view.setPadding(X+safeInsetLeft, Y+safeInsetTop, safeInsetRight, safeInsetBottom), where the four parameters in view.setPadding represent the indentation values ​​of the left side, the top side, the right side, and the bottom side of the page content, respectively.

[0041] Therefore, based on the above implementation, the electronic device can use different adjustment methods to adjust the indented display information of the page content according to different set invisible areas, so as to be more suitable for the current display screen and improve the page display effect.

[0042] In a second aspect, the present application provides a device, which is included in an electronic device, and the device has the function of implementing the electronic device behavior in the above-mentioned first aspect and the possible implementation of the above-mentioned first aspect. The function can be implemented by hardware, or it can be implemented by hardware executing corresponding software. The hardware or software includes one or more modules or units corresponding to the above-mentioned functions. For example, a receiving module or unit, a processing module or unit, etc.

[0043] In a third aspect, the present application provides an electronic device, the electronic device comprising: one or more processors, and a memory;

[0044] The memory is coupled to the one or more processors, and the memory is used to store computer program code, wherein the computer program code includes computer instructions, and the one or more processors call the computer instructions to enable the electronic device to execute any one of the methods in the technical solution of the first aspect.

[0045] In a fourth aspect, the present application provides a chip system, which is applied to an electronic device, and the chip system includes one or more processors, and the one or more processors are used to call computer instructions so that the electronic device executes the method in the first aspect and any possible implementation thereof.

[0046] Optionally, the chip system also includes a memory, and the memory is connected to the processor via circuits or wires.

[0047] Further optionally, the chip system also includes a communication interface.

[0048] In a fifth aspect, the present application provides a computer-readable storage medium, which includes instructions. When the instructions are executed on an electronic device, the electronic device executes any one of the methods in the technical solution of the first aspect.

[0049] In a sixth aspect, the present application provides a computer program product, the computer program product comprising: a computer program code, when the computer program code runs on an electronic device, the electronic device executes any one of the methods in the technical solution of the first aspect. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] Figure 1 This is a schematic diagram of a scenario of setting a safety margin for an electronic device provided in an embodiment of the present application;

[0051] Figure 2 This is a schematic diagram of a scenario in which an electronic device is provided with other invisible areas according to an embodiment of the present application;

[0052] Figure 3 is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application;

[0053] Figure 4 is a software structure block diagram of an electronic device provided in an embodiment of the present application;

[0054] Figure 5 is a schematic diagram of an example of obtaining safety margin information provided in an embodiment of the present application;

[0055] Figure 6 This is a schematic diagram of an example of obtaining information of other invisible areas provided in an embodiment of the present application;

[0056] Figure 7 It is a flowchart of a method for displaying and laying out a page provided in an embodiment of the present application;

[0057] Figure 8 is a schematic diagram of a process for determining indented display information based on first information and second information provided by an embodiment of the present application;

[0058] Fig. 9 This is a schematic diagram of an example of indented display of page content provided in an embodiment of the present application;

[0059] Fig.10 is a schematic diagram of another example of indented display of page content provided by an embodiment of the present application;

[0060] Fig.11 This is another schematic diagram of an example of indented display of page content provided in an embodiment of the present application;

[0061] Fig.12 This is another schematic diagram of an example of indented display of page content provided in an embodiment of the present application;

[0062] Fig.13 This is another schematic diagram of an example of indented display of page content provided in an embodiment of the present application;

[0063] Fig.14 This is another schematic diagram of an example of indented display of page content provided in an embodiment of the present application;

[0064] Fig.15 This is another schematic diagram of an example of indented display of page content provided in an embodiment of the present application;

[0065] Fig.16 It is a module interaction diagram of a page display layout method provided in an embodiment of the present application. DETAILED DESCRIPTION

[0066] The technical solutions in the embodiments of the present application will be described below in conjunction with the drawings in the embodiments of the present application. In the description of the embodiments of the present application, unless otherwise specified, " / " means or, for example, A / B can mean A or B; "and / or" in this article is only a description of the association relationship of associated objects, indicating that there can be three relationships, for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, in the description of the embodiments of the present application, "multiple" means two or more than two.

[0067] In the following, the terms "first", "second", and "third" are used for descriptive purposes only and are not to be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features. Thus, a feature defined as "first", "second", and "third" may explicitly or implicitly include one or more of the features.

[0068] Currently, electronic devices (such as mobile phones, tablet computers, etc.) can display pages of various applications, such as system applications that come with the electronic device or pages of various applications downloaded and installed. The display layout of the page is crucial to the display effect.

[0069] Usually, when an application loads a display page, it can be laid out based on the display area of ​​the electronic device display. However, due to the wide variety of display screens, the display areas set are also different. If the page display layout is not well adapted to the display screen, it will cause abnormal page display.

[0070] For example, some electronic devices have display screens with invisible areas. For example, in order to ensure that the displayed content of an application is not blocked and to improve user experience and page aesthetics, a safety margin can be set for the display screen as an invisible area. The safety margin refers to the safe distance between the displayed content on the display screen and the edge of the screen. Figure 1 , the outer frame A is the boundary of the display screen, the inner frame B is the boundary of the actual visible area, and the space between the outer frame A and the inner frame B is the safety margin, which is an invisible area. Under normal circumstances, the application page should be displayed within the inner frame B, so that all the page content can be displayed. However, in some abnormal scenarios, the electronic device does not take the existence of the safety margin into consideration and displays the application page within the outer frame A, which may cause some content on the page to exceed the inner frame B and be displayed within the safety margin (for example, Figure 1 Since the area is invisible, the content in the safety margin may be blocked by other layouts or controls, or even cut off by the display screen and not fully displayed, resulting in abnormal page display.

[0071] In other scenarios, if Figure 1 The abnormal scenario in the application page is displayed. During the page refresh process, due to the refresh calculation of the page display position, the entire page may be changed from the area of ​​the inner frame B to the area of ​​the outer frame A, resulting in abnormal display of jitter in some controls in the application page.

[0072] In addition to the above safety margins, electronic devices may also set the areas where these hardware layouts are located as invisible areas due to some hardware layout requirements, such as the front camera and hole area of ​​the display. Under normal circumstances, when the application page is displayed, these areas should be avoided. For example, Figure 2 As shown in the figure, assuming that a front camera is installed in the upper left corner of the display screen, then when the application page is displayed, the coordinates of point D should be used as the coordinates of the starting position. However, in some abnormal scenarios, the electronic device does not take into account the existence of the invisible area and still uses the upper left corner of the display screen (such as point O in the figure) as the starting position of the page, which may also cause part of the application page content to be blocked and the page display to be abnormal.

[0073] In view of this, the embodiment of the present application proposes a method for displaying and laying out a page. In the process of displaying a page by an application, the information of the invisible area set on the electronic device is actively obtained, and the display layout information of the page is adjusted based on the information of the invisible area, so that the display layout of the page is better adapted to the display screen, thereby improving the page display effect. It can be understood that the method for displaying and laying out a page provided in the embodiment of the present application can be applied to electronic devices such as mobile phones, tablet computers, vehicle-mounted devices, augmented reality (AR) / virtual reality (VR) devices, laptop computers, ultra-mobile personal computers (UMPC), netbooks, personal digital assistants (PDA), etc., which can install application programs (APP). The embodiment of the present application does not impose any restrictions on the specific types of electronic devices.

[0074] For example, Figure 31 is a schematic diagram of the structure of an electronic device 100 provided in an embodiment of the present application. The electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an 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 identity 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, a bone conduction sensor 180M, etc.

[0075] The processor 110 may include one or more processing units, for example, the processor 110 may include an application processor (AP), a modem processor, a graphics processor (GPU), an image signal processor (ISP), a controller, a memory, a video codec, an audio digital signal processor (ADSP), 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.

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

[0077] 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.

[0078] In some embodiments, the processor 110 may include one or more interfaces. The interface may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a subscriber identity module (SIM) interface, and / or a universal serial bus (USB) interface, etc.

[0079] 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.

[0080] 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.

[0081] 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.

[0082] 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.

[0083] The internal memory 121 can be used to store computer executable program codes, and the executable program codes include instructions. The processor 110 executes various functional applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 121. The internal memory 121 may include a program storage area and a data storage area. Among them, the program storage area may store an operating system, 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 121 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0084] 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.

[0085] 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.

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

[0087] It is to be understood that the structure illustrated in the embodiment of the present application 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 split some components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0088] 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. 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.

[0089] Figure 41 is a software structure diagram of the electronic device 100 of the embodiment of the present application. The layered architecture divides the software into several layers, each layer has a clear role 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, namely, the application layer, the application framework layer, the Android runtime (Android runtime) and the system library, and the kernel layer. The application layer can include a series of application packages.

[0090] like Figure 4 As shown, the application package may include applications such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, short message, etc., and may also include some applications downloaded from the network.

[0091] 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.

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

[0093] The window manager is used to manage window programs. The window manager can obtain the display size, determine whether there is a status bar, lock the screen, capture the screen, etc. The content provider is used to store and obtain data and make the data accessible to applications. The data can include video, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.

[0094] The view system includes visual controls, such as controls for displaying text, controls for displaying pictures, etc. The view system can be used to build a display interface for an application. The display interface can be composed of one or more views. For example, a display interface including a text notification icon can include a view for displaying text and a view for displaying pictures. In some embodiments, during the process of displaying a page by an application, the interface provided by the electronic device 100 system can be called through the view system to actively obtain information on the invisible area set on the electronic device 100, and the display layout information of the page can be adjusted based on the information of the invisible area, and finally an adapted page layout can be drawn.

[0095] The phone manager is used to provide communication functions for the electronic device 100. For example, the management of call status (including connected, hung up, etc.). The resource manager provides various resources for the application, such as localized strings, icons, pictures, layout files, video files, etc. The notification manager enables the application to display notification information in the status bar, which can be used to convey notification-type messages and can disappear automatically after a short stay without user interaction. For example, the notification manager is used to notify the completion of downloads, message reminders, etc. The notification manager can also be a notification that appears in the status bar at the top of the system in the form of a chart or scroll bar text, such as a notification of an application running in the background, or a notification that appears on the screen in the form of a dialog window. For example, a text message is prompted in the status bar, a prompt sound is emitted, the electronic device vibrates, the indicator light flashes, etc.

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

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

[0098] 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.

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

[0100] The surface manager is used to manage the display subsystem and provide fusion of 2D and 3D layers for multiple applications. The media library supports playback and recording of multiple common audio and video formats, as well as static image files. The media library can support multiple audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc. The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, synthesis, and layer processing. The 2D graphics engine is a drawing engine for 2D drawing.

[0101] 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.

[0102] For ease of understanding, the following embodiments of the present application will be described in detail with Figure 3 and Figure 4 Taking the electronic device with the structure shown as an example, the page display layout method provided in the embodiment of the present application is specifically described in combination with the accompanying drawings and application scenarios.

[0103] First, let us introduce how electronic devices obtain information about invisible areas when invisible areas are set:

[0104] In one scenario, the software system of the electronic device is the Android system. With the support of the interface of the Android system, the information of the safety margin set by the electronic device can be obtained, such as the value of the left margin, the value of the top margin, the value of the right margin, and the value of the bottom margin. In an achievable manner, the electronic device can obtain the value of the left margin of the safety margin through the insets.getSystemWindowInsetLeft() interface, obtain the value of the top margin of the safety margin through the insets.getSystemWindowInsetTop() interface, obtain the value of the right margin of the safety margin through the insets.getSystemWindowInsetRight() interface, and obtain the value of the bottom margin of the safety margin through the insets.getSystemWindowInsetBottom() interface. For example, Figure 5 As shown, the value of the left margin is p1, the value of the top margin is p2, the value of the right margin is p3, and the value of the bottom margin is p4.

[0105] In another scenario, assuming that the display screen of the electronic device is in an xy coordinate system, such as Figure 6 As shown, the x-axis points to the right, and the y-axis points downward. In theory, the starting position of the page (or view) displayed on the electronic device should be the starting point of the upper left corner of the coordinate system. The starting point coordinates can be (0, 0), but if there are other invisible areas (such as the front camera, the hole area), the starting position of the page will no longer be the starting point of the upper left corner of the coordinate system, but the (x, y) position offset inward. At this time, the electronic device can obtain the (x, y) position through the crawling layout tool, that is, obtain the spacing information of the invisible area. In an achievable manner, the electronic device can obtain the spacing of the invisible area in the x-axis direction through the getLocationOnScreen_x interface, that is, the value of the left spacing of the display screen, and obtain the spacing of the invisible area in the y-axis direction through the getLocationOnScreen_y interface, that is, the value of the upper spacing of the display screen. For example, as Figure 6 As shown, the value of the spacing of the invisible areas in the x-axis direction is x, and the value of the spacing in the y-axis direction is y.

[0106] In the case where the information of the invisible area can be obtained, the electronic device can adjust the display layout information of the page based on the information of the invisible area. Specifically, Figure 7 : is a flow chart of a method for displaying and laying out a page provided in an embodiment of the present application, the method comprising:

[0107] S101, obtaining first information and second information during a process in which an application displays a page.

[0108] The first information may be information about the safety margin, and the second information may be information about other invisible areas except the safety margin. Figure 5 The second information can be obtained by the example shown above. Figure 6 The example shown is obtained.

[0109] S102: When the value of the first information is not zero and the value of the second information is zero, determine indentation display information of the page content based on the value of the first information.

[0110] When the value of the first information is not zero, it indicates that the display screen of the electronic device is provided with a safety margin, and when displaying the page content, the area of ​​the safety margin must be avoided. The electronic device can determine the indentation display information of the page content based on the value of the first information, so as to indent the display page content and avoid the area of ​​the safety margin.

[0111] S103: When the value of the first information is zero and the value of the second information is not zero, determine the indentation display information of the page content based on the value of the second information.

[0112] When the value of the second information is not zero, it means that the display screen of the electronic device is provided with other invisible areas. When displaying the page content, it is necessary to avoid other invisible areas. The electronic device can determine the indentation display information of the page content based on the value of the second information to indent the display page content and avoid other invisible areas.

[0113] S104: When the value of the first information and the value of the second information are both not zero, determine the indentation display information of the page content based on the value of the first information and the value of the second information.

[0114] When the value of the first information and the value of the second information are not zero, it means that the display screen of the electronic device is provided with safety margins and other invisible areas at the same time, and when displaying the page content, it is necessary to avoid the safety margin area and other invisible areas. The electronic device can determine the indentation display information of the page content based on the value of the first information and the value of the second information, so as to indent the display of the page content and avoid the safety margin area and other invisible areas.

[0115] S105, displaying and laying out the pages according to the indentation display information of the page content, and drawing and displaying the corresponding pages.

[0116] After the electronic device determines the indentation display information of the page content, it can determine the display layout of the page accordingly, and then can draw and display the corresponding page based on the display layout.

[0117] The above-mentioned page display layout method actively obtains the information of the invisible area set on the electronic device during the process of the application displaying the page, and adjusts the display layout information of the page based on the information of the invisible area, so that the display layout of the page can better adapt to the display screen and improve the page display effect.

[0118] In some embodiments, for the case where the value of the first information in the above S102 is not zero and the value of the second information is zero, because the value of the first information may include the value of the left margin, the value of the top margin, the value of the right margin, and the value of the bottom margin in the safety margin, considering that in some scenarios, the electronic device has the safety margins of the left margin and the right margin, in some scenarios, the electronic device has the safety margins of the top margin and the bottom margin, and in some scenarios, the electronic device has the safety margins of the left margin, the right margin, the top margin, and the bottom margin at the same time, then, if Figure 8 As shown, the embodiment of the present application can determine different indentation display information of page content for different scenarios.

[0119] Scenario 1: The left and right margins in the first information are not zero, and the top and bottom margins are zero, which means that the electronic device has safety margins for the left and right margins. In other words, the values ​​of insets.getSystemWindowInsetLeft() and insets.getSystemWindowInsetRight() obtained by the electronic device are not zero, and insets.getSystemWindowInsetTop() and insets.getSystemWindowInsetBottom() are zero. Assume that safeInsetLeft = insets.getSystemWindowInsetLeft(),

[0120] safeInsetRight=insets.getSystemWindowInsetRight(), then the indentation display information of the page content can be view.setPadding(safeInsetLeft, 0, safeInsetRight, 0), where the four parameters in view.setPadding represent the indentation value of the left side, the indentation value of the top side, the indentation value of the right side, and the indentation value of the bottom side of the page content. For example, the schematic diagram of the indented page content can be seen in Fig. 9 , it can be seen that the screen content has a certain indentation distance relative to the left and right sides of the display screen.

[0121] Scenario 2: The top and bottom margins in the first information are not zero, and the left and right margins are zero, which means that the electronic device has safety margins for the top and bottom margins. That is to say, the insets.getSystemWindowInsetTop() and insets.getSystemWindowInsetBottom() obtained by the electronic device are not zero, and insets.getSystemWindowInsetLeft() and insets.getSystemWindowInsetRight() are zero. Assuming safeInsetTop = insets.getSystemWindowInsetTop(),

[0122] safeInsetBottom=insets.getSystemWindowInsetBottom(), then the indentation display information of the page content can be view.setPadding(0, safeInsetTop, 0, safeInsetBottom), where the four parameters in view.setPadding represent the indentation value of the left side, the indentation value of the top side, the indentation value of the right side, and the indentation value of the bottom side of the page content. For example, the schematic diagram of the indented page content can be seen in Fig.10 , it can be seen that the screen content has a certain indentation distance relative to the upper and lower sides of the display screen.

[0123] Scenario 3: The top margin, bottom margin, left margin, and right margin values ​​in the first information are not zero, that is, the electronic device has safety margins for the top margin, bottom margin, left margin, and right margin. In other words, the insets.getSystemWindowInsetTop(), insets.getSystemWindowInsetBottom(), insets.getSystemWindowInsetLeft(), and insets.getSystemWindowInsetRight() obtained by the electronic device are not zero. Assuming safeInsetTop = insets.getSystemWindowInsetTop(),

[0124] safeInsetBottom=insets.getSystemWindowInsetBottom(),

[0125] safeInsetLeft=insets.getSystemWindowInsetLeft(),

[0126] safeInsetRight=insets.getSystemWindowInsetRight(), then the indentation display information of the page content can be view.setPadding(safeInsetLeft, safeInsetTop, safeInsetRight, safeInsetBottom), where the four parameters in view.setPadding represent the indentation value of the left side, top side, right side and bottom side of the page content respectively. For example, the schematic diagram of the page content after indentation can be seen in Fig.11 , it can be seen that the screen content has a certain indentation distance relative to the up, down, left, and right sides of the display screen.

[0127] In other embodiments, for the case where the value of the first information in the above S103 is zero and the value of the second information is not zero, because the value of the second information may include the value of the spacing of the other invisible areas in the x-axis direction and the value of the spacing in the y-axis direction, considering that in some scenarios, the electronic devices have spacing in the x-axis direction, in some scenarios, the electronic devices have spacing in the y-axis direction, and in some scenarios, the electronic devices have both spacing in the x-axis direction and spacing in the y-axis direction. Then, continue to refer to Figure 8 , the embodiment of the present application can determine different indentation display information of page content for different scenarios.

[0128] Scenario four, the value of the spacing in the x-axis direction in the value of the second information is not zero, and the value of the spacing in the y-axis direction is zero, that is, the electronic device has a left spacing. In other words, getLocationOnScreen_x obtained by the electronic device is not zero, and getLocationOnScreen_y is zero. Assuming X = getLocationOnScreen_x, the indentation display information of the page content can be view.setPadding(X, 0, 0, 0), where the four parameters in view.setPadding represent the indentation value of the left side, the top side, the right side, and the bottom side of the page content, respectively. For example, the schematic diagram after the page content is indented can be seen in Fig.12 , it can be seen that the screen content has a certain indentation spacing relative to the x-axis direction.

[0129] Scenario five, the value of the spacing in the x-axis direction in the value of the second information is zero, and the value of the spacing in the y-axis direction is not zero, that is, the electronic device has an upper spacing. In other words, getLocationOnScreen_x obtained by the electronic device is zero, and getLocationOnScreen_y is not zero. Assuming Y=getLocationOnScreen_y, the indentation display information of the page content can be view.setPadding(0, Y, 0, 0), where the four parameters in view.setPadding represent the indentation value of the left side, the top side, the right side, and the bottom side of the page content, respectively. For example, for a schematic diagram of the page content after indentation, see Fig.13 , it can be seen that the screen content has a certain indentation spacing relative to the y-axis direction.

[0130] Scenario six: In the value of the second information, both the spacing value in the x-axis direction and the spacing value in the y-axis direction are not zero, that is, the electronic device has a left spacing and a top spacing. In other words, the getLocationOnScreen_x obtained by the electronic device is not zero, and getLocationOnScreen_y is not zero. Assuming X=getLocationOnScreen_x, Y=getLocationOnScreen_y, the indentation display information of the page content can be view.setPadding(X, Y, 0, 0), where the four parameters in view.setPadding represent the indentation value of the left side, the top side, the right side, and the bottom side of the page content, respectively. For example, for the schematic diagram of the page content after indentation, see Fig.14 , it can be seen that the screen content has a certain indentation spacing relative to the x-axis and y-axis directions.

[0131] In some other embodiments, for the case where the value of the first information and the value of the second information in the above S104 are not zero, because the value of the first information may include the value of the left margin, the value of the top margin, the value of the right margin and the value of the bottom margin in the safety margin, the value of the second information may include the value of the spacing of other invisible areas in the x-axis direction and the value of the spacing in the y-axis direction, considering that in some scenarios, the electronic device has the safety margins of the left margin and the right margin, and the spacing of other invisible areas in the x-axis direction and the spacing in the y-axis direction, in some scenarios, the electronic device has the safety margins of the top margin and the bottom margin, and the spacing of other invisible areas in the x-axis direction and the spacing in the y-axis direction, and in some scenarios, the electronic device has the safety margins of the left margin, the right margin, the top margin and the bottom margin, and the spacing of other invisible areas in the x-axis direction and the spacing in the y-axis direction. Then, continue to refer to Figure 8 , the embodiment of the present application can determine different indentation display information of page content for different scenarios.

[0132] Scenario 7: The left and right margins in the first information are not zero, and the top and bottom margins are zero, which means that the electronic device has safety margins for the left and right margins. Assume

[0133] safeInsetLeft=insets.getSystemWindowInsetLeft(),

[0134] safeInsetRight=insets.getSystemWindowInsetRight(). Under this condition, at least one of the spacing value in the x-axis direction and the spacing value in the y-axis direction in the value of the second information is not zero, that is, the electronic device still has at least one of the left spacing and the top spacing, that is, at least one of getLocationOnScreen_x and getLocationOnScreen_y obtained by the electronic device is not zero. Assuming X=getLocationOnScreen_x, Y=getLocationOnScreen_y, there may be the following three sub-scenarios in this scenario:

[0135] Sub-scenario one: the value of the spacing in the x-axis direction in the value of the second information is not zero, and the value of the spacing in the y-axis direction is zero, that is, X is not zero and Y is zero. The indentation display information of the page content can be view.setPadding(X+safeInsetLeft, 0, safeInsetRight, 0), where the four parameters in view.setPadding represent the indentation value of the left side, the top side, the right side, and the bottom side of the page content, respectively.

[0136] Sub-scenario two: the value of the spacing in the x-axis direction in the value of the second information is zero, and the value of the spacing in the y-axis direction is not zero, that is, X is zero and Y is not zero. The indentation display information of the page content can be view.setPadding(safeInsetLeft, Y, safeInsetRight, 0), where the four parameters in view.setPadding represent the indentation value of the left side, the top side, the right side, and the bottom side of the page content, respectively.

[0137] Sub-scenario three: the value of the spacing in the x-axis direction in the value of the second information is not zero, and the value of the spacing in the y-axis direction is not zero, that is, X is not zero, Y is not zero, and the indentation display information of the page content can be view.setPadding(X+safeInsetLeft, Y, safeInsetRight, 0), where the four parameters in view.setPadding represent the indentation value of the left side, the top side, the right side, and the bottom side of the page content, respectively.

[0138] Scenario 8: In the first information, the left and right margins are zero, but the top and bottom margins are not zero, which means that the electronic device has safety margins for the top and bottom margins.

[0139] safeInsetTop=insets.getSystemWindowInsetTop(),

[0140] safeInsetBottom=insets.getSystemWindowInsetBottom(). Under this condition, at least one of the spacing value in the x-axis direction and the spacing value in the y-axis direction in the value of the second information is not zero, that is, the electronic device still has at least one of the left spacing and the top spacing, that is, at least one of getLocationOnScreen_x and getLocationOnScreen_y obtained by the electronic device is not zero. Assuming X=getLocationOnScreen_x, Y=getLocationOnScreen_y, there may be the following three sub-scenarios in this scenario:

[0141] Sub-scenario four: the value of the spacing in the x-axis direction in the value of the second information is not zero, and the value of the spacing in the y-axis direction is zero, that is, X is not zero and Y is zero. The indentation display information of the page content can be view.setPadding(X, safeInsetTop, 0, safeInsetBottom), where the four parameters in view.setPadding represent the indentation values ​​of the left side, top side, right side and bottom side of the page content, respectively.

[0142] Sub-scenario five: In the value of the second information, the value of the spacing in the x-axis direction is zero, and the value of the spacing in the y-axis direction is not zero, that is, X is zero and Y is not zero. The indentation display information of the page content can be view.setPadding(0, Y+safeInsetTop, 0, safeInsetBottom), where the four parameters in view.setPadding represent the indentation values ​​of the left side, top side, right side, and bottom side of the page content, respectively.

[0143] Sub-scenario six: In the value of the second information, the value of the spacing in the x-axis direction is not zero, and the value of the spacing in the y-axis direction is not zero, that is, X is not zero, Y is not zero, and the indentation display information of the page content can be view.setPadding(X, Y+safeInsetTop, 0, safeInsetBottom), where the four parameters in view.setPadding respectively represent the indentation value of the left side, the top side, the right side, and the bottom side of the page content.

[0144] Scenario 9: The values ​​of the left margin, right margin, top margin, and bottom margin in the first information are not zero, that is, the electronic device has safety margins for the left margin, right margin, top margin, and bottom margin at the same time. Assume

[0145] safeInsetTop=insets.getSystemWindowInsetTop(),

[0146] safeInsetBottom=insets.getSystemWindowInsetBottom(),

[0147] safeInsetLeft=insets.getSystemWindowInsetLeft(),

[0148] safeInsetRight=insets.getSystemWindowInsetRight(). Under this condition, at least one of the spacing value in the x-axis direction and the spacing value in the y-axis direction in the value of the second information is not zero, that is, the electronic device still has at least one of the left spacing and the top spacing, that is, at least one of getLocationOnScreen_x and getLocationOnScreen_y obtained by the electronic device is not zero. Assuming X=getLocationOnScreen_x, Y=getLocationOnScreen_y, there may be the following three sub-scenarios in this scenario:

[0149] Sub-scenario seven: In the value of the second information, the value of the spacing in the x-axis direction is not zero, and the value of the spacing in the y-axis direction is zero, that is, X is not zero and Y is zero. The indentation display information of the page content can be view.setPadding(X+safeInsetLeft, safeInsetTop, safeInsetRight, safeInsetBottom), where the four parameters in view.setPadding represent the indentation values ​​of the left, top, right and bottom of the page content, respectively.

[0150] Sub-scenario eight: In the value of the second information, the value of the spacing in the x-axis direction is zero, and the value of the spacing in the y-axis direction is not zero, that is, X is zero and Y is not zero. The indentation display information of the page content can be view.setPadding(safeInsetLeft, Y+safeInsetTop, safeInsetRight, safeInsetBottom), where the four parameters in view.setPadding represent the indentation value of the left side, the top side, the right side, and the bottom side of the page content, respectively.

[0151] Sub-scenario nine: The value of the spacing in the x-axis direction in the value of the second information is not zero, and the value of the spacing in the y-axis direction is not zero, that is, X is not zero, and Y is not zero. The indentation display information of the page content can be view.setPadding(X+safeInsetLeft, Y+safeInsetTop, safeInsetRight, safeInsetBottom), where the four parameters in view.setPadding represent the indentation value of the left side, the indentation value of the top side, the indentation value of the right side, and the indentation value of the bottom side of the page content. For example, the schematic diagram after the page content is indented can be seen in Fig.15It can be seen that the screen content has a certain indentation distance relative to the four sides of the display screen, and the indentation distance on the left and top sides is larger than that on the right and bottom sides.

[0152] Therefore, based on the implementation process of the above embodiment, the electronic device can use different adjustment methods to adjust the indentation display information of the page content according to different set invisible areas, so as to be more suitable for the current display screen and improve the page display effect.

[0153] Based on the above embodiment, if applied in the above Figure 4 In the software architecture shown in Fig.16 As shown, the display layout method of a page in an embodiment of the present application may include:

[0154] S201, the application starts to initialize the page drawing.

[0155] S202: The application program calls a system interface through the view system to obtain the first information and the second information.

[0156] When the application starts initializing the drawing of the process page, it needs to adjust the display layout information to adapt to the display screen. The application can obtain the first information and the second information by calling the system interface through the view system of the application framework layer. The system interface here can be the above-mentioned insets.getSystemWindowInsetLeft() interface, insets.getSystemWindowInsetTop() interface, insets.getSystemWindowInsetRight() interface, insets.getSystemWindowInsetBottom() interface, getLocationOnScreen_x interface and getLocationOnScreen_y interface.

[0157] S203: When the value of the first information is not zero and the value of the second information is zero, the application determines the indentation display information of the page content based on the value of the first information.

[0158] S204: When the value of the first information is zero and the value of the second information is not zero, the application determines indentation display information of the page content based on the value of the second information.

[0159] S205: When the value of the first information and the value of the second information are both not zero, the application determines the indentation display information of the page content based on the value of the first information and the value of the second information.

[0160] Among them, the implementation method of S203-S205 can refer to the description of the above embodiment, and will not be repeated here.

[0161] S206, the application displays the page layout according to the indentation display information of the page content, and draws and displays the corresponding page.

[0162] That is to say, after the application determines the indentation display information of the page content, it can draw the page and finally display the corresponding page.

[0163] In the above-mentioned page display layout method, during the process of the application displaying the page, the application actively obtains the information of the invisible area set on the electronic device, and adjusts the display layout information of the page based on the information of the invisible area, so that the display layout of the page can be better adapted to the display screen, thereby improving the page display effect.

[0164] The above describes in detail an example of a method for displaying a layout of a page provided by an embodiment of the present application. It is understandable that, in order to implement the above functions, the electronic device includes hardware and / or software modules corresponding to the execution of each function. It should be easily appreciated by those skilled in the art that, in conjunction with the units and algorithm steps of each example described in the embodiments disclosed herein, the present application can be implemented in the form of hardware or a combination of hardware and computer software. Whether a function is executed in the form of hardware or computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application in conjunction with the embodiments, but such implementation should not be considered to be beyond the scope of the present application.

[0165] The embodiment of the present application can divide the functional modules of the electronic device according to the above method example. For example, each function can be divided into various functional modules, such as a detection unit, a processing unit, a display unit, etc., or two or more functions can be integrated into one module. The above integrated module can be implemented in the form of hardware or in the form of a software functional module. It should be noted that the division of modules in the embodiment of the present application is schematic and is only a logical function division. There may be other division methods in actual implementation.

[0166] It should be noted that all relevant contents of each step involved in the above method embodiment can be referred to the functional description of the corresponding functional module and will not be repeated here.

[0167] The electronic device provided in this embodiment is used to execute the above-mentioned page display layout method, and thus can achieve the same effect as the above-mentioned implementation method.

[0168] In the case of an integrated unit, the electronic device may further include a processing module, a storage module and a communication module. The processing module may be used to control and manage the actions of the electronic device. The storage module may be used to support the electronic device to execute stored program codes and data, etc. The communication module may be used to support the electronic device to communicate with other devices.

[0169] Among them, the processing module can be a processor or a controller. It can implement or execute various exemplary logic boxes, modules and circuits described in conjunction with the disclosure of this application. The processor can also be a combination that implements computing functions, such as a combination of one or more microprocessors, a combination of a digital signal processor and a microprocessor, and the like. The storage module can be a memory. The communication module can specifically be a device that interacts with other electronic devices, such as a radio frequency circuit, a Bluetooth chip, a Wi-Fi chip, etc.

[0170] In one embodiment, when the processing module is a processor and the storage module is a memory, the electronic device involved in this embodiment may be a Figure 3 Device of the structure shown.

[0171] The embodiment of the present application also provides a computer-readable storage medium, in which a computer program is stored, and when the computer program is executed by a processor, the processor executes the page display layout method of any of the above embodiments. The storage medium may include: a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and other media that can store program codes.

[0172] The embodiment of the present application also provides a computer program product. When the computer program product is run on a computer, the computer is caused to execute the above-mentioned related steps to implement the page display layout method in the above-mentioned embodiment.

[0173] In addition, an embodiment of the present application also provides a device, which can specifically be a chip, component or module, and the device may include a connected processor and memory; wherein the memory is used to store computer execution instructions, and when the device is running, the processor can execute the computer execution instructions stored in the memory so that the chip executes the page display layout method in the above-mentioned method embodiments.

[0174] Among them, the electronic device, computer-readable storage medium, computer program product or chip provided in this embodiment are all used to execute the corresponding methods provided above. Therefore, the beneficial effects that can be achieved can refer to the beneficial effects in the corresponding methods provided above and will not be repeated here.

[0175] Through the description of the above implementation methods, technical personnel in the relevant field can understand that for the convenience and simplicity of description, only the division of the above-mentioned functional modules is used as an example. In actual applications, the above-mentioned functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above.

[0176] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0177] The above contents are only specific implementation methods of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A method for displaying and laying out a page, the method being executed by an electronic device, characterized in that: The method comprises: In the process of displaying a page by the application, first information and second information are obtained, wherein the first information is information about a safety margin set by the electronic device for the display screen, and the second information is information about other invisible areas set by the electronic device except the safety margin; When the value of the first information is not zero and the value of the second information is zero, determining indentation display information of the page content based on the value of the first information; When the value of the first information is zero and the value of the second information is not zero, determining indentation display information of the page content based on the value of the second information; When the value of the first information and the value of the second information are both not zero, determining the indentation display information of the page content based on the value of the first information and the value of the second information; The page is displayed and laid out according to the indentation display information of the page content.

2. The method according to claim 1, characterized in that: The value of the first information includes the value of the left margin, the value of the top margin, the value of the right margin and the value of the bottom margin in the safety margin, and the value of the second information includes the value of the spacing of the other invisible areas in the x-axis direction and the value of the spacing in the y-axis direction.

3. The method according to claim 2, characterized in that The step of determining the indentation display information of the page content based on the value of the first information when the value of the first information is not zero and the value of the second information is zero includes: When the values ​​of the left margin and the right margin are not zero and the values ​​of the top margin and the bottom margin are zero, the value of the left margin is determined as the indentation value of the left side of the page content and the value of the right margin is determined as the indentation value of the right side of the page content; When the value of the top margin and the value of the bottom margin are not zero and the value of the left margin and the value of the right margin are zero, the value of the top margin is determined as the indentation value of the upper side of the page content, and the value of the bottom margin is determined as the indentation value of the lower side of the page content; When the values ​​of the top margin, the bottom margin, the left margin and the right margin are all non-zero, the value of the left margin is determined as the indentation value of the left side of the page content, the value of the right margin is determined as the indentation value of the right side of the page content, the value of the top margin is determined as the indentation value of the upper side of the page content, and the value of the bottom margin is determined as the indentation value of the lower side of the page content.

4. The method according to claim 2, characterized in that: The determining, when the value of the first information is zero and the value of the second information is not zero, the indentation display information of the page content based on the value of the second information includes: When the value of the spacing in the x-axis direction is not zero and the value of the spacing in the y-axis direction is zero, the value of the spacing in the x-axis direction is determined as the indentation value of the left side of the page content; When the value of the spacing in the x-axis direction is zero and the value of the spacing in the y-axis direction is not zero, the value of the spacing in the y-axis direction is determined as the indentation value of the upper side of the page content; When the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction are not zero, the value of the spacing in the x-axis direction is determined as the indentation value of the left side of the page content, and the value of the spacing in the y-axis direction is determined as the indentation value of the top side of the page content.

5. The method according to claim 2, characterized in that: The determining, when the value of the first information and the value of the second information are both non-zero, the indentation display information of the page content based on the value of the first information and the value of the second information comprises: In a case where the value of the left margin and the value of the right margin are not zero and at least one of the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction is not zero, determining the indentation display information of the page content based on the value of the left margin and the value of the right margin, the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction; In a case where the value of the top margin and the value of the bottom margin are not zero and at least one of the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction is not zero, determining the indentation display information of the page content based on the value of the top margin and the value of the bottom margin, the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction; When the value of the top margin, the value of the bottom margin, the value of the left margin, and the value of the right margin are all non-zero, and at least one of the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction is non-zero, the indentation display information of the page content is determined based on the value of the top margin, the value of the bottom margin, the value of the left margin, and the value of the right margin, the value of the spacing in the x-axis direction, and the value of the spacing in the y-axis direction.

6. The method according to claim 5, characterized in that The determining the indentation display information of the page content based on the value of the left margin and the value of the right margin, the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction includes: When the value of the spacing in the x-axis direction is not zero and the value of the spacing in the y-axis direction is zero, the sum of the value of the left margin and the value of the spacing in the x-axis direction is determined as the indentation value of the left side of the page content, and the value of the right margin is determined as the indentation value of the right side of the page content; When the value of the spacing in the x-axis direction is zero and the value of the spacing in the y-axis direction is not zero, the value of the left margin is determined as the indentation value of the left side of the page content, the value of the spacing in the y-axis direction is determined as the indentation value of the top side of the page content, and the value of the right margin is determined as the indentation value of the right side of the page content; When the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction are not zero, the sum of the value of the left margin and the value of the spacing in the x-axis direction is determined as the indentation value of the left side of the page content, the value of the spacing in the y-axis direction is determined as the indentation value of the top side of the page content, and the value of the right margin is determined as the indentation value of the right side of the page content.

7. The method according to claim 5, characterized in that The determining the indentation display information of the page content based on the value of the top margin and the value of the bottom margin, the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction includes: When the value of the spacing in the x-axis direction is not zero and the value of the spacing in the y-axis direction is zero, the value of the spacing in the x-axis direction is determined as the indentation value of the left side of the page content, the value of the top margin is determined as the indentation value of the upper side of the page content, and the value of the bottom margin is determined as the indentation value of the lower side of the page content; When the value of the spacing in the x-axis direction is zero and the value of the spacing in the y-axis direction is not zero, the sum of the value of the top margin and the value of the spacing in the y-axis direction is determined as the indentation value of the upper side of the page content, and the value of the bottom margin is determined as the indentation value of the lower side of the page content; When the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction are not zero, the value of the spacing in the x-axis direction is determined as the indentation value of the left side of the page content, the sum of the value of the top margin and the value of the spacing in the y-axis direction is determined as the indentation value of the upper side of the page content, and the value of the bottom margin is determined as the indentation value of the lower side of the page content.

8. The method according to claim 5, characterized in that The determining of the indentation display information of the page content based on the value of the top margin, the value of the bottom margin, the value of the left margin, the value of the right margin, the value of the spacing in the x-axis direction, and the value of the spacing in the y-axis direction includes: When the value of the spacing in the x-axis direction is not zero and the value of the spacing in the y-axis direction is zero, the sum of the value of the left margin and the value of the spacing in the x-axis direction is determined as the indentation value of the left side of the page content, the value of the top margin is determined as the indentation value of the top side of the page content, the value of the right margin is determined as the indentation value of the right side of the page content, and the value of the bottom margin is determined as the indentation value of the bottom side of the page content; When the value of the spacing in the x-axis direction is zero and the value of the spacing in the y-axis direction is not zero, the value of the left margin is determined as the indentation value of the left side of the page content, the sum of the value of the top margin and the value of the spacing in the y-axis direction is determined as the indentation value of the top side of the page content, the value of the right margin is determined as the indentation value of the right side of the page content, and the value of the bottom margin is determined as the indentation value of the bottom side of the page content; When the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction are not zero, the sum of the value of the left margin and the value of the spacing in the x-axis direction is determined as the indentation value of the left side of the page content, the sum of the value of the top margin and the value of the spacing in the y-axis direction is determined as the indentation value of the top side of the page content, the value of the right margin is determined as the indentation value of the right side of the page content, and the value of the bottom margin is determined as the indentation value of the bottom side of the page content.

9. The method according to any one of claims 2 to 8, characterized in that The obtaining of the first information and the second information includes: Get the value of the left margin through the insets.getSystemWindowInsetLeft() interface, get the value of the top margin through the insets.getSystemWindowInsetTop() interface, get the value of the right margin through the insets.getSystemWindowInsetRight() interface, and get the value of the bottom margin through the insets.getSystemWindowInsetBottom() interface; The value of the spacing in the x-axis direction is obtained through the getLocationOnScreen_x interface, and the value of the spacing in the y-axis direction is obtained through the getLocationOnScreen_y interface.

10. An electronic device, characterized in that: The electronic device comprises: one or more processors, and memory; The memory is coupled to the one or more processors, and the memory is used to store computer program codes, wherein the computer program codes include computer instructions, and the one or more processors call the computer instructions to enable the electronic device to perform the method as claimed in any one of claims 1 to 9.

11. 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 one or more processors are used to call computer instructions so that the electronic device executes the method as described in any one of claims 1 to 9.

12. A computer-readable storage medium, characterized in that: The computer-readable storage medium comprises instructions, which, when executed on an electronic device, enable the electronic device to perform the method as claimed in any one of claims 1 to 9.

13. A computer program product, characterized in that The computer program product comprises a computer program, and when the computer program is run on an electronic device, the electronic device is caused to perform the method according to any one of claims 1 to 9.

Images