Cross-platform user interface adaptation method and device, electronic equipment and readable medium

Abstract

The embodiment of the invention discloses a cross-platform user interface adaptation method and device, electronic equipment and a readable medium. A specific embodiment of the method comprises the following steps: determining an equipment operating system; determining equipment resolution information; putting each user interface control into a top layer container control; determining each user interface control and the top layer container control as a to-be-adapted control sequence; for each control to be adapted, executing the following control adaptation operations: carrying out resolution ratio adaptation on the control to be adapted; the control to be adapted is adapted relative to a parent control; performing font adaptation on fonts contained in the to-be-adapted control to update the fonts contained in the to-be-adapted control; and performing control layout adaptation on each control to be adapted. According to the embodiment, by unifying the resolution ratio, the self-adaptive layout and font zooming, the display effect of the user interface on different devices is improved, and then cross-platform interface adaptation is achieved.

Description

Technical Field

[0001] Embodiments of this disclosure relate to the field of computer technology, and more particularly to cross-platform user interface adaptation methods, apparatus, electronic devices, and readable media. Background Technology

[0002] As crucial equipment in supermarket operations, checkout devices or mobile terminals directly impact operational efficiency and the customer shopping experience through their performance and user interface. Different manufacturers produce checkout devices with varying resolutions, and existing POS systems often struggle to adapt well to these diverse resolutions. Currently, the common approach to user interface adaptation for checkout devices on different platforms is to provide cross-platform APIs at the system layer of the mobile terminal device (checkout device), while the application layer uses HTML, CSS, and JavaScript to build cross-platform UI components. These standard UI elements are then rendered as native UI components based on the device's operating system parameters, enabling the development and display of application interfaces across different platforms, thus achieving user interface adaptation.

[0003] However, when using the above method for user interface adaptation, the following technical problems often arise:

[0004] When relying on web technologies (such as HTML, CSS, and JavaScript) for user interface adaptation, failure to accurately adapt to different device screen resolutions often leads to issues such as incomplete display, blurry fonts, and misaligned controls on different devices. Furthermore, on less powerful mobile devices, stuttering and unresponsiveness may occur. In addition, rendering differences between different browsers or device operating systems can also result in inconsistent interface styles, thus reducing user experience and operational efficiency.

[0005] The information disclosed in this background section is only intended to enhance the understanding of the background of the inventive concept, and therefore may contain information that does not constitute prior art known to those skilled in the art. Summary of the Invention

[0006] The summary portion of this disclosure is intended to provide a brief overview of the concepts, which will be described in detail in the detailed description portion. This summary portion is not intended to identify key or essential features of the claimed technical solutions, nor is it intended to limit the scope of the claimed technical solutions.

[0007] Some embodiments of this disclosure provide cross-platform user interface adaptation methods, apparatuses, electronic devices, and readable media to address one or more of the technical problems mentioned in the background section above.

[0008] In a first aspect, some embodiments of this disclosure provide a cross-platform user interface adaptation method, the method comprising: determining the device operating system of a target settlement device; in response to determining that the target settlement device meets a preset adaptation trigger condition, determining the device resolution information of the target settlement device; placing each user interface control into a top-level container control corresponding to the device operating system; determining each user interface control placed into the top-level container control and the top-level container control as a sequence of controls to be adapted; for each control to be adapted in the sequence of controls to be adapted, performing the following control adaptation operations: in response to determining that the control to be adapted is a parent control, performing resolution ratio adaptation on the control to be adapted according to the device resolution information to update the resolution corresponding to the control to be adapted; in response to determining that the control to be adapted is a child control, performing relative adaptation on the control to be adapted to the parent control according to the device resolution information to update the control to be adapted; in response to determining that the control to be adapted contains text, performing font adaptation on the font contained in the control to be adapted according to the device resolution information to update the font contained in the control to be adapted; and performing control layout adaptation on each control to be adapted.

[0009] Secondly, some embodiments of this disclosure provide a cross-platform user interface adaptation device, the device comprising: a first determining unit configured to determine the device operating system of a target settlement device; a second determining unit configured to determine device resolution information of the target settlement device in response to determining that the target settlement device meets a preset adaptation trigger condition; an placing unit configured to place each user interface control into a top-level container control corresponding to the device operating system; a third determining unit configured to determine each user interface control placed into the top-level container control and the top-level container control as a sequence of controls to be adapted; and an execution unit configured to execute each control in the sequence of controls to be adapted. The following control adaptation operations are performed: In response to determining that the control to be adapted is a parent control, the resolution ratio of the control to be adapted is adapted according to the device resolution information to update the resolution corresponding to the control to be adapted; In response to determining that the control to be adapted is a child control, the control to be adapted relative to the parent control is adapted according to the device resolution information to update the control to be adapted; In response to determining that the control to be adapted contains text, the font of the font contained in the control to be adapted is adapted according to the device resolution information to update the font contained in the control to be adapted; The layout adaptation unit is configured to perform control layout adaptation on each of the above-mentioned controls to be adapted.

[0010] Thirdly, some embodiments of this disclosure provide an electronic device, including: one or more processors; and a storage device having one or more programs stored thereon, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the method described in any implementation of the first aspect above.

[0011] Fourthly, some embodiments of this disclosure provide a computer-readable medium having a computer program stored thereon, wherein the program, when executed by a processor, implements the method described in any of the implementations of the first aspect above.

[0012] The various embodiments disclosed above have the following beneficial effects: the cross-platform user interface adaptation method of some embodiments of this disclosure can improve the display effect of the user interface on different devices by unifying the resolution ratio, adaptive layout, and font scaling, thereby achieving cross-platform interface adaptation. Specifically, the reason for the poor display effect of the relevant user interface on different devices is that when relying on Web technologies (such as HTML, CSS, and JavaScript) for user interface adaptation, the failure to accurately adapt to the screen resolution of different devices often leads to problems such as incomplete display, blurry fonts, and misaligned controls on different devices. Moreover, on mobile terminal devices with weak performance, stuttering and unresponsiveness may also occur. In addition, rendering differences in different browsers or device system environments can also lead to inconsistent interface styles, thereby reducing user experience and operational efficiency. Based on this, the cross-platform user interface adaptation method of some embodiments of this disclosure first determines the operating system of the target settlement device. Thus, the current operating environment of the settlement device can be identified. Then, in response to determining that the target settlement device meets the preset adaptation trigger conditions, the device resolution information of the target settlement device is determined. Thus, the screen width, screen height, and pixel density of the target settlement device can be obtained, so that each user interface control can be updated based on accurate resolution information in subsequent adaptation. Next, each user interface control is placed into the top-level container control corresponding to the device's operating system. This ensures that all user interface controls are included in a unified layout and support a unified coordinate system and scaling. Then, the user interface controls placed in the top-level container control and the top-level container control itself are identified as the sequence of controls to be adapted. This allows the user interface controls and the top-level container control to be sorted according to their nesting relationships, resulting in the sequence of controls to be adapted. Controls are then adapted one by one according to their nesting relationships during the sequence update. Next, for each control in the sequence to be adapted, the following control adaptation operations are performed: First, in response to determining that the control to be adapted is a parent control, the control to be adapted is scaled according to the device resolution information to update the resolution corresponding to the control. This allows the container control size to be adjusted according to the overall scaling ratio to fit the target device's screen, ensuring that the top-level control or large container control displays correctly at different resolutions. Second, in response to determining that the control to be adapted is a child control, the control to be adapted relative to its parent control is scaled according to the device resolution information to update the control. This allows the size and position of child controls to change dynamically with the parent control, achieving adaptive layout and accurately maintaining the relative proportions between various user interface controls, thus avoiding misalignment, squeezing, or overlapping of controls due to absolute size.The third step involves adapting the font of the controls to be adapted to the determined text. Based on the device resolution information, the font of these controls is adapted accordingly, updating the font settings. This method, by determining the font pixel values ​​according to pixel density, ensures that the font remains neither blurry nor overflowing on different devices. Finally, the layout of each control to be adapted is then adapted. This allows for recalculation of control positions, spacing, and alignment at the new resolution, achieving a stable final layout. Attached Figure Description

[0013] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. Throughout the drawings, the same or similar reference numerals denote the same or similar elements. It should be understood that the drawings are schematic, and elements are not necessarily drawn to scale.

[0014] Figure 1 This is a flowchart of some embodiments of the cross-platform user interface adaptation method according to the present disclosure;

[0015] Figure 2 This is a schematic diagram of the structure of some embodiments of the cross-platform user interface adaptation device according to the present disclosure;

[0016] Figure 3 This is a schematic diagram of the structure of an electronic device suitable for implementing some embodiments of the present disclosure. Detailed Implementation

[0017] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.

[0018] It should also be noted that, for ease of description, only the parts relevant to the invention are shown in the accompanying drawings. Unless otherwise specified, the embodiments and features described in this disclosure can be combined with each other.

[0019] It should be noted that the concepts of "first" and "second" mentioned in this disclosure are used only to distinguish different devices, modules or units, and are not used to limit the order of functions performed by these devices, modules or units or their interdependencies.

[0020] It should be noted that the terms "a" and "a plurality of" used in this disclosure are illustrative rather than restrictive, and those skilled in the art should understand that, unless otherwise expressly indicated in the context, they should be understood as "one or more".

[0021] The names of messages or information exchanged between multiple devices in the embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of such messages or information.

[0022] This disclosure will now be described in detail with reference to the accompanying drawings and embodiments.

[0023] Figure 1 A flow 100 is shown, illustrating some embodiments of a cross-platform user interface adaptation method according to this disclosure. This cross-platform user interface adaptation method includes the following steps:

[0024] Step 101: Determine the operating system of the target settlement device.

[0025] In some embodiments, the entity executing the cross-platform user interface adaptation method (e.g., a computing device) can determine the operating system of the target checkout device. The target checkout device can be a mobile terminal device used for checkout. The operating system can be a Windows system or an Android system.

[0026] Step 102: In response to determining that the target settlement device meets the preset adaptation triggering conditions, determine the device resolution information of the target settlement device.

[0027] In some embodiments, the execution entity may determine the device resolution information of the target checkout device in response to determining that the target checkout device meets preset adaptation trigger conditions. The preset adaptation trigger conditions may include, but are not limited to, application or device system startup, dynamic refresh of interface layout, remote or local configuration update, and runtime detection of screen or system change events. Application startup may refer to the startup of an application (e.g., a checkout program) or device system and the initialization of the main interface (e.g., the checkout system homepage). Dynamic refresh of interface layout may refer to changes in interface structure during the application process. For example, page switching (e.g., entering the settings page, product details page), resolution switching (e.g., changing from window mode to full screen), or changes in the parent container size (e.g., the user adjusting the window size). Remote or local configuration update may refer to the target checkout device receiving new control styles, fonts, and resolution strategy configurations from the server, or the user locally adjusting the UI scaling level (e.g., switching to small font mode in settings). Detection of screen or system change events during runtime may refer to changes in system resolution, replacement of the display, or external display output. The device resolution information may include the device screen width, device screen height, and physical pixel density. The aforementioned device screen width can be the screen width of the target settlement device. The aforementioned device screen height can be the screen height of the target settlement device. The aforementioned physical pixel density can be PPI (Pixels Per Inch), which is the number of pixels per inch. In practice, the aforementioned execution entity can determine the device resolution information of the target settlement device by calling the system interface.

[0028] Step 103: Place each user interface control into the top-level container control corresponding to the device operating system.

[0029] In some embodiments, the execution entity can place each user interface control into a top-level container control corresponding to the device's operating system. This top-level container control can be the outermost UI container in the target settlement device's user interface, not contained within other controls, and directly mounted on the operating system's window system. For example, if the device's operating system is Windows, the top-level container control can be a QMainWindow control under the Qt framework / language or a Window control under the WPF (.NET) framework / language. If the device's operating system is Android, the top-level container control can be a ViewGroup control under Java or Kotlin. In practice, the execution entity can create a top-level container control corresponding to the device's operating system and place the various user interface controls into the created top-level container control. The aforementioned user interface controls may include, but are not limited to, basic input controls (such as Button, TextBox, CheckBox, RadioButton), display controls (such as Label, ImageView, Tooltip), container controls (such as Panel / Frame / ViewGroup, LinearLayout, GridLayout), composite data display controls (such as ListView, TableView, TreeView), navigation and structural controls (such as Tab, MenuBar, ToolBar), interactive feedback and pop-up controls (such as Dialog, Snackbar), and custom controls (such as ChartView, DatePicker).

[0030] Step 104: Determine the sequence of user interface controls placed in the top-level container control and the top-level container control as the control sequence to be adapted.

[0031] In some embodiments, the execution entity can determine the various user interface controls placed within the top-level container control and the top-level container control as the sequence of controls to be adapted. In practice, the execution entity can determine the various user interface controls and the top-level container control placed within the top-level container control as the sequence of controls to be adapted according to their nesting relationship (parent-child relationship). For example, the top-level container control A, user interface control B, user interface control C, user interface control E, user interface control F, and user interface control G can be determined as the sequence of controls to be adapted (A(B(E, F), C(G))), which can represent that control A is the parent control of controls B and C, control B is the parent control of controls E and F, and control C is the parent control of control G.

[0032] Step 105: For each control in the sequence to be adapted, perform the following control adaptation operation:

[0033] Step 1051: In response to determining that the control to be adapted is the parent control, the resolution ratio of the control to be adapted is adapted according to the device resolution information to update the resolution corresponding to the control to be adapted.

[0034] In some embodiments, the execution entity may, in response to determining that the control to be adapted is the parent control, perform resolution ratio adaptation on the control to be adapted according to the device resolution information, so as to update the resolution corresponding to the control to be adapted.

[0035] It should be noted that the aforementioned execution entity can perform control adaptation operations on each control to be adapted sequentially according to the order of the sequence of controls to be adapted.

[0036] In some optional implementations of certain embodiments, the execution entity may perform resolution ratio adaptation on the control to be adapted based on the device resolution information through the following steps to update the resolution corresponding to the control to be adapted:

[0037] The first step is to determine the control adaptation ratio by the ratio of the preset baseline width to the device screen width included in the device resolution information mentioned above. The preset baseline width can be a preset device screen width.

[0038] The second step is to determine the actual width of the control to be adapted by multiplying the width of the control to be adapted by the adaptation ratio.

[0039] The third step is to determine the actual control height corresponding to the control to be adapted by multiplying the actual control width and the aspect ratio of the control to be adapted.

[0040] Step 1052: In response to determining that the control to be adapted is a child control, the control to be adapted is adapted relative to the parent control according to the device resolution information to update the control to be adapted.

[0041] In some embodiments, the execution entity may, in response to determining that the control to be adapted is a child control, adapt the control to be adapted relative to the parent control according to the device resolution information, so as to update the control to be adapted.

[0042] In some optional implementations of certain embodiments, the execution entity may update the control to be adapted relative to its parent control by performing the following steps based on the device resolution information:

[0043] The first step is to determine the actual height and actual width of the parent control corresponding to the control to be adapted, and use these as the actual parent control height and actual parent control width, respectively.

[0044] The second step is to determine the actual control width by multiplying the width occupancy ratio of the control to be adapted by the determined actual parent control width. The width occupancy ratio is the ratio of the preset width of the control to be adapted to the preset width of its corresponding parent control in the design drawing (i.e., under default conditions).

[0045] The third step is to determine the actual control height by multiplying the height occupancy ratio of the control to be adapted by the determined actual height of the parent control. The height occupancy ratio is the ratio of the preset height of the control to be adapted to the preset height of its corresponding parent control in the design drawing (i.e., under default conditions).

[0046] Step 1053: In response to determining that the control to be adapted contains text, the font of the control to be adapted is adapted according to the device resolution information to update the font of the control to be adapted.

[0047] In some embodiments, the execution entity may, in response to determining that the control to be adapted contains text, perform font adaptation on the font contained in the control to be adapted according to the device resolution information, so as to update the font contained in the control to be adapted.

[0048] In some optional implementations of certain embodiments, the execution entity may perform font adaptation on the font contained in the control to be adapted based on the device resolution information through the following steps, so as to update the font contained in the control to be adapted:

[0049] The first step is to determine the actual font pixel size for each font included in the control to be adapted, based on the physical pixel density included in the device resolution information. In practice, the execution entity can determine the actual font pixel size by the ratio of the product of the physical pixel density and the font resolution (i.e., the original resolution) to the standard dots per inch.

[0050] The second step is to apply the determined pixel sizes of each actual font to the fonts contained in the control to be adapted.

[0051] Step 106: Adapt the layout of each control to be adapted.

[0052] In some embodiments, the execution entity can perform control layout adaptation on each of the controls to be adapted. In practice, the execution entity can lay out the controls on the device display interface according to the updated adaptation.

[0053] It should be noted that commonly used screen resolution ratios are 4:3 (16:12), 16:10, and 16:9. This application selects 16:10 as the design resolution (i.e., the preset resolution) based on the principle of appropriate ratio adaptation, which is the best design reference. During implementation, all controls need to be placed within a parent container (i.e., the top-level container control) (e.g., Qwidget, QML's RowLayout and ColumnLayout controls). Horizontally, the controls can be placed sequentially according to the ratio without overlapping. Furthermore, display compatibility is good while maintaining the same font size; screens larger than the design resolution pixels will not have problems, and smaller screens only require minor adjustments to achieve perfect display.

[0054] However, in the vertical direction, for controls with aspect ratios of 12:10 and 9:10, the relative height will appear taller on an E4:3 screen. On a 16:9 screen, the height will be slightly lower. For ListView-style container controls, the width and height should be properly adapted; the width of each item should vary according to the width of the ListView container, while the height should remain as constant as possible. For screen resolutions greater than the design resolution, to increase the font size, you can choose to use a relative ratio to the font displayed within each control, or you can choose a uniform ratio. Based on these principles, choosing 1280*800 as the pixel baseline for the design is best within the existing resolution.

[0055] In the process of adopting technical solutions to address the problems mentioned in the background technology, the following problems often arise: when facing different terminal devices (such as different screen sizes or switching between portrait and landscape orientations), the existing UI adaptation solutions have a single control layout structure and cannot flexibly switch layout strategies, resulting in problems such as unreasonable interface layout, display redundancy, or control obstruction.

[0056] Faced with the above-mentioned technical problems, the inventors decided to adopt the following solution:

[0057] Optionally, the above method may further include the following steps:

[0058] The first step is to collect the device environment parameters of the target settlement device to construct a device feature vector. These device environment parameters may include: device width, device height, device resolution, physical pixel density, device screen orientation, and device type (PAD / Phone / terminal). In practice, the executing entity can use each device environment parameter as a vector element to construct the device feature vector.

[0059] The second step involves responding to the target payment device by completing user authentication and determining the user's identity information. This user identity information includes a user role identifier. In practice, users of the target payment device can authenticate their identity through methods such as logging into their account via a login interface, scanning a QR code for payment, fingerprint recognition, or facial recognition. The target payment device can then complete the user authentication and determine the user's identity information. This user identity information may include the user's name, user identifier (e.g., mobile phone number), and user role identifier. The user role identifier can represent the user's role (e.g., consumer, equipment maintenance personnel, or administrator).

[0060] The third step is to select the preset layout strategy information that matches the aforementioned user role identifier and device feature vector from the preset layout strategy information set as the target layout strategy information. The preset layout strategy information in the preset layout strategy information set can represent JSON attributes preset for devices with different device environment parameters and users with different roles, used to define the layout of various user interface controls within the display interface. In practice, the executing entity can select the preset layout strategy information that matches the aforementioned user role identifier and device feature vector (i.e., the corresponding device feature vectors are the same and the corresponding user role identifiers are the same) from the preset layout strategy information set as the target layout strategy information. The target layout strategy information can be JSON information representing the layout of various user interface controls within the page (such as horizontal layout, grid layout, two-column layout, etc.). For example, {"role":"consumer","layoutRules":[{"width":"<1280","layout":"ColumnLayout"},{"width":">=1280","layout":"GridLayout"}]}.

[0061] The fourth step is to create a top-level container control corresponding to the layout strategy information described above as the top-level layout container. In practice, the executing entity can create a top-level container that matches the layout method represented by the layout strategy information as the top-level layout container. For example, it can create a GridLayout control or a StackLayout control.

[0062] The fifth step is to filter each user interface control according to the layout strategy information described above. In practice, the execution entity can iterate through all user interface controls in the current interface and filter out controls without permissions based on the user role identifiers and corresponding control permissions included in the layout strategy information. For example, a user with the role identifier "consumer" does not have permission to operate on controls related to backend data or device systems.

[0063] The sixth step is to construct a user interface control tree based on the filtered user interface controls. In practice, the aforementioned execution entity can re-insert each filtered user interface control into the top-level layout container, and sort the parent controls in each user interface control according to the layout method represented by the layout strategy information (e.g., horizontal layout, grid layout, two-column layout, or nested layout methods), thus constructing a user interface control tree based on the parent-child nesting relationship.

[0064] Step 7: For each user interface control in the above user interface control tree, perform the following steps:

[0065] The first sub-step, in response to determining that the above-mentioned user interface control is the parent control, adapts the resolution ratio of the above-mentioned user interface control according to the above-mentioned device resolution information, so as to update the resolution corresponding to the above-mentioned user interface control.

[0066] The second sub-step involves, in response to determining that the aforementioned user interface control is a child control, adapting the aforementioned user interface control relative to its parent control based on the aforementioned device resolution information, so as to update the aforementioned user interface control.

[0067] The third sub-step involves, in response to determining that the aforementioned user interface control contains text, adapting the font contained in the aforementioned user interface control according to the aforementioned device resolution information. In practice, the specific implementation methods of the aforementioned first to third sub-steps can refer to the implementation steps described in steps 1051 to 1053 and related optional implementation methods, and will not be repeated here.

[0068] The first to seventh steps described above are an inventive point of this disclosure, solving the technical problem that "existing UI adaptation solutions, when facing different terminal devices (such as different screen sizes or screen orientation switching), have a single control layout structure and cannot flexibly switch layout strategies, leading to unreasonable interface layout, display redundancy, or control obstruction." The factors leading to unreasonable interface layout, display redundancy, or control obstruction are often as follows: existing UI adaptation solutions, when facing different terminal devices (such as different screen sizes or screen orientation switching), have a single control layout structure and cannot flexibly switch layout strategies. This application, by collecting device characteristics (such as screen width, height, aspect ratio, interaction method, etc.) and combining them with preset layout strategy rules, dynamically matches and constructs an adapted top-level container and control organization structure, enabling UI controls to present a layout form that conforms to interaction expectations on different devices. Compared with traditional static layout methods, this solution can automatically select the optimal layout mode (such as grid, vertical scrolling, left and right columns, etc.) according to the device environment, realizing control partitioning and arrangement, thereby improving the space utilization and interaction clarity of cross-device interfaces, enhancing adaptation flexibility and user experience.

[0069] In the process of adopting technical solutions to address the problems mentioned in the background technology, the following problems often arise: existing user interface adaptation solutions only execute when the application starts up, and cannot respond in real time to changes in resolution, window size or screen orientation during operation, resulting in problems such as interface imbalance, misalignment or blurry fonts.

[0070] Faced with the above-mentioned technical problems, the inventors decided to adopt the following solution:

[0071] Optionally, the above method may further include the following steps:

[0072] The first step is to create a target event listener. This listener is used to monitor target system events within the target interface that meet preset conditions. The target interface is the currently displayed interface of the target settlement device. Target system events may include, but are not limited to, events related to the system interface such as: changes in interface window size (width and height), switching of interface display modes (maximized, full-screen, split-screen), changes in screen orientation (landscape / portrait switching), or switching of user tasks (e.g., scene page / business page switching). The preset condition may be that the target interface is in an active state (isActive = true), meaning the target interface is in the foreground and is not obscured.

[0073] The second step involves performing the following UI listening operations based on the pre-built target event listener:

[0074] The first sub-step involves monitoring the target interface using the aforementioned target event listener. The target interface refers to the interface currently displayed by the target settlement device.

[0075] The second sub-step involves responding to the target system event detected on the target interface and determining the magnitude of the interface change. In practice, when the aforementioned execution entity detects the target system event, it can determine the magnitude of the interface change as the highest of the width or height changes of the target interface before and after the event.

[0076] The third sub-step, in response to determining that the aforementioned interface change threshold is greater than or equal to a preset trigger threshold, involves performing hierarchical processing on each user interface control within the target interface to identify each target user interface control. The preset trigger threshold can be used to determine the width and height change range of the target interface. In practice, the executing entity can perform hierarchical processing on each user interface control within the target interface according to three categories: global controls, main controls, and local controls, and then identify each target user interface control by classifying the controls as global controls or local controls.

[0077] The fourth sub-step involves performing state caching on the target interface to obtain a state cache object. This state cache object can be a storage object used to cache the control states of various target user interface controls (e.g., input box focus, input content, scroll bar position, and dynamically selected items). In practice, the executing entity can use a cache to cache the control states of various target user interface controls within the target interface to obtain a state cache object. For example, one such state cache object could be cache = {"inputText": inputBox.text,"scrollPos":scrollView.position,"focus":currentFocusItem}.

[0078] The fifth sub-step involves performing the control adaptation operation described above on each of the identified target user interface controls. The control adaptation operation can be referred to the implementation steps described in steps 1051 to 1053 and related optional implementations, and will not be repeated here.

[0079] The sixth sub-step involves rearranging the adapted target user interface controls. In practice, the aforementioned execution entity can re-inject the adapted target user interface controls into the container, rebuild the layout structure, and trigger interface rendering for rearrangement.

[0080] The seventh sub-step involves redrawing the target interface based on the aforementioned state cache object, and then using the redrawn interface as the target interface to execute the interface listening operation again. In practice, the execution entity can refresh the target interface to complete the redrawing of the target interface, and then use the redrawn interface as the target interface to execute the interface listening operation again.

[0081] The aforementioned content, as an inventive point of this disclosure, solves the technical problem that "existing user interface adaptation schemes only execute when the application starts, and cannot respond to changes in resolution, window size, or screen orientation during operation, leading to problems such as interface imbalance, misalignment, or blurry fonts." Factors causing interface imbalance, misalignment, or blurry fonts often include: existing user interface adaptation schemes only execute when the application starts, and cannot respond to changes in resolution, window size, or screen orientation during operation. This application registers a listener to sense changes in the runtime device or window environment (such as scaling, rotation, and split-screen), dynamically determines whether to trigger adaptation, and, if necessary, re-collects device parameters, calculates scaling ratios and font sizes, while maintaining the current user input, focus, and scrolling states to ensure that controls are updated in real time without interrupting the interaction process. Compared to the traditional one-time initialization adaptation method, this solution achieves continuous UI adaptation capabilities during runtime, enabling the interface to be reconstructed and redrawn in real time, maintaining smooth interface response in multi-tasking, free-window, and mobile terminal scenarios, and significantly improving the practicality of robust interface adaptation.

[0082] The various embodiments disclosed above have the following beneficial effects: the cross-platform user interface adaptation method of some embodiments of this disclosure can improve the display effect of the user interface on different devices by unifying the resolution ratio, adaptive layout, and font scaling, thereby achieving cross-platform interface adaptation. Specifically, the reason for the poor display effect of the relevant user interface on different devices is that when relying on Web technologies (such as HTML, CSS, and JavaScript) for user interface adaptation, the failure to accurately adapt to the screen resolution of different devices often leads to problems such as incomplete display, blurry fonts, and misaligned controls on different devices. Moreover, on mobile terminal devices with weak performance, stuttering and unresponsiveness may also occur. In addition, rendering differences in different browsers or device system environments can also lead to inconsistent interface styles, thereby reducing user experience and operational efficiency. Based on this, the cross-platform user interface adaptation method of some embodiments of this disclosure first determines the operating system of the target settlement device. Thus, the current operating environment of the settlement device can be identified. Then, in response to determining that the target settlement device meets the preset adaptation trigger conditions, the device resolution information of the target settlement device is determined. Thus, the screen width, screen height, and pixel density of the target settlement device can be obtained, so that each user interface control can be updated based on accurate resolution information in subsequent adaptation. Next, each user interface control is placed into the top-level container control corresponding to the device's operating system. This ensures that all user interface controls are included in a unified layout and support a unified coordinate system and scaling. Then, the user interface controls placed in the top-level container control and the top-level container control itself are identified as the sequence of controls to be adapted. This allows the user interface controls and the top-level container control to be sorted according to their nesting relationships, resulting in the sequence of controls to be adapted. Controls are then adapted one by one according to their nesting relationships during the sequence update. Next, for each control in the sequence to be adapted, the following control adaptation operations are performed: First, in response to determining that the control to be adapted is a parent control, the control to be adapted is scaled according to the device resolution information to update the resolution corresponding to the control. This allows the container control size to be adjusted according to the overall scaling ratio to fit the target device's screen, ensuring that the top-level control or large container control displays correctly at different resolutions. Second, in response to determining that the control to be adapted is a child control, the control to be adapted relative to its parent control is scaled according to the device resolution information to update the control. This allows the size and position of child controls to change dynamically with the parent control, achieving adaptive layout and accurately maintaining the relative proportions between various user interface controls, thus avoiding misalignment, squeezing, or overlapping of controls due to absolute size.The third step involves adapting the font of the controls to be adapted to the determined text. Based on the device resolution information, the font of these controls is adapted accordingly, updating the font settings. This method, by determining the font pixel values ​​according to pixel density, ensures that the font remains neither blurry nor overflowing on different devices. Finally, the layout of each control to be adapted is then adapted. This allows for recalculation of control positions, spacing, and alignment at the new resolution, achieving a stable final layout.

[0083] Further reference Figure 2 As an implementation of the methods shown in the above figures, this disclosure provides some embodiments of a cross-platform user interface adaptation device, which are similar to... Figure 1 Corresponding to the method embodiments shown, this cross-platform user interface adaptation method apparatus can be specifically applied to various electronic devices.

[0084] like Figure 2 As shown, a cross-platform user interface adaptation device 200 in some embodiments includes: a first determining unit 201, a second determining unit 202, an placing unit 203, a third determining unit 204, an execution unit 205, and a layout adaptation unit 206. The first determining unit 201 is configured to determine the device operating system of the target settlement device; the second determining unit 202 is configured to determine the device resolution information of the target settlement device in response to determining that the target settlement device meets a preset adaptation trigger condition; the placing unit 203 is configured to place each user interface control into a top-level container control corresponding to the device operating system; the third determining unit 204 is configured to determine each user interface control placed in the top-level container control and the top-level container control as a sequence of controls to be adapted; and the execution unit 205 is configured to perform the following control adaptation operation for each control in the sequence of controls to be adapted. In response to determining that the control to be adapted is a parent control, the resolution of the control to be adapted is adapted according to the device resolution information to update the resolution corresponding to the control to be adapted; in response to determining that the control to be adapted is a child control, the control to be adapted is adapted relative to the parent control according to the device resolution information to update the control to be adapted; in response to determining that the control to be adapted contains text, the font of the control to be adapted is adapted according to the device resolution information to update the font of the control to be adapted; the layout adaptation unit 206 is configured to perform control layout adaptation on each of the controls to be adapted.

[0085] It is understandable that the units described in the cross-platform user interface adaptation device 200 are related to the reference Figure 1The steps in the described method correspond to each other. Therefore, the operations, features, and beneficial effects described above for the method also apply to the cross-platform user interface adaptation device 200 and the units contained therein, and will not be repeated here.

[0086] The following is for reference. Figure 3 It shows a schematic diagram of the structure of an electronic device 300 suitable for implementing some embodiments of the present disclosure. Figure 3 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of the embodiments of this disclosure.

[0087] like Figure 3 As shown, the electronic device 300 may include a processing unit (e.g., a central processing unit, a graphics processing unit, etc.) 301, which can perform various appropriate actions and processes according to a program stored in a read-only memory 302 or a program loaded from a storage device 308 into a random access memory 303. The random access memory 303 also stores various programs and data required for the operation of the electronic device 300. The processing unit 301, the read-only memory 302, and the random access memory 303 are interconnected via a bus 304. An input / output interface 305 is also connected to the bus 304.

[0088] Typically, the following devices can be connected to I / O interface 305: input devices 306 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 307 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 308 including, for example, magnetic tapes, hard disks, etc.; and communication devices 309. Communication device 309 allows electronic device 300 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 3 An electronic device 300 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively. Figure 3 Each box shown can represent a device or multiple devices as needed.

[0089] In particular, according to some embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, some embodiments of this disclosure include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device 309, or installed from a storage device 308, or installed from a read-only memory 302. When the computer program is executed by the processing device 301, it performs the functions defined in the methods of some embodiments of this disclosure.

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

[0091] In some implementations, clients and servers can communicate using any currently known or future-developed network protocol such as HTTP (Hypertext Transfer Protocol) and can interconnect with digital data communication (e.g., communication networks) of any form or medium. Examples of communication networks include local area networks (“LANs”), wide area networks (“WANs”), the Internet (e.g., the Internet of Things), and end-to-end networks (e.g., ad hoc end-to-end networks), as well as any currently known or future-developed networks.

[0092] The aforementioned computer-readable medium may be included in the aforementioned electronic device; or it may exist independently and not assembled into the electronic device. The aforementioned computer-readable medium carries one or more programs. When the electronic device executes the aforementioned one or more programs, the electronic device causes the following: It determines the operating system of the target settlement device; in response to determining that the target settlement device meets a preset adaptation trigger condition, it determines the device resolution information of the target settlement device; it places each user interface control into a top-level container control corresponding to the operating system; it determines the user interface controls placed into the top-level container control and the top-level container control as a sequence of controls to be adapted; for each control to be adapted in the sequence of controls to be adapted, it performs the following control adaptation operations: in response to determining that the control to be adapted is a parent control, it performs resolution ratio adaptation on the control to be adapted according to the device resolution information to update the resolution corresponding to the control to be adapted; in response to determining that the control to be adapted is a child control, it performs relative adaptation on the control to be adapted relative to the parent control according to the device resolution information to update the control to be adapted; in response to determining that the control to be adapted contains text, it performs font adaptation on the font contained in the control to be adapted according to the device resolution information to update the font contained in the control to be adapted; and it performs control layout adaptation on each control to be adapted.

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

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

[0095] The units described in some embodiments of this disclosure can be implemented in software or hardware. The described units can also be housed in a processor; for example, a processor can be described as including a first determining unit, a second determining unit, an insertion unit, a third determining unit, an execution unit, and a layout adaptation unit. The names of these units do not necessarily limit the specific unit; for example, the first determining unit can also be described as "a unit that determines the device operating system of the target settlement device."

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

[0097] The above description is merely a selection of preferred embodiments of this disclosure and an explanation of the technical principles employed. Those skilled in the art should understand that the scope of the invention involved in the embodiments of this disclosure is not limited to technical solutions formed by specific combinations of the above-described technical features, but should also cover other technical solutions formed by arbitrary combinations of the above-described technical features or their equivalents without departing from the above-described inventive concept. For example, technical solutions formed by substituting the above-described features with (but not limited to) technical features with similar functions disclosed in the embodiments of this disclosure.

Claims

1. A cross-platform user interface adaptation method, comprising: Determine the operating system of the target settlement device; In response to determining that the target settlement device meets the preset adaptation triggering conditions, the device resolution information of the target settlement device is determined; Place each user interface control into the top-level container control corresponding to the device's operating system; Each user interface control placed in the top-level container control and the top-level container control are determined as the sequence of controls to be adapted; For each control in the sequence of controls to be adapted, perform the following control adaptation operation: In response to determining that the control to be adapted is the parent control, the resolution ratio of the control to be adapted is adapted according to the device resolution information to update the resolution corresponding to the control to be adapted. In response to determining that the control to be adapted is a child control, the control to be adapted is adapted relative to the parent control according to the device resolution information, so as to update the control to be adapted. In response to determining that the control to be adapted contains text, the font of the control to be adapted is adapted according to the device resolution information to update the font of the control to be adapted. Perform control layout adaptation on each of the controls to be adapted.

2. The method according to claim 1, wherein, The step of adapting the control to be adapted to the device resolution information to update the resolution corresponding to the control includes: The ratio of the preset baseline width to the device screen width included in the device resolution information is determined as the control adaptation ratio; The product of the width of the control to be adapted and the adaptation ratio of the control is determined as the actual width of the control to be adapted. The product of the actual control width and the aspect ratio of the control to be adapted is determined as the actual control height of the control to be adapted.

3. The method according to claim 2, wherein, The step of adapting the control to be adapted relative to its parent control based on the device resolution information, and updating the control to be adapted, includes: The actual height and actual width of the parent control corresponding to the control to be adapted are determined as the actual parent control height and actual parent control width, respectively. The actual control width is determined by multiplying the width occupancy ratio of the control to be adapted and the determined actual parent control width. The width occupancy ratio is the ratio of the preset width of the control to be adapted in the design drawing to the preset width of the corresponding parent control. The actual control height is determined by multiplying the height occupancy ratio of the control to be adapted and the determined actual parent control height. The height occupancy ratio is the ratio of the preset height of the control to be adapted in the design drawing to the preset height of the corresponding parent control.

4. The method according to claim 3, wherein, The step of adapting the font of the control to be adapted according to the device resolution information to update the font of the control to be adapted includes: For each font contained in the control to be adapted, the actual font pixel size is determined based on the physical pixel density included in the device resolution information; The determined pixel sizes of each actual font are applied to each font contained in the control to be adapted.

5. A cross-platform user interface adaptation device, comprising: The first determining unit is configured to determine the device operating system of the target settlement device; The second determining unit is configured to determine the device resolution information of the target settlement device in response to determining that the target settlement device meets a preset adaptation trigger condition. The unit is configured to place each user interface control into the top-level container control corresponding to the device operating system. The third determining unit is configured to determine each user interface control placed in the top-level container control and the top-level container control as a sequence of controls to be adapted. The execution unit is configured to perform the following control adaptation operation for each control in the sequence of controls to be adapted: in response to determining that the control to be adapted is the parent control, adapting the resolution ratio of the control to be adapted according to the device resolution information to update the resolution corresponding to the control to be adapted; In response to determining that the control to be adapted is a child control, the control to be adapted is adapted relative to the parent control according to the device resolution information to update the control to be adapted; in response to determining that the control to be adapted contains text, the font contained in the control to be adapted is adapted according to the device resolution information to update the font contained in the control to be adapted. The layout adaptation unit is configured to adapt the layout of each of the controls to be adapted.

6. An electronic device, comprising: One or more processors; A storage device on which one or more programs are stored; When the one or more programs are executed by the one or more processors, the one or more processors implement the method as described in any one of claims 1 to 4.

7. A computer-readable medium having a computer program stored thereon, wherein, When the computer program is executed by a processor, it implements the method as described in any one of claims 1 to 4.

Images