Layout method of application interface and electronic device

Abstract

A layout method for an application interface and an electronic device, relating to the field of electronic technology, can reduce the workload of application developers in developing and maintaining layout files for application interfaces. The method specifically includes: developers setting a layout container with adaptive layout capabilities in the application's layout file, wherein the adaptive layout capabilities include at least one of the following: extension capability, proportion capability, even distribution capability, line wrapping capability, hiding capability, stretching capability, or scaling capability. Thus, when the electronic device runs the application, it adjusts the size and position of the child controls within the layout container on the display interface according to its own screen parameters and the adaptive layout capabilities of the layout container in the layout file.

Description

[0001] This application claims priority to Chinese Patent Application No. 202011058008.5, filed with the State Intellectual Property Office of China on September 29, 2020, entitled "A Layout Method for an Application Interface and an Electronic Device"; claims priority to Chinese Patent Application No. 202011110788.3, ​​filed with the State Intellectual Property Office of China on October 16, 2020, entitled "A Layout Method for an Application Interface and an Electronic Device"; claims priority to Chinese Patent Application No. 202011142738.3, filed with the State Intellectual Property Office of China on October 22, 2020, entitled "A Layout Method for an Application Interface and a Terminal"; claims priority to Chinese Patent Application No. 202011142649.9, filed with the State Intellectual Property Office of China on October 22, 2020, entitled "A Layout Method for an Application Interface and a Terminal"; and claims priority to Chinese Patent Application No. 202011142649.9, filed with the State Intellectual Property Office of China on October 22, 20 ... Priority is claimed in the following Chinese patent applications filed with the State Intellectual Property Office on October 22, 2020: application number 202011141053.7, entitled "A Layout Method and Terminal for an Application Interface"; application number 202011183319.4, filed with the State Intellectual Property Office on October 29, 2020: application number 202011183328.3, filed with the State Intellectual Property Office on October 29, 2020: application number 202011189853.6, filed with the State Intellectual Property Office on October 30, 2020: application number 202011189853.6, entitled "A Layout Method and Terminal for an Application Interface". The entire contents of these patents are incorporated herein by reference. Technical Field

[0002] This application relates to the field of electronic technology, and more particularly to a layout method for an application interface and an electronic device. Background Technology

[0003] Electronic devices provide users with diverse application functions through applications. Generally, when developing an application, developers design the layout of each view or viewgroup in the application's display interface, creating a layout file, which is then packaged in the application's installation package. When the electronic device installs and runs the application, it calls the corresponding layout file, thereby displaying the corresponding interface on the screen. Currently, there are increasingly more types of electronic devices, with various screen sizes. If developers were required to design and develop different layout files for each screen size, the development and maintenance workload would be enormous. Summary of the Invention

[0004] This application provides a layout method and electronic device for an application interface, which can reduce the workload of application developers in developing and maintaining layout files for the application interface.

[0005] To achieve the above objectives, the embodiments of this application provide the following technical solutions:

[0006] A first aspect provides a layout method for an application interface. An electronic device installs an application installation package for a first application. The application installation package includes a first layout file, which indicates N sub-controls and enabled preset capabilities, where N is a positive integer. The preset capabilities include one or more of the following: extension capability, proportion capability, even distribution capability, stretch capability, and hide capability. The method includes: the electronic device receiving a first operation from a user on the first interface; in response to the received first operation, the electronic device determining attribute values ​​for the N sub-controls based on its device parameters and preset capabilities, wherein the device parameters include at least one of the following: screen type value, screen size value, or running status value; the attribute values ​​of the N sub-controls indicating their size and position on a second interface; and the electronic device displaying the N sub-controls on the second interface based on their attribute values.

[0007] The screen type includes any one of the following: full-screen, curved screen, notch screen, punch-hole screen, foldable screen, etc. It's easy to understand that the screen type affects the overall display size and position of the first application on the screen, further affecting the display of sub-controls within the first layout container. The operating state includes one or more of the following: the electronic device's landscape / portrait mode, split-screen mode, and folded mode. It's easy to understand that different operating states of the electronic device result in different display sizes and positions of the first application on the screen, thus constraining the display of sub-controls within the first layout container.

[0008] As can be seen, the attribute values ​​of the N child controls in the first layout file are not fixed, but are related to the device parameters of the electronic device. These device parameters include at least one of the device's screen type, screen size, or operating status. In other words, when the electronic device parameters differ, the electronic device adaptively changes the size and / or position of the N child controls based on these parameters and preset capabilities. Therefore, this solution enables electronic devices with different device parameters to display different effects based on the same layout file, reducing the development and maintenance workload for developers while meeting the display needs of various types of electronic devices.

[0009] Furthermore, compared to solutions that require multiple layout files to be included in the application installation package, this solution includes only one layout file within the application installation package, which helps reduce the data usage and time costs of downloading the application installation package on electronic devices. Moreover, once the application is installed on the electronic device, no other redundant layout files need to be saved, improving the utilization of the electronic device's storage space.

[0010] It should also be noted that the aforementioned preset capabilities (i.e., adaptive layout capabilities) can be used independently or in combination. For example, different adaptive layout capability properties can be set for different objects (Views or ViewGroups) within the same application interface. Alternatively, two or more adaptive layout capability properties can be set for the same object. Understandably, in actual application development, aside from conflicts arising during combination, the aforementioned adaptive layout capabilities can be arbitrarily combined according to actual needs. For example, the stretch capability can be combined with any one of the hide capability, proportion capability, even distribution capability, and line wrapping capability. The zoom capability can be combined with any one of the hide capability, proportion capability, even distribution capability, and line wrapping capability, and so on.

[0011] In one possible implementation, the first layout file includes preset parameters corresponding to preset capabilities. The electronic device determines the attribute values ​​of N sub-controls based on the device parameters and preset capabilities of the electronic device, including: the electronic device determines the attribute values ​​of N sub-controls based on the device parameters, preset capabilities, and preset parameters of the electronic device.

[0012] In one possible implementation, the operating state of the electronic device includes one or more of the following: landscape / portrait mode, split-screen mode, and folded mode.

[0013] In one possible implementation, the first operation is any one of the following: launching a first application, jumping to a second interface, or switching the operating state of an electronic device.

[0014] For example, if the second interface is the homepage of the first application, then the first operation is to launch the first application. If the second interface is not the homepage of the first application, then the first operation is to indicate a jump from the first interface to the second interface. In another scenario, when the electronic device displays a certain interface of the first application, if it detects that the user has switched the operating state of the electronic device, such as switching from portrait to landscape, from expanded to collapsed, or from a non-split-screen state to a split-screen state, then the electronic device re-acquires the device parameters, recalculates the attribute values ​​of N sub-controls based on the updated device parameters and preset capabilities, and refreshes the current interface. In other words, the same functional interface of the first application has different layouts in different operating states of the electronic device, that is, the layout of the N sub-controls in the second interface and the first interface are different.

[0015] In one possible implementation, the preset capability is an extension capability; the first layout file indicates that N sub-controls are arranged in a first direction of the first layout container; the first direction is a horizontal or vertical direction; the electronic device determines the attribute values ​​of the N sub-controls according to the device parameters and the preset capability, including: the electronic device determines the size of the first layout container in the first direction according to the device parameters; based on the size of the first layout container in the first direction and the size of the N sub-controls in the first direction, it determines the N1 sub-controls and the (N1+1)th sub-control among the N sub-controls, where N1 is less than N; the electronic device displays the N sub-controls in the second interface according to the attribute values ​​of the N sub-controls, including: the electronic device fully displays the N1 sub-controls and partially displays the (N1+1)th sub-control in the second interface according to the attribute values ​​of the N sub-controls.

[0016] In other words, when the width of the layout container changes, the number of displayed child controls can be automatically determined based on the size of the layout container, thereby meeting the display needs of electronic devices with different screen sizes. Furthermore, this application can not only adaptively reduce the number of displayed child controls according to changes in the layout container, but also display a child control that only shows a portion of its content. The size of this portion of content can be kept at a fixed value (i.e., a size threshold). This child control that only shows a portion of its content can be used to indicate to the user that there are still undisplayed child controls within the layout container. Additionally, keeping the size threshold fixed avoids inconsistent sizes of child controls displaying only a portion of their content due to different screen sizes, preventing a confusing and disorganized experience for the user.

[0017] In one possible implementation, the preset parameters for the extension capability include a first size and a first spacing; the electronic device determines the attribute values ​​of N sub-controls based on the device parameters and preset capabilities of the electronic device, including: determining that N1 sub-controls are displayed in the first layout container based on the size of the first layout container in the first direction, the size of the N sub-controls in the first direction, the first size, and the first spacing, and determining the partial content of the N1+1th sub-control; the electronic device displays N sub-controls on the second interface based on the attribute values ​​of the N sub-controls, including: the electronic device displays N1 sub-controls and the partial content of the N1+1th sub-control on the second interface, and the spacing between two adjacent sub-controls is greater than or equal to the first spacing.

[0018] Here, the first spacing is a spacing threshold. The first size is the size displayed by the (N1+1)th child control. Therefore, developers can set the spacing between the first child controls within the first layout container to prevent them from becoming too crowded or overlapping.

[0019] In one possible implementation, the preset parameters for the extension capability further include a second spacing, which is greater than the first spacing. Before determining that N1 child controls are displayed in the first layout container based on the size of the first layout container in the first direction, the size of the N child controls in the first direction, the first size, and the first spacing, and before determining the partial content displayed by the (N1+1)th child control, the method further includes: determining that the first layout container cannot display all N child controls based on the size of the first layout container in the first direction, the size of the N child controls in the first direction, and the second spacing; reducing the spacing between two adjacent child controls while maintaining the spacing between two adjacent child controls at no less than the first spacing; and determining that the first layout container cannot display all N child controls during the process of reducing the spacing between two adjacent child controls.

[0020] Therefore, developers can set the default spacing between the first child controls. When the size of the first layout container is insufficient to display all the first child controls, they can try to display all the first child controls by reducing the spacing between them. If reducing the spacing between the first child controls still cannot display all the first child controls, then the partially displayed child controls can be displayed.

[0021] In one possible implementation, based on the size of the first layout container in the first direction, the sizes of the N child controls in the first direction, a first size, and a first spacing, it is determined that N1 child controls will be displayed in the first layout container, and the partial content of the (N1+1)th child control will be displayed. This includes: based on the size of the first layout container in the first direction, the sizes of the N child controls in the first direction, a second spacing, and a first size, it is determined that N2 child controls will be displayed in the first layout container, and the spacing between two adjacent child controls in the N2 child controls is a third spacing; wherein, N2 is greater than or equal to N1 and less than N; if the third spacing is less than the first spacing, the value of N2 is reduced by one; the third spacing is adjusted based on the size of the first layout container in the first direction, the sizes of the N2 child controls in the first direction, and the first size; when the adjusted third spacing is not less than the first spacing, it is determined that N1 child controls will be displayed in the first layout container, the partial content of the (N1+1)th child control will be determined, and the spacing between two adjacent child controls will be determined as a fourth spacing, wherein N1 = N2, and the difference between the fourth spacing and the adjusted third spacing is within 1 pixel.

[0022] In other words, when the first layout container cannot display all the first child controls, the number N2 of first child controls that can be fully displayed can be determined firstly based on the default spacing, the size of the first layout container, and the size of the first child controls. Then, the third spacing between two adjacent first child controls is adjusted. If the third spacing does not meet the spacing threshold, the value of N2 is decremented by one, and the third spacing is readjusted. This process is repeated until the third spacing meets the spacing threshold. At this point, the adjusted N2 is determined as the number of first child controls that the first layout container can fully display, and the spacing between the first child controls is also determined.

[0023] Furthermore, since electronic device displays are measured in pixels, it's generally impossible to perfectly divide the remaining space (the size of the first layout container minus the inner margins, the sum of the sizes of the first child controls, etc.) equally. This means the third spacing may not be an integer. Therefore, the spacing between child controls can be fine-tuned to ensure that the spacing between each child control fills the remaining space. The difference between the fine-tuned spacing and the third spacing should be within one pixel. For specific fine-tuning methods, please refer to the relevant content in the instruction manual.

[0024] In one possible implementation, the method further includes: receiving a second operation from the user on the second interface; and in response to the second operation, displaying a third interface, wherein the third interface displays the N1+2th sub-control.

[0025] Since the second interface does not display all the first child controls in the first layout container, the second operation can be used to view the first child controls that are not displayed in the second interface, such as the N1+2th first child control.

[0026] In one possible implementation, the preset capability is a proportion capability. The first layout file indicates that N child controls are arranged in a first direction of the first layout container, where the first direction is either horizontal or vertical. The preset parameters corresponding to the proportion capability include the proportion value of the first child control among the N child controls. The electronic device determines the attribute values ​​of the N child controls based on its device parameters and the preset capability, including: the electronic device determining the size of the first layout container in the first direction based on its device parameters; and determining the size of the first child control in the first direction based on the size of the first layout container in the first direction and the proportion value of the first child control. The electronic device displays the N child controls on a second interface based on their attribute values, including: the electronic device displaying the first child control on the second interface. The first direction can be the layout direction of the first layout container or a user-specified direction.

[0027] In other words, when an electronic device runs the application, it acquires device parameters and determines the application's display size and position based on these parameters, further determining the size of the first layout container, etc. Then, based on the set percentage values ​​of the child controls and the size of the first layout container, the size of the child controls is calculated to meet the display requirements of electronic devices with different screen parameters. Therefore, this solution's hiding capability enables electronic devices with different screen specifications to present different display effects based on the same layout settings, reducing the development and maintenance workload for developers while meeting the display needs of various types of electronic devices.

[0028] In one possible implementation, the preset parameters corresponding to the proportion capability also include the proportion value of the second sub-control among the N sub-controls; the electronic device determines the attribute values ​​of the N sub-controls according to the device parameters and preset capabilities of the electronic device, and further includes: determining the size of the second sub-control in the first direction according to the size of the first layout container in the first direction and the proportion value of the second sub-control, wherein the proportion value of the second sub-control is the same as or different from the proportion value of the first sub-control; the electronic device displays the N sub-controls in the second interface according to the attribute values ​​of the N sub-controls, and further includes: the electronic device also displays the second sub-control in the second interface according to the attribute values ​​of the N sub-controls.

[0029] In other words, different child controls within the first layout container can have different proportions to meet different display requirements.

[0030] In one possible implementation, the preset parameters corresponding to the proportion capability also include that the third sub-control among the N sub-controls has no proportion value set, or that the preset parameters corresponding to the proportion capability do not include the proportion value of the third sub-control. The electronic device determines the attribute values ​​of the N sub-controls according to the device parameters and preset capabilities of the electronic device, and further includes: determining the remaining space of the first layout container in the first direction; the remaining space of the first layout container in the first direction is determined according to the size of the first layout container in the first direction, the inner margin of the first layout container in the first direction, and the size of the sub-controls containing the first layout container with proportion values ​​set; determining the size of the third sub-control in the first direction according to the remaining space of the first layout container in the first direction; the electronic device displays the N sub-controls in the second interface according to the attribute values ​​of the N sub-controls, and further includes: the electronic device also displays the third sub-control in the second interface according to the attribute values ​​of the N sub-controls.

[0031] As can be seen, the first layout container can contain child controls with set percentage values, as well as child controls without set percentage values. We can first determine the size of the child controls with set percentage values, and then determine the size of the child controls without set percentage values ​​based on the remaining space in the first layout container.

[0032] In one possible implementation, the first sub-control is a layout container control, which includes a fourth sub-control with a set percentage value, and the layout direction of the first sub-control is a second direction, which is perpendicular to the first direction. The electronic device determines the attribute values ​​of N sub-controls based on its device parameters and preset capabilities, and further includes: the electronic device determining the size of the first sub-control in the second direction based on its device parameters; determining the size of the fourth sub-control in the second direction based on the size of the first sub-control in the second direction and the percentage value of the fourth sub-control; the electronic device displaying N sub-controls on the second interface based on the attribute values ​​of the N sub-controls includes: the electronic device displaying the fourth sub-control within the first sub-control.

[0033] In other words, the interface of another layout container with the ability to share proportions is nested within a layout container with the ability to share proportions.

[0034] In practical implementation, the proportion capability can be set for the layout container containing text controls, button controls, image controls, etc. When the width or height of the layout container changes, the width or height of the text controls, button controls, or image controls can be automatically adjusted accordingly, thus meeting the display requirements of electronic devices with different screen sizes. It is evident that the proportion capability of this solution enables electronic devices with different screen parameters to present different display effects based on the same layout settings, reducing the development and maintenance workload for developers while meeting the display needs of various types of electronic devices.

[0035] In one possible implementation, the preset capability is an evenly distributed capability. The first layout file indicates that N sub-controls are arranged in a first direction of the first layout container, and the size of each of the N sub-controls in the first direction and the inner margin of the first layout container in the first direction are specified. The electronic device determines the attribute values ​​of the N sub-controls according to the device parameters and the preset capability, including: the electronic device determines the size of the first layout container in the first direction according to the device parameters; and determines a first spacing based on the size of the first layout container in the first direction, the size of each of the N sub-controls in the first direction, and the inner margin of the first layout container in the first direction, wherein the first spacing is the spacing between two adjacent sub-controls and the spacing between two adjacent sub-controls is equal. The electronic device displays the N sub-controls on the second interface according to the attribute values ​​of the N sub-controls, including: the electronic device displays the N sub-controls on the second interface according to the attribute values ​​of the N sub-controls, and the spacing between two adjacent sub-controls is the first spacing.

[0036] In other words, when an electronic device runs the application, it acquires device parameters and determines the application's display size and position based on these parameters, further determining the size of the first layout container, etc. Then, based on the width / height of the first layout container, its inner margins, and the width / height of each sub-control within it, it adaptively determines the spacing between adjacent sub-controls. Therefore, this solution's even distribution capability enables electronic devices with different screen sizes to present different display effects based on the same layout settings, reducing the development and maintenance workload for developers while meeting the display needs of various types of electronic devices.

[0037] In one possible implementation, the budget parameters for the even distribution capability include the spacing type corresponding to the first layout container; the spacing type is either a first type or a second type; after determining the first spacing, the method further includes: determining the position of the first child control among N child controls based on the first direction and the spacing type corresponding to the first layout container; when the first direction is horizontal and the first layout container corresponds to the first type, the distance between the left edge of the first child control and the left edge of the first layout container is zero or the distance from the left inner margin of the first layout container; when the first direction is horizontal and the first layout container corresponds to the second type, the distance between the left edge of the first child control and the left edge of the first layout container is determined based on the distance from the left inner margin of the first layout container and the first spacing; when the first direction is vertical and the first layout container corresponds to the first type, the distance between the top edge of the first child control and the top edge of the first layout container is zero or the distance from the top inner margin of the first layout container; when the first direction is vertical and the first layout container corresponds to the second type, the distance between the top edge of the first child control and the top edge of the first layout container is determined based on the distance from the top inner margin of the first layout container and the first spacing.

[0038] Therefore, two different types of equal distribution methods are defined. The first type of equal distribution method does not require allocating spacing for the side of the first child control closest to the layout container in the layout direction, nor for the side of the last child control closest to the layout container in the layout direction. The second type of equal distribution capability requires allocating spacing for the side of the first child control closest to the layout container in the layout direction, as well as the side of the last child control closest to the layout container in the layout direction. This satisfies different user needs for adjusting spacing.

[0039] In one possible implementation, the budget parameter for the equalization capability further includes a first threshold. Determining the first spacing includes: determining the size of the first space based on the size of the first layout container in the first direction, the size of each of the N child controls in the first direction, and the inner margin of the first layout container in the first direction; when the first layout container corresponds to a first type, dividing the size of the first space into N-1 equal parts, with the size of each part being the second spacing; when the first layout container corresponds to a second type, dividing the size of the first space into N+1 equal parts, with the size of each part being the second spacing; when the second spacing is greater than the first threshold, determining the first threshold as the first spacing; when the second spacing is not greater than the first threshold, determining the second spacing as the first spacing.

[0040] Therefore, a first threshold can be set to constrain the range of the adjusted spacing between child controls, so that the adjusted spacing is not greater than the first threshold.

[0041] In one possible implementation, after determining the position of the first child control among the N child controls based on the first direction and the spacing type corresponding to the first layout container, the method further includes: after determining the first threshold as the first spacing, adjusting the position of the first child control in the first layout container according to the alignment method of the N child controls in the first layout container; wherein the alignment method is any one of horizontal centering, left alignment, right alignment, vertical centering, top alignment, and bottom alignment.

[0042] In one possible implementation, the budget parameter for the equalization capability further includes a second threshold. The method further includes: determining a first spacing, including: determining the size of a first space based on the size of the first layout container in a first direction, the size of each of the N child controls in the first direction, and the inner margin of the first layout container in the first direction; when the first layout container corresponds to a first type, dividing the size of the first space into N-1 equal parts, with the size of each part being a third spacing; when the first layout container corresponds to a second type, dividing the size of the first space into N+1 equal parts, with the size of each part being a third spacing; when the third spacing is less than the second threshold, determining the second threshold as the first spacing; when the third spacing is not less than the second threshold, determining the third spacing as the first spacing.

[0043] Therefore, a second threshold can also be set to constrain the range of the adjusted spacing between sub-controls, so that the adjusted spacing is not less than the second threshold.

[0044] In one possible implementation, the preset capability is a hidden capability. The first layout file indicates that N sub-controls are arranged in a first direction of the first layout container, the size of each of the N sub-controls in the first direction, and the inner margin of the first layout container in the first direction. The electronic device determines the attribute values ​​of the N sub-controls according to the device parameters and the preset capability, including: the electronic device determines the size of the first layout container in the first direction according to the device parameters; when the first size is greater than the second size, M sub-controls are determined from the N sub-controls, where M is an integer less than N, the first size is determined based on the size of the N sub-controls in the first direction, and the second size is determined based on the size of the first layout container in the first direction and the inner margin of the first layout container in the first direction. The electronic device displays the N sub-controls in the second interface according to the attribute values ​​of the N sub-controls, including: the electronic device displays M sub-controls in the second interface according to the attribute values ​​of the N sub-controls.

[0045] In other words, when an electronic device runs the application, it acquires device parameters and determines the application's display size and position based on these parameters, further determining the size of the first layout container, etc. When the width or height of the layout container is insufficient to display all child controls, it can automatically hide some child controls within the layout container, thereby meeting the display needs of electronic devices with different screen sizes. Therefore, this solution's hiding capability enables electronic devices with different screen specifications to present different display effects based on the same layout settings, reducing the development and maintenance workload for developers while meeting the display needs of various types of electronic devices.

[0046] In one possible implementation, the sum of the dimensions of the M child controls in the first direction is less than or equal to the second dimension.

[0047] In existing technologies, when an electronic device cannot display all the sub-controls in a first layout container, simply truncating content exceeding the size of the first layout container may result in some sub-controls only displaying part of their content, leading to a cluttered display interface. However, in the solution provided in this application, the M sub-controls displayed in the first layout container are complete sub-controls, meaning that all the content of the M sub-controls is displayed, resulting in a neat and uniform display interface.

[0048] In one possible implementation, when the first size is larger than the second size, determining M sub-controls from N sub-controls includes: when the first size is larger than the second size, determining M sub-controls from N sub-controls according to the priority of N sub-controls.

[0049] In one possible implementation, the priority of each of the M child controls is lower than the priority of the other NM child controls among the N child controls.

[0050] In other words, the importance of child controls within the first layout container can be set by configuring their priority. This avoids hiding or concealing later child controls when the first layout container cannot display all of them.

[0051] In one possible implementation, the preset parameters for the hiding capability include N sub-controls, including at least one first sub-control, at least one second sub-control, and at least one third sub-control, with the first sub-control having a higher priority than the second sub-control, and the second sub-control having a higher priority than the third sub-control. When the first size is larger than the second size, M sub-controls are determined from the N sub-controls according to their priorities, including: when the first size is larger than the second size, the M sub-controls do not include the first sub-control; when the sum of the sizes of the second and third sub-controls in the first direction is less than or equal to the second size, the M sub-controls include both the second and third sub-controls; when the sum of the sizes of the second and third sub-controls in the first direction is greater than the second size, the M sub-controls do not include the first and second sub-controls; when the sum of the sizes of the third sub-controls in the first direction is less than or equal to the second size, the M sub-controls include the third sub-control.

[0052] In other words, when the first layout container cannot display all child controls, the child controls are hidden in descending order of their hiding priority.

[0053] In one possible implementation, the preset parameters for the hiding capability further include N sub-controls, including at least one first sub-control, at least one second sub-control, and at least one third sub-control, where the first sub-control has a higher priority than the second sub-control, and the second sub-control has a higher priority than the third sub-control; when the first size is larger than the second size, M sub-controls are determined based on the priorities of the N sub-controls, including: determining that the M sub-controls include the third sub-control; when the sum of the sizes of the third sub-control and the second sub-control in the first direction is less than or equal to the second size, determining that the M sub-controls also include the second sub-control; when the sum of the sizes of the third sub-control and the second sub-control in the first direction is greater than the second size, determining that the M sub-controls do not include the second sub-control and the first sub-control.

[0054] In other words, when the first layout container cannot display all child controls, the child controls to be displayed are determined in order of their hiding priority from low to high.

[0055] In one possible implementation, after determining M sub-controls from N sub-controls, the method further includes: determining the spacing between adjacent sub-controls among the M sub-controls based on a second dimension and the sum of the dimensions of the M sub-controls in a first direction.

[0056] After determining the number of child controls displayed in the layout container, further adjust the spacing between adjacent child controls to improve the display effect of the layout container.

[0057] In one possible implementation, the spacing between adjacent child controls in the M child controls may be equal or unequal.

[0058] In one possible implementation, the preset capability is a stretch capability. The first layout file indicates that N sub-controls are arranged in a second direction of the first layout container. The preset parameters corresponding to the stretch capability include a first threshold and / or a second threshold of the first layout container in the first direction; wherein the second direction is different from the first direction, and the second threshold is less than the first threshold; the electronic device determines the attribute values ​​of the N sub-controls according to the device parameters of the electronic device and the preset capability, including: the electronic device determines the initial value of the size of the first layout container in the first direction according to the device parameters; if the initial value is greater than the first threshold, the size of the first layout container in the first direction is determined to be the first threshold; or, if the initial value is less than the second threshold, the size of the first layout container in the first direction is determined to be the second threshold; the size of the first sub-control in the first layout container in the first direction is determined according to the size of the first layout container in the first direction; wherein the first sub-control is one of the N sub-controls; the electronic device displays the N sub-controls on the second interface according to the attribute values ​​of the N sub-controls, including: the electronic device displays the first sub-control on the second interface according to the attribute values ​​of the N sub-controls.

[0059] When the electronic device runs the application, it acquires device parameters and determines the display size and position of the application based on these parameters. Furthermore, it determines the initial value of the first layout container's size in the first direction based on size constraints passed from its parent layout container, or it determines the initial value of the first layout container's size in the first direction based on the size set in the layout file. The first threshold can be the maximum size value of the first layout container in the first direction set in the layout file, and the second threshold can be the minimum size value of the first layout container in the first direction set in the layout file.

[0060] As can be seen, in this application, after determining the initial value of the size of the first layout container in the first direction, the size of the first layout container in the first direction can be adjusted by using a first threshold and a second threshold, thereby avoiding excessive enlargement or reduction of the first layout container and further ensuring that the first sub-controls in the first layout container can present a better display effect. In other words, this application provides a layout container that can adaptively adjust its size according to the device parameters of the electronic device, so that the controls in the layout container can also adaptively adjust according to the device parameters of the electronic device. Therefore, a single layout file can be set for electronic devices with different device parameters, thereby avoiding developers designing different layout files for electronic devices with different device parameters. Thus, this application reduces the development and maintenance workload of developers while meeting the display needs of various types of electronic devices.

[0061] It's important to note that a typical application installation package includes several file types, such as logic code files, resource files, and layout files. Layout files define the GUI (Graphical User Interface) (i.e., the display interface), defining the hierarchical structure of controls and layout containers, as well as their size and position. Logic code files contain the execution logic behind the controls and layout containers in the display interface. Resource files include the content displayed in the controls and layout containers, such as images, videos, and URLs.

[0062] In one possible implementation, the larger the size of the first layout container in the first direction, the larger the size of the first child control in the first direction.

[0063] In other words, on electronic devices with different device parameters, the size of the first child control in the first direction will increase as the size of the first layout container in the first direction increases, so that the size of the first child control can adaptively adjust on electronic devices with different device parameters. In this way, developers can set up a set of layout files for electronic devices with different device parameters.

[0064] In one possible implementation, determining the size of the first sub-control in the first layout container in the first direction based on the size of the first layout container in the first direction includes: determining that the size of the first sub-control in the first direction is the same as the size of the first layout container in the first direction; or, determining that the size of the first sub-control in the first direction is the size of the first layout container in the first direction minus the inner margin of the first layout container in the first direction.

[0065] In one example, the size of the first child control in the first direction is the same as the size of the first layout container in the first direction. The first layout container presents the first child control at its largest size in the first direction, which is beneficial for the first child control to display more content.

[0066] In another example, you can also set the inner margin of the first layout container. This ensures that the first child control within the first layout container maintains a certain distance from the edge of the container, achieving a magazine-like layout with ample white space. This creates a magazine-like reading experience and enhances the user's visual experience.

[0067] In one possible implementation, the first direction includes a horizontal direction and / or a vertical direction.

[0068] In other words, developers can set the stretchability of the first layout container in one direction, or in two directions simultaneously. For example, setting the stretchability of the first layout container in the horizontal direction will cause its width to change with the screen width. Setting the stretchability of the first layout container in the vertical direction will cause its height to change with the screen height. Setting the stretchability of the first layout container in both the horizontal and vertical directions will cause both its width and height to change with the screen width and height.

[0069] In one possible implementation, when the first direction is horizontal, the inner margins of the first layout container in the first direction include a left inner margin and / or a right inner margin; wherein, the left inner margin is the distance from the left edge of the leftmost control in the layout container to the left edge of the layout container; the right inner margin is the distance from the right edge of the rightmost control in the layout container to the right edge of the layout container; when the first direction is vertical, the inner margins of the first layout container in the first direction include a top inner margin and / or a bottom inner margin; wherein, the top inner margin is the distance from the top edge of the topmost control in the layout container to the top edge of the layout container; the bottom inner margin is the distance from the bottom edge of the bottommost control in the layout container to the bottom edge of the layout container.

[0070] In one possible implementation, the N sub-controls can be any one of the following: text control, edit control, button control, or image button control.

[0071] In a second aspect, an electronic device is provided, comprising: a processor, a memory, and a touchscreen, wherein the memory and the touchscreen are coupled to the processor, the memory is used to store computer program code, the computer program code including computer instructions, and when the processor executes the computer instructions in the memory, the electronic device performs the method as described in the first aspect above and any possible implementation thereof.

[0072] Thirdly, an apparatus is provided, included in an electronic device, having the function of implementing the behavior of the electronic device in any of the methods of the first aspect and its possible implementations. This function can be implemented in hardware or by hardware executing corresponding software. The hardware or software includes at least one module or unit corresponding to the above-described function. For example, a receiving module or unit, a display module or unit, and a processing module or unit, etc.

[0073] Fourthly, a computer-readable storage medium is provided, including computer instructions that, when executed on an electronic device, cause the electronic device to perform the method described in the first aspect above and any possible implementation thereof.

[0074] Fifthly, a graphical user interface is provided for an electronic device having a display screen, a memory, and one or more processors for executing one or more computer programs stored in the memory, the graphical user interface including a graphical user interface displayed when the electronic device performs the method as described in the first aspect above and any of its possible implementations.

[0075] A sixth aspect is to provide a computer program product comprising computer instructions that, when executed on a computer, cause the computer to perform the method described in the first aspect above and any of its possible implementations.

[0076] A seventh aspect provides a chip system including a processor, which, when executing instructions, performs the method described in the first aspect above and any possible implementation thereof.

[0077] Understandably, the electronic devices, apparatuses, computer-readable storage media, computer program products, graphical user interfaces, and chip systems provided in the above-mentioned aspects are all applied to the corresponding methods provided above. Therefore, the beneficial effects they can achieve can be referred to the beneficial effects in the corresponding methods provided above, and will not be repeated here. Attached Figure Description

[0078] Figure 1 This is a schematic diagram of the structure of a display interface provided in an embodiment of this application;

[0079] Figure 2 A schematic diagram illustrating the process of an adaptive layout method for a display interface provided in an embodiment of this application;

[0080] Figure 3 A flowchart illustrating another adaptive layout method for a display interface provided in an embodiment of this application;

[0081] Figure 4 A schematic diagram of the development interface of some display interface layout files provided in the embodiments of this application;

[0082] Figure 5 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application;

[0083] Figure 6 This is a schematic diagram of the structure of another electronic device provided in an embodiment of this application;

[0084] Figure 7 A schematic diagram illustrating yet another layout method for a display interface provided in an embodiment of this application;

[0085] Figure 8 The following are illustrations showing the display effects of a layout container with extensibility in different scenarios, as provided in the embodiments of this application.

[0086] Figure 9 The following are display effect diagrams of a layout container with extensibility provided in the embodiments of this application under different scenarios;

[0087] Figure 10A A flowchart illustrating a measurement method in a view system provided in an embodiment of this application;

[0088] Figure 10B The illustrations show the effect of displaying a layout container with extensibility on different electronic devices provided in the embodiments of this application;

[0089] Figure 11 A schematic diagram illustrating yet another method for adaptive layout of an application interface provided in an embodiment of this application;

[0090] Figure 12 The following are illustrations showing the display effects of a layout container with proportioning capability in different scenarios, as provided in the embodiments of this application.

[0091] Figure 13 The following are illustrations showing the display effects of a layout container with proportioning capability provided in the embodiments of this application in different scenarios.

[0092] Figure 14The following are illustrations showing the display effects of a layout container with proportioning capability provided in the embodiments of this application in different scenarios.

[0093] Figure 15A A flowchart illustrating a measurement method in a view system provided in this application embodiment;

[0094] Figure 15B The illustrations show the effect of displaying layout containers with occupancy capabilities on different electronic devices provided in the embodiments of this application;

[0095] Figure 16 A schematic diagram illustrating yet another method for adaptive layout of an application interface provided in an embodiment of this application;

[0096] Figure 17 The following are illustrations showing the display effects of a layout container with equal distribution capability in different scenarios, as provided in the embodiments of this application.

[0097] Figure 18 The following are display effect diagrams of another layout container with equal distribution capability provided in the embodiments of this application in different scenarios;

[0098] Figure 19 The following are display effect diagrams of another layout container with equal distribution capability provided in the embodiments of this application in different scenarios;

[0099] Figure 20 The following are display effect diagrams of another layout container with equal distribution capability provided in the embodiments of this application in different scenarios;

[0100] Figure 21A A flowchart illustrating a measurement method in a view system provided in this application embodiment;

[0101] Figure 21B The illustrations show the effect of displaying layout containers with equal distribution capability on different electronic devices provided in the embodiments of this application;

[0102] Figure 22 A schematic diagram illustrating yet another method for adaptive layout of an application interface provided in an embodiment of this application;

[0103] Figure 23 The following are illustrations showing the display effects of a layout container with hiding capabilities in different scenarios, as provided in the embodiments of this application.

[0104] Figure 24A A flowchart illustrating a measurement method in a view system provided in this application embodiment;

[0105] Figure 24B A flowchart illustrating a measurement method in a view system provided in this application embodiment;

[0106] Figure 25 The illustrations show the effect of displaying layout containers with hiding capabilities on different electronic devices provided in the embodiments of this application;

[0107] Figure 26 A schematic diagram illustrating yet another method for adaptive layout of an application interface provided in an embodiment of this application;

[0108] Figure 27 The following are display effect diagrams of a layout container with stretchability provided in the embodiments of this application under different scenarios;

[0109] Figure 28 The following are display effect diagrams of another stretchable layout container provided in the embodiments of this application in different scenarios;

[0110] Figure 29 The following are display effect diagrams of another stretchable layout container provided in the embodiments of this application in different scenarios;

[0111] Figure 30A A flowchart illustrating a measurement method in a view system provided in this application embodiment;

[0112] Figure 30B The illustrations show the effect of displaying a layout container with stretchability on different electronic devices provided in the embodiments of this application;

[0113] Figure 31 The following are display effect diagrams of some layout containers with multiple adaptive layout capabilities provided for embodiments of this application in different scenarios;

[0114] Figure 32 The following are display effect diagrams of some layout containers with multiple adaptive layout capabilities provided in the embodiments of this application in different scenarios;

[0115] Figure 33 The following are display effect diagrams of some layout containers with multiple adaptive layout capabilities provided in the embodiments of this application in different scenarios;

[0116] Figure 34 The following are display effect diagrams of some layout containers with multiple adaptive layout capabilities provided in the embodiments of this application in different scenarios;

[0117] Figure 35 The following are display effect diagrams of some layout containers with multiple adaptive layout capabilities provided in the embodiments of this application in different scenarios;

[0118] Figure 36 The following are display effect diagrams of some layout containers with multiple adaptive layout capabilities provided in the embodiments of this application in different scenarios;

[0119] Figure 37 The following are display effect diagrams of some layout containers with multiple adaptive layout capabilities provided in the embodiments of this application in different scenarios;

[0120] Figure 38 The following are display effect diagrams of some layout containers with multiple adaptive layout capabilities provided in the embodiments of this application in different scenarios;

[0121] Figure 39 This is a schematic diagram of a chip system provided in an embodiment of this application. Detailed Implementation

[0122] In the description of the embodiments of this application, unless otherwise stated, " / " means "or," for example, A / B can mean A or B; the term "and / or" in this document is merely a description of the relationship between related objects, indicating that three relationships can exist, for example, A and / or B can represent: A alone, A and B simultaneously, and B alone. Hereinafter, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of the embodiments of this application, unless otherwise stated, "multiple" means two or more. In the embodiments of this application, the words "exemplary" or "for example" are used to indicate examples, illustrations, or explanations. Any embodiment or design described as "exemplary" or "for example" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or design solutions. Specifically, the use of the words "exemplary" or "for example" is intended to present the relevant concepts in a specific manner.

[0123] This explanation uses the Android system as an example. Applications define their graphical user interface (GUI) (i.e., the display interface) through layout files. Layout files consist of a view tree, which includes controls and layout containers.

[0124] Controls are elements presented in the GUI that provide users with certain operational functions or display certain content. For example, controls may include text controls, such as TextView and EditText controls, button controls, such as Button and ImageButton controls, and image controls, such as ImageView controls. This application does not impose any limitations on these aspects.

[0125] A layout container is used to store the layout structure of controls and other layout containers. That is, a layout container can include one or more controls, as well as nested layout containers.

[0126] Let's take the Android system's display interface as an example. Generally, one display interface corresponds to one Activity, and one Activity holds a Window object (its instance is PhoneWindow). This Window is used to draw various controls. PhoneWindow, as the most basic window system in Android, holds the top-level View object DecorView (essentially a ViewGroup). DecorView is the root view (ViewRoot) of all Views and ViewGroups, also known as the root node control. DecorView contains ContentView (essentially a ViewGroup). ContentView is the custom view of each application, i.e., the application's display interface; ContentView is also called the content control. ContentView includes one or more Views, and / or one or more ViewGroups. It should be noted that during the display process, the electronic device starts from the root view's performTraversals() method and traverses the entire view tree from top to bottom. Each View is responsible for drawing itself, and the ViewGroup is also responsible for notifying its child Views to perform drawing operations. Optionally, DecorView also contains TitleView (title control), which can be used to customize the navigation of the display interface.

[0127] Please see Figure 1 , Figure 1 Figure (1) is a schematic diagram of an alarm clock interface 10. This alarm clock interface 10 corresponds to a DecorView. DecorView includes View1 (text control), View2 (image control), and ViewGroup1. ViewGroup1 specifically includes ViewGroup2, ViewGroup3, and View7 (button control). ViewGroup2 includes View3 (text control) and View4 (button control). Similarly, ViewGroup3 includes View5 (text control) and View6 (button control). The hierarchical relationship of each View and ViewGroup in the alarm clock interface 10 can be found in [reference]. Figure 1 The view tree shown in (2) is as follows.

[0128] For example, developers can use layout methods such as LinearLayout, TableLayout, RelativeLayout, FrameLayout, AbsoluteLayout, or GridLayout to design the Views or ViewGroups within each display interface of the application, thereby generating a layout file for each display interface.

[0129] In other words, developers can set the hierarchical structure and attribute values ​​(such as size (width and height), position, etc.) of each View and ViewGroup in the layout files of each display interface. Then, these display interface layout files are packaged into the application's installation package, which is then uploaded to the app store. Subsequently, electronic devices can download and install the application from the app store. When an application runs on an electronic device, the device obtains the application's layout files, draws the corresponding display interface according to those files, and presents it to the user.

[0130] It's important to note that in one approach, the layout files for these display interfaces can have defined attribute values ​​for the Views and ViewGroups contained within them. Once the attribute values ​​for each View and ViewGroup in the layout file are set, the size and position of the View or ViewGroup in the display interface remain unchanged. In other words, developers have already determined how each display interface will be presented to the user when developing the application. Understandably, when electronic devices with different screen sizes use this layout file, the display interfaces are the same, or the entire display interface is simply scaled or enlarged. Because electronic devices currently have varying screen sizes, reusing the same display interface often results in poor display quality. Currently, some application developers design different layout files for different screen sizes and adapt the corresponding logic, resulting in a huge workload for development and maintenance. Furthermore, packaging a large number of layout files in the application's installation package makes the application's installation package too large, affecting the download speed of the installation package on electronic devices and the space occupied by the installation files after installation.

[0131] In another technical solution, for electronic devices with large screen sizes, layout files from multiple smaller electronic devices can be directly reused. For example, a large screen is a tablet computer with a screen size of 1280*800 pixels. A small screen is a mobile phone with a screen size of 720*1080 pixels. Therefore, when displaying an application interface, a tablet computer can simultaneously display two or more windows. Each window uses the layout file of a corresponding display interface on the mobile phone. In other words, when displaying one display interface, the tablet computer is simultaneously displaying what is equivalent to two or more display interfaces on a mobile phone. For example, the tablet computer screen can be divided into two equal windows, each with a size of 640*800 pixels. Each window is used to display one interface from a mobile phone. Clearly, the aspect ratio of a window on a tablet computer is 640:800 (4:5), while the aspect ratio of a mobile phone interface is 720:1080 (2:3).

[0132] It should be noted that even though large electronic devices can reuse the layout files of multiple small electronic devices through multi-window management, the aspect ratio of each window on the large electronic device is usually different from that of the small electronic device. Therefore, directly reusing the layout files of the small electronic devices may not result in a good interface layout.

[0133] This application provides a layout method for a display interface, developing a layout file for an application's display interface that is applicable to electronic devices with various screen sizes. This is because, when the electronic device runs the application, the layout of the display interface can be adaptively adjusted according to the device's screen parameters, which not only improves the display effect of electronic devices with different screen sizes but also reduces development and maintenance costs for developers. The screen parameters include screen size parameters and screen state parameters (e.g., landscape / portrait mode, folding state of a foldable screen), etc.

[0134] Furthermore, electronic devices of the same or similar type, even with different screen parameters, often share similar usage scenarios (interaction methods with users, functional controls, etc.), resulting in similar user interfaces. Therefore, designing a single layout file for the same application can satisfy the design intentions of application developers. Electronic devices with different screen parameters can adaptively adjust the size and / or position of Views and ViewGroups in the display interface based on the adaptive layout capabilities of Views and ViewGroups in the layout file, mitigating display limitations between different electronic devices. This facilitates users switching between different devices and meets their display needs in various scenarios. For example, in a distributed display scenario, users can send the display interfaces corresponding to different functional modules of a single interface to different electronic devices for display. Similarly, users may switch between different electronic devices to display the interface based on the current application scenario (driving, home, fitness, etc.).

[0135] For example, when designing layout files for various display interfaces in an application, developers can set extended attribute values ​​for the Views and ViewGroups included in the display interfaces, as described in this embodiment. These extended attribute values ​​do not uniquely determine the size and position of a View or ViewGroup, but rather constrain the relative relationship (e.g., relative size, relative position) between these Views or ViewGroups and other Views (or other ViewGroups) in the display interface. In other words, developers do not determine how each display interface will appear to the user when developing the application. Subsequently, when an electronic device uses this layout file to draw the display interface, it obtains its own screen parameters, determines the display parameters of the display interface (e.g., the display position and size of the display interface on the electronic device's screen), and arranges the size and position of each View and ViewGroup in the display interface according to the hierarchical structure and extended attribute values ​​of the Views and ViewGroups included in the display interface in the layout file, as well as the screen parameters of the electronic device. For example, when an electronic device runs an application, it determines how each display interface will appear to the user based on the screen parameters of the electronic device. It can be understood that electronic devices with different screen parameters will draw different display interfaces using the same layout file.

[0136] In some other embodiments, the solutions provided in this application can also be used in conjunction with solutions that reuse layout files for small-sized screens on large-sized screens. For example, a large-sized screen electronic device can reuse multiple sets of layout files for small-sized electronic devices through multi-window management. It should be noted that these multiple sets of layout files for small-sized electronic devices correspond to different display interfaces. In other words, the same display interface used here still corresponds to one set of layout files.

[0137] Therefore, when displaying the interface in each window on a large-screen electronic device, the size and position of each View and ViewGroup in the interface are adaptively adjusted according to the layout file of the corresponding interface and the size of the window. In other words, even if the aspect ratio of each window on a large-screen electronic device is different from that on a small-screen electronic device, the adaptive layout scheme provided in this application can still ensure that the interface displayed in each window on the large-screen electronic device presents a better display effect.

[0138] like Figure 2 As shown, during the development phase, developers use relevant development tools on their devices (e.g., computers) to create a layout file for each display interface of the application (this layout file includes Views and ViewGroups with attributes set according to the extensions of this application), and package it into the application's installation package. The application installation package is then uploaded to the server (cloud). Subsequently, electronic devices with different screen parameters (e.g., different types of electronic devices or different models of the same type of electronic device) can download and run the application installation package from the server. It is evident that these different electronic devices obtain their own screen parameters and determine the display parameters of the application's display interface (e.g., the display position and size of the application's display interface on their respective screens). Then, combining the application's display parameters with the layout file in the application installation package, the Views and ViewGroups in the application's display interface are laid out, and the corresponding display interface is displayed. For example, a mobile phone draws... Figure 2 The interface 21 shown is drawn by the smartwatch as follows. Figure 2 Interface 22 shown is drawn on the smart screen as follows: Figure 2 Interface 23 is shown in the image.

[0139] It should be noted that, in this document, Views or ViewGroups with extended attributes are also referred to as Views or ViewGroups with adaptive layout capabilities. In other words, in the embodiments of this application, each View or ViewGroup in the display interface has adaptive layout capabilities. The adaptive layout capabilities of these Views or ViewGroups can be implemented through code modules, and the implementation process will be described in detail below using scaling capabilities as an example.

[0140] The adaptive layout capabilities of the View and ViewGroup mentioned above include, but are not limited to: scaling, stretching, hiding, line wrapping (also known as automatic line breaks), even distribution, proportioning, and expansion. This section will first provide a brief introduction to the adaptive layout capabilities of View and ViewGroup, which will be explained in detail later.

[0141] Scaling capability refers to the ability of a View or ViewGroup to adaptively shrink or enlarge in the horizontal and vertical directions within a layout container. For example, you can set the percentage of a View or ViewGroup within a layout container in a specified direction. This way, when the size of the layout container changes, the View or ViewGroup within the container maintains its original shape (e.g., aspect ratio) while scaling, ensuring that the scaled View or ViewGroup maintains the set percentage in the horizontal direction and / or in the vertical direction.

[0142] Stretchability refers to the ability of a View or ViewGroup to adaptively stretch in a specified direction within a layout container. For example, you can set margin values ​​for a View or ViewGroup in a specified direction (horizontal and / or vertical) within the layout container. These margin values ​​refer to the distance between the View or ViewGroup and the edge of the layout container. This way, when the size of the layout container changes, the View or ViewGroup within the layout container will maintain its margin value in the specified direction and adaptively change with the size of the layout container in that direction.

[0143] It should be noted that the stretching in the embodiments of this application includes enlarging (increasing size) the View or ViewGroup in a specified direction, and shrinking (decreasing size) it in a specified direction. For example, stretching the View or ViewGroup in the horizontal direction includes increasing or decreasing the width of the View or ViewGroup. Stretching the View or ViewGroup in the vertical direction includes increasing or decreasing the height of the View or ViewGroup.

[0144] The ability to hide refers to the ability of a View or ViewGroup to automatically hide itself based on its priority when it is displayed. For example, you can set the priority of hiding a View or ViewGroup within a layout container. Taking hiding priority as an example, when the size of the layout container changes and is insufficient to display all the Views or ViewGroups in the design, they are hidden according to their hiding priority.

[0145] Line wrapping capability refers to the ability of a View or ViewGroup within a layout container to automatically wrap lines. For example, a line wrapping reference value can be set for the layout container. When the total width and spacing of a View or ViewGroup in a row of the layout container exceeds the line wrapping reference value, other Views or ViewGroups exceeding the line wrapping reference value will automatically wrap to the next line.

[0146] It should be noted that the line-wrap capability here includes both horizontal and vertical line wrapping. Horizontal line wrapping refers to the situation where multiple sub-controls, originally arranged horizontally, are automatically split into lines based on the width of the layout container when displayed on the electronic device. Vertical line wrapping refers to the situation where multiple sub-controls, originally arranged vertically, are automatically split into columns based on the height of the layout container when displayed on the electronic device. In some examples, vertical line wrapping can also be considered the inverse operation of horizontal line wrapping. Therefore, the line wrapping capability in this application can also be described as line splitting capability, column splitting capability, segmentation capability, column splitting capability, etc., and this application does not specifically limit this.

[0147] Even spacing refers to the ability of Views or ViewGroups within a layout container to automatically adjust their spacing. For example, you can set the spacing of Views or ViewGroups within a layout container to be evenly distributed in a specified direction. Then, when the size of the layout container changes, the Views or ViewGroups within the layout container will adaptively adjust their spacing based on their own size and the size of the layout container.

[0148] Proportional scaling refers to the ability of a View or ViewGroup to maintain a fixed proportion within a layout container in a specified direction. For example, you can set the proportion of the layout container in a specified direction (such as horizontal or vertical). This way, when the size of the layout container changes, the Views or ViewGroups within the container maintain their original shape (e.g., aspect ratio) while scaling, ensuring that the proportion of the scaled View or ViewGroup in the specified direction within the layout container meets the set proportion value.

[0149] The ability to extend refers to the layout container's capacity to automatically adjust the number of child views (Views or ViewGroups) displayed. This includes general extension capabilities and extended extension capabilities. General extension capabilities mean that when the size of the layout container changes, the number of fully displayed child views in the layout container is determined based on the container's size, the sizes of its child views, and default spacing. Fully displayed child views, also called fully displayed child views, refer to the entire content of the child view displayed within the layout container. Extended extension capabilities mean that the layout container can also display partially displayed child views. Partially displayed child views, also called partially displayed child views, refer to a portion of the content of the child view displayed within the layout container. For example, a size threshold can be set for the layout container. Then, when the size of the layout container changes, the size of the fully displayed child views and the size of the partially displayed child views are determined based on the sizes of the child views, the container's size, and the size threshold.

[0150] It should be noted that the extension capability includes horizontal extension capability and vertical extension capability. Horizontal extension capability refers to determining the number of displayed child controls based on the width of the layout container for horizontally arranged child controls. Vertical extension capability refers to determining the number of displayed child controls based on the height of the layout container for vertically arranged child controls. This article uses horizontal extension capability as an example; the implementation of vertical extension capability can be referenced from the horizontal extension capability implementation, and will not be elaborated upon here.

[0151] like Figure 3 The diagram illustrates the general process for implementing the adaptive layout capability of a View or ViewGroup in this embodiment. First, developers use development tools to create the application interface. During development, they can select the necessary capabilities from the View and ViewGroup capability library (including native Android capabilities and the adaptive layout capabilities extended in this application) to obtain layout files, complete the application interface development, and generate the application's installation package. Then, the electronic device can download the application installation package from the app store and install and run it. When the electronic device runs the application, it automatically lays out the layout based on the layout files and the electronic device's environment (e.g., screen parameters), drawing the corresponding application interface, which is the interface seen by the user.

[0152] The following describes the specific solutions for implementing the adaptive layout capability of View or ViewGroup in this application.

[0153] Developers use Integrated Development Environment (IDE) tools to develop applications. An IDE tool integrates code writing, analysis, compilation, and debugging capabilities into a single development software service suite. For example, typical Android system IDE tools include either Android Studio or DevEcoStudio.

[0154] like Figure 4 As shown in (1), this is an example of the development interface 20 when developers develop an application. The development interface 20 includes an application directory tree 21, application dependency packages 22, and the development interface of the application display interface 1. The development interface of the application display interface 1 includes a layout file (such as 111.xml) 23 and JAVA source code (such as 222.java) 24.

[0155] The application directory tree 21 includes the application name, compilation dependencies, application package, and application source code. Developers can quickly open the corresponding files through the application directory tree 21 for easy editing. For example, developers can quickly open and edit the Java source code or layout files within the application source code, allowing them to edit the layout of each display interface in the application.

[0156] It's important to note that before editing the layout of the display interface, you need to add the libraries that your application depends on. Specifically, you can add the dependent libraries in application dependency package 22. For example, when developing an application for the Android system, you need to depend on external libraries and the Android API library.

[0157] After adding the dependent libraries, developers can set the hierarchy, attribute values, and display resources of each View and ViewGroup contained in each display interface of the application by calling the corresponding API interfaces in JAVA source code 24. Alternatively, developers can also set the hierarchy, attribute values, and display resources of each View and ViewGroup contained in each display interface of the application in layout file 23.

[0158] It should be noted that the View and ViewGroup provided in this application embodiment have adaptive layout capabilities. Besides relying on the basic Android system libraries (External Libs, Android API libraries), they also require extended libraries from this application, such as the adaptive layout attribute package. In one specific implementation, the adaptive layout attribute package includes declarations of various adaptive layout capabilities for the View and ViewGroup, interface information for each adaptive layout capability, and preset algorithms corresponding to each adaptive layout capability (wherein the preset algorithms may include measurement procedures for layout containers with various adaptive layout capabilities). When developing an application, developers use the declarations of various adaptive layout capabilities or the interface information for each adaptive layout capability to design the application's layout file. That is, the layout file includes Views or ViewGroups set to have adaptive layout capabilities. Developers package the designed layout file, the preset algorithms corresponding to each adaptive layout capability, and other program code and resources required by the application into the application's installation package. In another specific implementation, developers design the application's layout file using the declarations of each adaptive layout capability or the interface information called by each adaptive layout capability. The designed application layout file, along with other program code and resources required by the application, are then packaged into the application's installation package. In this example, electronic devices that subsequently install the application's installation package need to support the various adaptive layout capabilities provided in this application's embodiments, for example, by pre-installing the algorithm modules corresponding to each adaptive layout capability.

[0159] In other words, in one specific embodiment, the application installation package packaged by the developer includes the aforementioned layout file and the preset algorithm corresponding to the adaptive layout capability set in the layout file. In another specific embodiment, the application installation package packaged by the developer includes the aforementioned layout file, but may not include the preset algorithm corresponding to the adaptive layout capability set in the aforementioned layout file. In this embodiment, the electronic device that subsequently runs the application installation package is pre-installed with the preset algorithm module corresponding to the adaptive layout capability set in the aforementioned layout file. For example, the pre-installed operating system of the electronic device includes the preset algorithm module corresponding to the adaptive layout capability, or the electronic device can download and install the preset algorithm module corresponding to the adaptive layout capability from a server (e.g., a server providing adaptive layout capability, or the server of the electronic device).

[0160] Once the electronic device downloads and installs the application's package, and runs the application, it can obtain the attribute values ​​of the View or ViewGroup of each adaptive layout capability based on the interfaces called by each adaptive layout capability, and complete the measurement and layout by calling the corresponding processing flow when measuring the layout of each adaptive layout capability, finally drawing and displaying the interface. The interfaces called by each adaptive layout capability and the corresponding processing flow (e.g., the preset algorithms for each adaptive layout capability) will be explained in detail later when describing the processing flow of the electronic device.

[0161] For example, such as Figure 4 As shown in (1), developers can add adaptive layout property packages through control 25. For example... Figure 4 The development interface 27 shown in (2) includes a new adaptive layout attribute package 26 in the application dependency package.

[0162] As can be seen from layout file 23, "android:" indicates the attribute values ​​of the native View or ViewGroup in the Android system. "app:" indicates the attribute values ​​of the View or ViewGroup extended in this application, that is, the attribute values ​​of the View or ViewGroup with adaptive layout capabilities. Alternatively, from the Java source code 24, we can see the API interfaces corresponding to the adaptive layout capabilities called by the developer, such as setAttr1(), getAttr1(), setAttr2(), and getAttr2().

[0163] Next, developers use IDE tools to package the application's source code, resources (including layout files), dependent libraries, etc., into an installation package (e.g., an APK file). This completes the application's development. The application's installation package is then uploaded to app stores. Users can download and install the application on different electronic devices. It's important to note that electronic devices with different screen parameters use the same layout file to draw the application's display interface.

[0164] For example, in the embodiments of this application, the electronic device may be a mobile phone, tablet computer, personal computer (PC), personal digital assistant (PDA), netbook, wearable electronic device (such as smart bracelet, smartwatch), augmented reality (AR) device, virtual reality (VR) device, in-vehicle device, smart screen, smart car, smart speaker, etc. This application does not impose any special restrictions on the specific form of the electronic device.

[0165] Figure 5 A schematic diagram of the structure of an electronic device 100 is shown. It is understood that the structure illustrated in this embodiment of the invention does not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may include more or fewer components than illustrated, or combine certain components, or split certain components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0166] Electronic device 100 may include processor 110, external memory interface 120, internal memory 121, universal serial bus (USB) interface 130, charging management module 140, power management module 141, battery 142, antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone jack 170D, sensor module 180, button 190, motor 191, indicator 192, camera 193, display screen 194, and subscriber identification module (SIM) card interface 195, etc.

[0167] Processor 110 may include one or more processing units, such as application processor (AP), modem processor, graphics processing unit (GPU), image signal processor (ISP), controller, video codec, digital signal processor (DSP), baseband processor, and / or neural network processing unit (NPU). These different processing units may be independent devices or integrated into one or more processors.

[0168] The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has just used or that are used repeatedly. If the processor 110 needs to use the instruction or data again, it can retrieve it directly from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0169] Internal memory 121 can be used to store computer executable program code, which includes instructions. Internal memory 121 may include a program storage area and a data storage area. The program storage area may store the operating system, at least one application program required for a function (such as sound playback, image playback, etc.), etc. The data storage area may store data created during the use of electronic device 100 (such as audio data, phonebook, etc.). Furthermore, internal memory 121 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc. Processor 110 executes various functional applications and data processing of electronic device 100 by running instructions stored in internal memory 121 and / or instructions stored in memory located in the processor.

[0170] The external storage interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external storage interface 120 to perform data storage functions. For example, music, video, and other files can be saved on the external memory card.

[0171] The charging management module 140 receives charging input from a charger. The charger can be a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 140 receives charging input from the wired charger via the USB interface 130. In some wireless charging embodiments, the charging management module 140 receives wireless charging input via the wireless charging coil of the electronic device 100. While charging the battery 142, the charging management module 140 can also supply power to the electronic device via the power management module 141.

[0172] The power management module 141 connects the battery 142, the charging management module 140, and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140, providing power to the processor 110, internal memory 121, display screen 194, camera 193, and wireless communication module 160, etc. The power management module 141 can also monitor parameters such as battery capacity, battery cycle count, and battery health status (leakage current, impedance). In some other embodiments, the power management module 141 may also be located within the processor 110. In other embodiments, the power management module 141 and the charging management module 140 may be located in the same device.

[0173] The wireless communication function of electronic device 100 can be implemented through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor, and baseband processor. Mobile communication module 150 can provide wireless communication solutions for electronic device 100, including 2G / 3G / 4G / 5G. Wireless communication module 160 can provide wireless communication solutions for electronic device 100, including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), and infrared (IR) technologies.

[0174] In some embodiments, antenna 1 of electronic device 100 is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, enabling electronic device 100 to communicate with networks and other devices via wireless communication technology. The wireless communication technology may include Global System for Mobile Communications (GSM), General Packet Radio Service (GPRS), Code Division Multiple Access (CDMA), Wideband Code Division Multiple Access (WCDMA), Time-Division Code Division Multiple Access (TD-SCDMA), Long Term Evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technologies, etc. The GNSS may include the Global Positioning System (GPS), the Global Navigation Satellite System (GLONASS), the BeiDou Navigation Satellite System (BDS), the Quasi-Zenith Satellite System (QZSS), and / or satellite-based augmentation systems (SBAS).

[0175] Electronic device 100 implements display functions through a GPU, display screen 194, and application processor. Electronic device 100 implements shooting functions through an ISP, camera 193, video codec, GPU, display screen 194, and application processor. Electronic device 100 implements audio functions, such as music playback and recording, through an audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone jack 170D, and application processor.

[0176] Buttons 190 include a power button, volume buttons, etc. Buttons 190 can be mechanical buttons or touch buttons. Electronic device 100 can receive button inputs and generate key signal inputs related to user settings and function control of electronic device 100. Motor 191 can generate vibration alerts. Motor 191 can be used for incoming call vibration alerts or for touch vibration feedback. For example, touch operations applied to different applications (such as taking photos, playing audio, etc.) can correspond to different vibration feedback effects. Touch operations applied to different areas of the display screen 194 can also correspond to different vibration feedback effects. Different application scenarios (such as time reminders, receiving messages, alarm clocks, games, etc.) can also correspond to different vibration feedback effects. Touch vibration feedback effects can also be customized. Indicator 192 can be an indicator light, used to indicate charging status, battery level changes, or to indicate messages, missed calls, notifications, etc. SIM card interface 195 is used to connect a SIM card.

[0177] The sensor module 180 may include a touch sensor. A touch sensor, also known as a "touch device," can be disposed on the display screen 194. The touch sensor and the display screen 194 together form a touchscreen, also known as a "touchscreen." The touch sensor detects touch operations applied to or near it. The touch sensor can transmit the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through the display screen 194. In other embodiments, the touch sensor may also be disposed on the surface of the electronic device 100, in a different location than the display screen 194.

[0178] Figure 6 This is a software structure block diagram of the electronic device 100 according to an embodiment of the present invention.

[0179] A layered architecture divides software into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom: the application layer, the application framework layer, the Android runtime and system libraries, and the kernel layer.

[0180] The application layer can include a series of application packages. For example... Figure 6 As shown, the application package can include a gallery app, a clock app, etc. It's important to note that the gallery app or clock app here refers to the application installed using the aforementioned application installation package; that is, the layout files for the gallery app, clock app, etc., contain Views or ViewGroups with the aforementioned adaptive layout capabilities.

[0181] The application framework layer provides application programming interfaces (APIs) and a programming framework for applications in the application layer. The application framework layer includes some predefined functions. For example... Figure 6 As shown, the application framework layer may include an Activity Manager System (AMS), a Resource Manager, a Windows Manager System (WMS) (not shown in the figure), and a View System.

[0182] The Application Management System (AMS) controls all aspects of the application lifecycle and activity stack. The Resource Manager provides access to non-code-embedded resources such as strings, color settings, and user interface layouts. The Web Management System (WMS) is used to obtain screen size, determine the presence of a status bar, lock the screen, and capture screenshots. The View System provides a collection of views for creating the application's user interface.

[0183] Specifically, after the application (e.g., a clock application) starts, AMS responds to the touch event and launches a main Activity. In the main Activity, the `inflate` process in `setContentView` reads the attribute values ​​of the Views or ViewGroups contained in the display interface from the resource manager. In some examples, the layout file is read first in the resource manager, and then the corresponding interfaces are called through the layout file to write the attribute values ​​of each View and ViewGroup contained in the display interface. In other examples, interfaces can be called directly in the resource manager to write the attribute values ​​of each View and ViewGroup contained in the display interface. It is important to note that the attribute values ​​of Views and ViewGroups here include native Android attribute values ​​as well as attribute values ​​related to the adaptive layout capabilities extended in this application. Then, the window drawing process of the view system is entered, completing the drawing of the display interface through three main processes: Measure, Layout, and Draw. The measurement process includes the native Android measurement process and the measurement process related to adaptive layout capabilities extended in this application.

[0184] The Android Runtime consists of core libraries and a virtual machine. The Android runtime is responsible for the scheduling and management of the Android system.

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

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

[0187] System libraries can include multiple functional modules. For example: surface manager, media libraries, 3D graphics processing libraries (e.g., OpenGL ES), 2D graphics engines (e.g., SGL), etc.

[0188] The Surface Manager manages the display subsystem and provides fusion of 2D and 3D layers for multiple applications. The Media Library supports playback and recording of various common audio and video formats, as well as still image files. It supports multiple audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, and PNG. The 3D Graphics Processing Library implements 3D graphics drawing, image rendering, compositing, and layer processing. The 2D Graphics Engine is the drawing engine for 2D graphics.

[0189] The kernel layer is the layer between hardware and software. The kernel layer includes at least the display driver, etc.

[0190] After the application is installed, the electronic device 100 stores the layout files of each display interface of the application in its internal memory 121. When the electronic device 100 detects an operation to run the application, it launches the application and begins to draw the application's display interface according to the layout files of each display interface.

[0191] The following explanation uses an electronic device 100 running the Android system and its clock application as an example.

[0192] Please see Figure 7 The display interface 701 is the main screen interface displayed by the electronic device 100 (e.g., a mobile phone). In response to detecting that the user interacts with the clock application icon 702 on the display interface 701, the mobile phone launches the clock application and renders the clock application's homepage 703. The layout container containing the controls 704 in the homepage 703 is expandable. The controls 704 will change according to the changes in the layout container. The clock application's homepage can be understood as the first interface displayed after the clock application starts running.

[0193] It should also be noted that this explanation uses the example of opening the application and displaying the homepage. The method provided in this application also applies when the phone displays other interfaces (other than the homepage) in response to user actions after opening the application.

[0194] Specifically, after launching the clock app, the phone creates the corresponding Activity for the app, i.e., the main Activity. Then, it uses the `attach()` method in the Activity to generate a `PhoneWindow` instance. Within the `PhoneWindow` instance, a `DecroView` is created, and the screen parameters of the electronic device are obtained to determine the size and position (the positions of the four vertices, i.e., the positions of the top, bottom, left, and right borders) of both the `PhoneWindow` and the `DecroView`. Next, the `inflate` process of the `setContentView()` method of the `Window` is called to read the layout file of the clock app. This layout file includes the Views and ViewGroups contained in each display interface of the clock app (e.g., the home screen of the clock app), the hierarchical structure of these Views and ViewGroups, and the attributes that these Views and ViewGroups possess. The phone calls the corresponding interfaces to write the attribute values ​​of these Views and ViewGroups. Based on the hierarchical structure of the view tree in the layout file, the size and position of each ViewGroup and each View in the `DecroView` are determined level by level from the root. In other words, each View in the `DecroView` calculates its own size and position based on the size constraints passed from the parent layout container and its own configuration (i.e., the configured attribute values). Then, the phone draws all the views, thus obtaining the home page of the clock application.

[0195] It should be noted that the attributes of these Views and ViewGroups include native Android attributes as well as attributes related to the adaptive layout capabilities extended in this embodiment. The phone then enters the window drawing process, completing the drawing of the display interface through three main processes: Measure, Layout, and Draw.

[0196] The above measurements are used to calculate the actual size of the View. Starting with the `performMeasure` method, this includes the parameter `MeasureSpec`. `MeasureSpec` represents a 32-bit integer value; its high 2 bits represent the measurement mode (`SpecMode`), and its low 30 bits represent the size specification (`SpecSize`) under that measurement mode. In other words, `MeasureSpec` specifies how the View should be measured. The above layout steps determine the View's position within its parent layout container. This is achieved by the parent layout container obtaining the child View's position parameters, calling the child View's `layout` method, and passing in the position parameters. The above drawing steps are used to draw the controls, starting with the `performDraw` method. The layout and drawing processes can be found in existing technologies and will not be elaborated upon here.

[0197] It should be noted that for DecorView, its MeasureSpec is determined by the window size and its own layout parameters (LayoutParams); for ordinary View, its MeasureSpec is determined by the MeasureSpec of its layout container (i.e., the parent layout container) and its own LayoutParams.

[0198] In this embodiment, the window size is determined by the phone's screen parameters. These screen parameters include screen specification parameters and screen state parameters. The screen specifications include the screen dimensions (e.g., width and height). The screen specifications determine the actual area used by the phone to display application content. In some examples, the shape of the display also affects the actual area used by the electronic device to display application content. For example, when the display is a notch screen, the notch area is not used to display application content. Similarly, when the display is a curved screen, the curved edges are not used to display application content. The screen state includes whether the screen is in landscape or portrait mode. If the screen is foldable, it can be in a folded, semi-folded, or unfolded state. If the screen supports split-screen, it can be the size of the window currently displayed by the application. A semi-folded state refers to a foldable screen that supports multiple folds, where part of the screen is folded and part is unfolded.

[0199] The LayoutParams of the aforementioned View and ViewGroup include native Android system attributes and attributes related to adaptive layout capabilities extended in this embodiment (such as attributes related to extension capabilities). Therefore, during the measurement process, the mobile phone performs measurements based on the native Android system attributes of the View and ViewGroup in the layout file, and also needs to perform measurements based on the adaptive layout capability-related attributes of the View and ViewGroup in the layout file. The process of measuring based on the native Android system attributes of the View and ViewGroup in the layout file, and the process of layout based on the native Android system attributes of the View and ViewGroup in the layout file, can be found in existing technologies and will not be elaborated here.

[0200] The following describes in detail how developers design layout files for Views or ViewGroups that include adaptive layout capabilities, and how electronic devices implement adaptive layouts based on layout files when running applications, for each adaptive layout capability extended in the embodiments of this application.

[0201] 1) Extension capabilities

[0202] When developing an application, developers can add the dependency for the adaptive layout property package to set up ViewGroups with extensibility capabilities in the display interface. Specifically, developers can set the extensibility-related property values ​​of ViewGroups in the layout file (e.g., XML file) or by adding API calls in the Java source code file.

[0203] Table 1 shows examples of attributes related to extension capabilities.

[0204] Table 1

[0205]

[0206] It's important to note that developers can configure layout container properties by enabling general expansion capabilities and setting default spacing between child controls within the container. They can also enable the ability for the last displayed child control in the layout container to partially display content. Displaying partial content in a child control serves as a notification to the user that there are still undisplayed or incompletely displayed child controls within the current layout container, allowing the user to view these undisplayed controls through appropriate actions. Furthermore, size thresholds and spacing thresholds for child controls within the layout container can be set. Subsequently, when the electronic device runs the application and draws the child control, it will determine the number of child controls to display and adjust the spacing between them based on the layout container's size, as well as the size and spacing thresholds for the child controls.

[0207] The following section, in conjunction with the accompanying diagrams, details the meaning of each attribute related to the extension capability, as well as the display effects of the layout container and child controls.

[0208] In some embodiments, developers can enable the general stretching capability of the layout container and set the default spacing of the layout container. Then, the electronic device determines the actual number of child controls that the layout container can fully display based on the width of the layout container, the width of each of its child controls, and the default spacing.

[0209] For example, a layout container can be configured to include five horizontally arranged child controls, designated as child control A through child control E.

[0210] like Figure 8 As shown in Figure (1), this is a diagram of the layout container displayed by electronic device 1. At this time, since the width of the layout container displayed by electronic device 1 is greater than or equal to the sum of the widths of the child controls in the layout container plus the default spacing * (number of child controls - 1), the layout container on electronic device 1 can horizontally display all the child controls (child controls A to E), and the default spacing between the child controls is maintained. At this time, child controls A to E are fully displayed.

[0211] like Figure 8 As shown in Figure (2), this is a diagram of the layout container displayed by electronic device 2. At this time, because the width of the layout container displayed by electronic device 2 is less than the sum of the widths of the child controls in the layout container plus the default spacing * (number of child controls - 1), the layout container on electronic device 2 cannot fully display all the child controls. Therefore, electronic device 2 can determine the number of child controls that can be fully displayed on electronic device 2 based on the actual width of the layout container, the width of the child controls, and the default spacing. For example, the layout container on electronic device 2 can fully display a maximum of 4 child controls at a time, namely child controls A to D, with the default spacing maintained between the child controls. At this time, child controls A to D are fully displayed.

[0212] It should be noted that the layout container supports scrolling, meaning users can manipulate the layout container to view other child controls that are not currently displayed on the screen. For example, in response to a user swiping left on the layout container of electronic device 2, electronic device 2 displays as follows: Figure 8 The interface shown in (3) displays the child control E. It can be seen that at this time, the layout container of electronic device 2 can only display a maximum of 4 child controls.

[0213] In practical implementation, the layout container containing image controls, button controls, etc., can be configured with extension capabilities. When the width of the layout container changes, the number of image controls or button controls displayed can be automatically determined based on the width of the layout container, thereby meeting the display needs of electronic devices with different screen sizes. It is evident that the general extension capability of this solution enables electronic devices with different screen parameters to present different display effects based on the same layout settings, reducing the development and maintenance workload for developers while meeting the display needs of various types of electronic devices.

[0214] In other embodiments, developers can also enable the layout container's expandability, and set attributes such as size thresholds and spacing thresholds. The electronic device then determines whether the layout container can fully display all its child controls based on the layout container's width, the widths of each child control, and the default spacing. If not, the default spacing is reduced until the spacing threshold is reached. If, even after reducing to the spacing threshold, not all child controls are fully displayed, the actual number of child controls that can be fully displayed is determined based on the layout container's actual size, the widths of each child control, and the size threshold.

[0215] For example, a layout container can be configured to include five horizontally arranged child controls, designated as child control A through child control E.

[0216] like Figure 9 As shown in Figure (1), this is a diagram of the layout container displayed by electronic device 1. At this time, since the width of the layout container displayed by electronic device 1 is greater than or equal to the sum of the widths of the child controls in the layout container plus the default spacing * (number of child controls - 1), the layout container on electronic device 1 can horizontally display all the child controls (child controls A to E), and the default spacing between the child controls is maintained. At this time, child controls A to E are fully displayed.

[0217] Alternatively, although the width of the layout container displayed by electronic device 1 is less than the sum of the widths of the child controls in the layout container plus the default spacing * (number of child controls - 1), the width of the layout container displayed by electronic device 1 is greater than or equal to the sum of the widths of the child controls in the layout container plus the spacing threshold * (number of child controls - 1). Electronic device 1 can also adjust the spacing between child controls so that the layout container of electronic device 1 can fully display all child controls (child controls A to child controls E), and the spacing between child controls is greater than or equal to the spacing threshold.

[0218] like Figure 9 As shown in Figure (2), this is a diagram of the layout container displayed by electronic device 2. At this time, because the width of the layout container displayed by electronic device 2 is less than the sum of the widths of the child controls in the layout container plus the spacing threshold * (number of child controls - 1), the layout container on electronic device 2 cannot fully display all the child controls. Therefore, the electronic device needs to display only a portion of the child controls. Electronic device 2 can determine the number of child controls that the layout container can fully display based on the actual size of the layout container, the width of each child control, the size threshold, and the spacing threshold. For example, electronic device 2 determines that the layout container can display a maximum of 4 complete child controls (child controls A to D) and a portion of the content of 1 child control (a portion of the content of child control E) at a time, and the spacing between the child controls is greater than or equal to the spacing threshold.

[0219] like Figure 9 As shown in Figure (3), this is a diagram of the layout container displayed by the electronic device 3. At this time, since the width of the layout container displayed by the electronic device 3 is less than the sum of the widths of the child controls in the layout container plus the spacing threshold * (number of child controls - 1), the layout container on the electronic device 3 cannot display all the child controls. Therefore, the electronic device needs to display child controls that only show part of the content. The electronic device 3 can determine the number of child controls that the layout container can display based on the actual size of the layout container, the width of each child control, the size threshold, and the spacing threshold. For example, the electronic device 3 determines that the layout container can display a maximum of 3 complete child controls (child controls A to C) and part of the content of 1 child control (part of the content of child control D) at a time, and the spacing between the child controls is greater than or equal to the spacing threshold.

[0220] It should be noted that the layout container supports scrolling, meaning users can manipulate the layout container to view other child controls that are not currently displayed on the screen. For example, in response to a user swiping left on the layout container of electronic device 3, electronic device 3 displays as follows: Figure 9 The interface shown in (4) displays all the contents of sub-control D and part of the contents of sub-control E.

[0221] As can be seen from the above, the embodiments of this application can not only adaptively reduce the number of displayed child controls according to changes in the layout container, but also display a child control that only shows part of its content. The size of the part of the content displayed by this child control can be kept at a fixed value (i.e., a size threshold). In this way, the child control that only shows part of its content can be used to prompt the user that there are still undisplayed child controls in the layout container. In addition, keeping the size threshold at a fixed value can avoid the child controls displaying part of their content having different sizes due to different screen sizes, which would cause users a sense of confusion due to inconsistent display.

[0222] Below is an example layout file (XML file) that includes a layout container with extended capabilities. This container contains four child controls, each a linear layout container. Each linear layout container holds one image control and one text control. It's important to note that because the extended capability needs to support scrolling, the entire extended layout container must be placed within a ScrollView. Horizontal extensions should be placed within a HorizontalScrollView, and `layout_width` should be configured to `match_parent`. The same applies to vertical extensions.

[0223]

[0224]

[0225] The above embodiments demonstrate how developers design adaptive layouts for the display interface by setting attribute values ​​related to the extensibility of a View or ViewGroup in layout files (such as XML files). Alternatively, the extensibility attribute values ​​of a View or ViewGroup can be set by adding API calls to the Java source code files.

[0226] Table 2 shows examples of interfaces corresponding to the properties related to setting the extension capabilities of a View or ViewGroup.

[0227] Table 2

[0228]

[0229]

[0230] The above details the meaning of extended capabilities. Developers can configure layout files based on the layout design of each display interface in the application, combining extended capabilities, other adaptive layout capabilities, and basic layout capabilities (such as native Android attributes). These layout files, along with other application source code and resources, are then packaged into an installation package (e.g., an APK file) and uploaded to an app store. Electronic devices download this installation package from the app store and install the application. The following details how an electronic device implements adaptive layout based on the aforementioned layout files when running the application.

[0231] Specifically, the phone executes the following for each layout container in the layout file: Figure 10A The measurement process shown includes the following steps:

[0232] S1001, Read the layout parameters of the layout container.

[0233] Read the layout parameters of the layout container from the layout file (e.g., XML file). The layout parameters of the layout container include the hierarchical relationship of the layout container in the display interface (including the parent layout container, child controls, etc. of the layout container), the size and position of the layout container (the size and position are not necessarily fixed values, but can be a constraint), the inner margin of the layout container, the size and spacing of the child layout containers and controls contained in the layout container, and other layout information.

[0234] For example, the layout container here can be a layout container at any level in the display interface. For instance, the layout container here could be a layout container at a higher level in the display interface, such as... Figure 1 The content controls described herein. The electronic device obtains its own screen parameters (including screen type, screen size, screen state, etc.) to determine the display size (i.e., dimensions) and position of the content controls. For example, the layout container here could also be a layout container located in the middle layer of the display interface, such as control group 3. Then, the electronic device, based on its own screen parameters, according to... Figure 1 The hierarchical relationship shown determines the size and position of each layout container from top to bottom, until the display size (i.e., dimensions) and display position of control group 3 are determined.

[0235] S1002. Determine whether the layout container has its extension capability enabled.

[0236] If the layout container is found to have neither extended nor general extension capabilities enabled according to the layout file, then the measurement can be performed using the native measurement process of the Android system. If the layout container has not enabled extended capabilities but has enabled general extension capabilities, the phone determines the number of displayed child controls based on the size of the layout container and the default spacing, and arranges them accordingly. In this case, all child controls displayed on the phone are fully visible. If the layout container has enabled extended capabilities, then step S1003 is executed.

[0237] It should be noted that the attribute values ​​for enabling extensibility (general extensibility and extended extensibility) included in the layout file can be set by the developer during application development, and the extensibility of the layout container is fixed to be on or off. In some other embodiments, the developer can also set the extensibility of the layout container to be configurable by the user during application development. In this case, the user can enable or disable the extensibility of the layout container.

[0238] S1003, Calculate the number N1 of child controls that the layout container can fully display.

[0239] Specifically, the number of child controls N1 that can be displayed is initially determined based on the size of the layout container, the size of each child control, the default spacing, and the size threshold. For example, N1 (rounded) = (width of layout container - size threshold - padding of layout container) / (width of child control + default spacing).

[0240] S1004. Calculate the remaining space of the layout container based on N1.

[0241] For example, the remaining space of the layout container (± double precision type) = (width of the layout container - size threshold - inner margin of the layout container) - N1 * (width of child controls + default spacing).

[0242] S1005. Calculate the spacing change △M between child controls based on N1 and the remaining space of the layout container.

[0243] For example, the change in spacing between child controls △M (± double precision type) = remaining space of the layout container / N1.

[0244] S1006. Calculate the spacing value M based on the spacing change △M between child controls and the default spacing.

[0245] For example, the spacing value M (± double precision type) = the change in spacing between child controls △M + default spacing.

[0246] S1007. Determine whether the spacing value M is greater than or equal to the spacing threshold set in the layout file.

[0247] If the spacing value M is less than the spacing threshold, the number of child controls that can be displayed, N1, is reduced by one, and then the spacing between the child controls is adjusted again, i.e., step S1008 is executed. If the spacing value M is greater than or equal to the spacing threshold, the current child controls can be arranged according to the spacing value, and step S1009 is executed.

[0248] S1008, N1 = N1-1. Then, execute step S1004.

[0249] S1009. Calculate the number Na of child controls whose spacing needs to be widened and the number Nb of child controls whose spacing needs to be narrowed.

[0250] Na+Nb=N1.

[0251] S1010, Update the spacing between N1 child controls.

[0252] It should be noted that in this embodiment, the remaining space in the layout container, excluding the space for displaying child controls, the space for the display size threshold, and the inner margin space reserved by the layout container, needs to be evenly distributed as the spacing between each child control (including child controls displaying content). Since electronic device displays are in pixels, it is generally not possible to strictly divide the remaining space evenly. Therefore, after obtaining a spacing value that meets the condition (not less than the spacing threshold), the spacing between child controls can be fine-tuned to ensure that the spacing between each child control fills the remaining space. For example, rounding the obtained spacing value to the nearest pixel up yields the widened spacing. In this case, the number of child controls with widened spacing, Na = the decimal part of the spacing value * N1. Rounding the obtained spacing value to the nearest pixel down yields the narrowed spacing. In this case, the number of child controls with narrowed spacing, Nb = N1 - Na.

[0253] For example, based on the above steps, the number of child controls to be displayed is 5, and the spacing is 3.2 pixels. Rounding the spacing value up gives an adjusted spacing value of 4. The number of child controls whose spacing needs to be widened = (3.2-3)*5 = 1, meaning one child control needs a spacing of 4 pixels. Rounding the spacing value down gives an adjusted spacing value of 3 pixels. The number of child controls whose spacing needs to be narrowed = 5-1 = 4, meaning 4 child controls need a spacing of 3 pixels. This application does not specifically limit how to determine which child controls need widening and which need narrowing their spacing. Of course, other methods can also be used to adjust the spacing between child controls in the layout container.

[0254] This ensures that the spacing between each child control in the layout container is approximately equal, with the error kept within ±1 pixel.

[0255] It should be noted that in this embodiment, the layout container displays part of the content of the N1+1th child control.

[0256] It's also important to note that this explanation assumes all child controls within the layout container have equal widths. If the child controls have unequal widths, the expansion capability will be disabled by default. That is, the layout container will not display child controls that only contain partial content. Specifically, electronic devices may need to calculate the number of child controls that the layout container can fully display based on the arrangement order of all child controls within the layout container, the width of each child control, and the default spacing. The child controls that can be fully displayed will then be arranged according to the default spacing.

[0257] It is understandable that electronic devices with different screen sizes (such as mobile phones and tablets) use the same layout file (including layout containers with stretchable capabilities), as described above. Figure 10A The measurement process will result in different layout effects for the final application interface.

[0258] For example, a mobile phone screen has a width of 720 pixels, while a tablet screen has a width of 1280 pixels. Both phones and tablets use the same installation package to install the app store. The layout file for the app store's homepage includes a layout container for showcasing featured apps, and this container has its expansion capability enabled. Furthermore, this layout container includes 10 horizontally arranged child controls, each corresponding to an app icon. Each child control is 120 pixels wide, with a default spacing of 40 pixels and a size threshold (i.e., the width of the partially displayed child control) of 80 pixels. Additionally, the width of this layout container is equal to the width of the device screen, and its padding is 0 pixels.

[0259] So, when the phone is displaying the homepage of the app store, the above is executed. Figure 10A During the measurement process, the number of child controls that the phone can display is calculated as follows: N1 = (width of layout container - size threshold - inner margin of layout container) / (width of child control + default spacing) = (720 - 80 - 0) / (120 + 40) = 4. In other words, the phone can display 4 fully displayed child controls and 1 partially displayed child control. The phone displays as follows... Figure 10B The interface 101 shown in (1) includes four fully displayed application icons and one partially displayed application icon in the layout container 102.

[0260] When the tablet is displaying the homepage of the app store, the above is executed. Figure 10ADuring the measurement process, the number of child controls that the tablet can display is calculated as follows: N1 = (width of layout container - size threshold - inner margin of layout container) / (width of child control + default spacing) = (1280 - 80 - 0) / (120 + 40) = 7.5. In other words, the tablet can display 7 fully displayed child controls and 1 partially displayed child control. The tablet displays as follows... Figure 10B The interface 103 shown in (2) includes 7 fully displayed application icons and 1 partially displayed application icon in the layout container 104.

[0261] like Figure 11 The diagram illustrates another embodiment of the adaptive layout method for an application interface provided in this application. During application development, developers can set extension capability-related attributes in a layout file, such as an XML file. For example, enabling extension capabilities, setting default spacing, setting spacing thresholds, enabling extended extension capabilities, and setting size thresholds. Subsequently, developers package the layout file, along with other application code and resources, into an installation package and upload it to an app store. Users can then download the installation package from the app store and install the application using their electronic devices. When the application runs on the electronic device, the layout module parses the extension capability-related attributes from the layout file, obtains the attribute values, and sends these values ​​to the extension module. The layout module then performs measurements and initiates the extension capability process, calculating parameters for relevant controls, such as control dimensions, based on the extension capability-related attribute values. The layout module performs layout based on the updated control parameters to obtain the positions of controls in a specific display interface within the application. Finally, the electronic device can draw and display this specific display interface. In a specific example, the layout module can be the measurement and layout module in the native view system of the Android system. The extension module can be added to the measurement module of the view system, and can perform the above-mentioned functions. Figure 10A The relevant steps in the process.

[0262] (ii) Proportion Capability

[0263] When developing an application, developers can add the dependency for the adaptive layout attribute package to set proportionate layout containers (i.e., ViewGroups) in the display interface. Specifically, developers can set the proportionate attribute values ​​of ViewGroups in the layout file (e.g., XML file) or by adding an API call in the Java source code file.

[0264] Table 3 shows examples of attributes related to percentage ability.

[0265] Table 3

[0266]

[0267] It should be noted that developers can enable the proportion capability of a layout container by setting its properties, and set proportion values ​​for each child control (i.e., the View or ViewGroup stored in the layout container). Subsequently, when the electronic device runs the application and draws the child controls in the layout container, it will draw each child control in the layout container according to the size of the layout container and the proportion values ​​of the child controls.

[0268] The following section, with reference to the accompanying diagrams, details the meaning of each attribute related to the proportion capability, as well as the display effects of the layout container and its child controls.

[0269] like Figure 12 As shown in (1), the horizontal ratio of the child control to the layout container refers to the ratio of the width (X) of the child control to the total width (Y) of the layout container, i.e., X / Y. The vertical ratio of the child control to the layout container refers to the ratio of the height (R) of the child control to the total height (T) of the layout container, i.e., R / T.

[0270] When setting the properties of the layout container, set the property that enables proportion to true. Then, set the proportion value to M (where M is a percentage) for each child control. The specific meaning of the proportion value M (whether it's a horizontal or vertical proportion) can be determined based on the layout direction of the layout container.

[0271] For example, if the layout container's layout direction is horizontal (or lateral), then the percentage value M represents the horizontal percentage of the child controls, that is, the percentage of the child controls' width relative to the total width of the layout container. Therefore, when the width of the layout container changes, the width of the child controls within the layout container will be scaled until the scaled width of the child controls maintains a percentage of the total width of the layout container at a value of M. However, the height of the child controls will not change with the height of the layout container. For example, compared to... Figure 12 The dimensions of the container layout shown in (1) are as follows: Figure 12 In the layout container shown in (2), the width changes (becomes Y'), but the height remains unchanged. Therefore, the width of the child controls changes accordingly to X', where X' = M * Y'; the height of the child controls remains unchanged at R. For example, compared to... Figure 12 The dimensions of the container layout shown in (1) are as follows: Figure 12The width of the layout container shown in (3) changes (becomes X'), and its height also changes (becomes T'). Therefore, the width of the child control changes accordingly to X', where X' = M * Y', and the height of the child control remains unchanged at R. It should be noted that this is based on the layout file not having any layout parameters that change the height of the child control. In summary, the proportion capability only affects the size of the child control in the layout direction of the layout container (horizontal in this example), and does not affect the size of the child control in other directions (e.g., vertical in this example).

[0272] If the layout container's orientation is vertical (or vertical), then the ratio M represents the vertical proportion of the child controls, that is, the percentage of the child controls' height relative to the total height of the layout container. Therefore, when the height of the layout container changes, the height of the child controls within the layout container will be scaled until the scaled height of the child controls maintains a vertical proportion of the layout container's total width, M. However, the width of the child controls will not change with the width of the layout container. For example, compared to... Figure 12 The dimensions of the container layout shown in (1) are as follows: Figure 12 The height of the layout container shown in (4) changes (becomes T'), while the width remains unchanged. Therefore, the height of the child controls changes accordingly to R', where R' = M * T', and the width of the child controls remains unchanged at X. For example, compared to... Figure 12 The dimensions of the container layout shown in (1) are as follows: Figure 12 The height of the layout container shown in (5) changes (becomes T'), and its width also changes (becomes Y'). Therefore, the height of the child control changes accordingly to R', and R' = M * T', while the width of the child control remains unchanged at X. It should be noted that this is based on a layout file without any layout parameters that change the width of the child control. In summary, the proportion capability only affects the size of the child control in the layout direction of the layout container (vertical in this example), and does not affect the size of the child control in other directions (e.g., horizontal in this example).

[0273] It should be noted that the above explanation uses only one parameter, the proportion value M, as an example. In this example, the specific meaning of the proportion value M (whether it is the proportion value in the horizontal direction or the proportion value in the vertical direction) can be determined according to the layout direction of the layout container. In other examples, different parameters can be set to represent the proportion value in the horizontal direction (e.g., proportion value P) and the proportion value in the vertical direction (e.g., proportion value Q), respectively. This application embodiment does not limit this.

[0274] For example, developers can set the percentage value for child controls to 50%. Figure 12As shown in Figure (1), the layout container on the electronic device 1 has a size of 1080*540 (width*height, in pixels), and the child control has a size of 540*270. At this time, the horizontal and vertical proportions of the child control both reach exactly 50%.

[0275] In some examples, the layout container's layout orientation is set to landscape. For example... Figure 12 As shown in (2), if the size of the layout container on electronic device 2 is 2160*540 (in pixels), then the height of the layout container on electronic device 2 is the same as the height of the layout container on electronic device 1, but the width is increased. Therefore, based on the horizontal proportion (50%), the child control is scaled, and the size of the child control is calculated to be 1080*270 (in pixels). Figure 12 As shown in (3), if the size of the layout container on electronic device 3 is 2160*1080 (in pixels), then the width and height of the layout container on electronic device 3 are both greater than those on electronic device 1. Therefore, based on the horizontal proportion (50%), the child control is scaled and the size of the child control is calculated to be 1080*270 (in pixels).

[0276] In other examples, the layout container's layout orientation is set to vertical. For example... Figure 12 As shown in (4), if the size of the layout container on electronic device 4 is 1080*1080 (in pixels), then the height of the layout container on electronic device 4 is the same as the width of the layout container on electronic device 1, but the height has increased. Therefore, based on the vertical proportion (50%), the child control is scaled, and the size of the child control is calculated to be 540*540 (in pixels). Figure 12 As shown in (5), if the size of the layout container on the electronic device 5 is 2160*1080 (in pixels), then the height of the layout container on the electronic device 5 is greater than the width and height of the layout container on the electronic device 1. Therefore, based on the vertical proportion (50%), the child control is scaled and the size of the child control is calculated to be 540*540 (in pixels).

[0277] In practical implementation, the proportion capability can be set for the layout container containing text controls, button controls, image controls, etc. When the width or height of the layout container changes, the width or height of the text controls, button controls, or image controls can be automatically adjusted accordingly, thus meeting the display requirements of electronic devices with different screen sizes. It is evident that the proportion capability of this solution enables electronic devices with different screen parameters to present different display effects based on the same layout settings, reducing the development and maintenance workload for developers while meeting the display needs of various types of electronic devices.

[0278] The above embodiment is illustrated using a child control within a layout container. When the layout container includes multiple child controls, a percentage value can be set for each individual child control, or a percentage value can be set for some of the child controls.

[0279] In some embodiments, a percentage value is set for each of the multiple child controls. The scaling method for each child control in a specified direction can refer to the scaling method for child controls in a specified direction in the above embodiments, and will not be repeated here. It should be noted that if the sum of the percentage values ​​of all child controls is greater than 100%, truncation will occur, meaning that not all child controls will be displayed in the layout container. In some examples, when developers set the percentage values ​​of child controls, if the sum of the set percentage values ​​is greater than 100%, developers can be prompted to change the percentage values ​​of some child controls, or they can be prompted to set other capabilities of the layout container, such as hiding capabilities. In other examples, when the electronic device displays the layout container, users can be prompted to adjust the interface. If the sum of the percentage values ​​of all child controls is less than 100%, white space will appear. In other examples, users can be prompted to select or default to increasing the spacing between child controls.

[0280] In other embodiments, when some child controls in the layout container have percentage values ​​set while others do not, the dimensions of each child control with a set percentage value in a specified direction can be calculated first. Then, the remaining space in the layout container can be allocated to the child controls without a set percentage value. For example, after determining the dimensions of each child control with a set percentage value in a specified direction, the remaining space in the layout container can be evenly allocated to the child controls without a set percentage value.

[0281] For example, such as Figure 13 As shown in Figure (1), the layout container includes three child controls: child control 1, child control 2, and child control 3. The layout direction of the layout container is horizontal.

[0282] like Figure 13As shown in (2), if a percentage value is set for each of the child controls 1 to 3, for example, 20%, then when the width of the layout container changes, the percentage of each of the child controls 1 to 3 to the width of the layout container will remain at 20%.

[0283] like Figure 13 As shown in (3), if a percentage value is set for child control 1, for example, to 20%, while no percentage values ​​are set for child controls 2 and 3, then when the width of the layout container changes, the percentage value of child control 1 in the width of the layout container is maintained at 20%. Then, the remaining space (80%) in the layout container is evenly distributed to child controls 2 and 3, that is, child controls 2 and 3 each occupy 40% of the width of the layout container. It can be noted that in this example, the percentage values ​​of child controls 1, child controls 2, and child controls 3 are exactly equal to 100%. That is, there is no spacing between the child controls. In some examples, when the developer sets the percentage values ​​of the child controls, if the sum of the set percentage values ​​is equal to 100%, the developer can be prompted that there is no spacing between the child controls. If the developer wants there to be spacing between the child controls, the sum of the set percentage values ​​for each child control is less than 100%.

[0284] The following example illustrates the application of the proportion capability of layout containers by showing an interface where one layout container with proportion capability enabled is nested within another layout container with proportion capability enabled.

[0285] like Figure 14 The interface shown in (1) includes child controls 1401 and 1402 in the layout container 1400. The layout container 1400 has its proportion capability enabled, and its layout direction is vertical. The proportion value A of the child control 1401 is set (for example, 60%). At this time, the proportion value of the child control 1401 is the vertical proportion value, that is, the height of the child control 1401 will change with the height of the layout container 1400, and the percentage of the height of the child control 1401 to the height of the layout container 1400 is kept at proportion A.

[0286] In this context, child controls 1401 and 1402 are essentially ViewGroups, i.e., layout containers, also known as layout container-type controls. Child control 1402 includes previous track, play, next track, and more play controls. Child control 1401 also has percentage-based capabilities enabled, and its layout direction is horizontal. Child control 1401 includes child control 1403 (an image control) and child control 1404 (multiple text controls). The percentage value B of child control 1403 is set (e.g., 30%). At this point, the percentage value of child control 1403 is the horizontal percentage value, meaning that the width of child control 1403 will change with the width of the layout container 1401, and the percentage of the width of child control 1403 to the layout width of the layout container 1401 remains at percentage B.

[0287] Therefore, on the one hand, the height of child control 1403 changes with the height of layout container 1400; on the other hand, the width of child control 1403 changes with the width of child control 1401, while the width of child control 1401 changes with the layout container 1400. Thus, while the width and height of child control 1403 change with the layout container 1400, the aspect ratio of child control 1403 may change. In other words, the method of changing the width and height of child control 1403 here differs from the method of scaling child controls while maintaining their aspect ratio, which can meet more display requirements of the application interface.

[0288] For example, such as Figure 14 As shown in (1), if the size of the layout container 1400 on the electronic device 1 is 1080*540 (width*height, in pixels), the size of the sub-control 1401 (i.e., the sub-layout container) is 1080*324 (in pixels) (wherein, the height of the sub-control 1401 = (540*60%) pixels). The size of the sub-control 1402 is 1080*216 (in pixels) (wherein, the height of the sub-control 1402 = (540-324) pixels). The size of the sub-control 1403 is 324*324 (in pixels) (wherein, the width of the sub-control 1403 = (1080*30%) pixels). The size of the sub-control 1404 is 756*324 (in pixels).

[0289] like Figure 14As shown in (2), if the size of the layout container 1400 on the electronic device 2 is 1280*540 (width*height, in pixels), the size of the sub-control 1401 (i.e., the sub-layout container) is 1280*324 (in pixels) (where the height of the sub-control 1401 = (540*60%) pixels). The size of the sub-control 1402 is 1280*216 (in pixels) (where the height of the sub-control 1402 = (540-324) pixels). The size of the sub-control 1403 is 384*324 (in pixels) (where the width of the sub-control 1403 = (1280*30%) pixels). The size of the sub-control 1404 is 896*324 (in pixels).

[0290] like Figure 14 As shown in (3), if the size of the layout container 1400 on the electronic device 3 is 1080*640 (width*height, in pixels), the size of the sub-control 1401 (i.e., the sub-layout container) is 1080*384 (in pixels) (where the height of the sub-control 1401 = (640*60%) pixels). The size of the sub-control 1402 is 1080*256 (in pixels) (where the height of the sub-control 1402 = (640-384) pixels). The size of the sub-control 1403 is 324*384 (in pixels) (where the width of the sub-control 1403 = (1080*30%) pixels). The size of the sub-control 1404 is 756*384 (in pixels).

[0291] like Figure 14 As shown in (4), if the size of the layout container 1400 on the electronic device 4 is 1280*640 (width*height, in pixels), the size of the sub-control 1401 (i.e., the sub-layout container) is 1280*384 (in pixels) (where the height of the sub-control 1401 = (640*60%) pixels). The size of the sub-control 1402 is 1280*256 (in pixels) (where the height of the sub-control 1402 = (640-384) pixels). The size of the sub-control 1403 is 384*384 (in pixels) (where the width of the sub-control 1403 = (1280*30%) pixels). The size of the sub-control 1404 is 896*384 (in pixels).

[0292] Below is an example of a layout file (xml file) for a layout container 1400.

[0293]

[0294]

[0295] The above embodiments demonstrate how developers design adaptive layouts for the display interface by setting attribute values ​​related to the proportion of a View or ViewGroup in layout files (such as XML files). Alternatively, the proportion-related attribute values ​​of a View or ViewGroup can be set by adding an API call to the Java source code file.

[0296] Table 4 shows examples of interfaces corresponding to the attribute values ​​related to setting the proportion of a View or ViewGroup.

[0297] Table 4

[0298]

[0299] The above details the meaning of proportion capabilities. Developers can configure layout files based on the layout design of each display interface in the application, combining proportion capabilities, other adaptive layout capabilities, and basic layout capabilities (such as native Android attributes). These layout files, along with other application source code and resources, are then packaged into an installation package (e.g., an APK file) and uploaded to an app store. Electronic devices download this installation package from the app store and install the application. The following details how an electronic device implements adaptive layout based on the aforementioned layout files when running the application.

[0300] Specifically, the phone executes the following for each layout container in the layout file: Figure 15A The measurement process shown includes the following steps:

[0301] S1501. Determine the open percentage capability of the layout container and obtain the layout parameters of the child controls in the layout container.

[0302] Based on the layout parameters of the layout container in the layout file, determine whether the layout container has its proportion capability enabled, and whether the layout direction within the layout container is horizontal or vertical. Further, obtain the child controls contained within the layout container, and their configured proportion values. If the layout container's direction is horizontal, the child control's proportion value is the horizontal proportion value. If the layout container's direction is vertical, the child control's proportion value is the vertical proportion value.

[0303] At this point, the remaining space of the layout container in the layout direction = width / height of the layout container - left / right / top / bottom inner margins. Specifically, if the layout container is horizontal, then the remaining width of the layout container = width of the layout container - left / right inner margins of the layout container. If the layout container is vertical, then the remaining height of the layout container = height of the layout container - top / bottom inner margins of the layout container.

[0304] S1502. Is the current percentage value of the child control greater than zero? If yes, proceed to step S1503; otherwise, proceed to step S1505.

[0305] S1503. Determine the size of the current child control based on the layout direction of the layout container.

[0306] The layout direction refers to the direction in which the child controls are arranged within the layout container, including horizontal and vertical directions. If the layout container's layout direction is horizontal, then the width of the current child control = its proportion * the width of the layout container. If the layout container's layout direction is vertical, then the height of the current child control = its proportion * the height of the layout container.

[0307] S1504, Update the remaining space of the layout container.

[0308] If the layout container is positioned horizontally, then the remaining width of the layout container = the width of the layout container - the width of the current child control - the left and right padding. If the layout container is positioned vertically, then the remaining height of the layout container = the height of the layout container - the height of the current child control - the top and bottom padding.

[0309] Then, proceed to step S1506.

[0310] S1505: Record the current child control as one that has no configured percentage value or whose configured percentage value is invalid.

[0311] S1506. Determine whether all child controls in the layout container have been traversed. If all child controls have been traversed, proceed to step S1507; otherwise, proceed to step S1510.

[0312] S1507. Determine whether the remaining space of the layout container is greater than zero. If yes, proceed to step S1508; otherwise, proceed to step S1509.

[0313] S1508. Distribute the remaining space of the layout container evenly to child controls that have not been configured with a percentage value or whose configured percentage value is invalid.

[0314] Measurement complete.

[0315] S1509. The size of a child control that has not been configured with a percentage value or whose configured percentage value is invalid is zero.

[0316] Measurement complete.

[0317] S1510. Determine the next child control as the current child control. Then, execute step S1502.

[0318] This provides a method for measuring sub-controls within a layout container that include sub-controls with set percentage values ​​and sub-controls without set percentage values. It is understood that this example illustrates how the remaining space in the layout container in the layout direction (total width / height of the layout container - left / right / top / bottom inner margins - sum of widths / heights of sub-controls with set percentage values) is evenly distributed to sub-controls without set percentage values. Of course, other rules can also be used to distribute the remaining space in the layout direction to sub-controls without set percentage values; this embodiment does not limit this approach.

[0319] It is understandable that electronic devices with different screen sizes (such as mobile phones and tablets) use the same layout file (including layout containers with aspect ratio settings), according to the above. Figure 15A The measurement process will result in different layout effects for the final application interface.

[0320] For example, a mobile phone screen has a width of 720 pixels, while a tablet screen has a width of 1280 pixels. Both the mobile phone and tablet use the same installation package to install the music application. The layout file for the music application's homepage includes a layout container for displaying the leaderboards, which has its proportion enabled. This layout container includes a horizontally laid-out child control 1 (displaying a poster for leaderboard 1), a child layout container (displaying information about the top 3 songs), and a child control 2 (informing the user that there are other leaderboards to follow). The proportion of child control 1 is set to 30%, the child layout container has no proportion set, and the proportion of child control 2 is set to 15%.

[0321] So, when the phone is rendering the homepage of the music app, the above steps are performed on the layout container that displays the leaderboard. Figure 15A During the measurement process, the phone calculates the width of the layout container as equal to the phone screen width, which is 720 pixels. Therefore, the width of child control 1 is calculated as: layout container width * child control 1's percentage = 720 * 30% = 216 pixels. Then, the width of child control 2 is calculated as: layout container width * child control 2's percentage = 720 * 15% = 108 pixels. The width of the child layout container is calculated as: layout container width - sum of the determined child control widths = 720 - (216 + 108) = 396 pixels. The phone displays as follows... Figure 15B The interface 151 shown in (1) has a width of 216 pixels for child control 153 in layout container 152, a width of 108 pixels for child control 155, and a width of 396 pixels for child layout container 154.

[0322] When the tablet is rendering the homepage of the music app, the above is executed for the layout container displaying the leaderboard. Figure 15ADuring the measurement process, the tablet computer calculates the width of the layout container as equal to the tablet's screen width, which is 1280 pixels. Therefore, the width of child control 1 is calculated as the width of the layout container multiplied by the percentage of child control 1, which equals 1280 * 30% = 384 pixels. The width of child control 2 is then calculated as the width of the layout container multiplied by the percentage of child control 2, which equals 1280 * 15% = 192 pixels. The total width of the child layout container is then calculated as 1280 - 384 - 192 = 704 pixels. The tablet computer displays the layout as follows: Figure 15B The interface 156 shown in (2) has a width of 384 pixels for child control 158, a width of 192 pixels for child control 150, and a width of 704 pixels for child layout container 159.

[0323] like Figure 16 The diagram illustrates another embodiment of the application interface adaptive layout method provided in this application. During application development, developers can set proportion-related attributes in a layout file, such as an XML file. For example, they can enable proportion capabilities, set the layout direction of the layout container, and set the proportion values ​​of child controls. Subsequently, developers package the layout file, along with other application code and resources, into an installation package and upload it to an application marketplace. Users can then download the installation package from the application marketplace and install the application using their electronic devices. When the application runs on the electronic device, the layout module parses the proportion-related attributes from the layout file, obtains the attribute values, and sends these values ​​to the proportion module. The layout module then performs measurements and initiates the proportion process, calculating parameters for relevant controls, such as control dimensions, based on the proportion-related attribute values. The layout module performs layout based on the updated control parameters to obtain the positions of controls in a specific display interface within the application. Finally, the electronic device can draw and display this specific display interface. In a specific example, the proportion module can perform the above... Figure 15A The relevant steps are as follows. The layout module can be the measurement module and layout module in the native view system of Android. The proportion module is a new functional module added in this application to the measurement module in the native view system of Android.

[0324] (iii) Ability to distribute equally

[0325] When developing an application, developers can add the dependency for the adaptive layout property package to set a layout container (i.e., ViewGroup) with even distribution capabilities in the display interface. Specifically, developers can set the ViewGroup's even distribution capability-related property values ​​in the layout file (e.g., XML file) or by adding an API call in the Java source code file.

[0326] Table 5 shows examples of attributes related to the ability to distribute equally.

[0327] Table 5

[0328]

[0329] It should be noted that developers can enable the even distribution capability of a layout container by setting its properties, and can also set the even distribution type, spacing threshold A, and spacing threshold B. Subsequently, when the electronic device runs the application and draws the child controls in the layout container, it will determine the spacing between the child controls based on the size of the layout container and the size of the child controls, and then draw each child control in the layout container.

[0330] The following section, with reference to the accompanying diagrams, details the meaning of each attribute related to the ability to distribute evenly, as well as the display effects of the layout container and its child controls.

[0331] For example, the ability to divide equally may include a first type of ability to divide equally and a second type of ability to divide equally.

[0332] The ability to distribute space evenly can be understood as the ability to evenly allocate the remaining space in the layout container (after subtracting the space occupied by each child control) in a specified direction as spacing between child controls. Specifically, when the layout container has no padding, the available space equals the size of the layout container. When the layout container has padding, the available space equals the size of the layout container minus the padding.

[0333] The first type of equal distribution capability mentioned above means that it is not necessary to allocate spacing for the side of the first child control that is closest to the layout container in the layout direction, and for the side of the last child control that is closest to the layout container in the layout direction.

[0334] For example, the layout container is laid out horizontally (or laterally), and the first type of even distribution capability is enabled. In some examples, the layout container does not have padding, and the available width of the layout container is the width of the layout container itself. Child controls displayed within the layout container can be, for example,... Figure 17The positional relationship is shown in (1). The left edge of the first child control coincides with the left edge of the layout container, the right edge of the last child control in the layout container coincides with the right edge of the layout container, and the spacing between adjacent child controls is equal or approximately equal. In other examples, the layout container sets inner margins in the layout direction, such as the left inner margin (or left side inner margin, left inner margin) and the right inner margin (or right side inner margin, right inner margin). In this case, the available width of the layout container is the width of the layout container - the left inner margin - the right inner margin. Then the child controls displayed by the layout container can be as follows: Figure 17 The positional relationship is shown in (2). Among them, the distance between the left edge of the first child control and the left edge of the layout container is equal to the distance between the left inner margin of the layout container, the distance between the right edge of the last child control in the layout container and the right edge of the layout container is equal to the distance between the right inner margin of the layout container, and the spacing between adjacent child controls is equal or approximately equal.

[0335] For example, the layout container's layout direction is vertical (or vertical), and the layout container's first type of even distribution capability is enabled. In some examples, the layout container does not have padding, and the available height of the layout container is the height of the layout container itself. Child controls displayed within the layout container can be, for example... Figure 18 The positional relationship is shown in (1). The top edge of the first child control coincides with the top edge of the layout container, the bottom edge of the last child control in the layout container coincides with the bottom edge of the layout container, and the spacing between adjacent child controls is equal or approximately equal. In other examples, the layout container sets padding in the layout direction, such as top padding (or upper padding) and bottom padding (or lower padding). In this case, the available height of the layout container is the height of the layout container - top padding - bottom padding. Then the child controls displayed by the layout container can be as follows: Figure 18 The positional relationship is shown in (2). Among them, the distance between the top edge of the first child control and the top edge of the layout container is equal to the top inner margin of the layout container, the distance between the bottom edge of the last child control in the layout container and the bottom edge of the layout container is equal to the bottom inner margin of the layout container, and the spacing between adjacent child controls is equal or approximately equal.

[0336] The second type of equal distribution capability mentioned above refers to the need to allocate spacing for the side of the first child control that is closest to the layout container in the layout direction, and for the side of the last child control that is closest to the layout container in the layout direction.

[0337] For example, the layout container is laid out horizontally, and the second type of even distribution capability is enabled. In some examples, the layout container has no padding, and the available width of the layout container is the width of the layout container itself. Child controls displayed within the layout container can be, for example,... Figure 17 The positional relationship is shown in (3). The spacing between the left edge of the first child control and the left edge of the layout container, the spacing between the right edge of the last child control in the layout container and the right edge of the layout container, and the spacing between adjacent child controls are all equal or approximately equal. In other examples, the layout container sets inner margins in the layout direction, such as left inner margin and right inner margin. In this case, the available width of the layout container is the width of the layout container - left inner margin - right inner margin. Therefore, the child controls displayed by the layout container can be as follows: Figure 17 The positional relationship is shown in (4). The horizontal spacing between adjacent child controls is equal or approximately equal, denoted as spacing C. Furthermore, the distance between the left edge of the first child control and the left edge of the layout container is equal to the left inner margin of the layout container plus spacing C, and the distance between the right edge of the last child control in the layout container and the right edge of the layout container is equal to the right inner margin of the layout container plus spacing C.

[0338] For example, the layout container is positioned vertically, and the second type of even distribution capability is enabled. In some examples, the layout container has no padding, and its available height is its height. Child controls displayed within the layout container can be, for example... Figure 18 The positional relationship is shown in (3). The distance from the top edge of the first child control to the top edge of the layout container, the distance from the bottom edge of the last child control in the layout container to the bottom edge of the layout container, and the spacing between adjacent child controls are all equal or approximately equal. In other examples, the layout container has padding in the layout direction, such as top padding and bottom padding. In this case, the available height of the layout container = the height of the layout container - top padding - bottom padding. Therefore, the child controls displayed by the layout container can be as follows: Figure 18 The positional relationship is shown in (4). The vertical spacing between adjacent child controls is equal or approximately equal, denoted as spacing D. Furthermore, the distance between the top edge of the first child control and the top edge of the layout container is equal to the top inner margin of the layout container plus spacing D, and the distance between the bottom edge of the last child control in the layout container and the bottom edge of the layout container is equal to the bottom inner margin of the layout container plus spacing D.

[0339] In one specific implementation, an even distribution capability can be set for a layout container containing multiple identical or similar sub-controls. Sub-controls can be, for example, text controls, button controls, image controls, and icon button controls. When the width or height of the layout container changes, the spacing between the sub-controls can automatically adapt to the width or height of the layout container, thereby meeting the display requirements of electronic devices with different screen sizes. Therefore, the even distribution capability of this solution enables electronic devices with different screen parameters to present different display effects based on the same layout settings, reducing the development and maintenance workload for developers while meeting the display needs of various types of electronic devices.

[0340] In other embodiments, for layout containers with the ability to evenly distribute elements, a spacing threshold A or a spacing threshold B can be set to constrain the range of adjusted spacing between child controls. After adjustment, the spacing between child controls is no greater than spacing threshold A. After adjustment, the spacing between child controls is no less than spacing threshold B.

[0341] For example, let's take a layout container with a horizontal layout direction and the first type of even distribution capability enabled as an example. Using the above method, based on the available space of the layout container and the size of each child control, the spacing between each child control is determined to be spacing E. Then, spacing E is compared with a spacing threshold A. If spacing E is greater than spacing threshold A, then the spacing between adjacent child controls is determined to be spacing threshold A, and the spacing between the left edge of the first child control and the left edge of the layout container is adjusted, and / or, the spacing between the right edge of the last child control and the right edge of the layout container is adjusted.

[0342] For example, such as Figure 19 As shown in (1), the spacing between child controls is determined by the layout container based on the available space of the layout container and the size of the child controls, and is called spacing E. At this time, the spacing E is greater than the spacing threshold A. In one example, as shown... Figure 19 As shown in (2), the spacing between child controls is determined to be equal to the spacing threshold A, and all child controls are displayed as a whole and centered in the layout container (i.e., horizontally centered). At this time, the spacing between the left edge of the first child control and the left edge of the layout container increases, and the spacing between the right edge of the last child control and the right edge of the layout container also increases. In another example, as shown in Figure 19 As shown in (3), the spacing between child controls is determined to be equal to the spacing threshold A, and all child controls are treated as a whole and left-aligned within the layout container. At this point, only the spacing between the right edge of the last child control and the right edge of the layout container is increased. In another example, as... Figure 19 As shown in (4), the spacing between child controls is determined to be equal to the spacing threshold A, and all child controls are treated as a whole and right-aligned in the layout container. At this time, only the spacing between the left edge of the first child control and the left edge of the layout container is increased.

[0343] If the layout container is horizontal and the second type of even distribution capability is enabled, when it is determined that the spacing between adjacent child controls is greater than the distance threshold A, the same method as enabling the first type of even distribution capability can be used for adjustment.

[0344] If the layout container's layout direction is vertical and the ability to distribute evenly (including both types of even distribution) is enabled, when it is determined that the spacing between adjacent child controls is greater than the distance threshold A, the spacing between adjacent child controls is still determined to be the spacing threshold A, and the spacing between the top edge of the first child control and the top edge of the layout container is adjusted, and / or the spacing between the bottom edge of the last child control and the bottom edge of the layout container is adjusted. Child controls within the layout container can be centered (i.e., vertically centered), top-aligned, or bottom-aligned; refer to the description when the layout direction is horizontal, which will not be elaborated here.

[0345] To illustrate further, let's take a layout container with a horizontal orientation and the first type of even distribution capability enabled. Using the method described above, the spacing between each child control is determined as spacing E based on the available space of the layout container and the size of each child control. Then, spacing E is compared with a spacing threshold B. If spacing E is less than spacing threshold B, then the spacing between adjacent child controls is determined to be the spacing threshold B. In this case, the first child control and / or the last child control displays part of its content. For example, if the child controls are kept centered, the left side of the first child control and the right side of the last child control may be truncated and not displayed. If the child controls are kept left-aligned, the child controls on the right may be truncated and not displayed. If the child controls are kept right-aligned, the child controls on the left may be truncated and not displayed.

[0346] In other embodiments, the layout container can also be configured to hide. Therefore, if, after adjusting the spacing E to the spacing threshold B, all child controls still cannot be displayed in the layout container, the hiding capability can be triggered. After triggering the hiding capability, the child controls to be hidden can be determined based on their hiding priority, thus reducing the number of child controls displayed in the layout container. Then, the spacing between adjacent child controls is re-determined based on the adjusted number of child controls and the available space in the layout container.

[0347] It should be noted that here, the spacing between child controls is first determined based on the even distribution capability. When the spacing between the child controls is less than the spacing threshold B, the hiding capability is triggered, and then the even distribution capability is used to determine the spacing between the displayed child controls. In some other examples, the hidden child controls can be determined first based on the hiding capability, and then the spacing between the displayed child controls can be determined based on the even distribution capability. This application does not specifically limit this approach.

[0348] In other embodiments, the layout container can also be configured with a line wrapping capability. Then, if the layout container still cannot display all child controls after the spacing E is adjusted to the spacing threshold B, the line wrapping capability can be triggered. After triggering the line wrapping capability, the number of rows or columns in the layout container to display these child controls, and the number of child controls displayed in each row or column, can be determined first. Then, the layout container can determine the spacing between child controls in each row or column based on the number and size of the child controls displayed in each row or column.

[0349] It should be noted that here, the spacing of child controls is first determined based on the even distribution capability. When the spacing of the divided child controls is less than the spacing threshold B, the line wrapping capability is triggered, and then the even distribution capability is used to determine the spacing between each row or column of child controls displayed. In other examples, the number of rows or columns included in the layout container can be determined first based on the line wrapping capability, and then the spacing between child controls in each row can be determined based on the even distribution capability. This application embodiment does not specifically limit this approach.

[0350] The above explanation assumes the layout container is horizontal and the first type of even distribution capability is enabled. If the layout container is horizontal and the second type of even distribution capability is enabled; or if the layout container is vertical and the even distribution capability (including both the first and second types) is enabled, then a similar method can be used to adjust the spacing between adjacent child controls when it is determined that the distance between them is less than the distance threshold B.

[0351] It should be noted that the above embodiments are all illustrated using the example of child controls containing the same size in the layout container. This application does not limit the size of child controls in the layout container with the ability to divide equally. The size of child controls can be the same or different.

[0352] Additionally, as mentioned above, once the even distribution capability is enabled, the spacing between adjacent child controls within the layout container can be equal or approximately equal, or they can differ, for example, by using other distribution rules. Several examples are given below.

[0353] For example, such as Figure 20 As shown in (1), the spacing between adjacent child controls follows a pattern of increasing from small to large. Specifically, spacing 1 < spacing 2 < spacing 3. Alternatively, as... Figure 20 As shown in (2), the spacing between adjacent sub-controls exhibits a regular change from large to small. Specifically, spacing 1 > spacing 2 > spacing 3. Alternatively, as shown in... Figure 20 As shown in (3), the spacing between adjacent sub-controls alternates. Among them, spacing 4 < spacing 5.

[0354] Below is an example of a layout file (XML file). This layout file has a layout container that enables even distribution and contains four child controls, which are four image controls.

[0355]

[0356] The above embodiments demonstrate how developers design adaptive layouts for the display interface by setting attribute values ​​related to the even distribution capability of the layout container in layout files (such as XML files). Alternatively, the even distribution capability attribute values ​​of the layout container can be set by adding an API call to the Java source code file.

[0357] Table 6 shows examples of interfaces corresponding to the attribute values ​​related to the layout container's ability to distribute content evenly.

[0358] Table 6

[0359]

[0360] The above details the meaning of the even distribution capability. Developers can configure layout files based on the layout design of each display interface in the application, combining the even distribution capability, other adaptive layout capabilities, and basic layout capabilities (such as native Android attributes). These layout files, along with other application source code and resources, are packaged into an installation package (e.g., an APK file) and uploaded to an app store. Electronic devices download this installation package from the app store and install the application. The following details how an electronic device implements an adaptive layout based on the aforementioned layout file when running the application.

[0361] Specifically, the phone executes the following for each layout container in the layout file: Figure 21A The measurement process shown includes the following steps:

[0362] S2100, Obtain the layout parameters of the layout container.

[0363] The layout parameters of the layout container include whether the layout container has the ability to distribute content evenly, the child controls contained in the layout container, and the layout parameters of the child controls. If the ability to distribute content evenly is enabled, it also includes the distribution type, spacing threshold A, spacing threshold B, etc. After confirming that the layout container has the ability to distribute content evenly, perform the following steps.

[0364] S2101. Measure the dimensions of each sub-control in the layout container in the layout direction.

[0365] For example, the size of the child control, including its size in the layout direction, is first obtained using Android's native measurement methods and the child control's layout parameters.

[0366] S2102. Determine whether the layout container has multiple rows / columns. If yes, proceed to step S2104; otherwise, proceed to step S2103.

[0367] In some examples, the layout container has line wrapping enabled. In this case, you need to first determine the number of rows or columns in the layout container, and the number of child controls in each row or column, based on the line wrapping-related properties. Then, calculate the spacing between child controls in each row or column. If the layout container does not have line wrapping enabled, and it contains only one row or column of child controls, then calculate the spacing between those child controls.

[0368] S2103. Determine the spacing E between child controls in the layout container based on the even distribution type.

[0369] For example, the spacing E between child controls is determined based on the even distribution type, the size of the layout container, the inner margins, the layout direction, and the size of the child controls. The spacing E between adjacent child controls is equal.

[0370] If it is the first type of even distribution, then the spacing E = [the size space of the layout container in the layout direction - the inner margin in the layout direction - ∑(w1,w2,…,wN)] / (N-1). If it is the second type of even distribution, then the spacing E = [the size space of the layout container in the layout direction - the inner margin in the layout direction - ∑(w1,w2,…,wN)] / (N+1).

[0371] The layout container contains N child controls, where Wi is the size of the i-th child control in the layout direction, i = 1, 2, ..., N. N is an integer greater than 1.

[0372] Then, proceed with step S2105.

[0373] S2104. Calculate the spacing E of each row / column sub-control based on the even distribution type.

[0374] For the number of child controls in each row / column and the size of the child controls, calculate the spacing E. For the specific calculation method, please refer to the description in step S2103.

[0375] S2105. Determine whether the spacing E is greater than the spacing threshold A. If yes, proceed to step S2106; otherwise, proceed to step S2107.

[0376] S2106. Determine that the spacing between adjacent sub-controls is equal to the spacing threshold A.

[0377] S2107. Determine whether the spacing E is less than the spacing threshold B. If yes, proceed to step S2108; otherwise, proceed to step S2109.

[0378] S2108. Determine that the spacing between adjacent sub-controls is equal to the spacing threshold B.

[0379] S2109. Determine the position of each child control in the layout container.

[0380] After determining the spacing between adjacent child controls, display all child controls as a whole in the layout container, either centered, left-aligned, right-aligned, top-aligned, or bottom-aligned, thus determining the position of each child control.

[0381] It's important to note that if the spacing between adjacent child controls is adjusted based on spacing threshold A or spacing threshold B, then when displaying all child controls as a whole as a single unit within the layout container, whether centered, left-aligned, right-aligned, top-aligned, or bottom-aligned, you may also need to adjust the distance between the outer edges of the child controls and the layout container. For detailed adjustment procedures, please refer to [reference needed]. Figure 19 The relevant content will not be repeated here.

[0382] It should be noted that if the first row contains only one child control, that child control can be displayed in the center. If the first row contains multiple child controls, these child controls will be displayed according to their even distribution type.

[0383] If the first row contains only one child control, and the second row and subsequent rows contain multiple child controls, then the second row and subsequent rows will display the child controls according to the even distribution pattern. The third row and subsequent rows will display the child controls based on the spacing calculated from the second row. This way, starting from the second row, the child controls can present a grid effect. Alternatively, in other examples, the third row and subsequent rows can also independently calculate the spacing between adjacent child controls based on the data of the child controls contained in each row and the width (or height) of each child control, and display the child controls according to the calculated spacing.

[0384] It is understandable that electronic devices with different screen sizes (such as mobile phones and tablets) use the same layout file (including layout containers with the ability to divide the content evenly), according to the above... Figure 21A The measurement process will result in different layout effects for the final application interface.

[0385] For example, a mobile phone screen has a width of 720 pixels, while a tablet screen has a width of 1280 pixels. Both the mobile phone and tablet use the same installation package to install the gallery app. The layout file for the gallery app's pages includes a layout container for displaying navigation, which enables the second type of even distribution capability. This layout container includes four horizontally arranged sub-controls ("Photos," "Albums," "Moments," and "Discover"), all with an equal width of 80 pixels. The layout container's padding is set to 0 pixels.

[0386] So, when the phone is drawing the gallery app page, the above steps are performed on that layout container. Figure 21A During the measurement process, the phone calculates the spacing between each sub-control = [the size space of the layout container in the layout direction - the inner margin in the layout direction - ∑(w1,w2…,wN)] / (N+1) = (720-0-80*4) / 5 = 80 pixels. The phone displays as follows: Figure 21B The interface 211 shown in (1) has a spacing of 80 pixels between each sub-control in the layout container 212.

[0387] When the tablet is rendering a page for the gallery app, the above is performed on that layout container. Figure 21A During the measurement process, the tablet computer calculates the spacing between each sub-control as follows: = [Layout container size in the layout direction - Inner margins in the layout direction - ∑(w1,w2…,wN)] / (N+1) = (1280 - 0 - 80 * 4) / 5 = 192 pixels. The tablet computer displays as follows: Figure 21B The interface 213 shown in (2) has a spacing of 192 pixels between each sub-control in the layout container 214.

[0388] like Figure 22 The diagram illustrates another embodiment of the adaptive layout method for an application interface provided in this application. During application development, developers can set attributes related to the even distribution capability in a layout file, such as an XML file. For example, they can enable the even distribution capability, set the even distribution type, and set spacing thresholds A and B. Subsequently, developers package the layout file, along with other application code and resources, into an installation package and upload it to an application marketplace. Users can then download the installation package from the application marketplace and install the application using their electronic devices. When the application runs on the electronic device, the layout module parses the attributes related to the even distribution capability from the layout file, obtains the attribute values, and sends these values ​​to the even distribution module within the electronic device. The layout module then performs measurements and initiates the even distribution capability process, whereby the even distribution module calculates the parameters of relevant controls, such as the size of the controls, based on the attribute values ​​related to the even distribution capability. The layout module performs layout based on the updated control parameters to obtain the positions of controls in a specific display interface within the application. Finally, the electronic device can draw and display this specific display interface. In a specific example, the even distribution module can perform the above... Figure 21A The relevant steps are as follows. The layout module can be the measurement module and layout module in the native view system of Android. The equal division module is a new functional module added in this application to the measurement module in the native view system of Android.

[0389] (iv) Concealment Ability

[0390] When developing an application, developers can add the dependency for the adaptive layout attribute package to set a layout container (i.e., ViewGroup) with hiding capabilities in the display interface. Specifically, developers can set the hidden capability-related attribute values ​​of ViewGroup in the layout file (e.g., XML file) or by adding an API call in the Java source code file.

[0391] Table 7 shows examples of attributes related to the ability to hide.

[0392] Table 7

[0393]

[0394] It's important to note that developers can enable / disable the horizontal / vertical hiding capabilities of a layout container by setting its properties. Furthermore, they can set hiding priorities for child controls (Views or ViewGroups within the layout container). Subsequently, when the application runs on an electronic device and the child controls within the layout container are drawn, if the container's size determines that not all child controls can be displayed horizontally or vertically, the developers can determine which child controls to hide or show based on their hiding priorities. Then, the individual child controls within the layout container are drawn, achieving adaptive layout on the electronic device.

[0395] It should also be noted that the attributes in Table 7 are merely examples. In some other embodiments, the ability to hide and the priority of hiding can also be set. Thus, when the hiding ability of the layout container is enabled, the hidden child controls can be determined by default in the layout direction of the layout container based on the hiding priority of the child controls. Optionally, the direction of the hiding ability can also be set. When the user sets the direction of the hiding ability, the hidden child controls are determined in the specified direction based on the hiding priority of the child controls. This application does not limit this aspect.

[0396] The following section, using Table 7 as an example, explains in detail the meaning of each attribute related to the hiding ability, as well as the display effect of the layout container and child controls, in conjunction with the attached diagram.

[0397] In some embodiments, the horizontal hiding capability of the layout container can be enabled, and a horizontal hiding priority or a horizontal display priority can be set for each child control within the layout container. This explanation uses the horizontal hiding priority as an example. After determining the width of the layout container, it is determined whether the layout container can display all child controls based on the width of the horizontally arranged child controls within it. If so, all child controls are displayed. If not, the hidden child controls are further determined based on the horizontal hiding priority of each child control; these are the child controls that are not displayed in the layout container. In some examples, when the electronic device runs an application, the child controls determined to be hidden in the layout container are not drawn, or only the child controls determined to be displayed in the layout container are drawn. It should also be noted that, in this application, displaying a child control means fully displaying the content of the child control, i.e., displaying all the content of the child control.

[0398] For example, a layout container might contain six horizontally arranged child controls, designated A through F. The horizontal hiding priority of these six child controls, from lowest to highest, is: (Child control A, Child control B, Child control D) < (Child control E, Child control F) < Child control C. Specifically, child controls A, B, and D have the same horizontal hiding priority, as do child controls E and F.

[0399] like Figure 23 As shown in Figure (1), this is a rendering of the layout container displayed by electronic device 1. At this point, the available width of the layout container displayed by electronic device 1 is greater than or equal to the sum of the widths of all child controls within the layout container. The available width of the layout container refers to the total width of the layout container minus the left and right inner margins. Figure 23 Example (1) is given with zero inner margins on the left and right sides. Therefore, the layout container on the electronic device 1 can display all the child controls (child control A to child control F) horizontally.

[0400] It should be noted that if spacing between adjacent child controls is also set, the sum of the widths of all child controls in the layout container includes the width of each child control itself and the spacing between adjacent child controls. Similarly, when determining whether multiple child controls can be placed, the sum of the widths of the multiple child controls includes the spacing between adjacent child controls, which will not be specifically stated below. The spacing between adjacent child controls can be the same or different. In some examples, the spacing between adjacent child controls can be a fixed value set in the layout file. In other examples, the initial spacing between adjacent child controls can also be set in the layout container. After determining the hidden or displayed child controls in the layout container based on the initial spacing between adjacent child controls and the width of each child control itself, the spacing between adjacent child controls is adjusted according to the width of the layout container and the width of the displayed child controls. This embodiment of the application does not limit this.

[0401] When the available width of the layout container is less than the sum of the widths of all child controls within the layout container, it is determined that not all child controls can be displayed in the layout container. Therefore, the child controls to be hidden or displayed are determined based on the available space in the layout container, the width of each child control, and the horizontal hiding priority of each child control.

[0402] In one technical solution, when the layout container cannot display all child controls, child controls with higher horizontal hiding priority in the layout container are hidden first, according to the order of horizontal hiding priority of child controls.

[0403] For example, such as Figure 23 As shown in Figure (2), this is a diagram of the layout container displayed by the electronic device 2. Since the available width of the layout container displayed by the electronic device 2 is less than the sum of the widths of the child controls in the layout container, the child control with the highest horizontal hiding priority (e.g., child control C) is hidden first. After hiding child control C, the layout container on the electronic device 2 can display the other 5 child controls, namely child control A, child control B, child control D to child control F.

[0404] For example, such as Figure 23 As shown in Figure (3), this is a diagram of the layout container displayed by electronic device 3. Since the available width of the layout container displayed by electronic device 3 is less than the sum of the widths of the child controls in the layout container, the child control with the highest horizontal hiding priority (e.g., child control C) is hidden first. Then, based on the widths of other child controls (e.g., child control A, child control B, child control D to child control F), it is determined that the layout container still cannot display all 5 child controls. Further, it is determined that the child controls with the second highest horizontal hiding priority after child control C (e.g., child control E and child control F) are hidden. Then, based on the widths of other child controls (child control A, child control B, and child control D), it is determined that the layout container can display all 3 child controls. Then, electronic device 3 displays these 3 child controls.

[0405] It should be noted that in some examples, multiple child controls with the same horizontal hiding priority are hidden or shown simultaneously. For example, child controls E and F have the same horizontal hiding priority. Therefore, child controls E and F may be shown in the layout container simultaneously, or neither may be shown in the layout container. In other examples, among multiple child controls with the same horizontal hiding priority, it can be determined that the child control listed later is hidden before the child control listed earlier. For example, child controls E and F have the same horizontal hiding priority. When determining which child control to hide, child control F is hidden before child control E. That is, when it is determined that electronic device 3 cannot display all 5 child controls (child controls A, B, and D through F), it is further determined that child control F should be hidden. Then, it is determined whether the layout container can display all the other child controls (child controls A, B, D, and E). If it is determined that these 4 child controls can be displayed, then... Figure 23 As shown in (4), the four child controls are displayed in the layout container. Of course, for child controls with the same horizontal hiding priority, other methods can be used to determine which child control is hidden first or to determine it randomly. This application embodiment does not limit this.

[0406] It should be noted that the order of the child controls can be determined based on the user's reading habits. For example, the language of the text displayed on the child controls can be used to determine the user's reading habits. Generally, for languages ​​such as Chinese and English, users are accustomed to reading from left to right and from top to bottom. Therefore, for multiple horizontally arranged child controls, the left child control can be considered to be arranged first, and the right child control second. For multiple vertically arranged child controls, the top child control can be considered to be arranged first, and the bottom child control second. For other languages, for multiple horizontally arranged child controls, the back child control can be considered to be arranged first, and the left child control second; for multiple vertically arranged child controls, the bottom child control can be considered to be arranged first, and the top child control second. Additionally, users can be allowed to set whether the left or right side of a horizontally arranged child control is prioritized, and / or whether the top or bottom of a vertically arranged child control is prioritized. The above examples regarding the order of child controls are for illustrative purposes only, and this application does not impose any limitations on them.

[0407] In another technical solution, when the layout container cannot display all child controls, the child controls that can be displayed in the layout container are calculated in order of their horizontal hiding priority.

[0408] Specifically, based on the horizontal hiding priority of child controls, from low to high, the child controls to be determined for each calculation are sequentially identified as the "child controls to be determined." The horizontal hiding priority of these child controls is the same in each calculation. During each calculation, if the sum of the available width of the layout container and the widths of the already determined displayed child controls is greater than or equal to the sum of the widths of the child controls to be determined in this calculation, then the child controls to be determined in this calculation can be displayed in the layout container. If the available width of the layout container is less than the sum of the widths of the child controls to be determined in this calculation, then the child controls to be determined in this calculation cannot be displayed in the layout container.

[0409] Additionally, if the sum of the available width of the layout container and the widths of the already displayed child controls exceeds the sum of the widths of the child controls to be determined in this calculation, it is necessary to further determine whether other child controls can be placed in the layout container. Other child controls with higher horizontal hiding priority than the child controls to be determined in this calculation will be selected as child controls to be determined in the next calculation.

[0410] If the sum of the available width of the layout container and the width of the child controls that have already been determined to be displayed equals the sum of the widths of the child controls to be determined in this calculation, it means that the layout container cannot display any more child controls besides those to be determined in this calculation.

[0411] The following examples illustrate this point. To simplify the explanation, we will use w(M) to denote the width of the child control M, where M is a variable. For example, w(A) represents the width of the child control A.

[0412] For example, such as Figure 23 As shown in (2), the available width of the layout container displayed by the electronic device 2 is less than the sum of the widths of the child controls in the layout container.

[0413] First, determine the child controls with the lowest horizontal hiding priority (or the highest horizontal display priority) within the layout container (such as child controls A, B, and D) as the first child controls to be displayed, and these are the child controls to be determined in this calculation. Since the available space of the layout container of electronic device 2 is greater than ∑[w(A), w(B), w(D)], it is determined that child controls A, B, and D can be displayed within the layout container. Furthermore, it is necessary to further determine whether other child controls can be displayed.

[0414] It should be noted that if the available width of the layout container is determined to be ∑[w(A), w(B), w(D)], then only child control A, child control B, and child control D can be displayed in the layout container.

[0415] Further, determine other child controls with slightly higher horizontal hiding priorities (e.g., child control E and child control F) as the child controls to be determined in this calculation. When it is determined that the available width of the layout container - ∑[w(A), w(B), w(D)] ≥ ∑[w(E), w(F)], it is determined that child control E and child control F can still be displayed in the layout container. At this time, the available width of the layout container - ∑[w(A), w(B), w(D)] > ∑[w(E), w(F)], and it is still necessary to further determine whether other child controls can be displayed.

[0416] It should be noted that if it is determined that the available width of the layout container - ∑[w(A), w(B), w(D)] = ∑[w(E), w(F)], then only child control A, child control B, child control D, child control E, and child control F can be displayed in the layout container.

[0417] Further, determine whether other child controls with even higher horizontal hiding priorities (e.g., child control C) can be displayed in the layout container. At this time, if the available width of the layout container - ∑[w(A), w(B), w(D), w(E), w(F)] < w(C), then child control C cannot be displayed in the layout container.

[0418] In summary, a total of 5 child controls, namely child control A, child control B, and child controls D to F, are displayed in the layout container of the electronic device 2.

[0419] Again, for example, as Figure 23 shown in (2) below, the available width of the layout container displayed by the electronic device 2 < the sum of the widths of the child controls in the layout container.

[0420] First, determine the child controls with the lowest horizontal hiding priorities in the layout container (such as child control A, child control B, and child control D) as the first child controls to be displayed and the child controls to be determined in this calculation. Since the available space of the layout container of the electronic device 2 > ∑[w(A), w(B), w(D)], it is determined that child control A, child control B, and child control D can be displayed in the layout container. Moreover, it is still necessary to further determine whether other child controls can be displayed.

[0421] Further, determine other child controls with slightly higher horizontal hiding priorities (e.g., child control E and child control F) as the child controls to be determined in this calculation. Determine that the available width of the layout container - ∑[w(A), w(B), w(D)] < ∑[w(E), w(F)], and it is determined that child control E and child control F cannot be displayed in the layout container. At this time, only child control A, child control B, and child control D are displayed in the layout container.

[0422] In other embodiments, the vertical hiding capability of the layout container can be enabled, and vertical hiding priorities or vertical display priorities can be set for the child controls within the layout container. Then, after determining the height of the layout container, it is determined whether the layout container can display all child controls based on the width of the vertically arranged child controls. If it can, all child controls are displayed. If not, the hidden child controls are further determined based on their vertical hiding priorities; these are the child controls that are not displayed in the layout container. The specific implementation method of the vertical hiding capability can be found in the relevant content on horizontal hiding capabilities, and will not be repeated here.

[0423] In one specific implementation, the ability to hide child controls can be set for layout containers containing multiple child controls. These child controls can be, for example, text controls, button controls, image controls, and ImageButton Views. When the width or height of the layout container changes, some child controls within the container can be automatically hidden, thus meeting the display requirements of electronic devices with different screen sizes. Therefore, this solution's hiding capability enables electronic devices with different screen parameters to present different display effects based on the same layout settings, reducing the development and maintenance workload for developers while meeting the display needs of various types of electronic devices.

[0424] Below is an example of a layout file (XML file). This layout file contains a layout container that enables hiding, and the layout container includes four child controls, which are four image controls.

[0425]

[0426] The above embodiments demonstrate how developers design adaptive layouts for the display interface by setting attribute values ​​related to the hiding capability of the layout container in layout files (such as XML files). Alternatively, the hiding capability attribute values ​​of the layout container can be set by adding an API call to the Java source code file.

[0427] Table 8 shows examples of interfaces corresponding to the properties related to setting the hiding capability of layout containers.

[0428] Table 8

[0429]

[0430] The above details the meaning of the hiding capability. Developers can configure layout files based on the layout design of each display interface in the application, combining the hiding capability, other adaptive layout capabilities, and basic layout capabilities (such as native Android attributes). These layout files, along with other application source code and resources, are packaged into an installation package (e.g., an APK file) and uploaded to an app store. Electronic devices download this installation package from the app store and install the application. The following details how an electronic device implements an adaptive layout based on the aforementioned layout file when running the application.

[0431] Specifically, the phone executes the following for each layout container in the layout file: Figure 24A The measurement process shown includes the following steps:

[0432] S2400, Obtain the layout parameters of the layout container.

[0433] The layout parameters of a layout container include whether to enable horizontal and vertical hiding capabilities, the size of the layout container, and inner margins.

[0434] S2401. Determine if the layout container has the ability to be horizontally hidden, and obtain all child controls contained in the layout container.

[0435] This section uses enabling the horizontal hiding capability of a layout container as an example. It retrieves all child controls contained within the layout container and their corresponding layout parameters. The layout parameters for each child control include its size attribute value and its horizontal hiding or display priority. In some examples, if a child control does not have a set hiding priority, it can be considered the child control with the lowest hiding priority, or a child control that needs to be displayed.

[0436] S2402. Measure all child controls in the layout container and save the width of each child control.

[0437] Based on the layout parameters of each child control (except for the horizontal hiding priority) and the parameters passed from the layout container, perform initial measurements on all child controls in the layout container (such as measuring according to the original Android measurement process), obtain the width of each child control, and save it.

[0438] S2403. Determine multiple batches of child controls based on their horizontal hiding priority. Start calculating the sum of the widths of the batch of child controls with the lowest horizontal hiding priority.

[0439] In other words, one or more child controls with the same horizontal hiding priority are identified as a batch of child controls. The child controls displayed in the layout container are then determined in batches according to their horizontal hiding priority from low to high. The first batch of child controls consists of those with the lowest horizontal hiding priority, and the sum of the widths of this batch of child controls is calculated.

[0440] S2404. Determine if the available space of the layout container is less than the sum of the widths of the already displayed child controls and the child controls in this batch. If it is less, proceed to step S2405. If it is not less, proceed to step S2406.

[0441] The available space of the layout container equals the width of the layout container minus the left and right inner margins. When calculating the first batch of child controls, no child controls have already been determined to be displayed.

[0442] If the available space of the layout container is less than the sum of the widths of the already displayed child controls and the child controls in this batch, it means that the available space of the layout container cannot accommodate the child controls in this batch, and step S2405 is executed. If the available space of the layout container is greater than or equal to the sum of the widths of the already displayed child controls and the child controls in this batch, it means that the available space of the layout container can accommodate the child controls in this batch.

[0443] It should be noted that if the spacing between child controls is also set, then the spacing between the child controls that have already been determined to be displayed, as well as the spacing between child controls in this batch, also need to be added when making the judgment.

[0444] S2405. Determine that the layout container does not display child controls of this batch, nor does it display other child controls with higher hiding priority than child controls of this batch.

[0445] The measurement process is now complete.

[0446] S2406. Determine which child controls of this batch will be displayed in the layout container.

[0447] S2407. Determine whether all batches of sub-controls have been traversed. If all sub-controls have been traversed, the measurement process ends. If not, proceed to step S2408.

[0448] S2408. Calculate the sum of the widths of the next batch of child controls whose hiding priority is higher than that of the current batch of child controls. Then, execute step S2404.

[0449] The above explanation uses enabling horizontal hiding as an example. Enabling vertical hiding requires calculation and judgment based on the height of the layout container and the heights of each child control. For further details, please refer to [link / reference]. Figure 24A The relevant description in the document.

[0450] like Figure 24BThe diagram shown is a flowchart illustrating another method for measuring a layout container provided in this application. Specifically, steps S2403-S2408 are replaced by steps S2409-S2415. The details are as follows:

[0451] S2400, Obtain the layout parameters of the layout container.

[0452] The layout parameters of a layout container include whether to enable horizontal and vertical hiding capabilities, the size of the layout container, and inner margins.

[0453] S2401. Determine if the layout container has the ability to be horizontally hidden, and obtain all child controls contained in the layout container.

[0454] This section uses enabling the horizontal hiding capability of a layout container as an example. It retrieves all child controls contained within the layout container and their corresponding layout parameters. The layout parameters for each child control include its size attribute value and its horizontal hiding or display priority. In some examples, if a child control does not have a set hiding priority, it can be considered the child control with the lowest hiding priority, or a child control that needs to be displayed.

[0455] S2402. Measure all child controls in the layout container and save the width of each child control.

[0456] Based on the layout parameters of each child control (except for the horizontal hiding priority) and the parameters passed from the layout container, perform initial measurements on all child controls in the layout container (such as measuring according to the original Android measurement process), obtain the width of each child control, and save it.

[0457] S2409. Determine if the available space of the layout container is greater than or equal to the sum of the widths of all child controls. If so, proceed to step S2410; otherwise, proceed to step S2411.

[0458] If spacing between child controls is also set, the sum of the spacing between child controls should be added to the right side of the inequality when making the judgment.

[0459] S2410. Display all child controls in the layout container.

[0460] The measurement process is now complete.

[0461] S2411. Determine multiple batches of child controls based on their horizontal hiding priority. First, hide the batch of child controls with the highest horizontal hiding priority.

[0462] S2412. Determine if the available space of the layout container is greater than or equal to the sum of the widths of all child controls minus the sum of the widths of the hidden child controls. If satisfied, proceed to step S2413. Otherwise, proceed to step S2414.

[0463] If spacing between child controls is also set, the right side of the inequality should be adjusted to include the spacing between child controls other than those that are determined to be hidden.

[0464] S2413. Display all child controls in the layout container except for those that are determined to be hidden.

[0465] Measurement complete.

[0466] S2414. Determine whether to traverse all batches of sub-controls. If yes, the measurement process ends; otherwise, proceed to step S2415.

[0467] S2415. Determine the hiding level and hide the next batch of child controls with a lower priority than the current batch of child controls. Then, execute step S2412.

[0468] It is understandable that electronic devices with different screen sizes (such as mobile phones and tablets) use the same layout file (including layout containers with hiding capabilities), as described above. Figure 24A or Figure 24B The measurement process will result in different layout effects for the final application interface.

[0469] For example, a mobile phone screen has a width of 720 pixels, while a tablet screen has a width of 1280 pixels. Both the phone and tablet use the same installation package to install the music application. The layout file for the music application's playback page includes a layout container for controlling playback, which is enabled to be hidden. This layout container includes five horizontally arranged sub-controls ("Previous Track," "Play / Pause," "Next Track," "More," and "Favorites"). The hiding priority is set from low to high as follows: ("Previous Track," "Play / Pause," "Next Track") < "More" < "Favorites." All five sub-controls have an equal width of 100 pixels, and the spacing between them is 180 pixels. The layout container's padding is set to 0 pixels.

[0470] So, when the phone is rendering the playback page of a music application, the above steps are performed on that layout container. Figure 24A (by Figure 24AIn the measurement process (using an example), the phone determines that the first batch of sub-controls to be displayed are the "Previous Track" control, the "Play / Pause" control, and the "Next Track" control. The total width required by the sum of the widths of these three sub-controls and the spacing between them is calculated to be 100*3 + 180*2 = 660 pixels, which is less than the phone's screen width of 720 pixels. Therefore, the phone decides to display these three sub-controls. At this point, after displaying these three sub-controls, the remaining width of the phone screen is 720 - 660 = 60 pixels. Based on the hiding priority, the next batch of sub-controls is determined to be the "More" control. If the "More" control needs to be displayed again, it will require an additional 100 + 180 = 280 pixels, which is greater than the remaining 60 pixels of the phone screen. Therefore, the phone decides not to display the sub-controls in this batch, as well as any other sub-controls. The phone displays as follows: Figure 25 The interface 251 shown in (1) contains three sub-controls displayed in the layout container 252: the "Previous" control, the "Play / Pause" control, and the "Next" control.

[0471] When the tablet is rendering the playback page of a music application, the above is performed on that layout container. Figure 24A (by Figure 24A In the measurement process (using the example), the tablet computer calculates and determines that the first batch of sub-controls to be displayed are the "Previous Track" control, the "Play / Pause" control, and the "Next Track" control. The total width required by the sum of the widths of these three sub-controls and the spacing between them is 100*3 + 180*2 = 660 pixels, which is less than the tablet computer's screen width of 1280 pixels. Therefore, the tablet computer decides to display these three sub-controls. At this point, after displaying these three sub-controls, the remaining width of the tablet computer screen is 1280 - 660 = 620 pixels. Based on the hiding priority, the next batch of sub-controls is determined to be the "More" control. If the "More" control needs to be displayed again, it will require an additional 100 + 180 = 280 pixels, which is less than the remaining width of the tablet computer screen of 620 pixels after displaying these three sub-controls. Therefore, the tablet computer decides to display the "More" control as well, at which point the remaining width of the tablet computer screen is 620 - 280 = 340 pixels. Next, based on the hiding priority, the next batch of sub-controls is determined to be the "Favorites" control. If the "Favorites" control needs to be displayed again, it will require an additional 280 pixels (100 + 180 = 280 pixels), which is less than the remaining width of the tablet screen (340 pixels). Therefore, the tablet will definitely display the "More" control. The tablet will display as follows: Figure 25 The interface 253 shown in (2) contains five sub-controls displayed in the layout container 254: "Previous Track" control, "Play / Pause" control, "Next Track" control, "More" control, and "Favorites" control.

[0472] like Figure 26The diagram illustrates another embodiment of the application interface adaptive layout method provided in this application. During application development, developers can set attributes related to hiding capabilities in a layout file, such as an XML file. For example, they can enable horizontal or vertical hiding capabilities and set the horizontal or vertical hiding priority of each child control. Subsequently, developers package the layout file, along with other application code and resources, into an installation package and upload it to an application marketplace. Users can then download the installation package from the application marketplace and install the application using their electronic devices. When the application runs on the electronic device, the layout module parses the attributes related to hiding capabilities from the layout file, obtains the attribute values, and sends these values ​​to the hiding module within the electronic device. The layout module then performs measurements and initiates the hiding capability process, calculating parameters for relevant controls, such as control dimensions, based on the attribute values. The layout module performs layout based on the updated control parameters to obtain the positions of controls in a specific display interface within the application. Finally, the electronic device can draw and display this specific display interface. In a specific example, the hiding module can perform the above... Figure 24A The relevant steps are as follows. The layout module can be the measurement module and layout module in the native view system of Android. The hidden module is a new functional module added in this application to the measurement module in the native view system of Android.

[0473] (v) Tensile strength

[0474] When developing an application, developers can add the dependency for the adaptive layout property package to set up stretchable ViewGroups in the display interface. Specifically, developers can set the stretchable property values ​​of the ViewGroup in the layout file (e.g., XML file) or by adding an API call in the Java source code file.

[0475] Table 9 shows examples of attributes related to tensile strength.

[0476] Table 9

[0477]

[0478]

[0479] It's worth noting that developers can enable the stretch capability of a layout container by setting its properties. Then, for the child controls (i.e., Views or ViewGroups stored in the layout container), they can set the width of the child controls to "match_parent" and / or set the height of the child controls to "match_parent". Subsequently, when the electronic device runs the application and draws the child controls, it will stretch the child controls according to the size of the layout container.

[0480] For example, when a layout container is set to have horizontal stretching capability, if the size of the layout container on the electronic device is 720*1080 pixels, the size of the child controls can be 720*600 pixels. If the size of the layout container on the electronic device is 1280*800 pixels, the size of the child controls can also be 1280*600 pixels. As another example, if a layout container is set to have horizontal stretching capability, and both the left and right inner margins are set to 10 pixels, then if the size of the layout container on the electronic device is 720*1080 pixels, the size of the child controls can be 700*600 pixels. If the size of the layout container on the electronic device is 1280*800 pixels, the size of the child controls can also be 1260*600 pixels.

[0481] The following section, with reference to the accompanying diagrams, details the meaning of each attribute related to stretchability, as well as the display effects of the layout container and its child controls.

[0482] In some embodiments, developers can enable horizontal stretching of the layout container, or enable vertical stretching of the layout container, or enable both horizontal and vertical stretching of the layout container.

[0483] For example, such as Figure 27 In the interface shown in (1), the child controls fill the layout container. After enabling the stretching capability of the layout container, when the size of the layout container changes, the child controls in the layout container will be stretched in the specified direction.

[0484] In some examples, the property enabling horizontal stretching of the layout container is set to true. Furthermore, the width of child controls is set to "match_parent". Therefore, when the size of the layout container changes, the child controls will stretch horizontally. That is, as shown... Figure 27 (2) Figure 27 Middle (3) and Figure 27 As shown in (4), the width of the child control adapts to the width of the layout container.

[0485] It's important to note that if the height of the layout container also changes, the child controls will adjust according to their own layout parameters. For example, if the height of a child control is fixed, its height will remain fixed. If the child controls do not fill the vertical space of the layout container as its height changes, you can further adjust their vertical alignment. Vertical alignment options include vertical centering (e.g., ...). Figure 27 As shown in (2), top alignment (as shown in the middle) Figure 27 As shown in (3), bottom alignment. Top alignment means the top border of the child control is aligned with the top border of the layout container. Vertical centering means the distance between the top border of the child control and the top border of the layout container is equal to the distance between the bottom border of the child control and the bottom border of the layout container. Bottom alignment means the bottom border of the child control is aligned with the bottom border of the layout container. Of course, the distance between the top border of the child control and the top border of the layout container (i.e., the distance from the top inner margin) can also be set. So, as shown in (3), bottom alignment means the bottom border of the child control is aligned with the bottom border of the layout container. Figure 27 As shown in (4), when the height of the container changes, the distance between the top border of the child control and the top border of the layout container remains at the set value, while the distance between the bottom border of the child control and the bottom border of the layout container changes with the change of the layout container. Alternatively, the distance between the bottom border of the child control and the bottom border of the layout container (i.e., the distance from the bottom padding) can be set. Then, when the height of the container changes, the distance between the bottom border of the child control and the bottom border of the layout container remains at the set value, while the distance between the top border of the child control and the top border of the layout container changes with the change of the layout container.

[0486] If the height of a child control is match_parent, then the height of the child control will change as the layout container changes.

[0487] In other examples, the property enabling vertical stretching of the layout container is set to true. Furthermore, the height of the child controls is set to "match_parent". Then, when the size of the layout container changes, the child controls will stretch vertically. That is, as shown... Figure 27 (5) Figure 27 Middle (6) Figure 27 As shown in (7), the height of the child control adapts to the height of the layout container.

[0488] It's important to note that if the width of the layout container also changes, the child controls will adjust according to their own layout parameters. For example, if the width of a child control is fixed, its width will remain fixed. If the child controls do not fill the horizontal space of the layout container as its width changes, you can further adjust their horizontal alignment. Horizontal alignment options include centering (e.g., ...). Figure 27 As shown in (5), left-aligned (as shown in the middle). Figure 27As shown in (6), right alignment. Left alignment means the left border of the child control is aligned with the left border of the layout container. Horizontal centering means the distance between the left border of the child control and the left border of the layout container is equal to the distance between the right border of the child control and the right border of the layout container. Right alignment means the right border of the child control is aligned with the right border of the layout container. Of course, the distance between the left border of the child control and the left border of the layout container (i.e., the distance from the left inner margin) can also be set. So, as shown in (6), right alignment means the right border of the child control is aligned with the right border of the layout container. Figure 27 As shown in (7), when the width of the container changes, the distance between the left border of the child control and the left border of the layout container remains at the set value, while the distance between the right border of the child control and the right border of the layout container changes with the layout container. Alternatively, the distance between the right border of the child control and the right border of the layout container (i.e., the distance from the right inner margin) can be set. Then, when the width of the container changes, the distance between the right border of the child control and the right border of the layout container remains at the set value, while the distance between the left border of the child control and the left border of the layout container changes with the layout container. For example, if the height of the child control is match_parent, then the height of the child control changes with the layout container.

[0489] In some other examples, the property enabling horizontal stretching of the layout container is set to true, and the width of the child controls is set to "match_parent"; and the property enabling vertical stretching of the layout container is also set to true, and the height of the child controls is set to "match_parent". Then, when the size of the layout container changes, the child controls will stretch in both the horizontal and vertical directions. That is, as shown... Figure 27 As shown in (8), the height of the child control adapts to the height of the layout container, and the width of the child control adapts to the width of the layout container.

[0490] Therefore, the stretching capability provided in this application embodiment allows sub-controls within a stretchable layout container to adaptively stretch according to changes in the layout container. This enables electronic devices with different screen parameters to present different display effects based on the same layout settings, reducing the development and maintenance workload for developers while meeting the display needs of various types of electronic devices. For example, stretching capability can be set for layout containers containing text controls (such as TextView controls, EditText controls, etc.) and button controls (such as Button controls, ImageButton controls). When the width and / or height of the layout container changes, it can adaptively stretch in a specified direction to meet display requirements.

[0491] In other embodiments, after enabling the stretchability of the layout container, developers can also set the inner margin of the layout container in the stretching direction. Then, child controls within the layout container can stretch in the specified direction as the size of the layout container changes, while maintaining their inner margins.

[0492] For example, such as Figure 28 As shown in (1), the child controls do not fill the layout container at this time. After enabling the stretching capability of the layout container, when the size of the layout container changes, the child controls in the layout container will be stretched in the specified direction.

[0493] In some examples, the property enabling horizontal stretching of the layout container is set to true. Furthermore, the width of child controls is set to "match_parent". Horizontal padding is also set, such as the left and / or right padding. Therefore, as... Figure 28 As shown in (2), when the size of the layout container changes, the horizontal padding of the child controls remains at the set value, and the child controls are stretched horizontally. That is, the width of the child controls adapts to the width of the layout container. Of course, developers can also set any one of the horizontal paddings, and the other unset padding will default to 0dp.

[0494] It should be noted that for changes in the vertical direction of child controls, please refer to [reference needed]. Figure 27 The relevant descriptions will not be repeated here.

[0495] In other examples, the property enabling vertical stretching of the layout container is set to true. Furthermore, the height of child controls is set to "match_parent". Vertical padding is also set, such as top padding and / or bottom padding. Therefore, as... Figure 28 As shown in (3), when the size of the layout container changes, the vertical padding of the child controls remains at the set value, and the child controls are stretched vertically. That is, the width of the child controls adapts to the height of the layout container. Of course, developers can also set any one of the vertical paddings, and the other unset padding will default to 0dp.

[0496] It should be noted that for changes in the horizontal direction of child controls, please refer to... Figure 27 The relevant descriptions will not be repeated here.

[0497] In other examples, the horizontal stretchability enable property of the layout container is set to true, the width of the child controls is set to "match_parent", and the horizontal padding is set; similarly, the vertical stretchability enable property of the layout container is set to true, the height of the child controls is set to "match_parent", and the vertical padding is set. Therefore, when the size of the layout container changes, the child controls will stretch in both the horizontal and vertical directions. That is, as shown... Figure 28 As shown in (4), the height of the child control changes adaptively with the height of the layout container, and the width of the child control changes adaptively with the width of the layout container.

[0498] Therefore, by setting the inner margins of the layout container to ensure that controls within the layout container maintain a certain distance from the edges of the container, various display requirements can be met. For example, by maintaining a certain distance between controls within the layout container and the edges of the container, a magazine-like layout can be achieved, with ample white space, giving the display a magazine-like reading experience and enhancing the user's visual experience.

[0499] In some embodiments, besides setting the stretchability of the layout container in a specified direction and the inner margin value in that direction, maximum and minimum values ​​can also be set for the dimensions of the layout container, such as maximum width, minimum width, maximum height, and minimum height. The maximum width refers to the maximum possible sum of the widths of all child controls in the layout container in the horizontal direction (including the horizontal spacing between child controls). The minimum width refers to the minimum possible sum of the widths of all child controls in the layout container in the horizontal direction (including the horizontal spacing between child controls). The maximum height refers to the maximum possible sum of the heights of all child controls in the layout container in the vertical direction (including the vertical spacing between child controls). The minimum height refers to the minimum possible sum of the widths of all child controls in the layout container in the vertical direction (including the vertical spacing between child controls). It should be noted that when stretching child controls, if the sum of the dimensions of all child controls conflicts with the maximum or minimum value set for the layout container's dimensions, the actual stretching ratio of the child controls can be determined based on the maximum or minimum value. In some examples, if no maximum or minimum value for the layout container's dimensions is set, the default value can also be used. For example, the default maximum width is infinity. The default minimum width is 0dp. The default maximum height is infinity. The default minimum height is 0dp. Of course, the default values ​​can be other values, and this application embodiment does not limit them.

[0500] Therefore, by setting the maximum or minimum size of the layout container, it's possible to prevent controls within the container from being excessively enlarged or shrunk in a specified direction. For example, preventing excessive enlargement in a specified direction ensures that information about the controls within the layout container is not lost; for instance, image controls will not become distorted or deformed. Conversely, preventing excessive shrinkage in a specified direction ensures that the content of the controls within the layout container does not overlap, thus avoiding negative display effects.

[0501] It's important to note that when the aforementioned child control is a View, the electronic device, while running the application, stretches the View in the specified direction according to the actual size of the layout container, taking into account the container's inner margins and maximum / minimum dimensions, and then displays it. When the aforementioned control is a ViewGroup, the electronic device, while running the application, uses the same method to stretch the ViewGroup in the specified direction. It's crucial to understand that for Views or ViewGroups nested within a ViewGroup, the layout uses the properties corresponding to that ViewGroup. For example, if the ViewGroup also has stretching enabled, then the Views or ViewGroups nested within it will be drawn using the method corresponding to the stretching capability. Conversely, if the ViewGroup does not have stretching enabled, then the Views or ViewGroups nested within it will not be drawn using the method corresponding to the stretching capability. In other words, the stretching capability set for the layout container can apply to the child controls within that layout container, but it cannot apply to Views or ViewGroups nested within those child controls.

[0502] Below is an example of a layout file (XML file) that includes a layout container with stretchability enabled, and the layout container contains a child control (button control).

[0503]

[0504] To better understand the effect of the adaptive layout achieved by the stretch capability in the embodiments of this application, we will take a car infotainment system display music playback interface with different screen sizes as an example for explanation. It should be noted that the layout files corresponding to the music playback interfaces are the same, that is, the layout parameters of the View and ViewGroup in the music playback interface are the same.

[0505] like Figure 29As shown in Figure (1), interface 2901 is an example of the music playback interface displayed by the vehicle system 1. In interface 2901, the layout container 2900 is configured to stretch horizontally. The layout container 2900 contains multiple button controls, such as button control 2910, button control 2911, and button control 2913. The width of these button controls is set to "match parent", and the height is set to a fixed value. Therefore, when the horizontal dimension of the layout container 2900 changes, these button controls will stretch horizontally.

[0506] For example, such as Figure 29 As shown in Figure (2), interface 2902 is an example of a music playback interface displayed by the vehicle infotainment system 2. As the screen size of vehicle infotainment system 2 increases in width relative to the screen size of vehicle infotainment system 1, the width of layout container 2900 also increases. Therefore, when displaying the music playback interface, vehicle infotainment system 2 stretches the button controls (such as button controls 2910, 2911, and 2913) in layout container 2900 horizontally. In some examples, as the width of the button controls increases, the resources displayed in the button controls (such as text) can also be increased accordingly. The height of these button controls remains at a fixed set value.

[0507] The above embodiments demonstrate how developers design adaptive layouts for the display interface by setting stretchable attribute values ​​for Views or ViewGroups in layout files (such as XML files). Alternatively, stretchable attribute values ​​for Views or ViewGroups can be set by adding API calls to the Java source code files.

[0508] Table 10 shows examples of interfaces corresponding to the properties related to setting the stretchability of a View or ViewGroup.

[0509] Table 10

[0510]

[0511] The above details the meaning of stretch capability. Developers can configure layout files based on the layout design of each display interface in the application, combining stretch capability, other adaptive layout capabilities, and basic layout capabilities (such as native Android attributes). These layout files, along with other application source code and resources, are then packaged into an installation package (e.g., an APK file) and uploaded to an app store. Electronic devices download this installation package from the app store and install the application. The following details how an electronic device implements adaptive layout based on the aforementioned layout files when running the application.

[0512] Specifically, the phone executes the following for each layout container in the layout file: Figure 30A The measurement process shown includes the following steps:

[0513] S3001. Obtain the measurement mode and initial width of the layout container.

[0514] Generally, the measurement mode and initial width of a layout container are determined by the parameter MeasureSpec passed from its parent layout container. MeasureSpec is a 32-bit integer value, where the high 2 bits represent the measurement mode (SpecMode) and the low 30 bits represent the specification (SpecSize) under a certain measurement mode, i.e., the initial width.

[0515] S3002. Obtain the maximum or minimum width of the layout container based on the layout file.

[0516] S3003. Determine whether the horizontal stretching capability of the layout container is enabled. If enabled, proceed to step S3004; otherwise, proceed to step S3011.

[0517] S3004, The width maximum and minimum value is updated to the width maximum and minimum value after maximum and minimum value filtering.

[0518] For example, the phone determines whether the maximum width of the layout container set by the developer in the layout file is greater than or equal to the minimum width of the layout container. If so, the phone confirms that the set maximum and minimum widths of the layout container are used. That is, the maximum and minimum widths of the set layout container are the maximum and minimum widths after extreme value filtering.

[0519] S3005. Determine whether the initial width of the layout container is greater than the maximum width. If yes, proceed to step S3006; otherwise, proceed to step S3007.

[0520] S3006. Modify the width of the layout container to the maximum width.

[0521] S3007. Determine whether the initial width of the layout container is less than the minimum width. If yes, proceed to step S3008; otherwise, proceed to step S3009.

[0522] S3008. Modify the width of the layout container to the minimum width.

[0523] S3009. Measure the width using the original width measurement mode and the width of the adjusted layout container.

[0524] In other words, the measurement is still performed using the measurement mode determined in step S3001 and the width of the layout container adjusted in step S3006 or step S3008.

[0525] S3010. Set the width of child controls in the layout container to match_parent.

[0526] In other words, the width of child controls within the layout container will change as the width of the layout container changes.

[0527] S3011. Obtain the measurement mode and initial width of the layout container height.

[0528] Similarly, the measurement mode and initial height of a layout container are determined by the parameter MeasureSpec passed from its parent layout container. MeasureSpec is a 32-bit integer value, where the high 2 bits represent the measurement mode (SpecMode) and the low 30 bits represent the specification (SpecSize) under a certain measurement mode, i.e., the initial height.

[0529] S3012. Obtain the maximum and minimum height of the layout container based on the layout file.

[0530] S3013. Determine whether the vertical stretching capability of the layout container is enabled. If enabled, proceed to step S3014; otherwise, end the process.

[0531] S3014, The height extrema are updated to the height extrema after being filtered.

[0532] For example, the phone determines whether the maximum height of the layout container set by the developer in the layout file is greater than or equal to the minimum height of the layout container. If so, the phone confirms that the set maximum and minimum heights of the layout container are used. That is, the maximum and minimum heights of the set layout container are the maximum and minimum heights after extreme value filtering.

[0533] S3015. Determine whether the initial height of the layout container is greater than the maximum height. If yes, proceed to step S3016; otherwise, proceed to step S3017.

[0534] S3016, Modify the height of the layout container to the maximum height.

[0535] S3017. Determine whether the initial height of the layout container is less than the minimum height. If yes, proceed to step S3018; otherwise, proceed to step S3019.

[0536] S3018, Modify the height of the layout container to the minimum height.

[0537] S3019. The height of the container is measured using the original height measurement mode and the adjusted layout.

[0538] In other words, the measurement is still performed using the measurement mode determined in step S3011 and the width of the layout container adjusted in step S3016 or step S3018.

[0539] S3020, Set the height of child controls in the layout container to match_parent.

[0540] In other words, the height of child controls within the layout container will change as the height of the layout container changes.

[0541] It should be noted that the above measurement process is merely an example. The order of some steps can be changed, or they can be combined or simplified. For example, the height of the layout container can be measured first, followed by the width of the layout container; that is, steps S3011-S3020 can be executed before or simultaneously with steps S3001-S3010. As another example, when determining whether the initial size of the layout container is greater than the maximum size and whether it is less than the minimum size, the order of determination can be swapped or performed simultaneously. This application does not limit the steps of the extended measurement process.

[0542] It is understandable that electronic devices with different screen sizes (such as mobile phones and tablets) use the same layout file (including layout containers with stretch capabilities), according to the above... Figure 30A The measurement process will result in different layout effects for the final application interface.

[0543] For example, a mobile phone screen has a width of 720 pixels, while a tablet screen has a width of 1280 pixels. Both the mobile phone and the tablet use the same installation package to install the music application. The layout file for the music application's playback page includes a layout container for displaying lyrics, and this layout container has horizontal stretching enabled. Furthermore, this layout container includes a horizontally positioned text control for displaying the lyrics. The left and right inner margins of this layout container are 20 pixels, the maximum width is 1000 pixels, and the minimum width is 500 pixels.

[0544] So, when the phone is rendering the playback page of the music app, it performs the above... Figure 30A During the measurement process, the width of the layout container is calculated as screen width - left and right inner margins = 720 - 20 - 20 = 680 pixels. This meets the requirements for the maximum and minimum width of the layout container. Furthermore, since the width of the text control within the layout container is match-parent, the width of the text control within the layout container is 680 pixels. The mobile phone displays as follows... Figure 30B The interface 301 shown in Figure (1) has a text control in the layout container 302 with a width of 680 pixels. If the layout container also has a vertical stretch capability, the height of the layout container and the text control in the layout container can be calculated in a similar way to the method of calculating the width of the layout container, which will not be described in detail here.

[0545] When the tablet is rendering the playback page of a music application, the above is executed. Figure 30ADuring the measurement process, the width of the layout container is calculated as screen width - left and right inner margins = 1280 - 20 - 20 = 1240 pixels. The calculated width of the layout container (1240 pixels) is greater than the set maximum width (1000 pixels), therefore the width of the layout container is adjusted to the set maximum width of 1000 pixels. Furthermore, since the width of the text control within the layout container is match-parent, the width of the text control within the layout container is 1000 pixels. The tablet computer displays as follows... Figure 30B The interface 303 shown in (2) has a text control in the layout container 304 with a width of 1000 pixels. If the layout container also has a vertical stretch capability, the height of the layout container and the text control in the layout container can be calculated in a similar way to the method of calculating the width of the layout container, which will not be described in detail here.

[0546] In summary, during application development, developers can configure Views and ViewGroups in the layout file with adaptive layout capabilities (e.g., scaling, proportioning, even distribution, hiding, stretching, etc.). When electronic devices with different screen parameters install the application, they can automatically adjust the size and / or layout of Views and ViewGroups within each layout container based on these adaptive layout capabilities and their own screen parameters, achieving an adaptive layout for the display interface. This way, developers only need to design one set of layout files to meet the display needs of electronic devices with different screen parameters, reducing development and maintenance costs.

[0547] Furthermore, compared to solutions that require multiple layout files to be included in the application installation package, this solution includes only one layout file within the application installation package, which helps reduce the data usage and time costs of downloading the application installation package on electronic devices. Moreover, once the application is installed on the electronic device, no other redundant layout files need to be saved, improving the utilization of the electronic device's storage space.

[0548] It is understood that the multiple adaptive layout capabilities extended in the embodiments of this application can be combined with each other. For example, different adaptive layout capability attributes can be set for different objects (View or ViewGroup) in the same application interface. Alternatively, two or more adaptive layout capability attributes can be set for the same object. It should be noted that when setting two or more adaptive layout capability attributes for the same object, the layout container can be enabled or disabled for each adaptive layout capability separately, or multiple adaptive layout capabilities of the layout container can be enabled or disabled uniformly. This application does not limit the specific implementation. It is understood that in the actual application development process, except for the case of conflict when combining, the above adaptive layout capabilities can be arbitrarily combined according to actual needs. For example, the stretch capability can be combined with any one of the capabilities of hiding, proportioning, even distribution, and line wrapping. The scaling capability can be combined with any one of the capabilities of hiding, proportioning, even distribution, and line wrapping, and so on. Here are some examples of adaptive layout capability combinations.

[0549] 1. Tensile strength + even distribution strength.

[0550] For example, setting both stretch and divide capabilities for the same object. Figure 31 As shown in Figure (1), interface 3101 is a music playback interface. In interface 3101, layout container 3100 is configured to stretch horizontally. This layout container 3100 contains multiple sub-layout containers, such as sub-layout containers 3110, 3111, and 3113. The width of these sub-layout containers is set to "match parent," and their height is set to a fixed value. In addition, layout container 3100 is also configured to divide evenly in the vertical direction.

[0551] For example, such as Figure 31 As shown in (2), interface 3103 is an example of the music playback interface displayed by the vehicle system 2. On the one hand, as the screen size of the vehicle system 2 is relative to... Figure 31As shown in Figure (1), the screen size of the vehicle system 1 has increased in width, and the width of the layout container 3100 has also increased. Therefore, when the vehicle system 2 displays the music playback interface, it will stretch the sub-layout containers (such as sub-layout containers 3110, 3111, and 3113) in the layout container 3100 horizontally. On the other hand, as the screen size of the vehicle system 2 is higher than that of the vehicle system 1, the width of the layout container 3100 also increases. However, the height of the sub-layout containers in the layout container 3100 remains a fixed value. Since the layout container 3100 has the ability to divide vertically, the spacing between these sub-layout containers in the layout container 3100 has increased, while maintaining equal spacing between the sub-layout containers.

[0552] 2. Stretching ability + Concealing ability

[0553] For example, setting both stretch and hide capabilities for the same object. Still using... Figure 31 Take the music playback interface shown in (1) as an example. In interface 3101, layout container 3100 is configured to stretch horizontally. This layout container 3100 contains multiple sub-layout containers, such as sub-layout container 3110, sub-layout container 3111, and sub-layout container 3113. The width of these sub-layout containers is set to "match parent", and the height is set to a fixed value. In addition, layout container 3100 is also configured to hide in the vertical direction.

[0554] For example, such as Figure 31 As shown in (3), interface 3104 is an example of the music playback interface displayed by the vehicle infotainment system 3. On the one hand, as the screen size of the vehicle infotainment system 3 is relative to... Figure 31 As shown in Figure (1), the screen size of the vehicle system 1 has increased in width, and the width of the layout container 3100 has also increased. Therefore, when the vehicle system 3 displays the music playback interface, it will stretch the sub-layout containers (such as sub-layout containers 3110, 3111, and 3113) in the layout container 3100 horizontally. On the other hand, as the screen size of the vehicle system 3 increases in height relative to the screen size of the vehicle system 1, the width of the layout container 3100 also increases. However, the height of the sub-layout containers in the layout container 3100 remains a fixed value. Since the layout container 3100 has a vertical hiding capability, as the height of the layout container 3100 increases, more sub-layout containers can be displayed, such as sub-layout container 3113. In the interface 3101, when the screen of the vehicle system 1 is small, the sub-layout container 3113 can be considered to be hidden.

[0555] In summary, electronic devices with different screen parameters draw different display interfaces based on the same layout file. In other words, electronic devices with different screen parameters can adaptively adjust the layout of their display interfaces according to the layout file to meet different display needs.

[0556] 3. Stretching ability + scaling ability + hiding ability

[0557] For example, different adaptive capabilities can be set for different objects in the same interface, such as stretching, scaling, and hiding capabilities. Figure 32 As shown in Figure (1), the playback interface 3201 is displayed when the mobile phone runs a music application. The playback interface 3201 includes an image control 3202 (displaying album art), a text control 3203 (displaying song information), and a button control group 3204 (including buttons for previous track, play, next track, playlist, etc.). Among them, the image control 3202 is equipped with scaling capability (both are set with horizontal and vertical available space ratios), the text control 3203 is equipped with stretching capability, and the button control group 3204 is equipped with hiding capability.

[0558] like Figure 32 As shown in Figure (2), the playback interface 3205 is displayed when the tablet runs a music application. It can be seen that the tablet screen is wider than the phone screen, but its height is reduced. Therefore, based on the scaling capability of the image control 3202, the image control 3202 needs to be scaled down. Since the text control 3203 has a stretching capability, its width increases as the tablet screen width increases. With the tablet screen width increasing, the width of the button control group 3204 increases, allowing more button controls to be displayed, i.e., displaying some hidden button controls (such as the favorites control). In other words, the scaling capability enables the image control to be scaled when the screen width / height changes. Simultaneously, the stretching capability enables the text control to adaptively stretch or shrink when the screen width / height changes. The hiding capability enables the number of button controls displayed to adaptively increase or decrease when the screen width / height changes.

[0559] 4. Ability to distribute equally + ability to wrap lines

[0560] Let's take the browsing interface of the photo gallery application as an example for explanation.

[0561] like Figure 33 As shown in Figure (1), this is the browsing interface displayed when the tablet runs the Gallery app. The browsing interface includes a layout container containing multiple image controls (displaying thumbnails of photos or videos). The layout container is configured with line wrapping capability and even distribution capability (e.g., the second type of even distribution capability). At this time, the width of the multiple image controls is exactly the line wrapping reference value.

[0562] like Figure 33 As shown in Figure (2), this is the browsing interface displayed when the mobile phone runs the Gallery app. First, the mobile phone determines the number of rows in the layout container and the number of image controls displayed in each row based on the line break reference values ​​of each image control within the layout container. For example, it is determined that a maximum of three image controls can be displayed in each row on the mobile phone. Therefore, it can be determined that the mobile phone needs to display these five image controls in two rows. Since the layout container also has the ability to distribute the images evenly, the mobile phone maintains the same spacing between the image controls in each row when displaying them. It can be noticed that on the mobile phone, the number of image controls displayed in the second row is less than the number of Gallery controls displayed in the first row, and the spacing between the image controls in the second row is greater than the spacing between the image controls in the first row. Comparison Figure 33 The browsing interface of (2) and Figure 33 In the browsing interface of (1), it can be seen that although the width of the mobile phone is smaller than that of the tablet, the number of image controls displayed in each row is reduced, and the spacing between the image controls in each row is adaptively adjusted.

[0563] Or, such as Figure 33 As shown in (3), this is another browsing interface displayed when the tablet runs the Gallery application. Figure 33 The difference between the browsing interface shown in (2) and the one shown in (2) is the method of displaying the image controls in the second row. Figure 33 In the browsing interface shown in (2), the tablet recalculates the spacing between adjacent sub-controls according to the number of sub-controls actually contained in the second row and the width of each sub-control, and displays them according to the recalculated spacing. Figure 33 In the browsing interface shown in (3), the tablet directly displays the sub-controls in the second row based on the spacing calculated in the first row. That is, the spacing between adjacent sub-controls in the second row is equal to or approximately the spacing between adjacent sub-controls in the first row.

[0564] As can be seen, developers do not need to worry about the screen size of electronic devices or how many image controls can be displayed in a row. Instead, they can directly use line wrapping and even distribution capabilities to make electronic devices adaptively adjust the layout and the spacing between image controls, thus achieving a grid effect.

[0565] 5. Ability to distribute equally + ability to conceal

[0566] Let's take the playback interface of a music application as an example for explanation.

[0567] like Figure 34As shown in Figure (1), this is the playback interface displayed when the tablet is running a music application. The playback interface includes a layout container containing multiple image button controls (Favorites, Previous, Play, Next, and Playlist). The layout container has the ability to distribute content evenly (e.g., the second type of even distribution) and the ability to hide content. Among these, the hiding priority of Previous, Play, and Next is lower than that of Playlist, and the hiding priority of Playlist is lower than that of Favorites.

[0568] like Figure 34 As shown in Figure (2), this is the playback interface displayed when a mobile phone runs a music application. Compared to a tablet, the width of a mobile phone is reduced, and correspondingly, the width of the layout container is also reduced. Therefore, the mobile phone first determines which icon button controls cannot be displayed in the layout container based on the width of the layout container and the width of each icon button control. The mobile phone determines which icon button controls need to be hidden based on the hiding priority of the icon button controls. First, the favorite icon button controls are hidden to determine that the remaining four icon button controls can be displayed in the layout container. Then, the mobile phone determines the spacing between the four icon button controls based on the size of the remaining four icon button controls and the size of the layout container. If the layout container cannot display the four icon button controls, then further determine which icon button controls need to be hidden, and so on.

[0569] Here is an example of a layout file that enables both the even distribution and hiding capabilities.

[0570]

[0571]

[0572] 6. Ability to distribute evenly + ability to scale

[0573] Let's take the gallery app's browsing interface as an example for further explanation.

[0574] like Figure 35 As shown in Figure (1), this is the browsing interface displayed when the Gallery app is running on a mobile phone. The Gallery app includes a layout container that contains multiple image controls (displaying thumbnails of photos or videos). The layout container has scaling capabilities, and each image control also has a horizontal and vertical usable space percentage. The layout container also has an equal-division capability (e.g., a second type of equal-division capability).

[0575] like Figure 35As shown in Figure (2), this is the browsing interface displayed when the tablet runs the Gallery application. Compared to a mobile phone, the tablet is wider. The image controls are enlarged based on the width of the layout container, the proportion of horizontal and vertical available space of the image controls. After determining the width of the enlarged image controls, the spacing between two adjacent image controls is determined based on the available space of the layout container.

[0576] 7. Concealment ability + Wrapping ability

[0577] Let's take the browsing interface of the photo gallery application as an example for explanation.

[0578] like Figure 36 As shown in Figure (1), this is the browsing interface displayed when the tablet runs the Gallery app. The browsing interface includes a layout container containing multiple image controls (displaying thumbnails of photos or videos), namely image controls A to image controls E. The layout container has the ability to wrap and hide. Image controls A and E have the highest priority for hiding, followed by image controls B and D, and image control C has the lowest priority. At this time, the width of the multiple image controls is exactly the wrap reference value.

[0579] like Figure 36 As shown in Figure (2), this is a schematic diagram of a tablet displaying two windows in a split-screen mode. The left window is used to display the browsing interface of the gallery application. The right window is used to display the playback interface of the music application. Because the window size used to display the browsing interface of the gallery application is reduced, the tablet triggers the display of the layout container in rows. Based on the row wrapping reference values ​​of each image control within the layout container, it is determined that only one image control can be displayed in each row. At this time, Figure 36 The interface shown in (2) displays these five image controls vertically. If the height of the window used by the tablet to display the gallery application browsing interface is insufficient to display the five image controls, the tablet will be triggered to hide these five image controls according to their hiding priority. Figure 36 The interface shown in (3) no longer displays the image controls A and E, which have the highest priority for hiding.

[0580] Below is an example of a layout file (XML file). This layout file contains a layout container that enables hiding, and the layout container includes four child controls, which are four image controls.

[0581]

[0582] 8. Aspect ratio capability + scaling capability

[0583] Let's take the browsing interface of the photo gallery application as an example for explanation.

[0584] like Figure 37As shown in Figure (1), this is the browsing interface displayed when the Gallery app is running on a mobile phone. The Gallery app includes a layout container containing multiple image controls (displaying thumbnails of photos or videos). The layout container is set to zoom (where each image space does not have a set horizontal and vertical available space percentage). The layout container is also set to percentage (e.g., setting a horizontal percentage value, such as 33.33%).

[0585] like Figure 37 As shown in Figure (2), this is the browsing interface displayed when the tablet runs the gallery application. It can be seen that each image control divides the available horizontal space of the tablet equally (each image control's width is 1 / 3 of the tablet's total width). The scaling capability of each image control allows it to scale and fill the available horizontal space. In other words, the aspect ratio control determines the horizontal size of each image control. The scaling capability ensures that each image control maintains its aspect ratio during scaling, preventing image distortion.

[0586] 9. Aspect ratio capability + scaling capability + line wrapping capability

[0587] Let's take the gallery app's browsing interface as an example for further explanation.

[0588] like Figure 38 As shown in Figure (1), this is the browsing interface displayed when the Gallery app is running on a tablet. The Gallery app includes a layout container containing multiple image controls (displaying thumbnails of photos or videos). The layout container is set to zoom (the image controls do not have a set horizontal or vertical usable space ratio). The layout container is also set to have horizontal sizing and horizontal wrapping capabilities.

[0589] like Figure 38 As shown in Figure (2), this is the browsing interface displayed when the mobile phone runs the Gallery app. First, the mobile phone determines the number of image controls displayed in each row based on the line wrapping reference values ​​of each image control within the layout container. For example, it is determined that only three image controls can be displayed in each row on the mobile phone. Then, the width of the three image controls in the first row is determined according to the horizontal proportion capability. Then, the image controls are scaled while maintaining their shape, based on their scaling capability. The horizontal proportion of the image controls in other rows is referenced to the width of the image controls in the first row. Comparison Figure 38 The browsing interface of (2) and Figure 38 In the browsing interface of (1), it can be seen that although the width of the mobile phone is smaller than that of the tablet, the image controls in each row are enlarged.

[0590] The following is an example of an XML file that combines scaling, wrapping, and sizing capabilities.

[0591]

[0592]

[0593] It is understood that the above combinations are merely examples. Regarding conflicts arising from these adaptive layout capability combinations, the development device can provide hints and suggestions when application developers design the application interface. Alternatively, when an application is running on an electronic device and multiple layout capability conflicts are found while measuring a certain object (View or ViewGroup), appropriate conflict resolution methods can be adopted.

[0594] For example, it's generally not possible to set both stretch and scale capabilities in the same direction for the same object (View or ViewGroup) within the same interface. If an application developer sets both stretch and scale capabilities for the same object in the same direction when configuring the application's layout file, an error message can be displayed. Alternatively, after the application developer sets a stretch (or scale) capability for an object, the scaling (or stretch) capability setting might be grayed out, meaning it cannot be set. Or, when the electronic device renders the application interface, one capability setting might be enabled by default, such as stretch or scale. The enabled capability setting can also be determined based on the object's type. For example, if the object is an image control, scale is enabled by default, and stretch is disabled. Similarly, if the object is a text control, stretch is enabled by default, and scale is disabled. Alternatively, the electronic device can prompt the user to select which capability setting to enable.

[0595] For another example, it's generally not possible to set stretch capabilities and other adaptive layout capabilities simultaneously for the same object within the same interface. If an application developer sets a stretch capability for the same object when configuring the application's layout file, they can specify that it cannot be combined with other adaptive layout capabilities. Alternatively, after setting a stretch capability for one object, the settings for the other adaptive layout capabilities can be grayed out, meaning they cannot be set.

[0596] For another example, it's generally not possible to set both percentage and equal distribution capabilities for the same object in the same direction on the same interface simultaneously. If an application developer sets both percentage and equal distribution capabilities for the same object in the same direction when configuring the application's layout file, an error message can be displayed. Alternatively, when the electronic device renders the application interface, one capability setting may be enabled by default, or the enabled capability setting may be determined based on the object's type. For example, if the object includes one control or multiple controls of different types, the percentage capability setting is enabled by default. As another example, if the object includes multiple controls of the same type, the equal distribution capability setting is enabled by default.

[0597] For another example, it's generally not possible to set both wrap and hide capabilities for the same object in the same direction on the same interface simultaneously. If an application developer sets both wrap and hide capabilities for the same object in the same direction when setting the application interface layout file, an error message can be displayed. Alternatively, when setting both wrap and hide capabilities for the same object in the same direction on the application interface layout file, the application developer can be prompted to set priorities for the two capabilities. That is, when the electronic device subsequently renders the application interface based on this layout file, if it finds that both wrap and hide capabilities are set for the same object in the same direction, it can select the capability with higher priority (e.g., wrap capability) for layout based on the priority set by the application developer. In other words, the setting of the lower priority capability (e.g., hide capability) is not effective at this time. Optionally, if when laying out based on the higher priority capability, it is determined that the space in that direction is insufficient to lay out according to the higher priority capability, the layout is then re-laid out based on the lower priority capability. In this case, the setting of the higher priority capability is not effective. Alternatively, when the electronic device is drawing the application interface, one of the capability settings may be enabled by default, or the capability setting may be enabled based on the type of the object, or the capability setting may be enabled preferentially based on the user's settings.

[0598] It is understood that the above-described conflict resolution solutions can be used independently or in combination, for example, according to a certain priority strategy. Furthermore, the above solutions or combinations of solutions can also be applied to situations where conflicts arise when two or more capability combinations occur, other than those described in the above embodiments. In summary, the embodiments of this application do not limit the solutions for conflicts arising from multiple capability combinations.

[0599] This application also provides a chip system, such as... Figure 39As shown, the chip system includes at least one processor 3901 and at least one interface circuit 3902. The processor 3901 and the interface circuit 3902 are interconnected via lines. For example, the interface circuit 3902 can be used to receive signals from other devices (e.g., the memory of electronic device 100). As another example, the interface circuit 3902 can be used to send signals to other devices (e.g., the processor 3901). Exemplarily, the interface circuit 3902 can read instructions stored in the memory and send those instructions to the processor 3901. When the instructions are executed by the processor 3901, the electronic device can perform the various steps performed by the electronic device 100 (e.g., a mobile phone) in the above embodiments. Of course, the chip system may also include other discrete components, which are not specifically limited in this application embodiment.

[0600] This application also provides an apparatus included in an electronic device, which has the function of implementing the behavior of the electronic device in any of the methods described above. This function can be implemented in hardware or by hardware executing corresponding software. The hardware or software includes at least one module or unit corresponding to the above function. For example, a detection module or unit, a display module or unit, a determination module or unit, and a calculation module or unit, etc.

[0601] This application also provides a computer storage medium including computer instructions that, when executed on an electronic device, cause the electronic device to perform any of the methods described in the above embodiments.

[0602] This application also provides a computer program product that, when run on a computer, causes the computer to perform any of the methods described in the above embodiments.

[0603] This application also provides a graphical user interface for an electronic device, the electronic device having a display screen, a camera, a memory, and one or more processors, the one or more processors being used to execute one or more computer programs stored in the memory, the graphical user interface including the graphical user interface displayed when the electronic device performs any of the methods in the above embodiments.

[0604] It is understood that the aforementioned electronic devices, etc., include hardware structures and / or software modules corresponding to the execution of each function in order to achieve the above-mentioned functions. Those skilled in the art should readily recognize that, based on the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein, the embodiments of this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed by hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of the embodiments of this invention.

[0605] This application embodiment can divide the above-mentioned electronic device into functional modules according to the method example described above. For example, each function can be divided into its own functional module, or two or more functions can be integrated into one processing module. The integrated module can be implemented in hardware or as a software functional module. It should be noted that the module division in this embodiment is illustrative and only represents one logical functional division; other division methods may be used in actual implementation.

[0606] Through the above description of the embodiments, those skilled in the art will clearly understand that, for the sake of convenience and brevity, only the division of the above functional modules is used as an example. In practical applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above. The specific working process of the system, device, and unit described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0607] In the embodiments of this application, the functional units can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0608] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solutions of the embodiments of this application, essentially, or the parts that contribute to the prior art, or all or part of the technical solutions, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) or processor to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as flash memory, portable hard disk, read-only memory, random access memory, magnetic disk, or optical disk.

[0609] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any changes or substitutions within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A layout method for an application interface, characterized in that, An electronic device installs an application installation package for a first application. The application installation package includes a first layout file. The first layout file includes a layout container with percentage-based capabilities. The layout container includes a first sub-control with percentage-based capabilities and a second sub-control without percentage-based capabilities. The percentage-based capability refers to the percentage by which the width of the sub-control occupies the total width of the layout container or the percentage by which the height of the sub-control occupies the total height of the layout container. The method includes: The electronic device receives the user's first operation. In response to the received first operation, the electronic device determines the attribute values ​​of the first sub-control and the second sub-control based on the device parameters of the electronic device and the proportion capability of the first sub-control. The device parameters of the electronic device include at least one of the screen type value, screen size value, or running status value of the electronic device. The attribute values ​​of the sub-control are used to indicate the size and position of the sub-control in the second interface. The electronic device displays the first sub-control in the second interface according to the attribute value of the first sub-control; The electronic device displays the second sub-control on the second interface according to the attribute value of the second sub-control.

2. The method according to claim 1, characterized in that, The first layout file includes preset parameters corresponding to the proportion capabilities of the first child control. The electronic device determines the attribute value of the first sub-control based on its device parameters and the proportion capability of the first sub-control, including: The electronic device determines the attribute value of the first sub-control based on the device parameters of the electronic device, the proportion capability of the first sub-control, and the preset parameters.

3. The method according to claim 1 or 2, characterized in that, The operating state of the electronic device includes one or more of the following: landscape mode, split screen mode, and folded mode.

4. The method according to claim 1 or 2, characterized in that, The first operation is any one of the following: launching the first application, jumping to the second interface, or switching the operating state of the electronic device.

5. The method according to claim 1 or 2, characterized in that, The first layout file indicates the percentage value of arranging the first child controls in a first direction of the layout container, where the first direction is either horizontal or vertical. The electronic device determines the attribute value of the first sub-control based on its device parameters and the proportion capability of the first sub-control, including: The electronic device determines the size of the layout container in a first direction based on the device parameters; The size of the first sub-control in the first direction is determined based on the size of the layout container in the first direction and the proportion of the first sub-control.

6. The method according to claim 5, characterized in that, The electronic device determines the attribute value of the second sub-control based on its device parameters and the proportion capability of the first sub-control, including: The size of the second sub-control in the first direction is determined based on the size of the layout container in the first direction and the size of the first sub-control in the first direction.

7. The method according to claim 1 or 2, characterized in that, The percentage of the width of the child control relative to the total width of the layout container, or the percentage of the height of the child control relative to the total height of the layout container, is less than 1.

8. The method according to any one of claims 1-2, characterized in that, The sub-control can be any one of the following: text control, edit control, button control, or image button control.

9. An electronic device, characterized in that, include: The electronic device includes a processor, a memory, and a touchscreen, wherein the memory and the touchscreen are coupled to the processor, the memory is used to store computer program code, the computer program code including computer instructions, and when the processor executes the computer instructions in the memory, the electronic device causes the electronic device to perform the method as described in any one of claims 1-8.

10. A computer-readable storage medium, characterized in that, Includes computer instructions that, when executed on an electronic device, cause the electronic device to perform the method as described in any one of claims 1-8.

11. A computer program product, characterized in that, Includes computer instructions that, when executed on a computer, cause the computer to perform the method as described in any one of claims 1-8.

Images