Slide bar display control method, device and storage medium

Abstract

The present invention discloses a display control method, device and storage medium of a slider, and relates to the technical field of slider control. The method includes responding to a user's sliding operation, determining the edge coordinates of the slider; determining the current edge coordinates and the current center coordinates of the slider based on the corresponding sliding displacement in the sliding direction; determining the segment length of the node icon based on the length of the slide rail and the number of icons; when the sliding operation ends, determining the sorting position of the node icon to be slid to based on the current edge coordinates, the minimum edge coordinates and the segment length; determining the coordinates of the current position where the slider should be displayed and displaying the slider based on the sorting position, the segment length and the minimum edge coordinates of the slider; determining the progress display area based on the current center coordinates and the center coordinates of the first node icon and rendering and displaying; rendering and displaying the node view of the current position to be displayed. The scheme disclosed by the present invention can arbitrarily select the progress of the slider according to the user's sliding operation.

Description

Technical Field

[0001] The present invention belongs to the technical field of slide bar control, and in particular relates to a slide bar display control method, device and storage medium. Background Art

[0002] The slider is a common functional component in the front-end user interface design (UI). Users can control the back-end by sliding the slider, such as controlling the playback progress of audio and video.

[0003] At present, when the sliders on the market are sliding, their sliding progress is set to some fixed values ​​through a list, and the end point of the slider will only stay at the position corresponding to the most recent fixed value. That is, when the slider is slid, the end point of the slider will only stay at some predetermined positions, and the progress of the slider cannot be arbitrarily selected according to the user's sliding operation, resulting in a poor user experience.

[0004] Therefore, how to provide an effective solution so as to arbitrarily select the progress of the slide bar according to the user's sliding operation is a problem to be solved in the prior art. Summary of the invention

[0005] The purpose of the present invention is to provide a display control method, device and storage medium of a sliding bar to solve the above problems existing in the prior art.

[0006] In order to achieve the above object, the present invention adopts the following technical solutions:

[0007] In a first aspect, the present invention provides a display control method for a sliding bar, which is used for display control of a sliding bar, wherein the sliding bar comprises a first sliding rail, a slider and a plurality of node icons, wherein a layer where the plurality of node icons are located is located between a layer where the first sliding rail is located and a layer where the slider is located, wherein the plurality of node icons are uniformly distributed in sequence along a sliding direction of the first sliding rail, and wherein a center coordinate of a first node icon among the plurality of node icons coincides with a start coordinate of the first sliding rail, and a center coordinate of a last node icon among the plurality of node icons coincides with an end coordinate of the first sliding rail, wherein the method comprises:

[0008] In response to a sliding operation of the user, determining edge coordinates of the slider based on the center coordinates of a first node icon and the center coordinates of a last node icon among the plurality of node icons, the edge coordinates including a minimum edge coordinate;

[0009] Determining the current edge coordinates of the slider and the current center coordinates of the slider based on the sliding displacement corresponding to the sliding operation in the sliding direction;

[0010] Determining a segment length of a segment composed of two adjacent node icons based on a slide rail length of the first slide rail and the number of icons corresponding to the plurality of node icons;

[0011] When the sliding operation ends, determining the order of the node icon to which the slider should slide among the multiple node icons according to the current edge coordinates of the slider, the minimum edge coordinates of the slider, and the segment length;

[0012] Based on the ranking order, the segment length and the minimum edge coordinate of the slider, the coordinates of the current position where the slider should be displayed are determined, and the slider is displayed at the coordinates of the current position where the slider should be displayed;

[0013] Based on the current center coordinates and the center coordinates of a first node icon among the multiple node icons, determining a progress display area on the first slide rail, and rendering and displaying the progress display area on the first slide rail;

[0014] The multiple node icons are traversed, and all node views whose center coordinates are smaller than the coordinates of the current display position of the slider are rendered and displayed.

[0015] Based on the above disclosed content, the present invention determines the edge coordinates of the slider based on the center coordinates of the first node icon and the center coordinates of the last node icon in multiple node icons in response to the user's sliding operation, and the edge coordinates include the minimum edge coordinates; determines the current edge coordinates of the slider based on the sliding displacement corresponding to the sliding operation in the sliding direction; determines the segment length of the segment composed of two adjacent node icons based on the slide track length of the first slide track and the number of icons corresponding to the multiple node icons; when the sliding operation is ended, determines the sorting position of the node icon to which the slider should slide in the multiple node icons according to the current edge coordinates of the slider, the minimum edge coordinates of the slider and the segment length; determines the coordinates of the current display position of the slider based on the sorting position, the segment length and the minimum edge coordinates of the slider, and displays the slider at the coordinates of the current display position of the slider; determines the progress display area on the first slide track based on the center coordinates of the slider and the center coordinates of the first node icon in multiple node icons, and renders and displays the progress display area on the first slide track; traverses multiple node icons, and renders and displays all node views whose center coordinates are smaller than the coordinates of the current display position of the slider. In this way, the progress display area on the first slide rail can be any area within the range of the first slide rail, and the progress of the slide bar can be arbitrarily selected according to the user's sliding operation, which can provide users with a better user experience and facilitate practical application and promotion.

[0016] In a possible design, the edge coordinates further include a maximum edge coordinate, and determining the current edge coordinates of the slider based on the sliding displacement corresponding to the sliding operation in the sliding direction includes:

[0017] Summing the minimum edge coordinate and the sliding displacement to obtain the current edge coordinate of the slider;

[0018] If the sum of the minimum edge coordinate and the sliding displacement is smaller than the minimum edge coordinate, the minimum edge coordinate is used as the current edge coordinate of the slider;

[0019] If the sum of the minimum edge coordinate and the sliding displacement is greater than the maximum edge coordinate, the maximum edge coordinate is used as the current edge coordinate of the slider.

[0020] In a possible design, the minimum edge coordinate is view_min-thumImageView / 2, and the maximum edge coordinate is view_max-thumImageView / 2, where view_min represents the center coordinate of the first node icon among the multiple node icons, view_max represents the center coordinate of the last node icon among the multiple node icons, and min-thumImageView / 2 represents half of the difference between the coordinates of the two end points of the slider.

[0021] In a possible design, determining the ranking of the node icon to which the slider should slide among the multiple node icons based on the current edge coordinate of the slider, the minimum edge coordinate of the slider, and the segment length includes:

[0022] Divide the distance between the current edge coordinate and the minimum edge coordinate by the segment length to obtain a floating point value;

[0023] The floating point value is rounded to an integer to obtain the ranking position.

[0024] In a possible design, after rendering and displaying all node views whose center coordinates are smaller than the coordinates of the current display position of the slider, the method further includes:

[0025] The sliding displacement corresponding to the sliding operation in the sliding direction is reset to zero.

[0026] In a possible design, the slide bar further includes a plurality of text label controls, the plurality of text label controls are equal in number to the plurality of node icons and correspond one to one, the plurality of text label controls are evenly distributed on one side of the first slide rail, and the projection coordinates of the center point of any text label in the plurality of text label controls on the first slide rail coincide with the center coordinates of the corresponding node icon;

[0027] The method further comprises:

[0028] The text labels corresponding to the rendered node views are rendered and displayed synchronously.

[0029] In a possible design, the sliding bar further includes a second sliding rail, the second sliding rail overlaps with the first sliding rail, and the layer where the second sliding rail is located is below the layer where the first sliding rail is located.

[0030] In a second aspect, the present invention provides a display control device for a sliding bar, which is used for display control of the sliding bar, wherein the sliding bar comprises a first sliding rail, a slider and a plurality of node icons, wherein a layer where the plurality of node icons are located is located between a layer where the first sliding rail is located and a layer where the slider is located, wherein the plurality of node icons are uniformly distributed in sequence along a sliding direction of the first sliding rail, and wherein a center coordinate of a first node icon among the plurality of node icons coincides with a start coordinate of the first sliding rail, and a center coordinate of a last node icon among the plurality of node icons coincides with an end coordinate of the first sliding rail, wherein the display control device for the sliding bar comprises:

[0031] A first determining unit, configured to respond to a sliding operation of a user and determine edge coordinates of the slider based on the center coordinates of a first node icon and a last node icon among the plurality of node icons, wherein the edge coordinates include a minimum edge coordinate;

[0032] a second determining unit, configured to determine the current edge coordinates of the slider and the current center coordinates of the slider based on a sliding displacement corresponding to the sliding operation in the sliding direction;

[0033] A third determining unit is used to determine a segment length of a segment composed of two adjacent node icons based on a slide rail length of the first slide rail and the number of icons corresponding to the plurality of node icons;

[0034] a fourth determining unit, configured to determine, when the sliding operation ends, a ranking of the node icon to which the slider should slide among the plurality of node icons according to the current edge coordinates of the slider, the minimum edge coordinates of the slider, and the segment length;

[0035] a fifth determining unit, configured to determine the coordinates of the current display position of the slider based on the ranking order, the segment length and the minimum edge coordinates of the slider, and display the slider at the coordinates of the current display position of the slider;

[0036] a sixth determining unit, configured to determine a progress display area on the first slide rail based on the current center coordinates and the center coordinates of a first node icon among the plurality of node icons;

[0037] A first rendering and displaying unit, used for rendering and displaying a progress display area on the first slide rail;

[0038] The second rendering and display unit is used to traverse the multiple node icons and render and display all node views whose center coordinates are smaller than the coordinates of the current display position of the slider.

[0039] In a third aspect, the present invention provides a display control device for a sliding bar, comprising a memory, a processor and a transceiver that are communicatively connected in sequence, 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 display control method for the sliding bar as described in the first aspect above.

[0040] In a fourth aspect, the present invention provides a computer-readable storage medium having instructions stored thereon. When the instructions are run on a computer, the display control method of the sliding bar described in the first aspect is executed.

[0041] In a fifth aspect, the present invention provides a computer program product comprising instructions, which, when executed on a computer, causes the computer to execute the display control method of the sliding bar as described in the first aspect. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] Figure 1 A flowchart of a method for controlling the display of a slide bar provided in an embodiment of the present application;

[0043] Figure 2 A schematic diagram of the structure of a display control device for a slide bar provided in an embodiment of the present application;

[0044] Figure 3 A schematic structural diagram of another display control device for a sliding bar provided in an embodiment of the present application. DETAILED DESCRIPTION

[0045] In order 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 combination with the drawings and the description of the embodiments or the prior art. Obviously, the following description of the structure of the drawings is only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work. It should be noted that the description of these embodiments is used to help understand the present invention, but does not constitute a limitation of the present invention.

[0046] Example:

[0047] In order to facilitate the arbitrary selection of the progress of the sliding bar, the embodiments of the present application provide a display control method, device and storage medium of the sliding bar, which can arbitrarily select the progress of the sliding bar according to the user's sliding operation, so that the user has a better user experience. The display control method of the sliding bar provided in the embodiment of the application can be applied to a user terminal with a touch display screen, which can be a smart phone, a tablet computer, a personal digital assistant, etc.

[0048] The following is a detailed description of the display control method of the slide bar provided in the embodiment of the present application. It is understood that the execution subject does not constitute a limitation on the embodiment of the present application.

[0049] like Figure 1 The figure is a flow chart of a display control method of a sliding bar provided by an embodiment of the present application. The display control method of the sliding bar can be used for display control of the sliding bar. The sliding bar includes a first sliding rail, a slider and a plurality of node icons. The layer where the plurality of node icons are located is located between the layer where the first sliding rail is located and the layer where the slider is located. The plurality of node icons are evenly distributed in sequence along the sliding direction of the first sliding rail, and the center coordinates of the first node icon among the plurality of node icons coincide with the starting coordinates of the first sliding rail, and the center coordinates of the last node icon among the plurality of node icons coincide with the ending coordinates of the first sliding rail. The display control method of the sliding bar may include the following steps:

[0050] Step S101. In response to a sliding operation of the user, the edge coordinates of the slider are determined based on the center coordinates of the first node icon and the center coordinates of the last node icon among the plurality of node icons.

[0051] When the user needs to adjust the progress of the slider, he can click the touch screen and slide. The click position can be the slider on the screen or the area outside the slider near the slider. At this time, the user terminal responds to the user's sliding operation and determines the edge coordinates of the slider based on the center coordinates of the first node icon and the center coordinates of the last node icon in the multiple node icons. Among them, the edge coordinates include the minimum edge coordinates and can also include the maximum edge coordinates.

[0052] In the embodiments of the present application, the sliding bar can be set horizontally, tilted or vertically, and the embodiments of the present application do not make specific limitations. For the convenience of explanation, and considering that the sliding bar is set horizontally in most cases, the embodiments of the present application are described below using the sliding bar set horizontally as an example.

[0053] The minimum edge coordinate of the slider may refer to the edge coordinate of the slider when the slider progress value is the lowest; the maximum edge coordinate of the slider may refer to the edge coordinate of the slider when the slider progress value is the largest. For example, when the slider is set horizontally, the minimum edge coordinate of the slider may be the coordinate of the leftmost edge of the slider when the slider progress value is the lowest; the maximum edge coordinate of the slider may be the coordinate of the leftmost edge of the slider when the slider progress value is the largest. At this time, the minimum edge coordinate of the slider can be expressed as view_min-thumImageView / 2, and the maximum edge coordinate can be expressed as view_max-thumImageView / 2, where view_min represents the center coordinate of the first node icon among multiple node icons, view_max represents the center coordinate of the last node icon among multiple node icons, and min-thumImageView / 2 represents half of the difference between the coordinates of the two end points of the slider.

[0054] Step S102: Based on the sliding displacement corresponding to the sliding operation in the sliding direction, determine the current edge coordinates of the slider and the current center coordinates of the slider.

[0055] Specifically, the minimum edge coordinate and the sliding displacement may be summed to obtain the current edge coordinate of the slider.

[0056] For example, if the minimum edge coordinate is (-1, 0), and the corresponding sliding displacement in the sliding direction (ie, horizontal direction) is (2, 0), then the current edge coordinate of the slider can be expressed as (1, 0).

[0057] In one or more embodiments, when sliding in the opposite direction of the sliding direction of the slider, the corresponding sliding displacement in the sliding direction is negative, which will cause the sum of the minimum edge coordinate and the sliding displacement to be less than the minimum edge coordinate. In this case, the minimum edge coordinate can be used as the current edge coordinate of the slider. When sliding in the sliding direction of the slider for too long a distance, the sum of the minimum edge coordinate and the sliding displacement will be greater than the maximum edge coordinate. In this case, the maximum edge coordinate can be used as the current edge coordinate of the slider. In this way, the current edge coordinate of the slider is always between the minimum edge coordinate and the maximum edge coordinate, that is, the slider can always be within the range of both ends of the first slide rail, avoiding the progress of the slider exceeding the display range of the slider during subsequent display.

[0058] The current center coordinates of the slider can be obtained by adding the current edge coordinates of the slider to half of the difference between the coordinates of the two end points of the slider. It can be understood that if the current edge coordinates of the slider refer to the coordinates of the right edge of the slider, the current center coordinates of the slider can be the current edge coordinates of the slider minus half of the difference between the coordinates of the two end points of the slider.

[0059] Step S103: Based on the length of the first slide rail and the number of icons corresponding to the plurality of node icons, determine the segment length of a segment formed by two adjacent node icons.

[0060] In the embodiment of the present application, multiple node icons are uniformly distributed in sequence along the sliding direction of the first slide rail, that is, the distance between any two adjacent node icons is the same, so the segment length of the segment composed of two adjacent node icons can be expressed as sliderWidth / (viewconut-1), where sliderWidth represents the coordinate difference between the two end points of the first slide rail, and viewconut represents the total number of node icons. The segment length can be a vector (the coordinate difference between the coordinates corresponding to the two adjacent node icons). Considering that the slider is set horizontally, when calculating the coordinate difference, the coordinates in the vertical direction (y direction) can be ignored, and only the coordinates in the horizontal direction (x direction) are considered. The segment length can also be simplified to a coordinate difference in the horizontal direction. For example, the coordinate difference between the two end points of the first slide rail in the horizontal direction is 10, and the total number of node icons is 6. Then the segment length of the segment composed of two adjacent node icons can be expressed as 10 / (6-1)=2.

[0061] Step S104: When the sliding operation ends, the order of the node icon to which the slider should slide among the multiple node icons is determined according to the current edge coordinates of the slider, the minimum edge coordinates of the slider, and the segment length.

[0062] When the sliding gesture ends, a signal indicating the end of the sliding gesture will be fed back. At this time, the ranking of the node icon to which the slider should slide among multiple node icons can be determined based on the current edge coordinates of the slider, the minimum edge coordinates of the slider, and the segment length.

[0063] Specifically, the distance difference between the current edge coordinate and the minimum edge coordinate may be divided by the segment length to obtain a floating point value, and then the floating point value may be rounded to obtain the ranking position.

[0064] For example, the coordinate corresponding to the current edge coordinate is 4 (because the slider is set horizontally, only the value in the x direction is considered here), the minimum edge coordinate is -1, and the segment length is 2. The sorting rank can be [4-(-1)] / 2 and rounded to the nearest integer, that is, the sorting rank is 3.

[0065] Step S105: Based on the ranking order, the segment length and the minimum edge coordinate of the slider, the coordinates of the current position where the slider should be displayed are determined, and the slider is displayed at the coordinates of the current position where the slider should be displayed.

[0066] The coordinates of the current position where the slider should be displayed can be expressed as min_c+index*itemRange, where min_c represents the minimum edge coordinate, itemRange represents the segment length, and index represents the sorting position. The current position where the slider should be displayed can be the position where the left edge of the slider should be displayed.

[0067] Step S106: Based on the current center coordinates and the center coordinates of the first node icon among the multiple node icons, determine the progress display area on the first slide rail, and render and display the progress display area on the first slide rail.

[0068] Specifically, the area between the current center coordinates and the center coordinates of the first node icon on the first rail can be set as the progress display area, and the progress display area can be rendered in a specified color, such as red, yellow or green.

[0069] Step S107: traverse multiple node icons, and render and display all node views whose center coordinates are smaller than the coordinates of the current display position of the slider.

[0070] In an embodiment of the present application, when rendering and displaying the node view, the node view can be rendered in the same color as the progress display area to ensure that the color of the slider remains uniform.

[0071] In one or more embodiments, after rendering and displaying all node views whose center coordinates are smaller than the coordinates of the current display position of the slider, the sliding displacement corresponding to the sliding operation in the sliding direction can also be reset to zero to ensure that the progress of the slider is accurately displayed the next time the slider is slid.

[0072] In one or more embodiments, the slider also includes a plurality of text label controls, the plurality of text label controls are equal in number to the plurality of node icons and correspond one to one, the plurality of text label controls are evenly distributed on one side of the first slide rail, and the projection coordinates of the center point of any text label in the plurality of text label controls on the first slide rail coincide with the center coordinates of the corresponding node icon. When rendering and displaying the node view, the text label corresponding to the rendered and displayed node view can be rendered and displayed synchronously, such as synchronously displaying the text label corresponding to the rendered and displayed node view in a specified color. The text corresponding to the plurality of text labels can be used to indicate the sliding progress of the slider, so as to facilitate the user to indicate the sliding progress of the slider according to the text of the text label or the current sliding progress of the slider.

[0073] In addition, the slider may further include a second slider, the second slider overlaps the first slider, and the layer where the second slider is located is located below the layer where the first slider is located. The second slider may be set to a color different from the surrounding background color, the color rendered by the progress display area, and the color rendered by the node view, such as light gray or other lighter colors, so that the outline of the slider can be clearly displayed on the display screen to facilitate sliding the slider.

[0074] In summary, the display control method of the slider provided by the embodiment of the present application determines the edge coordinates of the slider based on the center coordinates of the first node icon and the center coordinates of the last node icon in multiple node icons in response to the user's sliding operation, and the edge coordinates include the minimum edge coordinates; determines the current edge coordinates of the slider based on the sliding displacement corresponding to the sliding operation in the sliding direction; determines the segment length of the segment composed of two adjacent node icons based on the length of the first slide rail and the number of icons corresponding to the multiple node icons; when the sliding operation is ended, determines the sorting position of the node icon to which the slider should slide in the multiple node icons according to the current edge coordinates of the slider, the minimum edge coordinates of the slider and the segment length; determines the coordinates of the current display position of the slider based on the sorting position, the segment length and the minimum edge coordinates of the slider, and displays the slider at the coordinates of the current display position of the slider; determines the progress display area on the first slide rail based on the center coordinates of the slider and the center coordinates of the first node icon in multiple node icons, and renders and displays the progress display area on the first slide rail; traverses multiple node icons, and renders and displays all node views whose center coordinates are less than the coordinates of the current display position of the slider. In this way, the progress display area on the first slide rail can be any area within the range of the first slide rail, that is, the progress of the slider can be arbitrarily selected according to the user's sliding operation, which can enable users to have a better use experience and facilitate practical application and promotion. At the same time, when the sum of the minimum edge coordinate and the sliding displacement is less than the minimum edge coordinate, the minimum edge coordinate is used as the current edge coordinate of the slider, and when the sum of the minimum edge coordinate and the sliding displacement is greater than the maximum edge coordinate, the maximum edge coordinate is used as the current edge coordinate of the slider, so that the current edge coordinate of the slider is always between the minimum edge coordinate and the maximum edge coordinate, that is, the slider can always be within the range of both ends of the first slide rail, avoiding the progress of the slider exceeding the display range of the slider during subsequent display. Secondly, by setting multiple text label controls, the text corresponding to the multiple text labels can be used to indicate the sliding progress of the slider, so that the user can use the text of the text label or the current sliding progress of the slider. In addition, by setting a second slide rail that is different from the surrounding background color, the color rendered by the progress display area, and the color rendered by the node view, the outline of the slider can be clearly displayed on the display screen to facilitate sliding the slider.

[0075] Second, see Figure 2, an embodiment of the present application provides a display control device for a sliding bar, which is used for display control of the sliding bar, wherein the sliding bar includes a first sliding rail, a slider, and a plurality of node icons, wherein a layer where the plurality of node icons are located is located between a layer where the first sliding rail is located and a layer where the slider is located, wherein the plurality of node icons are uniformly distributed in sequence along a sliding direction of the first sliding rail, and wherein a center coordinate of a first node icon among the plurality of node icons coincides with a start coordinate of the first sliding rail, and a center coordinate of a last node icon among the plurality of node icons coincides with an end coordinate of the first sliding rail, wherein the display control device for the sliding bar includes:

[0076] A first determining unit, configured to respond to a sliding operation of a user and determine edge coordinates of the slider based on the center coordinates of a first node icon and a last node icon among the plurality of node icons, wherein the edge coordinates include a minimum edge coordinate;

[0077] a second determining unit, configured to determine the current edge coordinates of the slider and the current center coordinates of the slider based on a sliding displacement corresponding to the sliding operation in the sliding direction;

[0078] A third determining unit is used to determine a segment length of a segment composed of two adjacent node icons based on a slide rail length of the first slide rail and the number of icons corresponding to the plurality of node icons;

[0079] a fourth determining unit, configured to determine, when the sliding operation ends, a ranking of the node icon to which the slider should slide among the plurality of node icons according to the current edge coordinates of the slider, the minimum edge coordinates of the slider, and the segment length;

[0080] a fifth determining unit, configured to determine the coordinates of the current display position of the slider based on the ranking order, the segment length and the minimum edge coordinates of the slider, and display the slider at the coordinates of the current display position of the slider;

[0081] a sixth determining unit, configured to determine a progress display area on the first slide rail based on the current center coordinates and the center coordinates of a first node icon among the plurality of node icons;

[0082] A first rendering and displaying unit, used for rendering and displaying a progress display area on the first slide rail;

[0083] The second rendering and display unit is used to traverse the multiple node icons and render and display all node views whose center coordinates are smaller than the coordinates of the current display position of the slider.

[0084] The working process, working details and technical effects of the device provided in the second aspect of this embodiment can be found in the first aspect of the embodiment and will not be described in detail here.

[0085] like Figure 3 As shown, the third aspect of an embodiment of the present application provides a display control device for a sliding bar, comprising a memory, a processor and a transceiver that are communicatively connected in sequence, 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 display control method for the sliding bar as described in the first aspect of the embodiment.

[0086] 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 memory (FIFO) and / or first-in-last-out memory (FILO), etc.; the processor may be but is not limited to a microprocessor of the STM32F105 series, an ARM (Advanced RISC-Machines), an X86 or other architecture processor, or a processor with an integrated NPU (neural-network processing units); the transceiver may be but is not limited to a WiFi (Wireless Fidelity) wireless transceiver, a Bluetooth wireless transceiver, a General Packet Radio Service (GPRS) wireless transceiver, a ZigBee protocol (a low-power local area network protocol based on the IEEE802.15.4 standard, ZigBee) wireless transceiver, a 3G transceiver, a 4G transceiver and / or a 5G transceiver, etc.

[0087] The working process, working details and technical effects of the device provided in the third aspect of this embodiment can be found in the first aspect of the embodiment and will not be described in detail here.

[0088] The fourth aspect of this embodiment provides a computer-readable storage medium storing instructions including the display control method of the sliding bar described in the first aspect of the embodiment, that is, the computer-readable storage medium stores instructions, and when the instructions are executed on a computer, the display control method of the sliding bar described in the first aspect is executed. The computer-readable storage medium refers to a carrier for storing data, which may include but is not limited to a floppy disk, an optical disk, a hard disk, a flash memory, a USB flash drive and / or a memory stick, etc., and the computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices.

[0089] The working process, working details and technical effects of the computer-readable storage medium provided in the fourth aspect of this embodiment can be found in the first aspect of the embodiment and will not be repeated here.

[0090] The fifth aspect of this embodiment provides a computer program product containing instructions, which, when executed on a computer, enables the computer to execute the display control method of the sliding bar as described in the first aspect of the embodiment, wherein the computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device.

[0091] The multiple embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Those of ordinary skill in the art may understand and implement it without creative work.

[0092] Through the description of the above implementation methods, those skilled in the art can clearly understand that each implementation method can be implemented by means of software plus a necessary general hardware platform, and of course, by hardware. Based on this understanding, the above technical solution can essentially or contribute to the prior art in the form of a software product, which can be stored in a computer-readable storage medium, such as ROM / RAM, a magnetic disk, an optical disk, etc., including a number of instructions for enabling a warehouse code merging device to execute the methods described in each embodiment or some parts of the embodiments.

[0093] Finally, it should be noted that the above description is only a preferred embodiment of the present invention and is not intended to limit the protection scope of the present invention. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A method for controlling the display of a sliding bar, for controlling the display of a sliding bar, wherein the sliding bar comprises a first sliding rail, a slider and a plurality of node icons, wherein a layer where the plurality of node icons are located is located between a layer where the first sliding rail is located and a layer where the slider is located, wherein the plurality of node icons are uniformly distributed in sequence along a sliding direction of the first sliding rail, and wherein the center coordinates of a first node icon among the plurality of node icons coincide with the starting coordinates of the first sliding rail, and the center coordinates of a last node icon among the plurality of node icons coincide with the ending coordinates of the first sliding rail, wherein: The method comprises: In response to a sliding operation of the user, determining edge coordinates of the slider based on the center coordinates of a first node icon and the center coordinates of a last node icon among the plurality of node icons, the edge coordinates including a minimum edge coordinate; Determining the current edge coordinates of the slider and the current center coordinates of the slider based on the sliding displacement corresponding to the sliding operation in the sliding direction; Determining a segment length of a segment composed of two adjacent node icons based on a slide rail length of the first slide rail and the number of icons corresponding to the plurality of node icons; When the sliding operation ends, determining the order of the node icon to which the slider should slide among the multiple node icons according to the current edge coordinates of the slider, the minimum edge coordinates of the slider, and the segment length; Based on the ranking order, the segment length and the minimum edge coordinate of the slider, the coordinates of the current position where the slider should be displayed are determined, and the slider is displayed at the coordinates of the current position where the slider should be displayed; Based on the current center coordinates and the center coordinates of a first node icon among the multiple node icons, determining a progress display area on the first slide rail, and rendering and displaying the progress display area on the first slide rail; The multiple node icons are traversed, and all node views whose center coordinates are smaller than the coordinates of the current display position of the slider are rendered and displayed.

2. The method according to claim 1, characterized in that The edge coordinates also include maximum edge coordinates. The current edge coordinates of the slider are determined based on the sliding displacement corresponding to the sliding operation in the sliding direction, including: Summing the minimum edge coordinate and the sliding displacement to obtain the current edge coordinate of the slider; If the sum of the minimum edge coordinate and the sliding displacement is smaller than the minimum edge coordinate, the minimum edge coordinate is used as the current edge coordinate of the slider; If the sum of the minimum edge coordinate and the sliding displacement is greater than the maximum edge coordinate, the maximum edge coordinate is used as the current edge coordinate of the slider.

3. The method according to claim 2, characterized in that The minimum edge coordinate is view_min-thumImageView / 2, and the maximum edge coordinate is view_max-thumImageView / 2, where view_min represents the center coordinate of the first node icon among the multiple node icons, view_max represents the center coordinate of the last node icon among the multiple node icons, and min-thumImageView / 2 represents half of the difference between the coordinates of the two end points of the slider.

4. The method according to claim 1, characterized in that: The determining, based on the current edge coordinate of the slider, the minimum edge coordinate of the slider, and the segment length, the ranking of the node icon to which the slider should slide among the multiple node icons comprises: Divide the distance between the current edge coordinate and the minimum edge coordinate by the segment length to obtain a floating point value; The floating point value is rounded to an integer to obtain the ranking position.

5. The method according to claim 1, characterized in that After rendering and displaying all the node views whose center coordinates are smaller than the coordinates of the current display position of the slider, the method further includes: The sliding displacement corresponding to the sliding operation in the sliding direction is reset to zero.

6. The method according to claim 1, characterized in that The slide bar further includes a plurality of text label controls, the plurality of text label controls are equal in number to the plurality of node icons and correspond one to one, the plurality of text label controls are evenly distributed on one side of the first slide rail, and the projection coordinates of the center point of any text label in the plurality of text label controls on the first slide rail coincide with the center coordinates of the corresponding node icon; The method further comprises: The text labels corresponding to the rendered node views are rendered and displayed synchronously.

7. The method according to claim 1, characterized in that The slide bar further includes a second slide rail, the second slide rail overlaps with the first slide rail, and the layer where the second slide rail is located is located below the layer where the first slide rail is located.

8. A display control device for a slide bar, used for display control of the slide bar, the slide bar comprising a first slide rail, a slider and a plurality of node icons, the layer where the plurality of node icons are located is located between the layer where the first slide rail is located and the layer where the slider is located, the plurality of node icons are uniformly distributed in sequence along the sliding direction of the first slide rail, and the center coordinates of the first node icon among the plurality of node icons coincide with the starting coordinates of the first slide rail, and the center coordinates of the last node icon among the plurality of node icons coincide with the ending coordinates of the first slide rail, characterized in that: include: A first determining unit, configured to respond to a sliding operation of a user and determine edge coordinates of the slider based on the center coordinates of a first node icon and a last node icon among the plurality of node icons, wherein the edge coordinates include a minimum edge coordinate; a second determining unit, configured to determine the current edge coordinates of the slider and the current center coordinates of the slider based on a sliding displacement corresponding to the sliding operation in the sliding direction; A third determining unit is used to determine a segment length of a segment composed of two adjacent node icons based on a slide rail length of the first slide rail and the number of icons corresponding to the plurality of node icons; a fourth determining unit, configured to determine, when the sliding operation ends, a ranking of the node icon to which the slider should slide among the plurality of node icons according to the current edge coordinates of the slider, the minimum edge coordinates of the slider, and the segment length; a fifth determining unit, configured to determine the coordinates of the current display position of the slider based on the ranking order, the segment length and the minimum edge coordinates of the slider, and display the slider at the coordinates of the current display position of the slider; a sixth determining unit, configured to determine a progress display area on the first slide rail based on the current center coordinates and the center coordinates of a first node icon among the plurality of node icons; A first rendering and displaying unit, used for rendering and displaying a progress display area on the first slide rail; The second rendering and display unit is used to traverse the multiple node icons and render and display all node views whose center coordinates are smaller than the coordinates of the current display position of the slider.

9. A display control device for a sliding bar, characterized in that: It comprises a memory, a processor and a transceiver which are communicatively connected in sequence, 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 to execute the display control method of the sliding bar as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores instructions, and when the instructions are executed on a computer, the display control method of the sliding bar according to any one of claims 1 to 7 is executed.

Images