CN111190672A - UI (user interface) adaptation method of electronic equipment, electronic equipment and storage medium - Google Patents
UI (user interface) adaptation method of electronic equipment, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN111190672A CN111190672A CN201911330728.XA CN201911330728A CN111190672A CN 111190672 A CN111190672 A CN 111190672A CN 201911330728 A CN201911330728 A CN 201911330728A CN 111190672 A CN111190672 A CN 111190672A
- Authority
- CN
- China
- Prior art keywords
- interface
- adaptation
- standard
- distance
- control
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application discloses a UI (user interface) adaptation method of electronic equipment, the electronic equipment and a computer-readable storage medium, wherein the UI adaptation method of the electronic equipment comprises the following steps: acquiring the logic resolution of the electronic equipment and the logic resolution of standard equipment; obtaining an adaptive scale factor according to the logic resolution of the electronic equipment and the logic resolution of the standard equipment; acquiring interface element information of a UI (user interface) to be adapted on the standard equipment; and adjusting the interface element information in the UI interface to be adapted by adopting the adaptation scale factor to obtain the adapted UI interface so that the electronic equipment can display the adapted UI interface. By the method, the UI can achieve a better display effect when displayed on different electronic devices.
Description
Technical Field
The present application relates to the field of display technologies, and in particular, to a UI interface adaptation method for an electronic device, and a storage medium.
Background
With the rapid development of information technology and electronic technology, the screen size of electronic devices is more and more diversified, which means that developers of application development need to develop multiple sets of UI interfaces for the same application to adapt to the screen sizes of different electronic devices, which undoubtedly increases the workload of the developers, consumes time and labor, and thus the UI Interface (User Interface) adaptation on electronic devices is more and more important.
Taking an iOS (mobile operating system developed by apple) device as an example, differences between resolutions and sizes of iOS devices in the current market are large, if an App (Application) needs to be simultaneously issued on devices such as an iPad series (tablet personal computer series issued in 2010 by apple), an iPhone series (smartphone series developed under apple, for example, iPhone X with a bang-bang screen and iPhone6s with a non-bang screen), and the like, UI interface adaptation is a delicate problem, and a way with high user experience is to develop multiple sets of UI interfaces with different sizes to adapt, so that multiple sets of adaptation codes are needed, and extra manpower is needed and troubles are brought to App maintenance.
Disclosure of Invention
The technical problem mainly solved by the application is to provide a UI interface adaptation method of an electronic device, the electronic device and a storage medium, so that a better display effect can be achieved when a UI interface is displayed on different electronic devices.
In order to solve the above problem, a first aspect of the present application provides a UI interface adaptation method for an electronic device, where the method includes: acquiring the logic resolution of the electronic equipment and the logic resolution of standard equipment; obtaining an adaptive scale factor according to the logic resolution of the electronic equipment and the logic resolution of the standard equipment; acquiring interface element information of a UI (user interface) to be adapted on the standard equipment; and adjusting the interface element information in the UI interface to be adapted by adopting the adaptation scale factor to obtain the adapted UI interface so that the electronic equipment can display the adapted UI interface.
To solve the above problem, a second aspect of the present application provides an electronic device, including a memory and a processor coupled to each other; the memory is used for storing program data; the processor executes the program data to realize the UI interface adaptation method of the electronic equipment.
To solve the above-mentioned problems, a third aspect of the present application provides a computer-readable storage medium storing program data that can be executed to implement the UI interface adaptation method of the electronic device described above.
The beneficial effect of this application is: different from the prior art, the method includes the steps of firstly obtaining the logic resolution of the electronic device and the logic resolution of the standard device, obtaining an adaptation scale factor according to the logic resolution of the electronic device and the logic resolution of the standard device, then obtaining interface element information of the UI interface to be adapted on the standard device, and adjusting the interface element information in the UI interface to be adapted by adopting the adaptation scale factor to obtain the adapted UI interface so that the electronic device can display the adapted UI interface. By the mode, the UI can achieve a good display effect when displayed on different electronic devices, so that the UI can be adapted to the general screens of different electronic devices by using smaller resources, the display method is beneficial to reducing the differentiation degree of the UI displayed on different electronic devices, and the visual effect almost consistent with the design draft can be brought to a user.
Drawings
FIG. 1 is a flowchart illustrating an embodiment of a UI interface adaptation method of an electronic device according to the present application;
FIG. 2 is a schematic edge distance diagram of a relative display area of a control position of a control in a UI interface to be adapted according to the present application;
3 a-3 c are schematic diagrams illustrating the effect of the UI interface to be adapted of the UI interface adaptation method of the electronic device being adapted, after the UI interface is adapted on different electronic devices, being displayed;
FIG. 4 is a schematic structural diagram of an embodiment of an electronic device provided in the present application;
FIG. 5 is a schematic structural diagram of an embodiment of a computer-readable storage medium provided in the present application.
Detailed Description
The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments.
In the following description, for purposes of explanation and not limitation, specific details are set forth such as particular system structures, interfaces, techniques, etc. in order to provide a thorough understanding of the present application.
The terms "system" and "network" are often used interchangeably herein. The term "and/or" herein is merely an association describing an associated object, meaning that three relationships may exist, e.g., a and/or B, may mean: a exists alone, A and B exist simultaneously, and B exists alone. In addition, the character "/" herein generally indicates that the former and latter related objects are in an "or" relationship. Further, the term "plurality" herein means two or more than two.
The electronic equipment can be electronic equipment with a display function, such as a smart phone, a smart watch, a tablet computer and a notebook computer. The UI interface adaptation method of the electronic equipment can adjust and adapt the UI interface of a certain application program installed on the electronic equipment, and simplifies the adaptation work of the UI interfaces on different electronic equipment on the premise of ensuring the normal display effect of the UI interfaces. Referring to fig. 1, fig. 1 is a schematic flowchart illustrating an embodiment of a UI interface adaptation method of an electronic device according to the present application. The UI interface adaptation method of the electronic equipment comprises the following steps:
step S101: and acquiring the logic resolution of the electronic equipment and the logic resolution of the standard equipment.
It is understood that the resolution is the number of pixels included in the display screen or picture, the number of pixels included is referred to as the physical resolution, and the number of pixels included is referred to as the logical resolution. In reality, the physical resolution of the display screen of the electronic device is not necessarily equal to the logical resolution, for example, the logical resolution of a smartphone with a physical resolution of 320 × 480 is 640 × 960.
In this application, the electronic device refers to a device that needs to perform UI interface adaptation, and the standard device refers to a device used in configuring a UI interface to be adapted in advance. It can be understood that, because the UI interface to be adapted is configured on the standard device, the interface parameters of the UI interface to be adapted are matched with the screen parameters of the standard device, and therefore, when the UI interface to be adapted is adapted and displayed on the electronic device, the UI interface to be adapted needs to be adapted and adjusted according to the logic resolution of the electronic device and the logic resolution of the standard device, and therefore, the logic resolution of the electronic device and the logic resolution of the standard device need to be obtained.
Step S102: and obtaining the adaptive scale factor according to the logic resolution of the electronic equipment and the logic resolution of the standard equipment.
The adaptation scale factor is a ratio of the logic resolution of the electronic device to the logic resolution of the standard device, and is used as a standard for interface adaptation adjustment of the electronic device, and the adaptation can be completed by adjusting the UI interface to be adapted according to the adaptation scale factor.
Step S103: and acquiring interface element information of the UI to be adapted on the standard equipment.
It can be understood that the interface element information refers to information content of elements included in the UI interface to be adapted, for example, icons, pictures, texts, controls, and the like are interface elements, and the information content of the elements generally includes element position and/or element size information of the interface elements; the UI interface to be adapted is configured on the standard equipment, so the interface parameters of the UI interface to be adapted are matched with the screen parameters of the standard equipment, so that the UI interface to be adapted can display the optimal display effect on the standard equipment, and therefore, the interface element information of the UI interface to be adapted on the standard equipment can be used as the effect standard of the UI interface to be adapted on the electronic equipment to be identified.
Step S104: and adjusting interface element information in the UI interface to be adapted by adopting the adaptation scale factor to obtain the adapted UI interface so that the electronic equipment can display the adapted UI interface.
The adapted UI interface is the UI interface obtained after adjusting the interface element information in the UI interface to be adapted according to the adaptation scale factor. Specifically, after interface element information of the UI interface to be adapted on the standard device is acquired, the interface element information is adjusted by using the adaptation scale factor, so that the interface element information in the adapted UI interface can be acquired, that is, the adapted UI interface is acquired. It can be understood that the display effect of the adapted UI interface obtained by adjusting the interface element information by using the adaptation scale factor is better when the UI interface is displayed on the electronic device.
In this embodiment, the logic resolution of the electronic device and the logic resolution of the standard device are first obtained, the adaptation scaling factor is obtained according to the logic resolution of the electronic device and the logic resolution of the standard device, then the interface element information of the UI interface to be adapted on the standard device is obtained, the interface element information in the UI interface to be adapted is adjusted by using the adaptation scaling factor, and the adapted UI interface is obtained, so that the electronic device displays the adapted UI interface. By the mode, the UI can achieve a good display effect when displayed on different electronic devices, so that the UI can be adapted to the general screens of different electronic devices by using smaller resources, the display method is beneficial to reducing the differentiation degree of the UI displayed on different electronic devices, and the visual effect almost consistent with the design draft can be brought to a user.
In one embodiment, the logical resolution of the electronic device comprises a target logical resolution width and a target logical resolution height, and the logical resolution of the standard device comprises a standard logical resolution width and a standard logical resolution height; the adaptation scale factors include a width adaptation scale factor and a height adaptation scale factor. At this time, the step S102 may include: and obtaining a width adaptation scale factor according to the width of the target logic resolution and the width of the standard logic resolution, and obtaining a height adaptation scale factor according to the height of the target logic resolution and the height of the standard logic resolution. It is understood that, since different electronic devices may have different logical resolutions, there may be cases where the resulting width adaptation scale factor is different in size from the height adaptation scale factor; however, in order to avoid deformation of the interface elements in the obtained adapted UI interface when displayed on the electronic device, only one of the width adaptation scale factor and the height adaptation scale factor is used to adjust the interface element information of the UI interface to be adapted, so that the ratio of all the interface element information in the width and the height is not changed. That is, the step of adjusting the interface element information in the UI interface to be adapted by using the adaptation scale factor in step S104 includes: and adjusting the interface element information of the UI interface to be adapted by adopting the width adaptation scale factor or the height adaptation scale factor.
In addition, before the UI interface is adapted, it is necessary to ensure that the screen widths and screen heights of the electronic device and the standard device are consistent, that is, to ensure that both the electronic device and the standard device are displayed in a horizontal screen or a vertical screen. If the electronic equipment and the standard equipment are displayed on the horizontal screen, the target logic resolution width of the electronic equipment is larger than the target logic resolution height, and the standard logic resolution width of the standard equipment is larger than the standard logic resolution height; and if the electronic equipment and the standard equipment are displayed in a vertical screen mode, the target logic resolution width of the electronic equipment is smaller than the target logic resolution height, and the standard logic resolution width of the standard equipment is smaller than the standard logic resolution height.
Further, the display screen of the electronic device can be a special-shaped screen or a non-special-shaped screen. It will be appreciated that to facilitate the adaptation of the UI interface, the standard device used in advance to configure the UI interface to be adapted should be a non-shaped screen.
In one embodiment, the electronic device and the standard device are both horizontal screen displays, the display screens of the standard device and the electronic device are both non-irregular screens, the height adaptation scale factor is equal to the height of the target logic resolution divided by the height of the standard logic resolution, and the width adaptation scale factor is equal to the width of the target logic resolution divided by the width of the standard logic resolution. The non-special-shaped screen is a display screen with a rectangular display area, the width adaptation scale factor is the ratio of the target logic resolution width of the electronic equipment to the standard logic resolution width of the standard equipment, and the height adaptation scale factor is the ratio of the target logic resolution height of the electronic equipment to the standard logic resolution height of the standard equipment and is used as a standard for UI interface adaptation adjustment of the electronic equipment. For example, when the target logical resolution width and the standard logical resolution width are W1, W2, respectively, then the width adaptation scale factor Rw is W1/W2; when the target logical resolution height and the standard logical resolution height are H1 and H2, respectively, the height adaptation scale factor Rh is H1/H2.
In another embodiment, both the electronic device and the standard device are horizontal screen displays, the display screen of the standard device is a non-irregular screen, and the display screen of the electronic device is an irregular screen, where the irregular screen refers to a display screen whose display area is irregular, such as the liuhai screen of iPhone X, at this time, the height adaptation scaling factor is equal to the target logical resolution height divided by the standard logical resolution height, and the width adaptation scaling factor is determined by the value of the height adaptation scaling factor, for example, when the height adaptation scaling factor is equal to 1, the width adaptation scaling factor is equal to 1, and when the height adaptation scaling factor is not equal to 1, the width adaptation scaling factor is equal to 1.1. Taking standard equipment as iPhone6s as an example, the logic resolution width of the iPhone6s is 667, and the logic resolution height is 375, that is, the standard logic resolution width of the standard equipment is 667 and the standard logic resolution height of the standard equipment is 375; therefore, when the target logical resolution height of the electronic device to be adapted is equal to 375, i.e. the height adaptation scaling factor is equal to 1, the width adaptation scaling factor thereof is set equal to 1, and when the target logical resolution height of the electronic device to be adapted is not equal to 375, i.e. the height adaptation scaling factor is not equal to 1, the width adaptation scaling factor thereof is set equal to 1.1.
In this application, the interface element information may include at least one of a control size, a control position, and a text size.
In one embodiment, the interface element information is a control size, and the control size includes a control width and a control height; in the step S104, adjusting the interface element information in the UI interface to be adapted by using the adaptation scale factor to obtain the adapted UI interface includes: and multiplying the width and the height of the standard control in the UI interface to be adapted by an adaptation scale factor to obtain the width and the height of the target control in the adapted UI interface. The standard control width is the control width of the control when the control is displayed in the standard equipment, the standard control height is the control height of the control when the control is displayed in the standard equipment, the target control width is the control width of the control when the control is displayed in the electronic equipment, and the target control height is the control height of the control when the control is displayed in the electronic equipment. Specifically, the control size may satisfy the following formula:
widthsizeB＝widthsizeA*ratio；
heightsizeB＝heightsizeA*ratio；
wherein, width is standard control width, height is standard control height, ratio is adaptive scale factor, width is target control width, and height is target control height. The adaptive scaling factor can be a width adaptive scaling factor or a height adaptive scaling factor, the adaptive scaling factor is adopted to adjust and adapt the size of the control in the UI interface to be adapted, namely the standard control width of the control of the UI interface to be adapted, which is displayed on the standard equipment, is multiplied by the adaptive scaling factor to obtain the target control width of the control of the UI interface after being adapted, and the standard control height of the control of the UI interface to be adapted, which is displayed on the standard equipment, is multiplied by the adaptive scaling factor to obtain the target control height of the control of the UI interface after being adapted, so that the screen of the electronic equipment can be well adapted under the condition that the ratio of the width to the height of the control is kept unchanged, and the UI interface is ensured to have good display effect.
In one embodiment, the interface element information is a control position, and the control position comprises a first distance and a second distance; in the step S104, adjusting the interface element information in the UI interface to be adapted by using the adaptation scale factor to obtain the adapted UI interface includes: and multiplying the standard first distance and the standard second distance in the UI interface to be adapted by an adaptation scale factor to obtain a target first distance and a target second distance in the adapted UI interface. The standard first distance and the standard second distance may represent positions of the control when the control is displayed in the standard device, and the target first distance and the target second distance may represent positions of the control when the control is displayed in the electronic device.
As an implementation, the first distance is a minimum distance from a point on the control to a first edge of the display area, and the second distance is a minimum distance from a point on the control to a second edge of the display area; or the first distance is the distance from the center of the control to the first edge of the display area, and the second distance is the distance from the center of the control to the second edge of the display area. Wherein the first edge of the display area is adjacent to the second edge of the display area.
Referring to fig. 2, fig. 2 is a schematic edge distance diagram of a relative display area of a control position of a control in a UI interface to be adapted according to the present application. When the first edge of the display area is positioned on the left side of the screen and the second edge of the display area is positioned at the top of the screen, the control follows the principle of layout depending on the upper left corner of the screen, and the front distance (leading space) and the top distance (top space) of the control in the UI interface to be adapted are adjusted and adapted by adopting an adaptation scale factor; when the first edge of the display area is positioned on the left side of the screen and the second edge of the display area is positioned at the bottom of the screen, the control follows the principle of layout depending on the lower left corner of the screen, and the front distance (leadingspace) and the bottom distance (bottom space) of the control in the UI interface to be adapted are adjusted and adapted by adopting an adaptation scale factor; when the first edge of the display area is positioned at the right side of the screen and the second edge of the display area is positioned at the top of the screen, the control follows the principle of layout by the upper right corner of the screen, and the rear distance (trailing space) and the top distance (top space) of the control in the UI interface to be adapted are adjusted and adapted by adopting an adaptation scale factor; when the first edge of the display area is positioned at the right side of the screen and the second edge of the display area is positioned at the bottom of the screen, the control follows the principle of layout depending on the lower right corner of the screen, and the rear distance (trailing space) and the bottom distance (bottom space) of the control in the UI interface to be adapted are adjusted and adapted by adopting an adaptation scale factor; in addition, the layout of the control position can adopt a code layout or a graphical layout. Specifically, the control position may satisfy the following formula: (XB, YB) ═ XA ratio, YA ratio); wherein XA is a standard first distance, YA is a standard second distance, ratio is an adaptation scale factor, XB is a target first distance, and YB is a target second distance. The method comprises the steps of adopting an adaptation scale factor to adjust and adapt the position of a control in a UI interface to be adapted, namely multiplying a standard first distance of the control of the UI interface to be adapted, which is displayed on standard equipment, by the adaptation scale factor to obtain a target first distance of the control of the UI interface after adaptation, multiplying a standard second distance of the control of the UI interface to be adapted, which is displayed on the standard equipment, by the adaptation scale factor to obtain a target second distance of the control of the UI interface after adaptation, so that when the UI interface after adaptation is displayed on electronic equipment, the control position of the control is better adapted to a screen of the electronic equipment, and the UI interface is ensured to have a good display effect.
As another possible implementation, the first distance is a minimum distance from a point on the control to a center of the display area, and the second distance is a minimum distance from a point on the control to the center of the display area; or the first distance is the distance from the center of the control to the center of the display area, and the second distance is the distance from the center of the control to the center of the display area.
Continuing to refer to fig. 2, the controls may also follow the principle of layout by the center of the screen, and at this time, the adaptation scale factor is used to adjust and adapt the horizontal distance (center X) and the vertical distance (center Y) of the controls in the UI interface to be adapted; specifically, when the UI interface to be adapted is adapted, a transparent container may be created at the screen position of the electronic device to be adapted, and the center of the container is the center of the screen, so that the control in the UI interface may be laid out according to the transparent container as a reference, for example, by setting the lateral distance and the longitudinal distance of the control relative to the center of the container, and processing the lateral distance and the longitudinal distance according to the corresponding adaptation scaling factor between the standard device and the logic resolution of the electronic device, the layout of the control in the container may be adjusted. At this time, the control position may satisfy the following formula: (center XB, center YB) ═ center XA ratio, center YA ratio); wherein, center XA is a standard first distance, center YA is a standard second distance, ratio is an adaptive scale factor, center XB is a target first distance, and center YB is a target second distance.
Further, the display area is a content view area set in a display screen of the electronic device; when the display screen of the electronic equipment is a special-shaped screen, the display area is a non-special-shaped area arranged in the display screen of the electronic equipment; when the display screen of the electronic equipment is a non-special-shaped screen, the display area is the display screen of the electronic equipment. Specifically, a content view portion (content view) may be added to a visual view controller (view controller) of the electronic device, that is, a display area, and it can be understood that when the display screen of the electronic device is a special-shaped screen, for example, a bang screen, the display area is a non-special-shaped area set in the display screen of the electronic device; when the display screen of the electronic device is a non-special-shaped screen, the display area can be set to be full of the display screen of the electronic device, namely, the display area is the display screen of the electronic device.
In one embodiment, the interface element information is a text size, and the text size includes a size of the text; in the step S104, adjusting the interface element information in the UI interface to be adapted by using the adaptation scale factor to obtain the adapted UI interface includes: and obtaining the target size of the characters in the adapted UI according to the standard size of the characters in the UI to be adapted and the adaptation scale factor. The standard size of the characters is the size of the characters when the characters are displayed in standard equipment, and the target size of the characters is the size of the characters when the characters are displayed in electronic equipment. Specifically, the target size of the text may satisfy the following formula:
fontsizeB ═ fontsizeA-5+ ceil (5 × ratio); or
fontsizeB＝ceil(fontsizeA*ratio)；
Wherein fontsizeA is the standard size of the characters, ratio is an adaptive scale factor, fontsizeB is the target size of the characters, ceil is a function name, and the smallest integer greater than or equal to the specified expression is returned.
Different electronic devices have different character size adaptation rules due to different device parameters. The size of the text refers to the point size or the font size corresponding to the font of the text, for example, the point size corresponding to the four-size font is 14, the point size corresponding to the small four-size font is 12, and so on. The adaptation rule of the character size comprises a scaling rule of the character, and the scaling rule of the character is a rule for adjusting the size of the character. Taking the standard device as an iPhone6s as an example, when the electronic device is an iPhone series mobile phone, the target size of the characters can satisfy the formula: fontsizeB ═ fontsizeA-5+ ceil (5 × ratio); and when the electronic device is an iPad series tablet computer, the target size of the characters can satisfy the formula: fontSize ═ ceil (fontSize × widthRatio on iPhone6 s). The size of the characters is adjusted and adapted by adopting the formula, so that the size of the characters in the adapted UI interface can be obtained, and the characters can be normally displayed on the electronic equipment. In addition, the position of the character can be adjusted and adapted by adopting the adjusting and adapting mode of the position of the control.
Please refer to fig. 3a to fig. 3c, where fig. 3a is a schematic diagram of an effect of displaying a UI interface to be adapted in the UI interface adaptation method of the electronic device after being adapted on an iPhone 11 Pro, fig. 3b is a schematic diagram of an effect of displaying a UI interface to be adapted in the UI interface adaptation method of the electronic device after being adapted on an iPhone6, and fig. 3c is a schematic diagram of an effect of displaying a UI interface to be adapted in the UI interface adaptation method of the electronic device after being adapted on an iPad Pro 9.7. Through the UI interface adaptation method of the electronic equipment, developers can release App on different electronic equipment at the same time without developing multiple sets of adaptation codes, so that the adaptation of a universal screen of the electronic equipment can be completed by using smaller resources, and a visual effect almost consistent with a design draft is brought to users.
Referring to fig. 4, fig. 4 is a schematic structural diagram of an embodiment of an electronic device provided in the present application. The electronic device 40 in the present embodiment includes a memory 401 and a processor 402 coupled to each other; the memory 401 is used to store program data; the processor 402 is configured to execute the program data to implement the UI interface adaptation method of the electronic device as described above.
Furthermore, an Operating System (OS) of the electronic device 40 may be based on Linux, Unix, Windows, etc., for example, iOS or Android, i.e., the electronic device 40 may be an iOS device or an Android device.
Referring to fig. 5, fig. 5 is a schematic structural diagram of an embodiment of a computer-readable storage medium provided in the present application. The computer-readable storage medium 50 of the present application stores therein program data 500 executable by a processor, the program data 500 being for implementing a UI interface adaptation method of an electronic device as described above. The computer readable storage medium 50 may be a device for readable and writable storage, such as a memory chip in a terminal, an SD card, or the like.
In the several embodiments provided in the present application, it should be understood that the disclosed method and apparatus may be implemented in other ways. For example, the above-described apparatus embodiments are merely illustrative, and for example, a division of a module or a unit is merely a logical division, and an actual implementation may have another division, for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection of devices or units through some interfaces, and may be in an electrical, mechanical or other form.
Units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the embodiment.
In addition, functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, and can also be realized in a form of a software functional unit.
The integrated unit, if implemented in the form of a software functional unit and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present application may be substantially implemented or contributed to by the prior art, or all or part of the technical solution may be embodied in a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, a server, a network device, or the like) or a processor (processor) to execute all or part of the steps of the method according to the embodiments of the present application. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and other various media capable of storing program codes.
The above description is only for the purpose of illustrating embodiments of the present application and is not intended to limit the scope of the present application, and all modifications of equivalent structures and equivalent processes, which are made by the contents of the specification and the drawings of the present application or are directly or indirectly applied to other related technical fields, are also included in the scope of the present application.
Claims (13)
1. A UI interface adaptation method of an electronic device, the method comprising:
acquiring the logic resolution of the electronic equipment and the logic resolution of standard equipment;
obtaining an adaptive scale factor according to the logic resolution of the electronic equipment and the logic resolution of the standard equipment;
acquiring interface element information of a UI (user interface) to be adapted on the standard equipment;
and adjusting the interface element information in the UI interface to be adapted by adopting the adaptation scale factor to obtain the adapted UI interface so that the electronic equipment can display the adapted UI interface.
2. The method of claim 1, wherein the logical resolution of the electronic device comprises a target logical resolution width and a target logical resolution height, and the logical resolution of the standard device comprises a standard logical resolution width and a standard logical resolution height; the adaptation scale factor comprises a width adaptation scale factor and a height adaptation scale factor;
the step of obtaining an adaptive scaling factor according to the logic resolution of the electronic device and the logic resolution of the standard device includes:
obtaining the width adaptive scaling factor according to the target logic resolution width and the standard logic resolution width, and obtaining the height adaptive scaling factor according to the target logic resolution height and the standard logic resolution height;
the step of adjusting the interface element information in the UI interface to be adapted by using the adaptation scale factor includes:
and adjusting the interface element information of the UI interface to be adapted by adopting the width adaptation proportional factor or the height adaptation proportional factor.
3. The method of claim 2, wherein the display screen of the electronic device is a contoured screen; the height adaptation scale factor is equal to the target logical resolution height divided by the standard logical resolution height;
when the height adaptation scaling factor is equal to 1, the width adaptation scaling factor is equal to 1;
when the height adaptation scaling factor is not equal to 1, the width adaptation scaling factor is equal to 1.1.
4. The method of claim 2, wherein the display screen of the electronic device is a non-contoured screen; the height adaptation scale factor is equal to the target logical resolution height divided by the standard logical resolution height; the width adaptation scaling factor is equal to the target logical resolution width divided by the standard logical resolution width.
5. The method of claim 1, wherein the interface element information includes at least one of a control size, a control position, and a text size.
6. The method of claim 5, wherein the interface element information is the control size, the control size comprising a control width and a control height;
the step of adjusting the interface element information in the UI interface to be adapted by using the adaptation scale factor to obtain the adapted UI interface comprises the following steps:
and multiplying the width and the height of the standard control in the UI interface to be adapted by the adaptation scale factor to obtain the width and the height of the target control in the adapted UI interface.
7. The method of claim 5, wherein the interface element information is the control position, the control position comprising a first distance and a second distance;
the step of adjusting the interface element information in the UI interface to be adapted by using the adaptation scale factor to obtain the adapted UI interface comprises the following steps:
and multiplying the standard first distance and the standard second distance in the UI interface to be adapted by the adaptation scale factor to obtain a target first distance and a target second distance in the adapted UI interface.
8. The method of claim 7, wherein the first distance is a minimum distance from a point on a control to a first edge of a display area, and the second distance is a minimum distance from a point on the control to a second edge of the display area; or, the first distance is a distance from the center of the control to a first edge of the display area, and the second distance is a distance from the center of the control to a second edge of the display area;
the first edge of the display area is adjacent to the second edge of the display area.
9. The method of claim 7, wherein the first distance is a minimum distance of a point on the control to a center of the display area, and the second distance is a minimum distance of a point on the control to the center of the display area; or, the first distance is a distance from the center of the control to the center of the display area, and the second distance is a distance from the center of the control to the center of the display area.
10. The method of claim 8 or 9, wherein the display area is a content view area provided in a display screen of the electronic device;
when the display screen of the electronic equipment is a special-shaped screen, the display area is a non-special-shaped area arranged in the display screen of the electronic equipment;
and when the display screen of the electronic equipment is a non-special-shaped screen, the display area is the display screen of the electronic equipment.
11. The method of claim 5, wherein the interface element information is the text size, the text size including a size of a text;
the step of adjusting the interface element information in the UI interface to be adapted by using the adaptation scale factor to obtain the adapted UI interface comprises the following steps:
obtaining the target size of the characters in the adapted UI according to the standard size of the characters in the UI to be adapted and the adaptation scale factor;
wherein the target size of the text satisfies:
fontsizeB ═ fontsizeA-5+ ceil (5 × ratio); or
fontsizeB＝ceil(fontsizeA*ratio)；
Wherein fontsizeA is the standard size of the character, ratio is the adaptive scale factor, and fontsizeB is the target size of the character.
12. An electronic device comprising a memory and a processor coupled to each other;
the memory is used for storing program data;
the processor executes the program data for implementing the method according to any of claims 1-11.
13. A computer-readable storage medium, characterized in that the computer-readable storage medium stores program data executable by a processor to implement the method according to any one of claims 1-11.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911330728.XA CN111190672A (en) | 2019-12-20 | 2019-12-20 | UI (user interface) adaptation method of electronic equipment, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911330728.XA CN111190672A (en) | 2019-12-20 | 2019-12-20 | UI (user interface) adaptation method of electronic equipment, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111190672A true CN111190672A (en) | 2020-05-22 |
Family
ID=70705850
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911330728.XA Pending CN111190672A (en) | 2019-12-20 | 2019-12-20 | UI (user interface) adaptation method of electronic equipment, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111190672A (en) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111694530A (en) * | 2020-06-09 | 2020-09-22 | 北京百度网讯科技有限公司 | Screen adaptation method and device, electronic equipment and storage medium |
| CN111949251A (en) * | 2020-07-21 | 2020-11-17 | 广州钢铁侠信息科技有限公司 | Method for realizing software development and operation across platforms |
| CN112099887A (en) * | 2020-08-21 | 2020-12-18 | 完美世界(重庆)互动科技有限公司 | Interface adjusting method and device, computer equipment and computer readable storage medium |
| CN112181568A (en) * | 2020-09-27 | 2021-01-05 | 上海连尚网络科技有限公司 | Locally adapting screen method and apparatus |
| CN113867672A (en) * | 2021-09-10 | 2021-12-31 | 埃洛克航空科技（北京）有限公司 | Screen adaptation method and device, computer equipment and storage medium |
| CN114610195A (en) * | 2020-11-24 | 2022-06-10 | 荣耀终端有限公司 | Icon display method, electronic device and storage medium |
| CN117032468A (en) * | 2023-10-09 | 2023-11-10 | 深圳市微克科技有限公司 | Fillet rectangle drawing method, system and medium based on intelligent bracelet |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101188712A (en) * | 2007-12-21 | 2008-05-28 | 康佳集团股份有限公司 | A processing method for page self-adapted display |
| US20090288023A1 (en) * | 2008-05-15 | 2009-11-19 | International Business Machines Corporation | Establishing A Graphical User Interface ('GUI') Theme |
| CN103984477A (en) * | 2014-04-01 | 2014-08-13 | 深圳市云来网络科技有限公司 | Method and device for adapting UI to mobile clients in different screen sizes |
| CN105025254A (en) * | 2014-06-13 | 2015-11-04 | 深圳市景阳科技股份有限公司 | Multi-platform monitoring terminal system development method |
| CN106257409A (en) * | 2016-07-14 | 2016-12-28 | 北京元心科技有限公司 | Image drawing adaptation method and adaptation device |
| US20170010774A1 (en) * | 2015-07-09 | 2017-01-12 | International Business Machines Corporation | Usability analysis for user interface based systems |
| CN107423055A (en) * | 2017-06-30 | 2017-12-01 | 百度在线网络技术（北京）有限公司 | Method, apparatus, equipment and the storage medium of adaptive terminal device resolution |
| CN108628656A (en) * | 2018-05-09 | 2018-10-09 | 平安普惠企业管理有限公司 | Interface adaptation method, device, computer equipment and storage medium on ios device |
| US20180293965A1 (en) * | 2017-04-07 | 2018-10-11 | Intel Corporation | Apparatus and method for remote display and content protection in a virtualized graphics processing environment |
| CN108897595A (en) * | 2018-06-27 | 2018-11-27 | 珠海市君天电子科技有限公司 | A kind of method, apparatus and terminal device of interface beautification |
-
2019
- 2019-12-20 CN CN201911330728.XA patent/CN111190672A/en active Pending
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101188712A (en) * | 2007-12-21 | 2008-05-28 | 康佳集团股份有限公司 | A processing method for page self-adapted display |
| US20090288023A1 (en) * | 2008-05-15 | 2009-11-19 | International Business Machines Corporation | Establishing A Graphical User Interface ('GUI') Theme |
| CN103984477A (en) * | 2014-04-01 | 2014-08-13 | 深圳市云来网络科技有限公司 | Method and device for adapting UI to mobile clients in different screen sizes |
| CN105025254A (en) * | 2014-06-13 | 2015-11-04 | 深圳市景阳科技股份有限公司 | Multi-platform monitoring terminal system development method |
| US20170010774A1 (en) * | 2015-07-09 | 2017-01-12 | International Business Machines Corporation | Usability analysis for user interface based systems |
| CN106257409A (en) * | 2016-07-14 | 2016-12-28 | 北京元心科技有限公司 | Image drawing adaptation method and adaptation device |
| US20180293965A1 (en) * | 2017-04-07 | 2018-10-11 | Intel Corporation | Apparatus and method for remote display and content protection in a virtualized graphics processing environment |
| CN107423055A (en) * | 2017-06-30 | 2017-12-01 | 百度在线网络技术（北京）有限公司 | Method, apparatus, equipment and the storage medium of adaptive terminal device resolution |
| CN108628656A (en) * | 2018-05-09 | 2018-10-09 | 平安普惠企业管理有限公司 | Interface adaptation method, device, computer equipment and storage medium on ios device |
| CN108897595A (en) * | 2018-06-27 | 2018-11-27 | 珠海市君天电子科技有限公司 | A kind of method, apparatus and terminal device of interface beautification |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111694530A (en) * | 2020-06-09 | 2020-09-22 | 北京百度网讯科技有限公司 | Screen adaptation method and device, electronic equipment and storage medium |
| CN111694530B (en) * | 2020-06-09 | 2023-05-23 | 阿波罗智联(北京)科技有限公司 | Screen adaptation method and device, electronic equipment and storage medium |
| CN111949251A (en) * | 2020-07-21 | 2020-11-17 | 广州钢铁侠信息科技有限公司 | Method for realizing software development and operation across platforms |
| CN112099887A (en) * | 2020-08-21 | 2020-12-18 | 完美世界(重庆)互动科技有限公司 | Interface adjusting method and device, computer equipment and computer readable storage medium |
| CN112181568A (en) * | 2020-09-27 | 2021-01-05 | 上海连尚网络科技有限公司 | Locally adapting screen method and apparatus |
| WO2022063158A1 (en) * | 2020-09-27 | 2022-03-31 | 上海连尚网络科技有限公司 | Local screen adaptation method and device |
| CN114610195A (en) * | 2020-11-24 | 2022-06-10 | 荣耀终端有限公司 | Icon display method, electronic device and storage medium |
| CN114610195B (en) * | 2020-11-24 | 2023-04-07 | 荣耀终端有限公司 | Icon display method, electronic device and storage medium |
| CN113867672A (en) * | 2021-09-10 | 2021-12-31 | 埃洛克航空科技（北京）有限公司 | Screen adaptation method and device, computer equipment and storage medium |
| CN117032468A (en) * | 2023-10-09 | 2023-11-10 | 深圳市微克科技有限公司 | Fillet rectangle drawing method, system and medium based on intelligent bracelet |
| CN117032468B (en) * | 2023-10-09 | 2024-05-31 | 深圳市微克科技股份有限公司 | Fillet rectangle drawing method, system and medium based on intelligent bracelet |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111190672A (en) | UI (user interface) adaptation method of electronic equipment, electronic equipment and storage medium | |
| US20180232135A1 (en) | Method for window displaying on a mobile terminal and mobile terminal | |
| US20160162164A1 (en) | Integrated icon resizing control | |
| US11048484B2 (en) | Automated responsive grid-based layout design system | |
| WO2020048326A1 (en) | Interface display method and system, and terminal device | |
| CN107977141B (en) | Interaction control method and device, electronic equipment and storage medium | |
| EP2797297A1 (en) | Multi-zone interface switching method and device | |
| CN104714714A (en) | Mobile terminal desktop control method and device and mobile terminal | |
| US9959652B2 (en) | Display method and terminal | |
| EP3832459A1 (en) | Graphic drawing method and apparatus, device, and storage medium | |
| CN112835499B (en) | Carousel graph display method, device, equipment and medium | |
| WO2018017404A1 (en) | Foveated rendering | |
| EP3557520A1 (en) | Window rendering method and terminal | |
| EP3035323A1 (en) | Display apparatus and controlling method | |
| US10061494B2 (en) | Method and device for webpage zooming on electronic apparatus | |
| CN107122104B (en) | Data display method and device | |
| CN109992188B (en) | Method and device for realizing scrolling display of iOS mobile terminal text | |
| WO2013097804A1 (en) | Method and device for determining a display mode of electronic documents | |
| CN111290680B (en) | List display method, device, terminal and storage medium | |
| CN107291340B (en) | Method for realizing interface effect, computing equipment and storage medium | |
| CN112099886A (en) | Desktop display control method and device of mobile zero terminal | |
| WO2018219140A1 (en) | Electronic device, content display method and content display apparatus therefor, and storage medium | |
| CN109766530B (en) | Method and device for generating chart frame, storage medium and electronic equipment | |
| CN109213981B (en) | Demonstration collaboration for various electronic devices | |
| EP2608003A1 (en) | Method and device for movement of image object |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |