Page layout method and device

Abstract

The present disclosure relates to a page layout method and device, which includes: obtaining information of a tab component and the current screen width; determining the layout mode of the tab component according to the information of the tab component and the current screen width; and performing page layout using the layout mode. According to the page layout method and device of the present disclosure, the layout mode of the tab component can be determined according to the information of the tab component and the current screen width, and automatic dynamic layout can be performed based on the difference in the client screen size and the information of the tab component, without limiting the number of tab sub-items and the width of the character information, and the character information of all tab sub-items can be fully displayed by flexibly selecting an adaptive layout mode, which can improve the user experience.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to a page layout method and device. Background Art

[0002] In the information age, more and more people choose to use the Internet platform to share their lives, search for information, etc. to facilitate their lives. The various contents of the Internet platform can be displayed to users through pages. There is a component in the relevant technology that can be used to switch the display of different modules in the page. However, this component cannot be flexibly adapted to each user client in the actual page layout, which greatly limits the user's usage scenarios. Summary of the invention

[0003] The present disclosure provides a page layout method and device to at least solve the problems in the above-mentioned related technologies, or may not solve any of the above-mentioned problems. The technical solution of the present disclosure is as follows:

[0004] According to a first aspect of an embodiment of the present disclosure, a page layout method is provided, comprising: obtaining information of a tab component and a current screen width; determining a layout mode of the tab component according to the information of the tab component and the current screen width; and performing page layout using the layout mode.

[0005] Optionally, the tab component includes at least one tab sub-item, and the information of the tab component includes the number and character information of the tab sub-items; determining the layout mode of the tab component based on the information of the tab component and the current screen width includes: when the number of the tab sub-items is greater than or equal to a first preset threshold, determining the layout mode to be a first layout mode, wherein the first layout mode is to arrange the tab sub-items with equal intervals and use a scrolling view for layout; when the number of the tab sub-items is less than the first preset threshold, determining the layout mode of the tab component based on the character information of the tab sub-items and the current screen width.

[0006] Optionally, determining the layout mode of the tab component based on the character information of the tab sub-items and the current screen width includes: determining a first width occupied by the overall character information spliced ​​together from the character information of all the tab sub-items; when the first width is greater than a second preset threshold, determining the layout mode to be the first layout mode, wherein the second preset threshold is the difference between the current screen width and a preset value; when the first width is less than or equal to the second preset threshold, determining a second width occupied by the character information of each tab sub-item; and determining the layout mode of the tab component based on the second width and the current screen width.

[0007] Optionally, determining the layout mode of the tab component based on the second width and the current screen width includes: when the second width occupied by the character information of each tab sub-item is less than or equal to a third preset threshold, determining the layout mode to be the second layout mode; when there is a tab sub-item whose second width occupied by the character information is greater than the third preset threshold, determining the layout mode to be the third layout mode, wherein the third preset threshold is the quotient of the current screen width and the number of the tab sub-items, the second layout mode is to arrange the tab sub-items with equal widths within the current screen range, and the third layout mode is to arrange the tab sub-items with equal spacing within the current screen range.

[0008] Optionally, the first width and the second width are determined by creating a box model; after the layout mode of the tab component is determined, the page layout method further includes: deleting the box model.

[0009] Optionally, determining the first width occupied by the overall character information formed by splicing the character information of all the tab sub-items includes: creating a first box model, wherein the width of the first box model is equal to the width of the front screen, and the first box model is used to splice the character information of all the tab sub-items together for page layout; and determining the first width based on the first box model.

[0010] Optionally, determining the first width based on the first box model includes: creating a first character component in the first box model; splicing character information of all the tab sub-items into overall character information, and placing it into the first character component; and obtaining the first width according to the width of the first character component.

[0011] Optionally, determining the second width occupied by the character information of each tab sub-item includes: creating a second box model, wherein the width of the second box model is equal to the width of the front screen, and the second box model is used to layout the character information of each tab sub-item separately on the same page; based on the second box model, determining the second width occupied by the character information of each tab sub-item.

[0012] Optionally, determining the second width occupied by the character information of each tab sub-item based on the second box model includes: creating a second character component corresponding to each tab sub-item in the second box model; placing the character information of each tab sub-item into its corresponding second character component; and obtaining the second width occupied by the character information of each tab sub-item according to the width of the second character component corresponding to each tab sub-item.

[0013] According to a second aspect of an embodiment of the present disclosure, a page layout device is provided, comprising: a receiving unit, configured to obtain information of a tab component and a current screen width; a determining unit, configured to determine a layout mode of the tab component according to the information of the tab component and the current screen width; and a layout unit, configured to perform page layout using the layout mode.

[0014] Optionally, the tab component includes at least one tab sub-item, and the information of the tab component includes the number and character information of the tab sub-items; the determination unit is configured to: when the number of the tab sub-items is greater than or equal to a first preset threshold, determine the layout mode as a first layout mode, wherein the first layout mode is to arrange the tab sub-items at equal intervals and use a scrolling view for layout; when the number of the tab sub-items is less than the first preset threshold, determine the layout mode of the tab component based on the character information of the tab sub-items and the current screen width.

[0015] Optionally, the determination unit is configured to: determine a first width occupied by the overall character information spliced ​​together from the character information of all tab sub-items; when the first width is greater than a second preset threshold, determine the layout mode to be the first layout mode, wherein the second preset threshold is the difference between the current screen width and a preset value; when the first width is less than or equal to the second preset threshold, determine a second width occupied by the character information of each tab sub-item; and determine the layout mode of the tab component based on the second width and the current screen width.

[0016] Optionally, the determination unit is configured to: determine that the layout mode is the second layout mode when the second width occupied by the character information of each tab sub-item is less than or equal to a third preset threshold; determine that the layout mode is the third layout mode when the second width occupied by the character information of any tab sub-item is greater than the third preset threshold, wherein the third preset threshold is the quotient of the current screen width and the number of the tab sub-items, the second layout mode is to arrange the tab sub-items with equal width within the current screen range, and the third layout mode is to arrange the tab sub-items with equal spacing within the current screen range.

[0017] Optionally, the first width and the second width are determined by creating a box model; the page layout device further includes a deleting unit configured to: delete the box model.

[0018] Optionally, the determination unit is configured to: create a first box model, wherein the width of the first box model is equal to the width of the front screen, and the first box model is used to splice the character information of all the tab sub-items together for page layout; and determine the first width based on the first box model.

[0019] Optionally, the determination unit is configured to: create a first character component in the first box model; splice the character information of all the tab sub-items into overall character information, and place it into the first character component; and obtain the first width according to the width of the first character component.

[0020] Optionally, the determination unit is configured to: create a second box model, wherein the width of the second box model is equal to the width of the front screen, and the second box model is used to layout the character information of each tab sub-item separately on the same page; based on the second box model, determine the second width occupied by the character information of each tab sub-item.

[0021] Optionally, the determination unit is configured to: create a second character component corresponding to each tab sub-item in the second box model; place the character information of each tab sub-item into its corresponding second character component; and obtain the second width occupied by the character information of each tab sub-item based on the width of the second character component corresponding to each tab sub-item.

[0022] According to a third aspect of an embodiment of the present disclosure, there is provided an electronic device, comprising: at least one processor; and at least one memory storing computer executable instructions, wherein when the computer executable instructions are executed by the at least one processor, the at least one processor is prompted to execute a page layout method according to the present disclosure.

[0023] According to a fourth aspect of an embodiment of the present disclosure, a computer-readable storage medium storing instructions is provided. When the instructions are executed by at least one processor, the at least one processor is prompted to execute the page layout method according to the present disclosure.

[0024] According to a fifth aspect of an embodiment of the present disclosure, there is provided a computer program product, comprising computer instructions, which implement the page layout method according to the present disclosure when executed by at least one processor.

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

[0026] According to the page layout method and device disclosed in the present invention, the layout mode of the tab component can be determined according to the information of the tab component and the current screen width, and automatic dynamic layout can be implemented based on the difference between the client screen size and the information of the tab component. There is no limit on the number of tab sub-items and the width of the character information. The character information of all tab sub-items can be fully displayed by flexibly selecting an adaptive layout mode, which can improve the user experience.

[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 a page including a tab component in the related art.

[0030] Figure 2 The present invention is a flow chart showing a page layout method according to an exemplary embodiment.

[0031] Figure 3 The figure is an overall flow chart of a page layout method according to an exemplary embodiment.

[0032] Figure 4 The invention is a block diagram of a page layout device according to an exemplary embodiment.

[0033] Figure 5 is a block diagram of an electronic device 500 according to an exemplary embodiment. DETAILED DESCRIPTION

[0034] 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.

[0035] 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 implementation methods described in the following examples do not represent all implementation methods 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 attached claims.

[0036] It should be noted that the phrase "at least one of the items" in the present disclosure includes three types of parallel situations: "any one of the items", "a combination of any number of the items", and "all of the items". For example, "including at least one of A and B" includes the following three parallel situations: (1) including A; (2) including B; (3) including A and B. Another example is "executing at least one of step 1 and step 2" which means the following three parallel situations: (1) executing step 1; (2) executing step 2; (3) executing step 1 and step 2.

[0037] In the information age, more and more people choose to use the Internet platform to share their lives, search for information, and other convenient ways of living. The Internet platform can be used by users through mobile clients, and the contents of the Internet platform can be displayed to users through the pages displayed by the mobile client. For the mobile client, its operating system may be IOS or Android. The development framework RN (React-Native) in the related technology can realize the use of a set of codes in the above two different operating systems.

[0038] In the related art, for RN, there is a component that can be used to switch the display of different modules in a page and navigate different areas in the page. The component can be a tab component, which is a tab component. Figure 1 It is a schematic diagram of a page including a tab component in the related art. Figure 1 , the tab component is laid out horizontally, and can also be called a horizontal tab component. Figure 1 The tab component shown includes three tab sub-items. The character information of the first tab sub-item, the second tab sub-item, and the third tab sub-item are "Option 1", "Option 2", and "Option 3" respectively. When the mobile client learns that the user clicks on any tab sub-item, the mobile client can switch the content area below the tab component to display different content. In order to provide users with a good user experience, it is necessary to implement an unlimited number of characters in the character information of each tab sub-item, so that the text can be fully displayed (no line break, no "...") and automatically switch the appropriate tab component layout for different situations.

[0039] However, when performing page layout based on the current tab component, only one or two existing layout methods can be fixedly selected, and dynamic layout switching cannot be achieved. This means that when using the tab component, the width of the character information needs to be considered, which greatly limits the user's usage scenarios. At the same time, due to the different screen widths of various user clients, especially mobile clients, the current method of using a fixed layout cannot be flexibly adapted to various user clients.

[0040] In order to solve the problems existing in the above-mentioned related technologies, the present disclosure proposes a page layout method and device, which can determine the layout mode of the tab component according to the information of the tab component and the current screen width, and can realize automatic dynamic layout based on the difference between the client screen size and the information of the tab component, without limiting the number of tab sub-items and the width of the character information, and flexibly select an adaptive layout mode to fully display the character information of all tab sub-items, thereby improving the user experience.

[0041] Next, we will refer to Figures 2 to 5 The page layout method and device according to the present disclosure are described in detail.

[0042] Figure 2 The present invention is a flow chart showing a page layout method according to an exemplary embodiment. Figure 2 The execution subject of the flowchart shown can be a client, and here, the client can be a mobile client such as a mobile phone, a tablet computer, etc., and the present disclosure does not limit this. Figure 2 In step 201, information of the tab component and the current screen width may be obtained.

[0043] The exemplary embodiments of the present disclosure may obtain information of the tab component from the server. For example, when the client learns that the user clicks on a component, and the component can be used to display a page containing the tab component, the client may request information of the tab component from the server. The exemplary embodiments of the present disclosure may also obtain the current client screen width (such as 414 pixels or 320 pixels, etc.) from the client itself.

[0044] According to an exemplary embodiment of the present disclosure, the tab component may be a horizontal tab component. The tab component may include at least one tab sub-item, such as Figure 1 The tab component shown includes 3 tab sub-items. The information of the tab component may include, but is not limited to, the number of tab sub-items and character information of the tab sub-items, and the character information may be text information, symbol information, or digital information, which is not limited in the present disclosure.

[0045] After obtaining the information of the tab component and the current screen width, the exemplary embodiment of the present disclosure can select a layout mode adapted to the current client based on the two obtained options to implement dynamic layout, and the layout mode can be an existing mode. Specifically, in step 202, the layout mode of the tab component can be determined according to the information of the tab component and the current screen width.

[0046] According to the above description, the information of the tab component may include the number of tab sub-items and the character information of the tab sub-items. The exemplary embodiment of the present disclosure may first make a first judgment and selection based on the number of tab sub-items, and then make a second judgment and selection based on the character information and the current screen width.

[0047] For the first judgment selection, considering that when the number of tab sub-items is too large, it may not be fully accommodated within the current screen width range, so the exemplary embodiment of the present disclosure may determine the layout mode as the first layout mode when the number of tab sub-items is greater than or equal to the first preset threshold, wherein the first layout mode is to arrange the tab sub-items at equal intervals and use a scroll view for layout. It should be noted that using a scroll view for layout of tab sub-items may mean that the tab component can be scrolled in the horizontal direction. In the existing technology, the ScrollView component can be used to layout the tab sub-items using a scroll view. It has been explained in the above description that only one or two fixed layout modes can be used for layout in the existing technology, so when this scrolling mode is selected, it is not very suitable for situations where there is less character information or a small number of tab sub-items. Based on this, the present disclosure may be provided with a second judgment selection.

[0048] For the second judgment selection, when the number of tab sub-items is less than the first preset threshold, the layout mode of the tab component can be determined according to the character information of the tab sub-items and the current screen width. According to an embodiment, through these two judgment selections, a suitable layout mode can be dynamically determined according to the number of tab sub-items and the character information of the tab sub-items.

[0049] The second judgment and selection mentioned above can be divided into two steps. First, the character information of all the tab sub-items can be spliced ​​together for judgment and selection. Then, the character information of each tab sub-item can be judged and selected separately. Specifically, it can be:

[0050] First, the first width occupied by the overall character information spliced ​​from the character information of all the tab sub-items can be determined. For example, the first width can be the number of pixels occupied by the overall character information in the horizontal direction.

[0051] Then, when the first width is greater than the second preset threshold, the layout mode can be determined to be the first layout mode, wherein the second preset threshold is the difference between the current screen width and the preset value. Here, the preset value is set to maintain a reasonable spacing between the tab sub-items to ensure a better display effect.

[0052] Next, when the first width is less than or equal to the second preset threshold, the second width occupied by the character information of each tab sub-item may be determined. For example, the second width may be the number of pixels occupied by the character information of each tab sub-item in the horizontal direction.

[0053] Finally, the layout mode of the tab component can be determined according to the second width and the current screen width. According to the embodiment, in the process of determining the layout mode, both the first width occupied by the overall character information and the second width occupied by the character information of each tab sub-item can be considered, so that the character information width is not limited, and the adaptive layout mode can be flexibly selected to fully display the character information of all tab sub-items.

[0054] According to an exemplary embodiment of the present disclosure, when the second width occupied by the character information of each tab sub-item is less than or equal to the third preset threshold, the layout mode is determined to be the second layout mode. When the second width occupied by the character information of any tab sub-item is greater than the third preset threshold, the layout mode is determined to be the third layout mode. The third preset threshold is the quotient of the current screen width and the number of tab sub-items. According to the embodiment, by comparing the second width and the third preset threshold, the adaptive layout mode can be selected more carefully and flexibly.

[0055] The second layout mode and the third layout mode described above are further explained below. The second layout mode can be to arrange the tab sub-items in equal width within the current screen range. That is, each tab sub-item occupies an equal width in the horizontal direction after the layout is completed. For example, if the current screen width is 360 pixels and the number of tab sub-items is 4, then the width occupied by each tab sub-item in the horizontal direction after the layout is completed is 90 pixels. In the existing technology, the flex method can be used to evenly arrange the tab sub-items. The third layout mode can be to arrange the tab sub-items in equal spacing within the current screen range. That is, each tab sub-item is equally spaced apart in the horizontal direction after the layout is completed. For example, if the spacing is set to 20 pixels, when the current screen width is 360 pixels and the number of tab sub-items is 4, the spacing will occupy 60 pixels. If 20 pixels are also required on both sides of the screen, then the spacing will occupy 100 pixels, and the available length left for the tab sub-items is 260 pixels.

[0056] According to the page layout method disclosed in the present invention, the layout mode can be flexibly selected through the above two judgments and selections, thereby overcoming the shortcomings of only using the first layout mode, the second layout mode or the third layout mode.

[0057] Based on the above description, it should be noted that for RN, when the Text component is first drawn, the onLayout event can be triggered to obtain the width occupied by the Text component. For the tab component, when the character information obtained from the server is filled in for each tab sub-item, the tab sub-item can be regarded as a Text component. The first drawing can be understood as the user clicking to display the tab component. In other words, the first width and the second width can be determined in this way.

[0058] According to an exemplary embodiment of the present disclosure, the first width and the second width are determined by creating a box model. It should be noted that the width of the two box models can be set equal to the current screen width. It should also be noted that the box model can use a transparent box model or a non-transparent box model. When the non-transparent box model is selected, the non-transparent box model can be positioned outside the screen of the current client so that the user is not aware of it, thereby obtaining a better experience. An exemplary embodiment of the present disclosure can delete the box model after the layout mode of the tab component is determined. According to an embodiment, by creating a box model, it is possible to facilitate the determination of the first width and the second width, so that the first width and the second width can be flexibly selected to adapt the layout mode. By deleting the box model after the layout mode is determined, the user can be unaware of it, thereby obtaining a better experience.

[0059] According to an exemplary embodiment of the present disclosure, the first width is determined by creating a box model. First, a first box model may be created, wherein the width of the first box model is equal to the width of the front screen, and the first box model is used to splice the character information of all tab sub-items together for page layout.

[0060] Then, the first width can be determined based on the first box model. According to an embodiment, the first width can be easily determined by creating a first box model for splicing character information of all tab sub-items together for page layout, so that an adaptive layout mode can be flexibly selected through the first width and the second width.

[0061] For example, a first character component may be created in the first box model; then character information of all tab sub-items may be spliced ​​into overall character information and placed in the first character component; finally, the first width may be obtained according to the width of the first character component. According to an embodiment, an onLayout event may be triggered based on the first character component, thereby obtaining the first width.

[0062] According to an exemplary embodiment of the present disclosure, the second width is determined by creating a box model. First, a second box model may be created, wherein the width of the second box model is equal to the width of the front screen, and the second box model is used to layout the character information of each tab sub-item separately on the same page.

[0063] Then, based on the second box model, the second width occupied by the character information of each tab sub-item can be determined. According to an embodiment, by creating a second box model for separately laying out the character information of each tab sub-item on the same page, it is possible to facilitate determination of the second width, so that a layout method that is adapted can be flexibly selected later through the first width and the second width.

[0064] For example, a second character component corresponding to each tab sub-item may be created in the second box model first; the character information of each tab sub-item may be placed in the corresponding second character component; and finally, the second width occupied by the character information of each tab sub-item may be obtained according to the width of the second character component corresponding to each tab sub-item. According to an embodiment, an onLayout event may be triggered based on the second character component, thereby obtaining the second width.

[0065] Back to Figure 2 In step 203, the page layout may be performed using a determined layout method. Here, the determined layout method may be the layout method determined in step 202.

[0066] Figure 3 The figure is an overall flow chart of a page layout method according to an exemplary embodiment. Figure 3 The process shown is applicable to the client, refer to Figure 3 , the page layout method of the present invention is generally described.

[0067] First, the tab component can be initialized. It should be noted that the tab component can be initialized in any case where the tab component is displayed from other content by a user click or the like.

[0068] Then, the current screen width can be obtained, and data can be obtained from the server, that is, data update is performed. If the data sent by the server is not valid data, that is, if the information of the tab component sent by the server is not valid, the data is waited for to be updated (loaded) again. If the data sent by the server is valid data, the subsequent steps are performed and the loading is hidden. Among them, the information of the tab component sent by the server may include the number of tab sub-items and the character information of the tab sub-items.

[0069] Next, the relationship between the number of tab sub-items and the first preset threshold can be determined, and when the number of tab sub-items is greater than or equal to the first preset threshold, the layout mode is determined to be the first layout mode. When the number of tab sub-items is less than the first preset threshold, subsequent steps can be performed.

[0070] Next, when the number of tab sub-items is less than the first preset threshold, a first transparent box model can be created for layout: first determine the first width based on the first transparent box model, and then determine the size relationship between the first width and the second preset threshold based on the first transparent box model. Here, the first width can be the width occupied by the overall character information spliced ​​together by the character information of all tab sub-items. When the first width is greater than the second preset threshold, the layout mode is determined to be the first layout mode, and the subsequent steps can be performed when the first width is less than or equal to the second preset threshold.

[0071] Next, when the first width is less than or equal to the second preset threshold, a second transparent box model can be created for layout: first determine the second width based on the second transparent box model, and then judge the relationship between the second width occupied by the character information of each tab sub-item and the third preset threshold based on the second transparent box model; when the second width occupied by the character information of each tab sub-item is less than or equal to the third preset threshold, determine the layout mode as the second layout mode; when the second width occupied by the character information of any tab sub-item is greater than the third preset threshold, determine the layout mode as the third layout mode.

[0072] Finally, the created transparent box model can be deleted and the page layout can be performed using a determined layout method.

[0073] It should be noted that the second preset threshold, the third preset threshold, the first layout mode, the second layout mode and the third layout mode can refer to the above description and will not be repeated here.

[0074] Figure 4 The invention is a block diagram of a page layout device according to an exemplary embodiment. Figure 4 The device shown can be deployed at the client. Figure 4 The page layout device 400 includes a receiving unit 401, a determining unit 402 and a layout unit 403.

[0075] The receiving unit 401 can obtain the information of the tab component and the current screen width.

[0076] According to an exemplary embodiment of the present disclosure, the receiving unit 401 may obtain information about the tab component from the server. For example, when the client learns that the user clicks on a component, and the component can be used to display a page containing the tab component, the client may request information about the tab component from the server. The receiving unit 401 may also obtain the current client screen width (such as 414 pixels or 320 pixels, etc.) from the client itself.

[0077] According to an exemplary embodiment of the present disclosure, the tab component may be a horizontal tab component. The tab component may include at least one tab sub-item, such as Figure 1 The tab component shown includes 3 tab sub-items. The information of the tab component may include, but is not limited to, the number of tab sub-items and character information of the tab sub-items, and the character information may be text information, symbol information, or digital information, which is not limited in the present disclosure.

[0078] The determination unit 402 may determine the layout of the tab component according to the information of the tab component and the current screen width.

[0079] According to the above description, the information of the tab component may include the number of tab sub-items and the character information of the tab sub-items. The determination unit 402 may first make a first judgment and selection based on the number of tab sub-items, and then make a second judgment and selection based on the character information and the current screen width.

[0080] For the first judgment selection, considering that when there are too many tab sub-items, they may not be fully accommodated within the current screen width range, the determination unit 402 may determine that the layout mode is the first layout mode when the number of tab sub-items is greater than or equal to the first preset threshold, wherein the first layout mode is to arrange the tab sub-items at equal intervals and use a scroll view for layout. It should be noted that using a scroll view for layout of tab sub-items may mean that the tab component can be scrolled in the horizontal direction. In the existing technology, the ScrollView component may be used to layout the tab sub-items using a scroll view. It has been explained in the above description that only one or two fixed layout modes can be used for layout in the existing technology, so when this scrolling mode is selected, it is not very suitable for situations where there is less character information or a small number of tab sub-items. Based on this, the determination unit 402 may be provided with a second judgment selection.

[0081] For the second judgment selection, the determination unit 402 can determine the layout mode of the tab component according to the character information of the tab sub-items and the current screen width when the number of the tab sub-items is less than the first preset threshold. According to an embodiment, through these two judgment selections, the appropriate layout mode can be dynamically determined according to the number of the tab sub-items and the character information of the tab sub-items.

[0082] For the second judgment and selection, the determination unit 402 can be divided into two steps for judgment. First, the determination unit 402 can combine the character information of all the tab sub-items to make a judgment and selection. Then, the determination unit 402 can make a judgment and selection for the character information of each tab sub-item respectively. Specifically, it can be:

[0083] First, the determining unit 402 may determine a first width occupied by the overall character information formed by splicing the character information of all the tab sub-items. For example, the first width may be the number of pixels occupied by the overall character information in the horizontal direction.

[0084] Then, the determination unit 402 can determine that the layout mode is the first layout mode when the first width is greater than the second preset threshold, wherein the second preset threshold is the difference between the current screen width and the preset value. Here, the preset value is set to maintain a reasonable spacing between the tab sub-items to ensure a better display effect.

[0085] Next, the determining unit 402 may determine the second width occupied by the character information of each tab sub-item when the first width is less than or equal to the second preset threshold. For example, the second width may be the number of pixels occupied by the character information of each tab sub-item in the horizontal direction.

[0086] Finally, the determination unit 402 may determine the layout mode of the tab component according to the second width and the current screen width. According to an embodiment, in the process of determining the layout mode, both the first width occupied by the overall character information and the second width occupied by the character information of each tab sub-item may be considered, so that the character information width is not limited, and an adaptive layout mode is flexibly selected to fully display the character information of all tab sub-items.

[0087] According to an exemplary embodiment of the present disclosure, the determination unit 402 determines that the layout mode is the second layout mode when the second width occupied by the character information of each tab sub-item is less than or equal to the third preset threshold. The determination unit 402 determines that the layout mode is the third layout mode when the second width occupied by the character information of any tab sub-item is greater than the third preset threshold. The third preset threshold is the quotient of the current screen width and the number of tab sub-items. According to the embodiment, by comparing the second width and the third preset threshold, the adaptive layout mode can be selected more carefully and flexibly.

[0088] Below, the second layout mode and the third layout mode are further explained. The second layout mode can be to arrange the tab sub-items in equal width within the current screen range. That is to say, each tab sub-item occupies an equal width in the horizontal direction after the layout is completed. For example, if the current screen width is 360 pixels and the number of tab sub-items is 4, then the width occupied by each tab sub-item in the horizontal direction after the layout is completed is 90 pixels. The third layout mode can be to arrange the tab sub-items in equal spacing within the current screen range. That is to say, each tab sub-item is spaced equally in the horizontal direction after the layout is completed. For example, if the spacing is set to 20 pixels, when the current screen width is 360 pixels and the number of tab sub-items is 4, the spacing will occupy 60 pixels. If 20 pixels are also required on both sides of the screen, then the spacing will occupy 100 pixels, and the available length left for the tab sub-items is 260 pixels.

[0089] Based on the above description, it should be noted that, for RN, when the Text component is first drawn, the onLayout event can be triggered to obtain the width occupied by the Text component. For the tab component, when the character information obtained from the server is filled in for each tab sub-item, the tab sub-item can be regarded as a Text component. Then the first drawing can be understood as the user clicking to display the tab component. That is, for the above-mentioned first width and second width, the determination unit 402 can determine in this way.

[0090] According to an exemplary embodiment of the present disclosure, the first width and the second width are determined by creating a box model. It should be noted that the width of the two box models can be set equal to the current screen width. It should also be noted that the box model can use a transparent box model or a non-transparent box model. When the non-transparent box model is selected, the non-transparent box model can be positioned outside the screen of the current client so that the user is not aware of it and obtains a better experience. An exemplary embodiment of the present disclosure may be provided with a deletion unit, and the deletion unit may delete the box model after the determination unit 402 is executed. According to an embodiment, by creating a box model, it is possible to facilitate the determination of the first width and the second width, so that the first width and the second width can be flexibly selected to adapt the layout mode, and by deleting the box model after the layout mode is determined, the user can be unaware of it and obtain a better experience.

[0091] According to an exemplary embodiment of the present disclosure, first, the determining unit 402 may create a first box model, wherein the width of the first box model is equal to the width of the front screen, and the first box model is used to splice the character information of all tab sub-items together for page layout.

[0092] Then, the determining unit 402 may determine the first width based on the first box model. According to an embodiment, the first width may be determined by creating a first box model for splicing character information of all tab sub-items together for page layout, so that an adaptive layout mode may be flexibly selected through the first width and the second width.

[0093] For example, the determination unit 402 may first create a first character component in the first box model; then concatenate character information of all tab sub-items into overall character information and place it in the first character component; and finally obtain the first width according to the width of the first character component. According to an embodiment, an onLayout event may be triggered based on the first character component, thereby obtaining the first width.

[0094] According to an exemplary embodiment of the present disclosure, first, the determining unit 402 may create a second box model, wherein the width of the second box model is equal to the width of the front screen, and the second box model is used to layout the character information of each tab sub-item separately on the same page.

[0095] Then, the determining unit 402 may determine the second width occupied by the character information of each tab sub-item based on the second box model. According to an embodiment, by creating a second box model for separately laying out the character information of each tab sub-item on the same page, it is possible to facilitate determining the second width, so that a layout mode that is adapted can be flexibly selected through the first width and the second width in the subsequent process.

[0096] For example, the determination unit 402 may first create a second character component corresponding to each tab sub-item in the second box model; then place the character information of each tab sub-item into its corresponding second character component; and finally obtain the second width occupied by the character information of each tab sub-item according to the width of the second character component corresponding to each tab sub-item. According to an embodiment, the onLayout event may be triggered based on the second character component, thereby obtaining the second width.

[0097] Back to Figure 4 , the layout unit 403 may use a determined layout mode to perform page layout. Here, the determined layout mode may be the layout mode determined in the determination unit 402.

[0098] Figure 5 is a block diagram of an electronic device 500 according to an exemplary embodiment.

[0099] Reference Figure 5The electronic device 500 includes at least one memory 501 and at least one processor 502, wherein the at least one memory 501 stores a set of computer executable instructions, and when the set of computer executable instructions is executed by the at least one processor 502, the page layout method according to the present disclosure is executed.

[0100] As an example, the electronic device 500 may be a PC, a tablet device, a personal digital assistant, a smart phone, or other device capable of executing the above-mentioned instruction set. Here, the electronic device 500 is not necessarily a single electronic device, but may also be any device or circuit collection capable of executing the above-mentioned instructions (or instruction sets) individually or in combination. The electronic device 500 may also be part of an integrated control system or system manager, or may be configured as a portable electronic device interconnected with a local or remote (e.g., via wireless transmission) interface.

[0101] In the electronic device 500, the processor 502 may include a central processing unit (CPU), a graphics processing unit (GPU), a programmable logic device, a dedicated processor system, a microcontroller or a microprocessor. As an example and not limitation, the processor may also include an analog processor, a digital processor, a microprocessor, a multi-core processor, a processor array, a network processor, etc.

[0102] The processor 502 may execute instructions or codes stored in the memory 501, wherein the memory 501 may also store data. Instructions and data may also be sent and received over a network via a network interface device, wherein the network interface device may employ any known transmission protocol.

[0103] The memory 501 may be integrated with the processor 502, for example, by placing RAM or flash memory within an integrated circuit microprocessor or the like. In addition, the memory 501 may include a separate device, such as an external disk drive, a storage array, or any other storage device that can be used by a database system. The memory 501 and the processor 502 may be operatively coupled, or may communicate with each other, such as through an I / O port, a network connection, etc., so that the processor 502 can read files stored in the memory.

[0104] In addition, the electronic device 500 may also include a video display (such as a liquid crystal display) and a user interaction interface (such as a keyboard, a mouse, a touch input device, etc.) All components of the electronic device 500 may be connected to each other via a bus and / or a network.

[0105] According to an exemplary embodiment of the present disclosure, a computer-readable storage medium storing instructions may also be provided, wherein when the instructions are executed by at least one processor, the at least one processor is prompted to execute the page layout method according to the present disclosure. Examples of computer-readable storage media here include: read-only memory (ROM), random access programmable read-only memory (PROM), electrically erasable programmable read-only memory (EEPROM), random access memory (RAM), dynamic random access memory (DRAM), static random access memory (SRAM), flash memory, non-volatile memory, CD-ROM, CD-R, CD+R, CD-RW, CD+RW, DVD-ROM, DVD-R, DVD+R, DVD-RW, DVD+RW, DVD-RAM, BD-ROM, BD-R, BD-R LTH, BD-RE, Blu-ray or optical disk storage, hard disk drive (HDD), solid state drive (SSD), card storage (such as, multimedia card, secure digital (SD) card or extreme digital (XD) card), magnetic tape, floppy disk, magneto-optical data storage device, optical data storage device, hard disk, solid state disk and any other device, any other device is configured to store computer programs and any associated data, data files and data structures in a non-transitory manner and provide the computer programs and any associated data, data files and data structures to a processor or computer so that the processor or computer can execute the computer program. The computer program in the above-mentioned computer-readable storage medium can be run in an environment deployed in a computer device such as a client, a host, an agent device, a server, etc. In addition, in one example, the computer program and any associated data, data files and data structures are distributed on a networked computer system, so that the computer program and any associated data, data files and data structures are stored, accessed and executed in a distributed manner by one or more processors or computers.

[0106] According to an exemplary embodiment of the present disclosure, a computer program product may also be provided, and instructions in the computer program product may be executed by a processor of a computer device to implement the page layout method according to the present disclosure.

[0107] According to the page layout method and device disclosed in the present invention, the layout mode of the tab component can be determined according to the information of the tab component and the current screen width, and automatic dynamic layout can be implemented based on the difference between the client screen size and the information of the tab component. There is no limit on the number of tab sub-items and the width of the character information. The character information of all tab sub-items can be fully displayed by flexibly selecting an adaptive layout mode, which can improve the user experience.

[0108] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. This application 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 specification and examples are intended to be exemplary only, and the true scope and spirit of the present disclosure are indicated by the following claims.

[0109] 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 page layout method, characterized in that: include: Get the information of the tab component and the current screen width; Determining a layout mode of the tab component according to the information of the tab component and the current screen width; Using the layout method to perform page layout; Wherein, the tab component includes at least one tab sub-item, and the information of the tab component includes the number and character information of the tab sub-items; The determining, according to the information of the tab component and the current screen width, a layout mode of the tab component includes: When the number of the tab sub-items is greater than or equal to a first preset threshold, determining that the layout mode is a first layout mode, wherein the first layout mode is to arrange the tab sub-items at equal intervals and use a scroll view for layout; When the number of the tab sub-items is less than the first preset threshold, determining the layout mode of the tab component according to the character information of the tab sub-items and the current screen width; The step of determining the layout of the tab component according to the character information of the tab sub-item and the current screen width includes: Determine a first width occupied by the overall character information formed by combining the character information of all the tab sub-items; When the first width is greater than a second preset threshold, determining that the layout mode is the first layout mode, wherein the second preset threshold is a difference between the current screen width and a preset value; When the first width is less than or equal to the second preset threshold, determining a second width occupied by the character information of each tab sub-item; The layout mode of the tab component is determined according to the second width and the current screen width.

2. The page layout method according to claim 1, characterized in that: The determining, according to the second width and the current screen width, a layout mode of the tab component includes: In a case where the second width occupied by the character information of each tab sub-item is less than or equal to a third preset threshold, determining that the layout mode is the second layout mode; In the case where the second width occupied by the character information of any tab sub-item is greater than the third preset threshold, determining that the layout mode is the third layout mode, Among them, the third preset threshold is the quotient of the current screen width and the number of the tab sub-items, the second layout method is to arrange the tab sub-items with equal width within the current screen range, and the third layout method is to arrange the tab sub-items with equal spacing within the current screen range.

3. The page layout method according to claim 1, characterized in that: The first width and the second width are determined by creating a box model; After the layout mode of the tab component is determined, the page layout method further includes: Delete the box model.

4. The page layout method according to claim 3, characterized in that: The determining of a first width occupied by the overall character information spliced ​​together with the character information of all the tab sub-items includes: Creating a first box model, wherein the width of the first box model is equal to the width of the front screen, and the first box model is used to splice the character information of all the tab sub-items together for page layout; Based on the first box model, the first width is determined.

5. The page layout method according to claim 4, characterized in that: The determining the first width based on the first box model includes: creating a first character component in the first box model; splicing the character information of all the tab sub-items into overall character information, and placing it into the first character component; The first width is obtained according to the width of the first character component.

6. The page layout method according to claim 3, characterized in that: The determining the second width occupied by the character information of each tab sub-item includes: Creating a second box model, wherein the width of the second box model is equal to the width of the front screen, and the second box model is used to layout the character information of each tab sub-item separately on the same page; Based on the second box model, a second width occupied by the character information of each tab sub-item is determined.

7. The page layout method according to claim 6, characterized in that: The determining, based on the second box model, a second width occupied by the character information of each tab item includes: Creating a second character component corresponding to each of the tab sub-items in the second box model; Put the character information of each tab item into its corresponding second character component; According to the width of the second character component corresponding to each tab sub-item, the second width occupied by the character information of each tab sub-item is obtained.

8. A page layout device, characterized in that: include: The receiving unit is configured to: obtain information of the tab component and the current screen width; A determining unit, configured to: determine a layout mode of the tab component according to the information of the tab component and the current screen width; A layout unit is configured to: perform page layout using the layout method; Wherein, the tab component includes at least one tab sub-item, and the information of the tab component includes the number and character information of the tab sub-items; Make sure the unit is configured as: When the number of the tab sub-items is greater than or equal to a first preset threshold, determining that the layout mode is a first layout mode, wherein the first layout mode is to arrange the tab sub-items at equal intervals and use a scroll view for layout; When the number of the tab sub-items is less than the first preset threshold, determining the layout mode of the tab component according to the character information of the tab sub-items and the current screen width; Wherein, the determining unit is configured as: Determine a first width occupied by the overall character information formed by combining the character information of all the tab sub-items; When the first width is greater than a second preset threshold, determining that the layout mode is the first layout mode, wherein the second preset threshold is a difference between the current screen width and a preset value; When the first width is less than or equal to the second preset threshold, determining a second width occupied by the character information of each tab sub-item; The layout mode of the tab component is determined according to the second width and the current screen width.

9. The page layout device according to claim 8, characterized in that: Make sure the unit is configured as: In a case where the second width occupied by the character information of each tab sub-item is less than or equal to a third preset threshold, determining that the layout mode is the second layout mode; In the case where the second width occupied by the character information of any tab sub-item is greater than the third preset threshold, determining that the layout mode is the third layout mode, Among them, the third preset threshold is the quotient of the current screen width and the number of the tab sub-items, the second layout method is to arrange the tab sub-items with equal width within the current screen range, and the third layout method is to arrange the tab sub-items with equal spacing within the current screen range.

10. The page layout device according to claim 8, characterized in that: The first width and the second width are determined by creating a box model; The page layout device further includes a deleting unit configured to: Delete the box model.

11. The page layout device according to claim 10, characterized in that: Make sure the unit is configured as: Creating a first box model, wherein the width of the first box model is equal to the width of the front screen, and the first box model is used to splice the character information of all the tab sub-items together for page layout; Based on the first box model, the first width is determined.

12. The page layout device according to claim 11, characterized in that: Make sure the unit is configured as: creating a first character component in the first box model; splicing the character information of all the tab sub-items into overall character information, and placing it into the first character component; The first width is obtained according to the width of the first character component.

13. The page layout device according to claim 10, characterized in that: Make sure the unit is configured as: Creating a second box model, wherein the width of the second box model is equal to the width of the front screen, and the second box model is used to layout the character information of each tab sub-item separately on the same page; Based on the second box model, a second width occupied by the character information of each tab sub-item is determined.

14. The page layout device according to claim 13, characterized in that: Make sure the unit is configured as: Creating a second character component corresponding to each of the tab sub-items in the second box model; Put the character information of each tab item into its corresponding second character component; According to the width of the second character component corresponding to each tab sub-item, the second width occupied by the character information of each tab sub-item is obtained.

15. An electronic device, characterized in that: include: at least one processor; at least one memory storing computer executable instructions, Wherein, when the computer executable instructions are executed by the at least one processor, the at least one processor is prompted to execute the page layout method according to any one of claims 1 to 7.

16. A computer-readable storage medium storing instructions, characterized in that: When the instructions are executed by at least one processor, the at least one processor is prompted to perform the page layout method according to any one of claims 1 to 7.

17. A computer program product comprising computer instructions, characterized in that When the computer instructions are executed by at least one processor, the page layout method according to any one of claims 1 to 7 is implemented.

Images