Page display layout method and electronic device

Abstract

Embodiments of the present application provide a page display layout method and an electronic device. The method is performed by the electronic device and includes: obtaining first information and second information in a process of displaying a page of an application program, the first information being information of a safety margin set by the electronic device for a display screen, and the second information being information of an invisible area other than the safety margin set by the electronic device; in a case where a value of the first information is not zero and a value of the second information is zero, determining, based on the value of the first information, indentation display information of page content; in a case where the value of the first information is zero and the value of the second information is not zero, determining, based on the value of the second information, the indentation display information of the page content; in a case where the value of the first information and the value of the second information are not zero, determining, based on the value of the first information and the value of the second information, the indentation display information of the page content; and performing display layout on the page according to the indentation display information of the page content. Thus, the page display effect can be improved.

Description

TECHNICAL FIELD

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

[0002] Currently, various application program pages can be displayed on electronic devices (such as mobile phones, tablet computers, etc.), and the page display layout method is crucial to the display effect.

[0003] Generally, when an application program loads and displays a page, the page can be laid out based on the display area of the display screen of the electronic device. However, due to the large variety of display screens at present, the display areas set also have differences, and if the page display layout method does not better adapt to the display screen, the page display will be abnormal. SUMMARY

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

[0005] In a first aspect, the present application provides a page display layout method, which is executed by an electronic device and includes: obtaining first information and second information in the process of displaying a page by an application program, the first information being information of a safety margin set by the electronic device for the display screen, and the second information being information of other invisible areas set by the electronic device except the safety margin; in the case that the value of the first information is not zero and the value of the second information is zero, determining the indented display information of the page content based on the value of the first information; in the case that the value of the first information is zero and the value of the second information is not zero, determining the indented display information of the page content based on the value of the second information; in the case that the value of the first information and the value of the second information are not zero, determining the indented 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.

[0006] That is to say, in the process of displaying a page by an application program in the electronic device, the information of the invisible areas set by the electronic device can be actively obtained, including the information of the safety margin and the information of other invisible areas, etc. Then the indented display information of the page content to be displayed is determined based on the information of the invisible areas, i.e. avoiding the areas of the safety margin and other invisible areas, thereby adjusting the display layout information of the page, so that the page display layout method better adapts to the display screen and improves the page display effect.

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

[0008] In some implementations of the first aspect, the safety margin includes a left margin, a top margin, a right margin, and a bottom margin, and the electronic device can obtain values of the four margins. The other invisible region can correspond to a spacing in an x-axis direction and a spacing in a y-axis direction according to a position in an xy-axis coordinate system, and the electronic device can obtain values of the two spacings. Thus, the information of the invisible region can be used to adjust the display layout information of the page.

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

[0010] That is, the system of the electronic device can provide the above interfaces to accurately obtain the values of the information, and accurately determine the display layout information, thereby improving the display effect of the page.

[0011] 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, the display layout information of the page content is determined based on the value of the first information, including:

[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 indent value on the left side of the page content, and the value of the right margin is determined as the indent value on 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 indent value on the top side of the page content, and the value of the bottom margin is determined as the indent value on the bottom side of the page content.

[0014] In a case where the value of the left margin, the value of the right margin, the value of the top margin, and the value of the bottom margin are all not 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 top side of the page content, and the value of the bottom margin is determined as the indent value of the bottom side of the page content.

[0015] In a case where the value of the left margin and the value of the right margin are not zero, that is, the electronic device has the safe margins of the left margin and the right margin, the indent display information of the page content can be view.setPadding(safeInsetLeft, 0, safeInsetRight, 0). In a case where the value of the top margin and the value of the bottom margin are not zero, that is, the electronic device has the safe margins of the top margin and the bottom margin, the indent display information of the page content can be view.setPadding(0, safeInsetTop, 0, safeInsetBottom). In a case where the value of the left margin, the value of the right margin, the value of the top margin, and the value of the bottom margin are all not zero, that is, the electronic device has the safe margins of the top margin, the bottom margin, the left margin, and the right margin, the indent display information of the page content can be view.setPadding(safeInsetLeft, safeInsetTop, safeInsetRight, safeInsetBottom), where the four parameters in view.setPadding represent the indent value of the left side of the page content, the indent value of the top side, the indent value of the right side, and the indent value of the bottom side, respectively.

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

[0017] In a case where the value of the interval in the x-axis direction is not zero and the value of the interval in the y-axis direction is zero, the value of the interval in the x-axis direction is determined as the indent value of the left side of the page content.

[0018] In a case where the value of the interval in the x-axis direction is zero and the value of the interval in the y-axis direction is not zero, the value of the interval in the y-axis direction is determined as the indent value of the top side of the page content.

[0019] In a case where the value of the interval in the x-axis direction and the value of the interval in the y-axis direction are both not zero, the value of the interval in the x-axis direction is determined as the indent value of the left side of the page content and the value of the interval in the y-axis direction is determined as the indent value of the top side of the page content.

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

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

[0022] In the case where the value of the left margin and the value of the right margin are both 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 page content indentation display information based on the value of the left margin and the value of the right margin, and the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction;

[0023] In the case where the value of the upper margin and the value of the lower margin are both 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 page content indentation display information based on the value of the upper margin and the value of the lower margin, and the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction;

[0024] In the case where the value of the upper margin, the value of the lower margin, the value of the left margin and the value of the right margin are all 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 page content indentation display information based on the value of the upper margin, the value of the lower margin, the value of the left margin and the value of the right margin, and the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction.

[0025] That is, in the case where the value of the first information and the value of the second information are both not zero, the electronic device can consider different cases of the value of the left margin and the value of the right margin, the value of the upper margin and the value of the lower margin, the value of the spacing in the x-axis direction and the value of the spacing in the y-axis direction respectively, to determine the page content indentation display information in different cases.

[0026] With reference to the first aspect, in some implementations of the first aspect, the determining of the indent display information of the page content based on 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 comprises:

[0027] In a case where 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 indent value on the left side of the page content, and the value of the right margin is determined as the indent value on the right side of the page content.

[0028] In a case where 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 indent value on the left side of the page content, the value of the spacing in the y-axis direction is determined as the indent value on the top side of the page content, and the value of the right margin is determined as the indent value on the right side of the page content.

[0029] In a case where 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 indent value on the left side of the page content, the value of the spacing in the y-axis direction is determined as the indent value on the top side of the page content, and the value of the right margin is determined as the indent value on the right side of the page content.

[0030] In a case where the value of the left margin and the value of the right margin are not zero, if the value of the spacing in the x-axis direction is not zero, the indent 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 indent display information of the page content can be view.setPadding(safeInsetLeft, Y, safeInsetRight, 0); and 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 indent display information of the page content can be view.setPadding(X+safeInsetLeft, Y, safeInsetRight, 0), where the four parameters in view.setPadding represent the indent value on the left side of the page content, the indent value on the top side of the page content, the indent value on the right side of the page content and the indent value on the bottom side of the page content respectively.

[0031] With reference to the first aspect, in some implementations of the first aspect, the determining of the indent display information of the page content based on the value of the top margin, 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 comprises:

[0032] In a case where 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 indent value on the left side of the page content, the value of the top margin is determined as the indent value on the upper side of the page content, and the value of the bottom margin is determined as the indent value on the lower side of the page content.

[0033] In a case where 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 indent value on the upper side of the page content, and the value of the bottom margin is determined as the indent value on the lower side of the page content.

[0034] In a case where 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, the value of the spacing in the x-axis direction is determined as the indent value on 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 indent value on the upper side of the page content, and the value of the bottom margin is determined as the indent value on the lower side of the page content.

[0035] In a case where 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 indent 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 indent 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 indent display information of the page content can be view.setPadding(X, Y+safeInsetTop, 0, safeInsetBottom), where the four parameters in view.setPadding represent the indent value on the left side of the page content, the indent value on the upper side, the indent value on the right side, and the indent value on the lower side, respectively.

[0036] In combination with the first aspect, in some implementations of the first aspect, determining the indent 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, 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:

[0037] In a case where 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 indent value on the left side of the page content, the value of the top margin is determined as the indent value on the upper side of the page content, the value of the right margin is determined as the indent value on the right side of the page content, and the value of the bottom margin is determined as the indent value on the lower side of the page content.

[0038] In the case that 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 indent value on 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 indent value on the top side of the page content, the value of the right margin is determined as the indent value on the right side of the page content, and the value of the bottom margin is determined as the indent value on the bottom side of the page content.

[0039] In the case that 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 indent value on 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 indent value on the top side of the page content, the value of the right margin is determined as the indent value on the right side of the page content, and the value of the bottom margin is determined as the indent value on the bottom side of the page content.

[0040] In the case that the value of the left margin, the value of the right margin, 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 indent 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 indent display information of the page content can be view.setPadding(safeInsetLeft, Y+safeInsetTop, safeInsetRight, 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 indent 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 indent value on the left side of the page content, the indent value on the top side, the indent value on the right side and the indent value on the bottom side respectively.

[0041] Therefore, based on the above implementation manner, the electronic device can adjust the indent display information of the page content in different adjustment manners for different invisible areas set, 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 an apparatus, which is included in an electronic device, and the apparatus has a function of implementing the behaviors of the electronic device in the first aspect and possible implementation manners of the first aspect. The function can be implemented by hardware, or by hardware executing corresponding software. The hardware or software includes one or more modules or units corresponding to the above functions. For example, a receiving module or unit, a processing module or unit, and the like.

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

[0044] The memory is coupled to the one or more processors, and the memory is configured to store computer program codes, the computer program codes including computer instructions, and the one or more processors are configured to invoke the computer instructions to cause the electronic device to perform any of the methods in 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 configured to invoke computer instructions to cause the electronic device to perform the method in the first aspect and any possible implementation manner thereof.

[0046] Optionally, the chip system further includes a memory, and the memory is connected to the processor through a circuit or a wire.

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

[0048] In a fifth aspect, the present application provides a computer readable storage medium, and the computer readable storage medium includes instructions, and when the instructions are run on an electronic device, the instructions cause the electronic device to perform any of the methods in the first aspect.

[0049] In a sixth aspect, the present application provides a computer program product, and the computer program product includes computer program codes, and when the computer program codes are run on an electronic device, the computer program codes cause the electronic device to perform any of the methods in the first aspect. BRIEF DESCRIPTION OF DRAWINGS

[0050] Figure 1 FIG. 1 is a schematic diagram of a scene in which an electronic device sets a security margin according to an embodiment of the present application;

[0051] Figure 2 FIG. 2 is a schematic diagram of a scene in which an electronic device sets other invisible areas according to an embodiment of the present application;

[0052] Figure 3 FIG. 3 is a schematic diagram of a structure of an electronic device according to an embodiment of the present application;

[0053] Figure 4 Fig. 1 is a software structure block diagram of an electronic device according to an embodiment of the present application;

[0054] Figure 5 Fig. 2 is a schematic diagram of obtaining information of a safety margin according to an embodiment of the present application;

[0055] Figure 6 Fig. 3 is a schematic diagram of obtaining information of other invisible areas according to an embodiment of the present application;

[0056] Figure 7 Fig. 4 is a flowchart of a display layout method of a page according to an embodiment of the present application;

[0057] Figure 8 Fig. 5 is a process schematic diagram of determining indented display information based on first information and second information according to an embodiment of the present application;

[0058] Figure 9 Fig. 6 is a schematic diagram of page content indented display according to an embodiment of the present application;

[0059] Figure 10 Fig. 7 is another schematic diagram of page content indented display according to an embodiment of the present application;

[0060] Figure 11 Fig. 8 is yet another schematic diagram of page content indented display according to an embodiment of the present application;

[0061] Figure 12 Fig. 9 is yet another schematic diagram of page content indented display according to an embodiment of the present application;

[0062] Figure 13 Fig. 10 is yet another schematic diagram of page content indented display according to an embodiment of the present application;

[0063] Figure 14 Fig. 11 is yet another schematic diagram of page content indented display according to an embodiment of the present application;

[0064] Figure 15 Fig. 12 is yet another schematic diagram of page content indented display according to an embodiment of the present application;

[0065] Figure 16 Fig. 13 is a module interaction schematic diagram of a display layout method of a page according to an embodiment of the present application. DETAILED DESCRIPTION

[0066] The technical solutions in the embodiments of the present application will be described below with reference to the drawings in the embodiments of the present application. In the description of the embodiments of the present application, unless otherwise specified, " / " represents the meaning of or, for example, A / B can represent A or B; in this document, "and / or" is only a description of the association relationship of the associated objects, which means that there can be three relationships, for example, A and / or B, which means that there are three cases of A alone, A and B together, and B alone. In addition, in the description of the embodiments of the present application, "multiple" means two or more than two.

[0067] Hereinafter, the terms "first", "second", "third" are only for descriptive purposes, and cannot be understood as indicating or implying relative importance or implicitly indicating the number of indicated technical features. Therefore, the features defined with "first", "second", "third" can explicitly or implicitly include one or more features.

[0068] Currently, various application pages can be displayed on electronic devices (such as mobile phones, tablets, etc.), such as displaying system applications or various applications downloaded and installed on the electronic device, and the display layout of the page is crucial to the display effect.

[0069] Generally, when an application displays a page, it can be laid out based on the display area of the display screen of the electronic device. However, due to the variety of display screens at present, the display area set also has differences, and if the display layout of the page does not better adapt to the display screen, it will cause the page to be displayed abnormally.

[0070] For example, the display screen of some electronic devices is provided with an invisible area. For example, in order to ensure that the display content of the application is not blocked, while improving user experience and page aesthetics, a safety margin can be set as an invisible area for the display screen. The safety margin refers to the safe distance between the display content on the display screen and the edge of the screen. Referring to 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 set, and the safety margin between the outer frame A and the inner frame B is the invisible area. Under normal circumstances, the page of the application should be displayed within the inner frame B, so that all page content can be displayed. However, in some abnormal scenarios, the electronic device does not take into account the existence of the safety margin, and displays the page of the application within the outer frame A, which may cause some content in the page to exceed the inner frame B and be displayed in the safety margin (for example Figure 1 , the search content in the text), since this area is an invisible area, the content in the safety margin may be blocked by other layouts or controls, or even truncated by the display screen, and not completely displayed, resulting in abnormal page display.

[0071] In other scenarios, if the display layout of the page is not adapted to the display screen, the page may be displayed in the safety margin of the display screen, and the content in the safety margin may be blocked by other layouts or controls, or even truncated by the display screen, and not completely displayed, resulting in abnormal page display.Figure 1 In the abnormal scenario, the application displays the page, and during the page refreshing, due to the refreshing calculation of the page display position, the page as a whole may also be transformed from the area of the inner frame B to the area of the outer frame A, causing some controls in the page of the application to have abnormal display of jitter.

[0072] In addition to the above safety margin, there may be some hardware layout needs on the electronic device, such as the front camera of the display screen, the notch area, etc. The area where these hardware layouts are located is also set as an invisible area. Under normal circumstances, the application page should avoid these areas when displaying. Exemplarily, as shown in Figure 2 The left upper corner of the display screen is equipped with a front camera, and the application page should take the coordinate of the D point as the starting coordinate when displaying the layout. However, in some abnormal scenarios, the electronic device does not take into account the existence of the invisible area, and still takes the left upper corner of the display screen (such as the O point in the figure) as the starting position of the page, which may also cause part of the page content of the application to be blocked, and the page display to be abnormal.

[0073] Therefore, the embodiments of the present application provide a page display layout method. In the process of displaying the page of the application, the information of the invisible area set on the electronic device is actively acquired, 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, and the page display effect is improved. It can be understood that the page display layout method provided by the embodiments of the present application can be applied to mobile phones, tablet computers, vehicle-mounted devices, augmented reality (AR) / virtual reality (VR) devices, notebook computers, ultra-mobile personal computers (UMPC), netbooks, personal digital assistants (PDA), and other electronic devices that can install applications (APP). The embodiments of the present application do not make any limitation on the specific type of electronic device.

[0074] Exemplarily, Figure 3Fig. 1 is a structural schematic diagram of an electronic device 100 provided by an embodiment of the present application. The electronic device 100 can 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 loudspeaker 170A, a receiver 170B, a microphone 170C, a headset interface 170D, a sensor module 180, a key 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identity module (SIM) card interface 195, etc. The sensor module 180 can include a pressure sensor 180A, a gyroscope sensor 180B, a barometric 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 can include one or more processing units, for example: the processor 110 can include an application processor (AP), a modem processor, a graphics processing unit (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 can be independent devices or integrated in one or more processors.

[0076] The controller can be the nerve center and command center of the electronic device 100. The controller can generate operation control signals according to instruction operation codes and timing signals to complete the control of instruction fetching and instruction execution.

[0077] The processor 110 can also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory can hold instructions or data that the processor 110 has just used or is using repeatedly. If the processor 110 needs to use the instructions or data again, it can call them directly from the memory. This avoids repeated access and reduces the waiting time of the processor 110, thus improving the efficiency of the system.

[0078] In some embodiments, the processor 110 can include one or more interfaces. The interfaces can 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, etc.

[0080] The wireless communication module 160 can provide a solution for wireless communication, including wireless local area networks (WLAN) (e.g., wireless fidelity (Wi-Fi) network), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR) technology, etc., which are applied on the electronic device 100. The wireless communication module 160 can be one or more devices that integrate at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, frequency-modulates and filters the electromagnetic wave signals, and transmits the processed signals to the processor 110. The wireless communication module 160 can also receive signals to be transmitted from the processor 110, frequency-modulate them, amplify them, and radiate them as electromagnetic waves via the antenna 2.

[0081] The electronic device 100 implements a display function through a GPU, a display screen 194, and an application processor, etc. The GPU is a microprocessor for image processing, which is connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 can 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 adopt a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a Miniled, a MicroLed, a Micro-oLed, a quantum dot light-emitting diode (QLED), etc. In some embodiments, the electronic device 100 can include 1 or N display screens 194, and N is a positive integer greater than 1.

[0083] The internal memory 121 can be used to store computer executable program codes, the executable program codes including instructions. The processor 110 performs various function applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 121. The internal memory 121 can include a program storage area and a data storage area. The program storage area can store an operating system, at least one application program (such as a sound playing function, an image playing function, etc.) required by a function, etc. The data storage area can store data (such as audio data, a phone book, etc.) created during use of the electronic device 100, etc. In addition, the internal memory 121 can include a high-speed random access memory, and can further include a non-volatile memory such as at least one magnetic disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0084] The electronic device 100 can realize audio functions through an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headphone interface 170D, an application processor, etc. For example, music playing, recording, etc.

[0085] The keys 190 include a power-on key, a volume key, etc. The keys 190 can be mechanical keys. Alternatively, the keys 190 can be touch keys. The electronic device 100 can receive key inputs, and generate key signal inputs related to user settings and function control of the electronic device 100.

[0086] The indicator 192 can be an indicator light, and can be used to indicate a charging state, a power change, and can also be used to indicate a message, a missed call, a notification, etc.

[0087] It can be understood that the structure illustrated in the embodiments 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 can include more or fewer components than illustrated, or combine certain components, or split certain components, or different component arrangements. The illustrated components can be implemented in hardware, software, or a combination of software and hardware.

[0088] The software system of the electronic device 100 can adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture. The embodiments of the present application take an Android system with a layered architecture as an example to exemplarily illustrate the software structure of the electronic device 100.

[0089] Figure 4is a software structure block diagram of the electronic device 100 of the embodiments of the present application. The layered architecture divides the software into several layers, each of which 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, the application layer, the application framework layer, the Android runtime and the system library, and the kernel layer. The application layer can include a series of application packages.

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

[0091] The application framework layer provides the application layer with application programming interface (API) and programming framework for the application. The application framework layer includes some pre-defined functions.

[0092] As shown in Figure 4 , the application framework layer can include window manager, content provider, view system, phone manager, resource manager, notification manager, etc.

[0093] The window manager is used to manage the window program. The window manager can obtain the size of the display screen, determine whether there is a status bar, lock the screen, and intercept the screen. The content provider is used to store and obtain data, and makes the data accessible to the application. The data can include video, image, audio, dialing and answering phone, browsing history and bookmark, phone book, 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 the display interface of the application. The display interface can be composed of one or more views. For example, the display interface including the short message notification icon can include the view for displaying text and the view for displaying pictures. In some embodiments, in the process of displaying the application page, the information of the invisible area set on the electronic device 100 can be actively obtained through the view system, calling the interface provided by the electronic device 100 system, adjusting the display layout information of the page based on the information of the invisible area, and finally drawing the adapted page layout.

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

[0096] The Android runtime includes a core library and a virtual machine. The Android runtime is responsible for scheduling and management of the Android system.

[0097] The core library includes two parts: one part is a function function that the java language needs to call, and the other part is the core library of Android.

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

[0099] The system library can include multiple functional modules. For example: a surface manager, media libraries, a three-dimensional graphics processing library (for example: OpenGL ES), a 2D graphics engine (for example: SGL), etc.

[0100] The surface manager is used to manage the display subsystem and provides fusion of 2D and 3D layers for multiple applications. The media library supports playback and recording of various commonly used audio, video formats, and static image files, etc. The media library can support various audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc. The three-dimensional graphics processing library is used to realize three-dimensional graphics drawing, image rendering, synthesis, and layer processing, etc. 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 at least includes a display driver, a camera driver, an audio driver, and a sensor driver.

[0102] For ease of understanding, the following embodiments of the present application will be described with reference to an electronic device 100 having a display 160, a memory 170, a processor 180, and a communication interface 190. Figure 3 andFigure 4 The electronic device shown in the structure is taken as an example, and the display layout method of the page provided by the embodiments of the present application is specifically described in combination with the drawings and application scenarios.

[0103] First, we introduce the way for the electronic device to obtain the information of the invisible area when the invisible area is set:

[0104] In one scenario, the software system of the electronic device is an Android system, and under 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 the safety margin. In one implementable way, the electronic device can obtain the value of the left margin in the safety margin through the interface of insets.getSystemWindowInsetLeft(), obtain the value of the top margin in the safety margin through the interface of insets.getSystemWindowInsetTop(), obtain the value of the right margin in the safety margin through the interface of insets.getSystemWindowInsetRight(), and obtain the value of the bottom margin in the safety margin through the interface of insets.getSystemWindowInsetBottom(). Exemplarily, as shown in Figure 5 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, it is assumed that the display screen of the electronic device is in an xy coordinate system, as shown in Figure 6 The positive direction of the x-axis is to the right, and the positive direction of the y-axis is downward. In theory, the starting position of the page (or view) displayed on the electronic device should be the starting point position of the upper left corner of the coordinate system, which can be (0, 0), but if there are other invisible areas (such as front cameras, notch areas), the starting position of the page will no longer be the starting point position of the upper left corner of the coordinate system, but will be the (x, y) position offset inward. At this time, the electronic device can obtain the (x, y) position by grabbing the layout tool, that is, obtain the spacing information of the invisible area. In one implementable way, the electronic device can obtain the spacing of the invisible area in the x-axis direction, that is, the value of the left spacing of the display screen, through the interface of getLocationOnScreen_x, and obtain the spacing of the invisible area in the y-axis direction, that is, the value of the top spacing of the display screen, through the interface of getLocationOnScreen_y. Exemplarily, as shown in Figure 6 The value of the spacing of the invisible area in the x-axis direction is x, and the value of the spacing of the invisible area in the y-axis direction is y.

[0106] In a case where the information of the invisible region can be acquired, the electronic device can adjust the display layout information of the page based on the information of the invisible region, specifically, Figure 7 is a flowchart of a display layout method of a page provided by an embodiment of the present application, and the method comprises the following steps:

[0107] S101, in the process of displaying the page of the application, acquire first information and second information.

[0108] The first information can be information of a safety margin, and the second information can be information of an invisible region other than the safety margin. The first information can be acquired through the example shown in the above Figure 5 , and the second information can be acquired through the example shown in the above Figure 6 .

[0109] S102, in a case where the value of the first information is not zero and the value of the second information is zero, determine the indented display information of the page content based on the value of the first information.

[0110] In a case where 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 should be avoided. Therefore, the electronic device can determine the indented display information of the page content based on the value of the first information, so as to indent the display of the page content and avoid the area of the safety margin.

[0111] S103, in a case where the value of the first information is zero and the value of the second information is not zero, determine the indented display information of the page content based on the value of the second information.

[0112] In a case where the value of the second information is not zero, it indicates that the display screen of the electronic device is provided with an invisible region, and when displaying the page content, the invisible region should be avoided. Therefore, the electronic device can determine the indented display information of the page content based on the value of the second information, so as to indent the display of the page content and avoid the invisible region.

[0113] S104, in a case where the value of the first information and the value of the second information are both not zero, determine the indented display information of the page content based on the value of the first information and the value of the second information.

[0114] In a case where the value of the first information and the value of the second information are both not zero, it indicates that the display screen of the electronic device is provided with both a safety margin and an invisible region, and when displaying the page content, the area of the safety margin and the invisible region should be avoided. Therefore, the electronic device can determine the indented 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 area of the safety margin and the invisible region.

[0115] S105, display layout of the page according to the indented display information of the page content, and draw and display the corresponding page.

[0116] After the electronic device determines the indented display information of the page content, the display layout of the page can be determined correspondingly, and then the corresponding page can be drawn and displayed based on the display layout.

[0117] The display layout method of the page actively acquires information of the invisible area set on the electronic device in the process of displaying the page of the application, adjusts the display layout information of the page based on the information of the invisible area, so that the display layout of the page is better adapted to the display screen, and the page display effect is improved.

[0118] In some embodiments, for the case that the value of the first information is not zero and the value of the second information is zero in S102, since the value of the first information can 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 safe margin, considering that in some scenarios the electronic device has left and right margin safe margins, in some scenarios the electronic device has top and bottom margin safe margins, and in some scenarios the electronic device has left, right, top and bottom margin safe margins, then, as shown in Figure 8 different indented display information of the page content can be determined for different scenarios.

[0119] Scenario one, the value of the left margin and the value of the right margin in the value of the first information are not zero, and the value of the top margin and the value of the bottom margin are zero, that is, the electronic device has left and right margin safe margins. That is, the electronic device acquires insets.getSystemWindowInsetLeft() and insets.getSystemWindowInsetRight() which are not zero, and insets.getSystemWindowInsetTop() and insets.getSystemWindowInsetBottom() which are zero. Assuming that safeInsetLeft=insets.getSystemWindowInsetLeft(),

[0120] safeInsetRight = insets.getSystemWindowInsetRight(), the page content indentation display information can be view.setPadding(safeInsetLeft, 0, safeInsetRight, 0), wherein the four parameters in view.setPadding represent the left indentation value of the page content, the upper indentation value, the right indentation value and the lower indentation value respectively. Exemplarily, see the schematic diagram of the page content after indentation Figure 9 It can be seen that the screen content has a certain indentation interval relative to the left and right sides of the display screen.

[0121] Scenario two, the values of the upper margin and the lower margin in the first information value are not zero, and the values of the left margin and the right margin are zero, that is, the electronic device has the safety margin of the upper margin and the lower margin. That is, the electronic device obtains insets.getSystemWindowInsetTop() and insets.getSystemWindowInsetBottom() which are not zero, and insets.getSystemWindowInsetLeft() and insets.getSystemWindowInsetRight() which are zero, assuming that safeInsetTop = insets.getSystemWindowInsetTop(),

[0122] safeInsetBottom = insets.getSystemWindowInsetBottom(), the page content indentation display information can be view.setPadding(0, safeInsetTop, 0, safeInsetBottom), wherein the four parameters in view.setPadding represent the left indentation value of the page content, the upper indentation value, the right indentation value and the lower indentation value respectively. Exemplarily, see the schematic diagram of the page content after indentation Figure 10 It can be seen that the screen content has a certain indentation interval relative to the upper and lower sides of the display screen.

[0123] In the third scenario, 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 in the value of the first information are all not zero, that is, the electronic device simultaneously exists the safety margin of the top margin, the bottom margin, the left margin and the right margin. That is to say, the insets.getSystemWindowInsetTop(), the insets.getSystemWindowInsetBottom(), the insets.getSystemWindowInsetLeft() and the insets.getSystemWindowInsetRight() obtained by the electronic device are all not zero, assuming that the safeInsetTop=insets.getSystemWindowInsetTop(),

[0124] the safeInsetBottom=insets.getSystemWindowInsetBottom(),

[0125] the safeInsetLeft=insets.getSystemWindowInsetLeft(),

[0126] the safeInsetRight=insets.getSystemWindowInsetRight(), the page content indentation display information can be view.setPadding(safeInsetLeft, safeInsetTop, safeInsetRight, safeInsetBottom), wherein the four parameters in the view.setPadding represent the left indentation value, the top indentation value, the right indentation value and the bottom indentation value of the page content respectively. Exemplarily, the schematic diagram of the page content after indentation is shown in FIG. 3. Figure 11 It can be seen that the screen content has a certain indentation interval relative to the upper, lower, left and right sides of the display screen.

[0127] In some other embodiments, for the case that the value of the first information is zero and the value of the second information is not zero in the above S103, since the value of the second information can include the value of the interval in the x-axis direction and the value of the interval in the y-axis direction of other invisible areas, considering that in some scenarios the electronic device exists the interval in the x-axis direction, in some scenarios the electronic device exists the interval in the y-axis direction, and in some scenarios the electronic device simultaneously exists the interval in the x-axis direction and the interval in the y-axis direction, then, continuing to refer to Figure 8 The embodiments of the present application can determine different page content indentation display information for different scenarios.

[0128] Scenario four, the value of the interval in the x-axis direction in the second information is not zero, and the value of the interval in the y-axis direction is zero, i.e., the electronic device has a left interval. That is, the value of getLocationOnScreen_x obtained by the electronic device is not zero, and the value of getLocationOnScreen_y is zero. Assuming that X = getLocationOnScreen_x, the padding display information of the page content can be view.setPadding(X, 0, 0, 0), wherein the four parameters in view.setPadding represent the padding value of the left side of the page content, the padding value of the upper side, the padding value of the right side, and the padding value of the lower side, respectively. Exemplarily, see the schematic diagram of the page content after padding in Figure 12 It can be seen that the screen content has a certain padding interval relative to the x-axis direction.

[0129] Scenario five, the value of the interval in the x-axis direction in the second information is zero, and the value of the interval in the y-axis direction is not zero, i.e., the electronic device has an upper interval. That is, the value of getLocationOnScreen_x obtained by the electronic device is zero, and the value of getLocationOnScreen_y is not zero. Assuming that Y = getLocationOnScreen_y, the padding display information of the page content can be view.setPadding(0, Y, 0, 0), wherein the four parameters in view.setPadding represent the padding value of the left side of the page content, the padding value of the upper side, the padding value of the right side, and the padding value of the lower side, respectively. Exemplarily, see the schematic diagram of the page content after padding in Figure 13 It can be seen that the screen content has a certain padding interval relative to the y-axis direction.

[0130] Scenario six, the value of the interval in the x-axis direction in the second information is not zero, and the value of the interval in the y-axis direction is not zero, i.e., the electronic device has a left interval and an upper interval. That is, the value of getLocationOnScreen_x obtained by the electronic device is not zero, and the value of getLocationOnScreen_y is not zero. Assuming that X = getLocationOnScreen_x and Y = getLocationOnScreen_y, the padding display information of the page content can be view.setPadding(X, Y, 0, 0), wherein the four parameters in view.setPadding represent the padding value of the left side of the page content, the padding value of the upper side, the padding value of the right side, and the padding value of the lower side, respectively. Exemplarily, see the schematic diagram of the page content after padding in Figure 14 It can be seen that the screen content has a certain padding interval relative to the x-axis and y-axis directions.

[0131] In some embodiments, for the case that the value of the first information and the value of the second information are both not zero in S104, the value of the first information can include the value of the left margin, the value of the upper margin, the value of the right margin and the value of the lower margin in the safe margin, the value of the second information can include the value of the interval of the other invisible area in the x-axis direction and the value of the interval of the other invisible area in the y-axis direction, considering that in some scenarios the electronic device exists the safe margin of the left margin and the right margin, and the interval of the other invisible area in the x-axis direction and the interval of the other invisible area in the y-axis direction, in some scenarios the electronic device exists the safe margin of the upper margin and the lower margin, and the interval of the other invisible area in the x-axis direction and the interval of the other invisible area in the y-axis direction, in some scenarios the electronic device exists the safe margin of the left margin, the right margin, the upper margin and the lower margin, and the interval of the other invisible area in the x-axis direction and the interval of the other invisible area in the y-axis direction, then, continuing to refer to Figure 8 The embodiments of the present application can determine different page content indentation display information for different scenarios.

[0132] Scenario seven, the value of the left margin and the value of the right margin in the value of the first information are not zero, and the value of the upper margin and the value of the lower margin are zero, that is, the electronic device exists the safe margin of the left margin and the right margin, assuming

[0133] safeInsetLeft = insets.getSystemWindowInsetLeft(),

[0134] safeInsetRight = insets.getSystemWindowInsetRight(). Under this condition, at least one of the value of the interval of the other invisible area in the x-axis direction and the value of the interval of the other invisible area in the y-axis direction in the value of the second information is not zero, that is, the electronic device also exists at least one of the left interval and the upper interval, that is, at least one of getLocationOnScreen_x and getLocationOnScreen_y obtained by the electronic device is not zero, assuming X = getLocationOnScreen_x and Y = getLocationOnScreen_y, then the following three sub-scenarios can exist in this scenario:

[0135] Sub-scenario one: the value of the interval of the other invisible area in the x-axis direction in the value of the second information is not zero, and the value of the interval of the other invisible area in the y-axis direction is zero, that is, X is not zero and Y is zero, and the page content indentation display information can be view.setPadding(X + safeInsetLeft, 0, safeInsetRight, 0), wherein the four parameters in view.setPadding represent the indentation value of the left side of the page content, the indentation value of the upper side, the indentation value of the right side and the indentation value of the lower side.

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

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

[0138] Scenario eight: the value of the left margin and the value of the right margin in the value of the first information are zero, and the value of the top margin and the value of the bottom margin are not zero, i.e., the electronic device has the safety margin of the top margin and the bottom margin, assuming

[0139] safeInsetTop = insets.getSystemWindowInsetTop(),

[0140] safeInsetBottom = insets.getSystemWindowInsetBottom(). Under this condition, at least one of the value of the interval in the x-axis direction and the value of the interval in the y-axis direction of the value of the second information is not zero, i.e., the electronic device also has at least one of the left interval and the top interval, i.e., at least one of getLocationOnScreen_x and getLocationOnScreen_y obtained by the electronic device is not zero, assuming X = getLocationOnScreen_x and Y = getLocationOnScreen_y, then the following three sub-scenarios can exist under this scenario:

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

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

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

[0144] Scenario nine, the value of the left margin, the value of the right margin, the value of the top margin and the value of the bottom margin in the value of the first information are all not zero, that is, the electronic device simultaneously exists the safe margin of the left margin, the right margin, the top margin and the bottom margin, assuming

[0145] safeInsetTop = insets.getSystemWindowInsetTop(),

[0146] safeInsetBottom = insets.getSystemWindowInsetBottom(),

[0147] safeInsetLeft = insets.getSystemWindowInsetLeft(),

[0148] safeInsetRight = insets.getSystemWindowInsetRight(). In the condition that at least one of the value of the interval in the x-axis direction and the value of the interval in the y-axis direction in the value of the second information is not zero, that is, at least one of the left interval and the upper interval still exists for the electronic device, that is, at least one of getLocationOnScreen_x and getLocationOnScreen_y obtained by the electronic device is not zero, assuming that X = getLocationOnScreen_x and Y = getLocationOnScreen_y, the following three sub-scenarios may exist in this scenario:

[0149] Sub-scenario seven: the value of the interval in the x-axis direction in the value of the second information is not zero, and the value of the interval in the y-axis direction is zero, that is, X is not zero and Y is zero, and the padding display information of the page content can be view.setPadding(X + safeInsetLeft, safeInsetTop, safeInsetRight, safeInsetBottom), wherein the four parameters in view.setPadding respectively represent the left padding value, the upper padding value, the right padding value and the lower padding value of the page content.

[0150] Sub-scenario eight: the value of the interval in the x-axis direction in the value of the second information is zero, and the value of the interval in the y-axis direction is not zero, that is, X is zero and Y is not zero, and the padding display information of the page content can be view.setPadding(safeInsetLeft, Y + safeInsetTop, safeInsetRight, safeInsetBottom), wherein the four parameters in view.setPadding respectively represent the left padding value, the upper padding value, the right padding value and the lower padding value of the page content.

[0151] Sub-scenario nine: the value of the interval in the x-axis direction in the value of the second information is not zero, and the value of the interval in the y-axis direction is also not zero, that is, X is not zero and Y is also not zero, and the padding display information of the page content can be view.setPadding(X + safeInsetLeft, Y + safeInsetTop, safeInsetRight, safeInsetBottom), wherein the four parameters in view.setPadding respectively represent the left padding value, the upper padding value, the right padding value and the lower padding value of the page content. Exemplarily, see the schematic diagram of the page content after padding in Figure 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 of the left side and the upper side is larger than that of the right side and the lower side.

[0152] Therefore, based on the implementation process of the above embodiment, the electronic device can adjust the indentation display information of the page content in different adjustment modes for different invisible areas set to adapt to the current display screen better and improve the page display effect.

[0153] On the basis of the above embodiment, if applied in the software architecture shown in Figure 4 as shown in Figure 16 the display layout method of the page of the embodiment of the application can include:

[0154] S201, the application program starts page initialization drawing.

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

[0156] Wherein, when starting the process of page initialization drawing, the application program needs to adjust the display layout information to adapt to the display screen, and then the view system of the application program framework layer can be used to call the system interface to obtain the first information and the second information. 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, in the case that the value of the first information is not zero and the value of the second information is zero, the application program determines the indentation display information of the page content based on the value of the first information.

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

[0159] S205, in the case that the value of the first information and the value of the second information are not zero, the application program 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] The implementation manners of S203-S205 can refer to the descriptions of the above-mentioned embodiments, and will not be described here again.

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

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

[0163] The above-mentioned page display layout method actively acquires the information of the invisible area set on the electronic device during the process of displaying the page by the application, adjusts the display layout information of the page based on the information of the invisible area, so that the display layout mode of the page better adapts to the display screen, and improves the page display effect.

[0164] The above describes the examples of the page display layout method provided by the embodiments of the present application in detail. It can be understood that the electronic device contains the hardware and / or software modules corresponding to the execution of each function in order to implement the above-mentioned functions. Those skilled in the art should easily realize that the units and algorithm steps of each example described in combination with the embodiments disclosed in the present application can be implemented in the form of hardware or a combination of hardware and computer software. Whether a certain function is implemented in hardware or computer software driven 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 combination with the embodiments, but such implementation should not be considered beyond the scope of the present application.

[0165] The embodiments of the present application can divide the functional modules of the electronic device according to the above-mentioned method examples. For example, each functional module can be divided according to each function, such as a detection unit, a processing unit, a display unit, etc. Two or more functions can also be integrated in one module. The above-mentioned integrated module can be realized in the form of hardware or software functional module. It should be noted that the division of the modules in the embodiments of the present application is illustrative, and is only a logical function division. Actual implementation can have another division manner.

[0166] It should be noted that all related contents of each step involved in the above-mentioned method embodiments can be cited to the function description of the corresponding functional module, and will not be described here again.

[0167] The electronic device provided by the embodiments of the present application 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 employing the integrated unit, the electronic device can further include a processing module, a storage module and a communication module. The processing module can be used to control and manage the actions of the electronic device. The storage module can be used to support the electronic device to execute the storage of program codes and data, etc. The communication module can be used to support the communication between the electronic device and other devices.

[0169] The processing module can be a processor or a controller. It can realize or execute various exemplary logical blocks, modules and circuits described in combination with the disclosure. The processor can also be a combination of computing functions, such as a combination of one or more microprocessors, a combination of digital signal processors and microprocessors, etc. The storage module can be a memory. The communication module can be a device for interacting 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 the embodiment can be a device with the structure as shown in the figure. Figure 3

[0171] The embodiment of the present application also provides a computer readable storage medium, and the computer readable storage medium stores a computer program. When the computer program is executed by a processor, the processor executes the page display layout method of any one of the above embodiments. The storage medium can include a U disk, a mobile hard disk, a read only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and various storage program codes.

[0172] The embodiment of the present application also provides a computer program product, which, when running on a computer, causes the computer to execute the above related steps to realize the page display layout method in the above embodiment.

[0173] In addition, the embodiment of the present application also provides a device, which can be a chip, a component or a module. The device can include a processor and a memory connected to each other. The memory is used to store computer execution instructions. When the device is running, the processor can execute the computer execution instructions stored in the memory to make the chip execute the page display layout method in the above method embodiments.

[0174] The electronic device, the computer readable storage medium, the computer program product or the chip provided in the embodiment can be used to execute the corresponding method provided above, and the beneficial effects achieved thereby can refer to the beneficial effects of the corresponding method provided above, which will not be described here.

[0175] ​Through the description of the above embodiments, those skilled in the art can understand that, for the convenience and brevity of description, only the division of the above functional modules is exemplified, and in actual application, the above functions can be completed by different functional modules according to needs, that is, the internal structure of the device is 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 can be integrated in one processing unit, or each unit can exist physically alone, or two or more units can be integrated in one unit. The integrated unit can be realized in the form of hardware or in the form of a software functional unit.

[0177] The above is only a specific embodiment of the present application, but the protection scope of the present application is not limited thereto, and any person skilled in the art can easily think of changes or replacements within the technical scope disclosed in the present application, which should be covered within the protection scope of the present application. Therefore, the protection scope of the present application should be subject to 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 includes: During the process of displaying the page in the application, first information and second information are obtained. The first information is the information of the safety margin set by the electronic device for the display screen, and the second information is the information of other invisible areas set by the electronic device other than the safety margin. When the value of the first information is not zero and the value of the second information is zero, the indentation display information of the page content is determined 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, the indentation display information of the page content is determined based on the value of the second information; When neither the value of the first information nor the value of the second information is zero, the indentation display information of the page content is determined based on the values ​​of the first information and the second information. The page is laid out according to the indentation information of the page content.

2. The method according to claim 1, characterized in that, The first information includes the values ​​of the left margin, top margin, right margin, and bottom margin in the safety margin. The second information includes the values ​​of the spacing of the other invisible areas in the x-axis direction and 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 on the left side of the page content, and the value of the right margin is determined as the indentation value on the right side of the page content. 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 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. If the values ​​of the top margin, bottom margin, left margin, and right margin are all non-zero, then the left margin is determined as the indentation value on the left side of the page content, the right margin is determined as the indentation value on the right side of the page content, the top margin is determined as the indentation value on the top side of the page content, and the bottom margin is determined as the indentation value on the bottom side of the page content.

4. The method according to claim 2, characterized in that, The step of determining the page content indentation information based on the value of the second information when the value of the first information is zero and the value of the second information is not zero includes: If 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 on the left side of the page content; When the spacing in the x-axis direction is zero and the spacing in the y-axis direction is not zero, the spacing in the y-axis direction is determined as the indentation value at the top of the page content. If neither the spacing value in the x-axis direction nor the spacing value in the y-axis direction is zero, the spacing value in the x-axis direction is determined as the indentation value on the left side of the page content, and the spacing value in the y-axis direction is determined as the indentation value on the top side of the page content.

5. The method according to claim 2, characterized in that, The step of determining the indentation display information of the page content based on the values ​​of the first information and the second information when neither the value of the first information nor the value of the second information is zero includes: If 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, the indentation display information of the page content is determined 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. If the values ​​of the top margin and the bottom 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, the indentation display information of the page content is determined based on the values ​​of the top margin and the bottom margin, the values ​​of the spacing in the x-axis direction and the values ​​of the spacing in the y-axis direction. If the values ​​of the top margin, bottom margin, left margin, and right margin are all non-zero, and at least one of the spacing values ​​in the x-axis direction and 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, bottom margin, left margin, right margin, spacing in the x-axis direction, and spacing in the y-axis direction.

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

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

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

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

10. An electronic device, characterized in that, The electronic device includes: One or more processors, and memory; The memory is coupled to the one or more processors, the memory being used to store computer program code, the computer program code including computer instructions, the one or more processors invoking the computer instructions to cause the electronic device to perform the method as described in any one of claims 1 to 9.

11. A chip system, characterized in that, The chip system is applied to an electronic device, the chip system including one or more processors, the one or more processors being used to invoke computer instructions to cause the electronic device to perform 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 includes instructions that, when executed on an electronic device, cause the electronic device to perform the method as described in any one of claims 1 to 9.

13. A computer program product, characterized in that, The computer program product includes a computer program that, when run on an electronic device, causes the electronic device to perform the method as described in any one of claims 1 to 9.

Images