Display method, device, equipment, and storage medium

Abstract

The embodiment of the present application discloses a display method, the method comprising: obtaining a selection operation of a target object in a first direction with respect to a first display area of ​​a selector; the interface area of ​​the selector comprises a first display area and a second display area; determining a target element located in the second display area based on the selection operation and the display elements of the first display area; displaying the target element in the first display area, and displaying a candidate element in a target item in the second display area based on a second direction, the target item being a selection item to which the target element belongs, and the candidate element being an element other than the target element among the elements included in the target item. In addition, the embodiment of the present application also discloses a display device, an apparatus, and a storage medium.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of computer technology, and relate to, but are not limited to, a display method and apparatus, device, and storage medium. Background Art

[0002] In the related art, open-source selectors provided by third-party developers in the Android system have a fixed size and only support text-type data. As can be seen, as the type of data used in these open-source selectors increases, the area required to accommodate that data type also increases linearly, affecting the selector's size and causing it to be partially displayed on the display interface. This restricts the selector's scope of use. Summary of the Invention

[0003] In view of this, the embodiments of the present application provide a display method and apparatus, device, and storage medium to solve at least one problem existing in the related art. The selector provided in the embodiments of the present application will not have the problem of incomplete display as the type of data used increases, thereby expanding the scope of use of the selector.

[0004] The technical solution of the embodiment of the present application is implemented as follows:

[0005] In a first aspect, an embodiment of the present application provides a display method, the method comprising:

[0006] Acquire a selection operation of a target object in a first direction on a first display area of ​​a selector; the interface area of ​​the selector includes the first display area and the second display area;

[0007] determining a target element located in the second display area based on the selection operation and the display elements of the first display area;

[0008] The target element is displayed in the first display area, and the selected elements in the target item are displayed in the second display area based on the second direction. The target item is the selection item to which the target element belongs, and the selected elements are the elements included in the target item other than the target element.

[0009] In a second aspect, an embodiment of the present application provides a display device, comprising: an acquisition module, a first determination module, and a display module; wherein,

[0010] The acquisition module is used to acquire a selection operation of a target object in a first direction with respect to a first display area of ​​a selector; the interface area of ​​the selector includes the first display area and the second display area;

[0011] The first determining module is configured to determine a target element located in the second display area based on the selection operation and the display elements in the first display area;

[0012] The display module is used to display the target element in the first display area and display the selected elements in the target item in the second display area based on the second direction. The target item is the selection item to which the target element belongs, and the selected elements are the elements included in the target item other than the target element.

[0013] In a third aspect, an embodiment of the present application provides a computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps in the above-mentioned display method when executing the computer program.

[0014] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium having a computer program stored thereon, which implements the steps in the above-mentioned display method when executed by a processor.

[0015] In an embodiment of the present application, a display method is provided, which obtains a selection operation of a target object in a first direction with respect to a first display area of ​​a selector; the interface area of ​​the selector includes a first display area and a second display area; a target element located in the second display area is determined based on the selection operation and the display elements of the first display area; the target element is displayed in the first display area, and a candidate element in the target item is displayed in the second display area based on the second direction, the target item is a selection item to which the target element belongs, and the candidate element is an element included in the target item other than the target element. The selector provided in the embodiment of the present application will not have the problem of incomplete display as the type of data used increases, thereby expanding the scope of use of the selector and improving the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] Figure 1 A schematic diagram of an application of the display method provided in an embodiment of the present application;

[0017] Figure 2 A schematic diagram of the implementation flow of the display method provided in an embodiment of the present application;

[0018] Figure 3 A schematic diagram of a time selector provided in an embodiment of the present application;

[0019] Figure 4 A schematic diagram of a date and time selector provided in an embodiment of the present application;

[0020] Figure 5A schematic diagram of a selector including a vertical sliding window provided in an embodiment of the present application;

[0021] Figure 6 A schematic diagram of a selector including multiple vertical sliding windows provided in an embodiment of the present application;

[0022] Figure 7 The types of items supported by the vertical sliding window provided in the embodiment of the present application;

[0023] Figure 8 A schematic diagram of coordinates provided for an embodiment of the present application;

[0024] Figure 9 A schematic diagram of the structure of the selector provided in an embodiment of the present application;

[0025] Figure 10 A schematic diagram of the structure of a display device provided in an embodiment of the present application;

[0026] Figure 11 A schematic diagram of a hardware entity of a computer device according to an embodiment of the present application. DETAILED DESCRIPTION

[0027] To make the purpose, technical solutions and advantages of the embodiments of the present application clearer, the specific technical solutions of the application will be further described in detail below in conjunction with the drawings in the embodiments of the present application. The following embodiments are used to illustrate the present application but are not intended to limit the scope of the present application.

[0028] In order to better understand the present application, before further describing the embodiments of the present application in detail, the nouns and terms involved in the embodiments of the present application are explained. The nouns and terms involved in the embodiments of the present application are subject to the following explanations.

[0029] 1) Elements, the data provided by the selector for selection, for example: the elements of the selector for selecting a date include: numbers representing years: 1980 to 2020, numbers representing months: 1 to 12, and numbers representing days: 1 to 31.

[0030] 2) Selections: The category of the element to be selected in the selector. For example, if the elements of a date selector include: year numbers (1980 to 2020), month numbers (1 to 12), and day numbers (1 to 31), then the selector's selections include: year, month, and day. It consists of various types of data and objects that store them.

[0031] 3) Subcontainer refers to a container that can store elements.

[0032] 4) A sliding container is a container that can store all elements corresponding to a selection item. The sliding container can receive a user's sliding operation and select different elements as target elements based on the sliding operation.

[0033] 5) The first display area is an area in the display interface of the selector that can receive the user's selection operation. The first display area is visible.

[0034] 6) The second display area is an inoperable area outside the first display area in the display interface of the selector. The second display area cannot receive user selection operations. The second display area can be completely invisible or partially invisible.

[0035] The embodiments of the present application may provide a display method, apparatus, device, and storage medium. In practical applications, the display method may be implemented by a display device, and the various functional entities in the display device may be collaboratively implemented by hardware resources of a computer device (e.g., a terminal device or a server), such as computing resources such as a processor, and communication resources (e.g., for supporting various communication methods such as optical cables and cellular communications).

[0036] The display method of the embodiment of the present application can be applied to Figure 1 The terminal shown, such as Figure 1 shown.

[0037] Terminal 11 obtains a selection operation of a target object in a first direction on a first display area of ​​a selector; determines a target element located in a second display area based on the selection operation and the display elements of the first display area; displays the target element in the first display area, and displays the target element to be selected in the target item in the second area based on the second direction. Here, the target object can be a user, who performs a horizontal selection operation on the display interface of terminal 11 on the operable area of ​​the selector, determines a target element located in an inoperable area based on the display elements of the current operable area and the selection operation, displays the target element in the operable area, and displays the target element in the same target item as the target element in the vertical direction.

[0038] Next, combine Figure 1 The application diagram of the display method shown illustrates various embodiments of the display method, device, equipment and storage medium provided in the embodiments of the present application.

[0039] The present application provides a display method, which is applied to a terminal, which may be a mobile terminal. The functions implemented by the method can be implemented by a processor in a computer device calling program code. Of course, the program code can be stored in a computer storage medium. Therefore, the computer device includes at least a processor and a storage medium.

[0040] Figure 2 This is a schematic diagram of an implementation flow of a display method according to an embodiment of the present application, as shown in FIG. Figure 2 As shown, the method may include the following steps:

[0041] S201: Acquire a selection operation of a target object in a first direction of a first display area of ​​a selector;

[0042] Here, the interface area of ​​the selector includes a first display area and a second display area; wherein the first display area is an operable area, and the second display area is an inoperable area. The target object can be a user performing a selection operation on the selector, and the first direction can be either horizontal or vertical. In the embodiment of the present application, the first direction is the distribution direction of the selected items in the selector.

[0043] In one example, the first direction is a horizontal operation, and the user performs a selection operation in the horizontal direction of the operable area of ​​the selector, and the client obtains the user's selection operation in the horizontal direction of the operable area of ​​the selector.

[0044] S202: Determine a target element located in the second display area based on the selection operation and the display elements in the first display area;

[0045] Here, the client outputs a display element in the first display area of ​​the selector. When the target object performs a selection operation on the first direction of the first display area of ​​the selector, the selection item selected by the selection operation is used as the target item according to the selection operation on the selection item in the second display area.

[0046] Here, the selection operation may be a sliding operation or multiple click operations.

[0047] In one example, if the selection operation is a sliding operation, the client determines the target element in the second display area based on the position of the display element in the first display area, the sliding direction, and the sliding distance of the selection operation. In another example, if the first direction is horizontal, the sliding directions of the selection operation include left and right. Here, the sliding operation can be a touch operation implemented by a touch chip or a non-touch operation implemented by gesture recognition.

[0048] In actual application, the selected item displayed in the first display area is used as the target item. When the client selector receives the user's selection operation, the client updates the selected item in the first display area based on the user's selection operation, displays the selected item in the second display area in the first display area, and uses the updated selected item in the first display area as the target item. The selection operation can be a sliding operation.

[0049] For example: the selector 20 includes: an operable area 21 and an inoperable area 22, the display element 23 is located in the operable area 21, and the position corresponding to the display element 23 in the operable area 21 is taken as the starting point. According to the user's selection operation in the left direction of the operable area 21, the target element 24 located in the inoperable area 22 is determined.

[0050] For example: the selector 20 includes: an operable area 21 and an inoperable area 22, the display element 23 is located in the operable area 21, and the position corresponding to the display element 23 in the operable area 21 is taken as the starting point. According to the user's selection operation in the right direction of the operable area 21, the target element 25 located in the inoperable area 22 is determined.

[0051] In one example, the selection operation is a plurality of click operations: a first click operation on a candidate item output control and a second click operation on the candidate item. In this case, the selector provides a candidate item output control. When the candidate item output control receives the first click operation, the selected item in the second display area is output as a candidate item on the display interface, and the candidate item selected by the second click operation is output as a target item in the first display area.

[0052] S203: Display the target element in the first display area, and display the elements to be selected in the target item in the second display area based on the second direction.

[0053] Here, the target item is the selection item to which the target element belongs. The target item includes at least two elements, namely, the target element and the selected element. The elements in the target item can be of the same or different types and can be text, image, or a combination of these.

[0054] Here, the to-be-selected element is an element other than the target element among the elements included in the target item; the second direction is different from the first direction. In an embodiment of the present application, the first direction is the distribution direction of elements in the same selection item in the selector. In one example, the first direction is the horizontal direction, and the second direction is the vertical direction. In another example, the first direction is the vertical direction, and the second direction is the horizontal direction.

[0055] Here, after the target element located in the second display area is determined, the target element is displayed in the first display area, and the elements to be selected that are located in the same target item as the target element are displayed.

[0056] For example: according to the user's selection operation in the left direction in the operable area 21, the target element 24 located in the inoperable area 22 is determined; the target element 24 is displayed in the operable area 21, and the selected element 26 in the target item to which the target element 24 belongs is also displayed in the operable area 21.

[0057] For example: based on the user's selection operation in the right direction in the operable area 21, the target element 25 located in the inoperable area 22 is determined; the target element 25 is displayed in the operable area 21, and the selected element 27 in the target item to which the target element 25 belongs is also displayed in the operable area 21.

[0058] In an embodiment of the present application, the selection area of ​​the selector is divided into a first display area and a second display area, wherein the first display area is a user-operable area and the second display area is a user-inoperable area. The selection operation received by the selector for the first display area can enable the user to display the selection items in the second display area as target items in the first display area, and at the same time move the candidate elements of the target items located in the second display area along with the position of the target items. The second display area is completely invisible or partially invisible, so that operations are received only based on the first display area. When there are many selection items, a fixed number of selection items are displayed in the selection items in the first display area. When the number of selection items increases, the selection items are only added in the second display area, which does not affect the number of selection items in the first display area, thereby ensuring the scope of use of the selector.

[0059] In an embodiment of the present application, a selection operation of a target object in a first direction with respect to a first display area of ​​a selector is obtained; the interface area of ​​the selector includes a first display area and a second display area; a target element located in the second display area is determined based on the selection operation and the display elements of the first display area; the target element is displayed in the first display area, and a candidate element in the target item is displayed in the second display area based on the second direction, the target item being the selection item to which the target element belongs, and the candidate element being the element included in the target item other than the target element. As the type of data used in the selector provided in the embodiment of the present application increases, the selector will not have the problem of incomplete display, thereby expanding the scope of use of the selector and improving the user experience.

[0060] In one embodiment, the method further includes: obtaining an array set; wherein the array set includes at least one array; each array in the array set is composed of at least two elements; creating a corresponding number of target items according to the number of arrays in the array set; for each target item, creating a sub-container in the target item according to the elements in the corresponding array.

[0061] Before performing a selection operation on a selector, the selector is created. When creating the selector, an array collection is first obtained. The array collection includes at least one array, which can be in JSON format. Each array consists of at least two elements, and the at least two elements in each array can be of the same or different types. The element types can be text, image, or a combination of these.

[0062] Here, after obtaining an array collection, the number of arrays in the array collection is determined. The number of arrays in the array collection can be one or more. Based on the number of arrays in the array collection, target items are created, equal to the number of arrays. The target items can be vertical sliding containers, horizontal sliding containers, and so on.

[0063] When an array set contains an array, a target item is created. For example, if array set 1 contains {array 1}, target item 1 is created based on array 1.

[0064] When an array set contains more than one array, a corresponding number of target items are created based on the number of arrays. For example, if array set 2 contains {array 1, array 2}, target items 1 and 2 are created based on array 1 and array 2. Another example is if array set 3 contains {array 1, array 2, array 3, array 4}, target items 1, 2, 3, and 4 are created based on array 1, array 2, array 3, and array 4.

[0065] Here, after the target item is successfully created, subcontainers are created for each target item based on the elements in the corresponding array. When creating subcontainers within the target item, the number of subcontainers is determined based on the number of elements in the array. The subcontainer layout format is then determined based on the element type, and the array elements are entered into the corresponding subcontainers.

[0066] In an embodiment of the present application, an array set is obtained; a corresponding number of target items are created according to the number of arrays in the array set; for each target item, a sub-container in the target item is created according to the elements in the corresponding array, and thus a selector is constructed.

[0067] In one embodiment, obtaining the array set includes: receiving the array set through the first interface of the selector; or receiving a data request link through the second interface of the selector; and obtaining the array set based on the data request link.

[0068] Here, when obtaining an array collection, you can use the following method 1 or method 2 to obtain it.

[0069] Method 1: Receive the array set through the first interface;

[0070] Here, the first interface may be a setSrcData interface. An array set is received through the setSrcData interface. After receiving the array set, the array set is processed, that is, the data in the received array set is cached.

[0071] Method 2: Receive a data request link through the second interface; and obtain an array set based on the data request link.

[0072] Here, the second interface may be a setNetSrcData interface. A data request link is received through the setNetSrcData interface, and the address of the data request link is used as the target address to obtain the array set through the network. After obtaining the array set, the array set is processed, i.e., the data in the received array set is cached.

[0073] Here, after obtaining the array set, the element type of each element of each array in the array set is determined, and a correspondence between the array, the element, and the element type is established so that the corresponding element and array can be quickly found according to the element type.

[0074] In an embodiment of the present application, when obtaining an array set, the array set can be directly received through the first interface; or a data request link can be received through the second interface, and the array set can be obtained based on the data request link. The embodiment of the present application can obtain the array set in multiple ways, thereby improving the user experience.

[0075] In one embodiment, for each target item, creating a subcontainer in the target item according to the elements in the corresponding array includes: determining the number of subcontainers in the target item according to the number of elements in the array; determining the layout style of the subcontainer according to the type of the element; wherein the type of the element includes at least one of the following: text type, image type, and composite type; and inputting the element into the corresponding subcontainer.

[0076] Here, for each target item, the number of sub-containers in the target item is determined according to the number of elements in the array corresponding to the target item, wherein the array includes at least two elements.

[0077] For example: the elements in array 1 are [C1, C2]. According to the number of elements in array 1, the number of sub-containers in target item 1 corresponding to array 1 is determined to be 2. For another example: the elements in array 2 are [C1, C2, C3, C4]. According to the number of elements in array 2, the number of sub-containers in target item 2 corresponding to array 2 is determined to be 4.

[0078] Here, the layout style of the subcontainer is determined according to the type of the element, wherein the type of the element includes at least one of the following: text type, image type, and composite type.

[0079] If the element type is text, the layout style of the corresponding subcontainer is the text style; if the element type is image, the layout style of the corresponding subcontainer is the image style; if the element type is composite, the layout style of the corresponding subcontainer is the composite style. Therefore, the layout style of a subcontainer includes at least one of the following: text style, image style, and composite style.

[0080] It should be noted that if the type of each element in at least two elements in the array is the same, the layout style of each subcontainer in the target item is also the same; if the type of each element in at least two elements in the array is different, the layout style of each subcontainer in the target item is also different.

[0081] For example: if the elements in array 3 include [picture 1, picture 2, picture 3], then the layout styles of sub-container 1, sub-container 2, and sub-container 3 in target item 3 are all picture styles; for another example: if the elements in array 4 include [text 1, picture 2, composite 3], then the layout style of sub-container 1 in target item 4 is determined to be text style, the layout style of sub-container 2 is picture style, and the layout style of sub-container 3 is composite style.

[0082] Here, after determining the number and layout style of sub-containers, the elements in the array are input into the corresponding sub-containers to achieve binding between the elements and the sub-containers.

[0083] Same as the above example, for example: input the elements of array 3: picture 1, picture 2, and picture 3 into subcontainer 1, subcontainer 2, and subcontainer 3 of target item 3 respectively; another example: input the element of array 4: text 1 into subcontainer 1 of target item 4, input the element of array 4: picture 2 into subcontainer 2 of target item 4, and input the element of array 4: compound 3 into subcontainer 3 of target item 4.

[0084] In an embodiment of the present application, the number and layout style of sub-containers are determined according to the elements in the array, and the elements in the array are input into the corresponding sub-containers.

[0085] In one embodiment, the method further includes: displaying elements in a subcontainer located in the visualization area; and loading elements in a subcontainer adjacent to the visualization area in the non-visualization area.

[0086] Here, part of the selector is located in the terminal's visible area, while part is located in the terminal's non-visual area. After the elements in the array are loaded into the corresponding subcontainer, if the area to which the subcontainer belongs is located in the visible area, the elements in the subcontainer in the visible area will be displayed. At the same time, the elements in the subcontainer in the non-visual area adjacent to the visible area will be loaded.

[0087] Here, a preset range may be set, and the non-visualized area within the preset range is determined as an area adjacent to the visible area, and elements of the subcontainer within the area are loaded, while other non-visualized areas are not processed.

[0088] In an embodiment of the present application, elements of sub-containers located in a visual area can be displayed, and elements of sub-containers in a non-visual area adjacent to the visual area can be loaded. When the elements of sub-containers in the non-visual area are displayed in the visual area, loading time is saved and the user experience is improved.

[0089] In one embodiment, the method further includes: obtaining the type of the element to be updated; searching for an element to be replaced that has the same type as the element to be updated in the subcontainer of the target item; and replacing the element to be replaced with the element to be updated.

[0090] Here, when updating an element in a subcontainer, obtain the element to be updated, and determine the type of the element to be updated. Search for the element to be replaced in the subcontainer of the target item. The element to be replaced has the same type as the element to be updated. After determining the element to be replaced, replace the element to be replaced with the element to be updated.

[0091] For example: the element to be updated is picture 2, the element in subcontainer 1 in the target item is text 1, the element in subcontainer 2 is picture 1, and the element in subcontainer 3 is composite 1; the type of the element to be updated is picture type, and the type of the element found in subcontainer 2 is picture type, so the element picture 1 in subcontainer 2 is replaced with picture 2.

[0092] Here, before searching for the element to be replaced of the same type as the element to be updated in the subcontainer of the target item, the correspondence between the elements in the subcontainer and the types of the elements can be determined in advance, and the element to be replaced of the same type as the element to be updated can be determined based on the correspondence.

[0093] In the embodiment of the present application, based on the type of the element to be updated, the elements to be replaced in the subcontainer that have the same type as the element to be replaced are replaced with the element to be updated, thereby avoiding replacement of the entire array.

[0094] In one embodiment, the method further includes: determining a position of a newly added array in the second display area; creating a new target item for inputting the newly added array in the second display area based on the position; determining the number of new sub-containers in the newly added target item based on the number of elements in the newly added array; determining a layout style of the newly added sub-container based on the type of elements in the newly added array; and inputting the elements in the newly added array into the newly added sub-container.

[0095] Here, after the selector is created, when adding a new array to the selector, the position of the new array in the second display area is first determined, and a new target item corresponding to the new array is created at this position. At this time, the display content in the first display area remains unchanged.

[0096] For example: the second display area of ​​the selector is arranged in sequence: target item 1 corresponding to array 1, target item 2 corresponding to array 2, target item 3 corresponding to array 3, and the position of the newly added array 1 is determined to be before target item 1, or, the position of the newly added array 1 is determined to be between target item 1 and item 2, or, the position of the newly added array 1 is determined to be after target item 3, and a new target item is created at the corresponding position.

[0097] Here, the number of new sub-containers in the new target item is determined according to the number of elements in the new array.

[0098] For example: the elements in the newly added array 1 are [D1, D2]. According to the number of elements in the newly added array 1, the number of newly added sub-containers in the newly added target item 1 corresponding to the newly added array 1 is determined to be 2; for another example: the elements in the newly added array 2 are [C1, C2, C3, C4]. According to the number of elements in the newly added array 2, the number of newly added sub-containers in the newly added target item 2 corresponding to the newly added array 2 is determined to be 4.

[0099] Here, the layout style of the newly added sub-container is determined based on the type of the element, wherein the type of the element includes at least one of the following: text type, image type, and composite type.

[0100] If the element type is text, the layout style of the newly added subcontainer corresponding to the element is the text style; if the element type is image, the layout style of the newly added subcontainer corresponding to the element is the image style; if the element type is composite, the layout style of the newly added subcontainer corresponding to the element is the composite style. Therefore, the layout style of the newly added subcontainer includes at least one of the following: text style, image style, and composite style.

[0101] It should be noted that if the type of each element in at least two elements of the newly added array is the same, the layout style of each newly added sub-container in the newly added target item is also the same; if the type of each element in at least two elements of the newly added array is different, the layout style of each newly added sub-container in the newly added target item is also different.

[0102] For example: if the elements in the newly added array 3 include [Picture 1, Picture 2, Picture 3], then the layout styles of the newly added sub-container 1, the newly added sub-container 2, and the newly added sub-container 3 in the newly added target item 3 are all picture styles; for another example: if the elements in the newly added array 4 include [Text 1, Picture 2, Composite 3], then the layout style of the newly added sub-container 1 in the newly added target item 4 is determined to be text style, the layout style of the newly added sub-container 2 is picture style, and the layout style of the newly added sub-container 3 is composite style.

[0103] Here, after determining the number and layout style of the newly added sub-containers, the elements in the array are input into the corresponding newly added sub-containers to achieve binding between the elements and the newly added sub-containers.

[0104] Same as the above example, for example: enter the elements of the newly added array 3: Picture 1, Picture 2, and Picture 3 into the newly added sub-container 1, newly added sub-container 2, and newly added sub-container 3 of the newly added target item 3 respectively; for another example: enter the element of the newly added array 4: Text 1 into the newly added sub-container 1 of the newly added target item 4, enter the element of the newly added array 4: Picture 2 into the newly added sub-container 2 of the newly added target item 4, and enter the element of the newly added array 4: Compound 3 into the newly added sub-container 3 of the newly added target item 4.

[0105] In an embodiment of the present application, target items and subcontainers corresponding to the newly added array can be added to the second display area to keep the display content of the first display area unchanged, avoiding the problem of incomplete display of the selector as the data type increases.

[0106] Below, the display method provided in the embodiment of the present application is further explained by taking the selector in the Android system as an example.

[0107] Currently, there are two types of selectors in the Android system: one is the selector that comes with the Android system, which is relatively simple and can only make the most basic selections. The style is also relatively simple. Figure 3 The time selector 31 shown can only select two options: the hour on the left and the minute on the right. The other is an open source selector provided by a third-party developer, which can extend many functions, such as year, month, day, etc. Figure 4 A time selector 41 is shown.

[0108] It can be seen that both the Android system's own selector and the open source third-party selector can meet their basic functions. However, for the above two selectors, as the data type, i.e. the selection items, increase, the area that accommodates the data type also increases linearly. For example, if you want to Figure 4 When adding data types like constellations and days of the week, the selector area becomes too small to accommodate them. Furthermore, both the built-in selectors and third-party selectors currently available on Android only support text data, not images or composite data. This limits the use cases of selectors.

[0109] An embodiment of the present application provides a selector that does not have the problem of the width of the selector increasing as the data type increases, or the problem of the selector being incomplete and requiring the width to be increased; and the selector supports not only text types, but also image types and composite types, which largely solves the constraints of the use scenarios of the selector that comes with the Android system or third-party selectors.

[0110] The selectors of the embodiments of the present application include: a selector having a single vertical sliding window and a selector having multiple vertical sliding windows. The interfaces of the selector having a single vertical sliding window and the selector having multiple vertical sliding windows can both be divided into a visible area and an invisible area. The selector having a single vertical sliding window allows vertical sliding, while the selector having multiple vertical sliding windows allows both vertical and horizontal sliding.

[0111] In one example, if Figure 5 As shown, the selection area of ​​the selector has a vertical sliding window 51, and the vertical sliding window 51 corresponds to a selection item. The selection area of ​​the selector includes a first display area 52 and an inoperable area, namely a second display area 53, wherein the first display area 52 is a visible area and the second display area 53 is an invisible area.

[0112] In yet another example, Figure 6 As shown, the selector has multiple vertical sliding windows 61, each vertical sliding window 61 corresponds to one selection item, wherein the selection area of ​​the selector includes a first display area 62 and an inoperable area, i.e., a second display area 63. The first display area 62 is a visible area, and the second display area 63 is an invisible area.

[0113] The core principle of the embodiment of the present application is to use gestures combined with a customized selector. The visible area of ​​the selector in the embodiment of the present application is fixed. The selector in the embodiment of the present application can be slid up and down, left and right. When the user needs to view the next type of data, just slide horizontally to the left or right, or slide vertically up or down to see other types of data. This design avoids the problem that the content in the tiled selector is limited by width. The selector in the embodiment of the present application does not change in width as the content type increases, and the interaction is more friendly.

[0114] Here, the style type of the inner items of the vertical sliding window is as follows Figure 7 As shown, it may include: text type 71, picture type 72 and composite type 73.

[0115] Here, the following steps are included when creating the selector of the embodiment of the present application:

[0116] First: Initialize the selector of the embodiment of the present application.

[0117] The first step is to set the width of the selector;

[0118] Here, users can set the width of the selector according to their actual scenario. There are three setting modes: MODE_1, MODE_2, and MODE_3.

[0119] MODE_1: The width of the representation selector fills the parent container.

[0120] MODE_2: The representation selector wraps its own subcontainer;

[0121] MODE_3: The representation selector is set according to the width passed in by the user.

[0122] The second step is to add data to the selector.

[0123] Here, there are two ways to add data to the selector: offline mode and network mode.

[0124] 1. Offline mode: By calling the selector's setSrcData interface, the data required by the user is passed to the selector according to the regulations.

[0125] There are two data formats specified by the selector:

[0126] The first method involves passing data in JSON array format. If you have multiple types of data, you can pass them in separate JSON arrays. When you pass data this way, the selector's internal data processing module processes the data. Specifically, the selector calls the module's add method and caches the data for use by the window management module. The window management module creates the same number of vertical sliding windows based on the number of arrays in the JSON array collection.

[0127] The second way is to set the data and type separately. Use the setDataType method provided by the selector to set the data type and quantity first. The data type setting is as follows:

[0128] SrcDataTxt: data is text type;

[0129] SrcDataImage: data is the type of image;

[0130] SrcDataClass: data is a generic class of class;

[0131] The quantity settings are as follows:

[0132] SrcDataSize: refers to the number of different types of data, not the number of each group of data.

[0133] Here, after setting the type and quantity, they are mapped to the data. The data format is JSON. The data processing module maps the set type and quantity to the data. It then calls the add method of the data processing module to cache the data for use by the window management module. The window management module creates a vertical sliding window based on the set data type and quantity and the corresponding data.

[0134] 2. Network mode: By calling the selector's setNetSrcData interface, the user passes the data request link to the selector. The selector calls the internal network library, starts to initiate a request for this link, and obtains the JSON data through the network and passes it to the data processing module.

[0135] Here, data is passed in as a JSON array. If you have multiple types of data, you can pass them in separate JSON arrays. When the data returned from the network meets the specified specifications, the data processing module within the selector processes it. Specifically, the selector calls the data processing module's add method and caches the data for use by the window management module. The window management module creates the same number of vertical sliding windows as the number of arrays in the JSON array collection.

[0136] The third step is to set the style of the sub-items in the vertical sliding window, that is, Item, and control the format of each sub-item through the setItemStyle provided by the selector.

[0137] STYLE_TEX: The sub-item is text;

[0138] STYLE_IMG: The sub-item is a picture;

[0139] STYlE_LAYOUT: The child item is a composite layout.

[0140] When the user passes in STYLE_TXT, the style of each sub-item of the vertical sliding window is text format.

[0141] When the user passes in STYLE_IMG, the style of each sub-item of the vertical sliding window is the image format.

[0142] When the user passes in STYLE_LAYOUT, the style of each sub-item of the vertical sliding window is the composite layout format. When the user passes in STYLE_LAYOUT, you can set the composite layout format by calling the selector's setItemSrcLayout method to set the composite layout format. Here, the composite layout format includes:

[0143] Composite layout format 1: layout1 (built-in layout 1);

[0144] Composite layout format 2: layout2 (built-in layout 2);

[0145] Composite layout format 3: layout3 (custom layout);

[0146] Composite layout formats 1 and 2 are two built-in layouts in the embodiment of the present application. Composite layout format 3 can support users to input customized layout files.

[0147] Second: Call the selector's display method after initialization to display the selector page.

[0148] In the first step, the window management module determines the number of vertical sliding windows that need to be added to the horizontal sliding window based on the number of processed arrays. Then, the same number of vertical sliding windows are created in the horizontal sliding window in the window management module.

[0149] The second step is to add a sub-layout for each vertical sliding window. Here, add a sub-layout to the vertical sliding window according to the following type.

[0150] If the data type DateType is SrcDataTxt and the layout style is STYLE_TEX, each item will load the layout according to the text format. The data processed by the data module will be bound to the text layout and the data will be filled into each item in the vertical sliding window.

[0151] If the data type setDataType is SrcDataImage and the layout style is STYLE_IMG, each item loads the layout according to the image format. The loadImage method in the image library is called to load the image. The data processed by the data processing module is then bound to the corresponding image layout, and the data is filled into each item in the vertical sliding window.

[0152] If the data type setDataType is SrcDataClass and the layout style is STYLE_LAYOUT, each item will be loaded according to the composite layout format. When loading a composite layout, different layout files will be loaded according to the composite layout format. When using composite layout format 1, the built-in layout of layout1 will be loaded. When using composite layout format 2, the built-in layout of layout2 will be loaded. When using composite layout format 3, the user-defined layout file will be loaded. Then, the data processed by the data processing module is bound to the container layout, and the data is filled into each item in the vertical sliding window.

[0153] In the third step, when filling each item in the vertical sliding window with data, only the data in the user's visible area is loaded, and data in the adjacent invisible areas is also loaded. This is called preloading. The preloading threshold defaults to 5 items, which can be set by the user. When the user slides the interface, the data in the visible area and the adjacent invisible areas are dynamically refreshed. This significantly reduces unnecessary memory consumption, reuses the interface in the user's visible area, and improves smoothness.

[0154] Third: user interaction.

[0155] After the selector of the embodiment of the present application is displayed, the user can control the part he wants to see through gestures. The principle of the selector of the embodiment of the present application is as follows:

[0156] First, the window management module includes a horizontal layout manager and a vertical layout manager. The horizontal layout manager is responsible for creating a container that can accommodate horizontally added layouts and containers. Simultaneously, the horizontal layout manager calls the gesture control module to add horizontal gesture listeners to the container.

[0157] The second step is to determine the horizontal direction of the user's sliding through gesture monitoring when the user slides in the visible area. Figure 8 As shown, coordinates 81 (x0, y0), 82 (x1, y0), and 83 (x0, y1) are included. When x1 - x0 > 0, it indicates the user is swiping right. The actual swiping distance is calculated using acceleration, using the distance |x1 - x0| to the right. The horizontally sliding content list component of the selector is then slid by that distance. After the swiping is complete, the data in the user's visible area and the adjacent invisible area is updated.

[0158] In the third step, the vertical layout manager creates a container that can accommodate the vertical layout and container. At the same time, the vertical layout manager calls the gesture control module to add vertical gesture listeners to the container.

[0159] The fourth step is to determine the vertical direction of the user's sliding through gesture monitoring when the user slides the visible area. Figure 8 As shown, coordinates 81 (x0, y0), 82 (x1, y0), and 83 (x0, y1) are included. When y1 - y0 > 0, it indicates the user is sliding downward. The downward sliding distance, i.e., the distance |y1 - y0|, is then calculated using acceleration to determine the actual sliding distance. The selector's vertically sliding content list component is then slid by that distance. After the sliding is complete, the data in the user's visible area and the adjacent invisible area is updated.

[0160] Fourth: data update.

[0161] The first step is to update data using the selector in the embodiment of the present application. The selector in the embodiment of the present application provides an update interface in the external API interface layer, through which the data to be updated and the type of data are passed in.

[0162] The second step is to call the update interface in the data processing module at the external API interface layer. The update interface finds the corresponding data based on the input data type.

[0163] Step 3: Update the data of the corresponding type and notify the window management module to update the corresponding window.

[0164] The selector provided in the embodiment of the present application is as follows: Figure 9 As shown, the system includes an external interface layer 91, a gesture control module 92, a window management module 93, a data processing module 94, a network library 95, and an image library 96. The window management module 93 includes a horizontal layout manager and a vertical layout manager. The external interface layer 91 provides an external API for user interaction.

[0165] The embodiments of the present application can achieve the following technical effects:

[0166] 1. Within a fixed width, by adding gesture sliding monitoring, the layout can be switched by sliding up and down and left and right. The key technical principle is to combine gesture control and window management mode to implement the selector.

[0167] 2. The layout content of the embodiment of the present application is not limited to text, and includes pictures, various common layouts, and any custom layout.

[0168] Based on the foregoing embodiments, an embodiment of the present application provides a display device, which includes the modules included and the units included in each module, and can be implemented by a processor in a computer device; of course, it can also be implemented by a specific logic circuit; in the implementation process, the processor can be a central processing unit (CPU), a microprocessor (MPU), a digital signal processor (DSP) or a field programmable gate array (FPGA), etc.

[0169] Figure 10 This is a schematic diagram of the structure of a display device according to an embodiment of the present application. Figure 10 As shown, the display device 100 includes: a first acquisition module 1001, a first determination module 1002 and a display module 1003; wherein,

[0170] A first acquisition module 1001 is configured to acquire a selection operation of a target object in a first direction on a first display area of ​​a selector; the interface area of ​​the selector includes the first display area and the second display area;

[0171] A first determining module 1002 is configured to determine a target element located in the second display area based on the selection operation and the display elements in the first display area;

[0172] Display module 1003 is used to display the target element in the first display area, and to display the selected elements in the target item in the second display area based on the second direction, where the target item is the selection item to which the target element belongs, and the selected elements are the elements included in the target item other than the target element.

[0173] In one embodiment, the display device 100 further includes: a second acquisition module, a first creation module, and a second creation module; wherein,

[0174] The second acquisition module is used to acquire an array set; wherein the array set includes at least one array; each array in the array set is composed of at least two elements;

[0175] The first creation module is configured to create a corresponding number of target items according to the number of arrays in the array set;

[0176] The second creation module is used to create a subcontainer in each target item according to the elements in the corresponding array.

[0177] In one embodiment, the second acquisition module includes: a first receiving unit, a second receiving unit and an acquisition unit; wherein,

[0178] The first receiving unit is configured to receive the array set through the first interface of the selector;

[0179] The second receiving unit is configured to receive a data request link via a second interface of the selector;

[0180] The acquiring unit is configured to acquire the array set based on the data request link.

[0181] In one embodiment, the second creation module includes: a first determination unit, a second determination unit, and an input unit; wherein,

[0182] The first determining unit is configured to determine the number of subcontainers in the target item according to the number of elements in the array;

[0183] The second determining unit is configured to determine a layout style of the subcontainer according to a type of the element; wherein the type of the element includes at least one of the following: a text type, a picture type, and a composite type;

[0184] The input unit is used to input the element into the corresponding sub-container.

[0185] In one embodiment, the second creation module further includes: a first display unit and a second display unit; wherein,

[0186] The first display unit is used to display the elements in the subcontainer located in the visualization area;

[0187] The second display unit is used to load elements in a subcontainer adjacent to the visual area in the non-visual area.

[0188] In one embodiment, the display device 100 further includes: a third acquisition module, a search module, and a replacement module; wherein,

[0189] The third acquisition module is used to obtain the type of the element to be updated;

[0190] The search module is configured to search the subcontainer of the target item for an element to be replaced that is of the same type as the element to be updated;

[0191] The replacement module is configured to replace the element to be replaced with the element to be updated.

[0192] In one embodiment, the display device 100 further includes: a second determination module, a third determination module, a fourth determination module and an input module; wherein,

[0193] The second determining module is used to determine the position of the newly added array in the second display area;

[0194] The third determining module is configured to create a new target item for inputting the new array in the second display area according to the position;

[0195] The fourth determining module is configured to determine a layout style of the newly added sub-container according to a type of elements in the newly added array;

[0196] The input module is used to input the elements in the newly added array into the newly added sub-container.

[0197] The description of the above device embodiment is similar to the description of the above method embodiment and has similar beneficial effects as the method embodiment. For technical details not disclosed in the device embodiment of this application, please refer to the description of the method embodiment of this application for understanding.

[0198] It should be noted that, in the embodiment of the present application, if the above-mentioned display method is implemented in the form of a software function module and sold or used as an independent product, it can also be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the embodiment of the present application is essentially or the part that contributes to the relevant technology can be embodied in the form of a software product, which is stored in a storage medium and includes a number of instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the methods described in each embodiment of the present application. The aforementioned storage medium includes various media that can store program codes, such as a U disk, a mobile hard disk, a read-only memory (ROM), a magnetic disk or an optical disk. In this way, the embodiment of the present application is not limited to any specific combination of hardware and software.

[0199] Correspondingly, an embodiment of the present application provides a device, that is, a computer device, including a memory and a processor, wherein the memory stores a computer program that can be run on the processor, and when the processor executes the program, the steps in the display method provided in the above embodiment are implemented.

[0200] Correspondingly, an embodiment of the present application provides a storage medium, that is, a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps in the display method provided in the above embodiment are implemented.

[0201] It should be noted that the description of the above storage medium and device embodiments is similar to the description of the above method embodiments and has similar beneficial effects as the method embodiments. For technical details not disclosed in the storage medium and device embodiments of this application, please refer to the description of the method embodiments of this application for understanding.

[0202] It should be noted that Figure 11 A schematic diagram of a hardware entity of a computer device according to an embodiment of the present application is shown in FIG. Figure 11 As shown, the computer device 1100 includes: a processor 1101, at least one communication bus 1102, at least one external communication interface 1104, and a memory 1105. The communication bus 1102 is configured to enable communication between these components. The computer device may also include: a user interface 1103, which may include a display screen; and an external communication interface 1104, which may include a standard wired interface and a wireless interface.

[0203] The memory 1105 is configured to store instructions and applications executable by the processor 1101, and can also cache data to be processed or processed by the processor 1101 and various modules in the computer device (for example, image data, audio data, voice communication data and video communication data), which can be implemented through flash memory (FLASH) or random access memory (RAM).

[0204] It should be understood that "one embodiment" or "an embodiment" mentioned throughout the specification means that the specific features, structures or characteristics related to the embodiment are included in at least one embodiment of the present application. Therefore, "in one embodiment" or "in an embodiment" appearing throughout the specification does not necessarily refer to the same embodiment. In addition, these specific features, structures or characteristics can be combined in one or more embodiments in any suitable manner. It should be understood that in the various embodiments of the present application, the size of the serial numbers of the above-mentioned processes does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application. The above-mentioned serial numbers of the embodiments of the present application are for description only and do not represent the advantages and disadvantages of the embodiments.

[0205] It should be noted that, in this document, the terms "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, article, or apparatus comprising a series of elements includes not only those elements but also other elements not explicitly listed, or elements inherent to such process, method, article, or apparatus. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of other identical elements in the process, method, article, or apparatus comprising the element.

[0206] In the several embodiments provided in this application, it should be understood that the disclosed devices and methods can be implemented in other ways. The device embodiments described above are merely schematic. For example, the division of the units is merely a logical function division. In actual implementation, there may be other division methods, such as: multiple units or components can be combined, or can be integrated into another system, or some features can be ignored or not executed. In addition, the coupling, direct coupling, or communication connection between the components shown or discussed can be through some interfaces, and the indirect coupling or communication connection of the devices or units can be electrical, mechanical or other forms.

[0207] The units described above as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units; they may be located in one place or distributed across multiple network units; some or all of the units may be selected according to actual needs to achieve the purpose of the scheme of this embodiment.

[0208] In addition, all functional units in the embodiments of the present application can be integrated into one processing unit, or each unit can be a separate unit, or two or more units can be integrated into one unit; the above-mentioned integrated units can be implemented in the form of hardware or in the form of hardware plus software functional units.

[0209] Those skilled in the art will understand that all or part of the steps of implementing the above-mentioned method embodiment can be completed by hardware related to program instructions, and the aforementioned program can be stored in a computer-readable storage medium. When the program is executed, it executes the steps of the above-mentioned method embodiment; and the aforementioned storage medium includes: mobile storage devices, read-only memories (ROM), magnetic disks or optical disks, and other media that can store program codes.

[0210] Alternatively, if the above-mentioned integrated unit of the present application is implemented in the form of a software function module and sold or used as an independent product, it can also be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the embodiment of the present application can be essentially or in other words, the part that contributes to the relevant technology can be embodied in the form of a software product, which is stored in a storage medium and includes a number of instructions for enabling a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the methods described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as mobile storage devices, ROMs, magnetic disks, or optical disks.

[0211] The above is merely an embodiment of the present application, but the scope of protection of the present application is not limited thereto. Any changes or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in this application should be included in the scope of protection of this application. Therefore, the scope of protection of this application should be based on the scope of protection of the claims.

Claims

1. A display method, characterized in that: The method comprises: Obtain an array set; wherein the array set includes at least one array; each array in the array set is composed of at least two elements; at least two elements in the array are of different types; wherein the type of the element includes at least one of the following: text type, image type, and composite type; Create a corresponding number of target items according to the number of arrays in the array set; For each target item, create a subcontainer in the target item according to the elements in the corresponding array; Obtain a selection operation of a target object in a first direction with respect to a first display area of ​​a selector; the interface area of ​​the selector includes a first display area and a second display area; wherein, the first display area is a user-operable area, and the second display area is a user-inoperable area other than the first display area in the display interface of the selector; the second display area is completely invisible or partially invisible; the selector includes: a selector having one or more vertical sliding windows, which can slide vertically in a selector having one vertical sliding window, and can slide vertically and horizontally in a selector having multiple vertical sliding windows; the display interface of the selector having multiple vertical sliding windows includes the first display area and the second display area; determining a target element located in the second display area based on the selection operation and the display elements of the first display area; The target element is displayed in the first display area, and the selected elements in the target item are displayed in the first display area based on the second direction. The target item is the selection item to which the target element belongs, and the selected elements are the elements included in the target item except the target element.

2. The method according to claim 1, characterized in that The obtaining of the array collection includes: Receive the array set through the first interface of the selector; or, receiving a data request link via a second interface of the selector; Based on the data request link, the array collection is obtained.

3. The method according to claim 1, characterized in that For each target item, creating a subcontainer in the target item according to the elements in the corresponding array includes: Determining the number of sub-containers in the target item according to the number of elements in the array; Determine the layout style of the subcontainer according to the type of the element; Input the element into the corresponding subcontainer.

4. The method according to claim 3, characterized in that The method further comprises: Display the elements in the subcontainer of the visualization area; Elements in a subcontainer adjacent to the visual area in the non-visual area are loaded.

5. The method according to claim 1, wherein The method further comprises: Get the type of the element to be updated; Searching for an element to be replaced that is of the same type as the element to be updated in the subcontainer of the target item; The element to be replaced is replaced with the element to be updated.

6. The method according to claim 1, characterized in that The method further comprises: Determine the position of the newly added array in the second display area; creating a new target item of the new array in the second display area according to the position; Determining the number of new sub-containers in the new target item according to the number of elements in the new array; Determining the layout style of the newly added sub-container according to the type of elements in the newly added array; Input the elements in the newly added array into the newly added sub-container.

7. A display device, characterized in that: The device includes: a first acquisition module, a first determination module, a second acquisition module, a first creation module, a second creation module and a display module; wherein, The second acquisition module is configured to acquire an array set; wherein the array set includes at least one array; each array in the array set is composed of at least two elements; at least two elements in the array are of different types; wherein the type of the element includes at least one of the following: text type, image type, and composite type; The first creation module is configured to create a corresponding number of target items according to the number of arrays in the array set; The second creation module is configured to create, for each target item, a subcontainer in the target item according to the elements in the corresponding array; The first acquisition module is used to acquire a selection operation of a target object in a first direction with respect to a first display area of ​​a selector; the interface area of ​​the selector includes a first display area and a second display area; wherein, the first display area is a user-operable area, and the second display area is a user-inoperable area other than the first display area in the display interface of the selector; the second display area is completely invisible or partially invisible; the selector includes: a selector with one or more vertical sliding windows, which can slide vertically in a selector with one vertical sliding window, and can slide vertically and horizontally in a selector with multiple vertical sliding windows; the display interface of the selector with multiple vertical sliding windows includes the first display area and the second display area; The first determining module is configured to determine a target element located in the second display area based on the selection operation and the display elements in the first display area; The display module is used to display the target element in the first display area, and to display the selected elements in the target item in the first display area based on the second direction, the target item is the selection item to which the target element belongs, and the selected elements are the elements included in the target item other than the target element.

8. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the steps of the display method according to any one of claims 1 to 6 are implemented.

9. A storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the display method according to any one of claims 1 to 6 is implemented.

Images