Mobile application software UI horizontal screen adaptation method

Abstract

The invention discloses a mobile application software UI horizontal screen adaptation method, and relates to the technical field of graphical user interface design and optimization of mobile application software, and the mobile application software UI horizontal screen adaptation method mainly comprises the following steps: constructing a component relation graph according to the longitudinal UI layout and view hierarchy of a target application, and performing consistency classification on the UI components based on the functional correlation and the visual correlation to obtain component classes, and obtaining a landscape layout optimal solution by utilizing a multi-target genetic algorithm, thereby generating a landscape UI interface and a corresponding layout XML file. By implementing the UI landscape screen adaptation method for the mobile application software provided by the invention, the aesthetics and availability of conversion from a longitudinal interface to a transverse interface can be improved while the integrity of the interface content is kept, the labor cost is reduced, and the interaction experience of a user in a landscape screen scene is improved.

Description

Technical Field

[0001] This invention relates to the field of graphical user interface design and optimization technology for mobile application software, and more specifically, to a method for adapting the UI of mobile application software to landscape mode. Background Technology

[0002] With the widespread adoption of mobile devices, users have higher expectations for the interactive experience of application software. Smartphones, tablets, and other devices typically support both portrait and landscape modes. In actual use, different scenarios (such as reading, video playback, and office work) have significantly different requirements for interface layout and content presentation, which poses a challenge to the UI's adaptability. Users expect a complete, logical, and easy-to-use interface experience even in landscape mode, not just a rough adjustment effect resulting from the system's default rotation.

[0003] Currently, landscape adaptation for mobile applications primarily relies on two methods: First, developers manually write landscape layout code, adjusting component positions, sizes, and parent container structures to adapt to landscape mode; second, the system's default rotation mechanism allows the operating system to simply scale or rearrange the layout based on portrait orientation. However, manual adaptation is not only costly and time-consuming, but also prone to overlooking the logical relationships between key components in complex interfaces, leading to incomplete functionality or unreasonable layout. While system default rotation is convenient, it typically suffers from the following problems: unbalanced interface element proportions, truncated or overlapping important content, and unreasonable space allocation between components, severely impacting user experience. These problems are particularly pronounced in interfaces containing multi-layered nested components or highly interactive controls.

[0004] In recent years, researchers have attempted to solve the landscape adaptation problem through rule-based constraint methods or deep learning-based automated adaptation strategies. Rule-based constraint methods achieve simple layout adjustments by defining component alignment, spacing, and size constraints, but lack an understanding of the overall interface structure and struggle to guarantee logical consistency across screen directions. Deep learning methods can automatically generate landscape layouts to some extent, but they typically rely on large amounts of training data, have insufficient generalization ability for new applications or unseen component combinations, and are inadequate in simultaneously considering functional integrity, aesthetic rationality, and layout feasibility.

[0005] Furthermore, existing methods generally neglect the structural dependencies between components and the division of functional modules. For example, navigation bars, toolbars, and content areas have a clear hierarchy and logical order in portrait layouts, but simply scaling or rearranging them in landscape layouts can easily disrupt this logical structure, leading to disjointed user workflows. On the other hand, multi-objective optimization issues such as visual consistency, component proportions, and screen space utilization efficiency are usually considered separately in existing methods, lacking a systematic and comprehensive optimization strategy.

[0006] Therefore, how to automatically and efficiently adapt a vertical UI to a landscape interface while maintaining functional integrity and visual consistency, while reducing developer workload and manual intervention costs, has become a pressing technical problem in the field of mobile application interface adaptation. This also provides a clear research background and application value for proposing a vertical UI automatic adaptation technology based on interface structure modeling and multi-objective optimization methods. Summary of the Invention

[0007] The purpose of this invention is to provide a method for adapting mobile application software UI to landscape mode, which can improve the aesthetics and usability of the vertical to horizontal interface transition while maintaining the integrity of the interface content, reduce labor costs, and enhance the user's interactive experience in landscape mode.

[0008] This invention provides a method for adapting the UI of mobile application software to landscape mode, comprising the following steps: S1: Construct a component relationship diagram based on the target application's vertical UI layout and view hierarchy; S2: Based on the component relationship diagram, UI components are consistently classified according to functional relevance and visual relevance to obtain component classes; S3: Based on the component class, use a multi-objective genetic algorithm to obtain the optimal solution for the landscape layout; S4: Based on the optimal solution for the landscape layout, generate the landscape UI interface and the corresponding layout XML file.

[0009] The present invention also provides a computer program product, including a computer program that, when executed by a processor, implements the steps of the above-described mobile application software UI landscape adaptation method.

[0010] Implementing the mobile application software UI landscape adaptation method provided by this invention has the following beneficial effects: This invention addresses the problems of automatic landscape adaptation of vertical interfaces in mobile applications in existing technologies, such as inconsistencies in interface functionality, layout imbalance, content truncation, unreasonable interactions, high development costs for landscape UIs, low automation, and poor results due to reliance on manual design or system default rotation. It understands the UI structure at the source code level by obtaining the application's vertical interface layout file and screenshots, extracting the shape features of component areas, and modeling layout information. Based on a multi-feature fusion mechanism, it constructs adaptation evaluation indicators to comprehensively evaluate the relative positional relationships, area ratios, aspect ratios, and feasibility of components. Furthermore, it uses an evolutionary optimization algorithm to globally optimize the layout of interface components, generating candidate landscape-adapted interfaces. Finally, it uses a consistency classifier and a user experience scoring model to evaluate the generated interfaces from multiple dimensions, selecting the optimal landscape interface as the final adaptation result. This achieves automatic generation of landscape layouts and executable XML files from vertical layouts, significantly reducing repetitive work for developers in landscape adaptation while ensuring the functional integrity, visual consistency, and user-friendliness of the landscape interface.

[0011] Specifically, the component relationship graph (CRG) modeling method of the present invention can systematically depict the hierarchical structure of mobile application interfaces and the logical dependencies between components. By abstracting the vertical layout into a graph structure represented by nodes and edges, it can completely preserve the parent-child relationship, alignment constraints and size constraints of components, providing a clear structural basis for landscape adaptation. Compared with traditional rule constraints or deep learning methods, the present invention can maintain the integrity of functional modules and the consistency of interaction logic in the process of landscape layout generation, greatly reducing the risk of functional errors caused by landscape adaptation. The layout optimization method based on multi-objective genetic algorithm (MOGA) of the present invention can simultaneously optimize the relative area of ​​components, aspect ratio and layout feasibility, and achieve a balance between layout aesthetics and functional integrity. Through fitness function weighted evaluation and genetic operations such as selection, crossover and mutation, the algorithm quickly converges to the optimal solution in the landscape layout space. Compared with the existing single-objective optimization method, the present invention can generate a more reasonable landscape interface layout, improve screen space utilization and user visual experience, while ensuring that the importance of key components is not weakened. The component clustering and logical module division method proposed in this invention can reasonably group UI components based on functional relevance and visual similarity, and realize the overall migration and scaling of key modules (such as navigation bar, toolbar and content area) in landscape layout. This method effectively avoids the problems of module dispersion or component misalignment that occur in traditional landscape adaptation, makes the user operation process coherent and the interface structure stable, and at the same time greatly reduces manual intervention and achieves efficient and automated adaptation. The automatic landscape XML code generation and conflict repair mechanism provided by this invention can retain the original component ID, event binding and resource reference when generating landscape layout, and automatically detect and repair layout conflicts (including out-of-bounds, overlap and attribute conflicts, etc.). Compared with the traditional manual adaptation method, this method significantly reduces the workload of developers, improves the efficiency of landscape layout generation, and ensures that the generated landscape interface can be directly embedded into the application project to run, so as to achieve high availability of the project application. Attached Figure Description

[0012] The present invention will be further described below with reference to the accompanying drawings and embodiments. In the accompanying drawings: Figure 1 This is a flowchart of the mobile application software UI landscape adaptation method provided by the present invention; Figure 2 This is a schematic diagram of the mobile application software UI landscape adaptation method provided by the present invention; Figure 3 This is a schematic diagram illustrating different methods explored for switching between portrait and landscape modes in the mobile application software UI landscape adaptation method provided by this invention. Figure 4 This is a general framework diagram of the mobile application software UI landscape adaptation method provided by the present invention; Figure 5 This is an example diagram of the code implementation for the landscape / portrait switching method of the mobile application software UI landscape adaptation method provided by this invention; Figure 6 This is a schematic diagram illustrating the implementation result of the mobile application software UI landscape adaptation method provided by the present invention. Detailed Implementation

[0013] To provide a clearer understanding of the technical features, objectives, and effects of the present invention, specific embodiments of the present invention will now be described in detail with reference to the accompanying drawings.

[0014] Figure 1 A schematic diagram of the mobile application software UI landscape adaptation method according to this embodiment is shown. In this embodiment, the mobile application software UI landscape adaptation method includes the following steps: S1: Construct a component relationship diagram based on the target application's vertical UI layout and view hierarchy; In one exemplary embodiment, the vertical UI layout includes UI components and their attributes; The view hierarchy includes the size and position of each UI component; In one exemplary embodiment, the component relationship graph includes nodes and edges; The node includes the component type, size and position, and attribute set of each UI component; The edges include structural relationship edges and relative relationship edges; The structural relationship edges represent the parent-child hierarchy between UI components; The relative relationship edges represent the layout constraint relationships between UI components, including alignment constraints and size constraints; S2: Based on the component relationship diagram, UI components are consistently classified according to functional relevance and visual relevance to obtain component classes; In one exemplary embodiment, step S2 specifically includes: Based on the component relationship diagram, the UI components are categorized according to predefined functional modules. Calculate the visual correlation between UI components, and classify UI components whose visual correlation exceeds the correlation threshold into the same category to obtain component classes; In one exemplary embodiment, The predefined functional modules include a navigation bar, search bar, bottom bar, playback area, poster area, and main content area; In one exemplary embodiment, the visual relevance is as follows: , , , , in, Represents UI components and UI components Visual correlation between them; , and These are the weighting coefficients for type correlation, size correlation, and distance correlation, respectively. , and These represent UI components. and UI components Type correlation, size correlation, and distance correlation among them; and These represent UI components. and UI components Type; and These are the parameters used to determine whether the width and height of two UI components are equal. It is a parameter used to determine whether there is a relative size relationship between two UI components; Represents UI components and UI components The Euclidean distance between them; The results are sorted in descending order. Total number of UI components; In one exemplary embodiment, the correlation threshold is 0.7; S3: Based on the component class, use a multi-objective genetic algorithm to obtain the optimal solution for the landscape layout; In one exemplary embodiment, step S3 specifically includes: The width and height of each component class in landscape mode are used as optimization objects, and a layout scheme of the set of all component class sizes is used as an individual of the genetic algorithm. A preset number of individuals are randomly generated to obtain the initial population. Based on the initial population, the population is updated through selection, crossover, and mutation operations. In the selection operation, the top 50% of individuals with the highest fitness in the population are retained as parents. In the crossover operation, parents are randomly paired and crossover points are randomly determined to exchange gene fragments to generate offspring. In the mutation operation, offspring individuals and their corresponding genes are randomly selected, and the genes are regenerated according to the initial population generation method to maintain population diversity. The iteration terminates after a preset number of algebras, and the individual with the highest fitness is output as the optimal solution for the landscape layout. In one exemplary embodiment, the initial population of the genetic algorithm is generated by randomly perturbing the size of the vertical screen component, the random perturbation following a Gaussian distribution with a mean of 1 and a variance of 0.2. In one exemplary embodiment, the preset quantity is 500; the preset generation is 500; In one exemplary embodiment, the fitness is calculated using the following formula:

[0015] in, Indicates fitness; , , These represent the weights of relative area, aspect ratio, and feasibility constraints, respectively. Relative area; Aspect ratio; As a feasibility constraint; S4: Based on the optimal solution for the landscape layout, generate the landscape UI interface and the corresponding layout XML file.

[0016] In one exemplary embodiment, the mobile application software UI landscape adaptation method further includes: performing multi-dimensional evaluation of the landscape UI interface and the corresponding layout XML file, and selecting the optimal landscape interface as the final adaptation result.

[0017] In some embodiments, the above-described method for adapting mobile application software UI to landscape mode can also be implemented in the following ways.

[0018] like Figure 2The diagram illustrates a method for adapting a mobile application's UI to landscape mode. In this embodiment, the method includes the following steps: S1: Input and Modeling: Obtain the vertical UI layout source code (XML file) and its view hierarchy (VH) of the target application, abstract the interface components as nodes of the graph model, and establish edges according to parent-child relationships, alignment relationships and size constraints to construct a component relationship graph (CRG); the CRG can simultaneously depict the structural hierarchy and relative layout information of the interface, thereby ensuring that the adaptation process does not rely on static screenshots, but operates directly at the source code level; As an exemplary embodiment, the system parses the vertical layout file (XML) and its view hierarchy (VH) to abstract a component relationship graph (CRG). Nodes in the CRG represent interface components, and edges represent parent-child relationships, alignment constraints, size constraints, and other logical connections between components.

[0019] In one exemplary embodiment, the component relationship graph (CRG) contains two types of edges: Structural relationship edges are used to represent the hierarchical nesting between parent containers and child components; Relative edges are used to represent constraints such as alignment and size matching, for example, the width is equal to the width of the parent component or the right edge is aligned.

[0020] S2: Component Classification: UI components are classified in a consistent manner based on functional relevance and visual relevance to maintain logical and aesthetic continuity between landscape and portrait orientations.

[0021] In one exemplary embodiment, the functional relevance is based on six predefined typical modules (Navigation Bar (ToolBar), Search Bar (SearchBar), Bottom Bar (BottomBar), Play Area (Player), Poster Area (Poster), and Main Content Area (Main)), and is automatically determined through component ID characteristics, position and size rules, so that the core interactive modules can maintain a stable layout in landscape mode.

[0022] In one exemplary embodiment, a component classification strategy is employed, wherein functional relevance is used to identify modules such as navigation bars, bottom bars, playback areas, and search bars, while visual relevance is obtained through a comprehensive calculation of component type, size, and spatial distance; its relevance measurement function is:

[0023] in, , and It is a weighting coefficient, when correlation threshold When the value exceeds 0.7, adjacent components are classified into the same category.

[0024] S3: Layout Optimization: Using component classes as the basic unit, a multi-objective genetic algorithm is employed to search the solution space for landscape layouts. The algorithm iteratively updates through selection, crossover, and mutation operations, gradually approaching the optimal solution that best meets user experience.

[0025] In one exemplary embodiment, the initial population of the genetic algorithm is generated by a random perturbation of the screen component size, the perturbation following a Gaussian distribution with a mean of 1 and a variance of 0.2.

[0026] This ensures that the initial solution maintains the rationality of the original layout while possessing a certain degree of diversity to facilitate global search.

[0027] In one exemplary embodiment, the genetic algorithm used in the layout optimization process considers three aspects in its fitness function: (1) relative area maintenance to avoid excessive changes in component area during landscape / portrait screen switching; (2) reasonable aspect ratio to maintain reading and operation habits; and (3) feasibility constraints to ensure that components do not exceed boundaries. Its objective function is expressed as:

[0028] in, For relative area, Aspect ratio, This serves as a feasibility constraint.

[0029] S4: Code Generation: Based on the optimal solution output by the genetic algorithm, automatically generate a landscape UI interface and the corresponding layout XML file. This file can be directly embedded into the application project to run, reducing the workload for developers to write additional landscape interfaces.

[0030] In one exemplary embodiment, the generated landscape code is detected and eliminated by automated tools to eliminate layout conflicts (such as duplicate IDs and invalid alignment attributes), ensuring the runnability of the generated XML file and allowing it to be directly integrated into the landscape resource directory of the Android project.

[0031] In one exemplary embodiment, the code and XML file generation method requires that after the genetic algorithm obtains the optimal solution for the landscape layout, the system maps each component class to a suitable Android layout container (such as LinearLayout or ConstraintLayout), and converts the width, height, and position into corresponding layout attributes based on the optimization results. Simultaneously, it reuses the component IDs, resources, and event bindings from the original XML, adjusting only the parent container and size parameters to maintain functional consistency. The generated landscape XML automatically performs conflict detection and repair (such as ID duplication, attribute contradictions, and out-of-bounds issues), ultimately resulting in an executable file that can be directly embedded and run in the res / layout-land / directory, thereby significantly reducing the workload of developers manually writing landscape interfaces.

[0032] In one exemplary embodiment, UI similarity (US) is used as an evaluation metric, measured by comparing the generated landscape UI with the manually designed landscape UI in terms of the Euclidean distance at the vertex coordinates of each component:

[0033] in, For the number of components, and These are the vertex coordinates of the generated interface and the original interface, respectively. This metric quantifies the consistency between the generated result and the developer's design.

[0034] In some embodiments, the above-described method for adapting mobile application software UI to landscape mode can also be implemented in the following ways.

[0035] Figure 3 This is a diagram illustrating the different methods explored for landscape and portrait screen switching in mobile application UI adaptation. Figure 4 A general framework diagram of the mobile application software UI landscape adaptation method; in this embodiment, the mobile application software UI landscape adaptation method includes: S1: Input and Modeling—Constructing a Component Relationship Graph (CRG) The purpose of this step is to convert the XML source code and view hierarchy (VH) of the UI layout into a computer-understandable and manipulable graph model, laying the foundation for subsequent analysis and optimization.

[0036] Specifically, first, obtain the target application's vertical UI layout file (layout.xml) and its corresponding view hierarchy (VH). The VH can be obtained at runtime using Android's official tool, UI Automator. For the XML file, identify all UI components (such as TextView, ImageView, LinearLayout, etc.) and their attributes (such as layout_width, layout_alignParentRight, etc.). For the VH, obtain the specific coordinate information (such as bounds) of each component on the screen.

[0037] Secondly, each UI component parsed from the XML is mapped to a node in the CRG. Each node stores key information about the component, including: Component type (Type): such as TextView, ViewGroup.

[0038] Size & Position: width, height, x, y obtained from VH.

[0039] Attributes: All layout attributes obtained from XML.

[0040] Finally, traverse the nodes and construct the edges in the CRG based on the relationships between components. These edges are mainly divided into two categories: Structural Edge: Represents the parent-child hierarchy between components. If node A is the parent container of node B (e.g., a LinearLayout containing a TextView), then a structural edge is added to the CRG pointing from A to B.

[0041] Relative Edge: Represents the layout constraints between components. If the right boundary of node C is aligned with the right boundary of node D (layout_alignRight), a relative edge is added from D to C. Similarly, attributes such as layout_toLeftOf and layout_width="match_parent" are handled.

[0042] S2: Component Classification - UI Consistency Classification The purpose of this step is to group functionally or visually related components into the same category to ensure that the logical grouping and visual aesthetics of the UI are maintained after landscape adaptation.

[0043] First, referencing design guidelines such as Google Material Design, UIs are typically divided into different modules based on function (such as the top navigation bar, search bar, and bottom toolbar). Then, the ViewGroup nodes in the CRG are traversed and categorized according to their position, size, and ID keywords. For example, if a ViewGroup is located at the top of the screen, has a width of match_parent, and its ID contains "toolbar" or "navigation," it is categorized as ToolBar.

[0044] Secondly, for visual relevance classification, given two adjacent components and Its visual relevance It is calculated by weighting the following three sub-correlations, including Type correlation ( ):

[0045] Size dependence ( ):

[0046] in, and Determine whether the width and height are equal. Determine if a relative size relationship exists (e.g., match_parent).

[0047] Distance correlation ( ):

[0048] In summary, the final visual relevance The calculation is as follows:

[0049] in, , and It is a weighting coefficient, when correlation threshold When the value exceeds 0.7, adjacent components are classified into the same category.

[0050] S3: Layout Optimization - Multi-objective Genetic Algorithm The purpose of this step is to intelligently search for the optimal combination of component class size and position under a landscape aspect ratio, taking component class as the unit, and generate a layout scheme with a good user experience.

[0051] Specifically, the algorithm uses component classes as the basic unit. In landscape aspect ratio scenarios, it searches the landscape layout solution space through a multi-objective genetic algorithm to gradually approach the optimal layout solution that meets user experience.

[0052] First, we perform problem modeling and gene representation, defining the width of each component class in landscape mode. and height As an optimization target, a layout scheme (individual) can be represented as a set of all component class sizes, i.e. The initial population is generated randomly. Each individual element has a size based on the original vertical screen size, obtained by perturbation with a random factor following a Gaussian distribution. The Gaussian distribution formula is...

[0053] Among them, the mean Standard deviation .

[0054] Next, we define the fitness function, which comprehensively evaluates the merits of different layout schemes to guide the algorithm's search direction. The function expression is:

[0055] in, For relative area, Aspect ratio, This serves as a feasibility constraint.

[0056] Finally, the genetic algorithm is iterated, updating the population through selection, crossover, and mutation operations: In the selection phase, the top 50% of individuals with the highest fitness are retained as parents; in the crossover phase, parents are randomly paired, and gene fragments are exchanged at random crossover points to generate offspring; in the mutation phase, offspring individuals and their corresponding genes are randomly selected, and the genes are regenerated according to the initial population generation method to maintain population diversity. Algorithm Iteration The process terminates at the end of the generation, and the individual with the highest fitness is output as the optimal solution for the landscape layout.

[0057] S4: XML and Code Generation The core objective of this step is to transform the optimal solution for landscape layout output by the multi-objective genetic algorithm into a landscape UI interface and XML file that can be directly compiled and run in an Android project, thereby reducing the additional development workload for developers.

[0058] First, a layout interface is generated. Based on the position coordinates and size parameters of each component class in the optimal solution, the layout structure is restored on a virtual landscape canvas. Developers can also quickly preview the adaptation effect without starting the application compilation process, which greatly improves the efficiency of early verification of the adaptation solution.

[0059] The next step is to automatically generate XML code. First, a RelativeLayout or ConstraintLayout is created as the root container for the landscape layout to ensure good compatibility and flexibility. Then, the component classes in the CRG are traversed, and corresponding XML code snippets are generated for each original UI component in the class based on the position and size of the component class in the optimal solution. Not only are the layout_width and layout_height properties rewritten with optimized values, but also relative layout properties such as layout_marginLeft and layout_alignParentTop are calculated and configured based on the absolute coordinates of the component class on the landscape canvas to ensure that the component position accurately matches the optimal solution.

[0060] Simultaneously, by utilizing the original component relationships recorded in the CRG (such as parent-child hierarchy and alignment constraints), potential layout conflicts in the code (such as duplicate alignment attributes and contradictory size constraints) are detected and removed, ensuring that the generated XML file is syntactically correct and logically sound. Finally, the generated XM file is named activity_main_land.xml (or the name can be adjusted according to the application's page logic) and placed in the res / layout-land / directory of the Android project. The Android system automatically loads this file when it detects the device is in landscape mode, achieving zero-cost integration of the landscape UI, perfectly matching the developer's actual development process and engineering needs; Figure 5 The image shown is an example of the code implementation for switching between portrait and landscape modes in a mobile application's UI.

[0061] To evaluate the accuracy of this invention and compare it with other methods, the following three evaluation indicators were proposed: 1) Classification Accuracy (CA) is used to evaluate whether the generated landscape UI retains the structural divisions of the original UI. Here, "structural divisions" refers to the structural area category to which each component in the UI belongs (such as the navigation bar area, content display area, function button area, etc.). The calculation method is as follows:

[0062] in, To generate the total number of components in the UI, To generate the first in the UI The category (i.e., structural region) to which each component belongs. For the original UI and the first The category to which each component belongs. Indicates an indicator function, if (That is, the generated component is of the same category as the original component), then ,otherwise .

[0063] 2) Intra-Class Similarity (ICS) is used to evaluate whether the generated landscape UI retains the spatial consistency of the original UI, measuring the quality of the generated UI from a design aesthetic perspective. Here, "class" refers to the category of structural areas in the UI, with each category corresponding to a rectangular area (components or structural areas are represented by rectangles, whose position and size can be completely determined by four vertices). The calculation method is as follows:

[0064] in, This represents the total number of structural region categories in the UI. To generate the first in landscape UI The first rectangular area corresponding to the category vertex coordinates For the original UI The first rectangular area corresponding to the category The coordinates of each vertex. These correspond to the four vertices of the rectangle: "top left, top right, bottom left, and bottom right" (these four vertices can be used to fully capture the position and size differences of the area, including translation, scaling, or slight deformation). Euclidean distance (used to calculate the spatial distance between two points).

[0065] 3) UI Similarity (US) is used to evaluate the overall design quality of the generated landscape UI. Its calculation logic is similar to ICS, but the core difference is that ICS uses "structural area categories" as the calculation unit, while US uses "individual components" as the calculation unit, focusing more on the matching degree of UI details. The calculation method is as follows:

[0066] in, For the number of components, and These are the vertex coordinates of the generated interface and the original interface, respectively. This metric quantifies the consistency between the generated result and the developer's design.

[0067] Based on the above evaluation indicators, the actual application results of this invention in 11 mobile applications are shown in Table 1, and its actual performance is as follows: Figure 6 As shown.

[0068] Experimental results show that this invention outperforms other baseline tools in both ICS (34.9%) and US (18.7%), while also achieving the expected CA (92.8%), fully demonstrating its effectiveness. In the interface consistency classification stage, the CA of this method is 92.8%, higher than AUAG (86.2%); ICS is 34.9%, lower than AUAG (41.3%) and RO (60.4%). These results indicate that this invention can accurately classify interfaces and effectively maintain the structural consistency of the original interface. It is worth noting that RO has the highest CA at 96.5%, because its classification strategy tends to group all original interfaces into the same category. While this strategy improves CA, it limits the flexibility and overall effect of landscape adaptation, thus performing poorly in ICS and US. In the interface adaptation stage, the US of this invention is 18.7%, lower than AUAG (22.5%) and RO (31.1%), indicating that the landscape interface generated by this invention is closer to the interface designed by the developer. This result demonstrates that the present invention can assist developers in completing landscape interface design to a certain extent and verifies its effectiveness in practical applications.

[0069] Table 1: Practical Application and Comparison Results of This Patent in 11 Apps (%)

[0070] This embodiment provides a computer program product, including a computer program that, when executed by a processor, implements the steps of the above-described mobile application software UI landscape adaptation method.

[0071] The embodiments of the present invention have been described above with reference to the accompanying drawings. However, the present invention is not limited to the specific embodiments described above. The specific embodiments described above are merely illustrative and not restrictive. Those skilled in the art can make many other forms under the guidance of the present invention without departing from the spirit and scope of the claims. All of these forms are within the protection scope of the present invention.

Claims

1. A mobile application software UI landscape adaptation method, characterized in that, The method comprises the following steps: S1: constructing a component relationship graph according to a longitudinal UI layout and a view level of a target application; S2: performing consistency classification on UI components based on functional correlation and visual correlation according to the component relationship graph, to obtain component classes; S3: obtaining a horizontal screen layout optimal solution by using a multi-objective genetic algorithm according to the component classes; S4: generating a horizontal screen UI interface and a corresponding layout XML file according to the horizontal screen layout optimal solution.

2. The mobile application software UI landscape adaptation method of claim 1, wherein, The longitudinal UI layout comprises UI components and attributes thereof; and the view level comprises the size and position of each UI component.

3. The mobile application software UI landscape adaptation method of claim 1, wherein, The component relationship graph comprises nodes and edges; the nodes comprise the component type, size and position, and attribute set of each UI component; and the edges comprise structural relationship edges and relative relationship edges; the structural relationship edges represent the parent-child level relationship between UI components; and the relative relationship edges represent the layout constraint relationship between UI components, including alignment constraint and size constraint.

4. The mobile application software UI landscape adaptation method of claim 1, wherein, Step S2 specifically comprises: classifying UI components according to predefined functional modules according to the component relationship graph, calculating the visual correlation between UI components, and dividing UI components with visual correlation exceeding a correlation threshold into the same class to obtain component classes.

5. The mobile application software UI landscape adaptation method of claim 4, wherein, The predefined functional modules comprise a navigation bar, a search bar, a bottom bar, a playing area, a poster area, and a main content area.

6. The mobile application software UI landscape adaptation method of claim 4, wherein, The visual correlation is as shown in the following formula: ， ， ， ， wherein, represents a visual correlation between the UI components are weight coefficients of type correlation, size correlation and distance correlation, respectively; represent type correlation, size correlation and distance correlation between the UI components represent the types of the UI components are parameters for judging whether the width and height of two UI components are equal, respectively, is a parameter for judging whether there is a relative size relationship between two UI components; represents the Euclidean distance between the UI components sorts the result in descending order; is the total number of UI components.​​​​​​​​​​​​​​ 7. The mobile application software UI landscape adaptation method of claim 1, wherein, Step S3 specifically comprises: taking the width and height of each component class in a horizontal screen mode as optimization objects, taking a layout scheme of the size set of all component classes as an individual of a genetic algorithm, randomly generating a preset number of individuals to obtain an initial population; updating the population by selection operation, crossover operation and mutation operation, wherein, in the selection operation process, the top 50% of individuals with the highest fitness in the population are reserved as parents, in the crossover operation process, the parents are randomly paired, a crossover point is randomly determined to exchange gene fragments to generate offspring, and in the mutation operation process, an individual and a corresponding gene of the offspring are randomly selected, and the gene is re-generated in the initial population generation mode to maintain population diversity; terminating after iterating for a preset number of generations, and outputting the individual with the highest fitness as the horizontal screen layout optimal solution.

8. The mobile application software UI landscape adaptation method of claim 7, wherein, The initial population of the genetic algorithm is generated by random disturbance of longitudinal screen component sizes, and the random disturbance obeys a Gaussian distribution with a mean of 1 and a variance of 0.

2.

9. The mobile application software UI landscape adaptation method of claim 7, wherein, The formula of the fitness is as follows: ， wherein, represents fitness; , , respectively represent relative area, aspect ratio, weight of feasibility constraint; is the relative area; is the aspect ratio; is the feasibility constraint.

10. A computer program product comprising a computer program, characterized in that, The computer program is executed by a processor to implement the steps of the mobile application software UI horizontal screen adaptation method of any one of claims 1-x.

Images