An interface layout adaptation method, system, storage medium and electronic device

Abstract

The present application discloses an interface layout adaptation method, system, storage medium and electronic device. After generating development layout resources, the projects for adapting the development interface layout are laid out through the development layout resources, so that the projects are launched. After the projects are launched, the device information of the devices to be adapted is obtained, and the device information is identified and analyzed to obtain the identification and analysis result. The identification and analysis is used to identify the layout resource package corresponding to the device to be adapted through the layout adaptation service, and the corresponding percentage layout development operation is executed through the identification and analysis result. The percentage layout development operation is used to adapt the interface display ratio of various devices. Through the above, when the accurate layout resources cannot be matched, the default layout resources can be loaded to prevent problems such as size loss, style loss, and style disorder. And through the layout adaptation service, the layout resources can be dynamically iteratively updated as the usage range of the devices to be adapted changes, ensuring the stable and best display of the device pages and improving the usage experience.

Description

Technical Field

[0001] This application relates to the field of computer technology, and more particularly, to an interface layout adaptation method, system, storage medium, and electronic device. Background Art

[0002] Device Independent Pixels (DIP) can make the same value display approximately the same size at different resolutions.

[0003] When there are significant differences in the physical sizes of devices, device fragmentation occurs. For example, a user interface (UI) prepared for a 4.3-inch screen may have a large amount of blank space on the right and bottom when running on a 5.0-inch screen. And a 5.0-inch UI may not be fully displayed when running on a 4.3-inch device.

[0004] As device fragmentation becomes more and more serious, once the layout resources of the traditional multi-layout adaptation solution become obsolete, it will lead to the loss of styles and sizes, resulting in device display problems and affecting the user experience. Summary of the Invention

[0005] In view of this, this application discloses an interface layout adaptation method, system, storage medium, and electronic device, aiming to ensure the stable and optimal display of device pages and improve the user experience.

[0006] To achieve the above object, the disclosed technical solutions are as follows:

[0007] The first aspect of this application discloses an interface layout adaptation method, which includes:

[0008] Obtain the device information of the device to be adapted; the device to be adapted is a device that has not been identified and analyzed;

[0009] Identify and analyze the device information to obtain an identification and analysis result; the identification and analysis is used to identify the layout resource package corresponding to the device to be adapted; the layout resource package includes a precise layout resource package and a default layout resource package; the precise layout resource package is the layout resource package of the preset device resolution;

[0010] Execute the corresponding percentage layout development operation through the identification and analysis result; the percentage layout development operation is used to adapt the interface display ratio of various devices.

[0011] Preferably, before obtaining the device information of the device to be adapted, it further includes:

[0012] Obtain the standard size of the design draft and the preset resolution configuration table;

[0013] When it is monitored that the preset resolution configuration information does not exist in the special resolution table, layout resource calculation is performed on the standard size of the design draft and the preset resolution configuration table to obtain the first development layout resource; the special resolution table is used to store the device information of the devices to be adapted corresponding to the default layout resources; the preset resolution configuration information is used to characterize the model size parameters of the devices to be adapted for generating the values resource package; the first development layout resource is used for the development operation of the project layout.

[0014] Preferably, it further includes:

[0015] When it is monitored that the preset resolution configuration information exists in the special resolution table, obtain the preset mainstream resolution information from the preset resolution configuration table;

[0016] Merge the preset mainstream resolution information and the preset resolution configuration information to obtain a merge result;

[0017] Perform layout resource calculation on the merge result to obtain the second development layout resource; the second development layout resource is used for the development operation of the project layout.

[0018] Preferably, the process of obtaining the precise layout resource package includes:

[0019] Obtain the standard resolution;

[0020] Through the standard resolution, perform corresponding equal division operations on the model size parameters of the devices to be adapted in the preset resolution configuration table to obtain corresponding equal division information; the corresponding equal division information includes the corresponding equal division information of the screen width and the corresponding equal division information of the screen height;

[0021] Obtain the actual pixels corresponding to the corresponding equal division information;

[0022] Store the corresponding equal division information and the actual pixels into the values resource package;

[0023] Monitor whether there are model size parameters in the special resolution table for which the values resource package has not been generated; the special resolution table is used to store the device information of the devices to be adapted corresponding to the default layout resources;

[0024] If so, return to execute the operation of performing corresponding equal division operations on the model size parameters of the devices to be adapted in the special resolution table through the standard resolution to obtain corresponding equal division information until there are no model size parameters in the special resolution table for which the values resource package has not been generated;

[0025] If not, determine the stored values resource package as the precise layout resource package.

[0026] Preferably, after performing the corresponding percentage layout development operation based on the recognition analysis result, the following steps are further included:

[0027] Perform a first verification on the percentage layout development operation using the precise layout resource package; the first verification is used to verify the interface display effect of the current user device corresponding to the percentage layout development operation using the precise layout resource package.

[0028] Preferably, the process of obtaining the default layout resource package includes:

[0029] Obtain the standard resolution and the screen density corresponding to the standard resolution;

[0030] Determine the device-independent pixel value based on the standard resolution and the screen density;

[0031] Perform a corresponding equal division operation on the screen size parameters of the current device to be adapted to obtain corresponding equal division information;

[0032] Store the corresponding equal division information and the device-independent pixel value into the values resource package, and determine the stored values resource package as the default layout resource package.

[0033] Preferably, after performing the corresponding percentage layout development operation based on the recognition analysis result, the following steps are further included:

[0034] Perform a second verification on the percentage layout development operation using the default layout resource package; the second verification is used to verify the interface display effect of the current user device corresponding to the percentage layout development operation using the default layout resource package.

[0035] The second aspect of the present application discloses an interface layout adaptation system, which includes:

[0036] A first acquisition unit, configured to acquire device information of the device to be adapted; the device to be adapted is a device that has not undergone recognition analysis;

[0037] A recognition and analysis unit, configured to perform recognition and analysis on the device information to obtain a recognition analysis result; the recognition and analysis is used to identify the layout resource package corresponding to the device to be adapted; the layout resource package includes a precise layout resource package and a default layout resource package; the precise layout resource package is the layout resource package of the preset device resolution;

[0038] An execution unit, configured to perform a corresponding percentage layout development operation based on the recognition analysis result; the percentage layout development operation is used to adapt the interface display ratio of various devices.

[0039] The third aspect of the present application discloses a storage medium, which includes stored instructions. When the instructions run, they control the device where the storage medium is located to execute the interface layout adaptation method described in any one of the first aspects.

[0040] The fourth aspect of the present application discloses an electronic device, including a memory, and one or more instructions. One or more instructions are stored in the memory and are configured to be executed by one or more processors to execute the interface layout adaptation method described in any one of the first aspects.

[0041] As can be seen from the above technical solutions, the present application discloses an interface layout adaptation method, system, storage medium and electronic device. After generating the development layout resources, the development interface layout adaptation project is laid out through the development layout resources, so that the project goes online. After the project goes online, the device information of the device to be adapted is obtained, and the device information is identified and analyzed to obtain the identification and analysis result. The identification and analysis is used to identify the layout resource package corresponding to the device to be adapted through the layout adaptation service, and the corresponding percentage layout development operation is executed through the identification and analysis result. The percentage layout development operation is used to adapt the interface display ratio of various devices. Through the above solution, when the precise layout resources cannot be matched, the default layout resources can be loaded to prevent problems such as size loss, style loss, and style disorder. And through the layout adaptation service, the layout resources can be dynamically iteratively updated as the usage range of the device to be adapted changes, ensuring the stable and best display of the device page and improving the usage experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the drawings in the following description are only the embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained according to the provided drawings without creative efforts.

[0043] Figure 1 It is the architecture diagram of an interface layout adaptation device disclosed in an embodiment of the present application;

[0044] Figure 2 It is the flowchart of an interface layout adaptation method disclosed in an embodiment of the present application;

[0045] Figure 3 It is the structural diagram of an interface layout adaptation system disclosed in an embodiment of the present application;

[0046] Figure 4 It is the structural diagram of an electronic device disclosed in an embodiment of the present application. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0047] The following will clearly and completely describe the technical solutions in the embodiments of the present application with reference to the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments. All other embodiments obtained by those of ordinary skill in the art based on the embodiments in the present application without creative efforts shall fall within the protection scope of the present application.

[0048] In the present application, the term "including", "comprising" or any other variant thereof is intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements not only includes those elements but also includes other elements not expressly listed, or further includes elements inherent to such process, method, article or device. Without further limitation, an element defined by the statement "including one..." does not exclude the presence of additional identical elements in the process, method, article or device including the said element.

[0049] As can be seen from the background art, with the increasing severity of device fragmentation, once the layout resources of the traditional multi-layout adaptation scheme become obsolete, it will lead to the loss of styles and sizes, thus causing device display problems and affecting the user experience.

[0050] To solve the above problems, an interface layout adaptation method, system, storage medium and electronic device disclosed in the embodiments of the present application can load default layout resources when accurate layout resources cannot be matched, preventing problems such as size loss, style loss, and style disorder. And through the layout adaptation service, the layout resources can be dynamically iteratively updated as the usage range of the device to be adapted changes, ensuring the stable and optimal display of the device page and improving the user experience. The specific implementation manner will be specifically described through the following embodiments.

[0051] The following first introduces the architecture diagram of the interface layout adaptation device applicable to an interface layout adaptation method and system of the present application. Specifically, refer to Figure 1 As shown, the interface layout adaptation device includes a client 11 and a layout adaptation server 12.

[0052] The layout adaptation server 12 obtains the standard size of the design draft and the preset resolution configuration table.

[0053] When the layout adaptation server 12 monitors that there is no preset resolution configuration information in the special resolution table, it performs layout resource calculation on the standard size of the design draft and the preset resolution configuration table to obtain the first development layout resources; the special resolution table is used to store the device information of the device to be adapted corresponding to the default layout resources; the preset resolution configuration information is used to represent the model size parameters of the values resource package generated by the device to be adapted. The first development layout resources are used for the development operation of the project layout.

[0054] When the layout adaptation server 12 detects that there is preset resolution configuration information in the special resolution table, it obtains the preset mainstream resolution information from the preset resolution configuration table.

[0055] The layout adaptation server 12 merges the preset mainstream resolution information and the preset resolution configuration information to obtain a merged result, and performs layout resource calculation on the merged result to obtain the second development layout resource; the second development layout resource is used for the development operation of the project layout.

[0056] After the layout adaptation server 12 generates the first development layout resource or the second development layout resource, it performs layout on the project with the development interface layout adaptation through the first development layout resource or the second development layout resource, so that the project goes online.

[0057] After the project goes online, the layout adaptation server 12 is used to implement the specific page layout of the application (APP) function of the client 11.

[0058] The specific data interaction process between the client 11 and the layout adaptation server 12 is as follows:

[0059] The client 11 obtains the device information of the device to be adapted; among them, the device to be adapted is a device that has not been identified and analyzed.

[0060] The client 11 performs identification and analysis on the device information to obtain an identification and analysis result; the identification and analysis is used to identify the layout resources corresponding to the device to be adapted; the layout resources include precise layout resources and default layout resources; the precise layout resources are the layout resources of the preset device resolution.

[0061] The specific process of the client 11 performing identification and analysis on the device information to obtain an identification and analysis result is as follows:

[0062] The client 11 obtains the preset mainstream resolution information from the preset resolution configuration table.

[0063] When the client 11 detects that there is preset resolution configuration information in the special resolution table, it merges the preset mainstream resolution information and the preset resolution configuration information to obtain a merged result, and sends the merged result to the layout adaptation server 12; among them, the preset resolution configuration information is used to represent the model size parameters of the device to be adapted for generating the values resource package; the special resolution table is used to store the device information of the device to be adapted corresponding to the default layout resources.

[0064] The layout adaptation server 12 performs layout resource calculation on the merged result to obtain the second development layout resource; the second development layout resource is used for the development operation of the project layout.

[0065] The specific layout adaptation service end 12 calculates the layout resources for the merged result, and obtains the accurate layout resource package and the default layout resource package as follows respectively:

[0066] Obtain the accurate layout resource package:

[0067] The layout adaptation service end 12 obtains the standard resolution. Through the standard resolution, the model size parameters of the devices to be adapted in the preset resolution configuration table are subjected to corresponding equal division operations to obtain corresponding equal division information; the corresponding equal division information includes the corresponding equal division information of the screen width and the corresponding equal division information of the screen height.

[0068] Among them, the standard resolution is the resolution of the high-fidelity design draft delivered after the User Interface (UI) design team creates the drawing.

[0069] The prototype made by the UI engineer according to the physical object is high-fidelity, including product details, real interactions, UI sizes, etc.

[0070] The layout adaptation service end 12 obtains the actual pixels corresponding to the corresponding equal division information, and stores the corresponding equal division information and the actual pixels into the values resource package.

[0071] The layout adaptation service end 12 monitors whether there are model size parameters in the special resolution table for which the values resource package has not been generated; the special resolution table is used to store the device information of the devices to be adapted corresponding to the default layout resources.

[0072] If the layout adaptation service end 12 monitors that there are model size parameters in the special resolution table for which the values resource package has not been generated, then return to execute the operation of performing corresponding equal division operations on the model size parameters of the devices to be adapted in the special resolution table through the standard resolution to obtain the corresponding equal division information, until there are no model size parameters in the special resolution table for which the values resource package has not been generated.

[0073] If the layout adaptation service end 12 monitors that there are no model size parameters in the special resolution table for which the values resource package has not been generated, then determine the stored values resource package as the accurate layout resource package.

[0074] Generate the default layout resource package:

[0075] The layout adaptation service end 12 obtains the standard resolution and the screen density corresponding to the standard resolution.

[0076] The layout adaptation service end 12 determines the device-independent pixel value through the standard resolution and the screen density.

[0077] The layout adaptation server 12 performs corresponding equal division operations on the screen size parameters of the device to be adapted currently, and obtains corresponding equal division information.

[0078] The layout adaptation server 12 stores the corresponding equal division information and the device-independent pixel values in the values resource package, and determines the stored values resource package as the default layout resource generation package.

[0079] The client 11 performs corresponding percentage layout development operations on the recognition and analysis results; the percentage layout development operations are used to adapt the interface display ratios of various devices.

[0080] Developers download the precise layout resource package and / or the default layout resource generation package, and import them into the client 11 project for percentage layout development.

[0081] The client 11 uses the default layout generation package as a new precise layout resource, and generates an update message; the update message is used to prompt the user to complete the update of the application layout resources.

[0082] The client 11 performs a first verification on the percentage layout development operation through the precise layout resource package; the first verification is used to verify the interface display effect of the current user device corresponding to the percentage layout development operation through the precise layout resource package.

[0083] The client 11 performs a second verification on the percentage layout development operation through the default layout resource package; the second verification is used to verify the interface display effect of the current user device corresponding to the percentage layout development operation through the default layout resource package.

[0084] In the embodiments of the present application, when the precise layout resources cannot be matched, the default layout resources can be loaded to prevent problems such as size loss, style loss, and style disorder. And through the layout adaptation service, the layout resources can be dynamically iteratively updated as the usage range of the device to be adapted changes, ensuring the stable and best display of the device page and improving the usage experience.

[0085] Reference Figure 2 As shown in the figure, it is a schematic flowchart of an interface layout adaptation method disclosed in the embodiments of the present application. The interface layout adaptation method mainly includes the following steps:

[0086] S201: Obtain the standard size of the design draft and the preset resolution configuration table.

[0087] Among them, the prototype made by the UI engineer almost completely according to the physical object is high-fidelity, including details of the product, real interactions, UI sizes, etc., which are standard sizes.

[0088] The preset resolution configuration table is used to store information about common mainstream resolutions in the market, such as 1024*768 resolution, 1280*1024 resolution, etc. The content of the preset resolution configuration table is determined by technical personnel according to the actual situation, and this application does not make specific limitations.

[0089] S202: When it is monitored that the preset resolution configuration information does not exist in the special resolution table, layout resource calculation is performed on the standard size of the design draft and the preset resolution configuration table to obtain the first development layout resource; the special resolution table is used to store device information of the devices to be adapted corresponding to the default layout resources; the preset resolution configuration information is used to represent the model size parameters of the devices to be adapted for generating values resource packages; the first development layout resource is used for the development operation of project layout.

[0090] In S202, the first development layout resource is the development layout resource generated when the preset resolution configuration information does not exist in the special resolution table. The first development layout resource includes at least the precise development layout resource and the default development layout resource; the first development layout resource is used for the development operation of project layout.

[0091] Among them, the preset resolution configuration information is the mainstream resolution information that is not common in the market, that is, special resolution configuration information.

[0092] S203: When it is monitored that the preset resolution configuration information exists in the special resolution table, the preset mainstream resolution information and the preset resolution configuration information are merged to obtain a merge result, and layout resource calculation is performed on the merge result to obtain the second development layout resource; the second development layout resource is used for the development operation of project layout.

[0093] Among them, the special resolution table is used to store device information of the devices to be adapted corresponding to the default layout resources.

[0094] Check whether there is a record available for the current project in the special resolution table (that is, the device information of the devices to be adapted corresponding to the default layout resources). If there is, merge the record with the mainstream resolution information obtained in the previous step; skip directly when using the adaptation service for the first time or when there is no available record.

[0095] The values resource package is a resource file in Xml format. The values resource package includes resource files such as colors, strings, and styles.

[0096] When it is monitored that the preset resolution configuration information exists in the special resolution table, obtain the preset mainstream resolution information from the preset resolution configuration table.

[0097] Merge the preset mainstream resolution information and the preset resolution configuration information to obtain a merge result; the preset resolution configuration information is used to characterize the model size parameters of the device to be adapted for generating the values resource package; the special resolution table is used to store the device information of the device to be adapted corresponding to the default layout resources. Among them, the second development layout resource is the development layout resource generated when there is preset resolution configuration information in the special resolution table. The second development layout resource includes at least a precise development layout resource and a default development layout resource; the second development layout resource is used for the development operation of the project layout.

[0098] Among them, the development layout resource includes at least a precise development layout resource and a default development layout resource; the development layout resource is used for the development operation of the project layout.

[0099] S204: After generating the first development layout resource or the second development layout resource, use the first development layout resource or the second development layout resource to layout the project for which the development interface layout is adapted, so that the project goes online. After the project goes online, obtain the device information of the device to be adapted; the device to be adapted is a device that has not been identified and analyzed.

[0100] Among them, the device information includes information such as device model, system version, screen resolution, and current network type.

[0101] S205: Identify and analyze the device information to obtain an identification and analysis result; the identification and analysis is used to identify the layout resource package corresponding to the device to be adapted; the layout resource package includes a precise layout resource package and a default layout resource package; the precise layout resource package is the layout resource package of the preset device resolution.

[0102] Among them, the layout resource of the preset device resolution is the layout resource that can directly match the resolution of the device to be adapted.

[0103] Although the precise layout resource has a perfect display effect, in case the user uses a size for which we have not generated the corresponding values resource and the system cannot find the precise resource and loads the folder of the default values resource package, problems such as size loss and style disorder will occur. Obviously, the precise layout resource package cannot fully meet the requirements, so there is also a need for a default layout resource.

[0104] The default layout resource is the alternative layout resource, and when directly matching the layout resource of the resolution of the device to be adapted, the default layout resource will be used.

[0105] The specific process of obtaining the precise layout resource package is as shown in A1 - A7.

[0106] A1: Obtain the standard resolution.

[0107] Among them, after the UI design team produces the drawings, the resolution of the delivered high-fidelity design draft is set to the standard resolution.

[0108] The prototype made by the UI engineer according to the physical object is high-fidelity, including product details, real interactions, UI sizes, etc.

[0109] A2: Through the standard resolution, perform corresponding equal division operations on the model size parameters of the devices to be adapted in the preset resolution configuration table to obtain corresponding equal division information; the corresponding equal division information includes the screen width corresponding equal division information and the screen height corresponding equal division information.

[0110] To facilitate the understanding of the process of performing corresponding equal division operations on the model size parameters of the devices to be adapted in the preset resolution configuration table through the standard resolution to obtain corresponding equal division information, an example is given here for illustration:

[0111] For example, if the provided drawing has a resolution of 720*1280 and the standard resolution is 720*1280, divide the width of the model sizes of all devices to be adapted in the preset resolution configuration table into 720 equal parts and the height into 1280 equal parts. If the screen of the device to be adapted has a resolution of 1080*1776, after the equal division, each part of the screen width (width) corresponding equal division information is (1080 / 720) px, and each part of the screen height (height) corresponding equal division information is (1776 / 1280) px, where px is the pixel.

[0112] A3: Obtain the actual pixels corresponding to the corresponding equal division information.

[0113] Among them, the actual pixels are the real pixels. Using the principle that the Android system will automatically load the corresponding values directory according to the phone resolution, only use the equal division information when laying out the page to correspond to the real pixels that meet the percentage.

[0114] A4: Store the corresponding equal division information and the actual pixels in the values resource package.

[0115] To facilitate the understanding of the process of storing the corresponding equal division information and the actual pixels in the values resource package, an example is given here for illustration:

[0116] For example, generate the lay_x.xml file with the corresponding equal division information and actual pixels of width, and generate the lay_y.xml file with the corresponding equal division information and actual pixels of height, and generate the values-1776*1080 folder (values resource package) to store the lay_x.xml file and the lay_y.xml file.

[0117] A5: Monitor whether there are model size parameters in the special resolution table for which the values resource package has not been generated; the special resolution table is used to store the device information of the devices to be adapted corresponding to the default layout resources.

[0118] Among them, if it is found that the user loads the default layout resources, upload the device information such as the device model and screen resolution of the device to be adapted corresponding to this user, and store this device information in the special resolution table of the current project.

[0119] A6: If there are model size parameters in the special resolution table for which the values resource package has not been generated, return and execute the standard resolution, and perform the corresponding equal division operation on the model size parameters of the devices to be adapted in the special resolution table to obtain the corresponding equal division information, until there are no model size parameters in the special resolution table for which the values resource package has not been generated.

[0120] Among them, traverse the special resolution table, and loop to execute the standard resolution, and perform the corresponding equal division operation on the model size parameters of the devices to be adapted in the special resolution table to obtain the corresponding equal division information, until there are no model size parameters in the special resolution table for which the values resource package has not been generated.

[0121] A7: If there are no model size parameters in the special resolution table for which the values resource package has not been generated, determine the stored values resource package as the precise layout resource package.

[0122] The process of generating the default layout resource package is shown in B1 - B4.

[0123] B1: Obtain the standard resolution and the screen density corresponding to the standard resolution.

[0124] B2: Determine the device independent pixel value through the standard resolution and the screen density.

[0125] Among them, calculate the device independent pixel value according to the standard resolution, and this device independent pixel value is used for the default layout.

[0126] The calculation formula of the device independent pixel value is shown in formula (1).

[0127] (1)

[0128] Among them, is the pixel; is the screen density, and the value of the screen density is fixed. For example, the value of the screen density of the standard resolution 720 * 1280 is 2.0; is the device independent pixel value.

[0129] B3: Perform a corresponding equal division operation on the screen size parameters of the currently to-be-adapted device to obtain corresponding equal division information.

[0130] B4: Store the corresponding equal division information and device-independent pixel values in the values resource package, and determine the stored values resource package as the default layout resource generation package.

[0131] Among them, store the screen width corresponding equal division information, screen height corresponding equal division information, and device-independent pixel values in the lay_default.xml file of the values resource package. Developers can import the content of the lay_default.xml file into the dimens resource file in the project's default values folder.

[0132] For example, import the folder of all generated values resource packages into the project. In the xml layout of the project, use the equal division information to replace the original pixels. For example, in a design draft (720*1280), the width and height of a control are both 60px. Then, when laying out, write 60px horizontally as "@dimen / x60" and 60px vertically as "@dimen / y60" (which means taking 60 parts out of 720 parts of the width and 60 parts out of 720 parts of the height).

[0133] S206: Execute corresponding percentage layout development operations based on the recognition analysis results; the percentage layout development operations are used to adapt the interface display ratios of various devices.

[0134] The process of executing corresponding percentage layout development operations based on the recognition analysis results is illustrated here with an example:

[0135] For example, the resource packages in the special resolution list are variable, while those in the common resolution list are fixed. There is a resource package with a resolution of 720*1280 in the special resolution list, and a resource package with a resolution of 1080*1920 in the common resolution list. The resource packages with resolutions of 720*1280 and 1080*1920 are merged to obtain a precise layout resource package, that is, the precise layout resource package includes the resource package with a resolution of 720*1280 and the resource package with a resolution of 1080*1920. If the resolution of the customer's mobile phone is 480*840, since there is no resource package with a resolution of 480*840 in the precise layout resource package for the time being, the resource package with a resolution of 480*840 is the default layout resource package. The customer's mobile phone cannot match the resource packages with resolutions of 720*1280 and 1080*1920 in the precise layout resource package, and the resolution of the customer's mobile phone matches the default layout resource package of 480*840. The mobile phone model size of 480*840 of the user is reported, so that the default layout resource package of 480*840 is stored in the special resolution list, and the 480*840 resource package in the special resolution list is updated to the precise layout resource package and an update message is generated. Then, the precise layout resource package includes the resource package with a resolution of 720*1280, the resource package with a resolution of 1080*1920, and the resource package with a resolution of 480*840. The developer downloads the precise layout resource package and uses the 480*840 resource package of the precise layout resource package for percentage layout.

[0136] It should be noted that the default layout resource package cannot be converted into a precise layout resource package. The default layout resource package always exists, and the precise layout resource package is continuously updated. Once the client identifies that the default layout resource package is enabled, the special resolution is recorded, and then a precise layout resource package with a new size is generated and updated. The developer uses the new precise layout resource package + the default layout resource package to update and iterate the APP, and sends the update message to the user side. After the user side receives the update message, the APP is updated, and the user can experience the updated precise layout.

[0137] The developer receives the update message, downloads the new layout resource, and dynamically updates it following the next iteration. The layout resource can be dynamically iteratively updated according to the usage range of the user device to ensure the best display of the page stability.

[0138] The developer can directly download the resource package and import it into the program, and conveniently use percentage layout in xml (the layout file of Android), so as to achieve the best display effect of the interface at a low cost, and there is no need to develop and maintain multiple layout files, only the common resolution configuration table needs to be updated regularly.

[0139] Perform a first verification on the percentage layout development operation through precise layout resource packages; the first verification is used to verify the interface display effect of the current user device corresponding to the percentage layout development operation through precise layout resource packages.

[0140] To facilitate understanding of the process of performing the first verification on the percentage layout development operation through precise layout resource packages, an example is given here for illustration:

[0141] For example, in values-1280*720 with a standard resolution of 720*1280, each part is 1px, so the width is 60px and the height is also 60px. Since the 720*1280 display compliance means that on a mobile phone with a resolution of 720*1280, the width and height of the application components are set according to @dimen / x60 and @dimen / y60, and its display effect is the same as that when the width and height are set to 60px, so the display is compliant.

[0142] In values-1776*1080 with a resolution of 1080*1776, the width is (1080 / 720 *60)=90px, and the height is (1776 / 1280*60)=83.25px, and the display is compliant.

[0143] Perform a second verification on the percentage layout development operation through default layout resource packages; the second verification is used to verify the interface display effect of the current user device corresponding to the percentage layout development operation through default layout resource packages.

[0144] To facilitate understanding of the process of performing the second verification on the percentage layout development operation through default layout resource packages, an example is given here for illustration:

[0145] For example, the device-independent pixel of 60 pixels is 30dp under the standard resolution of 720*1280. When using the default layout resource for percentage layout, the width of the application component is set according to @dimen / x60, and the height of the application component is set according to @dimen / y60. Its display effect is the same as that when the width and height are set to 30dp, that is, the display is normal.

[0146] Automatically generate layout resources according to the standard resolution and the preset resolution configuration table. Client developers can directly download the resource package and import it into the program, and conveniently use percentage layout in xml, so as to achieve the best display effect of the interface at a lower cost, and do not need to develop and maintain multiple layout files. Only need to update the common resolution configuration table regularly. Generate two resource files, namely precise layout resources and default layout resources. When the system cannot match the precise resources, the default layout resources can be loaded to prevent problems such as size loss and style disorder, ensuring the stable and best display of the page.

[0147] In the actual application scenario of this solution, a mobile office APP can be designed and developed, which takes serving customers, businesses, and institutions as the core, analyzes, integrates, and optimizes functional modules, and aggregates data into a unified dashboard. It covers five major modules: customer management, business management, institutional management, tool assistant, and data dashboard, improving the work efficiency of internal marketing personnel in the company and strengthening internal cost reduction and efficiency improvement.

[0148] In the embodiment of this application, when accurate layout resources cannot be matched, default layout resources can be loaded to prevent problems such as size loss, style loss, and style disorder. And through the layout adaptation service, the layout resources can be dynamically iteratively updated as the usage range of the device to be adapted changes, ensuring the stable and optimal display of the device page and improving the usage experience.

[0149] Based on the above embodiments Figure 2 For an interface layout adaptation method disclosed, the embodiment of this application also correspondingly discloses an interface layout adaptation system, as Figure 3 shown. The interface layout adaptation system includes a first acquisition unit 301, an identification and analysis unit 302, and an execution unit 303.

[0150] The first acquisition unit 301 is used to acquire the device information of the device to be adapted; the device to be adapted is a device that has not been identified and analyzed.

[0151] The identification and analysis unit 302 is used to identify and analyze the device information to obtain an identification and analysis result; the identification and analysis is used to identify the layout resource package corresponding to the device to be adapted; the layout resource package includes a default layout resource package and an accurate layout resource package; the accurate layout resource package is the layout resource package with a preset device resolution.

[0152] The execution unit 303 is used to perform corresponding percentage layout development operations through the identification and analysis result; the percentage layout development operation is used to adapt the interface display ratio of various devices.

[0153] Furthermore, the interface layout adaptation system further includes a second acquisition unit and a first calculation unit.

[0154] The second acquisition unit is used to acquire the standard size of the design draft and the preset resolution configuration table.

[0155] The first calculation unit is used to perform layout resource calculation on the standard size of the design draft and the preset resolution configuration table to obtain the first development layout resource when it is monitored that there is no preset resolution configuration information in the special resolution table; the special resolution table is used to store the device information of the device to be adapted corresponding to the default layout resource; the preset resolution configuration information is used to represent the model size parameters of the device to be adapted for generating the values resource package; the first development layout resource is used to perform the development operation of the project layout.

[0156] Further, it further includes a third acquisition unit, a merging unit, and a second calculation unit.

[0157] The third acquisition unit is configured to obtain preset mainstream resolution information from a preset resolution configuration table when it is detected that there is preset resolution configuration information in a special resolution table.

[0158] The merging unit is configured to merge the preset mainstream resolution information and the preset resolution configuration information to obtain a merging result.

[0159] The second calculation unit is configured to perform layout resource calculation on the merging result to obtain a second development layout resource; the second development layout resource is used for development operations of project layout.

[0160] Further, the identification and analysis unit 302 for obtaining the precise layout resource package includes a first acquisition module, a first splitting module, a second acquisition module, a first storage module, a monitoring module, an execution module, and a first determination module.

[0161] The first acquisition module is configured to acquire a standard resolution.

[0162] The first splitting module is configured to perform corresponding equal splitting operations on the model size parameters of the device to be adapted in the preset resolution configuration table through the standard resolution to obtain corresponding equal information; the corresponding equal information includes screen width corresponding equal information and screen height corresponding equal information.

[0163] The second acquisition module is configured to acquire the actual pixels corresponding to the corresponding equal information.

[0164] The first storage module is configured to store the corresponding equal information and the actual pixels into the values resource package.

[0165] The monitoring module is configured to monitor whether there are model size parameters in the special resolution table for which the values resource package has not been generated; the special resolution table is used to store device information of the device to be adapted corresponding to the default layout resources.

[0166] The execution module is configured to, if so, return to execute the operation of performing corresponding equal splitting operations on the model size parameters of the device to be adapted in the special resolution table through the standard resolution to obtain corresponding equal information until there are no model size parameters in the special resolution table for which the values resource package has not been generated.

[0167] The first determination module is configured to, if not, determine the stored values resource package as the precise layout resource package.

[0168] Further, the interface layout adaptation system further includes a first verification unit.

[0169] The first verification unit is used to perform the first verification on the percentage layout development operation through the precise layout resource package; the first verification is used to verify the interface display effect of the current user device corresponding to the percentage layout development operation through the precise layout resource package.

[0170] Further, the recognition and analysis unit 302 in the process of obtaining the default layout resource package includes a third acquisition module, a second determination module, a second segmentation module, and a second storage module.

[0171] The third acquisition module is used to acquire the standard resolution and the screen density corresponding to the standard resolution.

[0172] The second determination module is used to determine the device-independent pixel value through the standard resolution and the screen density;

[0173] The second segmentation module is used to perform corresponding equal segmentation operations on the screen size parameters of the current device to be adapted, and obtain corresponding equal segmentation information.

[0174] The second storage module is used to store the corresponding equal segmentation information and the device-independent pixel value into the values resource package, and determine the stored values resource package as the default layout resource generation package.

[0175] Further, the interface layout adaptation system further includes a second verification unit.

[0176] The second verification unit is used to perform the second verification on the percentage layout development operation through the default layout resource package; the second verification is used to verify the interface display effect of the current user device corresponding to the percentage layout development operation through the default layout resource package.

[0177] In the embodiments of the present application, when the precise layout resource cannot be matched, the default layout resource can be loaded to prevent problems such as size loss, style loss, and style disorder, and through the layout adaptation service, the layout resource can be dynamically iteratively updated as the usage range of the device to be adapted changes, ensuring the stable and best display of the device page and improving the usage experience.

[0178] The embodiments of the present application also provide a storage medium, and the storage medium includes stored instructions, wherein when the instructions run, they control the device where the storage medium is located to execute the above-mentioned interface layout adaptation method.

[0179] The embodiments of the present application also provide an electronic device, and its structural schematic diagram is as Figure 4 shown, specifically including a memory 401, and one or more instructions 402, wherein one or more instructions 402 are stored in the memory 401, and are configured to be executed by one or more processors 403 to execute the above-mentioned interface layout adaptation method.

[0180] The specific implementation processes and their derivative methods of the above embodiments are all within the protection scope of this application.

[0181] The embodiments in this specification are all described in a progressive manner. For the same or similar parts among the embodiments, reference can be made to each other. Each embodiment focuses on the differences from other embodiments. In particular, for a system or system embodiment, since it is basically similar to the method embodiment, the description is relatively simple. For the relevant parts, reference can be made to the partial description of the method embodiment. The systems and system embodiments described above are only illustrative. The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed to multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment. A person of ordinary skill in the art can understand and implement it without creative efforts.

[0182] Those skilled in the art can further realize that the units and algorithm steps of each example described in combination with the embodiments disclosed herein can be implemented by electronic hardware, computer software, or a combination of the two. To clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described according to functions in the above description. Whether these functions are executed in a hardware or software manner 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 to exceed the scope of this application.

[0183] The above description of the disclosed embodiments enables those skilled in the art to implement or use this application. Various modifications to these embodiments will be obvious to those skilled in the art. The general principles defined herein can be implemented in other embodiments without departing from the spirit or scope of this application. Therefore, this application will not be limited to the embodiments shown herein, but will be accorded the widest scope consistent with the principles and novel features disclosed herein.

[0184] The above are only the preferred embodiments of this application. It should be noted that for those of ordinary skill in the art, without departing from the principle of this application, several improvements and refinements can be made, and these improvements and refinements should also be regarded as within the protection scope of this application.

Claims

1. An interface layout adaptation method, characterized in that, The method includes: Obtaining the standard size of the design draft and the preset resolution configuration table; When it is monitored that there is no preset resolution configuration information in the special resolution table, layout resource calculation is performed on the standard size of the design draft and the preset resolution configuration table to obtain the first development layout resources; the special resolution table is used to store the device information of the devices to be adapted corresponding to the default layout resources; the preset resolution configuration information is used to represent the model size parameters of the values resource package generated by the devices to be adapted; the first development layout resources are used for the development operation of the project layout; the first development layout resources at least include precise development layout resources and default development layout resources; When it is monitored that there is preset resolution configuration information in the special resolution table, obtaining the preset mainstream resolution information from the preset resolution configuration table; merging the preset mainstream resolution information and the preset resolution configuration information to obtain a merge result; performing layout resource calculation on the merge result to obtain the second development layout resources; the second development layout resources are used for the development operation of the project layout; the second development layout resources at least include precise development layout resources and default development layout resources; Using the first development layout resources or the second development layout resources to layout the project for which the development interface layout is adapted, so that the project goes online. After the project goes online, obtaining the device information of the devices to be adapted; the devices to be adapted are devices that have not been identified and analyzed; Performing identification and analysis on the device information to obtain an identification and analysis result; the identification and analysis is used to identify the layout resource package corresponding to the devices to be adapted; the layout resource package includes a precise layout resource package and a default layout resource package; the precise layout resource package is the layout resource package of the preset device resolution; Performing a corresponding percentage layout development operation through the identification and analysis result; the percentage layout development operation is used to adapt the interface display ratio of various devices; If the identification and analysis result indicates that the layout resource package is the default layout resource package, and after performing the corresponding percentage layout development operation through the default layout resource package, recording the special resolution, generating a precise layout resource package of a new size according to the special resolution, and using the new precise layout resource package and the default layout resource package to update and iterate the APP, and sending the update information to the user side, so that after the user side receives the update information and updates the APP, the updated precise layout resource package is used.

2. The method according to claim 1, characterized in that, The process of obtaining the precise layout resource package includes: Obtaining the standard resolution; Performing a corresponding equal division operation on the model size parameters of the devices to be adapted in the preset resolution configuration table through the standard resolution to obtain corresponding equal division information; the corresponding equal division information includes the corresponding equal division information of the screen width and the corresponding equal division information of the screen height; Obtaining the actual pixels corresponding to the corresponding equal division information; Storing the corresponding equal division information and the actual pixels into the values resource package; Monitor whether there are model size parameters in the special resolution table for which the values resource package has not been generated; the special resolution table is used to store the device information of the devices to be adapted corresponding to the default layout resources; If so, return to perform the operation of equally dividing the model size parameters of the devices to be adapted in the special resolution table through the standard resolution to obtain corresponding equal-division information until there are no model size parameters in the special resolution table for which the values resource package has not been generated; If not, determine the stored values resource package as the precise layout resource package.

3. The method according to claim 2, characterized in that, After performing the corresponding percentage layout development operation based on the recognition analysis result, it further includes: Perform a first verification on the percentage layout development operation through the precise layout resource package; the first verification is used to verify the interface display effect of the current user device corresponding to the percentage layout development operation through the precise layout resource package.

4. The method according to claim 1, characterized in that, The process of obtaining the default layout resource package includes: Obtain the standard resolution and the screen density corresponding to the standard resolution; Determine the device-independent pixel value through the standard resolution and the screen density; Perform an equal-division operation on the screen size parameters of the current device to be adapted to obtain corresponding equal-division information; Store the corresponding equal-division information and the device-independent pixel value into the values resource package, and determine the stored values resource package as the default layout resource package.

5. The method according to claim 4, characterized in that, After performing the corresponding percentage layout development operation based on the recognition analysis result, it further includes: Perform a second verification on the percentage layout development operation through the default layout resource package; the second verification is used to verify the interface display effect of the current user device corresponding to the percentage layout development operation through the default layout resource package.

6. An interface layout adaptation system, characterized in that, The system includes: A second acquisition unit, used to acquire the standard size of the design draft and the preset resolution configuration table; A first calculation unit, used to perform layout resource calculation on the standard size of the design draft and the preset resolution configuration table to obtain the first development layout resource when it is monitored that there is no preset resolution configuration information in the special resolution table; the special resolution table is used to store the device information of the devices to be adapted corresponding to the default layout resources; the preset resolution configuration information is used to represent the model size parameters of the devices to be adapted for generating the values resource package; the first development layout resource is used for the development operation of the project layout; the first development layout resource at least includes the precise development layout resource and the default development layout resource; A third acquisition unit, used to acquire the preset mainstream resolution information from the preset resolution configuration table when it is monitored that there is preset resolution configuration information in the special resolution table; A merging unit, used to merge the preset mainstream resolution information and the preset resolution configuration information to obtain a merging result; A second calculation unit for calculating layout resources for the merging result to obtain second development layout resources; the second development layout resources are used for development operations of project layout; the second development layout resources at least include precise development layout resources and default development layout resources; A first acquisition unit for laying out a project adapted to the development interface layout through the first development layout resources or the second development layout resources to go live the project, and after the project goes live, acquiring device information of a device to be adapted; the device to be adapted is a device that has not been identified and analyzed; An identification and analysis unit for identifying and analyzing the device information to obtain an identification and analysis result; the identification and analysis is used to identify a layout resource package corresponding to the device to be adapted; the layout resource package includes a precise layout resource package and a default layout resource package; the precise layout resource package is a layout resource package with a preset device resolution; An execution unit for performing a corresponding percentage layout development operation through the identification and analysis result; the percentage layout development operation is used to adapt the interface display ratio of various devices; if the identification and analysis result indicates that the layout resource package is the default layout resource package, and after performing the corresponding percentage layout development operation through the default layout resource package, record a special resolution, generate a precise layout resource package with a new size according to the special resolution, and use the new precise layout resource package and the default layout resource package to update and iterate the APP, and send the update information to the user side, so that after the user side receives the update information and updates the APP, use the updated precise layout resource package.

7. A storage medium, characterized in that, The storage medium includes stored instructions, wherein when the instructions run, the device where the storage medium is located is controlled to execute the interface layout adaptation method according to any one of claims 1 to 5.

8. An electronic device, characterized in that, It includes a memory, and one or more instructions, wherein one or more instructions are stored in the memory and are configured to be executed by one or more processors to execute the interface layout adaptation method according to any one of claims 1 to 5.

Images