A list index strip construction method and device, electronic equipment and storage medium

Abstract

The application discloses a list index bar construction method and device, electronic equipment and a storage medium. The application generates an index bar configuration file by configuring parameters in the index bar, and draws the index bar based on the configuration file. Thus, when the demand changes, the developer only needs to change the configuration file to draw different index bars, and there is no need to redevelop the code according to the changed demand. Therefore, compared with the traditional index bar construction method, the application greatly improves the development efficiency and reduces the development workload.

Description

Technical Field

[0001] This invention belongs to the field of Android development technology, specifically relating to a method, apparatus, electronic device, and storage medium for constructing a list index bar. Background Technology

[0002] In standard Android development, list sidebar quick filtering controls are frequently used, such as the side index bar filtering in WeChat and QQ's contact lists. The conventional approach is to implement this functionality by developing code for the list layout. However, since the code for each list index bar is not universal, when requirements change (such as needing to modify the index bar style or content), the code must be redeveloped, which consumes a significant amount of development time, reducing development efficiency and increasing the workload for developers. Therefore, providing a quick method for constructing list index bars to improve development efficiency and reduce workload has become an urgent problem to be solved. Summary of the Invention

[0003] The purpose of this invention is to provide a method, apparatus, electronic device, and storage medium for constructing a list index bar, in order to solve the problem that in the prior art, the index bar to be constructed needs to develop corresponding code according to each requirement, which leads to slow development efficiency and high development workload.

[0004] To achieve the above objectives, the present invention adopts the following technical solution:

[0005] Firstly, a method for constructing a list index bar is provided, including:

[0006] Obtain the configuration file for the index bar to be built, wherein the configuration file includes index bar fill data, index bar position data, and the position data of the index bar in the sidebar, and the index bar fill data includes several index characters;

[0007] Based on the configuration file, the height and width of the index bar to be built, as well as the display height of each index character in the index bar to be built, are determined.

[0008] Draw the index bar framework based on the height and width of the index bar to be constructed;

[0009] Based on the width of the index bar to be built, the display height of each index character in the index bar to be built, and the index bar position data and the position data of the sidebar where the index bar is located in the configuration file, the center horizontal coordinate and center vertical coordinate of each index character are determined.

[0010] Based on the center x-coordinate and center y-coordinate of each index character, each index character is filled into the index bar frame. After filling, the drawing of the index bar to be constructed is completed, and the display index bar is obtained.

[0011] Based on the above-disclosed content, this invention generates a configuration file by configuring various parameters of the index bar to be constructed, and then draws the index bar based on the configuration file. The configuration file includes index bar fill data (i.e., the index characters to be filled within the index bar), index bar position data, and the position data of the sidebar where the index bar is located. Then, based on the data in the aforementioned configuration file, the height and width of the index bar to be constructed, as well as the display height of each index character within the index bar, can be determined. After determining the height and width of the index bar to be constructed, an index bar frame can be drawn. At this point, it is only necessary to calculate the fill position of each index character within the index bar frame to complete the index character filling. Specifically, this invention calculates the center horizontal and vertical coordinates of each index character using the previously calculated width of the index bar to be constructed, the display height of each index character, and the index bar position data and the position data of the sidebar where the index bar is located in the configuration file. Thus, based on the center horizontal and vertical coordinates of each index character, the fill position of each index character within the index bar frame can be determined. Finally, at each determined fill position, the corresponding index character is filled to complete the drawing of the index bar to be constructed.

[0012] Through the above design, this invention generates an index bar configuration file by configuring various parameters within the index bar, and draws the index bar based on the configuration file. In this way, when requirements change, developers only need to modify the configuration file to draw different index bars, without having to redevelop the code according to the changed requirements. Therefore, compared with traditional index bar construction methods, this invention not only greatly improves development efficiency but also reduces the workload of development.

[0013] In one possible design, the index bar position data includes: a first spacing, a second spacing, and a third spacing. The sidebar position data where the index bar is located includes the sidebar height and the sidebar width. The first spacing is used to characterize the spacing between the top of the index bar to be built and the top of the index bar display view. The second spacing is used to characterize the spacing between the bottom of the index bar to be built and the bottom of the index bar display view. The third spacing is used to characterize the spacing between the index bar to be built and the right side of the index bar display view.

[0014] Accordingly, based on the configuration file, the height and width of the index bar to be built, as well as the display height of each index character within the index bar to be built, are determined, including:

[0015] Calculate the difference between the sidebar height and the first spacing, and subtract the second spacing from the difference to obtain the height of the index bar to be constructed;

[0016] Obtain the character width of each index character in the index bar filling data, and take the largest character width as the width of the index bar to be constructed;

[0017] Based on the index bar filling data, the data length of the index bar filling data is determined;

[0018] Based on the data length and the height of the index bar to be built, the display height of each index character in the index bar filling data within the index bar to be built is calculated.

[0019] Based on the above-disclosed content, this invention calculates the height of the index bar to be constructed based on the configured sidebar height, the spacing between the index bar and the top of the display view, and the spacing between the index bar and the bottom of the display view; then, the maximum value of the character width among several index characters is taken as the width of the index bar to be constructed; finally, the display height of each index character is determined based on the length of the index bar fill data and the height of the index bar to be constructed; thus, after calculating the aforementioned data, a data basis can be provided for drawing the index bar to be constructed.

[0020] In one possible design, the center horizontal coordinate of each index character among several index characters is the same. The center horizontal coordinate and center vertical coordinate of each index character are determined based on the width of the index bar to be constructed, the display height of each index character within the index bar, and the index bar position data and sidebar position data in the configuration file. This includes:

[0021] Obtain a character calibration value, and calculate a first intermediate value based on the character calibration value and the width of the index bar to be constructed;

[0022] Calculate the difference between the sidebar width and the third spacing, and subtract the first intermediate value from the difference between the sidebar width and the third spacing to obtain the center horizontal coordinate of each index character;

[0023] For the i-th index character in the index bar filling data, calculate the product between the display height and j to obtain the second intermediate value, where j = i-1 and i is a positive integer;

[0024] Sum the first spacing, the second intermediate value, and the display height to use the summation result as the center ordinate of the i-th index character;

[0025] Increment i by 1 until i equals n to obtain the center ordinate of each index character, where n is the total number of index characters in the index bar filling data.

[0026] Based on the above-disclosed content, since the index characters are arranged from top to bottom in the index bar frame, the horizontal coordinates of each index character are the same. Based on this, the present invention configures a character calibration value, and then calculates the first intermediate value based on the character calibration value and the width of the index bar to be constructed; then, the difference between the sidebar width, the third spacing, and the first intermediate value is calculated in sequence. After the calculation is completed, the center horizontal coordinate of each index character can be obtained; and for the i-th character index, the calculation process of its center vertical coordinate is as follows: first, the second intermediate value is calculated based on the display height and the index of the i-th index character (the index starts from 0), and then the first spacing, the second intermediate value, and the display height are summed to obtain the center vertical coordinate of the i-th index character; of course, the calculation process of the other index characters is the same, so it will not be repeated here.

[0027] In one possible design, the configuration file further includes: the index content associated with each index character, the character display style, and the content display style, wherein, after obtaining the index bar, the method further includes:

[0028] In response to a user's human-computer interaction with the display index bar, the coordinates of the user's interaction position on the display index bar are obtained, and the user's touch point position on the display index bar is determined based on the interaction position coordinates.

[0029] Based on the interaction position coordinates, the height of the index bar to be constructed, and the position data of the sidebar where the index bar is located, the height of the touch point position relative to the top of the displayed index bar is calculated;

[0030] Based on the height of the touch point relative to the top of the display index bar and the display height of each index character in the index bar to be constructed, the index character clicked by the user when the user interacts with the display index bar is located.

[0031] Based on the character display style, the index character clicked by the user is displayed, and based on the content display style, the target content is displayed, wherein the target content is the index content associated with the index character clicked by the user.

[0032] Based on the above-disclosed content, this invention also includes touch callback events, display styles for each index character, and display styles for the index content associated with each index character. Therefore, when a user interacts with the drawn index bar, different events can be triggered based on different operations, such as pressing, moving, or lifting a finger. Specifically, the interaction position coordinates on the index bar are first located during the user's interaction, and then the user's touch point position is determined based on these coordinates. Next, the index character clicked by the user during the interaction is determined based on the interaction position coordinates, the height of the index bar to be constructed, the display height of each index character, and the sidebar position data. Finally, the clicked index character is displayed according to the configured character display style, and the associated index content is visualized according to the content display style. Thus, this invention allows for customization of the display method of each index character and the display method of the associated content when a user clicks the index bar, thereby improving the scalability of the index bar construction, meeting different application scenarios, and eliminating the need for developers to rewrite code, further improving development efficiency.

[0033] In one possible design, the position data of the sidebar where the index bar is located includes the sidebar height. The height of the touch point relative to the top of the displayed index bar is calculated based on the interaction position coordinates, the height of the index bar to be constructed, and the position data of the sidebar where the index bar is located, including:

[0034] Obtain a positioning value, and calculate a third intermediate value based on the positioning value and the sidebar height, and calculate a fourth intermediate value based on the positioning value and the height of the index bar to be built;

[0035] Calculate the difference between the ordinate in the interaction position coordinates and the third intermediate value to obtain the fifth intermediate value;

[0036] The difference between the fifth intermediate value and the fourth intermediate value is calculated to obtain the height of the touch point position relative to the top of the display index bar after the calculation is completed.

[0037] In one possible design, based on the height of the touch point relative to the top of the display index bar and the display height of each index character in the index bar to be constructed, the index character clicked by the user during human-computer interaction with the display index bar is located, including:

[0038] The sixth intermediate value is obtained by dividing the height of the touch point position relative to the top of the display index bar by the display height.

[0039] Determine whether the sixth intermediate value is between the first threshold and the second threshold, wherein the first threshold is 0, and the second threshold is the total number of index characters in the index bar filling data;

[0040] If so, then the sixth intermediate value is rounded down to obtain the rounded result;

[0041] Based on the rounding result, the index character clicked by the user is determined.

[0042] In one possible design, the method further includes:

[0043] If the sixth intermediate value is less than or equal to the first threshold, then the first index character in the index bar fill data is used as the index character clicked by the user; if the sixth intermediate value is greater than or equal to the second threshold, then the last index character in the index bar fill data is used as the index character clicked by the user.

[0044] Secondly, a device for constructing a list index bar is provided, comprising:

[0045] The configuration unit is used to obtain the configuration file of the index bar to be built, wherein the configuration file includes index bar filling data, index bar position data and the position data of the sidebar where the index bar is located, and the index bar filling data includes several index characters;

[0046] The parameter calculation unit is used to determine the height and width of the index bar to be built, as well as the display height of each index character in the index bar to be built, based on the configuration file.

[0047] A drawing unit is used to draw the index bar frame based on the height and width of the index bar to be constructed;

[0048] The parameter calculation unit is used to determine the center horizontal coordinate and center vertical coordinate of each index character based on the width of the index bar to be built, the display height of each index character in the index bar to be built, and the index bar position data and the position data of the sidebar where the index bar is located in the configuration file.

[0049] The drawing unit is used to fill each index character into the index bar frame based on the center horizontal coordinate and center vertical coordinate of each index character, so as to complete the drawing of the index bar to be constructed after filling and obtain the display index bar.

[0050] Thirdly, another apparatus for constructing a list index bar is provided. Taking an electronic device as an example, it includes a memory, a processor, and a transceiver that are sequentially and communicatively connected. The memory is used to store a computer program, the transceiver is used to send and receive messages, and the processor is used to read the computer program and execute the method for constructing the list index bar as described in the first aspect or any possible design of the first aspect.

[0051] Fourthly, a storage medium is provided, on which instructions are stored, which, when executed on a computer, perform the method for constructing the list index bar as described in the first aspect or any possible design of the first aspect.

[0052] Fifthly, a computer program product containing instructions is provided that, when executed on a computer, causes the computer to perform the method for constructing the list index bar as described in the first aspect or any possible design of the first aspect.

[0053] Beneficial effects:

[0054] (1) The present invention generates an index bar configuration file by configuring various parameters within the index bar, and draws the index bar based on the configuration file. In this way, when the requirements change, the developers only need to change the configuration file to draw different index bars, without having to redevelop the code according to the changed requirements. Therefore, compared with the traditional index bar construction method, the present invention not only greatly improves the development efficiency, but also reduces the workload of development.

[0055] (2) The present invention allows users to customize the display method of each index character and the display method of the content associated with each index character when the user clicks the index bar. This improves the scalability of the index bar construction, meets the application scenarios with different needs, and does not require developers to redevelop the code, further improving development efficiency. Attached Figure Description

[0056] Figure 1 A flowchart illustrating the steps of a method for constructing a list index bar according to an embodiment of the present invention;

[0057] Figure 2 This is a schematic diagram showing the position of the index bar to be constructed, provided in an embodiment of the present invention.

[0058] Figure 3 A schematic diagram of the structure of a list index bar construction device provided in an embodiment of the present invention;

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

[0060] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the present invention will be briefly introduced below in conjunction with the accompanying drawings and descriptions of the embodiments or the prior art. Obviously, the following description of the structure of the accompanying drawings is only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort. It should be noted that the description of these embodiments is for the purpose of helping to understand the present invention, but does not constitute a limitation of the present invention.

[0061] It should be understood that although the terms first, second, etc., may be used herein to describe various units, these units should not be limited by these terms. These terms are only used to distinguish one unit from another. For example, a first unit may be referred to as a second unit, and similarly, a second unit may be referred to as a first unit, without departing from the scope of the exemplary embodiments of the invention.

[0062] It should be understood that the term "and / or" that may appear in this document is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can mean: A exists alone, B exists alone, and A and B exist simultaneously. The term " / and" that may appear in this document describes another relationship between related objects, indicating that two relationships can exist. For example, A / and B can mean: A exists alone, and A and B exist alone. In addition, the character " / " that may appear in this document generally indicates that the related objects before and after it are in an "or" relationship.

[0063] Example:

[0064] See Figure 1 As shown, the list index bar construction method provided in this embodiment generates an index bar configuration file by configuring various parameters within the index bar, and draws the index bar based on the configuration file. Thus, when requirements change, developers only need to modify the configuration file to achieve the drawing of different index bars, without having to redevelop the code according to the changed requirements. Therefore, this method not only greatly improves development efficiency but also reduces the workload, making it suitable for large-scale applications and promotion. In this embodiment, the method can be run on, but is not limited to, the Android development side. The Android development side can be, but is not limited to, a personal computer (PC), tablet computer, or smartphone. It is understood that the aforementioned execution subject does not constitute a limitation on the embodiments of this application. Accordingly, the running steps of this method can be, but are not limited to, the steps S1 to S5 below.

[0065] S1. Obtain the configuration file for the index bar to be built. The configuration file includes index bar fill data, index bar position data, and the position data of the sidebar where the index bar is located. The index bar fill data includes several index characters. In specific applications, the configuration file contains general parameters for each index bar, such as the distance between the index bar and the top, bottom, and right side of its corresponding display view, the characters to be filled in the index bar (e.g., index characters are letters, numbers, combinations of letters and numbers, or special symbols (e.g., "*", "￥", "&", etc.), which can be specifically set according to actual use), and the position of the sidebar corresponding to the index bar in the display view, etc. In this way, by extracting the aforementioned general parameters to form a configuration file, different styles and index bars containing different content can be obtained by assigning different values ​​to the general parameters in the configuration file. Therefore, this embodiment can achieve rapid construction of index bars by changing the configuration file when requirements change.

[0066] Furthermore, the index bar position data, for example, may include, but is not limited to, a first spacing, a second spacing, and a third spacing; the sidebar position data where the index bar is located may include, but is not limited to, the sidebar height and the sidebar width; wherein, the first spacing is used to characterize the spacing between the top of the index bar to be constructed and the top of the index bar display view (see...). Figure 2 As shown, Figure 2 In this context, mTopOffset represents the first spacing, and the second spacing is used to characterize the spacing between the bottom of the index bar to be constructed and the bottom of the index bar display view. Figure 2 In this context, mBottomOffset represents the second spacing, and the third spacing is used to characterize the spacing between the index bar to be constructed and the right side of the index bar display view. Figure 2 In this embodiment, the sidebar can fill the entire index bar display view, that is, the height of the sidebar is equal to the height of the index bar display view, and the width of the sidebar is equal to the width of the index bar display view. Of course, the height and width of the sidebar can also be set according to actual use, and are not limited to the example above.

[0067] After obtaining the configuration file for the index bar to be built, the index bar can be drawn based on the configuration file, as shown in steps S2 to S5 below.

[0068] S2. Based on the configuration file, determine the height and width of the index bar to be built, as well as the display height of each index character in the index bar to be built; in specific applications, the calculation process of the height and width of the index bar to be built and the display height of each index character can be, but is not limited to, as shown in steps S21 to S24 below.

[0069] S21. Calculate the difference between the sidebar height and the first spacing, and subtract the second spacing from the difference to obtain the height of the index bar to be built; in specific applications, the height of the index bar to be built = sidebar height - first spacing - second spacing; and after obtaining the height of the index bar to be built based on the above formula, the width of the index bar to be built can be calculated, as shown in step S22 below.

[0070] S22. Obtain the character width of each index character in the index bar filling data, and use the largest character width as the width of the index bar to be built; in specific applications, native Android methods can be used to obtain the character width of each index character, and the largest character width is used as the width of the index bar to be built; at the same time, after obtaining the index bar to be built and its height width, it is also necessary to calculate the display height of each index character in the index bar to be built, so as to calculate the filling position of each index character based on the display height; in this embodiment, the display height of each index character is the same, and the calculation process is as shown in steps S23 and S24 below.

[0071] S23. Based on the index bar filling data, determine the data length of the index bar filling data; in specific applications, the data length of the index bar filling data may be, but is not limited to, the total number of index characters; and after obtaining the data length of the index bar filling data, the display height of each index character can be calculated by using the height of the index bar to be constructed, as shown in step S24 below.

[0072] S24. Based on the data length and the height of the index bar to be built, calculate the display height of each index character in the index bar to be built in the index bar; in specific applications, the display height of each index character can be obtained by dividing the height of the index bar to be built by the data length.

[0073] After obtaining the width and height of the index bar to be constructed based on the aforementioned steps S21 to S24, the framework of the index bar to be constructed can be drawn, as shown in step S3 below.

[0074] S3. Draw the index bar frame based on the height and width of the index bar to be built. In specific applications, since the distance between the index bar to be built and the right side of the index bar display view, as well as the distance between the index bar to be built and the bottom of the index bar display view, have been set in the aforementioned configuration file, the starting point of the index bar to be built can be determined based on the aforementioned two data. After knowing the starting point, the starting point can be used as the origin to extend a first length (the first length is equal to the width of the index bar to be built) towards the left side of the index bar display view. In this way, a bottom edge of the index bar to be built can be obtained. Finally, with the bottom edge as the starting edge, extend a second length vertically upward (the second length is the height of the index bar to be built). In this way, the index bar frame can be constructed.

[0075] After obtaining the index bar frame, it is also necessary to determine the filling position of each index character in the index bar frame so that the index characters can be filled in the subsequent process based on the determined filling position. The process of determining the filling position of each index character can be, but is not limited to, the process shown in step S4 below.

[0076] S4. Based on the width of the index bar to be built, the display height of each index character within the index bar, and the index bar position data and sidebar position data in the configuration file, determine the center horizontal and center vertical coordinates of each index character; for specific applications, see [reference needed]. Figure 2 As shown, since the index characters in the index bar are arranged from top to bottom, the center horizontal coordinates of each index character are the same, and the only difference is the center vertical coordinate. Therefore, in this embodiment, the center horizontal and vertical coordinates of each index character are calculated according to the following steps S41 to S45.

[0077] S41. Obtain a character calibration value, and calculate a first intermediate value based on the character calibration value and the width of the index bar to be constructed; in specific applications, the width of the index bar to be constructed is divided by the character calibration value to obtain the first intermediate value. For example, the character calibration value can be, but is not limited to, 2.

[0078] S42. Calculate the difference between the sidebar width and the third spacing, and subtract the first intermediate value from the difference between the sidebar width and the third spacing to obtain the center horizontal coordinate of each index character; in specific applications, the center horizontal coordinate of each index character is equal to: sidebar width - third spacing - first intermediate value; thus, after calculating the center horizontal coordinate of each index character, the center vertical coordinate can be calculated, as shown in steps S43 to S45 below.

[0079] S43. For the i-th index character in the index bar filling data, calculate the product between the display height and j to obtain the second intermediate value, where j = i-1 and i is a positive integer; in specific applications, the index of the index character generally starts from 0 during code development. Therefore, for the i-th index character, it is equivalent to calculating the product between the display height and the index of the i-th index character. After calculation, subsequent calculations can be performed, as shown in step S44 below.

[0080] S44. Summing the first spacing, the second intermediate value, and the display height, and using the summation result as the center ordinate of the i-th index character; in specific implementation, the aforementioned product is added to the first spacing and the display height to obtain the center ordinate of the i-th index character; of course, the calculation process for the center ordinate of each of the other index characters is the same, and will not be repeated here.

[0081] S45. Increment i by 1 until i equals n to obtain the center ordinate of each index character, where n is the total number of index characters in the index bar filling data.

[0082] By continuously repeating the aforementioned steps S43 to S45, the center ordinate of each index character can be calculated. After obtaining the center coordinates of each index character, the filling position of each index character in the index bar frame can be determined. Then, the characters can be filled, as shown in step S5 below.

[0083] S5. Based on the center horizontal and vertical coordinates of each index character, fill each index character into the index bar frame. After filling, the drawing of the index bar to be constructed is completed, and the display index bar is obtained. In specific applications, for any index character, place it at the position represented by the corresponding center horizontal and vertical coordinates to complete the filling of that index character. Of course, the filling of other index characters is also done in the same way, which will not be described in detail here. In addition, in this embodiment, the character size, font and color of each index character can also be set in the configuration file. In this way, it can also be displayed according to the aforementioned configured size, font and color, thereby further improving the diversity of the index bar display content.

[0084] Therefore, through the list index bar construction method described in detail in steps S1 to S5 above, the present invention generates an index bar configuration file by configuring various parameters within the index bar, and draws the index bar based on the configuration file. In this way, when requirements change, developers only need to change the configuration file to achieve the drawing of different index bars, without having to redevelop the code according to the changed requirements. Thus, compared with the traditional index bar construction method, the present invention not only greatly improves development efficiency, but also reduces the workload of development.

[0085] In one possible design, the second aspect of this embodiment further optimizes the first aspect of the embodiment by configuring user touch callback events. When the user performs different operations on the displayed index bar, the corresponding operation events are returned. For example, when selecting an index character in the displayed index bar, the character is displayed according to the configured style, and the content associated with the index character is displayed according to the configured style.

[0086] In this embodiment, the configuration file may also include, but is not limited to, the index content associated with each index character, the character display style, and the content display style; wherein, the execution process of the aforementioned touch callback event may be, but is not limited to, as shown in steps S6 to S9 below.

[0087] S6. In response to a user's human-computer interaction with the display index bar, obtain the user's interaction position coordinates on the display index bar, and determine the user's touch point position on the display index bar based on the interaction position coordinates. In specific applications, the user's human-computer interaction with the display index bar may include, but is not limited to: selecting the display index bar with a finger, moving the display index bar with a finger, and lifting the finger off the display index bar. Optionally, for example, the horizontal coordinate in the interaction position coordinates may be, but is not limited to, the distance between the user clicking the display index bar and the left side of the sidebar, and the vertical coordinate may be, but is not limited to, the distance between the user clicking the display index bar and the top of the sidebar. Of course, the user's click position is essentially the touch point position on the display index bar.

[0088] After obtaining the coordinates of the user's interaction position with the displayed index bar, the index character clicked by the user in the displayed index bar during human-computer interaction can be determined based on these coordinates. The process of determining the index character clicked by the user is shown in steps S7 and S8 below.

[0089] S7. Based on the interaction position coordinates, the height of the index bar to be constructed, and the position data of the sidebar where the index bar is located, the height of the touch point position relative to the top of the displayed index bar is calculated. In this embodiment, it is necessary to first calculate the height of the user's touch point position on the displayed index bar relative to the top of the displayed index bar, and then use the aforementioned calculated height to determine the index character clicked by the user. Specifically, the calculation process of the aforementioned height of the touch point position relative to the top of the displayed index bar can be, but is not limited to, as shown in steps S71 to S73 below.

[0090] S72. Obtain a positioning value, and calculate a third intermediate value based on the positioning value and the sidebar height, and calculate a fourth intermediate value based on the positioning value and the height of the index bar to be built; in specific applications, for example, but not limited to, dividing the sidebar height by the positioning value to obtain the third intermediate value, and dividing the height of the index bar to be built by the positioning value to obtain the fourth intermediate value; further, for example, the positioning value can be, but not limited to, 2.

[0091] After obtaining the aforementioned third and fourth intermediate values, the height of the touch point position relative to the top of the display index bar can be calculated by combining the vertical coordinate in the interaction position coordinates, as shown in steps S72 and S73 below.

[0092] S72. Calculate the difference between the ordinate in the interaction position coordinates and the third intermediate value to obtain the fifth intermediate value.

[0093] S73. Calculate the difference between the fifth intermediate value and the fourth intermediate value to obtain the height of the touch point position relative to the top of the display index bar after the calculation is completed. In specific applications, the third intermediate value is first subtracted from the vertical coordinate in the interaction position coordinates, and then the fourth intermediate value is subtracted from the result of the two calculations. After the calculation is completed, the final result is the height of the touch point position relative to the top of the display index bar. Furthermore, this height can be understood as the distance between the touch point position and the top of the display index bar. After obtaining this height, the user can determine the click index character, as shown in step S8 below.

[0094] S8. Based on the height of the touch point relative to the top of the display index bar and the display height of each index character in the index bar to be constructed, the index character clicked by the user during human-computer interaction with the display index bar is located. In specific application, this embodiment first uses the height of the touch point relative to the top of the display index bar, divided by the display height, to obtain a sixth intermediate value. Then, based on the sixth intermediate value, the user-clicked character is determined. Specifically, it is first determined whether the sixth intermediate value is between a first threshold and a second threshold, where the first threshold is 0 and the second threshold is the total number of index characters in the index bar filling data. If so, the sixth intermediate value is rounded to obtain a rounded result. Finally, the user-clicked index character can be determined based on the rounded result. In this embodiment, the determination process does not include boundary values, that is, it does not include the first threshold and the second threshold, and the rounded result of the user click is the k-th index character, where k is the sum of the rounded result and 1.

[0095] Optionally, the reason for the aforementioned setting is that the rounding result is equivalent to the index of the index character. In the process of code development, the index usually starts from 0. Therefore, the index 0 represents the first index character, and the index 1 represents the second index character. Thus, the index plus 1 is the sorting position of the index character.

[0096] Furthermore, when the sixth intermediate value is less than or equal to the first threshold, the first index character in the index bar fill data is taken as the index character clicked by the user. In this embodiment, when the sixth intermediate value is less than 0, it indicates that the user's touch position is actually above the top of the displayed index bar. In this case, the first index character can be identified as the character the user wants to click. If the sixth intermediate value is greater than or equal to the second threshold, the last index character in the index bar fill data is taken as the index character clicked by the user. Similarly, if the sixth intermediate value is greater than the second threshold, it indicates that the user's touch position is actually below the bottom of the displayed index bar. Therefore, the index character clicked by the user can be identified as the last character.

[0097] The following example illustrates step S8. Suppose the total number of index characters in the index bar filling data is 26 (e.g., AZ), and the sixth intermediate value is 2.5. Since 2.5 is between 0 and 26, it is necessary to round 2.5 to the nearest integer, resulting in 2. In this case, the index character clicked by the user is the third index character, which is index character C. Of course, the principle is the same as described above when the sixth intermediate value is different, and will not be repeated here.

[0098] Once the index character clicked by the user is determined, the index character and corresponding content can be displayed according to the data configured above, as shown in step S9 below.

[0099] S9. Based on the character display style, display the index character clicked by the user, and based on the content display style, display the target content, wherein the target content is the index content associated with the index character clicked by the user; in specific applications, when the user clicks the aforementioned determined index character, it can be displayed according to the configured style, which may include, but is not limited to, zoomed display and / or highlighted display, and the display method of the content associated with the index character clicked by the user may include, but is not limited to, displaying it as a pop-up window or as a jump; of course, the aforementioned display method can be specifically set according to user needs, and is not limited to the aforementioned example.

[0100] Thus, through the aforementioned design, the present invention allows for customization of the display method of each index character and the display method of the content associated with each index character when the user clicks the index bar. This improves the scalability of the index bar construction, meets the application scenarios with different needs, and eliminates the need for developers to rewrite the code, further improving development efficiency.

[0101] like Figure 3 As shown, the third aspect of this embodiment provides a hardware device for implementing the method for constructing a list index bar as described in the first and second aspects of the embodiments, comprising:

[0102] The configuration unit is used to obtain the configuration file of the index bar to be built, wherein the configuration file includes index bar filling data, index bar position data and the position data of the sidebar where the index bar is located, and the index bar filling data includes several index characters.

[0103] The parameter calculation unit is used to determine the height and width of the index bar to be built, as well as the display height of each index character in the index bar to be built, based on the configuration file.

[0104] The drawing unit is used to draw the index bar frame based on the height and width of the index bar to be constructed.

[0105] The parameter calculation unit is used to determine the center horizontal coordinate and center vertical coordinate of each index character based on the width of the index bar to be built, the display height of each index character in the index bar to be built, and the index bar position data and the position data of the sidebar where the index bar is located in the configuration file.

[0106] The drawing unit is used to fill each index character into the index bar frame based on the center horizontal coordinate and center vertical coordinate of each index character, so as to complete the drawing of the index bar to be constructed after filling and obtain the display index bar.

[0107] The working process, working details and technical effects of the device provided in this embodiment can be found in the first and second aspects of the embodiment, and will not be repeated here.

[0108] like Figure 4 As shown, the fourth aspect of this embodiment provides another list index bar construction apparatus. Taking an electronic device as an example, it includes: a memory, a processor, and a transceiver that are sequentially and communicatively connected. The memory is used to store a computer program, the transceiver is used to send and receive messages, and the processor is used to read the computer program and execute the list index bar construction method as described in the first and / or second aspects of the embodiments.

[0109] For specific examples, the memory may include, but is not limited to, random access memory (RAM), read-only memory (ROM), flash memory, first-in-first-out (FIFO) memory, and / or first-in-last-out (FILO) memory, etc.; specifically, the processor may include one or more processing cores, such as a 4-core processor, an 8-core processor, etc. The processor may be implemented using at least one hardware form of DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), PLA (Programmable Logic Array). The processor may also include a main processor and a coprocessor. The main processor is used to process data in the wake-up state, also known as the CPU (Central Processing Unit); the coprocessor is a low-power processor used to process data in the standby state.

[0110] In some embodiments, the processor may integrate a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content to be displayed on the screen. For example, the processor may not be limited to microprocessors of the STM32F105 series, reduced instruction set computer (RISC) microprocessors, x86 architecture processors, or processors with integrated embedded neural network processing units (NPUs). The transceiver may be, but is not limited to, a Wi-Fi transceiver, a Bluetooth transceiver, a General Packet Radio Service (GPRS) transceiver, a ZigBee (a low-power LAN protocol based on the IEEE 802.15.4 standard) transceiver, a 3G transceiver, a 4G transceiver, and / or a 5G transceiver. Furthermore, the device may also include, but is not limited to, a power module, a display screen, and other necessary components.

[0111] The working process, working details and technical effects of the electronic device provided in this embodiment can be found in the first and second aspects of the embodiment, and will not be repeated here.

[0112] The fifth aspect of this embodiment provides a storage medium storing instructions containing the methods for constructing list index bars as described in the first and / or second aspects of the embodiments. That is, the storage medium stores instructions that, when executed on a computer, perform the methods for constructing list index bars as described in the first and / or second aspects.

[0113] The storage medium refers to a carrier for storing data, which may include, but is not limited to, floppy disks, optical disks, hard disks, flash memory, USB flash drives, and / or memory sticks. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices.

[0114] The working process, working details and technical effects of the storage medium provided in this embodiment can be found in the first and second aspects of the embodiment, and will not be repeated here.

[0115] The sixth aspect of this embodiment provides a computer program product containing instructions that, when executed on a computer, cause the computer to perform a method for constructing a list index bar as described in the first and / or second aspects of the embodiments, wherein the computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device.

[0116] Finally, it should be noted that the above description is merely a preferred embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.

Claims

1. A method for constructing a list index bar, characterized in that, include: Obtain the configuration file for the index bar to be built, wherein the configuration file includes index bar fill data, index bar position data, and the position data of the index bar in the sidebar, and the index bar fill data includes several index characters; Based on the configuration file, the height and width of the index bar to be built, as well as the display height of each index character in the index bar to be built, are determined. Draw the index bar framework based on the height and width of the index bar to be constructed; Based on the width of the index bar to be built, the display height of each index character in the index bar to be built, and the index bar position data and the position data of the sidebar where the index bar is located in the configuration file, the center horizontal coordinate and center vertical coordinate of each index character are determined. Based on the center x-coordinate and center y-coordinate of each index character, each index character is filled into the index bar frame, so that after filling is completed, the drawing of the index bar to be constructed is completed, and the display index bar is obtained. The configuration file also includes: the index content associated with each index character, the character display style, and the content display style. After obtaining the index bar, the method further includes: In response to a user's human-computer interaction with the display index bar, the coordinates of the user's interaction position on the display index bar are obtained, and the user's touch point position on the display index bar is determined based on the interaction position coordinates. Based on the interaction position coordinates, the height of the index bar to be constructed, and the position data of the sidebar where the index bar is located, the height of the touch point position relative to the top of the displayed index bar is calculated; Based on the height of the touch point relative to the top of the display index bar and the display height of each index character in the index bar to be constructed, the index character clicked by the user when the user interacts with the display index bar is located. Based on the character display style, the index character clicked by the user is displayed, and based on the content display style, the target content is displayed, wherein the target content is the index content associated with the index character clicked by the user.

2. The method according to claim 1, characterized in that, The index bar position data includes a first spacing, a second spacing, and a third spacing. The sidebar position data where the index bar is located includes the sidebar height and the sidebar width. The first spacing is used to characterize the spacing between the top of the index bar to be built and the top of the index bar display view. The second spacing is used to characterize the spacing between the bottom of the index bar to be built and the bottom of the index bar display view. The third spacing is used to characterize the spacing between the index bar to be built and the right side of the index bar display view. Accordingly, based on the configuration file, the height and width of the index bar to be built, as well as the display height of each index character within the index bar to be built, are determined, including: Calculate the difference between the sidebar height and the first spacing, and subtract the second spacing from the difference to obtain the height of the index bar to be constructed; Obtain the character width of each index character in the index bar filling data, and take the largest character width as the width of the index bar to be constructed; Based on the index bar filling data, the data length of the index bar filling data is determined; Based on the data length and the height of the index bar to be built, the display height of each index character in the index bar filling data within the index bar to be built is calculated.

3. The method according to claim 2, characterized in that, The horizontal center coordinates of each index character in a plurality of index characters are the same. The horizontal center coordinates and vertical center coordinates of each index character are determined based on the width of the index bar to be constructed, the display height of each index character within the index bar, and the index bar position data and sidebar position data in the configuration file. This includes: Obtain a character calibration value, and calculate a first intermediate value based on the character calibration value and the width of the index bar to be constructed; Calculate the difference between the sidebar width and the third spacing, and subtract the first intermediate value from the difference between the sidebar width and the third spacing to obtain the center horizontal coordinate of each index character; For the i-th index character in the index bar filling data, calculate the product between the display height and j to obtain the second intermediate value, where j = i - 1 and i is a positive integer; Sum the first spacing, the second intermediate value, and the display height to use the summation result as the center ordinate of the i-th index character; Increment i by 1 until i equals n to obtain the center ordinate of each index character, where n is the total number of index characters in the index bar filling data.

4. The method according to claim 1, characterized in that, The position data of the index bar in the sidebar includes the sidebar height. Based on the interaction position coordinates, the height of the index bar to be constructed, and the position data of the sidebar where the index bar is located, the height of the touch point relative to the top of the displayed index bar is calculated, including: Obtain a positioning value, and calculate a third intermediate value based on the positioning value and the sidebar height, and calculate a fourth intermediate value based on the positioning value and the height of the index bar to be built; Calculate the difference between the ordinate in the interaction position coordinates and the third intermediate value to obtain the fifth intermediate value; The difference between the fifth intermediate value and the fourth intermediate value is calculated to obtain the height of the touch point position relative to the top of the display index bar after the calculation is completed.

5. The method according to claim 1, characterized in that, Based on the height of the touch point relative to the top of the display index bar and the display height of each index character in the index bar to be constructed, the index character clicked by the user during human-computer interaction with the display index bar is located, including: The sixth intermediate value is obtained by dividing the height of the touch point position relative to the top of the display index bar by the display height. Determine whether the sixth intermediate value is between the first threshold and the second threshold, wherein the first threshold is 0, and the second threshold is the total number of index characters in the index bar filling data; If so, then the sixth intermediate value is rounded down to obtain the rounded result; Based on the rounding result, the index character clicked by the user is determined.

6. The method according to claim 5, characterized in that, The method further includes: If the sixth intermediate value is less than or equal to the first threshold, then the first index character in the index bar fill data is used as the index character clicked by the user; if the sixth intermediate value is greater than or equal to the second threshold, then the last index character in the index bar fill data is used as the index character clicked by the user.

7. A device for constructing a list index bar, characterized in that, A method for constructing a list index bar according to any one of claims 1 to 6, wherein the apparatus comprises: The configuration unit is used to obtain the configuration file of the index bar to be built, wherein the configuration file includes index bar filling data, index bar position data and the position data of the sidebar where the index bar is located, and the index bar filling data includes several index characters; The parameter calculation unit is used to determine the height and width of the index bar to be built, as well as the display height of each index character in the index bar to be built, based on the configuration file. A drawing unit is used to draw the index bar frame based on the height and width of the index bar to be constructed; The parameter calculation unit is used to determine the center horizontal coordinate and center vertical coordinate of each index character based on the width of the index bar to be built, the display height of each index character in the index bar to be built, and the index bar position data and the position data of the sidebar where the index bar is located in the configuration file. The drawing unit is used to fill each index character into the index bar frame based on the center horizontal coordinate and center vertical coordinate of each index character, so as to complete the drawing of the index bar to be constructed after filling and obtain the display index bar.

8. An electronic device, characterized in that, include: A memory, a processor, and a transceiver are sequentially connected in communication, wherein the memory is used to store a computer program, the transceiver is used to send and receive messages, and the processor is used to read the computer program and execute the method for constructing a list index bar as described in any one of claims 1 to 6.

9. A storage medium, characterized in that, The storage medium stores instructions that, when executed on a computer, perform the method for constructing a list index bar as described in any one of claims 1 to 6.

Images