CN111949360A - User interface adaptation method and device, electronic equipment and storage medium - Google Patents
User interface adaptation method and device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN111949360A CN111949360A CN202010906830.6A CN202010906830A CN111949360A CN 111949360 A CN111949360 A CN 111949360A CN 202010906830 A CN202010906830 A CN 202010906830A CN 111949360 A CN111949360 A CN 111949360A
- Authority
- CN
- China
- Prior art keywords
- area
- operation control
- screen
- control area
- safety
- 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
- 238000000034 method Methods 0.000 title claims abstract description 56
- 238000003860 storage Methods 0.000 title claims abstract description 13
- 230000006978 adaptation Effects 0.000 title claims description 34
- 238000004590 computer program Methods 0.000 claims description 17
- 230000000694 effects Effects 0.000 abstract description 10
- 238000011161 development Methods 0.000 abstract description 3
- 238000012423 maintenance Methods 0.000 abstract description 3
- 230000003044 adaptive effect Effects 0.000 abstract description 2
- 238000010586 diagram Methods 0.000 description 17
- 230000008569 process Effects 0.000 description 8
- 230000006870 function Effects 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 238000013461 design Methods 0.000 description 3
- 230000003993 interaction Effects 0.000 description 2
- 238000004519 manufacturing process Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 238000013519 translation Methods 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 230000004075 alteration Effects 0.000 description 1
- 238000013459 approach Methods 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000011835 investigation Methods 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000011160 research Methods 0.000 description 1
- 238000013341 scale-up Methods 0.000 description 1
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 provides a method and a device for adapting a user interface, electronic equipment and a storage medium, wherein the method comprises the following steps: acquiring model information of the terminal equipment; searching corresponding interface display parameters from a preset configuration table according to the model information; the interface display parameters comprise screen size and safety zone parameters; and adaptively displaying the background layer according to the screen size, and displaying the operation control area according to the safe area parameter. Interface display parameters corresponding to the model information are searched through the preset configuration table, the user interface is displayed according to the interface display parameters, the effect of adaptive display based on different models can be achieved without adjusting codes, later development and maintenance can be facilitated by updating the preset configuration table, a large amount of labor and time can be saved, and cost is saved.
Description
Technical Field
The present application relates to the field of terminal technologies, and in particular, to a method and an apparatus for adapting a user interface, an electronic device, and a storage medium.
Background
Mobile terminal devices represented by mobile phones play an increasingly important role in the modern society, go deep into various aspects of daily life of people, and bring information, fun and convenience for people's life. Nowadays, the screen resolution ratio of the mobile terminal equipment to the screen width-to-height ratio is different day by day, and various screen types such as a full screen, a bang screen and a waterfall screen appear on the market. In order to ensure that the application program normally runs under different screen types, a designer needs to perform targeted interface adaptation for the screen types, usually the designer designs an adaptation scheme under different screens in an effect diagram, and a programmer obtains and judges the aspect ratio of the screen width and the height through codes and controls adaptation through the codes. This approach has the disadvantage of requiring the programmer to communicate the adaptation effect and adjust the code repeatedly with the designer. The method consumes much manpower, has long time and poor universality, and cannot quickly and flexibly cover various complex screen resolution conditions on the market.
Disclosure of Invention
In view of the above, the present application is proposed to provide a method and apparatus, an electronic device, a storage medium for user interface adaptation that overcome or at least partially solve the above problems, including:
a method for adapting a user interface provides a graphical user interface through terminal equipment, wherein the graphical user interface comprises a background layer and an operation control area arranged on the background layer; the method comprises the following steps:
acquiring the model information of the terminal equipment;
searching corresponding interface display parameters from a preset configuration table according to the model information; the interface display parameters comprise screen size and safety zone parameters;
and displaying the background layer according to the screen size, and displaying the operation control area according to the safe area parameter.
Optionally, the displaying the background layer according to the screen size includes:
the background layer is paved in a screen display area corresponding to the screen size;
the displaying the operation control area according to the safety area parameters comprises:
and displaying the operation control area in a safety area corresponding to the safety area parameters according to a preset rule.
Optionally, the step of displaying the operation control area in the safety area corresponding to the safety area parameter according to a preset rule includes:
and adjusting the size of the operation control area and/or the control interval in the operation control area, so that the operation control area is located in the safety area, and the length of at least one boundary of the operation control area is equal to that of a corresponding boundary in the safety area.
Optionally, the step of displaying the operation control area in the safety area corresponding to the safety area parameter according to a preset rule includes:
aligning a center of the operation control area and a center of the secure area;
adjusting the size of the operation control area and/or the control interval in the operation control area, so that the boundary of the operation control area is aligned with the corresponding boundary in the safety area.
Optionally, the step of displaying the operation control area in the safety area corresponding to the safety area parameter according to a preset rule includes:
aligning a target boundary of the operation control area with a boundary corresponding to the safety area;
and adjusting other boundaries of the operation control area except the target boundary so that the other boundaries of the operation control area except the target boundary are aligned with the corresponding boundaries in the safety area.
Optionally, the background layer comprises a first background area corresponding to the operation control area and a second background area surrounding the first background area, and the screen display area comprises the safe area and a screen boundary area; the step of overlaying the background layer over the screen display area comprises:
filling the first background zone in the security zone;
and filling the second background area in the screen boundary area.
Optionally, before the step of searching for the corresponding interface display parameter from the preset configuration table according to the model information, the method further includes:
determining corresponding screen parameters and screen types according to the model information;
and generating a preset configuration table according to the screen parameters and the screen type and a preset configuration rule.
Optionally, the step of obtaining the model information of the terminal device includes:
when the target software application is detected to be started, acquiring the model information of the terminal equipment; or,
and when the target software application is detected to be installed, acquiring the model information of the terminal equipment.
A device for adapting a user interface provides a graphical user interface through terminal equipment, wherein the graphical user interface comprises a background layer and an operation control area arranged on the background layer; the device comprises:
the model acquisition module is used for acquiring the model information of the terminal equipment;
the parameter searching module is used for searching corresponding interface display parameters from a preset configuration table according to the model information; the interface display parameters comprise screen size and safety zone parameters;
and the interface adaptation module is used for displaying the background layer according to the screen size and displaying the operation control area according to the safe area parameter.
Optionally, the interface adaptation module includes:
the background adaptation submodule is used for paving the background layer in a screen display area corresponding to the screen size;
and the control adaptation submodule is used for displaying the operation control area in a safety area corresponding to the safety area parameters according to a preset rule.
Optionally, the control adaplet module includes:
the first adaptation sub-module is configured to adjust a size of the operation control area and/or a control interval in the operation control area, so that the operation control area is located in the safety area, and at least one boundary of the operation control area is equal to a length of a corresponding boundary in the safety area.
Optionally, the control adaplet module includes:
a second adaptation sub-module, configured to align a center of the operation control area with a center of the safety area;
and the third adaptation sub-module is used for adjusting the size of the operation control area and/or the control interval in the operation control area, so that the boundary of the operation control area is aligned with the corresponding boundary in the safety area.
Optionally, the control adaplet module includes:
the fourth adaptation sub-module is used for aligning the target boundary of the operation control area with the boundary corresponding to the safety area;
and the fifth adaptation submodule is used for adjusting other boundaries of the operation control area except the target boundary so that the other boundaries of the operation control area except the target boundary are aligned with the corresponding boundaries in the safety area.
Optionally, the background layer comprises a first background area corresponding to the operation control area and a second background area surrounding the first background area, and the screen display area comprises the safe area and a screen boundary area; the context adapter module comprises:
a first background adaptation sub-module for tiling the first background region in the security region;
a second background adaptation sub-module for filling the second background region in the screen border region.
Optionally, the apparatus further comprises:
the first determining module is used for determining corresponding screen parameters and screen types according to the model information;
and the configuration table generating module is used for generating a preset configuration table according to the screen parameters and the screen type and according to preset configuration rules.
Optionally, the model obtaining module includes:
the starting acquisition module is used for acquiring the model information of the terminal equipment when the starting of the target software application is detected; or, the method is used for acquiring the model information of the terminal device when detecting that the target software application is installed.
An electronic device comprising a processor, a memory and a computer program stored on the memory and being executable on the processor, the computer program, when executed by the processor, implementing the steps of the method as described above.
A computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the steps of the method as set forth above.
The application has the following advantages:
in the embodiment of the application, by acquiring the model information of the terminal equipment, searching the corresponding interface display parameters from the preset configuration table according to the model information, wherein the interface display parameters comprise screen size and safety region parameters; the method comprises the steps of adaptively displaying a background layer of a user interface according to the size of a screen, and adaptively displaying an operation control area of the user interface according to parameters of a safe area; the preset configuration table is used for recording the model information of the terminal equipment and the corresponding interface display parameters, the interface display parameters corresponding to the model information are searched through the preset configuration table, the user interface is displayed in a matched mode according to the interface display parameters, the effect of matched display based on different models can be achieved without adjusting codes, the preset configuration table can be updated to facilitate later development and maintenance, a large amount of labor and time can be saved, and cost is saved.
Drawings
In order to more clearly illustrate the technical solutions of the present application, the drawings needed to be used in the description of the present application will be briefly introduced below, and it is apparent that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art that other drawings can be obtained according to the drawings without inventive labor.
FIG. 1 is a flowchart illustrating steps of a method for adapting a user interface according to an embodiment of the present application;
FIG. 2 is a diagram illustrating an adaptation effect of a user interface according to an embodiment of the present application;
fig. 3 is a block diagram of a user interface adapting apparatus according to an embodiment of the present application.
Detailed Description
In order to make the aforementioned objects, features and advantages of the present application more comprehensible, the present application is described in further detail with reference to the accompanying drawings and the detailed description. It is to be understood that the embodiments described are only a few embodiments of the present application and not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
At present, terminal equipment is developed towards a high screen ratio direction, and a full screen is designed for the ultrahigh screen ratio terminal equipment. The comprehensive screen product design can be divided into a special-shaped screen and a non-special-shaped screen. The non-special-shaped screen changes the aspect ratio of the screen, and the display area of the screen is rectangular. The special-shaped screen is cut off on the basis of the non-special-shaped screen and is used for placing parts such as a camera, a receiver and the like; in short, the shaped screen refers to the shape of the screen, or the shape of the displayable region of the screen is other than a rectangle. The shape of the displayable area of the special-shaped screen has uncertainty, and each manufacturer can design screens of different models differently. Therefore, the user interface of the special-shaped screen terminal equipment needs to be adapted in the display process.
Referring to fig. 1, a method for adapting a user interface provided in an embodiment of the present application is shown, which may be applied to a terminal device, where when a processor of the terminal device executes a software application, a corresponding graphical user interface (hereinafter referred to as a user interface) is provided by the terminal device, and the user interface includes a background layer and an operation control area arranged on the background layer; the method specifically comprises the following steps:
and 103, displaying the background layer according to the screen size, and displaying the operation control area according to the safe area parameter.
In the embodiment of the application, by acquiring the model information of the terminal equipment, searching the corresponding interface display parameters from the preset configuration table according to the model information, wherein the interface display parameters comprise screen size and safety region parameters; the method comprises the steps of adaptively displaying a background layer of a user interface according to the size of a screen, and adaptively displaying an operation control area of the user interface according to parameters of a safe area; the preset configuration table is used for recording the model information of the terminal equipment and the corresponding interface display parameters, the interface display parameters corresponding to the model information are searched through the preset configuration table, the user interface is displayed in a matched mode according to the interface display parameters, the effect of matched display based on different models can be achieved without adjusting codes, the preset configuration table can be updated to facilitate later development and maintenance, a large amount of labor and time can be saved, and cost is saved.
Hereinafter, the method of user interface adaptation in the present exemplary embodiment will be further described.
In step 101, model information of the terminal device is obtained.
The terminal device may be a desktop computer, a notebook computer, a tablet, a smart phone, an e-book reader, etc. Optionally, the terminal device is a terminal device using a special-shaped screen, for example, a smart phone, the special-shaped screen refers to a touch screen in a shape other than a rectangle, for example, a bang screen, a full-face screen with a hollow top, a waterfall screen, and the like. The software application may be a software application that supports a virtual environment. Alternatively, the software application may be a mapping application, a multiplayer network mobile gaming application, or the like. When the software application runs in the terminal equipment, the software application is allowed to identify the authority of the model information of the terminal equipment, and the model information of the terminal equipment can be acquired based on the authority. Specifically, when it is detected that the software application is installed on the device terminal or is started for the first time, or the software application is started each time, the model information of the terminal device is acquired.
The model information of the terminal device may identify the terminal device. Taking a mobile phone as an example, when each mobile phone leaves a factory, there is an equipment model, and configuration information of the mobile phone during production can be acquired according to the equipment model. For example, after determining the model information of a mobile phone, the information of the screen type, the screen size, etc. of the mobile phone is determined. It should be noted that when the model information of the terminal device is determined, the hardware information of the terminal device is already determined, that is, the size and the position of the screen display area are already determined, related parameters of the user interface of the software application need to be adjusted, so that the user interface is adapted to the screen display area of the terminal device.
In step 102, searching a corresponding interface display parameter from a preset configuration table according to the model information; the interface display parameters include screen size and safe area parameters.
In this embodiment, the preset configuration table is used to store the model information of the terminal device and the corresponding interface display parameters. The preset configuration table may be set in the server or in the terminal device. The interface display parameters may include a screen size and a security area parameter, where the security area parameter may be preset by a technician and filled in a preset configuration table, or may be generated by a terminal device or a server according to preset configuration rules.
In an example, when the preset configuration table is set in the server, before the step 102, the method further includes:
downloading a preset configuration table; and the preset configuration table is generated according to preset configuration rules according to the screen parameters and the screen types corresponding to the model information of the terminal equipment.
In one example, an operation department obtains models of most mobile phones running on the market and screen data corresponding to the models of the mobile phones through means such as market research, generates a data table according to the models of the mobile phones and the corresponding screen data, adds data adjustment made by software application artists according to different models of the mobile phones in the data table, namely determines corresponding safe region parameters according to different models of the mobile phones to obtain a preset configuration table, and places the preset configuration table in a server for downloading and using by terminal equipment. It should be noted that, because the data table obtained by the investigation of the operation department is difficult to cover all the mobile phone models on the market, a security area parameter corresponding to another mobile phone model that is not obtained should be added to the preset configuration table, and the security area parameter may be generated according to the preset configuration rule. Specifically, when the software application is installed on the device terminal or when the software application is started for the first time or each time the software application is started, the terminal device downloads the preset configuration table from the server.
In another example, the preset configuration table may also be generated by the server according to a preset configuration rule according to the screen parameter and the screen type corresponding to the model information of the terminal device. The method comprises the steps that a preset configuration rule is used for determining parameters of a safe region, the principle is that the safe region corresponding to the parameters of the safe region is as large as possible, conversion can be carried out according to the relation between the resolution of a screen and the number of pixels in each inch of an image, and the screen can be divided into a Liuhai screen, a hole digging screen and a waterfall screen according to the type of the screen; when the screen types are the Liuhai screen and the dug hole screen, corresponding pixels are required to be reserved at the top and the bottom of the Liuhai screen; specifically, the top reservation rule may be to reserve 54px at the top of the screen when the pixel density (ppi) is less than or equal to 270; when the pixel density (ppi) is larger than 270 and smaller than or equal to 400, reserving 80px at the top of the screen; when the pixel density (ppi) is greater than 400 and less than or equal to 500, reserving 100px at the top of the screen; when the pixel density (ppi) is more than 500 and less than or equal to 540, reserving 108px at the top of the screen; the bottom reservation rule may be that when there is no black edge and/or trademark (logo) at the bottom, the bottom reservation rule and the top reservation rule are kept consistent; when the bottom has a black edge and/or a trademark (logo), the bottom reservation rule determines half of the reserved pixel for the corresponding top reservation rule, or the bottom reservation rule determines that the reserved pixel is 0. When the screen type is a waterfall screen, corresponding pixels need to be reserved on the left side and the right side of the screen; specifically, 40px may be reserved at the left and right sides thereof, respectively. It should be noted that, although the preset configuration rule in this example is described by taking the bang screen, the hole digging screen, and the waterfall screen as examples, the application scope of the present application is not limited thereto.
In another example, the preset configuration table is set in the terminal device, and before step 102, the method further includes:
determining corresponding screen parameters and screen types according to the model information;
and generating a preset configuration table according to the screen parameters and the screen type and a preset configuration rule.
In this example, the preset configuration table is generated by the terminal, and a specific process of the generation is similar to the generation process of the server in the previous example, and specific reference may be made to the description of the previous example. Specifically, when the software application is installed on the device terminal or the software application is started for the first time, the model information of the terminal device is acquired, the corresponding screen parameter and the screen type are determined according to the model information, and the preset configuration table is generated according to the preset rule according to the screen parameter and the screen type.
In step 103, the background layer is displayed according to the screen size, and the operation control area is displayed according to the safety area parameter.
The user interface of the software application comprises a background layer and an operation control area arranged on the background layer. Taking a game application of a touch mobile phone as an example, the background layer may be a virtual environment scene in a game scene, and the operation control area is an area capable of performing human-computer interaction. The step 103 includes:
the background layer is paved in a screen display area corresponding to the screen size;
and displaying the operation control area in a safety area corresponding to the safety area parameters according to a preset rule.
The screen size is used for representing the shape and size of a screen display area; the corresponding screen display area can be determined according to the screen size; the safety region parameter is used for representing the relation between the boundary of the safety region and the boundary of the screen display region, and the corresponding safety region can be determined through the safety region parameter; the safe area can be smaller than or equal to the screen display area, the background layer of the software application is fully paved in the screen display area, the full utilization of the screen can be realized, and the visual effect is good. And the operation control area is displayed in the safety area, so that the operation control in the operation control area can be ensured to carry out effective human-computer interaction.
Alternatively, when the security area is smaller than the screen display area, the screen display area may be divided into the security area and the screen border area. The background layer includes a first background region corresponding to the operation control region and a second background region surrounding the first background region. The safety area is fully covered with a first background area; and filling a second background area in the boundary area of the screen.
In this embodiment, taking a mobile game application as an example, a background layer is a virtual environment scene, and a background layer displayed in a screen area is a part of the virtual environment scene, so that a second background area may be a peripheral virtual environment scene of a first background area; in other embodiments, the second background region may be generated by content identification, specifically, by analyzing the image characteristics of the first background region, the images of the first background region are spliced and combined to generate an initial second background region, and the initial second background region is fused to obtain the second background region. As shown in fig. 2, the left diagram of fig. 2 is an effect diagram displayed by the non-shaped-screen mobile phone, and the right diagram is an effect diagram displayed by the bang shaped-screen; wherein, the dotted line in the right diagram of fig. 2 is an auxiliary line indicating the boundary of the safety region, which does not exist in the actual display interface; the area between the two dotted lines is a first background area, and the display content of the first background area corresponds to the display content of the left image; the area between the two ends and the nearest dotted line is a second background area, and the display content of the second background area is the peripheral part of the display content of the first background area; so that the visual effect is better.
Further, in an embodiment, the step of displaying the operation control area in the safety area corresponding to the safety area parameter according to a preset rule includes:
and adjusting the size of the operation control area and/or the control interval in the operation control area, so that the operation control area is located in the safety area, and the length of at least one boundary of the operation control area is equal to that of a corresponding boundary in the safety area.
In this embodiment, adjusting the size of the operation control area may be to scale up or scale down the operation control area; the adjustment of the control interval in the operation control area can be to keep the size of the control in the operation control area unchanged, and increase or decrease the interval between the adjacent controls horizontally or vertically.
In a specific example, the size of the operation control area may be proportionally adjusted, so that at least one boundary of the operation control area is equal to the length of the corresponding boundary in the safety area, and the area of the adjusted operation control area in the safety area is the largest. Preferably, the control center of the adjusted operation control area may be aligned with the safety center of the safety area, or one of the boundaries of the adjusted operation control area corresponding to the safety area may be aligned with the corresponding boundary of the safety area.
Correspondingly, in the present example, the first background region of the background layer is proportionally adjusted, so that the area of the adjusted first background region in the security region is the largest and is overlapped with the operation control region; filling other display areas except the display area of the first background area in the screen display area by the second background area; thereby tiling the background layer across the screen display area.
In another specific example, the size of the operation control area may be adjusted proportionally, and then the control interval in the operation control area may be adjusted, so that the boundary of the operation control area is aligned with the corresponding boundary in the safety area. For example, when the preset aspect ratio of the operation control area is 4:3 and the aspect ratio of the safe area of the screen is 16:9, the operation control area is enlarged three times in equal proportion to obtain 12:9, and the lengths of the left and right boundaries of the operation control area and the left and right boundaries of the safe area are equal; and increasing the left-right interval of the operation control in the operation control area to align the left boundary of the operation control area with the left boundary of the safe area and align the right boundary of the operation control area with the right boundary of the safe area, wherein after the adjustment, the upper boundary of the operation control area is aligned with the upper boundary of the safe area, and the lower boundary of the operation control area is aligned with the lower boundary of the safe area.
Correspondingly, in this example, after the first background area of the background layer is adjusted according to the adjusted proportion of the operation control area, the first background area is stretched or compressed according to the direction of the interval change of the controls in the operation control area, so that the first background area and the operation control area are overlapped.
In another embodiment, the step of displaying the operation control area in the safety area corresponding to the safety area parameter according to a preset rule includes:
aligning a control center of the operation control area with a security center of the secure area;
adjusting the size of the operation control area and/or the control interval in the operation control area, so that the boundary of the operation control area is aligned with the boundary of the safety area.
In this embodiment, the boundary of the operation control area is adjusted by adopting a center alignment manner, so that the boundary of the operation control area is aligned with the boundary of the corresponding safety area, and the operation control area is overlapped with the safety area. In a specific implementation, the center of the operation control area and the center of the safety area may be aligned first, that is, the center of the operation control area and the center of the safety area are on the same straight line perpendicular to the screen. Then, the size of the operation control area is adjusted by enlarging or reducing the operation control area in proportion, so that the area of the operation control area which is adjusted in proportion in the safety area is the largest; then, the control interval in the operation control area is increased, so that the boundary of the operation control area is aligned with the boundary of the safe area, namely, the projection of the boundary of the operation control area and the projection of the boundary of the safe area on the parallel light perpendicular to the screen are overlapped. According to the embodiment, the size of the operation control area is adjusted in proportion, so that the area of the operation control area after the operation control area is adjusted in proportion in the safe area is the largest, then the operation control area is overlapped with the safe area by increasing the control interval, and the control can be prevented from being deformed. Of course, in other embodiments, after the size of the operation control area is proportionally adjusted so that the area of the proportionally adjusted operation control area in the safety area is the largest, the operation control area may be overlapped with the safety area by stretching the control.
Correspondingly, in this embodiment, the center of the first background region in the background layer of the software application is aligned with the center of the security region, then the first background region is scaled so that the area of the scaled first background region in the security region is the largest, and finally the first background region is stretched transversely or longitudinally so that the first background region overlaps with the security region. The first background area and the operation control area are paved in a safe area in a center alignment mode, so that the original layout can be reserved to a large extent, and the user experience effect is good.
In another embodiment, the step of displaying the operation control area in the security area corresponding to the security area parameter according to a preset rule includes:
aligning a target boundary of the operation control area with a boundary corresponding to the safety area;
and adjusting other boundaries of the operation control area except the target boundary so that the other boundaries of the operation control area except the target boundary are aligned with the corresponding boundaries in the safety area.
In this embodiment, one of the target boundaries of the operation control area preset by the software application is aligned with the boundary corresponding to the safety area, and then the other boundaries of the operation control area except the target boundary are adjusted, so that the other boundaries of the operation control area except the target boundary are aligned with the corresponding boundaries in the safety area, that is, the operation control area is overlapped with the safety area. Specifically, the process of adjusting the other boundaries of the operation control area except the target boundary may be to respectively translate the other boundaries, and the operation control area is correspondingly stretched or compressed along the translation direction of the other boundaries, so that the other boundaries are aligned with the corresponding boundaries in the safety area.
Correspondingly, in this embodiment, one of the background boundaries of the first background region in the background layer of the software application is aligned with the boundary corresponding to the secure region, then, the other background boundaries except for the aligned background boundary in the first background region are respectively translated, the first background region is correspondingly stretched or compressed along the translation direction of the other background boundaries, so that the other background boundaries are aligned with the corresponding boundaries, that is, the first background region coincides with the secure region, and the second background region fills the screen boundary region except for the secure region in the display screen.
In the embodiment of the application, by acquiring the model information of the terminal equipment, searching the corresponding interface display parameters from the preset configuration table according to the model information, wherein the interface display parameters comprise screen size and safety region parameters; paving the background layer in a screen display area corresponding to the screen size; displaying an operation control area in a safety area corresponding to the safety area parameters according to a preset rule; the preset configuration table is used for recording model information and corresponding interface display parameters of the terminal equipment, the interface display parameters corresponding to the model information are searched through the preset configuration table, the background layer is fully paved on the screen display area according to the interface display parameters, the operation control area is fully paved on the safe area, the screen space can be fully utilized, the user experience is improved, the effect of adaptive display based on different models can be achieved without adjusting codes, the preset configuration table can be conveniently developed and maintained in the later period through updating, a large amount of manpower and time can be saved, and the cost is saved.
It should be noted that, for simplicity of description, the method embodiments are described as a series of acts or combination of acts, but those skilled in the art will recognize that the embodiments are not limited by the order of acts described, as some steps may occur in other orders or concurrently depending on the embodiments. Further, those skilled in the art will also appreciate that the embodiments described in the specification are presently preferred and that no particular act is required of the embodiments of the application.
Referring to fig. 3, a block diagram of an embodiment of a user interface adapting apparatus for providing a graphical user interface through a terminal device is shown, where the graphical user interface includes a background layer and an operation control area disposed on the background layer; the method specifically comprises the following modules:
a model obtaining module 301, configured to obtain model information of the terminal device;
a parameter searching module 302, configured to search a corresponding interface display parameter from a preset configuration table according to the model information; the interface display parameters comprise screen size and safety zone parameters;
and the interface adaptation module 303 is configured to display the background layer according to the screen size, and display the operation control area according to the safe area parameter.
In a preferred embodiment of the present application, the interface adaptation module 303 includes:
the background adaptation submodule is used for paving the background layer in a screen display area corresponding to the screen size;
and the control adaptation submodule is used for displaying the operation control area in a safety area corresponding to the safety area parameters according to a preset rule.
In a preferred embodiment of the present application, the control adapter module includes:
the first adaptation sub-module is configured to adjust a size of the operation control area and/or a control interval in the operation control area, so that the operation control area is located in the safety area, and at least one boundary of the operation control area is equal to a length of a corresponding boundary in the safety area.
In a preferred embodiment of the present application, the control adapter module includes:
a second adaptation sub-module, configured to align a center of the operation control area with a center of the safety area;
and the third adaptation sub-module is used for adjusting the size of the operation control area and/or the control interval in the operation control area, so that the boundary of the operation control area is aligned with the corresponding boundary in the safety area.
In a preferred embodiment of the present application, the control adapter module includes:
the fourth adaptation sub-module is used for aligning the target boundary of the operation control area with the boundary corresponding to the safety area;
and the fifth adaptation submodule is used for adjusting other boundaries of the operation control area except the target boundary so that the other boundaries of the operation control area except the target boundary are aligned with the corresponding boundaries in the safety area.
In a preferred embodiment of the present application, the background layer includes a first background region corresponding to the operation control region and a second background region surrounding the first background region, and the screen display region includes the safe region and a screen boundary region; the context adapter module comprises:
a first background adaptation sub-module for tiling the first background region in the security region;
a second background adaptation sub-module for filling the second background region in the screen border region.
In a preferred embodiment of the embodiments of the present application, the apparatus further comprises:
the first determining module is used for determining corresponding screen parameters and screen types according to the model information;
and the configuration table generating module is used for generating a preset configuration table according to the screen parameters and the screen type and according to preset configuration rules.
In a preferred embodiment of the embodiments of the present application, the apparatus further comprises:
the configuration table downloading module is used for downloading a preset configuration table; and the preset configuration table is generated according to preset configuration rules according to the screen parameters and the screen types corresponding to the model information of the terminal equipment.
In a preferred embodiment of the present application, the model number obtaining module 301 includes:
the starting acquisition module is used for acquiring the model information of the terminal equipment when the starting of the target software application is detected; or, the method is used for acquiring the model information of the terminal device when detecting that the target software application is installed.
For the device embodiment, since it is basically similar to the method embodiment, the description is simple, and for the relevant points, refer to the partial description of the method embodiment.
The embodiment of the application also discloses an electronic device, which comprises a processor, a memory and a computer program stored on the memory and capable of running on the processor, wherein when the computer program is executed by the processor, the steps of the method for adapting the user interface are realized.
The embodiment of the application also discloses a computer readable storage medium, wherein a computer program is stored on the computer readable storage medium, and when the computer program is executed by a processor, the steps of the method for adapting the user interface are realized.
The embodiments in the present specification are described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same and similar parts among the embodiments are referred to each other.
As will be appreciated by one of skill in the art, embodiments of the present application may be provided as a method, apparatus, or computer program product. Accordingly, embodiments of the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, embodiments of the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
Embodiments of the present application are described with reference to flowchart illustrations and/or block diagrams of methods, terminal devices (systems), and computer program products according to embodiments of the application. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing terminal to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing terminal, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing terminal to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing terminal to cause a series of operational steps to be performed on the computer or other programmable terminal to produce a computer implemented process such that the instructions which execute on the computer or other programmable terminal provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
While preferred embodiments of the present application have been described, additional variations and modifications of these embodiments may occur to those skilled in the art once they learn of the basic inventive concepts. Therefore, it is intended that the appended claims be interpreted as including the preferred embodiment and all such alterations and modifications as fall within the true scope of the embodiments of the application.
Finally, it should also be noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or terminal that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or terminal. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or terminal that comprises the element.
The method for adapting the user interface, the device for adapting the user interface, the electronic device and the storage medium provided by the application are introduced in detail, and specific examples are applied in the text to explain the principle and the implementation of the application, and the description of the above embodiments is only used for helping to understand the method and the core idea of the application; meanwhile, for a person skilled in the art, according to the idea of the present application, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present application.
Claims (11)
1. A method for adapting a user interface is characterized in that a graphical user interface is provided through a terminal device, wherein the graphical user interface comprises a background layer and an operation control area arranged on the background layer; the method comprises the following steps:
acquiring the model information of the terminal equipment;
searching corresponding interface display parameters from a preset configuration table according to the model information; the interface display parameters comprise screen size and safety zone parameters;
and displaying the background layer according to the screen size, and displaying the operation control area according to the safe area parameter.
2. The method of claim 1, wherein the displaying the background layer according to the screen size comprises:
the background layer is paved in a screen display area corresponding to the screen size;
the displaying the operation control area according to the safety area parameters comprises:
and displaying the operation control area in a safety area corresponding to the safety area parameters according to a preset rule.
3. The method according to claim 2, wherein the step of displaying the operation control area in the safety area corresponding to the safety area parameter according to a preset rule comprises:
and adjusting the size of the operation control area and/or the control interval in the operation control area, so that the operation control area is located in the safety area, and the length of at least one boundary of the operation control area is equal to that of a corresponding boundary in the safety area.
4. The method according to claim 2, wherein the step of displaying the operation control area in the safety area corresponding to the safety area parameter according to a preset rule comprises:
aligning a center of the operation control area and a center of the secure area;
adjusting the size of the operation control area and/or the control interval in the operation control area, so that the boundary of the operation control area is aligned with the corresponding boundary in the safety area.
5. The method according to claim 2, wherein the step of displaying the operation control area in the safety area corresponding to the safety area parameter according to a preset rule comprises:
aligning a target boundary of the operation control area with a boundary corresponding to the safety area;
and adjusting other boundaries of the operation control area except the target boundary so that the other boundaries of the operation control area except the target boundary are aligned with the corresponding boundaries in the safety area.
6. The method of any one of claims 2-5, wherein the background layer comprises a first background region corresponding to the operation control region and a second background region surrounding the first background region, and the screen display region comprises the safe region and a screen boundary region; the step of overlaying the background layer over the screen display area comprises:
filling the first background zone in the security zone;
and filling the second background area in the screen boundary area.
7. The method according to claim 1, wherein before the step of searching for the corresponding interface display parameter from a preset configuration table according to the model information, the method further comprises:
determining corresponding screen parameters and screen types according to the model information;
and generating a preset configuration table according to the screen parameters and the screen type and a preset configuration rule.
8. The method according to claim 1, wherein the step of obtaining the model information of the terminal device comprises:
when the target software application is detected to be started, acquiring the model information of the terminal equipment; or,
and when the target software application is detected to be installed, acquiring the model information of the terminal equipment.
9. The device for adapting the user interface is characterized in that a graphical user interface is provided through terminal equipment, and the graphical user interface comprises a background layer and an operation control area arranged on the background layer; the device comprises:
the model acquisition module is used for acquiring the model information of the terminal equipment;
the parameter searching module is used for searching corresponding interface display parameters from a preset configuration table according to the model information; the interface display parameters comprise screen size and safety zone parameters;
and the interface adaptation module is used for displaying the background layer according to the screen size and displaying the operation control area according to the safe area parameter.
10. An electronic device, characterized in that it comprises a processor, a memory and a computer program stored on the memory and capable of running on the processor, which computer program, when executed by the processor, carries out the steps of the method of user interface adaptation according to any one of claims 1 to 8.
11. A computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the steps of the method of user interface adaptation according to any one of claims 1 to 8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010906830.6A CN111949360A (en) | 2020-09-01 | 2020-09-01 | User interface adaptation method and device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010906830.6A CN111949360A (en) | 2020-09-01 | 2020-09-01 | User interface adaptation method and device, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111949360A true CN111949360A (en) | 2020-11-17 |
Family
ID=73367952
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010906830.6A Pending CN111949360A (en) | 2020-09-01 | 2020-09-01 | User interface adaptation method and device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111949360A (en) |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112379964A (en) * | 2020-12-02 | 2021-02-19 | 网易（杭州）网络有限公司 | Display control method and device of user interface, computer equipment and storage medium |
| CN112667343A (en) * | 2021-01-07 | 2021-04-16 | 苏州沁游网络科技有限公司 | Interface adjusting method, device, equipment and storage medium |
| CN112732692A (en) * | 2021-01-15 | 2021-04-30 | 联想(北京)有限公司 | Data processing method and device and computer readable storage medium |
| CN112817507A (en) * | 2021-01-26 | 2021-05-18 | 广州虎牙科技有限公司 | Control adaptation method and device, electronic equipment and storage medium |
| CN113391869A (en) * | 2021-06-29 | 2021-09-14 | 南京苏宁软件技术有限公司 | Page adaptation method and device, computer equipment and storage medium |
| CN113867672A (en) * | 2021-09-10 | 2021-12-31 | 埃洛克航空科技（北京）有限公司 | Screen adaptation method and device, computer equipment and storage medium |
| CN114185478A (en) * | 2021-11-05 | 2022-03-15 | 北京搜狗科技发展有限公司 | Application program display method and device and storage medium |
| CN117435154A (en) * | 2023-10-20 | 2024-01-23 | 深圳曦华科技有限公司 | Screen replacement method, device, computer equipment and storage medium |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108647069A (en) * | 2018-04-16 | 2018-10-12 | 腾讯科技（深圳）有限公司 | interface display method and device, storage medium and electronic device |
| CN109117229A (en) * | 2018-08-03 | 2019-01-01 | 西安蜂语信息科技有限公司 | Screen partition domain display methods and device |
| CN109308205A (en) * | 2018-08-09 | 2019-02-05 | 腾讯科技（深圳）有限公司 | Display adaptation method, device, equipment and the storage medium of application program |
| CN109739456A (en) * | 2018-12-29 | 2019-05-10 | 苏州玩友时代科技股份有限公司 | A kind of adaptive UI adaptation method and system |
| CN111552530A (en) * | 2020-04-22 | 2020-08-18 | 北京赤金智娱科技有限公司 | Terminal screen adapting method, device and equipment for user interface |
-
2020
- 2020-09-01 CN CN202010906830.6A patent/CN111949360A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108647069A (en) * | 2018-04-16 | 2018-10-12 | 腾讯科技（深圳）有限公司 | interface display method and device, storage medium and electronic device |
| CN109117229A (en) * | 2018-08-03 | 2019-01-01 | 西安蜂语信息科技有限公司 | Screen partition domain display methods and device |
| CN109308205A (en) * | 2018-08-09 | 2019-02-05 | 腾讯科技（深圳）有限公司 | Display adaptation method, device, equipment and the storage medium of application program |
| CN109739456A (en) * | 2018-12-29 | 2019-05-10 | 苏州玩友时代科技股份有限公司 | A kind of adaptive UI adaptation method and system |
| CN111552530A (en) * | 2020-04-22 | 2020-08-18 | 北京赤金智娱科技有限公司 | Terminal screen adapting method, device and equipment for user interface |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112379964A (en) * | 2020-12-02 | 2021-02-19 | 网易（杭州）网络有限公司 | Display control method and device of user interface, computer equipment and storage medium |
| CN112667343A (en) * | 2021-01-07 | 2021-04-16 | 苏州沁游网络科技有限公司 | Interface adjusting method, device, equipment and storage medium |
| CN112667343B (en) * | 2021-01-07 | 2024-03-01 | 苏州沁游网络科技有限公司 | Interface adjustment method, device, equipment and storage medium |
| CN112732692A (en) * | 2021-01-15 | 2021-04-30 | 联想(北京)有限公司 | Data processing method and device and computer readable storage medium |
| CN112817507A (en) * | 2021-01-26 | 2021-05-18 | 广州虎牙科技有限公司 | Control adaptation method and device, electronic equipment and storage medium |
| CN112817507B (en) * | 2021-01-26 | 2023-11-03 | 广州虎牙科技有限公司 | Control adaptation method, device, electronic equipment and storage medium |
| CN113391869A (en) * | 2021-06-29 | 2021-09-14 | 南京苏宁软件技术有限公司 | Page adaptation method and device, computer equipment and storage medium |
| CN113867672A (en) * | 2021-09-10 | 2021-12-31 | 埃洛克航空科技（北京）有限公司 | Screen adaptation method and device, computer equipment and storage medium |
| CN114185478A (en) * | 2021-11-05 | 2022-03-15 | 北京搜狗科技发展有限公司 | Application program display method and device and storage medium |
| CN117435154A (en) * | 2023-10-20 | 2024-01-23 | 深圳曦华科技有限公司 | Screen replacement method, device, computer equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111949360A (en) | User interface adaptation method and device, electronic equipment and storage medium | |
| CN109246464B (en) | User interface display method, device, terminal and storage medium | |
| US9542070B2 (en) | Method and apparatus for providing an interactive user interface | |
| US8762864B2 (en) | Background removal tool for a presentation application | |
| CN108958857A (en) | A kind of interface creating method and device | |
| CN109542376B (en) | Screen display adjustment method, device and medium | |
| CN106296622B (en) | Automatic layout jigsaw method and device | |
| CN113342248A (en) | Live broadcast display method and device, storage medium and electronic equipment | |
| US20150187098A1 (en) | Method and apparatus for unobtrusively changing imagery supplementing a map display | |
| CN110248147B (en) | Image display method and device | |
| CN110837368B (en) | Data processing method and device and electronic equipment | |
| CN114168019A (en) | Multi-application window level management method and device | |
| CN108845733B (en) | Screen capture method, device, terminal and storage medium | |
| CN114185544A (en) | Page data processing method and device, electronic equipment and storage medium | |
| CN110334163B (en) | Map background optimization method, device, equipment and storage medium for big data | |
| CN110457408B (en) | Personalized map downloading method, device, equipment and storage medium | |
| CN109766530B (en) | Method and device for generating chart frame, storage medium and electronic equipment | |
| CN107529095A (en) | A kind of video-splicing method and device | |
| KR101485497B1 (en) | Apparatus and method of recommendig background image based on icon-information on progress | |
| CN105893048A (en) | Browser theme changing method and device and electronic equipment | |
| CN106873963B (en) | Method and device for forming background of computer video desktop | |
| CN112840305A (en) | Font switching method and related product | |
| CN106611119A (en) | Terminal unlocking method and apparatus, and intelligent terminal | |
| CN113590244B (en) | Control method of setting function applied to terminal equipment and terminal equipment | |
| CN115115791A (en) | Map editing method and device |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20201117 |