Text element configuration method and device of page, electric vehicle and storage medium

By obtaining and configuring the layout view in the in-vehicle application page, the layout design challenges under multiple languages ​​and multiple headings are solved, achieving efficient page element configuration and text control management, and improving the user experience.

CN118656073BActive Publication Date: 2025-11-21CHONGQING SELIS PHOENIX INTELLIGENT INNOVATION TECH CO LTD
View PDF 1 Cites 0 Cited by

Patent Information

Application Number
CN202410747795.6
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2024-06-11
Publication Date
2025-11-21
Estimated Expiration
2044-06-11

AI Technical Summary

Technical Problem

Existing in-vehicle application page layout design methods struggle to accurately design layout configurations that meet the needs of multiple languages ​​and multiple headings, impacting user experience and usability.

Method used

By obtaining the functional views in the page layout view, the layout is configured based on preset layout constraints and page information to obtain size and position configuration information, which is then applied to the in-vehicle application page to realize the display, hiding, center alignment, and text language switching of the functional views.

Benefits of technology

The page element configuration process has been optimized, improving configuration efficiency, reducing manpower and material resources consumption, lowering the maintenance cost of in-vehicle applications, and enhancing the usability and ease of use of text controls.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN118656073B_ABST
    Figure CN118656073B_ABST
Patent Text Reader

Abstract

The application relates to a text element configuration method and device of a page, an electric vehicle and a storage medium. The method comprises the following steps: acquiring a page layout view created for a vehicle-mounted application page; a plurality of function views arranged in a stack mode are arranged in the page layout view, the function view being a touch control configured with a text element; based on preset layout constraint conditions and page information of the vehicle-mounted application page, the plurality of function views are subjected to layout configuration to obtain a corresponding layout configuration result; and based on the layout configuration result, the page layout view and each function view are applied to the vehicle-mounted application page to realize visual application of the function view. The method can flexibly configure layout configuration of a plurality of text controls, improve the availability and ease of use of display, hiding, center alignment and text language switching of various text controls, and is beneficial to development and application of the electric vehicle.
Need to check novelty before this filing date? Find Prior Art

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of vehicle client, in particular to a text element configuration method of a page, a text element configuration device of a page, an electric vehicle, a computer readable storage medium and a computer program product. BACKGROUND

[0002] With the rapid development of automobile electronics technology, vehicle application programs are widely applied to automobiles, and the development and use of vehicle application pages on vehicle application programs are also increasingly concerned. In the development of various vehicle application pages, some details related to switching languages and text arrangement of function control text elements are often encountered, and if not handled properly, it will affect the user experience.

[0003] In the current design of vehicle application pages, designers usually need to optimize the design and layout of various function controls in the page according to actual business needs and user preferences. However, the traditional application page design method usually relies on the experience and subjective judgment of designers, and it is difficult to accurately design a layout configuration that meets the needs in the case of multiple languages, multiple titles, and variable text length. In addition, with the diversification and internationalization of vehicle application programs, responsive design that adapts to different language environments has become one of the difficulties in function control layout design.

[0004] Therefore, the existing layout design method of vehicle application pages has the problem of insufficient usability and ease of use of the designed layout configuration. SUMMARY

[0005] To solve the above problems, the present disclosure provides a text element configuration method of a page, a text element configuration device of a page, an electric vehicle, a computer readable storage medium and a computer program product. The technical solution of the present disclosure is as follows:

[0006] According to a first aspect of the embodiments of the present disclosure, a text element configuration method of a page is provided, comprising:

[0007] obtaining a page layout view created for a vehicle application page; a plurality of function views arranged in a stack manner are set in the page layout view, and the function view is a touch control configured with a text element;

[0008] based on a preset layout constraint condition and page information of the vehicle application page, performing layout configuration on a plurality of function views to obtain a corresponding layout configuration result; the layout configuration result is used to indicate size configuration information and position configuration information between the page layout view, each function view and the vehicle application page;

[0009] applying the page layout view and each of the function views into the in-vehicle application page based on the layout configuration result, to realize visual application of the function views; the visual application at least includes controlling the touch control to display, hide, center align and switch text language in the in-vehicle application page.

[0010] In an example embodiment, the layout configuration of the plurality of function views to obtain corresponding layout configuration results comprises:

[0011] When the text element is a prompt text and the touch control is a pointing arrow, based on preset layout constraint conditions and page information of the in-vehicle application page, configuring size configuration information and position configuration information between the page layout view, each of the function views and the in-vehicle application page;

[0012] The size configuration information includes that a line break attribute value of the prompt text in the function view is a preset value, and the width and height of the prompt text and the function view in the in-vehicle application page are the same.

[0013] The position configuration information includes that a distance between the page layout view and a corresponding adjacent view above or below satisfies an initial close relationship, a distance between the page layout view and left and right edges of the in-vehicle application page satisfies the initial close relationship, and a distance between the prompt text, the pointing arrow and the page layout view satisfies the initial close relationship; the initial close relationship represents that a distance between two page elements is a preset initial distance.

[0014] In an example embodiment, the applying the page layout view and each of the function views into the in-vehicle application page to realize the visual application of the function views comprises:

[0015] When the touch control is controlled to display in the in-vehicle application page, configuring a display attribute of the function view as false, and resetting the initial close relationship of the page layout view;

[0016] When the touch control is controlled to hide in the in-vehicle application page, configuring the display attribute of the function view as true, resetting the initial close relationship of the page layout view, and configuring a height of the page layout view in the in-vehicle application page as 0.

[0017] In an example embodiment, the layout configuration of the plurality of function views to obtain corresponding layout configuration results comprises:

[0018] when the text element is a title text and the number of the plurality of function views is odd, based on a preset layout constraint condition and page information of the in-vehicle application page, configuring size configuration information and position configuration information between the page layout view, each of the function views and the in-vehicle application page;

[0019] wherein the size configuration information comprises midpoint alignment and / or same height of the plurality of function views, and a width of the function view at the middle position is an automatically estimated width or a preset maximum width;

[0020] the position configuration information comprises midpoint alignment and / or same height of the plurality of function views, fixed height of the page layout view when the number of lines of the title text is one, unfixed height of the page layout view when the number of lines of the title text is more than one, distance between the page layout view and corresponding adjacent views satisfying an initial close relationship, and midpoint position of the function view at the middle position being same as the page layout view.

[0021] In an example embodiment, before the configuration of the size configuration information and the position configuration information between the page layout view, each of the function views and the in-vehicle application page, the method further comprises:

[0022] obtaining a first width of the function view at the middle position and a fixed interval distance between each of the function views;

[0023] calculating a difference between a page width of the in-vehicle application page and the first width to obtain a second width of the function view at the left and right sides;

[0024] based on the second width and the fixed interval distance, obtaining a preset maximum width of the function view at the left and right sides.

[0025] In an example embodiment, the layout configuration of the plurality of function views to obtain a corresponding layout configuration result comprises:

[0026] when the page layout view is a stackview instance and the touch control is a car control button, based on a preset layout constraint condition and page information of the in-vehicle application page, configuring size configuration information and position configuration information between the page layout view, each of the function views and the in-vehicle application page;

[0027] wherein the size configuration information comprises width information between each of the car control buttons, and a height of the function view is same as a height of a car control button with the highest height in the in-vehicle application page;

[0028] The position configuration information includes top alignment of each of the vehicle control buttons, and automatic arrangement between each of the vehicle control buttons according to axis attribute, distribution attribute, alignment attribute and spacing attribute of the stackview instance.

[0029] In an example embodiment, the size configuration information between the page layout view, each of the function views and the in-vehicle application page includes:

[0030] Obtaining a preset minimum width for the plurality of vehicle control buttons, and a page width of the in-vehicle application page and a third width of the page layout view;

[0031] Calculating a product between the minimum width and the number of the plurality of vehicle control buttons to obtain an estimated total width for the plurality of vehicle control buttons; and calculating a difference between the page width of the in-vehicle application page and the third width to obtain an available width for the plurality of vehicle control buttons;

[0032] Determining a final width between the plurality of vehicle control buttons based on a size relationship between the estimated total width and the available width.

[0033] According to a second aspect of the embodiments of the present disclosure, a text element configuration device of a page is provided, including:

[0034] A view obtaining module is configured to obtain a page layout view created for an in-vehicle application page; the page layout view is provided with a plurality of function views arranged in a stack manner, and the function view is a touch control configured with a text element;

[0035] A layout configuration module is configured to perform layout configuration on the plurality of function views based on a preset layout constraint condition and page information of the in-vehicle application page, to obtain a corresponding layout configuration result; the layout configuration result is used to indicate size configuration information and position configuration information between the page layout view, each of the function views and the in-vehicle application page;

[0036] A view application module is configured to apply the page layout view and each of the function views to the in-vehicle application page based on the layout configuration result, to realize visual application of the function view; the visual application at least includes display, hiding, center alignment and text language switching of the touch control in the in-vehicle application page.

[0037] According to a third aspect of the embodiments of the present disclosure, an electric vehicle is provided, including:

[0038] A processor and a memory connected to the processor, wherein the memory stores program data, and the processor is configured to invoke the program data stored in the memory to implement the text element configuration method of the page according to any one of the preceding embodiments.

[0039] According to a fourth aspect of the embodiments of the present disclosure, a computer readable storage medium is provided, which comprises program data, and when the program data is executed by a processor of a computer device, the computer device is enabled to perform the text element configuration method of the page according to any one of the preceding embodiments.

[0040] According to a fifth aspect of the embodiments of the present disclosure, a computer program product is provided, which comprises program instructions, and when the program instructions are executed by a processor of a computer device, the computer device is enabled to perform the text element configuration method of the page according to any one of the preceding embodiments.

[0041] The embodiments of the present disclosure at least have the following beneficial effects:

[0042] On one hand, the present solution obtains a page layout view created for a vehicle-mounted application page and a plurality of function views arranged in a stack manner in the page layout view; then performs layout configuration on the plurality of function views based on preset layout constraint conditions and page information of the vehicle-mounted application page to obtain a corresponding layout configuration result; and finally applies the page layout view and each function view to the vehicle-mounted application page according to the layout configuration result to realize visual application of the function view, thereby optimizing the text element configuration process of the page, effectively improving the efficiency of page element configuration, and reducing the consumption of manpower and material resources. On the other hand, the present solution is different from the existing layout configuration method, and performs layout configuration on a plurality of touch controls configured with text elements in the page layout view to obtain size configuration information and position configuration information between the page layout view, each function view and the vehicle-mounted application page, and uses the size configuration information and the position configuration information to realize visual application of the touch controls in the vehicle-mounted application page, such as display, hiding, center alignment and text language switching, thereby flexibly configuring the layout configuration of the plurality of text controls according to the layout constraint conditions and the page information, effectively reducing the maintenance cost of the vehicle-mounted application program by the enterprise, and improving the usability and ease of use of the display, hiding, center alignment and text language switching of the plurality of text controls, which is conducive to the development and application of electric vehicles.

[0043] It should be understood that the foregoing general description and the following detailed description are only exemplary and explanatory, and cannot limit the present disclosure. BRIEF DESCRIPTION OF DRAWINGS

[0044] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the related art, the following will briefly introduce the drawings needed to be used in the description of the embodiments of the present application. Obviously, the drawings in the following description only some of the embodiments of the present application, and for those skilled in the art, other related drawings can also be obtained without creative labor.

[0045] Figure 1 is an application environment diagram of a text element configuration method of a page according to an exemplary embodiment.

[0046] Figure 2 is a flowchart of a text element configuration method of a page according to an exemplary embodiment.

[0047] Figure 3 is a page diagram of configuring a reminder control according to an exemplary embodiment.

[0048] Figure 4 is a page diagram of configuring a title control according to an exemplary embodiment.

[0049] Figure 5 is a page diagram of configuring a car control button according to an exemplary embodiment.

[0050] Figure 6 is a flowchart of a step of obtaining maximum width of left and right views according to an exemplary embodiment.

[0051] Figure 7 is a structure block diagram of a text element configuration device of a page according to an exemplary embodiment.

[0052] Figure 8 is a block diagram of an electric vehicle for page text element configuration according to an exemplary embodiment. DETAILED DESCRIPTION

[0053] In order to make the purposes, technical solutions and advantages of the present application more clear, the following will further describe the present application in combination with the drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application, and are not used to limit the present application.

[0054] The term "and / or" in the embodiments of the present application means any and all possible combinations of one or more of the associated listed items. It should also be noted that when used in the specification, "comprise / comprising" specifies the presence of stated features, integers, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, integers, steps, operations, elements and / or components and / or groups thereof.

[0055] The terms "first", "second", and the like in the present application are used to distinguish different objects, rather than to describe a particular order. In addition, the terms "include" and "have" and any variations thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product, or device that includes a series of steps or units is not limited to the listed steps or units, but can optionally include steps or units not listed, or can optionally include other steps or units inherent to the process, method, product, or device.

[0056] In addition, although the terms "first", "second", and the like are used repeatedly in the present application to describe various operations (or various elements or various applications or various instructions or various data), etc., these operations (or elements or applications or instructions or data) should not be limited by these terms. These terms are only used to distinguish one operation (or element or application or instruction or data) from another operation (or element or application or instruction or data).

[0057] The text element configuration method of the page provided by the embodiments of the present application can be applied to the application environment as shown in Figure 1 The terminal 102 communicates with the server 104 through a communication network. The data storage system can store data required by the server 104 to process. The data storage system can be integrated on the server 104, or placed on the cloud or other network servers.

[0058] In some embodiments, referring to Figure 1 The server 104 obtains a page layout view created for a vehicle-mounted application page; a plurality of function views arranged in a stack manner are set in the page layout view, and the function view is a touch control configured with a text element; based on a preset layout constraint condition and page information of the vehicle-mounted application page, the plurality of function views are configured, and a corresponding layout configuration result is obtained; the layout configuration result is used to indicate size configuration information and position configuration information between the page layout view, each function view and the vehicle-mounted application page; based on the layout configuration result, the page layout view and each function view are applied to the vehicle-mounted application page to realize visual application of the function view; the visual application at least includes controlling the touch control to display, hide, center align and switch text language in the vehicle-mounted application page.

[0059] In some embodiments, the terminal 102 (e.g., mobile terminal, fixed terminal) can be implemented in a variety of forms. Among them, the terminal 102 can be a mobile terminal including, for example, a mobile phone, a smart phone, a notebook computer, a portable handheld device, a personal digital assistant (PDA), a tablet computer (PAD), and the like, and the terminal 102 can also be a fixed terminal such as an automated teller machine (ATM), an automatic integrated machine, a digital TV, a desktop computer, a fixed computer, and the like.

[0060] Hereinafter, it is assumed that the terminal 102 is a fixed terminal. However, those skilled in the art will appreciate that the configuration according to the embodiments of the present disclosure can also be applied to a mobile type terminal 102 if there are operations or elements specifically for mobile purposes.

[0061] In some embodiments, the data processing component running on the server 104 can load any of various additional server applications and / or middleware applications that can be included, such as HTTP (HyperText Transfer Protocol), FTP (File Transfer Protocol), CGI (Common Gateway Interface), RDBMS (Relational Database Management System), and the like, which are being executed.

[0062] In some embodiments, the server 104 can be implemented with a stand-alone server or a server cluster composed of a plurality of servers. The server 104 can be adapted to run one or more application services or software components of the terminal 102 described in the foregoing disclosure.

[0063] In some embodiments, the operating system on which the application service or software component runs can include various versions of Microsoft Windows®, Apple Macintosh® and / or Linux operating systems, various commercial or UNIX®-like operating systems (including but not limited to various GNU / Linux operating systems, Google Chrome® OS, and the like), and / or mobile operating systems such as iOS®, Windows® Phone, Android® OS, BlackBerry® OS, Palm® OS operating systems, and other online or offline operating systems, without specific limitation here.

[0064] In some embodiments, as shown in Figure 2 , a flowchart of a method for configuring text elements of a page in an embodiment of the present disclosure is shown. The method is applied to the server 104 in Figure 2 , and the method includes the following steps: Figure 1

[0065] ​Step S11: Obtain a page layout view created for the in-vehicle application page.

[0066] In the page layout view, a plurality of function views arranged in a stack manner are provided, and the function view is a touch control configured with a text element.

[0067] In an embodiment, the page layout view pre-created in the in-vehicle application page can be a stack view (such as Stack View), which is a UI control in iOS development for managing and automatically arranging a plurality of subviews. The page layout view can arrange its subviews horizontally or vertically, and automatically adjust the layout of the subviews according to the set properties, so that the page layout is more flexible and simple.

[0068] In some embodiments, Stack View is widely used in iOS development to build complex interface layouts, especially suitable for situations where subviews need to be dynamically added or removed, and scenarios where adaptive layout needs to be quickly implemented. The use of StackView can reduce the amount of code for manual layout and improve development efficiency.

[0069] Step S12: Based on the preset layout constraint condition and the page information of the in-vehicle application page, the plurality of function views are configured for layout, and a corresponding layout configuration result is obtained.

[0070] In an embodiment, the layout configuration result is used to indicate the size configuration information and the position configuration information between the page layout view, each function view and the in-vehicle application page.

[0071] In an embodiment, the server configures the plurality of function views for layout based on the preset layout constraint condition and the page information of the in-vehicle application page to obtain a corresponding layout configuration result, including: when the text element is a prompt text and the touch control is a pointing arrow, based on the preset layout constraint condition and the page information of the in-vehicle application page, the size configuration information and the position configuration information between the page layout view, each function view and the in-vehicle application page are configured.

[0072] In the size configuration information, the line break attribute value of the prompt text in the function view is a preset value, and the width and height of the prompt text and the function view in the in-vehicle application page are the same.

[0073] In the position configuration information, the distance between the page layout view and the corresponding adjacent view above and below satisfies the initial close relationship, the distance between the page layout view and the left and right edges of the in-vehicle application page satisfies the initial close relationship, and the distance between the prompt text, the pointing arrow and the page layout view satisfies the initial close relationship.

[0074] In an exemplary embodiment, refer to Figure 3 , Figure 3 is a page schematic diagram of an embodiment of the present application about configuring a reminder control. In which, Figure 3 the area P1 in is the area where a page layout view is located, and the page layout view includes a reminder control, and the reminder control includes a prompt text (area P2) and a pointing arrow (area P3); Figure 3 the area P4 in is the area where another page layout view is located, and the page layout view includes a reminder control with only a prompt text.

[0075] In some embodiments, the server needs to set the following properties for the prompt text:

[0076] (1) The line break property is set to 0, wherein the line break property is called numberOfLines in iOS system, and when it is set to an integer other than 0, it means that the specified prompt text can only be displayed for a maximum of integer lines regardless of the length of the text. When it is set to 0, it means that the number of lines of the prompt text is determined according to the text.

[0077] (2) The constraints of the text control are ultimately related to the reminder control, wherein the prompt text ultimately needs to "expand" the entire reminder control. For example, Figure 3 the prompt text needs to specify the distance constraints of its left edge, top edge, bottom edge, and parent control (i.e., the entire reminder control), and also needs to specify the distance constraints of its right edge and button, and the distance constraints of the button to the pointing arrow, and the distance constraints of the pointing arrow to the parent control, so that the right edge of the prompt text and the parent control ultimately have a related distance.

[0078] In some embodiments, the server also needs to set the distance between the left and right borders of the parent control area to the left and right boundaries of the screen to maintain an initial close relationship, and set the distance between the top and bottom borders of the parent control area and its adjacent top and bottom control areas to maintain an initial close relationship. However, only the width and height constraints of the parent control are not set. Wherein the initial close relationship represents that the distance between two page elements is a preset initial distance.

[0079] In some embodiments, the server also needs to set the constraints of the prompt text to be consistent with the parent control. Specifically, the four edge constraints of the prompt text are set to be adjacent to the parent control, so that the prompt text "expands" the parent control, making the parent control also have a width and height, and the width and height are consistent with the prompt text.

[0080] In an embodiment, the server configures the plurality of function views based on the preset layout constraint condition and the page information of the in-vehicle application page to obtain a corresponding layout configuration result, including: when the text element is a title text and the number of the plurality of function views is odd, configuring the size configuration information and the position configuration information between the page layout view, each function view and the in-vehicle application page based on the preset layout constraint condition and the page information of the in-vehicle application page.

[0081] In the size configuration information, the midpoint of the plurality of function views is aligned and / or the height of the plurality of function views is the same, and the width of the function view at the left bit or the right bit is an automatically estimated width or a preset maximum width.

[0082] In the position configuration information, the midpoint of the plurality of function views is aligned and / or the height of the plurality of function views is the same, the height of the page layout view is fixed when the number of lines of the title text is one line, the height of the page layout view is not fixed when the number of lines of the title text is more than one line, the distance between the page layout view and the corresponding adjacent view above or below satisfies an initial adjacent relationship, and the midpoint position of the function view at the middle bit is the same as that of the page layout view.

[0083] In an exemplary embodiment, referring to Figure 4 , Figure 4 is a page diagram for an embodiment of configuring a title control in the present application. In the page diagram, Figure 4 the area S1 is an area of a page layout view, and the page layout view includes three title controls and their title texts. The server regards the page layout view as a parent control and each title control as a child control.

[0084] In some embodiments, the server sets the width of the parent control to be consistent with the screen width, sets the height of the parent control to be a fixed or unfixed line height, and sets the adjacent constraint relationship of the parent control and the neighbor control in the vertical direction according to the layout requirement. For the fixed case, if the business requirement requires that the title can only be represented by one line, the title can be appropriately reduced or simplified in some form, for example, “I am a title of …”, and the line height can be fixed. For the unfixed case, if the business requirement requires that the title can be represented by multiple lines, that is, the title can be wrapped when it cannot be displayed, the line height of the parent control is unfixed.

[0085] In some embodiments, the server sets the constraint of the middle title control among the three title controls to be in the center of the parent control, and sets the constraint in the height, which can be set according to the business requirement, to be that the midpoint height of the left and right title controls and the middle title control is consistent, or that the upper part / lower part of the left and right title controls and the middle title control is aligned.

[0086] In some embodiments, the server first calculates the maximum width of the left and right titles according to the screen width and the width of the middle title, and then sets the width constraint of the left and right titles.

[0087] In a scheme for setting the width constraint of the left and right titles, when the business requirement requires that the title can only be represented in one line, the estimated width of the title is first estimated, and then compared with the maximum width: if the estimated width is less than the maximum width, the title width can be further set to the estimated width; or set to the maximum width; if the estimated width is greater than the maximum width and cannot be wrapped, it is set to the maximum width. When the business requirement requires that the title can be represented in multiple lines, the width of the title can be directly set to the maximum width.

[0088] In another scheme for setting the width constraint of the left and right titles, the width constraint of the title can be set to the maximum width, that is, the width constraint of the title is set to the maximum width, and the alignment of the title control is set as follows: the left title control is set to right alignment; the right title control is set to left alignment.

[0089] In an embodiment, the server configures a plurality of function views based on a preset layout constraint condition and page information of a vehicle-mounted application page to obtain a corresponding layout configuration result, including: when the page layout view is a stackview instance and the touch control is a vehicle control button, configuring the size configuration information and the position configuration information between the page layout view, each function view and the vehicle-mounted application page based on the preset layout constraint condition and the page information of the vehicle-mounted application page.

[0090] The size configuration information includes the width information between each vehicle control button, and the height of the function view is the same as the height of the vehicle control button with the highest height in the vehicle-mounted application page.

[0091] The position configuration information includes the top alignment of each vehicle control button, and the automatic arrangement of each vehicle control button according to the axis attribute, the distribution attribute, the alignment attribute and the spacing attribute of the stackview instance.

[0092] In an exemplary embodiment, refer to Figure 5 , Figure 5 for an embodiment of the page in the present application for configuring vehicle control buttons. Among them, Figure 5 Region A1 in the figure is the area where a page layout view is located, and the page layout view includes five vehicle control buttons and their title texts. Among them, the page layout view is an instance of a UIStackview, which is referred to as a Stack View.

[0093] In some embodiments, the server sets the constraints of the page layout view and each of the control buttons according to the business requirements, including, for example, the axis attribute, the distribution attribute in the axis direction, the alignment attribute in the other direction opposite to the axis direction, the spacing attribute, and the like. For example, the server first copies the five control buttons to the subviews of the UIStackview instance, thereby invoking the addArrangedSubview method of the subviews to add the subviews to the Stack View and automatically arrange the subviews according to the arrangement of the Stack View. The added subviews are arranged according to the axis, distribution, alignment, and the like of the Stack View. Figure 5

[0094] In some embodiments, if the business requirement is that the control buttons are to be wrapped when the text language is long, the server is required to align the top of each control button and keep the entire area and the control button with the highest overall height consistent.

[0095] In one embodiment, the server determines the control button with the highest overall height, which can include, in the case where the width is known, calculating the estimated height of the control button text by using the page function, thereby traversing all the control buttons to obtain the highest control button height, and finally setting the height of the stackview to the highest control button height. This method can be executed at any time before the interface is displayed, for example, in the viewDidLoad, viewWillAppear, and viewDidAppear functions of the page.

[0096] In another embodiment, the server determines the control button with the highest overall height, which can include traversing all the control buttons in the layoutSubViews function of the system to obtain the maximum value of all the control buttons. Because the layoutSubViews function of the system is a function provided to the user after the system has laid out all the automatic constraints and calculated the height of all the views, the height in the function is the accurate height provided by the system. Finally, the height of the stackview is set to the highest control button height.

[0097] Step S13: based on the layout configuration result, applying the page layout view and each of the function views to the in-vehicle application page to realize visual application of the function views.

[0098] In one embodiment, the visual application at least includes displaying, hiding, centering, and switching the text language of the control touch control in the in-vehicle application page.​

[0099] In an embodiment, by controlling the touch control to display or hide in the vehicle application page, so that no matter the text is more or less, or switch between different languages in different countries, the server will automatically adjust the text height and the height of the corresponding control, to ensure that the reminder control height of the vehicle control application is displayed accurately and naturally, and there is no bug.

[0100] In another embodiment, by controlling the touch control to be centered in the vehicle application page, the middle title can always be centered, maintaining good visual effects, while the left and right titles maintain appropriate positions and lengths, avoiding text from exceeding the screen when the left or right is too long.

[0101] In another embodiment, by controlling the touch control to switch the text language in the vehicle application page, the crash point when switching multiple languages in the vehicle application page is solved, and the steps under different settings are strictly regulated according to business needs, achieving the purpose of no crash.

[0102] In an embodiment, the server implements visual application of the function view, including: when the touch control is displayed in the vehicle application page, configuring the display attribute of the function view to be false, and resetting the initial adjacent relationship of the page layout view.

[0103] Taking the function view as a reminder control, when the prompt text needs to be displayed, the server first sets the display attribute of the prompt text to false, indicating that the prompt text is not hidden; then the constraint of its parent control is reset to the initial adjacent relationship.

[0104] In an embodiment, the server implements visual application of the function view, including: when the touch control is hidden in the vehicle application page, configuring the display attribute of the function view to be true, resetting the initial adjacent relationship of the page layout view, and configuring the height of the page layout view in the vehicle application page to be 0 value.

[0105] Taking the function view as a reminder control, when the prompt text needs to be hidden, the server first sets the display attribute of the prompt text to true, indicating that the prompt text is hidden; then the constraint of its parent control is reset to the initial adjacent relationship, and the height of the parent control is set to 0. If the clipsToBounds attribute of the parent control is set to true, the step of setting the display attribute of the prompt text to true is not executed, because it represents that the area of the prompt text is controlled by the parent control.

[0106] In the above-mentioned solution, on one hand, the solution obtains the page layout view created for the vehicle-mounted application page and a plurality of function views arranged in a stack manner in the page layout view, then configures the plurality of function views based on preset layout constraint conditions and page information of the vehicle-mounted application page to obtain corresponding layout configuration results, and finally applies the page layout view and each function view to the vehicle-mounted application page according to the layout configuration results to realize visual application of the function view, thereby optimizing the text element configuration process of the page, effectively improving the efficiency of page element configuration, and reducing the consumption of manpower and material resources. On the other hand, the solution is different from the existing layout configuration manner, and the plurality of touch controls configured with text elements in the page layout view are configured to obtain size configuration information and position configuration information between the page layout view, each function view and the vehicle-mounted application page, and the size configuration information and the position configuration information are used to realize visual application of display, hiding, center alignment and text language switching of the control touch control in the vehicle-mounted application page, thereby flexibly configuring the layout configuration of the plurality of text controls according to the layout constraint conditions and the page information, effectively reducing the maintenance cost of the enterprise for the vehicle-mounted application program, and improving the usability and ease of use of display, hiding, center alignment and text language switching of the plurality of text controls, which is beneficial to the development and application of electric vehicles.

[0107] As can be understood by those skilled in the art, in the above-mentioned method of the specific embodiment, the disclosed method can be implemented in a more specific manner. For example, the above-described embodiment in which the server configures a plurality of function views based on preset layout constraint conditions and page information of a vehicle-mounted application page to obtain corresponding layout configuration results is merely illustrative.

[0108] In an exemplary embodiment, referring to Figure 6 , Figure 6 is a flowchart of an embodiment of obtaining the maximum width of the left and right views in the present application. Before configuring the size configuration information and the position configuration information between the page layout view, each function view and the vehicle-mounted application page, the server can further include the following steps in step S12:

[0109] Step S121: obtaining a first width of the function view with a middle bit position and a fixed value interval between the function views.

[0110] Step S122: calculating a difference between the page width of the vehicle-mounted application page and the first width to obtain a second width of the function view with a left and right bit position.

[0111] Step S123: obtaining a preset maximum width of the function view with a left and right bit position based on the second width and the fixed value interval.

[0112] Specifically, the server calculates the maximum width of the left and right title controls in the page layout view by performing the following steps: ① Obtain the width of the middle title control; ② Calculate the difference between the screen width and the width of the middle title control to obtain the remaining width on the left and right sides; ③ Determine whether the spacing between the title controls is a fixed value or has a minimum spacing (which is also a type of fixed value); ④ Obtain the fixed spacing between the title controls according to the layout requirements; ⑤ Calculate the remaining width on the left and right sides minus the fixed spacing required by the layout to obtain the maximum width of the left and right title controls.

[0113] In an exemplary embodiment, in step S12, the server configures the size configuration information between the page layout view, each functional view, and the vehicle application page, which may specifically include the following steps:

[0114] Step 1: Obtain the minimum preset width for multiple vehicle control buttons, as well as the page width of the in-vehicle application page and the third width of the page layout view.

[0115] Step 2: Calculate the product between the minimum width and the number of multiple vehicle control buttons to obtain the estimated total width for multiple vehicle control buttons; and calculate the difference between the page width of the in-vehicle application page and the third width to obtain the available width for multiple vehicle control buttons.

[0116] Step 3: Based on the relationship between the estimated total width and the available width, determine the final width between multiple vehicle control buttons.

[0117] In an exemplary embodiment, the server calculates the final width between multiple vehicle control buttons, which may include: (1) calculating the available area of ​​the vehicle control buttons based on the difference between the screen width and the distance from the parent view to the left and right sides of the screen; (2) setting the minimum width, minimum gap, normal width, and normal gap of the vehicle control buttons according to business requirements; (3) calculating the available area of ​​the vehicle control buttons based on the minimum width of the vehicle control buttons and the number of vehicle control buttons (e.g., ...). Figure 5 (4) If the estimated total width of the vehicle control button is greater than the available area, the server calculates the final width of the vehicle control button = (available area - minimum gap of vehicle control button × (number - 1)) ÷ number to obtain the final width of the vehicle control button; or, if the estimated total width of the vehicle control button is less than or equal to the available area, the server further calculates: estimated width of the vehicle control button = (available area - normal gap of vehicle control button × (number - 1)) / number to obtain the estimated width of the vehicle control button; further, if the estimated width of the vehicle control button is greater than or equal to the minimum width of the vehicle control button, the final width of the vehicle control button is set to the estimated width of the vehicle control button; if the estimated width of the vehicle control button is less than the minimum width of the vehicle control button, the final width of the vehicle control button is set to the minimum width of the vehicle control button.

[0118] In the case of estimating that the total width of the vehicle control buttons is less than or equal to the available area, it is indicated that the available area is sufficient, the vehicle control buttons can be made as large as possible to make the user clearly see the buttons and comprehensively consider the gap between the vehicle control buttons. The gap is too small and is not good-looking, but priority is given to making the buttons larger. Therefore, the regular gap of the vehicle control buttons can be used first, and if it is found that it is not sufficient, the gap of the vehicle control buttons is adjusted at this time.

[0119] In an embodiment, in step S12, the server configures the size configuration information between the page layout view, each function view and the in-vehicle application page, which can specifically include: based on the number, available width and final width of the plurality of vehicle control buttons, the plurality of vehicle control buttons are arranged at equal intervals with respect to the stackview instance, to obtain the interval between the plurality of vehicle control buttons.

[0120] Specifically, the server can set the attribute of the stackview as the.equalSpacing attribute, that is, the equal interval arrangement, and the interval between the controls is equal.

[0121] In an embodiment, the equal interval arrangement must set the spacing (spacing attribute) of the stackview, otherwise the crash may occur occasionally. The value of the spacing attribute is calculated as: the interval between the vehicle control buttons = (the available area of the vehicle control button - the final width of the vehicle control button x the number) ÷ (the number - 1).

[0122] In an embodiment, as in the example of Figure 5 The width of the 5 vehicle control buttons can be equal or not equal, which is determined by the business requirement. Specifically, the server can set the width of the vehicle control buttons to be equal, and use line breaks to make up for it; or other buttons with longer text can be set to be longer, and buttons with shorter text can be set to be shorter.

[0123] In an embodiment, in step S12, the server configures the size configuration information between the page layout view, each function view and the in-vehicle application page, which can specifically include: based on the number and final width of the plurality of vehicle control buttons, the plurality of vehicle control buttons are arranged by self-filling with respect to the stackview instance, to obtain the actual width of a target button corresponding to the last position in the plurality of vehicle control buttons.

[0124] Specifically, the server can set the attribute of the stackview as the.fill attribute, that is, the vehicle control buttons are set to be self-filled.

[0125] In an embodiment, the server can set the width of each vehicle control button to be the final width of the vehicle control button calculated in the above embodiment.

[0126] In other embodiments, as in the example of Figure 5For example, the server can set the first four car control buttons to the final width, but does not set the width of the fifth car control button, and sets the spacing attribute of the stackview of the fifth car control button to be filled automatically. If the widths of all the five car control buttons are set, it is equivalent to writing all the widths and leaving no room. However, the device is changeable, and from drawing to actually rendering pixels to the screen, the system performs various operations, including scaling and offsetting, which can cause the page to crash. Therefore, one car control button is left without setting its width.

[0127] In an embodiment, in step S12, the server configures the size configuration information between the page layout view, each function view and the in-vehicle application page, which can specifically include: based on the number and available width of the plurality of car control buttons, arranging the plurality of car control buttons in equal width filling with respect to the stackview instance to obtain the actual width between the plurality of car control buttons.

[0128] Specifically, the server can set the attribute of the stackview to the.fillEqually attribute, that is, set the car control buttons to be filled equally.

[0129] In an embodiment, the server can let the stackview equally divide its own area containing the car control buttons, so that it does not need to calculate the estimated width of the car control buttons, and does not need to set the width of the car control buttons separately. However, it has certain limitations, that is, it must regard the car control button and a certain spacing together as a whole.

[0130] In this way, on the one hand, the method can obtain the page layout view created for the vehicle application page and a plurality of function views arranged in a stack manner in the page layout view, perform layout configuration on the plurality of function views based on preset layout constraint conditions and page information of the vehicle application page to obtain a corresponding layout configuration result, and then apply the page layout view and each function view to the vehicle application page according to the layout configuration result to realize visual application of the function view, thereby optimizing the text element configuration process of the page, effectively improving the efficiency of page element configuration, and reducing the consumption of manpower and resources. On the other hand, the method is different from the existing layout configuration method, performs layout configuration on a plurality of touch controls configured with text elements in the page layout view to obtain size configuration information and position configuration information between the page layout view, each function view and the vehicle application page, and realizes visual application of the touch controls in the vehicle application page, such as display, hiding, center alignment and text language switching, thereby flexibly configuring the layout configuration of a plurality of text controls according to the layout constraint conditions and the page information, effectively reducing the maintenance cost of the enterprise for the vehicle application program, improving the usability and ease of use of the display, hiding, center alignment and text language switching of a plurality of text controls, and being beneficial to the development and application of electric vehicles.

[0131] It should be understood that, although Figures 2-6 the steps in the accompanying drawings are displayed in sequence according to the arrows, these steps are not necessarily executed in sequence according to the arrows. Unless otherwise specified herein, the execution of these steps is not strictly limited in sequence, and these steps can be executed in other sequences. Moreover, Figures 2-6 at least part of the steps in the method can include a plurality of steps or a plurality of stages, which are not necessarily executed at the same time, but can be executed at different times, and the execution sequence of these steps or stages is not necessarily sequential, but can be executed alternately or alternately with at least part of other steps or steps or stages in other steps.

[0132] It can be understood that the same / similar parts of each embodiment of the method in the specification can be mutually referred to, and each embodiment focuses on the differences from other embodiments, and the related parts can be referred to the description of other method embodiments.

[0133] Figure 7 is a structural block diagram of a page text element configuration device provided by an embodiment of the present application. Referring to Figure 7 the page text element configuration device 10 includes a view acquisition module 11, a layout configuration module 12 and a view application module 13.

[0134] The view obtaining module 11 is configured to obtain a page layout view created for a vehicle-mounted application page; the page layout view is provided with a plurality of function views arranged in a stack manner, and the function view is a touch control configured with a text element;

[0135] The layout configuration module 12 is configured to perform layout configuration on the plurality of function views based on a preset layout constraint condition and page information of the vehicle-mounted application page, to obtain a corresponding layout configuration result; the layout configuration result is used to indicate size configuration information and position configuration information between the page layout view, each function view and the vehicle-mounted application page.

[0136] The view application module 13 is configured to apply the page layout view and each function view to the vehicle-mounted application page based on the layout configuration result, to realize visual application of the function view; the visual application at least includes display, hiding, center alignment and text language switching of the touch control in the vehicle-mounted application page.

[0137] In an embodiment, in the aspect of performing layout configuration on the plurality of function views to obtain a corresponding layout configuration result, the text element configuration device 10 of the page is further configured to perform:

[0138] When the text element is a prompt text and the touch control is a pointing arrow, the size configuration information and the position configuration information between the page layout view, each function view and the vehicle-mounted application page are configured based on a preset layout constraint condition and page information of the vehicle-mounted application page.

[0139] The size configuration information includes that a line break attribute value of the prompt text in the function view is a preset value, and the width and height of the prompt text and the function view in the vehicle-mounted application page are the same.

[0140] The position configuration information includes that a distance between the page layout view and a corresponding adjacent view above or below satisfies an initial close relationship, a distance between the page layout view and left and right edges of the vehicle-mounted application page satisfies an initial close relationship, and a distance between the prompt text, the pointing arrow and the page layout view satisfies an initial close relationship; the initial close relationship represents that a distance between two page elements is a preset initial distance.

[0141] In an embodiment, in the aspect of applying the page layout view and each function view to the vehicle-mounted application page to realize visual application of the function view, the text element configuration device 10 of the page is further configured to perform:

[0142] configuring the display attribute of the function view as false, and resetting the initial adjacent relationship of the page layout view when controlling the touch control to be displayed in the in-vehicle application page;

[0143] configuring the display attribute of the function view as true, resetting the initial adjacent relationship of the page layout view, and configuring the height of the page layout view in the in-vehicle application page as 0 when controlling the touch control to be hidden in the in-vehicle application page.

[0144] In an embodiment, in the aspect of configuring the plurality of function views to obtain the corresponding layout configuration result, the text element configuration apparatus 10 of the page is further configured to perform:

[0145] when the text element is a title text and the number of the plurality of function views is odd, configuring the size configuration information and the position configuration information between the page layout view, each of the function views and the in-vehicle application page based on the preset layout constraint condition and the page information of the in-vehicle application page;

[0146] wherein the size configuration information comprises midpoint alignment and / or same height of the plurality of function views, and the width of the function view at the left and right sides is an automatically estimated width or a preset maximum width;

[0147] the position configuration information comprises midpoint alignment and / or same height of the plurality of function views, the height of the page layout view is fixed when the number of lines of the title text is one, the height of the page layout view is not fixed when the number of lines of the title text is more than one, the distance between the page layout view and the corresponding adjacent view above and below satisfies the initial adjacent relationship, and the midpoint position of the function view at the middle is the same as the page layout view.

[0148] In an embodiment, before the configuration of the size configuration information and the position configuration information between the page layout view, each of the function views and the in-vehicle application page, the text element configuration apparatus 10 of the page is further configured to perform:

[0149] obtaining a first width of the function view at the middle and a fixed value interval between each of the function views;

[0150] calculating the difference between the page width of the in-vehicle application page and the first width to obtain a second width of the function view at the left and right sides;

[0151] obtaining a preset maximum width of the function view at the left and right sides based on the second width and the fixed value interval.

[0152] In an embodiment, in the aspect of configuring the layout of the plurality of function views to obtain a corresponding layout configuration result, the text element configuration apparatus 10 for a page is further configured to perform:

[0153] In the aspect of configuring the size configuration information between the page layout view, each function view and the in-vehicle application page, when the page layout view is a stackview instance and the touch control button is a car control button, the text element configuration apparatus 10 for a page is further configured to perform:

[0154] In the aspect of configuring the size configuration information between the page layout view, each function view and the in-vehicle application page, when the page layout view is a stackview instance and the touch control button is a car control button, the text element configuration apparatus 10 for a page is further configured to perform:

[0155] In the aspect of configuring the size configuration information between the page layout view, each function view and the in-vehicle application page, when the page layout view is a stackview instance and the touch control button is a car control button, the text element configuration apparatus 10 for a page is further configured to perform:

[0156] In an embodiment, in the aspect of configuring the size configuration information between the page layout view, each function view and the in-vehicle application page, the text element configuration apparatus 10 for a page is further configured to perform:

[0157] In the aspect of configuring the size configuration information between the page layout view, each function view and the in-vehicle application page, the text element configuration apparatus 10 for a page is further configured to perform:

[0158] In the aspect of configuring the size configuration information between the page layout view, each function view and the in-vehicle application page, the text element configuration apparatus 10 for a page is further configured to perform:

[0159] In the aspect of configuring the size configuration information between the page layout view, each function view and the in-vehicle application page, the text element configuration apparatus 10 for a page is further configured to perform:

[0160] In an embodiment, in the aspect of configuring the size configuration information between the page layout view, each function view and the in-vehicle application page, the text element configuration apparatus 10 for a page is further configured to perform:

[0161] In the aspect of configuring the size configuration information between the page layout view, each function view and the in-vehicle application page, the text element configuration apparatus 10 for a page is further configured to perform:

[0162] based on the number of the plurality of the vehicle control buttons and the final width, performing self-populated arrangement of the plurality of the vehicle control buttons with respect to the stackview instance to obtain an actual width of a target button corresponding to a last position in the plurality of the vehicle control buttons; and

[0163] based on the number of the plurality of the vehicle control buttons and the available width, performing equal-width populated arrangement of the plurality of the vehicle control buttons with respect to the stackview instance to obtain an actual width between the plurality of the vehicle control buttons.

[0164] Figure 8 is a block diagram of an electric vehicle provided by an embodiment of the present application. Referring to Figure 8 , the electric vehicle includes a processor, a memory, an input / output interface (I / O) and a communication interface. Among them, the processor, the memory and the input / output interface are connected through a system bus, and the communication interface is connected to the system bus through the input / output interface. Among them, the processor of the electric vehicle is used to provide computing and control capability. The memory of the electric vehicle includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program and a database. The internal memory provides an environment for the operating system and the computer program in the non-volatile storage medium to run. The database of the electric vehicle is used to store the mileage maintenance data of the electric vehicle. The input / output interface of the electric vehicle is used to exchange information between the processor and external devices. The communication interface of the electric vehicle is used to communicate with external terminals through network connection. The computer program is executed by the processor to implement the text element configuration method of the page as described above.

[0165] In some embodiments, the electric vehicle is an electronic device, and a computing system in the electronic device can run one or more operating systems, including any of the operating systems discussed above and any commercially available server operating system. The electric vehicle can also run any of a variety of additional server applications and / or middleware applications, including HTTP (HyperText Transfer Protocol) servers, FTP (File Transfer Protocol) servers, CGI (Common Gateway Interface) servers, hyper servers, database servers, etc. Exemplary database servers include, but are not limited to, database servers commercially available from International Business Machines (IBM), etc.

[0166] In some embodiments, the processor generally controls the overall operation of the electric vehicle, such as operations associated with display, data processing, data communication, and recording operations. The processor can include one or more processor components to execute computer programs to complete all or part of the steps of the methods described above. In addition, the processor component can include one or more modules to facilitate interaction between the processor component and other components. For example, the processor component can include a multimedia module to facilitate interaction between the user electric vehicle and the processor using the multimedia component.

[0167] The computer readable storage medium provided by the embodiments of the present application. The computer readable storage medium stores a computer program, wherein the computer program is executed by a processor to implement the text element configuration method of the page as described above.

[0168] The functional units integrated in the units in various embodiments of the present application, if realized in the form of software functional units and sold or used as independent products, can be stored in a computer readable storage medium. Based on such understanding, the technical solutions of the present application essentially or say the parts that make contributions to the prior art or all or part of the technical solutions can be embodied in the form of a software product. The computer readable storage medium in a computer program includes a plurality of instructions to make a computer device (which can be a personal computer, a system server, or a network device, etc.), an electronic device (such as MP3, MP4, etc., which can also be a mobile phone, a tablet computer, a wearable device, etc. Smart terminal, or desktop computer, etc.) or processor (processor) to execute all or part of the steps of the various embodiments of the method of the present application.

[0169] The computer program product provided by the embodiments of the present application. The computer program product includes program instructions, which can be executed by the processor of the electric vehicle to implement the text element configuration method of the page as described above.

[0170] Those skilled in the art should understand that the embodiments of the present application can provide a text element configuration method of a page, a text element configuration device of a page, an electric vehicle, a computer readable storage medium or a computer program product. Therefore, the present application can adopt a completely hardware embodiment, a completely software embodiment or an embodiment combining software and hardware aspects. Moreover, the present application can adopt the form of a computer program product implemented on one or more computer program instructions (including but not limited to disk memory, CD-ROM, optical memory, etc.) containing computer usable program code.

[0171] The computer program product can be a storage medium or communication medium storing instructions that can be executed by one or more processors to cause the steps of the methods described herein to be performed. The computer program product can be a non-transitory computer readable medium storing the program instructions. The computer program product can also be a computer readable medium that is part of a device or device that is operable to perform the methods described herein. The computer program product can also be a memory that is part of a device or device that is operable to perform the methods described herein. Figure 1 one or more processes and / or blocks to perform a function described in connection with the flow Figure 1 one or more processes and / or blocks to perform a function described in connection with the flow

[0172] The computer program product can also be a computer readable medium that can be part of a device or device that is operable to perform the methods described herein. The computer program product can also be a memory that is part of a device or device that is operable to perform the methods described herein. Figure 1 one or more processes and / or blocks to perform a function described in connection with the flow Figure 1 one or more processes and / or blocks to perform a function described in connection with the flow

[0173] The computer program product can also be a computer readable medium that can be part of a device or device that is operable to perform the methods described herein. The computer program product can also be a memory that is part of a device or device that is operable to perform the methods described herein. Figure 1 one or more processes and / or blocks to perform a function described in connection with the flow Figure 1 one or more processes and / or blocks to perform a function described in connection with the flow

[0174] It should be noted that the various methods described above, apparatuses, electronic devices, computer readable storage media, computer program products, etc. can also include other implementations not expressly described above. The implementations described above are merely exemplary and can be adapted in various ways. The true scope and spirit of the disclosure is indicated by the appended claims.

[0175] Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the features of the disclosure disclosed herein. It is intended that the specification and examples be considered as exemplary only, with the true scope and spirit of the disclosure being indicated by the following claims.

[0176] It should be understood that the present disclosure is not limited to the precise construction that has been described above and shown in the accompanying drawings, and that various modifications and changes can be made by those skilled in the art without departing from the scope of the present disclosure. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A method for configuring text elements on a webpage, characterized in that, The method includes: Obtain a page layout view created for the in-vehicle application page; the page layout view contains multiple function views arranged in a stacked manner, and the function views are touch controls configured with text elements; Based on preset layout constraints and page information of the in-vehicle application page, the layout of multiple functional views is configured to obtain corresponding layout configuration results; the layout configuration results are used to indicate the size configuration information and position configuration information between the page layout view, each of the functional views and the in-vehicle application page. Based on the layout configuration result, the page layout view and each of the functional views are applied to the vehicle application page to realize the visual application of the functional views; the visual application includes at least controlling the touch controls to display, hide, center align and switch text language on the vehicle application page; The step of configuring the layout of multiple functional views to obtain the corresponding layout configuration result includes: when the page layout view is a StackView instance and the touch control is a vehicle control button, the size configuration information includes the width information between each vehicle control button, and the functional view and the corresponding tallest vehicle control button are at the same height in the vehicle application page; the position configuration information includes the top alignment of each vehicle control button, and the automatic arrangement of each vehicle control button according to the axis, distribution, alignment and spacing attributes of the StackView instance.

2. The method according to claim 1, characterized in that, The step of configuring the layout of multiple functional views to obtain the corresponding layout configuration results includes: When the text element is a prompt text and the touch control is a pointing arrow, based on the preset layout constraints and the page information of the vehicle application page, configure the size configuration information and position configuration information between the page layout view, each of the functional views and the vehicle application page; The size configuration information includes that the line break attribute value of the prompt text in the function view is a preset value, and that the width and height of the prompt text and the function view are the same in the vehicle application page; The location configuration information includes the following: the distance between the page layout view and its corresponding top and bottom adjacent views satisfies the initial close proximity relationship; the distance between the page layout view and the left and right edges of the vehicle application page satisfies the initial close proximity relationship; and the distance between the prompt text, the pointing arrow, and the page layout view satisfies the initial close proximity relationship. The initial close proximity relationship indicates that the distance between the two page elements is a preset initial distance.

3. The method according to claim 2, characterized in that, The step of applying the page layout view and each of the functional views to the in-vehicle application page to achieve the visual application of the functional views includes: When controlling the touch control to be displayed on the in-vehicle application page, configure the display property of the function view to false, and reset the initial adjacent relationship of the page layout view; When the touch control is hidden in the vehicle application page, the display property of the function view is configured to true, the initial adjacent relationship of the page layout view is reset, and the height of the page layout view in the vehicle application page is configured to 0.

4. The method according to claim 1, characterized in that, The step of configuring the layout of multiple functional views to obtain the corresponding layout configuration results includes: When the text element is title text and the number of multiple functional views is odd, based on preset layout constraints and the page information of the vehicle application page, configure the size configuration information and position configuration information between the page layout view, each of the functional views and the vehicle application page; The size configuration information includes the alignment of the midpoints of multiple functional views and / or the same height, and the width of the functional views located on the left and right sides is either an automatically estimated width or a preset maximum width. The position configuration information includes the center point alignment and / or the same height of multiple functional views; the height of the page layout view is fixed when the number of lines of the title text is one line; the height of the page layout view is not fixed when the number of lines of the title text is multiple lines; the distance between the page layout view and its corresponding upper and lower adjacent views satisfies the initial close proximity relationship; and the center point position of the functional view in the middle position is the same as that of the page layout view.

5. The method according to claim 4, characterized in that, Before configuring the size and position configuration information between the page layout view, each of the functional views, and the in-vehicle application page, the following is also included: Obtain the first width of the functional view that is in the middle position, and the fixed spacing between each of the functional views; Calculate the difference between the page width of the in-vehicle application page and the first width to obtain the second width of the functional views located on the left and right sides; Based on the second width and the fixed spacing, the preset maximum width of the functional views located on the left and right sides is obtained.

6. The method according to claim 1, characterized in that, The configuration of the page layout view, the various functional views, and the size configuration information between the in-vehicle application page includes: Obtain the minimum width preset for the multiple vehicle control buttons, the page width of the in-vehicle application page, and the third width of the page layout view; Calculate the product between the minimum width and the number of the multiple vehicle control buttons to obtain the estimated total width for the multiple vehicle control buttons; and calculate the difference between the page width of the in-vehicle application page and the third width to obtain the available width for the multiple vehicle control buttons. Based on the relationship between the estimated total width and the available width, the final width between the multiple vehicle control buttons is determined.

7. A text element configuration device for a page, characterized in that, The device includes: The view acquisition module is used to acquire the page layout view created for the in-vehicle application page; the page layout view has multiple function views arranged in a stacked manner, and the function views are touch controls configured with text elements; The layout configuration module is used to configure the layout of multiple functional views based on preset layout constraints and page information of the vehicle application page, and obtain the corresponding layout configuration results; the layout configuration results are used to indicate the size configuration information and position configuration information between the page layout view, each of the functional views and the vehicle application page. The view application module is used to apply the page layout view and each of the functional views to the vehicle application page based on the layout configuration result, so as to realize the visual application of the functional views; the visual application includes at least controlling the touch controls to display, hide, center align and switch text language on the vehicle application page; The text element configuration device for the page is further configured to, when the page layout view is a StackView instance and the touch control is a vehicle control button, configure the size configuration information and position configuration information between the page layout view, each of the functional views, and the vehicle application page based on preset layout constraints and the page information of the vehicle application page; wherein, the size configuration information includes the width information between each of the vehicle control buttons, and the height of the functional view and the corresponding tallest vehicle control button in the vehicle application page is the same; the position configuration information includes the top alignment of each of the vehicle control buttons, and the automatic arrangement of each of the vehicle control buttons according to the axis attribute, distribution attribute, alignment attribute, and spacing attribute of the StackView instance.

8. An electric vehicle, characterized in that, The electric vehicle includes a processor and a memory connected to the processor, wherein the memory stores program data, and the processor is used to retrieve the program data stored in the memory to execute the method as described in any one of claims 1-6.

9. A computer-readable storage medium internally storing program instructions, characterized in that, When the program instructions are executed by the processor, they implement the method as described in any one of claims 1-6.

10. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the method of any one of claims 1-6.

Citation Information

Patent Citations

  • Multi-page sliding implementation method and device, electronic equipment and storage medium

    CN116627414A