Interface display method and device

Abstract

The invention relates to an interface display method and device, and relates to the technical field of computers. Configuration parameters of to-be-displayed subitems and display sizes of display areas corresponding to the to-be-displayed subitems are obtained; determining a layout strategy corresponding to the display area based on the configuration parameters of the to-be-displayed subitem and the display size of the display area; and displaying the to-be-displayed subitems in the display area based on the layout strategy. According to the configuration parameters of the to-be-displayed subitem and the display size of the display area, the appropriate layout strategy is dynamically selected, the method can adapt to changes of different screen sizes and container sizes, the user interface can be self-adaptive in various environments and keep a good display effect, and visual continuity is guaranteed.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to a method and device for displaying an interface. Background Art

[0002] The user interface needs to consider many factors, such as display device size, display content length, and text language, to ensure that the UI content is displayed correctly on various devices. A common method is to set breakpoints based on the horizontal screen size and design a corresponding layout method. When judging the screen width of the current device in real time, switch to the appropriate layout method to achieve correct display in different environments. However, this method can only be completed by summarizing the known device size widths and cannot cope with unknown screen sizes. Summary of the invention

[0003] The present disclosure provides an interface display method and device to at least solve the layout problem of user interface content in a scenario where the container size changes dynamically. The technical solution of the present disclosure is as follows:

[0004] According to a first aspect of an embodiment of the present disclosure, a method for displaying an interface is provided, comprising: obtaining configuration parameters of a sub-item to be displayed, and a display size of a display area corresponding to the sub-item to be displayed; determining a layout strategy corresponding to the display area based on the configuration parameters of the sub-item to be displayed and the display size of the display area; and displaying the sub-item to be displayed in the display area based on the layout strategy.

[0005] In some embodiments, based on the configuration parameters of the sub-items to be displayed and the display size of the display area, a layout strategy corresponding to the display area is determined, including: obtaining the real-time width of the window of the display area; based on the real-time width of the window, combined with the configuration parameters of the sub-items to be displayed, determining whether all the sub-items to be displayed can be completely displayed in the display area; if it is monitored that the real-time width of the window is less than or equal to a preset width threshold, and it is determined that all the sub-items to be displayed can be completely displayed in the display area, it is determined that the display area corresponds to the first layout strategy; if it is monitored that the real-time width of the window is greater than the width threshold, and it is determined that all the sub-items to be displayed can be completely displayed in the display area, it is determined that the display area corresponds to the second layout strategy; if it is determined that all the sub-items to be displayed cannot be completely displayed in the display area, it is determined that the display area corresponds to the sliding window layout strategy.

[0006] In some embodiments, determining that a display area corresponds to a first layout strategy, and displaying sub-items to be displayed in the display area based on the layout strategy, includes: obtaining the sum of sub-item interval widths corresponding to each sub-item to be displayed located in the display area based on configuration parameters of the sub-items to be displayed, and obtaining the total number of sub-items located in the display area; obtaining the difference between the real-time width of the window and the sum of the sub-item interval widths, and using the difference as the total available width of the sub-items; judging whether the minimum widths of the sub-items corresponding to each sub-item to be displayed are the same; and displaying the sub-items to be displayed in the display area based on the judgment result and the total available width of the sub-items, the minimum width of the sub-items corresponding to each sub-item to be displayed, and the total number of sub-items.

[0007] In some embodiments, according to the judgment result, the sub-items to be displayed are displayed in the display area based on the total available width of the sub-items, the minimum width of the sub-items corresponding to each sub-item to be displayed, and the total number of sub-items, including: if the judgment result indicates that the minimum width of the sub-items corresponding to each sub-item to be displayed is the same, then the total available width of the sub-items is evenly divided based on the total number of sub-items, and the width obtained after the even division is used as the sub-item width corresponding to each sub-item to be displayed; the sub-items to be displayed are displayed in the display area based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed.

[0008] In some embodiments, according to the judgment result, the sub-items to be displayed are displayed in the display area based on the total available width of the sub-items, the minimum width of the sub-items corresponding to each sub-item to be displayed, and the total number of sub-items, including: if the judgment result indicates that the minimum width of the sub-items corresponding to each sub-item to be displayed is different, then based on the minimum width of the sub-items corresponding to each sub-item to be displayed, the total available width of the sub-items is non-uniformly divided to obtain the sub-item width corresponding to each sub-item to be displayed; based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed, the sub-items to be displayed are displayed in the display area.

[0009] In some embodiments, the total available width of the sub-items is non-uniformly divided based on the minimum width of the sub-items corresponding to each sub-item to be displayed, and the sub-item width corresponding to each sub-item to be displayed is obtained, including: obtaining the ratio of the total available width of the sub-items to the total number of sub-items as a first ratio; for any sub-item to be displayed, comparing the minimum width of the sub-item corresponding to the sub-item to be displayed with the first ratio, if the minimum width of the sub-item corresponding to the sub-item to be displayed is greater than the first ratio, using the minimum width of the sub-item corresponding to the sub-item to be displayed as the sub-item width corresponding to the sub-item to be displayed; obtaining the sub-item widths corresponding to all sub-items to be displayed whose minimum widths are greater than the first ratio; The sum of the widths of the remaining items and the minimum width of the items are calculated, and the difference between the total width of the sub-items and the sum of the widths is obtained as the available width of the remaining sub-items; the sub-items to be displayed whose minimum width is less than or equal to the first ratio are taken as the remaining sub-items to be displayed, and the number of the remaining sub-items to be displayed is obtained as the number of the remaining sub-items to be displayed; the ratio of the available width of the remaining sub-items and the number of the remaining sub-items to be displayed is obtained as the second ratio; for any remaining sub-items to be displayed, the sub-item minimum width corresponding to the remaining sub-item to be displayed is compared with the second ratio; if the sub-item minimum width of each remaining sub-item to be displayed is less than the second ratio, the second ratio is used as the sub-item width corresponding to each remaining sub-item to be displayed.

[0010] In some embodiments, if it is determined that the display area corresponds to the second layout strategy, sub-items to be displayed are displayed in the display area based on the layout strategy, including: using the minimum sub-item width corresponding to each sub-item to be displayed in the display area as the sub-item width corresponding to the sub-item to be displayed; and horizontally centering the sub-items to be displayed based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed.

[0011] In some embodiments, if it is determined that the display area corresponds to a sliding window layout strategy, the sub-items to be displayed are displayed in the display area based on the layout strategy, including: using the minimum width of the sub-items corresponding to each sub-item to be displayed as the sub-item width corresponding to the sub-item to be displayed; displaying the sub-items to be displayed in the display area based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed; wherein, when a user's sliding instruction is detected, the sub-items to be displayed are determined according to the sliding instruction and displayed.

[0012] In some embodiments, the sub-items to be displayed are displayed in the display area based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed, including: displaying the sub-items to be displayed horizontally left-aligned in the display area based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed.

[0013] According to a second aspect of an embodiment of the present disclosure, there is provided a display device for an interface, comprising: an acquisition module for acquiring configuration parameters of a sub-item to be displayed and a display size of a display area corresponding to the sub-item to be displayed; a determination module for determining a layout strategy corresponding to the display area based on the configuration parameters of the sub-item to be displayed and the display size of the display area; and a display module for displaying the sub-item to be displayed in the display area based on the layout strategy.

[0014] In some embodiments, the determination module is also used to: obtain the real-time width of the window of the display area; based on the real-time width of the window, combined with the configuration parameters of the sub-items to be displayed, determine whether all the sub-items to be displayed can be completely displayed in the display area; if the real-time width of the window is monitored to be less than or equal to the preset width threshold, and it is determined that all the sub-items to be displayed can be completely displayed in the display area, then it is determined that the display area corresponds to the first layout strategy; if the real-time width of the window is monitored to be greater than the width threshold, and it is determined that all the sub-items to be displayed can be completely displayed in the display area, then it is determined that the display area corresponds to the second layout strategy; if it is determined that all the sub-items to be displayed cannot be completely displayed in the display area, then it is determined that the display area corresponds to the sliding window layout strategy.

[0015] In some embodiments, if it is determined that the display area corresponds to the first layout strategy, the display module is further used to: obtain the sum of the sub-item interval widths corresponding to each sub-item to be displayed in the display area based on the configuration parameters of the sub-items to be displayed, and obtain the total number of sub-items in the display area; obtain the difference between the real-time width of the window and the sum of the sub-item interval widths, and use the difference as the total available width of the sub-items; determine whether the minimum widths of the sub-items corresponding to each sub-item to be displayed are the same; and display the sub-items to be displayed in the display area based on the determination result and the total available width of the sub-items, the minimum width of the sub-items corresponding to each sub-item to be displayed, and the total number of sub-items.

[0016] In some embodiments, if it is determined that the display area corresponds to the first layout strategy, the display module is also used to: if the judgment result indicates that the minimum widths of the sub-items corresponding to each sub-item to be displayed are the same, then the total available width of the sub-items is evenly divided based on the total number of sub-items, and the width obtained after the even division is used as the sub-item width corresponding to each sub-item to be displayed; based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed, the sub-items to be displayed are displayed in the display area.

[0017] In some embodiments, if it is determined that the display area corresponds to the first layout strategy, the display module is also used to: if the judgment result indicates that the minimum widths of the sub-items corresponding to each sub-item to be displayed are different, then based on the minimum width of the sub-items corresponding to each sub-item to be displayed, the total available width of the sub-items is non-uniformly divided to obtain the sub-item width corresponding to each sub-item to be displayed; based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed, display the sub-items to be displayed in the display area.

[0018] In some embodiments, if it is determined that the display area corresponds to the first layout strategy, the display module is further used to: obtain the ratio of the total available width of the sub-items to the total number of sub-items as the first ratio; for any sub-item to be displayed, compare the minimum width of the sub-item corresponding to the sub-item to be displayed with the first ratio; if the minimum width of the sub-item corresponding to the sub-item to be displayed is greater than the first ratio, use the minimum width of the sub-item corresponding to the sub-item to be displayed as the sub-item width corresponding to the sub-item to be displayed; obtain the sum of the minimum widths of the sub-items corresponding to all the sub-items to be displayed whose minimum widths are greater than the first ratio, and obtain the total number of sub-items. The difference between the width and the sum of the widths is used as the available width of the remaining sub-items; the sub-items to be displayed whose minimum width is less than or equal to the first ratio are used as the remaining sub-items to be displayed, and the number of the remaining sub-items to be displayed is obtained as the number of the remaining sub-items to be displayed; the ratio of the available width of the remaining sub-items to the number of the remaining sub-items to be displayed is obtained as the second ratio; for any remaining sub-items to be displayed, the minimum sub-item width corresponding to the remaining sub-item to be displayed is compared with the second ratio; if the minimum sub-item width of each remaining sub-item to be displayed is less than the second ratio, the second ratio is used as the sub-item width corresponding to each remaining sub-item to be displayed.

[0019] In some embodiments, if it is determined that the display area corresponds to the second layout strategy, the display module is also used to: use the minimum sub-item width corresponding to each sub-item to be displayed in the display area as the sub-item width corresponding to the sub-item to be displayed; and horizontally center the sub-items to be displayed based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed.

[0020] In some embodiments, if it is determined that the display area corresponds to a sliding window layout strategy, the display module is also used to: use the minimum width of the sub-item corresponding to each sub-item to be displayed as the sub-item width corresponding to the sub-item to be displayed; display the sub-items to be displayed in the display area based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed; wherein, when a user's sliding instruction is detected, the sub-item to be displayed is determined according to the sliding instruction and the sub-item to be displayed is displayed.

[0021] In some embodiments, if it is determined that the display area corresponds to the first layout strategy, the display module is further used to: display the sub-items to be displayed horizontally left in the display area based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed.

[0022] According to the third aspect of an embodiment of the present disclosure, an electronic device is proposed, comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to implement a method for displaying an interface as in the embodiment of the first aspect of the present application.

[0023] According to a fourth aspect of an embodiment of the present disclosure, a non-transitory computer-readable storage medium storing computer instructions is proposed, wherein the computer instructions are used to implement the method for displaying an interface as described in the embodiment of the first aspect of the present application.

[0024] According to a fifth aspect of an embodiment of the present disclosure, a computer program product is proposed, including a computer program, which, when executed by a processor, implements the method for displaying an interface as described in the embodiment of the first aspect of the present application.

[0025] The technical solution provided by the embodiments of the present disclosure brings at least the following beneficial effects:

[0026] This application dynamically selects a suitable layout strategy based on the configuration parameters of the sub-items to be displayed and the display size of the display area, and can adapt to changes in different screen sizes and container sizes, so that the user interface can adapt to various environments and maintain good display effects to ensure visual continuity.

[0027] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0028] The drawings herein are incorporated into and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the description are used to explain the principles of the present disclosure, and do not constitute improper limitations on the present disclosure.

[0029] Figure 1 It is a schematic diagram of an exemplary implementation of a method for displaying an interface shown in the present application.

[0030] Figure 2 It is a schematic diagram of an exemplary implementation of a method for displaying an interface shown in the present application.

[0031] Figure 3 It is a schematic diagram of a sliding window layout shown in this application.

[0032] Figure 4 This is a flow chart of displaying sub-items to be displayed in a display area based on a first layout strategy if it is determined that the display area corresponds to the first layout strategy, as shown in the present application.

[0033] Figure 5 This is a schematic diagram of the present application showing a horizontal left-aligned layout using the width obtained after equal division as the sub-item width corresponding to each sub-item to be displayed.

[0034] FIG6( a ) is a schematic diagram of a non-uniform partitioning layout shown in the present application.

[0035] FIG6( b ) is a schematic diagram of a non-uniform partitioning layout shown in the present application.

[0036] FIG. 7( a ) is a schematic diagram of horizontally centering a sub-item to be displayed when the sub-items are of uniform lengths, as shown in the present application.

[0037] FIG. 7( b ) is a schematic diagram of horizontally centering two sub-items to be displayed when the sub-items have uniform lengths, as shown in the present application.

[0038] FIG. 7( c ) is a schematic diagram of horizontally centering three sub-items to be displayed when the sub-items are of uniform lengths, as shown in the present application.

[0039] FIG. 7( d ) is a schematic diagram of horizontally centering four sub-items to be displayed when the sub-items are of uniform lengths as shown in the present application.

[0040] FIG. 7( e ) is a schematic diagram of horizontally centering 5 sub-items to be displayed when the sub-items are of uniform lengths, as shown in the present application.

[0041] FIG. 7( f ) is a schematic diagram of horizontally centering sub-items to be displayed when the lengths of the sub-items are uneven, as shown in the present application.

[0042] Figure 8 It is a schematic diagram of a display device of an interface shown in the present application.

[0043] Fig. 9 It is a block diagram of an electronic device according to an exemplary embodiment. DETAILED DESCRIPTION

[0044] In order to enable ordinary persons in the art to better understand the technical solutions of the present disclosure, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the accompanying drawings.

[0045] It should be noted that the terms "first", "second", etc. in the specification and claims of the present disclosure and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present disclosure described herein can be implemented in an order other than those illustrated or described herein. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present disclosure. Instead, they are merely examples of devices and methods consistent with some aspects of the present disclosure as detailed in the appended claims.

[0046] Figure 1 is a schematic diagram of an exemplary implementation of a method for displaying an interface shown in the present application, such as Figure 1 As shown, the method for displaying the interface includes the following steps:

[0047] S101, obtaining configuration parameters of a sub-item to be displayed and a display size of a display area corresponding to the sub-item to be displayed.

[0048] The configuration parameters of the sub-items to be displayed are obtained from a configuration file, a database or other data source, wherein the configuration parameters include a minimum sub-item width and a sub-item interval width corresponding to each sub-item to be displayed.

[0049] The display size of the display area corresponding to the sub-item to be displayed is obtained. Optionally, an appropriate technology (such as JavaScript monitoring window size changes) can be used to obtain and update the display size of the display area.

[0050] S102: Determine a layout strategy corresponding to the display area based on configuration parameters of the sub-items to be displayed and the display size of the display area.

[0051] Optionally, if all the sub-items to be displayed cannot be completely displayed in the display area, a sliding window layout strategy is executed for the sub-items to be displayed.

[0052] Optionally, if all the sub-items to be displayed can be completely displayed in the display area, a loose layout or a compact layout can be performed on the sub-items to be displayed according to actual conditions.

[0053] S103: Display the sub-items to be displayed in the display area based on the layout strategy.

[0054] This application dynamically selects the appropriate layout strategy based on the configuration parameters of the sub-items to be displayed and the display size of the display area, and can adapt to changes in different screen sizes and container sizes, so that the user interface can adapt to various environments and maintain good display effects to ensure visual continuity.

[0055] Figure 2is a schematic diagram of an exemplary implementation of a method for displaying an interface shown in the present application, such as Figure 2 As shown, the method for displaying the interface includes the following steps:

[0056] S201, obtaining configuration parameters of a sub-item to be displayed and a display size of a display area corresponding to the sub-item to be displayed.

[0057] The configuration parameters of the sub-items to be displayed are obtained from a configuration file, a database or other data source, wherein the configuration parameters include a minimum sub-item width and a sub-item interval width corresponding to each sub-item to be displayed.

[0058] The display size of the display area corresponding to the sub-item to be displayed is obtained. Optionally, an appropriate technology (such as JavaScript monitoring window size changes) can be used to obtain and update the display size of the display area.

[0059] S202, obtaining the real-time width of the window in the display area.

[0060] Since the display size of the display area includes the window width information, that is, the real-time width of the window of the display area can be acquired based on the display size of the display area.

[0061] S203: Based on the real-time width of the window and in combination with the configuration parameters of the sub-items to be displayed, it is determined whether all the sub-items to be displayed can be completely displayed in the display area.

[0062] According to the real-time width of the window, combined with the minimum width of each sub-item to be displayed and the interval width between sub-items, the total width required for all sub-items to be displayed can be calculated in theory. Then, it is compared with the real-time width of the window in the display area to determine whether the display area can accommodate all sub-items to be displayed.

[0063] If the total width of all sub-items to be displayed is less than or equal to the real-time width of the window in the display area, it means that all sub-items to be displayed can be fully displayed in the display area.

[0064] S204: If it is monitored that the real-time width of the window is less than or equal to the preset width threshold, and it is determined that all sub-items to be displayed can be fully displayed in the display area, it is determined that the display area corresponds to the first layout strategy.

[0065] The first layout strategy is usually a compact layout strategy, which aims to maximize the use of available space in the container so that the sub-items to be displayed are arranged as densely as possible in the container.

[0066] S205: If it is monitored that the real-time width of the window is greater than the width threshold, and it is determined that all sub-items to be displayed can be fully displayed in the display area, it is determined that the display area corresponds to the second layout strategy.

[0067] The second layout strategy is usually a loose layout strategy, which can maintain the balance of the overall screen when there is sufficient space in the container, and avoid overcrowding of the sub-items to be displayed.

[0068] S206: If it is determined that all the sub-items to be displayed cannot be completely displayed in the display area, determine a sliding window layout strategy corresponding to the display area.

[0069] The minimum width of the sub-item corresponding to each sub-item to be displayed is used as the sub-item width corresponding to the sub-item to be displayed; the sub-item to be displayed is displayed in the display area based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed; wherein, when a user's sliding instruction is detected, the sub-item to be displayed is determined according to the sliding instruction and the sub-item to be displayed is displayed.

[0070] Among them, the sliding window layout strategy can display more sub-item contents to be displayed in a limited display area, and allow users to browse the sub-items to be displayed through sliding operations. Figure 3 is a schematic diagram of a sliding window layout shown in this application, such as Figure 3 As shown, if it is determined that all the sub-items to be displayed cannot be fully displayed in the display area, a sliding window layout strategy is executed on the sub-items to be displayed so that the user can view the contents of all the sub-items to be displayed by scrolling or dragging.

[0071] S207: Display the sub-items to be displayed in the display area based on the layout strategy.

[0072] The embodiment of the present application dynamically selects a suitable layout strategy according to the change of the real-time width of the window, and can adapt to the changes of different screen sizes and container sizes, so that the user interface can adapt to various environments and maintain a good display effect to ensure visual continuity. When all sub-items cannot be fully displayed in the display area, a sliding window layout strategy is adopted to allow the user to view all contents by sliding, ensuring that all information can be accessed.

[0073] Figure 4 This application shows a flow chart of displaying sub-items to be displayed in the display area based on the layout strategy if it is determined that the display area corresponds to the first layout strategy, such as Figure 4 As shown, if it is determined that the display area corresponds to the first layout strategy, based on the layout strategy, the sub-items to be displayed are displayed in the display area, including the following steps:

[0074] S401, based on the configuration parameters of the sub-items to be displayed, obtaining the sum of the sub-item interval widths corresponding to each sub-item to be displayed in the display area, and obtaining the total number of sub-items in the display area.

[0075] Get the width of the interval between the sub-items to be displayed, which can be defined by the distance between the sub-items to be displayed or a fixed width. Then, add up the widths of the interval between the sub-items to be displayed to get the sum of the widths of the interval between the sub-items.

[0076] S402, obtaining the difference between the real-time width of the window and the sum of the sub-item interval widths, and using the difference as the total available width of the sub-items.

[0077] The total available width of the sub-items can be used for subsequent layout calculations or to determine the specific width of the sub-items.

[0078] S403: Determine whether the minimum widths of the sub-items corresponding to each of the sub-items to be displayed are the same.

[0079] Traverse all sub-items to be displayed, obtain the minimum width of each sub-item corresponding to each sub-item to be displayed, and compare whether the minimum widths of these sub-items are the same.

[0080] S404: Display the sub-items to be displayed in the display area according to the judgment result, based on the total available width of the sub-items, the minimum width of the sub-items corresponding to each sub-item to be displayed, and the total number of sub-items.

[0081] As an implementable method, if the judgment result indicates that the minimum width of the sub-items corresponding to each sub-item to be displayed is the same, the total available width of the sub-items is evenly divided based on the total number of sub-items, and the width obtained after the even division is used as the sub-item width corresponding to each sub-item to be displayed, and the sub-item to be displayed is displayed horizontally left in the display area based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed. Figure 5 This is a schematic diagram of a horizontal left layout using the width obtained after average division as the width of each sub-item corresponding to the sub-item to be displayed. For example, if the judgment result indicates that the minimum width of each sub-item corresponding to each sub-item to be displayed is the same, the total number of sub-items is 4, and the total available width of the sub-items is 20 units, then the sub-item width corresponding to each sub-item to be displayed is 20 / 4=5 units.

[0082] As another achievable method, if the judgment result indicates that the minimum width of the sub-items corresponding to each sub-item to be displayed is different, then the total available width of the sub-items is non-uniformly divided based on the minimum width of the sub-items corresponding to each sub-item to be displayed, to obtain the sub-item width corresponding to each sub-item to be displayed; based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed, the sub-items to be displayed are displayed horizontally left-aligned in the display area.

[0083] Specifically, based on the minimum width of each sub-item corresponding to each to-be-displayed sub-item, the total available width of the sub-items is non-uniformly divided to obtain the sub-item width corresponding to each to-be-displayed sub-item, including: obtaining a ratio of the total available width of the sub-items to the total number of sub-items as a first ratio. For any sub-item to be displayed, compare the sub-item minimum width corresponding to the sub-item to be displayed with the first ratio; if the sub-item minimum width corresponding to the sub-item to be displayed is greater than the first ratio, use the sub-item minimum width corresponding to the sub-item to be displayed as the sub-item width corresponding to the sub-item to be displayed; obtain the sum of the sub-item minimum widths corresponding to all sub-items to be displayed whose sub-item minimum widths are greater than the first ratio, and obtain the difference between the total sub-item width and the sum of the widths as the remaining sub-item available width; use the sub-items to be displayed whose sub-item minimum widths are less than or equal to the first ratio as the remaining sub-items to be displayed, and obtain the number of remaining sub-items to be displayed as the remaining number of sub-items to be displayed; obtain the ratio of the remaining sub-item available widths to the remaining number of sub-items to be displayed as the second ratio; for any remaining sub-items to be displayed, compare the sub-item minimum width corresponding to the remaining sub-item to be displayed with the second ratio; if the sub-item minimum width of each remaining sub-item to be displayed is less than the second ratio, use the second ratio as the sub-item width corresponding to each remaining sub-item to be displayed.

[0084] FIG6(a) is a schematic diagram of a non-uniform partition layout shown in the present application. As shown in FIG6(a), exemplarily, if the judgment result indicates that the minimum width of each sub-item corresponding to each to-be-displayed sub-item is different, the total number of to-be-displayed sub-items is 4, the total available width of the sub-items is 20 units, the minimum width of the sub-items corresponding to to-be-displayed sub-items 1, 2 and 3 is 2 units, and the minimum width of the sub-items corresponding to to-be-displayed sub-items 4 is 11 units, then the ratio of the total available width of the sub-items (20 units) to the total number of sub-items (4) is obtained as the first ratio, and the first ratio is 5; since the total available width of the sub-items 4 to be displayed is 20 units, the minimum width of the sub-items corresponding to to-be-displayed sub-items 1, 2 and 3 is 2 units, and the minimum width of the sub-items corresponding to to-be-displayed sub-items 4 is 11 units. If the minimum width of the corresponding sub-item is 11 units and is greater than 5, it is determined that the sub-item width corresponding to the sub-item 4 to be displayed is 11 units, then the available width of the remaining sub-items is 20-11=9 units, and there are 3 sub-items remaining to be displayed. The ratio of the available width of the remaining sub-items (9 units) and the number of the remaining sub-items to be displayed (3) is obtained as the second ratio, that is, the second ratio is 3. Since the minimum widths of the sub-items corresponding to the sub-items 1 to be displayed, the sub-items 2 to be displayed, and the sub-items 3 to be displayed are all 2 units, which are all smaller than the second ratio, the sub-item widths of the sub-items 1 to be displayed, the sub-items 2 to be displayed, and the sub-items 3 to be displayed are determined to be 9 / 3=3 units.

[0085] FIG6( b) is a schematic diagram of a non-uniform partition layout shown in the present application. As shown in FIG6( b), similar to the above, if the judgment result indicates that the minimum width of the sub-item corresponding to each sub-item to be displayed is different, the total number of sub-items is 4, the total available width of the sub-items is 20 units, the minimum width of the sub-items corresponding to sub-item 1 to be displayed is 1 unit, the minimum width of the sub-items corresponding to sub-item 2 to be displayed is 5 units, the minimum width of the sub-items corresponding to sub-item 3 to be displayed is 2 units, and the minimum width of the sub-items corresponding to sub-item 4 to be displayed is 10 units, then the ratio of the total available width of the sub-items (20 units) to the total number of sub-items (4) is obtained as the first ratio, and the first ratio is 5; since the minimum width of the sub-items corresponding to sub-item 4 to be displayed is 10 units greater than 5, it is determined that the width of the sub-items corresponding to sub-item 4 to be displayed is 10 units; then the available widths of the remaining sub-items to be displayed (sub-items 1 to be displayed, sub-items 2 to be displayed, and sub-items 3 to be displayed) are 20 -10=10 units, and there are 3 sub-items left to be displayed. The ratio of the available width of the remaining sub-items (10 units) and the number of the remaining sub-items to be displayed (3) is obtained as the second ratio, that is, the second ratio is 3.333. Since the minimum width of the sub-item corresponding to the sub-item 2 to be displayed is 5 units, which is greater than the second ratio, it is determined that the sub-item width corresponding to the sub-item 2 to be displayed is 5 units. Then, the available width of the remaining sub-items (sub-item 1 and sub-item 3) is obtained again as 10-5=5 units. There are 2 sub-items left to be displayed. The ratio of the available width of the remaining sub-items (5 units) and the number of the remaining sub-items to be displayed (2) is obtained as the third ratio, that is, the third ratio is 2.5. Since the minimum width of the sub-item corresponding to the sub-item 1 to be displayed is 1 unit, and the minimum width of the sub-item corresponding to the sub-item 3 to be displayed is 2 units, both of which are less than the third ratio, the sub-item widths of the sub-items 1 to be displayed and the sub-items 3 to be displayed are determined to be 5 / 2=2.5 units.

[0086] The embodiment of the present application specifically introduces the first layout strategy, and performs strategic layout according to different situations of the minimum sub-item widths of the sub-items to be displayed. It can adapt to changes in different screen sizes and container sizes, so that the user interface can adapt to various environments and maintain good display effects.

[0087] Further, if it is determined that the display area corresponds to the second layout strategy, the sub-items to be displayed are displayed in the display area based on the layout strategy, including: using the minimum sub-item width corresponding to each sub-item to be displayed in the display area as the sub-item width corresponding to the sub-item to be displayed; and horizontally centering the sub-items to be displayed based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed.

[0088] Figure 7(a) is a schematic diagram of the present application showing a horizontally centered layout of a sub-item to be displayed when the sub-items are of uniform length. As shown in Figure 7(a), when there is only one sub-item 1 to be displayed, sub-item 1 is horizontally centered, and the sub-item width of sub-item 1 is the minimum sub-item width of sub-item 1.

[0089] Figure 7(b) is a schematic diagram of a method of horizontally centering 2 sub-items to be displayed when the sub-items are of uniform length as shown in the present application, Figure 7(c) is a schematic diagram of a method of horizontally centering 3 sub-items to be displayed when the sub-items are of uniform length as shown in the present application, Figure 7(d) is a schematic diagram of a method of horizontally centering 4 sub-items to be displayed when the sub-items are of uniform length as shown in the present application, and Figure 7(e) is a schematic diagram of a method of horizontally centering 5 sub-items to be displayed when the sub-items are of uniform length as shown in the present application, respectively showing schematic methods of horizontally centering sub-items when there are 2, 3, 4, and 5 sub-items to be displayed.

[0090] Figure 7(f) is a schematic diagram of the present application showing a method of horizontally centering sub-items to be displayed when the lengths of the sub-items are uneven. As shown in 7(f), even if the lengths of the four sub-items to be displayed are different, the minimum sub-item width corresponding to each sub-item to be displayed is used as the sub-item width corresponding to the sub-item to be displayed, and the sub-items are horizontally centered based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed.

[0091] Figure 8 is a schematic diagram of a display device of an interface shown in the present application, such as Figure 8 As shown, the display device 800 of the interface includes an acquisition module 801, a determination module 802 and a display module 803, wherein:

[0092] The acquisition module 801 is used to acquire the configuration parameters of the sub-item to be displayed and the display size of the display area corresponding to the sub-item to be displayed.

[0093] The determination module 802 is used to determine a layout strategy corresponding to the display area based on the configuration parameters of the sub-items to be displayed and the display size of the display area.

[0094] The display module 803 is used to display the sub-items to be displayed in the display area based on the layout strategy.

[0095] In some embodiments, the determination module 802 is also used to: obtain the real-time width of the window of the display area; based on the real-time width of the window, combined with the configuration parameters of the sub-items to be displayed, determine whether all the sub-items to be displayed can be completely displayed in the display area; if the real-time width of the window is monitored to be less than or equal to the preset width threshold, and it is determined that all the sub-items to be displayed can be completely displayed in the display area, it is determined that the display area corresponds to the first layout strategy; if the real-time width of the window is monitored to be greater than the width threshold, and it is determined that all the sub-items to be displayed can be completely displayed in the display area, it is determined that the display area corresponds to the second layout strategy; if it is determined that all the sub-items to be displayed cannot be completely displayed in the display area, it is determined that the display area corresponds to the sliding window layout strategy.

[0096] In some embodiments, if it is determined that the display area corresponds to the first layout strategy, the display module 803 is further used to: obtain the sum of the sub-item interval widths corresponding to each sub-item to be displayed in the display area based on the configuration parameters of the sub-items to be displayed, and obtain the total number of sub-items in the display area; obtain the difference between the real-time width of the window and the sum of the sub-item interval widths, and use the difference as the total available width of the sub-items; determine whether the minimum widths of the sub-items corresponding to each sub-item to be displayed are the same; and display the sub-items to be displayed in the display area based on the determination result and the total available width of the sub-items, the minimum width of the sub-items corresponding to each sub-item to be displayed, and the total number of sub-items.

[0097] In some embodiments, if it is determined that the display area corresponds to the first layout strategy, the display module 803 is further used to: if the judgment result indicates that the minimum widths of the sub-items corresponding to each sub-item to be displayed are the same, then the total available width of the sub-items is evenly divided based on the total number of sub-items, and the width obtained after the even division is used as the sub-item width corresponding to each sub-item to be displayed; based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed, the sub-items to be displayed are displayed in the display area.

[0098] In some embodiments, if it is determined that the display area corresponds to the first layout strategy, the display module 803 is further used to: if the judgment result indicates that the minimum widths of the sub-items corresponding to each sub-item to be displayed are different, then based on the minimum width of the sub-items corresponding to each sub-item to be displayed, the total available width of the sub-items is non-uniformly divided to obtain the sub-item width corresponding to each sub-item to be displayed; based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed, the sub-items to be displayed are displayed in the display area.

[0099] In some embodiments, if it is determined that the display area corresponds to the first layout strategy, the display module 803 is further used to: obtain the ratio of the total available width of the sub-items to the total number of sub-items as the first ratio; for any sub-item to be displayed, compare the sub-item minimum width corresponding to the sub-item to be displayed with the first ratio; if the sub-item minimum width corresponding to the sub-item to be displayed is greater than the first ratio, use the sub-item minimum width corresponding to the sub-item to be displayed as the sub-item width corresponding to the sub-item to be displayed; obtain the sum of the sub-item minimum widths corresponding to all sub-items to be displayed whose sub-item minimum widths are greater than the first ratio, and obtain the sub-item minimum width. The difference between the total width of the item and the sum of the widths is used as the available width of the remaining sub-items; the sub-items to be displayed whose minimum width is less than or equal to the first ratio are used as the remaining sub-items to be displayed, and the number of the remaining sub-items to be displayed is obtained as the number of the remaining sub-items to be displayed; the ratio of the available width of the remaining sub-items to the number of the remaining sub-items to be displayed is obtained as the second ratio; for any remaining sub-items to be displayed, the minimum sub-item width corresponding to the remaining sub-item to be displayed is compared with the second ratio; if the minimum sub-item width of each remaining sub-item to be displayed is less than the second ratio, the second ratio is used as the sub-item width corresponding to each remaining sub-item to be displayed.

[0100] In some embodiments, if it is determined that the display area corresponds to the second layout strategy, the display module 803 is further used to: use the minimum sub-item width corresponding to each sub-item to be displayed in the display area as the sub-item width corresponding to the sub-item to be displayed; and horizontally center the sub-items to be displayed based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed.

[0101] In some embodiments, if it is determined that the display area corresponds to a sliding window layout strategy, the display module 803 is also used to: use the minimum width of the sub-item corresponding to each sub-item to be displayed as the sub-item width corresponding to the sub-item to be displayed; display the sub-item to be displayed in the display area based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed; wherein, when a user's sliding instruction is detected, the sub-item to be displayed is determined according to the sliding instruction and the sub-item to be displayed is displayed.

[0102] In some embodiments, if it is determined that the display area corresponds to the first layout strategy, the display module 803 is further used to: display the sub-items to be displayed horizontally left-aligned in the display area based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed.

[0103] Fig. 9 is a block diagram of an electronic device 900 according to an exemplary embodiment.

[0104] like Fig. 9 As shown, the electronic device 900 includes:

[0105] The memory 901 and the processor 902 , a bus 903 connecting different components (including the memory 901 and the processor 902 ), the memory 901 stores a computer program, and when the processor 902 executes the program, the interface display method of the embodiment of the present disclosure is implemented.

[0106] Bus 903 represents one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, a graphics acceleration port, a processor or a local bus using any of a variety of bus structures. For example, these architectures include but are not limited to Industry Standard Architecture (ISA) bus, Micro Channel Architecture (MAC) bus, Enhanced ISA bus, Video Electronics Standards Association (VESA) local bus and Peripheral Component Interconnect (PCI) bus.

[0107] The electronic device 900 typically includes a variety of electronic device readable media. These media can be any available media that can be accessed by the electronic device 900, including volatile and non-volatile media, removable and non-removable media.

[0108] The memory 901 may also include computer system readable media in the form of volatile memory, such as random access memory (RAM) 904 and / or cache memory 905. The electronic device 900 may further include other removable / non-removable, volatile / non-volatile computer system storage media. By way of example only, the storage system 906 may be used to read and write non-removable, non-volatile magnetic media ( Fig. 9 not shown, usually called a "hard drive"). Although Fig. 9 Not shown, a disk drive for reading and writing to a removable non-volatile disk (e.g., a "floppy disk"), and an optical disk drive for reading and writing to a removable non-volatile optical disk (e.g., a CD-ROM, a DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to bus 903 via one or more data medium interfaces. Memory 901 may include at least one program product having a set (e.g., at least one) of program modules that are configured to perform the functions of the various embodiments of the present disclosure.

[0109] A program / utility 908 having a set (at least one) of program modules 907 may be stored, for example, in the memory 901. Such program modules 907 include, but are not limited to, an operating system, one or more application programs, other program modules, and program data, each of which or some combination may include an implementation of a network environment. The program modules 907 generally perform the functions and / or methods of the embodiments described in the present disclosure.

[0110] The electronic device 900 may also communicate with one or more external devices 909 (e.g., keyboard, pointing device, display 910, etc.), one or more devices that enable a user to interact with the electronic device 900, and / or any device that enables the electronic device 900 to communicate with one or more other computing devices (e.g., network card, modem, etc.). Such communication may be performed through an input / output (I / O) interface 911. Furthermore, the electronic device 900 may also communicate with one or more networks (e.g., a local area network (LAN), a wide area network (WAN), and / or a public network, such as the Internet) through a network adapter 912. Fig. 9 As shown, the network adapter 912 communicates with other modules of the electronic device 900 via the bus 903. It should be understood that although Fig. 9 Not shown, other hardware and / or software modules may be used in conjunction with electronic device 900, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0111] The processor 902 executes various functional applications and data processing by running the programs stored in the memory 901 .

[0112] It should be noted that the implementation process and technical principles of the electronic device of this embodiment refer to the aforementioned explanation of the display method of the interface of the embodiment of the present disclosure, and will not be repeated here.

[0113] In order to implement the above embodiment, the embodiment of the present application also proposes a non-transient computer-readable storage medium storing computer instructions, wherein the computer instructions are used to enable the computer to implement the display method of the interface shown in the above embodiment. Optionally, the non-transient computer-readable storage medium can be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.

[0114] In order to implement the above embodiments, the embodiments of the present application further provide a computer program product, including a computer program, which implements the method for displaying an interface as shown in the above embodiments when executed by a processor.

[0115] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. The present disclosure is intended to cover any variations, uses or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art that are not disclosed in the present disclosure. The description and examples are to be considered exemplary only, and the true scope and spirit of the present disclosure are indicated by the following claims.

[0116] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A method for displaying an interface, characterized in that: include: Acquire configuration parameters of the sub-item to be displayed and the display size of the display area corresponding to the sub-item to be displayed; Determining a layout strategy corresponding to the display area based on the configuration parameters of the sub-items to be displayed and the display size of the display area; Based on the layout strategy, the sub-items to be displayed are displayed in the display area.

2. The method according to claim 1, characterized in that: The determining, based on the configuration parameters of the sub-items to be displayed and the display size of the display area, a layout strategy corresponding to the display area includes: Get the real-time width of the window in the display area; Based on the real-time width of the window and in combination with the configuration parameters of the sub-items to be displayed, determining whether all the sub-items to be displayed can be fully displayed in the display area; If it is monitored that the real-time width of the window is less than or equal to a preset width threshold, and it is determined that all the sub-items to be displayed can be fully displayed in the display area, it is determined that the display area corresponds to the first layout strategy; If it is monitored that the real-time width of the window is greater than the width threshold, and it is determined that all the sub-items to be displayed can be fully displayed in the display area, it is determined that the display area corresponds to the second layout strategy; If it is determined that all the sub-items to be displayed cannot be completely displayed in the display area, it is determined that the display area corresponds to a sliding window layout strategy.

3. The method according to claim 2, characterized in that If it is determined that the display area corresponds to the first layout strategy, displaying the sub-item to be displayed in the display area based on the layout strategy includes: Based on the configuration parameters of the sub-items to be displayed, obtaining the sum of the sub-item interval widths corresponding to each of the sub-items to be displayed in the display area, and obtaining the total number of sub-items in the display area; Obtain the difference between the real-time width of the window and the sum of the sub-item interval widths, and use the difference as the total available width of the sub-item; Determine whether the minimum widths of the sub-items corresponding to each of the sub-items to be displayed are the same; According to the judgment result, based on the total available width of the sub-items, the minimum width of the sub-items corresponding to each of the sub-items to be displayed and the total number of the sub-items, the sub-items to be displayed are displayed in the display area.

4. The method according to claim 3, characterized in that The step of displaying the sub-items to be displayed in the display area according to the judgment result, based on the total available width of the sub-items, the minimum width of the sub-items corresponding to each of the sub-items to be displayed, and the total number of the sub-items, comprises: If the judgment result indicates that the minimum widths of the sub-items corresponding to each of the sub-items to be displayed are the same, then the total available width of the sub-items is evenly divided based on the total number of the sub-items, and the width obtained after the even division is used as the sub-item width corresponding to each of the sub-items to be displayed; The sub-items to be displayed are displayed in the display area based on the sub-item width corresponding to each of the sub-items to be displayed and the sub-item interval width corresponding to each of the sub-items to be displayed.

5. The method according to claim 3, characterized in that: The step of displaying the sub-items to be displayed in the display area according to the judgment result, based on the total available width of the sub-items, the minimum width of the sub-items corresponding to each of the sub-items to be displayed, and the total number of the sub-items, comprises: If the judgment result indicates that the minimum widths of the sub-items corresponding to each of the sub-items to be displayed are different, then the total available width of the sub-items is non-uniformly divided based on the minimum widths of the sub-items corresponding to each of the sub-items to be displayed, to obtain the sub-item width corresponding to each of the sub-items to be displayed; The sub-items to be displayed are displayed in the display area based on the sub-item width corresponding to each of the sub-items to be displayed and the sub-item interval width corresponding to each of the sub-items to be displayed.

6. The method according to claim 5, characterized in that The non-uniformly dividing the total available width of the sub-items based on the minimum width of the sub-items corresponding to each of the sub-items to be displayed to obtain the sub-item width corresponding to each of the sub-items to be displayed includes: Obtaining a ratio of the total available width of the sub-items to the total number of the sub-items as a first ratio; For any sub-item to be displayed, compare the sub-item minimum width corresponding to the sub-item to be displayed with the first ratio; if the sub-item minimum width corresponding to the sub-item to be displayed is greater than the first ratio, use the sub-item minimum width corresponding to the sub-item to be displayed as the sub-item width corresponding to the sub-item to be displayed; Obtain the sum of the minimum widths of all the sub-items to be displayed whose minimum widths are greater than the first ratio and corresponding to the sub-items to be displayed, and obtain the difference between the total width of the sub-items and the sum of the widths as the available width of the remaining sub-items; Taking the sub-items to be displayed whose minimum width is less than or equal to the first ratio as the remaining sub-items to be displayed, and obtaining the number of the remaining sub-items to be displayed as the number of the remaining sub-items to be displayed; Obtaining a ratio of the available width of the remaining sub-items to the number of the remaining sub-items to be displayed as a second ratio; For any of the remaining sub-items to be displayed, the sub-item minimum width corresponding to the remaining sub-item to be displayed is compared with the second ratio; if the sub-item minimum width of each remaining sub-item to be displayed is smaller than the second ratio, the second ratio is used as the sub-item width corresponding to each remaining sub-item to be displayed.

7. The method according to claim 2, characterized in that If it is determined that the display area corresponds to the second layout strategy, displaying the sub-item to be displayed in the display area based on the layout strategy includes: Using the minimum sub-item width corresponding to each to-be-displayed sub-item in the display area as the sub-item width corresponding to the to-be-displayed sub-item; The sub-items to be displayed are horizontally centered based on the sub-item width corresponding to each of the sub-items to be displayed and the sub-item interval width corresponding to each of the sub-items to be displayed.

8. The method according to claim 2, characterized in that: If it is determined that the display area corresponds to the sliding window layout strategy, displaying the sub-item to be displayed in the display area based on the layout strategy includes: The minimum width of each sub-item corresponding to each of the sub-items to be displayed is used as the sub-item width corresponding to the sub-item to be displayed; Displaying the sub-items to be displayed in the display area based on a sub-item width corresponding to each of the sub-items to be displayed and a sub-item interval width corresponding to each of the sub-items to be displayed; When a sliding instruction of the user is detected, the sub-item to be displayed is determined according to the sliding instruction and the sub-item to be displayed is displayed.

9. The method according to any one of claims 3 to 6, characterized in that: The displaying the sub-items to be displayed in the display area based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed includes: The sub-items to be displayed are horizontally displayed on the left side of the display area based on the sub-item width corresponding to each sub-item to be displayed and the sub-item interval width corresponding to each sub-item to be displayed.

10. An interface display device, characterized in that: include: An acquisition module, used to acquire configuration parameters of a sub-item to be displayed and a display size of a display area corresponding to the sub-item to be displayed; A determination module, configured to determine a layout strategy corresponding to the display area based on the configuration parameters of the sub-items to be displayed and the display size of the display area; A display module is used to display the sub-items to be displayed in the display area based on the layout strategy.

11. An electronic device, comprising: at least one processor; as well as a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method according to any one of claims 1 to 9.

12. A non-transitory computer-readable storage medium storing computer instructions, wherein: The computer instructions are used to cause the computer to execute the method according to any one of claims 1-9.

Images