UI control self-adaption method and system
By automatically obtaining and processing the position and size relationship of UI controls, combined with Aspect Ratio Filter scripts, adaptive adjustment of UI controls is realized, solving the time-consuming problem of manually setting up adaptive methods in game development, and improving development efficiency and accuracy sex.
Patent Information
- Application Number
- CN202310823814.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2023-07-06
- Publication Date
- 2025-01-07
- Estimated Expiration
- 2043-07-06
AI Technical Summary
In game development, it is necessary to manually set up adaptation methods for each UI control to adapt to devices with different resolutions, resulting in low development efficiency and high manual time.
By obtaining the positional relationship and size of the center point of the world coordinates of the UI control relative to the UI interface, the adaptive method of the UI control is automatically set, and the control size is adjusted using the Aspect Ratio Filter script to adapt to the layout, and adaptively adjust it according to the parent-child relationship and screen size. .
It saves a lot of manual labor, reduces the probability of errors, improves project progress, and realizes the adaptive layout of UI controls on different devices.
Smart Images

Figure CN119271200A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of game UI interface production, and in particular to a method and system for self-adaptation of UI controls. Background Art
[0002] UI controls (User Interface Control) refer to visual controls in the user interface field. They are the core and most basic elements in GUI programming. UI controls are mainly used to improve and enhance the user experience of applications, make your applications easier to use, provide more interactivity, and make your applications look more like real-world applications.
[0003] UI controls are mainly used to configure and display elements in the GUI for touch screen, keyboard and mouse input. They can build and layout the Android interface, provide visual elements of the user interface, and make it easier for users to understand and operate the application. UI controls include text boxes, buttons, grid views, sliders, list views, charts, menus, dialog boxes, etc.
[0004] In game development, it is often necessary to set an adaptive mode for each UI control of each UI prefab, so that the game can maintain the correct UI interface layout when running on devices with different resolutions. Usually, it is necessary to manually set the adaptive mode for each UI control, which affects the efficiency of game development. Summary of the invention
[0005] To overcome the above problems, the purpose of the present invention is to provide a method for self-adaptation of UI controls. The present invention automatically sets the adaptive mode of UI controls based on the type, size, position relationship, and parent-child relationship of UI controls, saving man-hours and speeding up project progress.
[0006] The present invention is implemented by the following scheme: a method for self-adaptation of UI controls, the method comprising the following steps:
[0007] Step S1, obtaining the position relationship between the world coordinate center point of the UI control and the center point of the UI interface;
[0008] Step S2, obtaining the size of the UI control relative to the UI interface;
[0009] Step S3: For a child UI control having a parent UI control, read the adaptive mode of the parent control as a basis for setting the adaptive mode of the child UI control;
[0010] Step S4: For UI controls that exceed the screen size, an adaptive adjustment is set according to whether the horizontal or vertical size exceeds the screen size;
[0011] Step S5: setting the adaptive mode of the UI control according to the position and size of the UI control relative to the center point of the UI interface.
[0012] Furthermore, the adaptive adjustment is implemented by using an Aspect Ratio Filter script, which controls the size of the UI control's own layout elements, can adjust the height to fit the width, and will scale the UI control size to fit the UI interface layout.
[0013] Furthermore, the step S1 is further specified as follows: obtaining the world coordinate center of the UI control and comparing the positional relationship of the center of the UI interface, that is, the world coordinate X-axis of the UI control minus the world coordinate X-axis of the center of the UI interface is XOffest, and the world coordinate Y-axis of the UI control minus the world coordinate Y-axis of the center of the UI interface is YOffset. If both XOffset and YOffset are 0, the centers are aligned. If both XOffset and YOffset are greater than 0, the UI control is in the upper right corner of the UI interface. If both XOffset and YOffset are less than 0, the UI control is in the lower left corner of the UI interface. If XOffset is greater than 0 and YOffset is less than 0, the UI control is in the lower right corner of the UI interface. If XOffset is less than 0 and YOffset is greater than 0, the UI control is in the upper left corner of the UI interface. If one of XOffset or YOffset is equal to 0 and the other is not 0, it is located in the up, down, left, and right directions of the UI interface.
[0014] Furthermore, the step S2 is further specified as follows: obtaining the horizontal and vertical sizes of the UI control relative to the UI interface; if the horizontal size of the UI control is the same as the horizontal size of the UI interface, then the horizontal setting of the UI control is adjusted in an adaptive manner to match the horizontal size of the UI interface; if the vertical size of the UI control is the same as the vertical size of the UI interface, then the vertical setting of the UI control is adjusted in an adaptive manner to match the UI interface.
[0015] Furthermore, the step S3 is further specified as follows: obtaining the world coordinate center of the child UI control and comparing the positional relationship of the center of the parent UI control, that is, the world coordinate X axis of the child UI control minus the world coordinate X axis of the center of the parent UI control is XOffest, and the world coordinate Y axis of the child UI control minus the world coordinate Y axis of the center of the parent UI control is YOffset. If both XOffset and YOffset are 0, the centers are aligned. If both XOffset and YOffset are greater than 0, the child UI control is in the upper right corner of the parent UI control. If both XOffset and YOffset are less than 0, the child UI control is in the lower left corner of the parent UI control. If XOffset is greater than 0 and YOffset is If XOffset is less than 0, the child UI control is in the lower right corner of the parent UI control. If XOffset is less than 0 and YOffset is greater than 0, the child UI control is in the upper left corner of the parent UI control. If one of XOffset or YOffset is equal to 0 and the other is not 0, it is located in the up, down, left, and right directions of the parent UI control. Get the horizontal and vertical sizes of the child UI control relative to the parent UI control. If the horizontal size of the child UI control is the same as that of the parent UI control, then the horizontal setting of the child UI control is adjusted to match the adaptive mode of the parent UI control. If the vertical size of the child UI control is the same as that of the parent UI control, then the vertical setting of the child UI control is adjusted to match the adaptive mode of the parent UI control.
[0016] Furthermore, the step S4 is further specified as follows: for the UI control that exceeds the screen size, if the horizontal excess is set to: fix the vertical size to the value of the vertical size of the screen and stretch the horizontal type, the type is horizontal dragging; if the vertical excess is set to: fix the horizontal size to the value of the horizontal size of the screen and stretch the vertical type, the type is vertical dragging; if the UI control exceeds the screen size both horizontally and vertically, then the UI control is set to fix the original size type of the UI, and the type is horizontal and vertical dragging.
[0017] Furthermore, the step S5 is further specified as follows: determine the position of the UI control relative to the UI interface in step 1 and the size relationship of the UI control relative to the UI interface in step 2; if step 2 is used to set the UI interface size to fit horizontally or vertically, first set the UI interface to fit horizontally or vertically, and set the other direction to top-bottom, left-right, and left-right alignment according to the position relationship in step 1; if step 2 is not used, set the alignment to top-left, bottom-left, left, top, bottom, right, top-right, and bottom-right according to the position relationship of the center of the UI control relative to the center of the UI interface in step 1.
[0018] The present invention also provides a UI control self-adaptation system, the system comprising: a position relationship acquisition module, a size acquisition module, a sub-UI control processing module, a super-screen processing module, and a UI control processing module;
[0019] The position relationship acquisition module acquires the position relationship between the world coordinate center point of the UI control and the center point of the UI interface;
[0020] The size acquisition module acquires the size of the UI control relative to the UI interface;
[0021] The child UI control processing module, for a child UI control having a parent UI control, reads the adaptive mode of the parent control as a basis for setting the adaptive mode of the child UI control;
[0022] The over-screen processing module adjusts the UI controls that exceed the screen size in an adaptive manner according to whether they exceed the horizontal or vertical dimensions;
[0023] The UI control processing module sets the adaptive mode adjustment of the UI control according to the position and size of the center point of the UI control relative to the UI interface.
[0024] Furthermore, the adaptive adjustment is implemented by using an Aspect Ratio Filter script, which controls the size of the UI control's own layout elements, can adjust the height to fit the width, and will scale the UI control size to fit the UI interface layout.
[0025] Furthermore, the position relationship acquisition module is further specified as follows: obtaining the world coordinate center of the UI control and comparing the position relationship of the center of the UI interface, that is, the world coordinate X-axis of the UI control minus the world coordinate X-axis of the center of the UI interface is XOffest, and the world coordinate Y-axis of the UI control minus the world coordinate Y-axis of the center of the UI interface is YOffset. If both XOffset and YOffset are 0, the centers are aligned. If both XOffset and YOffset are greater than 0, the UI control is in the upper right corner of the UI interface. If both XOffset and YOffset are less than 0, the UI control is in the lower left corner of the UI interface. If XOffset is greater than 0 and YOffset is less than 0, the UI control is in the lower right corner of the UI interface. If XOffset is less than 0 and YOffset is greater than 0, the UI control is in the upper left corner of the UI interface. If one of XOffset or YOffset is equal to 0 and the other is not 0, it is located in the up, down, left, and right directions of the UI interface.
[0026] Furthermore, the size acquisition module is further specified as follows: obtaining the horizontal and vertical sizes of the UI control relative to the UI interface; if the horizontal size of the UI control is the same as the horizontal size of the UI interface, then the horizontal setting of the UI control is adjusted in an adaptive manner to match the horizontal size of the UI interface; if the vertical size of the UI control is the same as the vertical size of the UI interface, then the vertical setting of the UI control is adjusted in an adaptive manner to match the UI interface.
[0027] Furthermore, the child UI control processing module is further specifically as follows: obtaining the world coordinate center of the child UI control and comparing the positional relationship of the center of the parent UI control, that is, the world coordinate X-axis of the child UI control minus the world coordinate X-axis of the center of the parent UI control is XOffest, and the world coordinate Y-axis of the child UI control minus the world coordinate Y-axis of the center of the parent UI control is YOffset. If both XOffset and YOffset are 0, the centers are aligned. If both XOffset and YOffset are greater than 0, the child UI control is in the upper right corner of the parent UI control. If both XOffset and YOffset are less than 0, the child UI control is in the lower left corner of the parent UI control. If XOffset is greater than 0 and YOffset is less than 0, the child UI control is in the lower left corner of the parent UI control. If et is less than 0, the child UI control is in the lower right corner of the parent UI control. If XOffset is less than 0 and YOffset is greater than 0, the child UI control is in the upper left corner of the parent UI control. If one of XOffset or YOffset is equal to 0 and the other is not 0, it is located in the up, down, left, and right directions of the parent UI control. Get the horizontal and vertical sizes of the child UI control relative to the parent UI control. If the horizontal size of the child UI control is the same as that of the parent UI control, then the horizontal setting of the child UI control is adjusted to match the adaptive mode of the parent UI control. If the vertical size of the child UI control is the same as that of the parent UI control, then the vertical setting of the child UI control is adjusted to match the adaptive mode of the parent UI control.
[0028] Furthermore, the super-screen processing module is further specified as follows: for UI controls that exceed the screen size, if the horizontal excess is set to: fix the vertical size to the value of the vertical size of the screen and stretch the horizontal type, this type is horizontal drag; if the vertical excess is set to: fix the horizontal size to the value of the horizontal size of the screen and stretch the vertical type, this type is vertical drag; if the UI control exceeds the screen size both horizontally and vertically, then the UI control is set to fix the original UI size type, which is horizontal and vertical drag.
[0029] Furthermore, the UI control processing module is further specified as follows: determine the position of the UI control in the position relationship acquisition module relative to the UI interface and the size relationship of the UI control in the size acquisition module relative to the UI interface; if there is a size acquisition module to set the horizontal or vertical adaptation of the UI interface size, first set the horizontal or vertical adaptation of the UI interface, and the other direction is set to top-bottom, left-right, and left-right alignment according to the position relationship of the position relationship acquisition module; if there is no size acquisition module, set the upper left, lower left, left, top, bottom, right, upper right, and lower right alignment according to the position relationship of the center of the UI control in the position relationship acquisition module relative to the center of the UI interface.
[0030] The beneficial effects of the present invention are as follows: the workload of UI development in existing game development is relatively large, and a large number of UI controls are involved. If each UI control is manually set to have its adaptive mode, a large amount of man-hours will be consumed. The present invention automatically sets the adaptive mode of the UI control based on the type, size, position relationship, and parent-child relationship of the UI control, thereby saving man-hours and speeding up the project progress. Moreover, the automatic setting is based on machine calculation to set the adaptive mode, thereby reducing the probability of errors. BRIEF DESCRIPTION OF THE DRAWINGS
[0031] Figure 1 It is a schematic flow chart of the method of the present invention.
[0032] Figure 2 It is a schematic diagram of setting adaptive alignment in different ways in one embodiment of the present invention.
[0033] Figure 3 It is a schematic diagram of setting anchor points for specific controls in one embodiment of the present invention.
[0034] Figure 4 It is a system framework principle diagram of the present invention. DETAILED DESCRIPTION
[0035] The present invention will be further described below in conjunction with the accompanying drawings.
[0036] See also Figure 1 As shown, a method for self-adaptation of UI controls of the present invention comprises the following steps:
[0037] Step S1, obtaining the position relationship between the world coordinate center point of the UI control and the center point of the UI interface;
[0038] Step S2, obtaining the size of the UI control relative to the UI interface;
[0039] Step S3: For a child UI control having a parent UI control, read the adaptive mode of the parent control as a basis for setting the adaptive mode of the child UI control;
[0040] Step S4: For UI controls that exceed the screen size, an adaptive adjustment is set according to whether the horizontal or vertical size exceeds the screen size;
[0041] Step S5: setting the adaptive mode of the UI control according to the position and size of the UI control relative to the center point of the UI interface.
[0042] The adaptive adjustment is implemented by using an Aspect Ratio Filter script. The Aspect RatioFilter script controls the size of the UI control's own layout elements, can adjust the height to fit the width, and will scale the UI control size to fit the layout of the UI interface.
[0043] In addition, the specific UI control of the present invention sets its anchor point and center point according to the type of UI control. For specific UI controls such as a scroll view control, the anchor point and center point need to be set to be aligned in the middle to adapt to the change of the scroll content when the scroll content changes (such as the type and quantity of the package items change).
[0044] The present invention will be further described below in conjunction with a specific embodiment:
[0045] A method for self-adaptation of a UI control of the present invention comprises the following steps: 1. Calculating the world coordinate center of the UI control and comparing the positional relationship of the center of the UI interface, the world coordinate X axis of the UI control minus the world coordinate X axis of the center of the UI interface is XOffest, the world coordinate Y axis of the UI control minus the world coordinate Y axis of the center of the UI interface is YOffset, if both XOffset and YOffset are 0, the centers are aligned, XOffset and YOffset are both greater than 0, the UI control is in the upper right corner of the UI interface, XOffset and YOffset are both less than 0, the UI control is in the lower left corner of the UI interface, XOffset is greater than 0 and YOffset is less than 0, the UI control is in the lower right corner of the UI interface, XOffset is less than 0 and YOffset is greater than 0, the UI control is in the upper left corner of the UI interface, XOffset or YOffset is equal to 0 and the other is not 0, that is, it is located in the up, down, left, and right directions of the UI interface;
[0046] 2. Calculate the horizontal and vertical sizes of the UI control relative to the UI interface. If the horizontal size of the UI control is the same as the horizontal size of the UI interface, then the horizontal setting of the UI control is to match the adaptive mode of the UI interface in the horizontal direction. If the vertical size of the UI control is the same as the vertical size of the UI interface, then the vertical setting of the UI control is to match the adaptive mode of the UI interface.
[0047] 3. Repeat steps 1 and 2 for the child control of the corresponding UI control, and change the comparison object from the UI interface to the parent UI control of the child UI control; that is, obtain the world coordinate center of the child UI control and compare it with the position relationship of the center of the parent UI control, that is, the world coordinate X axis of the child UI control minus the world coordinate X axis of the center of the parent UI control is XOffest, and the world coordinate Y axis of the child UI control minus the world coordinate Y axis of the center of the parent UI control is YOffset. If both XOffset and YOffset are 0, the centers are aligned. If both XOffset and YOffset are greater than 0, the child UI control is in the upper right corner of the parent UI control. If both XOffset and YOffset are less than 0, the child UI control is in the lower left corner of the parent UI control. If ffset is greater than 0 and YOffset is less than 0, the child UI control is in the lower right corner of the parent UI control. If XOffset is less than 0 and YOffset is greater than 0, the child UI control is in the upper left corner of the parent UI control. If one of XOffset or YOffset is equal to 0 and the other is not 0, it is located in the up, down, left, and right directions of the parent UI control. Get the horizontal and vertical sizes of the child UI control relative to the parent UI control. If the horizontal size of the child UI control is the same as that of the parent UI control, then the horizontal setting of the child UI control is adjusted to match the adaptive mode of the parent UI control. If the vertical size of the child UI control is the same as that of the parent UI control, then the vertical setting of the child UI control is adjusted to match the adaptive mode of the parent UI control.
[0048] 4. For UI controls that exceed the screen size, if the horizontal size exceeds the screen size, the vertical size is set to the value of the screen vertical size and the horizontal type is stretched (this type can usually be dragged horizontally); if the vertical size exceeds the screen size, the horizontal size is set to the value of the screen horizontal size and the vertical type is stretched (this type can usually be dragged vertically); if the UI control exceeds the screen size both horizontally and vertically, then the UI control is set to the fixed original size type (this type can usually be dragged horizontally and vertically);
[0049] The Aspect Ratio Filter script is mainly used for self-adaptation of fixed width and height, or fixed height and width. At this time, there is no need to set its alignment (or set it to the default alignment). The Aspect Ratio Filter script is already a prior art and will not be described in detail again.
[0050] 5. According to the position of the UI control relative to the UI interface in step 1 and the size relationship of the UI control relative to the UI interface in step 2, if there is a situation in step 2 where the UI interface size is set to be adapted horizontally or vertically, first set the UI interface to be adapted horizontally or vertically, and the other direction is set to be aligned up, down, left, and right according to the position relationship in step 1. If there is no step 2, according to the position relationship of the center of the UI control relative to the center of the UI interface in step 1, set the alignment mode to top left, bottom left, left, top, bottom, right, top right, and bottom right (such as Figure 2 According to the position of the UI control relative to the UI interface, if its position is the upper left position of the UI interface, the engine's existing Aspect Ratio Filter script is called for upper left alignment. If it is a UI control of the screen size, the engine's existing Aspect Ratio Filter script is called to scale up the screen, etc. For the identified situation, the existing engine technology is called for setting.
[0051] 6. If Figure 3 As shown, for specific UI controls such as a scroll view control, the present invention needs to set the anchor point and the center point to be aligned in the middle to adapt to the change in scroll content when the scroll content changes (such as the type and quantity of package items changes) (such as the Anchors anchor point of the RectTransform of the Unity3d engine is min(0.5,0.5)max(0.5,0.5), and the pivot center point is (0.5,0.5)).
[0052] The present invention also provides a UI control self-adaptation system, the system comprising: a position relationship acquisition module, a size acquisition module, a sub-UI control processing module, a super-screen processing module, and a UI control processing module;
[0053] The position relationship acquisition module acquires the position relationship between the world coordinate center point of the UI control and the center point of the UI interface;
[0054] The size acquisition module acquires the size of the UI control relative to the UI interface;
[0055] The child UI control processing module, for a child UI control having a parent UI control, reads the adaptive mode of the parent control as a basis for setting the adaptive mode of the child UI control;
[0056] The over-screen processing module adjusts the UI controls that exceed the screen size in an adaptive manner according to whether they exceed the horizontal or vertical dimensions;
[0057] The UI control processing module sets the adaptive mode adjustment of the UI control according to the position and size of the center point of the UI control relative to the UI interface.
[0058] The adaptive adjustment is implemented by using an Aspect Ratio Filter script. The Aspect RatioFilter script controls the size of the UI control's own layout elements, can adjust the height to fit the width, and will scale the UI control size to fit the layout of the UI interface.
[0059] The position relationship acquisition module is further specifically as follows: obtaining the world coordinate center of the UI control and comparing the position relationship of the center of the UI interface, that is, the world coordinate X axis of the UI control minus the world coordinate X axis of the center of the UI interface is XOffest, and the world coordinate Y axis of the UI control minus the world coordinate Y axis of the center of the UI interface is YOffset. If both XOffset and YOffset are 0, the centers are aligned. If both XOffset and YOffset are greater than 0, the UI control is in the upper right corner of the UI interface. If both XOffset and YOffset are less than 0, the UI control is in the lower left corner of the UI interface. If XOffset is greater than 0 and YOffset is less than 0, the UI control is in the lower right corner of the UI interface. If XOffset is less than 0 and YOffset is greater than 0, the UI control is in the upper left corner of the UI interface. If one of XOffset or YOffset is equal to 0 and the other is not 0, it is located in the up, down, left, and right directions of the UI interface.
[0060] The size acquisition module is further specifically configured to: acquire the horizontal and vertical sizes of the UI control relative to the UI interface; if the horizontal size of the UI control is the same as the horizontal size of the UI interface, then the horizontal setting of the UI control is adjusted in an adaptive manner to match the horizontal direction of the UI interface; if the vertical size of the UI control is the same as the vertical size of the UI interface, then the vertical setting of the UI control is adjusted in an adaptive manner to match the UI interface.
[0061] The child UI control processing module is further specifically as follows: obtaining the world coordinate center of the child UI control and comparing the positional relationship of the center of the parent UI control, that is, the world coordinate X axis of the child UI control minus the world coordinate X axis of the center of the parent UI control is XOffest, and the world coordinate Y axis of the child UI control minus the world coordinate Y axis of the center of the parent UI control is YOffset. If both XOffset and YOffset are 0, the centers are aligned. If both XOffset and YOffset are greater than 0, the child UI control is in the upper right corner of the parent UI control. If both XOffset and YOffset are less than 0, the child UI control is in the lower left corner of the parent UI control. If XOffset is greater than 0 and YOffset is less than 0, the child UI control is in the lower left corner of the parent UI control. If XOffset is less than 0, the child UI control is in the lower right corner of the parent UI control. If XOffset is less than 0 and YOffset is greater than 0, the child UI control is in the upper left corner of the parent UI control. If one of XOffset or YOffset is equal to 0 and the other is not 0, it is located in the up, down, left, and right directions of the parent UI control. Get the horizontal and vertical sizes of the child UI control relative to the parent UI control. If the horizontal size of the child UI control is the same as that of the parent UI control, then the horizontal setting of the child UI control is adjusted to match the adaptive mode of the parent UI control. If the vertical size of the child UI control is the same as that of the parent UI control, then the vertical setting of the child UI control is adjusted to match the adaptive mode of the parent UI control.
[0062] The super-screen processing module is further specified as follows: for UI controls that exceed the screen size, if the horizontal excess is set to: fix the vertical size to the value of the vertical size of the screen and stretch the horizontal type, this type is horizontal drag; if the vertical excess is set to: fix the horizontal size to the value of the horizontal size of the screen and stretch the vertical type, this type is vertical drag; if the UI control exceeds the screen size both horizontally and vertically, then the UI control is set to fix the original UI size type, which is horizontal and vertical drag.
[0063] The UI control processing module is further specifically as follows: determine the position of the UI control in the position relationship acquisition module relative to the UI interface and the size relationship of the UI control in the size acquisition module relative to the UI interface; if the size acquisition module is used to set the UI interface size to be horizontally or vertically adapted, the UI interface is first set to be horizontally or vertically adapted, and the other direction is set to be aligned up and down, left and right according to the position relationship of the position relationship acquisition module; if there is no size acquisition module, the alignment mode is set to upper left, lower left, left, upper, lower, right, upper right, and lower right according to the position relationship of the center of the UI control in the position relationship acquisition module relative to the center of the UI interface.
[0064] In addition, the specific UI control of the present invention sets its anchor point and center point according to the type of UI control. For example, the specific UI control such as the scroll view control needs to set the anchor point and center point to the middle alignment to adapt to the scroll content change when the scroll content changes (such as the type and number of package items change). For example, the scroll view control needs to set the anchor point and center point to the middle alignment to adapt to the scroll content change when the scroll content changes (such as the type and number of package items change).
[0065] The above description is only a preferred embodiment of the present invention. All equivalent changes and modifications made according to the scope of the patent application of the present invention should fall within the scope of the present invention.
Claims
1. A method for self-adaptation of UI controls, characterized in that: The method comprises the following steps: Step S1, obtaining the position relationship between the world coordinate center point of the UI control and the center point of the UI interface; Step S2, obtaining the size of the UI control relative to the UI interface; Step S3: For a child UI control having a parent UI control, read the adaptive mode of the parent control as a basis for setting the adaptive mode of the child UI control; Step S4: For UI controls that exceed the screen size, an adaptive adjustment is set according to whether the horizontal or vertical size exceeds the screen size; Step S5: setting the adaptive mode of the UI control according to the position and size of the UI control relative to the center point of the UI interface.
2. A method for self-adaptation of UI controls according to claim 1, characterized in that: The adaptive adjustment is implemented by using an Aspect Ratio Filter script, which controls the size of the UI control's own layout elements, can adjust the height to fit the width, and will scale the UI control size to fit the UI interface layout.
3. A method for self-adaptation of UI controls according to claim 1, characterized in that: The step S1 is further specified as follows: obtaining the world coordinate center of the UI control and comparing the positional relationship of the center of the UI interface, that is, the world coordinate X axis of the UI control minus the world coordinate X axis of the center of the UI interface is XOffest, and the world coordinate Y axis of the UI control minus the world coordinate Y axis of the center of the UI interface is YOffset. If both XOffset and YOffset are 0, the centers are aligned. If both XOffset and YOffset are greater than 0, the UI control is in the upper right corner of the UI interface. If both XOffset and YOffset are less than 0, the UI control is in the lower left corner of the UI interface. If XOffset is greater than 0 and YOffset is less than 0, the UI control is in the lower right corner of the UI interface. If XOffset is less than 0 and YOffset is greater than 0, the UI control is in the upper left corner of the UI interface. If one of XOffset or YOffset is equal to 0 and the other is not 0, it is located in the up, down, left, and right directions of the UI interface.
4. A method for self-adaptation of UI controls according to claim 1, characterized in that: The step S2 is further specified as follows: obtaining the horizontal and vertical sizes of the UI control relative to the UI interface; if the horizontal size of the UI control is the same as the horizontal size of the UI interface, then the horizontal setting of the UI control is adjusted in an adaptive manner to match the horizontal direction of the UI interface; if the vertical size of the UI control is the same as the vertical size of the UI interface, then the vertical setting of the UI control is adjusted in an adaptive manner to match the UI interface.
5. A method for self-adaptation of UI controls according to claim 1, characterized in that: The step S3 is further specifically as follows: obtaining the world coordinate center of the child UI control and comparing the positional relationship of the center of the parent UI control, that is, the world coordinate X axis of the child UI control minus the world coordinate X axis of the center of the parent UI control is XOffest, and the world coordinate Y axis of the child UI control minus the world coordinate Y axis of the center of the parent UI control is YOffset. If both XOffset and YOffset are 0, the centers are aligned. If both XOffset and YOffset are greater than 0, the child UI control is in the upper right corner of the parent UI control. If both XOffset and YOffset are less than 0, the child UI control is in the lower left corner of the parent UI control. XOffset is greater than 0 and YOffset is less than 0. Then the child UI control is in the lower right corner of the parent UI control, XOffset is less than 0 and YOffset is greater than 0, then the child UI control is in the upper left corner of the parent UI control, and if one of XOffset or YOffset is equal to 0 and the other is not 0, it is located in the up, down, left, and right directions of the parent UI control; get the horizontal and vertical sizes of the child UI control relative to the parent UI control. If the horizontal size of the child UI control is the same as that of the parent UI control, then the horizontal setting of the child UI control is adjusted to match the adaptive mode of the parent UI control in the horizontal direction. If the vertical size of the child UI control is the same as that of the parent UI control, then the vertical setting of the child UI control is adjusted to match the adaptive mode of the parent UI control.
6. A method for self-adaptation of UI controls according to claim 1, characterized in that: The step S4 is further specified as follows: for the UI control that exceeds the screen size, if the horizontal excess is set to: fix the vertical size to the value of the vertical size of the screen and stretch the horizontal type, the type is horizontal drag; if the vertical excess is set to: fix the horizontal size to the value of the horizontal size of the screen and stretch the vertical type, the type is vertical drag; if the UI control exceeds the screen size both horizontally and vertically, then the UI control is set to fix the original size type of the UI, and the type is horizontal and vertical drag.
7. A method for self-adaptation of UI controls according to claim 1, characterized in that: The step S5 is further specifically as follows: determine the position of the UI control relative to the UI interface in step 1 and the size relationship of the UI control relative to the UI interface in step 2; if step 2 is used to set the UI interface size to fit horizontally or vertically, first set the UI interface to fit horizontally or vertically, and set the other direction to top-bottom, left-right, and left-right alignment according to the position relationship in step 1; if step 2 is not used, set the alignment to top-left, bottom-left, left, top, bottom, right, top-right, and bottom-right according to the position relationship of the center of the UI control relative to the center of the UI interface in step 1.
8. A UI control self-adaptive system, characterized by: The system comprises: a position relationship acquisition module, a size acquisition module, a sub-UI control processing module, a super-screen processing module, and a UI control processing module; The position relationship acquisition module acquires the position relationship between the world coordinate center point of the UI control and the center point of the UI interface; The size acquisition module acquires the size of the UI control relative to the UI interface; The child UI control processing module, for a child UI control having a parent UI control, reads the adaptive mode of the parent control as a basis for setting the adaptive mode of the child UI control; The over-screen processing module adjusts the UI controls that exceed the screen size in an adaptive manner according to whether they exceed the horizontal or vertical dimensions; The UI control processing module sets the adaptive mode adjustment of the UI control according to the position and size of the center point of the UI control relative to the UI interface.
9. A UI control self-adaptation system according to claim 1, characterized in that: The adaptive adjustment is implemented by using an Aspect Ratio Filter script, which controls the size of the UI control's own layout elements, can adjust the height to fit the width, and will scale the UI control size to fit the UI interface layout.
10. The UI control self-adaptation system according to claim 1, characterized in that: The position relationship acquisition module is further specifically as follows: obtaining the world coordinate center of the UI control and comparing the position relationship of the center of the UI interface, that is, the world coordinate X axis of the UI control minus the world coordinate X axis of the center of the UI interface is XOffest, and the world coordinate Y axis of the UI control minus the world coordinate Y axis of the center of the UI interface is YOffset. If both XOffset and YOffset are 0, the centers are aligned. If both XOffset and YOffset are greater than 0, the UI control is in the upper right corner of the UI interface. If both XOffset and YOffset are less than 0, the UI control is in the lower left corner of the UI interface. If XOffset is greater than 0 and YOffset is less than 0, the UI control is in the lower right corner of the UI interface. If XOffset is less than 0 and YOffset is greater than 0, the UI control is in the upper left corner of the UI interface. If one of XOffset or YOffset is equal to 0 and the other is not 0, it is located in the up, down, left, and right directions of the UI interface.
11. A UI control self-adaptation system according to claim 1, characterized in that: The size acquisition module is further specifically configured to: acquire the horizontal and vertical sizes of the UI control relative to the UI interface; if the horizontal size of the UI control is the same as the horizontal size of the UI interface, then the horizontal setting of the UI control is adjusted in an adaptive manner to match the horizontal direction of the UI interface; if the vertical size of the UI control is the same as the vertical size of the UI interface, then the vertical setting of the UI control is adjusted in an adaptive manner to match the UI interface.
12. The UI control self-adaptation system according to claim 1, characterized in that: The child UI control processing module is further specifically as follows: obtaining the world coordinate center of the child UI control and comparing the positional relationship of the center of the parent UI control, that is, the world coordinate X axis of the child UI control minus the world coordinate X axis of the center of the parent UI control is XOffest, and the world coordinate Y axis of the child UI control minus the world coordinate Y axis of the center of the parent UI control is YOffset. If both XOffset and YOffset are 0, the centers are aligned. If both XOffset and YOffset are greater than 0, the child UI control is in the upper right corner of the parent UI control. If both XOffset and YOffset are less than 0, the child UI control is in the lower left corner of the parent UI control. If XOffset is greater than 0 and YOffset is less than 0, the child UI control is in the lower left corner of the parent UI control. If XOffset is less than 0, the child UI control is in the lower right corner of the parent UI control. If XOffset is less than 0 and YOffset is greater than 0, the child UI control is in the upper left corner of the parent UI control. If one of XOffset or YOffset is equal to 0 and the other is not 0, it is located in the up, down, left, and right directions of the parent UI control. Get the horizontal and vertical sizes of the child UI control relative to the parent UI control. If the horizontal size of the child UI control is the same as that of the parent UI control, then the horizontal setting of the child UI control is adjusted to match the adaptive mode of the parent UI control. If the vertical size of the child UI control is the same as that of the parent UI control, then the vertical setting of the child UI control is adjusted to match the adaptive mode of the parent UI control.
13. A UI control self-adaptation system according to claim 1, characterized in that: The super-screen processing module is further specified as follows: for UI controls that exceed the screen size, if the horizontal excess is set to: fix the vertical size to the value of the vertical size of the screen and stretch the horizontal type, this type is horizontal drag; if the vertical excess is set to: fix the horizontal size to the value of the horizontal size of the screen and stretch the vertical type, this type is vertical drag; if the UI control exceeds the screen size both horizontally and vertically, then the UI control is set to fix the original UI size type, which is horizontal and vertical drag.
14. A UI control self-adaptation system according to claim 1, characterized in that: The UI control processing module is further specifically as follows: determine the position of the UI control in the position relationship acquisition module relative to the UI interface and the size relationship of the UI control in the size acquisition module relative to the UI interface; if the size acquisition module is used to set the UI interface size to be horizontally or vertically adapted, the UI interface is first set to be horizontally or vertically adapted, and the other direction is set to be aligned up and down, left and right according to the position relationship of the position relationship acquisition module; if there is no size acquisition module, the alignment mode is set to upper left, lower left, left, upper, lower, right, upper right, and lower right according to the position relationship of the center of the UI control in the position relationship acquisition module relative to the center of the UI interface.
Citation Information
Patent Citations
UI layout self-adaptation method and device
CN107515751A
Display method and device of UI interface on EINK colored screen equipment
CN108228290A
UI automatic layout method
CN108363572A
Game interface display method and device, storage medium and electronic device
CN110025953A
Relative Touch User Interface Enhancements
US20120242581A1
Cited By
Method for solving refined layout of page components in text H5 scene
CN121807294A