User interface diagram adaptive display method and device, electronic equipment and storage medium

Abstract

The application provides an adaptive display method and device of a user interface diagram, an electronic device and a storage medium. It relates to the technical field of user interfaces. The method comprises: obtaining a user interface diagram and first size ratio information of the user interface diagram; if the first size ratio information is not adaptive to second size ratio information of any display screen, determining the interface type of the current user interface on the any display screen; determining a corresponding adaptive processing mode according to the interface type of the current user interface, and processing the first size ratio information into the second size ratio information by using the adaptive processing mode; and if the first size ratio information is adaptive to the second size ratio information, adaptively displaying the user interface diagram on the current user interface on the any display screen. The application can solve the problem that the same design effect diagram cannot display the same user interface display effect for different screen sizes and different resolution display screens in the prior art.

Description

Technical Field

[0001] This application relates to user interface (UI) adaptation technology, and more particularly to a method, apparatus, electronic device, and storage medium for adapting and displaying user interface diagrams. Background Technology

[0002] The user interface (UI) is the medium through which the operating system and the user interact and exchange information. It converts the internal form of information into a form that humans can understand. The user interface displayed on the screen of an electronic device is generally designed by a designer to create a design mockup, and then adapted by a development engineer to a display screen of any size and resolution.

[0003] Currently, due to the openness of operating systems (such as iOS and Android) and the diverse screen sizes and resolutions of electronic devices (for example, screen sizes range from 4.3 inches to 6.5 inches, and resolutions range from 320*240px to 2560*1440px), user interface designs based on a design baseline size will not display completely on electronic devices with lower resolutions, and will have blank areas on the right and bottom sides of the screen on electronic devices with higher resolutions.

[0004] It is evident that existing technologies suffer from a mismatch between the user interface design and the display screen, where the same design rendering cannot display the same user interface effect for different screen sizes and resolutions. Summary of the Invention

[0005] This application provides a method, apparatus, electronic device, and storage medium for adapting and displaying user interface diagrams, in order to solve the problem in the prior art that the same design rendering cannot display the same user interface effect for display screens with different screen sizes and resolutions.

[0006] On the one hand, this application provides a method for adapting and displaying a user interface diagram, including:

[0007] Obtain a user interface diagram and its first size ratio information, wherein the user interface diagram is a design rendering based on benchmark design data and is used to adapt the display on any display screen.

[0008] If the first size ratio information does not match the second size ratio information of any of the display screens, then the interface type of the current user interface on any of the display screens is determined;

[0009] The corresponding adaptation processing method is determined according to the interface type of the current user interface, so as to use the adaptation processing method to process the first size ratio information to adapt to the second size ratio information;

[0010] If the first size ratio information matches the second size ratio information, the user interface diagram is displayed on the current user interface on any of the display screens.

[0011] Further, the first size ratio information includes: a first ratio of the width to the height of the user interface diagram; the second size ratio information includes: a second ratio of the width to the height of any of the display screens; the method further includes:

[0012] If the first ratio is equal to the second ratio, then it is determined that the first size ratio information and the second size ratio information are compatible.

[0013] If the first ratio is not equal to the second ratio, then it is determined that the first size ratio information and the second size ratio information are not compatible.

[0014] Furthermore, determining the corresponding adaptation processing method based on the interface type of the current user interface includes:

[0015] If the interface type indicates that the current user interface is a scrollable interface, then the user interface diagram is adapted and displayed on the current user interface according to the width scaling factor of the current user interface;

[0016] If the interface type indicates that the current user interface is a non-scrollable interface, then obtain the third ratio of the vertical outer margin of the current user interface to the current user interface, and determine the adaptation processing method based on the third ratio.

[0017] Further, adapting the user interface diagram to be displayed on the current user interface according to the width scaling factor of the current user interface includes:

[0018] Based on the width scaling factor of the current user interface, the width and height of the user interface image are scaled respectively to obtain the scaled user interface image, wherein the third size ratio information of the scaled user interface image is adapted to the second size ratio information.

[0019] The scaled user interface image is adapted and displayed on the current user interface.

[0020] Further, determining the adaptation processing method based on the third ratio includes:

[0021] If the third ratio is greater than the preset ratio, then the horizontal outer margin and inner margin of the current user interface are determined.

[0022] Based on the weight value corresponding to the vertical margin, the remaining interface on the current user interface is allocated to the vertical margin so that the vertical margin is scaled; and based on the width scaling factor of the current user interface, the horizontal margin and inner margin of the user interface diagram are scaled respectively to obtain the scaled user interface diagram.

[0023] The scaled user interface image is adapted and displayed on the current user interface.

[0024] Further, determining the adaptation processing method based on the third ratio includes:

[0025] If the third ratio is less than or equal to the preset ratio, then the width of the user interface image is scaled according to the width scaling factor of the current user interface, and the height of the user interface image is scaled according to the height scaling factor of the current user interface, to obtain the scaled user interface image.

[0026] The scaled user interface image is adapted and displayed on the current user interface.

[0027] On the other hand, this application provides an adaptive display device for a user interface diagram, the device comprising:

[0028] The acquisition module is used to acquire a user interface diagram and a first size ratio information of the user interface diagram, wherein the user interface diagram is designed based on benchmark design data and is a design effect diagram for adaptation and display on any display screen;

[0029] The first determining module is used to determine the interface type of the current user interface on any display screen if the first size ratio information does not match the second size ratio information of any display screen.

[0030] The second determining module is used to determine the corresponding adaptation processing method according to the interface type of the current user interface, so as to use the adaptation processing method to process the first size ratio information to adapt to the second size ratio information.

[0031] An adaptation display module is used to adapt and display the user interface diagram on the current user interface on any of the display screens if the first size ratio information matches the second size ratio information.

[0032] On the other hand, this application provides an electronic device, including: a processor and a memory connected to the processor; the memory stores computer execution instructions; the processor executes the computer execution instructions stored in the memory to implement any of the methods described above.

[0033] On the other hand, this application provides a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, are used to implement any of the methods described above.

[0034] On the other hand, this application provides a computer program product, including a computer program that, when executed by a processor, implements any of the methods described above.

[0035] The user interface diagram adaptation display method provided in this application obtains a user interface diagram and its first size ratio information. The user interface diagram is designed based on reference design data and is a design effect diagram for adaptation display on any display screen. If the first size ratio information does not match the second size ratio information of any display screen, the interface type of the current user interface on the arbitrary display screen is determined. Based on the interface type of the current user interface, a corresponding adaptation processing method is determined to process the first size ratio information to match the second size ratio information. If the first size ratio information matches the second size ratio information, the user interface diagram is adapted and displayed on the current user interface on the arbitrary display screen.

[0036] In this embodiment, when a user interface image cannot be adapted for display on any display screen, the interface type of the current user interface on that screen is first determined. Corresponding adaptation solutions are then provided for different interface types. This is simple to implement, requires no new size units, and eliminates the need for any redundant size files. It achieves the goal of adapting the same design rendering to any display screen on any electronic device. This enables the same user interface display effect for the same design rendering on display screens of different sizes and resolutions, achieving the technical effect of adapting the same design rendering to display on screens of different sizes and resolutions. Attached Figure Description

[0037] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.

[0038] Figure 1 A schematic diagram of the architecture of a user interface diagram adaptation and display method system provided in this application embodiment;

[0039] Figure 2A schematic diagram of the architecture of an optional user interface diagram adaptation display method system provided in an embodiment of this application;

[0040] Figure 3 This is a flowchart illustrating an optional user interface diagram adaptation and display method provided in an embodiment of this application.

[0041] Figure 4 This is a comparison diagram of an optional user interface diagram (a), user interface diagram (b), and user interface diagram (c) provided in an embodiment of this application;

[0042] Figure 5 This is a flowchart illustrating an optional user interface diagram adaptation and display method provided in an embodiment of this application.

[0043] Figure 6 A structural block diagram of an adaptive display device for a user interface diagram provided in this application embodiment;

[0044] Figure 7 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application.

[0045] The accompanying drawings illustrate specific embodiments of this application, which will be described in more detail below. These drawings and descriptions are not intended to limit the scope of the concept in any way, but rather to illustrate the concept of this application to those skilled in the art through reference to particular embodiments. Detailed Implementation

[0046] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.

[0047] First, let me explain the terms used in this application:

[0048] The unit dp (density-independent pixel) ensures the same display effect on devices with different screen pixel densities. It is a length unit unique to Android systems, with a standard of 1 / 160 inch, though there may be slight differences between different manufacturers.

[0049] The unit of resolution, px, is an abbreviation of the English word pixel. A pixel is the smallest unit in an image represented by a sequence of numbers.

[0050] Resolution, also known as screen resolution, is the precision of a screen image. It refers to the number of pixels that a monitor can display, such as 1920*1080.

[0051] A view is the most basic object for adaptation processing. It is a rectangular area on the display screen of an electronic device, corresponding to a layer on the UI design mockup (a layer can be a button, text block, etc., including properties such as width, height, margin, padding, etc.). Each layer is drawn in a view.

[0052] Weight represents the weight value allocated to the remaining space on the current user interface of the display screen. Assuming that the remaining space of the current parent view View on the display screen is 10, the weight of child view View1 is set to 3, and the weight of child view View2 is set to 7, then child view View1 can get 30% of the remaining space, and child view2 can get 70% of the remaining space.

[0053] Margin in refers to the distance from the border of an element to the border of another element; it is the outer margin of the container and is used to separate elements from each other.

[0054] Padding refers to the distance between the border of an element and the border of another element within it; it's the spacing within the container and is used to separate an element from its content. For example, `margin` is used to separate two text boxes, while `pading` is used to separate the border of a text box from its text content.

[0055] Currently, due to the openness of operating systems (such as iOS and Android) and the diverse screen sizes and resolutions of electronic devices (for example, screen sizes range from 4.3 inches to 6.5 inches, and resolutions range from 320*240px to 2560*1440px), user interface design mockups designed using a reference size will not display properly on electronic devices with lower resolutions, and will leave blank spaces on the right and bottom sides of the screen on electronic devices with higher resolutions.

[0056] For displays with different screen sizes and resolutions, the same design mockup cannot display the same user interface, i.e., there is a mismatch between the user interface mockup and the display screen. Several mainstream adaptation solutions exist, but each has its own flaws and shortcomings.

[0057] The first adaptation solution abandons the px resolution unit and adopts the device-independent pixel dp length unit to ensure that the absolute size of each element in the design baseline is consistent on every display screen. However, when facing display screens of different sizes, there will be blank spaces on screens larger than the design baseline, and screens smaller than the design baseline will not be able to display the content. Not only is the accuracy of matching the design drawings and the implementation effect not high, but the workload for designers and developers is also very large, as different size ranges require redesign and reimplementation.

[0058] To address this issue, the second adaptation solution is a qualifier-based approach, such as a screen resolution qualifier scheme and a minimum screen dp width qualifier scheme. For different qualifier sizes, designers provide new design drawings to fit screens within that qualifier size, and developers reimplement the design according to the corresponding dimensions.

[0059] However, both of the above adaptation schemes have the following problems: 1. The design baseline size is bound to the development baseline size, requiring the design baseline size to be implemented according to the development baseline size; otherwise, the development baseline size must be recalculated. 2. New size units need to be defined. 3. The workload is large. The newly defined size units need to be calculated in advance. The higher the adaptation accuracy, the more calculations and additional size files are required, increasing the size of the system application package APK.

[0060] The user interface diagram adaptation display method provided in this application aims to solve the above-mentioned technical problems of the prior art. The technical solution of this application and how it solves the above-mentioned technical problems are described in detail below with specific embodiments. These specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described again in some embodiments. The embodiments of this application will be described below with reference to the accompanying drawings.

[0061] Figure 1 This is a flowchart illustrating a method for adapting and displaying a user interface diagram according to an embodiment of this application. Figure 1 As shown, the method includes:

[0062] S101, Obtain the user interface diagram and the first size ratio information of the aforementioned user interface diagram.

[0063] S102, if the first size ratio information does not match the second size ratio information of any of the above-mentioned display screens, then determine the interface type of the current user interface on any of the above-mentioned display screens.

[0064] S103, determine the corresponding adaptation processing method according to the interface type of the current user interface, and use the above adaptation processing method to process the first size ratio information to adapt to the second size ratio information.

[0065] S104, if the first size ratio information is compatible with the second size ratio information, the user interface diagram is displayed on the current user interface on any of the display screens.

[0066] Optionally, the above user interface diagrams are design mockups created by designers (UI designers) based on baseline design data, intended for adaptation and display on any display screen. Examples include lock screen diagrams, general settings diagrams, call interface diagrams, clock interface diagrams, and so on.

[0067] Optionally, the aforementioned baseline design data is a pre-defined design data, which may include, for example, baseline resolution and baseline screen size. In one example, assuming that the screen resolution of all electronic devices is 1334*750px, the designer uses 1334*750px as the baseline resolution; in another example, assuming that the screen size of all electronic devices is 4.3 inches, the designer uses 4.3 inches as the baseline screen size.

[0068] Optionally, the aforementioned display screen can be the screen of any electronic device, such as a smartphone, smartwatch, laptop, tablet, multimedia playback device, in-vehicle device, etc.; the electronic device can run any operating system, such as iOS operating system, Android operating system, etc.

[0069] Optionally, the resolution and screen size of the aforementioned display screen are arbitrary. For example, the screen size of the display screen may be, but is not limited to, 4.3 inches to 6.5 inches, and the resolution of the display screen may be, but is not limited to, 320*240px to 2560*1440px.

[0070] Taking an electronic device running the Android operating system as an example in this application embodiment, in one example, for instance, all Android electronic devices have a screen resolution of 1334*750px and a screen size of 4.3 inches. The designer uses 1334*750px as the base resolution and 4.3 inches as the base screen size to design the user interface diagram, also known as the design rendering. In this application embodiment, the development engineer adapts the same design rendering to a display screen of any size and resolution. In this way, the implemented effect on the display screen is completely consistent with the design rendering, i.e., there is no incompatibility issue.

[0071] As described above, the user interface displayed on the screen of an electronic device is generally designed by a designer to obtain a design rendering, and then adapted by a development engineer to a display screen of any size and resolution. The specific application scenario of this invention is to adapt and display the user interface image on the current user interface on any display screen. Especially when encountering problems with display adaptation, the corresponding adaptation processing method is determined based on the interface type of the current user interface, and the design rendering is processed using the aforementioned adaptation processing method to achieve the adapted display of the user interface image on the current user interface on any display screen.

[0072] In this embodiment of the application, regarding the question of whether the aforementioned user interface diagram can be adapted to be displayed on the current user interface on any display screen, the user interface diagram designed by the designer is first obtained, and the width (designWidth) and height (designHeight) of the user interface diagram are calculated to obtain a first ratio of the width (designWidth) to the height (designHeight) of the user interface diagram, namely, DesignHWRatio = designHeight / designWidth. Then, or simultaneously, a second ratio of the width (screenWidth) to the height (screenHeight) of any display screen of any electronic device, namely, ScreenHWRatio = screenHeight / screenWidth, is obtained.

[0073] In one optional embodiment, the first size ratio information of the user interface diagram includes: the first ratio of the width to the height of the user interface diagram, Des i gnHWRat io, and the second size ratio information of the display screen includes: the second ratio of the width to the height of any of the display screens, ScreenHWRat io.

[0074] In one optional embodiment, if the first ratio is equal to the second ratio, then the first size ratio information is determined to be compatible with the second size ratio information; that is, for any display screen where the second ratio ScreenHWRat io is equal to the first ratio DesignHWRat io, the user interface diagram can be perfectly adapted, achieving the same effect as placing the user interface diagram in a display screen corresponding to its standard design data for full-screen display, i.e., pixel-level adaptation display can be achieved.

[0075] In one optional embodiment, if the first ratio is not equal to the second ratio, it is determined that the first size ratio information and the second size ratio information are not compatible. That is, for any display screen where the second ratio ScreenHWRatio is not equal to the first ratio DesignHWRatio, for example, designWidth is equal to screenWidth, but designHeight is not equal to screenHeight, i.e., for the same width, the height of the display screen screenHeight is greater than or less than the height of the design rendering designHeight, thus it is determined that a compatible display cannot be achieved.

[0076] In one example, if the first size ratio information of the user interface diagram does not match the second size ratio information of any of the aforementioned display screens, then the interface type of the current user interface on any of the aforementioned display screens is determined.

[0077] Optionally, based on the interface type of the current user interface, it can be determined whether the current user interface is a scrollable interface or a non-scrollable interface. In one optional example, a scrollable interface refers to a user interface that displays dynamic content that can be scrolled vertically, such as a text messaging chat interface; a non-scrollable interface refers to a user interface that displays fixed content that cannot be scrolled vertically, such as a call interface.

[0078] Then, the corresponding adaptation processing method can be determined according to the interface type of the current user interface. The first size ratio information can be processed to match the second size ratio information using the above adaptation processing method, so that the design rendering can be adapted and displayed on the current user interface on any display screen.

[0079] This application embodiment can quickly adapt and display UI design mockups of any screen size and resolution on the display screen of any electronic device, and can ensure pixel-level consistency between the running interface effect and the UI design mockup on electronic devices with different screen sizes and resolutions; it requires less work and runs efficiently.

[0080] In this embodiment, when a user interface image cannot be adapted for display on any display screen, the interface type of the current user interface on that screen is first determined. Corresponding adaptation solutions are then provided for different interface types. This is simple to implement, requires no new size units, and eliminates the need for any redundant size files. It achieves the goal of adapting the same design rendering to any display screen on any electronic device. This enables the same user interface display effect for the same design rendering on display screens of different sizes and resolutions, achieving the technical effect of adapting the same design rendering to display on screens of different sizes and resolutions.

[0081] In one alternative embodiment, Figure 2 This is a flowchart illustrating an optional user interface diagram adaptation and display method provided in an embodiment of this application, as shown below. Figure 2 As shown, the above-mentioned adaptation processing method, determined according to the interface type of the current user interface, includes:

[0082] S201, if the interface type indicates that the current user interface is a scrollable interface, then the user interface diagram is adapted and displayed on the current user interface according to the width scaling factor of the current user interface.

[0083] S202, if the interface type indicates that the current user interface is a non-scrollable interface, then obtain the third ratio of the vertical outer margin of the current user interface to the current user interface, and determine the adaptation processing method based on the third ratio.

[0084] As described above, a scrollable interface refers to dynamic content that can be scrolled up and down within the current user interface, such as a text messaging chat interface or a list display interface; a non-scrollable interface refers to fixed content that cannot be scrolled up and down within the current user interface, such as a call interface.

[0085] Optional, width scaling factor: widthScale = screenWidth / desiredWidth.

[0086] Optionally, in one example, if the current user interface is a scrollable interface, the user interface diagram is scaled using a width scaling factor (widthScale) to achieve an adaptive display effect, which is equivalent to the difference between displaying more or fewer layers in the full-screen user interface diagram.

[0087] In another example, Figure 3 This is a flowchart illustrating an optional user interface diagram adaptation and display method provided in an embodiment of this application, as shown below. Figure 3As shown, based on the width scaling factor of the current user interface, the user interface diagram is adapted and displayed on the current user interface, including:

[0088] S301, based on the width scaling factor of the current user interface, scale the width and height of the user interface diagram to obtain the scaled user interface diagram.

[0089] S302, adapt and display the scaled user interface diagram onto the current user interface.

[0090] In one example, the width and height of the aforementioned user interface diagram are scaled; that is, the width and height of the layers marked on the user interface diagram are scaled. Optionally, these layers can be buttons, text blocks, etc., and include attributes such as width, height, margin, and padding. Each layer is drawn onto a view on the display screen. This view is the most basic object for adaptation processing and can be a rectangular area on the display screen, including attributes such as width, height, margin, and padding. Each view corresponds to a layer on the user interface diagram.

[0091] In one example, consider layer 'a' in a user interface diagram. Layer 'a' has a width of a-desiredWidth and a height of a-desiredHeight. The scaling factor is calculated as the width of layer 'a-desiredWidth' multiplied by the width scaling factor widthScale, and the height of layer 'a-desiredHeight' multiplied by the width scaling factor widthScale. In other words, the scaling factor widthScale is used to perform scaling calculations in both the horizontal (width) and vertical (height) directions to obtain the scaled user interface diagram.

[0092] In the above example, the third size ratio information of the scaled user interface diagram is adapted to the second size ratio information. Therefore, the scaled user interface diagram is adapted to any display screen, which means that the scaled user interface diagram can be adapted to be displayed on the current user interface of any display screen.

[0093] In this embodiment, a corresponding adaptation solution is provided for scrollable interfaces. It is simple to implement, requires no definition of new size units, and requires no redundant size files. It can achieve the purpose of adapting and displaying the same design rendering on any display screen of any electronic device.

[0094] Optionally, if the aforementioned interface type indicates that the current user interface is a non-scrollable interface, such as a call interface, then in this embodiment of the application, a third ratio of the vertical outer margin of the current user interface to the current user interface can be obtained to determine the adaptation processing method based on the third ratio.

[0095] In another example, the adaptation process is determined based on the third ratio mentioned above, including:

[0096] S401, if the third ratio is greater than the preset ratio, then determine the horizontal margin and inner margin of the current user interface.

[0097] S402, according to the weight value corresponding to the vertical margin, the remaining interface on the current user interface is allocated to the vertical margin so as to scale the vertical margin; and according to the width scaling factor of the current user interface, the horizontal margin and inner margin of the user interface diagram are scaled respectively to obtain the scaled user interface diagram.

[0098] S403, adapt and display the scaled user interface image to the current user interface.

[0099] In one example, the aforementioned preset ratio may be, but is not limited to, 50% of the current user interface. If the third ratio of the vertical outer margin P-margin to the current user interface is greater than the preset ratio, i.e., 50% of the current user interface, then the horizontal outer margin O-margin and inner margin padding of the current user interface are determined.

[0100] like Figure 4 As shown, the vertical margin P-margin of the user interface diagram includes margin1, margin2, and margin3 on user interface diagrams (a), (b), and (c). Since corresponding weight values ​​(width) are pre-set for each vertical margin P-margin, these weight values ​​represent the allocation weights of different vertical margins P-margins to the remaining space of the current user interface on the display screen. Furthermore, based on the corresponding weight values ​​set for each vertical margin P-margin, the remaining interface space on the current user interface is allocated to the vertical margin, thereby scaling the vertical margin P-margin. Additionally, based on the width scaling factor (widthScale) of the current user interface, the horizontal margin O-margin and inner margin padding of the user interface diagram are scaled, ultimately resulting in a scaled user interface diagram.

[0101] like Figure 4Taking the user interface diagram (a) with a screen size of 2436*1125, user interface diagram (b) with a screen size of 1920*1080, and user interface diagram (c) with a screen size of 1134*750 as examples, the display effect is as follows: Figure 4 As shown. For example, Figure 4 The first ratio of the user interface diagram (b) shown is Des i gnHWRat io = 1920 / 1080 = 1.777. Assuming that the value range of the second ratio ScreenHWRat io for any display screen is basically between [1.512(1134 / 750)-2.165(2436 / 1125)]; under the same width, the second ratio of the display screen increases by (2.165-1.777) / 1.777 = 21.8% or decreases by (1.777-1.512) / 1.777 = 14.9% compared to the first ratio of the user interface diagram; under the same width, the maximum error between the height of the display screen and the height of the user interface diagram is 21.8%.

[0102] like Figure 4 As shown, the Registration view (Login) and Register view (Register) in user interface diagrams (a), (b), and (c) are scaled using a width scaling factor to ensure that the aspect ratio of the Registration view (Login) and Register view (Register) is consistent with the aspect ratio of the user interface diagram (i.e., the first ratio), so that the display effect is not distorted. The margin1, margin2, and margin3 in user interface diagrams (a), (b), and (c) are allocated to the remaining interface on the current user interface using pre-set weight values ​​so that the scaling of margin1, margin2, and margin3 results in the scaled user interface diagram.

[0103] Using the embodiments of this application, the aforementioned vertical outer margins P-margin: margin1, margin2, and margin3 are stretched by (ScreenHWRatio - DesignHWRatio) / DesignHWRatio*ScreenHeight pixels in the vertical direction (i.e., the height direction); or compressed by (DesignHWRatio - ScreenHWRatio) / DesignHWRatio*ScreenHeight pixels.

[0104] In this embodiment of the application, for non-scrollable interfaces, a more precise and targeted adaptation processing scheme is given based on the relationship between the third ratio of the vertical outer margin P-margin to the current user interface and the preset ratio. For example, if the third ratio is greater than the preset ratio, the scheme is simple to implement, requires no definition of new size units, and requires no redundant size files. This allows the same design rendering to be adapted and displayed on any screen of any electronic device.

[0105] In one example, determining the adaptation processing method based on the aforementioned third ratio includes:

[0106] S501, if the third ratio is less than or equal to the preset ratio, the width of the user interface diagram is scaled according to the width scaling factor of the current user interface, and the height of the user interface diagram is scaled according to the height scaling factor of the current user interface, to obtain the scaled user interface diagram.

[0107] S502, adapt and display the scaled user interface diagram onto the current user interface.

[0108] Optional, width scaling factor: widthScale = screenWidth / desiredWidth. Optional, height scaling factor: heightScale = screenHeight / desiredHeight.

[0109] In one example, consider layer 'a' in a user interface diagram. Layer 'a' has a width of a-desiredWidth and a height of a-desiredHeight. This is calculated by multiplying the width (a-desiredWidth) by the width scaling factor widthScale and the height (a-desiredHeight) by the height scaling factor heightScale. Specifically, scaling is performed using the width scaling factor widthScale in the horizontal (width) direction and the height scaling factor heightScale in the vertical (height) direction to obtain the scaled user interface diagram.

[0110] With the above scaling processing method, under the condition of the same width, comparison is performed in the longitudinal (height direction), and regarding the height of the display screen relative to the height of the user interface diagram, when heightScale > widthScale, the height of the user interface diagram is stretched, which is increased by (ScreenHWRatio-DesignHWRatio) / DesignHWRatio*ScreenHeight pixels compared to that before processing; when heightScale < widthScale, the height of the user interface diagram is compressed, which is reduced by (DesignHWRatio-ScreenHWRatio) / DesignHWRatio*ScreenHeight pixels compared to that before processing.

[0111] In the above example, the third size ratio information of the user interface diagram after the above scaling processing is adapted to the above second size ratio information, and further, the user interface diagram after the scaling processing is adapted to any display screen, that is, the user interface diagram after the scaling processing can be adapted to be displayed on the current user interface of any display screen.

[0112] In the embodiments of the present application, for non-scrollable interfaces, a corresponding adaptation processing scheme is provided more accurately and pertinently according to the magnitude relationship between the longitudinal outer margin P-margin and the third ratio of the current user interface and the preset ratio, for example, under the condition that the above third ratio is less than or equal to the preset ratio, that is, the height scaling factor and the width scaling factor are used for scaling processing, which is simple to implement, does not need to define a new size unit, and does not need any redundant size file, so that the purpose of adaptively displaying the same design effect diagram on any display screen of any electronic device can be achieved.

[0113] As Figure 5 shown in an example, an optional adaptive display method for a user interface diagram may include, but is not limited to, the following method steps:

[0114] S601: Acquire a user interface diagram, and first size ratio information of the user interface diagram.

[0115] S602: If the first size ratio information is not adapted to the second size ratio information of any display screen, determine the interface type of the current user interface on any of the above display screens.

[0116] S603: If the interface type indicates that the current user interface is a scrollable interface, perform scaling processing on the width and height of the user interface diagram respectively according to the width scaling factor of the current user interface, so as to obtain a scaled user interface diagram.

[0117] S604, if the interface type indicates that the current user interface is a non-scrollable interface, then obtain the third ratio of the vertical outer margin of the current user interface to the current user interface.

[0118] In this embodiment of the application, if the third ratio is greater than the preset ratio, then S605 is executed; if the third ratio is less than or equal to the preset ratio, then S606 is executed.

[0119] S605, determine the horizontal outer margin and inner margin of the current user interface, allocate the remaining interface on the current user interface to the above-mentioned vertical outer margin according to the weight value corresponding to the vertical outer margin, so as to scale the vertical outer margin; and scale the horizontal outer margin and inner margin of the user interface diagram according to the width scaling factor of the current user interface, to obtain the scaled user interface diagram.

[0120] S606, the width of the user interface diagram is scaled according to the width scaling factor of the current user interface, and the height of the user interface diagram is scaled according to the height scaling factor of the current user interface, to obtain the scaled user interface diagram.

[0121] In this embodiment of the application, after executing S603, S605 and S606 to obtain the scaled user interface diagram, S607 is executed in each case.

[0122] S607 adapts the scaled user interface image to the current user interface for display.

[0123] It should be noted that the details and specific implementation methods of the above steps S601 to S607 are described above, and the embodiments of this application will not be repeated in detail.

[0124] In this embodiment, the designer uses `degisnWidth*degisgnHeight` as a baseline to design the rendering and annotates the layer dimensions (width, height, margin, padding) of the rendering. The development engineer implements the adaptive display according to the rendering and, based on the designer's annotation information, such as the size information in pixels (px), directly sets the width, height, padding, and margin of the view on the display screen. For scrollable interfaces, the development engineer uses a width scaling factor to achieve adaptive display of the rendering. For non-scrollable interfaces, the development engineer uses a width scaling factor and a height scaling factor, or uses a width scaling factor combined with the weight ratio of P-margin to allocate the remaining space to achieve adaptive display of the rendering.

[0125] Using the embodiments of this application, designers and development engineers can achieve pixel-level precision in adapting and displaying the design renderings with minimal workload, using the same design renderings and a set of Android system layout files. Only when adapting and displaying fixed, non-scrollable interfaces, there is an error in the size of the vertical outer margin, which may be stretched or compressed by a few pixels.

[0126] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties. Furthermore, the collection, use and processing of the relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and corresponding operation portals are provided for users to choose to authorize or refuse.

[0127] According to one or more embodiments of this application, an adaptive display device for a user interface diagram is provided. Figure 6 A structural block diagram of an adaptive display device for a user interface diagram provided in this application embodiment is shown below. Figure 6 As shown, the above-mentioned device includes:

[0128] The acquisition module 601 is used to acquire the user interface diagram and the first size ratio information of the user interface diagram, wherein the user interface diagram is designed based on the reference design data and is a design effect diagram for adaptation and display on any display screen.

[0129] The first determining module 602 is used to determine the interface type of the current user interface on any of the above-mentioned display screens if the first size ratio information does not match the second size ratio information of any of the above-mentioned display screens.

[0130] The second determining module 603 is used to determine the corresponding adaptation processing method according to the interface type of the current user interface, so as to process the first size ratio information to be adapted to the second size ratio information using the above adaptation processing method.

[0131] The adaptation display module 604 is used to adapt and display the user interface diagram on the current user interface on any of the display screens if the first size ratio information and the second size ratio information are adapted.

[0132] According to one or more embodiments of this application, the first size ratio information includes: a first ratio of the width to the height of the user interface diagram; the second size ratio information includes: a second ratio of the width to the height of any of the display screens; and the device further includes:

[0133] The third determining module is used to determine that the first size ratio information and the second size ratio information are compatible if the first ratio is equal to the second ratio.

[0134] The fourth determining module is used to determine that the first size ratio information and the second size ratio information are not compatible if the first ratio is not equal to the second ratio.

[0135] According to one or more embodiments of this application, the second determining module described above includes:

[0136] The first determining unit is configured to, if the interface type indicates that the current user interface is a scrollable interface, adapt and display the user interface diagram onto the current user interface according to the width scaling factor of the current user interface.

[0137] The second determining unit is configured to, if the interface type indicates that the current user interface is a non-scrollable interface, obtain the vertical outer margin of the current user interface and the third ratio of the current user interface, and determine the adaptation processing method based on the third ratio.

[0138] According to one or more embodiments of this application, the first determining unit is further configured to: scale the width and height of the user interface diagram according to the width scaling factor of the current user interface to obtain a scaled user interface diagram, wherein the third size ratio information of the scaled user interface diagram is adapted to the second size ratio information; and display the scaled user interface diagram on the current user interface.

[0139] According to one or more embodiments of this application, the second determining unit is further configured to: if the third ratio is greater than a preset ratio, determine the horizontal outer margin and inner margin of the current user interface; allocate the remaining interface on the current user interface to the vertical outer margin according to the weight value corresponding to the vertical outer margin, so as to scale the vertical outer margin; and scale the horizontal outer margin and inner margin of the user interface diagram according to the width scaling factor of the current user interface to obtain a scaled user interface diagram; and adapt and display the scaled user interface diagram on the current user interface.

[0140] According to one or more embodiments of this application, the second determining unit is further configured to: if the third ratio is less than or equal to a preset ratio, scale the width of the user interface diagram according to the width scaling factor of the current user interface, and scale the height of the user interface diagram according to the height scaling factor of the current user interface, to obtain a scaled user interface diagram; and adapt the scaled user interface diagram to display on the current user interface.

[0141] In an exemplary embodiment, this application also provides an electronic device, including: a processor, and a memory connected to the processor;

[0142] The aforementioned memory stores instructions executed by the computer;

[0143] The processor executes computer execution instructions stored in the memory to implement any of the methods described above.

[0144] In an exemplary embodiment, this application also provides a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, are used to implement the methods described above.

[0145] In an exemplary embodiment, this application also provides a computer program product, including a computer program that, when executed by a processor, implements any of the methods described above.

[0146] To implement the above embodiments, this application also provides an electronic device. (See reference...) Figure 7 The diagram illustrates a structural schematic of an electronic device 700 suitable for implementing embodiments of this application. The electronic device 700 can be a terminal device or a server. The terminal device can include, but is not limited to, mobile terminals such as mobile phones, laptops, digital broadcast receivers, messaging devices, game consoles, medical devices, fitness equipment, personal digital assistants (PDAs), tablet computers (PADs), portable multimedia players (PMPs), and in-vehicle terminals (e.g., in-vehicle navigation terminals), as well as fixed terminals such as digital TVs and desktop computers. Figure 7 The electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of this application.

[0147] like Figure 7As shown, the electronic device 700 may include a processing unit (e.g., a central processing unit, a graphics processing unit, etc.) 701, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 702 or a program loaded from a storage device 708 into a random access memory (RAM) 703. The RAM 703 also stores various programs and data required for the operation of the electronic device 700. The processing unit 701, ROM 702, and RAM 703 are interconnected via a bus 704. An input / output (I / O) interface 705 is also connected to the bus 704.

[0148] Typically, the following devices can be connected to I / O interface 705: input devices 706 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 707 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 708 including, for example, magnetic tapes, hard disks, etc.; and communication devices 709. Communication device 709 allows electronic device 700 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 7 An electronic device 700 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively.

[0149] Specifically, according to embodiments of this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication device 709, or installed from storage device 708, or installed from ROM 702. When the computer program is executed by processing device 701, it performs the functions defined in the methods of embodiments of this application.

[0150] It should be noted that the computer-readable medium described above in this application can be a computer-readable signal medium, a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor device or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this application, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution device or apparatus. In this application, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium may be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution device or apparatus. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wires, optical fibers, RF (radio frequency), etc., or any suitable combination thereof.

[0151] The aforementioned computer-readable medium may be included in the aforementioned electronic device; or it may exist independently and not assembled into the electronic device.

[0152] The aforementioned computer-readable medium carries one or more programs, which, when executed by the electronic device, cause the electronic device to perform the methods shown in the above embodiments.

[0153] Computer program code for performing the operations of this application can be written in one or more programming languages ​​or a combination thereof. These programming languages ​​include object-oriented programming languages—such as Java, SmallTalk, and C++—and conventional procedural programming languages—such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a Local Area Network (LAN) or a Wide Area Network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0154] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of methods and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0155] The units described in the embodiments of this application can be implemented in software or in hardware. The name of a unit does not necessarily limit the unit itself; for example, the first acquisition unit can also be described as "a unit that acquires at least two Internet Protocol addresses".

[0156] The functions described above in this document can be performed, at least in part, by one or more hardware logic components. For example, exemplary types of hardware logic components that can be used, without limitation, include: Field Programmable Gate Arrays (FPGAs), Application-Specific Integrated Circuits (ASICs), Application-Specific Standard Products (ASSPs), System-on-Chip (SoCs), Complex Programmable Logic Devices (CPLDs), and so on.

[0157] In the context of this application, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution apparatus or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor device or device, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0158] Other embodiments of this application will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of this application that follow the general principles of this application and include common knowledge or customary techniques in the art not disclosed herein. The specification and examples are to be considered exemplary only, and the true scope and spirit of this application are indicated by the following claims.

[0159] It should be understood that this application is not limited to the precise structure described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this application is limited only by the appended claims.

Claims

1. A method for adapting and displaying a user interface diagram, characterized in that, The method includes: Obtain a user interface diagram and its first size ratio information, wherein the user interface diagram is a design rendering based on benchmark design data and is used to adapt the display on any display screen. If the first size ratio information does not match the second size ratio information of any of the display screens, then the interface type of the current user interface on any of the display screens is determined; The corresponding adaptation processing method is determined according to the interface type of the current user interface, so as to use the adaptation processing method to process the first size ratio information to adapt to the second size ratio information; If the first size ratio information matches the second size ratio information, the user interface diagram is displayed on the current user interface on any of the display screens. The step of determining the corresponding adaptation processing method based on the interface type of the current user interface includes: If the interface type indicates that the current user interface is a scrollable interface, then the width and height of the user interface image are scaled according to the width scaling factor of the current user interface to obtain a scaled user interface image, wherein the third size ratio information of the scaled user interface image is adapted to the second size ratio information; the scaled user interface image is then adapted and displayed on the current user interface. If the interface type indicates that the current user interface is a non-scrollable interface, then obtain the third ratio of the vertical margin of the current user interface to the current user interface; wherein, the vertical margin refers to the blank area between the content area of ​​the current user interface and the top and bottom edges of the display screen. If the third ratio is greater than a preset ratio, then the horizontal margin and inner margin of the current user interface are determined; according to the weight value corresponding to the vertical margin, the remaining interface on the current user interface is allocated to the vertical margin so that the vertical margin is scaled; and according to the width scaling factor of the current user interface, the horizontal margin and inner margin of the user interface image are scaled respectively to obtain the scaled user interface image; the scaled user interface image is adapted and displayed on the current user interface. If the third ratio is less than or equal to the preset ratio, the width of the user interface image is scaled according to the width scaling factor of the current user interface, and the height of the user interface image is scaled according to the height scaling factor of the current user interface, to obtain a scaled user interface image; the scaled user interface image is then adapted and displayed on the current user interface.

2. The method according to claim 1, characterized in that, The first size ratio information includes: a first ratio of the width to the height of the user interface diagram; the second size ratio information includes: a second ratio of the width to the height of any of the display screens; the method further includes: If the first ratio is equal to the second ratio, then it is determined that the first size ratio information and the second size ratio information are compatible. If the first ratio is not equal to the second ratio, then it is determined that the first size ratio information and the second size ratio information are not compatible.

3. A user interface diagram adaptation display device, wherein the user interface diagram adaptation display device is used to implement the user interface diagram adaptation display method according to claim 1 or 2, characterized in that, The device includes: The acquisition module is used to acquire a user interface diagram and a first size ratio information of the user interface diagram, wherein the user interface diagram is designed based on benchmark design data and is a design effect diagram for adaptation and display on any display screen; The first determining module is used to determine the interface type of the current user interface on any display screen if the first size ratio information does not match the second size ratio information of any display screen. The second determining module is used to determine the corresponding adaptation processing method according to the interface type of the current user interface, so as to use the adaptation processing method to process the first size ratio information to adapt to the second size ratio information. An adaptation display module is used to adapt and display the user interface diagram on the current user interface on any of the display screens if the first size ratio information matches the second size ratio information.

4. An electronic device, characterized in that, include: A processor, and a memory connected to the processor; The memory stores computer-executed instructions; The processor executes computer execution instructions stored in the memory to implement the method as described in claim 1 or 2.

5. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when executed by a processor, are used to implement the method as described in claim 1 or 2.

6. A computer program product, characterized in that, Includes a computer program that, when executed by a processor, implements the method of claim 1 or 2.

Images