An interface switching method, system, device and storage medium

Abstract

The application provides an interface switching method and device, equipment and a storage medium. The method comprises the following steps: determining target interface components in a target mode according to original interface components in a source mode, and determining a target layout area based on the target interface components; taking original interface content associated with the original interface components as a processing unit, and adapting and converting the processing unit based on the target layout area to obtain target interface content in the target mode; and configuring the target interface content in the target layout area to form an interface configuration in the target mode. Full-automatic and batch generation of interface configurations from the source mode to the target mode is realized, which greatly reduces the development and long-term maintenance cost of a game interface and improves the efficiency of interface iteration.

Description

Technical Field

[0001] This invention belongs to the field of user interface design technology, and in particular relates to an interface switching method, system, device and storage medium. Background Technology

[0002] With the development of mobile applications and games, their operating environments are becoming increasingly complex. To improve user experience and accessibility, applications often need to adapt to multiple display modes and configurations, such as switching between landscape and portrait modes, adapting to devices with different screen sizes and resolutions, or switching between different device forms and display themes. This is especially true for applications based on predefined interface project files and using complex fixed layouts (such as games).

[0003] However, when existing applications need to support a new display mode, traditional solutions rely on developers manually redesigning and adjusting a large number of interfaces one by one, resulting in high development and testing costs and difficulty in ensuring consistent user experience across different modes. If the original interface is subsequently iterated, all modes need to be maintained simultaneously, further amplifying the cost problem. Summary of the Invention

[0004] In view of this, the present invention provides an interface switching method, system, device and storage medium for automatically and in batches completing interface layout conversion.

[0005] A first aspect of the present invention provides an interface switching method, comprising:

[0006] Based on the original interface components in the source mode, determine the target interface components in the target mode, and determine the target layout area based on the target interface components.

[0007] Using the original interface content associated with the original interface component as a processing unit, the processing unit is adapted and transformed based on the target layout area to obtain the target interface content under the target mode.

[0008] The target interface content is configured in the target layout area to form the interface configuration under the target mode.

[0009] A second aspect of the present invention provides an interface switching system, comprising:

[0010] The target interface component determination module is used to determine the target interface component in the target mode based on the original interface components in the source mode, and to determine the target layout area based on the target interface component.

[0011] The target interface content determination module is used to use the original interface content associated with the original interface component as a processing unit, and adapt and transform the processing unit based on the target layout area to obtain the target interface content under the target mode.

[0012] The interface configuration generation module is used to configure the target interface content in the target layout area to form the interface configuration under the target mode.

[0013] A third aspect of the present invention provides an electronic device including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the interface switching method as described in the first aspect above.

[0014] A fourth aspect of the present invention provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the interface switching method described in the first aspect above.

[0015] Compared with the prior art, the embodiments of the present invention have the following beneficial effects:

[0016] The interface switching method provided by this invention effectively solves the problems of high cost and difficult maintenance associated with manual conversion by decomposing the interface into two parts: reusable interface components and variable interface content, and establishing an automated conversion process. Specifically, it first intelligently determines the interface framework (target interface component) and its layout area that adapts to the target mode, providing structured target constraints for interface content conversion; then, the original interface content is used as a processing unit, and automated adaptation and conversion are performed under this layout constraint, ultimately reorganizing into a configuration interface that conforms to the target mode. This achieves fully automated, batch generation of interface configurations from the source mode to the target mode, significantly reducing the development and long-term maintenance costs of game interfaces, while improving the efficiency of interface iteration. Attached Figure Description

[0017] To more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0018] Figure 1 This is a schematic diagram of an interface switching method provided in an embodiment of the present invention;

[0019] Figure 2 This is a schematic diagram of a game interface provided in an embodiment of the present invention;

[0020] Figure 3 This is a schematic diagram of a method for determining target interface content provided in an embodiment of the present invention;

[0021] Figure 4 This is a schematic diagram of a list box reconstruction provided by an embodiment of the present invention;

[0022] Figure 5 This is a schematic diagram of another interface switching method provided in an embodiment of the present invention;

[0023] Figure 6 This is a schematic diagram of interface content transformation during the first level of recursion provided in an embodiment of the present invention;

[0024] Figure 7 This is a schematic diagram of interface content transformation during second-level recursion provided in an embodiment of the present invention;

[0025] Figure 8 This is a schematic diagram of interface content transformation during third-level recursion provided in an embodiment of the present invention;

[0026] Figure 9 This is a schematic diagram of an interface switching system provided in an embodiment of the present invention;

[0027] Figure 10 This is a schematic diagram of an electronic device provided in an embodiment of the present invention. Detailed Implementation

[0028] In the following description, specific details such as particular system architectures and techniques are set forth for illustrative purposes and not for limitation, in order to provide a thorough understanding of the embodiments of the present invention. However, those skilled in the art will recognize that the present application may be implemented in other embodiments without these specific details. In other instances, detailed descriptions of well-known systems, apparatuses, circuits, and methods have been omitted to avoid unnecessary detail that could obscure the description of the present application.

[0029] The terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. In the description of this application, unless otherwise stated, "a plurality of" means two or more.

[0030] The technical solution of the present invention will be illustrated below through specific embodiments.

[0031] Reference Figure 1 The diagram illustrates an interface switching method provided by an embodiment of the present invention. This method can be executed by an interface switching system, which can be implemented in hardware and / or software and can be configured in an electronic device. Figure 1 As shown, the method may specifically include the following steps:

[0032] S11. Based on the original interface components in the source mode, determine the target interface components in the target mode, and determine the target layout area based on the target interface components.

[0033] The source mode is the display environment that the interface has already adapted to, such as landscape mode, which includes the already adjusted layout, component positions, font size, etc.

[0034] The target mode is a new display environment that needs to be adapted, such as portrait mode, which includes new screen size, aspect ratio, and interaction requirements.

[0035] It should be noted that both the source mode and the target mode can be either landscape or portrait mode, but they cannot be the same at the same time. For example, the screen aspect ratio in landscape mode is 16:9, and the screen aspect ratio in portrait mode is 9:16.

[0036] The source and target modes share the same functional requirements, content data, and user groups. In other words, they are two manifestations of the same application in different environments, connected through adaptation rules to serve the same user needs. Converting the source mode interface to the target mode interface is not a redesign, but an intelligent conversion that maintains functional consistency (i.e., unchanged interface controls), content integrity, and adaptability to environmental differences.

[0037] In source-mode UI development, it's typically necessary to use component libraries to manage and configure the game interface. A game UI project consists of two parts: UI components and UI content. UI components are reusable control blocks composed of UI backgrounds, function buttons, and other controls, which can be widely used by multiple systems. UI content elements are controls such as text, images, buttons, and progress bars that constitute individual UI elements.

[0038] Figure 2 This is a schematic diagram of a game interface. Figure 2 In the diagram, (a) is the game interface, (b) is a schematic diagram of the interface components, and (c) is a schematic diagram of the interface content. Figure 2 As shown in (a), the game interface 20 includes interface components 21 and interface content 22. The interface content 22 is displayed inside the interface components 21, as shown in (a). Figure 2 As shown in (b), interface component 21 includes an interface base plate 211 and some function buttons 212. The interface component 21 displays the interface theme name "Character Details," indicating that this game interface corresponds to the "Character Details" interface in the game. The interface base plate 211 is used to carry the interface content 22, such as... Figure 2 As shown in (c), the interface content 22 may include controls such as the character's name, image, and character attributes.

[0039] Optionally, a game may contain multiple levels of common components, such as first-level interface components, second-level interface components, third-level interface components, etc.

[0040] In an optional embodiment, the interface theme name "Shop" is displayed at the top of the interface base, corresponding to the shop interface in the game. It is understood that different "products" and their prices can be arranged on the interface base of this shop interface. The current interface component is a first-level interface component. When the user clicks on a "product" on the interface base, a second-level interface component is triggered to display second-level interface A2. Second-level interface A2 displays the attribute description of the selected "product." Additionally, clicking the "Select" button triggers second-level interface B2, which displays the processing controls for the selected "product," specifically including controls for selling, purchasing, or adding the "product" to favorites.

[0041] When converting a source mode interface to a target mode interface, it is first necessary to identify the original interface components used in the source mode and find or generate their corresponding functionally equivalent versions in the target mode, i.e., the target interface components.

[0042] In an optional embodiment, determining the target interface component in the target mode based on the original interface component in the source mode includes:

[0043] For each original interface component in the source mode, search the preset component library for an interface component whose identifier matches the original interface component's identifier and has the target mode identifier, and use it as the target interface component in the target mode.

[0044] The pre-defined component library is a database or resource collection storing various UI components. Each component has predefined forms in different modes. For example, the same "title bar" component may have two pre-stored versions in the component library: a "portrait title bar" and a "landscape title bar". The identifier of the original UI component is a unique identifier for the UI component, which may be an ID or a type code, used to accurately find its corresponding other mode versions in the component library. The target mode identifier is a label used to indicate which target mode the required component belongs to, such as landscape (landscape), portrait (portrait), tablet (tablet), dark_mode (dark mode), etc. After finding a component with a matching ID, the specific version of the UI component suitable for the current conversion target is further filtered to obtain the target UI component.

[0045] The target components are pre-designed to ensure compliance with the visual and interaction specifications of the target pattern, while enabling efficient searching, clear logic, and ease of development and maintenance.

[0046] After determining which target interface component to use, it is necessary to parse the display space reserved by the target interface component for dynamic content. The area represented by the size and position of the display space is the target layout area, which defines the final boundary within which all subsequent content elements must be accommodated.

[0047] Optionally, the target layout area is determined based on the target interface component, including: determining the target layout area used to configure the target interface content according to the container property of the target interface component.

[0048] First, extract the container properties of the target interface component. Container properties include, but are not limited to, geometric properties, style properties, and constraint properties. For example, the target interface component (such as a window, panel, or pop-up) has defined geometric properties such as size (width and height), position, padding, and border.

[0049] Then, from the complete occupied area of ​​the target interface component, the parts that cannot be used to place dynamic content (such as the title bar, fixed border, and control placeholders) are subtracted, and the remaining effective content area is calculated. This effective content area is the target layout area. This step is the framework preparation stage for interface switching, providing a container and space constraints that meet the requirements of the target pattern for the upcoming interface content transformation.

[0050] In an optional example Q1, a landscape (source mode) game's character interface uses a prefab interface component called CharPanel. When a portrait (target mode) version needs to be generated: the system first determines the corresponding portrait component for CharPanel. For example, it finds a prefab named CharPanel_Portrait in the resource library and identifies it as the target interface component. The system parses CharPanel_Portrait and extracts the parameters of a rectangular area called ContentArea within it, such as 300 pixels wide, 500 pixels high, and centered on the component. This rectangular area is then determined as the target layout area for this conversion.

[0051] S12. Using the original interface content associated with the original interface component as the processing unit, adapt and transform the processing unit based on the target layout area to obtain the target interface content under the target mode.

[0052] The original interface content, attached to the original interface components, consists of the essential information elements that need to be preserved and transformed. This original interface content is the layer of content that users truly focus on and interact with. Interface content comprises the text, images, buttons, progress bars, and other controls that make up a single interface element, such as... Figure 2As shown in (c), the interface includes character images, character attribute descriptions, numerical progress bars, and buttons.

[0053] All text, images, buttons, and other elements associated with the original interface components that need to be transformed are processed individually or in combination as processing units.

[0054] The system performs constraint-based adaptation and transformation. Specifically, it uses the target layout area as the overall constraint and executes an automated transformation process on the processing units. The goal of this process is to generate a new target interface content where all elements can be reasonably arranged within the target layout area.

[0055] It should be noted that the adaptation and conversion process is usually not completed in one step. It may involve intelligent operations such as scaling the content, adjusting its position, or even splitting and reorganizing its structure.

[0056] This step is the core stage of content reconstruction for interface switching. It transforms the original interface content adapted to the source mode into new content that can adapt to the target layout area through a series of automated processes.

[0057] In an optional example, following example Q1 in S11, all content within the original landscape CharPanel (character portraits, attribute text, skill icons, etc.) is used as the initial processing unit. The system takes this processing unit and the target layout area as input and initiates an automated conversion engine. The engine's goal is to output a new set of vertical content suitable for display within the CharPanel_Portrait's ContentArea (300×500 pixels). For example, it might need to change horizontal skill icons to vertical, wrap excessively long attribute text, and ensure that all elements do not exceed the boundaries of this area.

[0058] In another optional example, when performing landscape / portrait conversion, select the project file (including interface components) of the landscape interface to be converted, and run the automated landscape / portrait conversion tool, which will perform the following steps:

[0059] a. Create a new portrait-oriented project file and name it with the landscape-oriented project file name plus the suffix "portrait", for example, role_info_portrait.csd;

[0060] b. Read the directory structure of the landscape project. If there are UI components in the directory structure, replace them with the corresponding portrait UI components. For example, if the project directory detects a first-level panel pop_first, replace it with the corresponding portrait component pop_first_portrait;

[0061] c. Completing the above steps will replace the interface components in landscape mode with those in portrait mode.

[0062] S13. Configure the target interface content in the target layout area to form the interface configuration in the target mode.

[0063] During content configuration, the generated target interface content is filled into the target layout area according to its calculated final position and size. The target interface component with the filled content, along with all its attribute settings, is packaged or serialized into a complete interface configuration file or runtime object in target mode. This configuration represents the final result of the transformation.

[0064] This step is the output stage of the interface switching transformation. The final content after adaptation and transformation will be combined with the pre-prepared target interface component framework to form a complete and usable target mode interface.

[0065] The interface switching method provided by this invention effectively solves the problems of high cost and difficult maintenance associated with manual conversion by decomposing the interface into two parts: reusable interface components and variable interface content, and establishing an automated conversion process. Specifically, it first intelligently determines the interface framework (target interface component) and its layout area that adapts to the target mode, providing structured target constraints for interface content conversion; then, the original interface content is used as a processing unit, and automated adaptation and conversion are performed under this layout constraint, ultimately reorganizing into a configuration interface that conforms to the target mode. This achieves fully automated, batch generation of interface configurations from the source mode to the target mode, significantly reducing the development and long-term maintenance costs of game interfaces, while improving the efficiency of interface iteration.

[0066] In an optional embodiment, determining the target interface component in the target mode based on the original interface component in the source mode further includes:

[0067] Based on the display size of the original interface component in the source mode and the target screen width in the target mode, it is determined whether the preset reuse conditions are met. If the reuse conditions are met, the original interface component is used as the target interface component in the target mode. If the reuse conditions are not met, the structure of the original interface component is transformed in real time to generate the target interface component in the target mode. The reuse conditions include: the display width of the original interface component is not greater than the target screen width, and the aspect ratio of the original interface component is less than a preset threshold. Optionally, the preset threshold is 1.

[0068] This embodiment includes two main judgment steps, which are the same as the condition judgment step and the conversion step.

[0069] In the reuse condition determination stage, the system will check the width constraint and shape ratio constraint of the original component itself. The width constraint is whether the display width of the component is not greater than the target screen width, and the shape ratio constraint is whether the aspect ratio of the component is less than 1, that is, whether the original interface component is a vertically elongated or approximately square component.

[0070] If both conditions are met, it means that the original interface component can be physically accommodated by the target screen in the target mode, and its vertical shape does not conflict with the common horizontal screen widening scenario. Therefore, the original interface component can be directly and completely reused as the target interface component in the current target mode.

[0071] If the conditions are not met, it means that the component is either too wide or too flat. Directly using it may cause display overflow or layout misalignment, so it must be converted. Therefore, the process enters the conversion stage.

[0072] The transformation process involves real-time structural transformation. Specifically, the internal structure of the original component (such as the base plate and sub-controls) is analyzed, rotated, scaled, and rearranged using algorithms to instantly generate a new, adapted target component.

[0073] Optionally, during the conversion process, the target interface component can also be determined by searching for prefabricated components. A prefabricated component template matching the original component ID and marked as the target pattern is found in a preset component resource library and used as the target interface component.

[0074] This embodiment proposes a hierarchical decision-making mechanism to determine the appropriate form of each original interface component in the target mode. It prioritizes directly reusing the original interface components, only initiating high-cost real-time computational generation when failure or incompatibility occurs. This approach balances automated adaptation with processing efficiency and result controllability.

[0075] In an optional embodiment, the original interface component includes inherent controls and a component base for carrying the original interface content; the structure of the original interface component is transformed in real time to generate a target interface component in the target mode, including:

[0076] Keeping the original component base plate size unchanged, rotate the component base plate to the target mode orientation; based on the position of the transformed component base plate, adaptively adjust the position and size of the inherent controls to obtain the target interface component in the target mode.

[0077] The component baseboard can be considered the component's "canvas," defining the component's overall footprint and basic outline, serving as the foundation for all interface content. Built-in controls are specific functional or content elements placed on, around, or inside the component baseboard, such as text on buttons, icons, input boxes, and progress bars.

[0078] When transforming the structure of the original interface components in real time, keep the physical dimensions (length and width) of the component's base plate unchanged, but rotate it as a whole to match the orientation of the target screen. For example, when the source mode is portrait mode and the target mode is landscape mode, rotate the entire component's base plate 90 degrees clockwise so that its long side is aligned with the long side of the screen. This ensures that the orientation of the component's overall outer contour is consistent with the target environment.

[0079] When the component base plate is rotated, its coordinate axis direction changes, and the absolute positions of the original controls placed on it also need to be adjusted accordingly to ensure that the interface content inside the component is still reasonably laid out, readable and operable in the new component base plate after rotation.

[0080] In an optional example, the position and size of each intrinsic control are recalculated based on the new coordinate system of the rotated component base, ensuring that the relative position of the intrinsic space to the component base remains unchanged. The control coordinates are then geometrically transformed according to the base's rotation angle (e.g., 90 degrees). After rotation, the original base's height becomes its width, and the width of the controls may need to be adjusted to accommodate the new spatial constraints. For example, a text label vertically aligned on a portrait base may become wider after the base is rotated horizontally, thus requiring text wrapping or scaling.

[0081] In another optional example, the position and size of the native control can be adjusted based on available space on the screen. That is, the relative position of the native control to the component base may change, which can make the target interface component display better.

[0082] In an optional embodiment, the original interface content associated with the original interface component is used as a processing unit. The processing unit is adapted and transformed based on the target layout area to obtain the target interface content under the target mode, including:

[0083] Using the original interface content associated with the original interface component as the processing unit, a recursive process adapts the processing unit to the target layout area to generate the interface content in the target mode; the recursive process is triggered and controlled by the verification of the adaptation result. First, the original interface content logically associated with a certain original interface component is identified from the source interface description information (such as the directory hierarchy of the project file). This part of the content constitutes the initial processing unit of the current recursive level. The processing unit is a dynamic concept in the recursive process. In the initial stage, it may represent a large set of content; after decomposition, it represents a smaller subset or a single element at lower levels.

[0084] This recursive process not only handles the adaptation of the original interface components to the overall target layout area, but more importantly, it dynamically reconstructs the boundaries of processing units. When a processing unit is determined to fail validation, the recursive process structurally redefines its internal boundaries, decomposing it into multiple smaller, logically cohesive sub-units, until it is refined to a granularity that satisfies the validation conditions without further splitting (e.g., a single text block, icon, or button). Therefore, the final set of valid processing units is obtained by the recursive adaptation process dynamically analyzing the initial content under the drive of the validation mechanism. Finally, all those that pass validation are aggregated to generate the target interface content under the target mode.

[0085] Figure 3 This is a schematic diagram of a method for determining target interface content. In one optional embodiment, such as... Figure 3 As shown, using the original interface content associated with the original interface component as a processing unit, the processing unit is adapted to the target layout area through a recursive process to generate the interface content in the target mode, including the following steps:

[0086] S121. The original interface content to be converted, which is associated with the original interface component, is used as the processing unit.

[0087] Being associated with the original UI component means that the processing unit inherits the tree-like hierarchical structure information of the source component. This is not only a collection of visual elements, but also a logical tree with parent-child relationships and sibling order. The processing unit carries all the attributes of the content: text content, font style, image data, interaction state, etc. The current processing unit is the recursive processing object, providing a clear target for subsequent space allocation and transformation.

[0088] S122. Allocate a corresponding target sub-region for each processing unit from the target layout region.

[0089] Allocating target sub-regions maps the relative relationships of the source space to the absolute areas of the target space. The corresponding problem it solves is: how to maintain the relative spatial relationships of internal elements after changing the overall container size and scale. Allocation is usually based on the original scale; for example, if processing units K1 and K2 have an area ratio of 3:1 in the source mode, then the sub-regions allocated to them in the target layout area should also be as close to 3:1 as possible.

[0090] It's important to note that in this step, the processing unit is not a fixed concept. At the top level of the recursion, it could be a complete composite component (such as an entire product card); at the bottom level, it could be a simple text label or icon derived from a load component.

[0091] S123. Process the processing unit according to the type of the current processing unit to generate a candidate layout that satisfies the corresponding target sub-region constraints.

[0092] The types of processing units can include text blocks, images, mixed text and images, lists, tables, form controls, etc. Specifically, they can be based on element tags, style features, and content features (such as whether they contain...). The identification is performed using tags.

[0093] Specifically, the processing unit is processed according to its type to generate candidate layouts that satisfy the corresponding target sub-region constraints, including:

[0094] The corresponding size transformation rule is determined based on the type of the processing unit; the processing unit is processed based on the size transformation rule to generate a candidate layout that satisfies the corresponding target sub-region constraints.

[0095] Optionally, the size transformation rules include proportional scaling rules, which are applied to the processing unit of image type. When performing proportional scaling on an image, the aspect ratio can be maintained with white space, or the aspect ratio can be maintained with cropping.

[0096] Optionally, the size transformation rules include directional stretching rules, which are applied to the processing units of a preset type, and each processing unit of the preset type is provided with a defined stretching direction.

[0097] Optionally, the processing unit of the preset type includes at least one of a dividing line, a progress bar, a bar button, a background panel, a text box, and a list box.

[0098] Optionally, when processing text, the optimal line break point is calculated based on the width of the target sub-region, and the font is scaled according to the size of the target sub-region. If the region is too small, the font may be scaled down proportionally, but it must be ensured that it is not smaller than the minimum readable size.

[0099] In an optional embodiment, when the processing unit is a list box, the processing unit is processed based on size transformation rules, including:

[0100] Obtain the main axis direction and size of the target sub-region; determine the expected scrolling direction of the list box based on the matching degree between the main axis direction and the original scrolling direction of the list box; calculate the target size and row / column configuration of the list items in the list box based on the expected scrolling direction and the size of the target sub-region, so that each assigned list item can be fully displayed in the target sub-region under the row / column configuration; adapt the content of a single list item based on the target size to obtain the adapted list item content data; lay out the adapted list item content data according to the expected scrolling direction, target size, and row / column configuration to obtain the adapted target list box.

[0101] The first step is to obtain the main axis direction and size of the target sub-region. Determining the main axis direction of the target sub-region involves analyzing the effective display area. The size of the target sub-region refers to the net usable size, excluding unusable spaces such as system controls, safe zones, and reserved margins. The main axis direction is the primary spatial extension direction set for prioritizing the arrangement of content elements in the target sub-region (i.e., the display area allocated to the content unit in target mode). The main axis direction is not only a comparison of width and height but can also be weighted and determined by factors such as the historical success rate of direction switching and content type.

[0102] The second step is to determine the expected scrolling direction. First, a matching analysis is performed, considering factors such as content characteristics, user interaction habits, and space utilization. When the main axis direction does not match the list box's original scrolling direction, a cost-benefit assessment of switching directions is conducted. For example, will changing the scrolling direction disrupt the user's established muscle memory and operational expectations? Based on the assessment results, the decision direction is determined. Specifically, the system can integrate the above factors to calculate a direction switching matching score. If the score exceeds a threshold, the direction is switched; otherwise, it remains unchanged.

[0103] The third step is to calculate the target size and row / column configuration. Under a defined scrolling direction, the container space is decomposed into a regular grid. Given a fixed space, size and row / column configurations are interdependent. The inputs are the expected scrolling direction and the size of the target sub-region. The core constraint is that all allocated list items must be fully displayed and not overlap under this configuration. The optimization objective is to maximize space utilization or conform to a specific design grid while satisfying the constraints. Finally, the outputs are the target size (width, height) and row / column configuration (number of rows, number of columns) of the list items. It should be noted that the row / column configuration also implicitly includes the number of list items displayed, which is the product of the number of rows and columns.

[0104] The fourth step is to perform content adaptation processing based on the target size. The system applies the target size determined in the previous step to the rendering template or data model of the list items.

[0105] For text content, the system calculates the optimal line wrapping scheme based on the target width. Font size may be adjusted, but will be ensured to remain above the readability threshold. For excessively long text, a truncation and ellipsis strategy may be used, but key information (such as headings) will be prioritized for preservation.

[0106] For image content, the system selects an appropriate scaling mode based on the aspect ratio of the target size. For icon elements, it ensures clarity and avoids excessive stretching.

[0107] For complex content, including list items with mixed text and images, the system will readjust the internal layout according to the target size, such as changing the horizontal arrangement to the vertical arrangement, or scaling each component proportionally.

[0108] The output of this step is the adapted list item content data. It is not the final rendered pixels, but an intermediate data representation that includes content descriptions, style information, and layout instructions after size adaptation, which can be directly used by the subsequent layout engine.

[0109] The fifth step is to refactor the layout engine, instantiating all parameters into renderable UI components (target list boxes).

[0110] The final adapted target list box is a fully functional, logically laid out, and appropriately presented interface component that can be directly integrated into the target mode's interface configuration, providing users with a browsing experience that conforms to the characteristics of the target mode's environment.

[0111] In an optional example, please refer to Figure 4 The diagram shown illustrates a list box reconstruction. Figure 4 Image (a) shows the list box display in landscape mode (source mode). Figure 4 Image (b) shows the list box display in portrait mode (target mode). Figure 4 Comparing (a) and (b), we can see that the list item row and column configuration is 2×4 in landscape mode. Since the screen width is narrower in portrait mode, the row and column configuration is adjusted to 1×6. That is to say, the number of list items that can be fully displayed in portrait mode is 6, and 2 list items are still not displayed. In this case, a "Next Page" button control can be added to trigger the next display interface, and the remaining 2 list items can be displayed in the next display interface.

[0112] In an optional example, please refer to Figure 5 The diagram shows another example of list box reconstruction. Figure 5 Image (a) shows the list box display in landscape mode (source mode). Figure 5 Image (b) shows the list box display in portrait mode (target mode). Figure 5 A comparison of (a) and (b) shows that the scrolling direction of the list items is horizontal when the screen is in landscape mode. Since the screen width is narrower when the screen is in portrait mode, the scrolling direction of the list items is adjusted to vertical according to the user's reading habits (from left to right, from top to bottom).

[0113] S124. Verify the candidate layouts according to the preset adaptation criteria.

[0114] Specifically, if for each text box control in the candidate layout, the rendering area of ​​the text within the text box control is completely within the text box control area, and for all non-image controls, the areas of any two non-image controls do not overlap, then the validation is deemed to have passed; otherwise, the validation is deemed to have failed.

[0115] Verify whether the rendering area of ​​the text within the text box control is completely within the text box control area, i.e., boundary check; and verify whether the areas of any two non-image controls do not overlap, i.e., overlap check.

[0116] In addition, minimum size checks and text readability checks can also be included.

[0117] Minimum size check: Does the interactive element (button) meet the minimum touch size, for example, the minimum touch size is 44×44 pixels?

[0118] Text readability check: Is the font size below a threshold, such as 11pt?

[0119] S125. If the verification passes, the processing unit is reorganized according to the candidate layout to obtain the target interface content under the target mode.

[0120] If the verification passes, the candidate layout is marked as the final adopted solution. The layout description inside the algorithm is converted into the UI (user interface) data structure or rendering instructions required by the target platform. The adaptation is completed for the current processing unit and all its sub-units. At this time, S121-S127 can be executed cyclically for the next processing unit to be converted.

[0121] S126. If the verification fails, the processing unit is structurally decomposed to obtain multiple sub-units.

[0122] If the validation fails, it means that under the current processing granularity and given constraints, it is impossible to find a layout scheme that simultaneously meets all quality and functional requirements. This is usually caused by the following conflicts.

[0123] Spatial morphology conflict: The internal structural form of the processing unit is incompatible with the external container form of the target sub-region it is assigned to. For example, a processing unit with a complex vertical information flow (such as a long article with mixed text and images) is assigned to a wide but low horizontal bar area. This fundamental contradiction cannot be resolved in a single conversion while maintaining content integrity and readability.

[0124] The conflict between content integrity constraints and space constraints: The minimum space required to maintain content integrity (such as the minimum readable font size of text or the minimum recognizable size of an image) is greater than the available space allocated to the target sub-region. For example, a card containing three core information items (theme, character image, and character attributes) cannot be crammed into a highly compressed area without disrupting the information hierarchy or excessively shrinking it.

[0125] Conflict between interactive usability constraints and spatial constraints: The space required to ensure the usability of interactive elements (such as the minimum clickable hotspot) encroaches on the space of other content, causing layout rules to be broken. For example, keeping two minimum-sized buttons in a narrow area causes them to overlap with the text label above them, violating the basic layout validation rule of non-overlapping.

[0126] To address the aforementioned conflicts, simple scaling might render text unreadable or images unrecognizable, while content deletion requires further assessment of content importance, increasing algorithmic complexity and compromising information integrity. Therefore, structured decomposition can be used. Structured decomposition doesn't change the content itself, but rather its granularity. It's not random cutting, but rather decomposition along the original logical boundaries of the components, thus preserving the semantic integrity of each sub-unit.

[0127] For example, you can break down a card into an image area and a text description area, or break down a form into individual "label-input box" pairs.

[0128] S127. Treat each sub-unit as a new processing unit, and treat the current target sub-region as a new target layout region corresponding to the sub-unit that failed the verification.

[0129] This step will adapt a problem involving a large, complex unit to a set of problems involving multiple smaller, simpler sub-units. The target sub-region that fails validation becomes the next level of recursive layout region, and the sub-units will reallocate space within this layout region.

[0130] It should be noted that recursion should have a termination condition, which can be that the current processing unit reaches the smallest indivisible unit (a single text or icon) or the maximum recursion depth is reached.

[0131] After executing S127, return to execute S122.

[0132] In summary, S121-S127 is a recursive processing procedure, which will be described in its entirety through the following example, which describes the scenario of adapting landscape interface content to portrait area.

[0133] First level of recursion:

[0134] The processing unit is the entire interface content, assuming the target layout area is 100% of the portrait screen area. First, try overall scaling and rearrangement; please refer to [reference needed]. Figure 6 The diagram shown illustrates the interface content transformation during the first level of recursion. Figure 6 (a) shows the interface content before conversion (landscape mode) 60. Figure 6 (b) represents the target layout area M (portrait screen) to which the layout is to be converted. Figure 6 (c) is the converted display effect image. The converted interface content is validated, such as... Figure 6 As shown in (b), the portion enclosed by the box has issues with overlapping elements and text exceeding the text box, thus the validation failed.

[0135] Second level of recursion (within the portrait screen area):

[0136] Since the entire interface content failed validation after rearranging 60, the interface content 60 needs to be decomposed. Please refer to the following for details. Figure 7 The diagram shown illustrates the interface content transformation during a second-level recursion. Figure 7 (a) is a schematic diagram of splitting the interface content into two sub-units, specifically splitting it along the structure into image area 61 and information area 62.

[0137] Please refer to the section on assigning sub-regions to two sub-units. Figure 7 (b) shows a schematic diagram of dividing the target layout region M into two sub-regions. The resulting image sub-region M1 and information sub-region M2 each account for 50%, and the allocation is based on... Figure 7 The original area ratio of image area 61 and information area 62 in (a).

[0138] Then, image area 61 and information area 62 are adaptively adjusted and placed in their corresponding image sub-regions M1 and M2, respectively, to obtain... Figure 7 The conversion result is shown in (c). The specific conversion process is as follows: Please refer to the reference. Figure 7 For (a) and (b), first process the image area 61, scale the image area 61 proportionally and place it in the image sub-area M1, and check whether the layout of the content elements in the image sub-area M1 meets the requirements according to the preset adaptation judgment conditions. The check passes.

[0139] Then, the information area 62 is processed. The text, progress bar and other controls in it are scaled and stretched according to the corresponding rules and placed in the information sub-area M2. The layout of the content elements in the information sub-area M2 is checked according to the preset adaptation judgment conditions. It is found that there is an element overlap problem and the check fails.

[0140] Third level of recursion (within 50% of the information sub-region):

[0141] Because the layout validation of the content elements in information sub-region M2 failed, information area 62 needs to be split, with information area 62 becoming the new processing unit and information sub-region M2 becoming the new target layout area. Please refer to [reference needed]. Figure 8 The diagram shown illustrates the interface content transformation during a third-level recursion, as follows: Figure 8 As shown in (a), the information area 62 is decomposed into two sub-units: the first attribute bar 621 and the second attribute bar 622. For example... Figure 8 In (b), the information sub-region M2 is split into the first sub-region M2.1 and the second sub-region M2.2.

[0142] Then, the first attribute bar 621 and the second attribute bar 622 are adaptively adjusted and placed in the corresponding first sub-region M2.1 and second sub-region M2.2, respectively, to obtain... Figure 8 The conversion result is shown in (c). The specific conversion process is as follows: Please refer to the reference. Figure 8 For (a) and (b), first process the first attribute bar 621. Scale and stretch the text, progress bar and other controls in the first attribute bar 621 according to the corresponding rules and place them in the first sub-area M2.1. Then, check whether the layout of the content elements in the first sub-area M2.1 meets the requirements according to the preset adaptation judgment conditions. If the check passes.

[0143] Then, process the second attribute bar 622, scale and stretch the text, progress bar and other controls in it according to the corresponding rules and place them in the second sub-area M2.2. Then, check whether the layout of the content elements in the second sub-area M2.2 meets the requirements according to the preset adaptation judgment conditions. The verification is successful.

[0144] At this point, all recursive branches of the interface content 60 have been successfully completed, and the layout is finished.

[0145] This embodiment approximates the optimal solution step by step through recursive decomposition. During structured decomposition, it preserves the original structure as much as possible, maintaining the logical intent of the design. Furthermore, local validation failures do not lead to global processing failures; the system can automatically adjust its strategy. A group of content elements with inherent structure is intelligently rearranged into a new area that may differ in size and shape, while maintaining readability, usability, and visual logic.

[0146] In an optional embodiment, allocating a corresponding target sub-region from the target layout region for each processing unit (S122) includes:

[0147] Determine the area occupied by each processing unit when displayed in source mode; divide the target layout area according to the original area ratio to determine the target sub-area allocated to each processing unit.

[0148] This embodiment employs a space allocation strategy based on historical weighting. The proportion of space occupied by a processing unit in the source pattern reflects its relative importance or visual weight in the design. Extending this proportional relationship to the target pattern is the allocation method that best preserves the original design intent. For example, giving an element a large area in the source pattern usually means that it is important or contains rich information. Proportional allocation ensures that this importance is maintained in the new environment.

[0149] The first step is to determine the original area ratio. For each processing unit, calculate the percentage of area it occupies in the full display area of ​​the source mode (usually the entire application window).

[0150] Specifically, area calculations take into account the actual visible and interactive areas, excluding transparent margins. In nested structures, the ratio is calculated relative to the parent container at the current level. Ratio values ​​are typically floating-point numbers, such as 0.25 (25%), 0.15 (15%), etc.

[0151] The second step is to divide the target region proportionally. The set of proportional values ​​obtained in the previous step is used as weights and applied to the target layout region of the current recursive level. Let the total area of ​​the target layout region be S, and there be n processing units with original area proportions P1, P2, ..., P... n If ∑Pᵢ=1, then the area of ​​the target sub-region allocated to the i-th processing unit should be: S×Pᵢ.

[0152] By allocating target sub-regions for each processing unit through this embodiment, the design intent and visual effects of the interface in the source mode can be preserved to the greatest extent possible, ensuring consistency in user perception.

[0153] Users are already familiar with the relative relationship displayed in the source mode, such as "element A is about twice the size of element B". After proportional distribution, this relative relationship is maintained in the new interface, reducing the cognitive cost for users to readjust.

[0154] In an optional embodiment, the target layout area is divided according to the original area ratio to determine the target sub-regions allocated to each processing unit, including:

[0155] For the current target layout area, the original area ratio of each processing unit is normalized to obtain the relative area ratio of each processing unit; based on the relative area ratio, the target layout area is divided to obtain the target sub-regions allocated to each processing unit.

[0156] The original area ratio of each processing unit is a ratio relative to the entire application window (display screen). In actual interface engineering, due to factors such as calculation precision, component borders, etc., which may be included or excluded, and the current processing unit may not represent all the content to be displayed in the entire application window, the sum of the original area ratios of each processing unit is not always equal to 1. Therefore, when dividing a specific target sub-region based on the original area ratio, the original area ratio needs to be normalized. The normalized relative area ratio is the ratio relative to the target layout area to be allocated. This ensures that the sum of the areas allocated to all processing units is equal to or close to the total area of ​​the target layout area.

[0157] In one example, on a product details page, the main image area occupies 0.4, the basic information area occupies 0.25, the attribute area occupies 0.2, and the operation area occupies 0.1. Initially, the sum of the original proportions of the four areas is 0.95. After normalization, the main image area occupies 0.421, the basic information area occupies 0.263, the attribute area occupies 0.211, and the operation area occupies 0.105. The sum of the normalized relative area proportions is close to or equal to 1. Therefore, the target layout area can be precisely divided according to the relative area proportions.

[0158] Optionally, the difference between the area ratio of the target sub-regions and the corresponding relative area ratio shall not exceed a preset deviation value.

[0159] Under certain constraints, strictly adhering to the theoretical proportions is physically infeasible. Moderate, controlled deviations are necessary for the system's normal operation. Therefore, this embodiment allows for controllable deviations between the allocation results and the theoretical proportions. Allowing moderate deviations at each level of recursion means more allocation schemes can pass the initial test, reducing recursion depth and decomposition frequency, and improving overall efficiency. Furthermore, allowing area proportion deviations provides the system with more degrees of freedom to optimize the shape, enabling the search for partitioning schemes with area deviations within acceptable limits but superior shapes.

[0160] Optionally, the preset deviation value is ±5%.

[0161] Optionally, when allowable deviations, it is also possible to decide how to allocate these deviations, with the main strategies including:

[0162] Average distribution: All processing units bear a similar proportion of the deviation;

[0163] Importance weighting: minor elements bear more of the bias, while major elements maintain a precise proportion as much as possible;

[0164] Directional allocation: Only positive deviations are allowed (the area can be greater than the theoretical value) or only negative deviations are allowed.

[0165] The specific deviation allocation strategy can be selected according to actual needs, and this embodiment does not impose any restrictions on it.

[0166] In an optional embodiment, the target layout area is divided based on a relative area ratio to obtain target sub-regions allocated to each processing unit, including:

[0167] The target layout area is divided based on the relative area ratio, resulting in multiple region division schemes that satisfy the relative area ratio. Each region division scheme includes target sub-regions allocated to each processing unit. For each region division scheme, the sum of the shape difference of each target sub-region is calculated. The shape difference is obtained by calculating the difference between the shape parameters of the target sub-region and the shape parameters of the corresponding source mode. The region division scheme with the smallest sum of shape difference is selected as the target division scheme. The target layout area is divided based on the target division scheme to obtain the target sub-regions allocated to each processing unit.

[0168] Based on the normalized relative area ratios, various different ways of dividing the region can be generated. For example, the area ratio of the three regions is 2:3:5, which can be implemented by the following four schemes:

[0169] Option A: Divide the structure into three equal parts vertically, then adjust the width;

[0170] Option B: Divide the horizontal plane into thirds, then adjust the height;

[0171] Option C: T-shaped layout;

[0172] Option D: L-shaped layout.

[0173] However, arbitrarily divided, unoptimized, or unfiltered sub-region shapes can directly disrupt the display of content, leading to issues such as text truncation, image distortion, or control malfunction. This not only directly impacts the feasibility and efficiency of operation and reading but also fails to guarantee users' visual perception habits. Therefore, it is crucial to ensure shape similarity when displayed in the source and target modes of the same processing unit. To quantify shape similarity in the source and target modes of the same processing unit, this embodiment defines a quantifiable evaluation metric: shape difference, which is the degree of difference between the shape of the target sub-region and its original shape.

[0174] Specifically, the selection of shape parameters includes:

[0175] Aspect ratio: the most crucial shape feature that directly affects visual perception;

[0176] Aspect ratio of the circumscribed rectangle: an approximate representation when dealing with irregular shapes;

[0177] Radius: For circular or rounded elements, the radius is a key shape parameter.

[0178] For each region division scheme, the sum of the differences between the shape of each target sub-region and its original shape is calculated. When selecting the optimal scheme, the region division scheme with the smallest sum of shape differences is chosen. During mode conversion, the feasibility and efficiency of operation and reading are minimized as much as possible, ensuring the user's visual cognitive habits and improving the user experience.

[0179] In an optional embodiment, the processing unit is structurally decomposed to obtain multiple sub-units (S126), including:

[0180] Obtain the tree-like hierarchical structure of all processing units in source mode; determine one or more split nodes of the current processing unit based on the tree-like hierarchical structure; divide the processing unit into multiple sub-units with the split nodes as boundaries, where each sub-unit corresponds to a subtree or leaf node.

[0181] Tree-like hierarchical structures are a core concept in interface development. In a graphical user interface (GUI) system, the interface typically starts with a root node and forms a tree through nested parent-child relationships. Each node represents a UI element (such as a container, control, or text label), and its attributes record information such as its type, style, and constraints.

[0182] Before decomposition, the system needs to analyze the internal structure of the processing unit to be decomposed by acquiring and analyzing its tree-like hierarchical structure in the source schema. Specifically, the system extracts the subtree structure corresponding to the current processing unit from the interface configuration file (such as XML or JSON description file) or runtime view tree of the source schema. For example, if the current processing unit is a "product card", its tree structure may contain a root container node, which contains nested image nodes, text container nodes (embedded with title and price tag nodes), button nodes, etc.

[0183] After obtaining the structure, the system needs to decide where to decompose it. Specifically, it can determine one or more splitting nodes based on principles such as logical independence, structural salience, and design logic.

[0184] After determining the splitting nodes, the system divides the data into sub-units using the splitting nodes as boundaries. The specific process of this division operation is as follows:

[0185] The system cuts the complete subtree corresponding to the current processing unit at each split node. After the cut, the original tree is divided into multiple smaller subtrees. Each subtree is rooted at a split node (if the split node is not the outermost root node, its parent chain is broken at the cut point), or is a basic leaf node (i.e., a basic element that does not contain child nodes, such as a single icon or text block). Each such subtree or leaf node is defined as a new child unit. These child units inherit all the attributes and content of the original node (or subtree), but are structurally independent of each other.

[0186] In terms of the resulting division, each sub-unit corresponds to a meaningful component of the original design. For example, the "image area sub-unit" and "text information sub-unit" extracted from a product card each carry complete and independent information. Furthermore, the original hierarchy and constraints are maintained within each sub-unit. For instance, within the text information sub-unit, the relative positions of the title and price, as well as the font size relationships, are preserved.

[0187] In an optional embodiment, determining one or more split nodes of the current processing unit based on the tree hierarchy includes: traversing the tree hierarchy from top to bottom, and identifying nodes with multiple direct child nodes encountered during the traversal as split nodes of the current level.

[0188] A direct child node refers to a node that is directly subordinate to a node in a tree structure. This does not include grandchild nodes or deeper descendants.

[0189] During execution, the process begins from the root node of the tree structure corresponding to the current processing unit to be decomposed. The current node is accessed, and the number of its direct child nodes is immediately checked. If the number of direct child nodes is greater than or equal to a preset threshold (e.g., 2), the system immediately marks this node as a split node at the current level. Regardless of whether the current node is marked as a split node, the system will repeat the node check and determination for each of its direct child nodes in turn, that is, continue traversing the entire tree from top to bottom, depth-first, or breadth-first. When the traversal is complete, the set of all marked nodes constitutes one or more split nodes for this decomposition.

[0190] Using the parent node of a multi-child node as the splitting point essentially decomposes the problem of processing a complex parent unit (containing multiple heterogeneous sub-contents) into the problem of processing multiple relatively simple sub-units. Each sub-unit may have a simpler structure (shallower subtrees or leaf nodes), making it easier to adapt independently later.

[0191] In an optional embodiment, before structurally decomposing the unit to obtain multiple sub-units (S126), the method further includes:

[0192] The processing units are rotated and adjusted according to their original arrangement direction and the main axis direction of the target sub-region.

[0193] It should be noted that the processing unit here can be the entire interface content of the page, or it can be a content element that has been separated from the interface content.

[0194] The original arrangement direction of a processing unit is the direction of extension followed by the main sub-contents or overall content layout within that processing unit in the source pattern, and can usually be inferred from its tree hierarchy. If its main container is horizontally laid out or its child nodes are mainly arranged horizontally, the original arrangement direction is horizontal. If its main container is vertically laid out or its child nodes are mainly arranged vertically, the original arrangement direction is vertical. For complex units, this can be determined by analyzing the centroid distribution or main axis of its main elements.

[0195] The principal axis direction of the target sub-region is the dominant geometric direction of the target layout region itself. As mentioned earlier, it is usually determined by comparing the width and height of the region. For example, if the width is greater than the height, it is the horizontal principal axis, and if the height is greater than the width, it is the vertical principal axis.

[0196] The system compares the original arrangement direction with the main axis direction. When the original arrangement direction is inconsistent with the main axis direction of the target sub-region, a significant orientation mismatch is considered to exist. If the original layout is directly inserted into the target region, it will cause a fundamental conflict between the layout flow and the available space shape. For example, a horizontally extending toolbar would be placed in a vertically elongated area. If an orientation mismatch is identified, a rigid rotation transformation is performed on the entire processing unit to achieve orientation alignment. The rotation center is usually the geometric center point of the processing unit or the center of the enclosing rectangle.

[0197] In an optional embodiment, the source mode is landscape mode and the target mode is portrait mode;

[0198] Based on the original arrangement direction of the processing units and the main axis direction of the target sub-region, the processing units are rotated and adjusted, including:

[0199] If the original arrangement direction of the processing unit is horizontal and the main axis direction is vertical, then the processing unit is rotated 90 degrees clockwise; if the original arrangement direction of the processing unit is vertical and the main axis direction is horizontal, then the processing unit is rotated 90 degrees counterclockwise.

[0200] The source mode is landscape mode, where the device screen's width is greater than its height, and the screen's main axis is horizontal. Application interface layouts typically utilize this width advantage, employing a horizontally extended layout structure. The target mode is portrait mode, where the device screen's height is greater than its width, and the screen's main axis is vertical. Therefore, the interface needs to adapt to this vertically elongated space.

[0201] When the system detects that the original orientation of a processing unit is horizontal (i.e., the unit's content is primarily arranged along the horizontal axis in landscape mode), and the main axis of the target sub-region assigned to it is vertical (consistent with portrait mode characteristics), it triggers a 90-degree clockwise rotation of the processing unit. This rotation twists the unit's content from horizontal to vertical. For example, a navigation bar arranged horizontally at the top of a landscape screen will become a vertically arranged navigation bar on the left side of a portrait screen after a 90-degree clockwise rotation, initially aligning its orientation with the dominant vertical direction of the portrait screen.

[0202] When the system detects that the original orientation of a processing unit is vertical (i.e., the unit is mainly arranged along the vertical axis in landscape mode), and the main axis of the target sub-region assigned to it is horizontal, it triggers a 90-degree counter-clockwise rotation of the processing unit. This rotation twists the unit's content from vertical to horizontal. For example, a tool panel that is vertically arranged along the side in landscape mode, if assigned to a sub-region that is unexpectedly a horizontal strip in portrait mode, can be adapted by counter-clockwise rotation.

[0203] This invention automates the landscape / portrait switching of interface engineering files, significantly improving the efficiency of landscape / portrait conversion and reducing manpower consumption. Personnel only need to supervise and accept the process after program execution to complete the landscape / portrait conversion. It can be widely applied to any game product that requires landscape / portrait switching functionality.

[0204] It should be noted that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0205] Reference Figure 9 The diagram illustrates an interface switching system provided by an embodiment of the present invention, which may specifically include the following modules:

[0206] The target interface component determination module 901 is used to determine the target interface component in the target mode based on the original interface component in the source mode, and to determine the target layout area based on the target interface component.

[0207] The target interface content determination module 902 is used to use the original interface content associated with the original interface component as a processing unit, and adapt and transform the processing unit based on the target layout area to obtain the target interface content under the target mode.

[0208] The interface configuration generation module 903 is used to configure the target interface content in the target layout area to form the interface configuration in the target mode.

[0209] This invention provides an interface switching system. By applying this interface switching system, the various steps in the aforementioned interface switching method embodiments can be implemented, and the corresponding technical effects of the interface switching methods can be achieved.

[0210] It should be noted that the module division in the various interface switching systems provided in the above embodiments is illustrative and only represents one logical functional division. In actual implementation, other division methods may also be used. Furthermore, the functional modules in the various embodiments of this invention can be integrated into a single processor, exist as separate physical entities, or be integrated into a single module. The integrated modules described above can be implemented in hardware or as software functional modules.

[0211] If the integrated module is implemented as a software functional module and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, all or part of the technical solution of the embodiments of the present invention can be embodied in the form of a computer program product, which is stored in a computer storage medium and includes several instructions to cause an electronic device or processor to execute all or part of the steps of the methods in the various embodiments of the present invention. The aforementioned computer storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0212] Furthermore, the interface switching system and interface switching method embodiments provided in the above embodiments belong to the same concept, and their specific implementation process can be found in the method embodiments, which will not be repeated here.

[0213] Reference Figure 10 The diagram illustrates an electronic device according to an embodiment of the present invention. Figure 10As shown, the electronic device in this embodiment of the invention includes: a processor, a memory, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements the steps in the above-described interface switching method embodiment. Alternatively, when the processor executes the computer program, it implements the functions of each module in the above-described interface switching system embodiment.

[0214] For example, the computer program may be divided into one or more modules, which are stored in the memory and executed by the processor to complete this application. The one or more modules may be a series of computer program instruction segments capable of performing a specific function, which can be used to describe the execution process of the computer program in the electronic device.

[0215] The electronic device may be a desktop computer, a cloud server, or other computing device. The electronic device may include, but is not limited to, a processor and memory. Those skilled in the art will understand that... Figure 10 This is merely one example of an electronic device and does not constitute a limitation on the electronic device. It may include more or fewer components than illustrated, or combine certain components, or different components. For example, the electronic device may also include input / output devices, network access devices, buses, etc.

[0216] The processor can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor can be a microprocessor or any conventional processor.

[0217] The memory can be an internal storage unit of the electronic device, such as a hard drive or RAM. Alternatively, it can be an external storage device, such as a plug-in hard drive, Smart Media Card (SMC), Secure Digital (SD) card, Flash Card, etc. Furthermore, the memory can include both internal and external storage units. The memory is used to store the computer program and other programs and data required by the electronic device. The memory can also be used to temporarily store data that has been output or will be output.

[0218] This invention also discloses an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements the interface switching method as described in the foregoing embodiments.

[0219] This invention also discloses a computer-readable storage medium storing a computer program that, when executed by a processor, implements the interface switching method as described in the foregoing embodiments.

[0220] This invention also discloses a computer program product that, when run on a computer, causes the computer to execute the interface switching methods described in the foregoing embodiments.

[0221] The embodiments described above are only used to illustrate the technical solutions of this application, and are not intended to limit it. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application, and should all be included within the protection scope of this application.

Claims

1. A method for switching interfaces, characterized in that, The method includes: Based on the original interface components in the source mode, determine the target interface components in the target mode, and determine the target layout area based on the target interface components. Using the original interface content associated with the original interface component as a processing unit, the processing unit is adapted and transformed based on the target layout area to obtain the target interface content under the target mode. The target interface content is configured in the target layout area to form the interface configuration under the target mode.

2. The method according to claim 1, characterized in that, The step of determining the target interface component in the target mode based on the original interface components in the source mode includes: For each original interface component in the source mode, a target interface component is selected from the preset component library that matches the identifier of the original interface component and has the target mode identifier.

3. The method according to claim 1, characterized in that, The step of determining the target interface component in the target mode based on the original interface components in the source mode further includes: Based on the display size of the original interface components in the source mode and the target screen width in the target mode, determine whether the preset reuse conditions are met. If the aforementioned reuse conditions are met, then the original interface component will be used as the target interface component in the target mode. If the conditions for continued use are not met, the structure of the original interface component is transformed in real time to generate the target interface component in the target mode. The conditions for continued use include: the display width of the original interface component is not greater than the target screen width, and the aspect ratio of the original interface component is less than a preset threshold.

4. The method according to claim 3, characterized in that, The original interface component includes inherent controls and a component base plate for carrying the content of the original interface; The real-time transformation of the structure of the original interface components to generate the target interface components in the target mode includes: Keeping the component base plate size of the original interface component unchanged, rotate the component base plate to the target mode orientation; The position and size of the inherent control are adaptively adjusted based on the position of the transformed component base plate to obtain the target interface component in the target mode.

5. The method according to claim 1, characterized in that, The step of using the original interface content associated with the original interface component as a processing unit, and adapting and transforming the processing unit based on the target layout area to obtain the target interface content under the target mode includes: Using the original interface content associated with the original interface component as a processing unit, the processing unit is adapted to the target layout area through a recursive process to generate the interface content in the target mode; wherein, the recursive process is triggered and controlled by the verification of the adaptation result.

6. The method according to claim 5, characterized in that, The step of using the original interface content associated with the original interface component as a processing unit, and adapting the processing unit to the target layout area through a recursive process to generate the interface content in the target mode, includes: The original interface content to be converted, which is associated with the original interface component, is used as the processing unit. Each processing unit is assigned a corresponding target sub-region from the target layout region; The processing unit is processed according to the current type of the processing unit to generate a candidate layout that satisfies the corresponding target sub-region constraints; The candidate layouts are verified based on preset adaptation criteria. If the verification passes, the processing unit is reorganized according to the candidate layout to obtain the target interface content under the target mode; If the verification fails, the processing unit is structurally decomposed to obtain multiple sub-units; Each of the sub-units is treated as a new processing unit, and the current target sub-region is treated as a new target layout region corresponding to the sub-units that failed the verification. The process then returns to the step of assigning a corresponding target sub-region to each processing unit from the target layout region.

7. The method according to claim 6, characterized in that, The step of allocating a corresponding target sub-region from the target layout region to each processing unit includes: Determine the original area proportion occupied by each of the processing units when displayed in source mode; The target layout area is divided according to the original area ratio to determine the target sub-regions allocated to each of the processing units.

8. The method according to claim 7, characterized in that, The step of dividing the target layout area according to the original area ratio to determine the target sub-regions allocated to each of the processing units includes: For the target layout area, the original area ratio of each processing unit is normalized to obtain the relative area ratio of each processing unit. The target layout area is divided based on the relative area ratio to obtain target sub-regions allocated to each of the processing units.

9. The method according to claim 8, characterized in that, The difference between the area ratio of the target sub-regions and the corresponding relative area ratio does not exceed a preset deviation value.

10. The method according to claim 8, characterized in that, The process of dividing the target layout area based on the relative area ratio to obtain target sub-regions allocated to each processing unit includes: The target layout area is divided based on the relative area ratio to obtain multiple area division schemes that satisfy the relative area ratio. Each area division scheme includes a target sub-area allocated to each of the processing units. For each of the aforementioned region partitioning schemes, the sum of the shape difference degrees of each target sub-region is calculated. The shape difference degree is obtained by calculating the difference between the shape parameters of the target sub-region and the shape parameters of the corresponding source mode. The region partitioning scheme with the smallest sum of shape differences is selected as the target partitioning scheme; The target layout area is divided based on the target partitioning scheme to obtain target sub-regions allocated to each of the processing units.

11. The method according to claim 10, characterized in that, The shape parameter is at least one of the following: the aspect ratio of the region, the radius, and the aspect ratio of the circumscribed rectangle.

12. The method according to claim 6, characterized in that, The step of processing the processing unit according to its current type to generate a candidate layout that satisfies the corresponding target sub-region constraints includes: The corresponding size transformation rule is determined based on the type of the processing unit; The processing unit is processed based on the size transformation rules to generate candidate layouts that satisfy the corresponding target sub-region constraints.

13. The method according to claim 12, characterized in that, The size transformation rules include a proportional scaling rule, which is applied to the processing unit of type image.

14. The method according to claim 12, characterized in that, The size transformation rules include directional stretching rules, which are applied to the processing units of a preset type, and each processing unit of the preset type is provided with a defined stretching direction; The processing unit of the preset type includes at least one of the following: a dividing line, a progress bar, a bar button, a background panel, a text box, and a list box.

15. The method according to claim 12, characterized in that, When the processing unit is a list box, the processing of the processing unit based on the size transformation rule includes: Obtain the principal axis direction and dimensions of the target sub-region; The expected scrolling direction of the list box is determined based on the degree of matching between the main axis direction and the original scrolling direction of the list box. Based on the expected scrolling direction and the size of the target sub-region, calculate the target size and row and column configuration of the list items in the list box, so that each assigned list item can be fully displayed in the target sub-region under the row and column configuration; Based on the target size, the content of a single list item is adaptively processed to obtain adapted list item content data; The content data of the adapted list items is laid out according to the expected scrolling direction, the target size, and the row and column configuration to obtain the adapted target list box.

16. The method according to claim 6, characterized in that, The candidate layouts are validated based on preset adaptation criteria, including: If for each text box control in the candidate layout, the rendering area of ​​the text within the text box control is completely within the area of ​​the text box control, and for all non-image controls, the areas of any two non-image controls do not overlap, then the verification is deemed successful. Otherwise, the verification is deemed to have failed.

17. The method according to claim 6, characterized in that, The process of structurally decomposing the processing unit to obtain multiple sub-units includes: Obtain the tree-like hierarchical structure of all the processing units in source mode; One or more split nodes of the current processing unit are determined based on the tree-like hierarchical structure; The processing unit is divided into multiple sub-units using the splitting node as the boundary, where each sub-unit corresponds to a subtree or leaf node.

18. The method according to claim 17, characterized in that, The step of determining one or more split nodes of the current processing unit based on the tree hierarchy includes: Traverse the tree-like hierarchical structure from top to bottom, and identify the nodes with multiple direct child nodes encountered during the traversal as the split nodes of the current level.

19. The method according to claim 6, characterized in that, Before the structural decomposition of the processing unit to obtain multiple sub-units, the method further includes: The processing units are rotated and adjusted according to their original arrangement direction and the main axis direction of the target sub-region.

20. The method according to claim 19, characterized in that, The source mode is landscape mode, and the target mode is portrait mode; The step of rotating and adjusting the processing units according to their original arrangement direction and the main axis direction of the target sub-region includes: If the original arrangement direction of the processing unit is horizontal and the main axis direction is vertical, then the processing unit is rotated 90 degrees clockwise. If the original arrangement direction of the processing unit is vertical and the main axis direction is horizontal, then the processing unit is rotated 90 degrees counterclockwise.

21. An interface switching system, characterized in that, include: The target interface component determination module is used to determine the target interface component in the target mode based on the original interface components in the source mode, and to determine the target layout area based on the target interface component. The target interface content determination module is used to use the original interface content associated with the original interface component as a processing unit, and adapt and transform the processing unit based on the target layout area to obtain the target interface content under the target mode. The interface configuration generation module is used to configure the target interface content in the target layout area to form the interface configuration under the target mode.

22. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the interface switching method as described in any one of claims 1-20.

23. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the interface switching method as described in any one of claims 1-20.

Images