List display method, device, electronic device and storage medium

Abstract

The present disclosure relates to a list display method, device, electronic device and storage medium, wherein the list display method comprises: displaying a target list in a folded state; wherein the target list in the folded state displays M target list items; in response to an expansion instruction for the target list in the folded state, determining N target list items displayed by the target list in an expanded state, wherein N is greater than M; determining a first spacing between the N target list items; based on the first spacing between the N target list items, expanding and displaying the target list in the folded state; wherein at least one list item of the N target list items presents the expansion process with a preset first animation display effect. The present disclosure enhances the interactivity of the list expansion process and the flexibility and diversity of the list layout, and realizes a smooth list expansion process.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to a list display method, device, electronic device and storage medium. Background Art

[0002] Currently, interaction with users can be achieved through a list displayed in the user interface of the client, which may include list items corresponding to different functional contents, such as the homepage list of news and information applications, the function list of video applications, etc. When there are a large number of list items in the list that needs to be displayed, it will appear too crowded or impossible to display all the list items on one screen. Based on this, one processing method in the related art is to fold part of the list items first, and then expand and display all the list items when the user clicks a specific button. However, the list expansion process in the related art has the problems of single layout and poor interactivity. Summary of the invention

[0003] The present disclosure provides a list display method, device, electronic device and storage medium to at least solve the problems of single layout and poor interactivity in the list expansion process in the related art. The technical solution of the present disclosure is as follows:

[0004] According to a first aspect of an embodiment of the present disclosure, a list display method is provided, including:

[0005] Displaying a target list in a folded state; wherein the target list in the folded state displays M target list items;

[0006] In response to an expansion instruction for the target list in the folded state, determining N target list items displayed in the target list in the expanded state, wherein N is greater than M;

[0007] Determining a first spacing between the N target list items;

[0008] Based on a first spacing between the N target list items, unfold and display the target list in the collapsed state;

[0009] At least one list item of the N target list items presents the expansion process with a preset first animation display effect.

[0010] In an exemplary embodiment, the first spacing is different from a second spacing between the M target list items displayed in a folded state.

[0011] In an exemplary implementation, determining a first spacing between the N target list items includes:

[0012] Determining area parameters of a display area for displaying the target list;

[0013] Determine a first spacing between the N target list items based on the area parameter and the number N of the target list items displayed in the expanded state;

[0014] The area parameter includes at least one of the following: the size and position of the display area.

[0015] In an exemplary embodiment, the method further comprises:

[0016] During the expansion process, a target position is determined, and based on the target position, the N target list items in the target list are displayed in the display area according to the first spacing.

[0017] In an exemplary embodiment, the target position is any one of the following: the position of any one of the first M-1 target list items in the M target list items; or a preset position in the display area.

[0018] In an exemplary embodiment, when the area parameter includes the size of the display area, determining the first spacing between the N target list items based on the area parameter and the number N of the target list items displayed in the expanded state includes:

[0019] Determine a candidate spacing based on the size of the display area and the number N;

[0020] Based on the comparison result of the candidate distance and the preset threshold, a first distance between the N target list items is determined.

[0021] In an exemplary embodiment, the method further comprises:

[0022] In response to a move instruction for the target list in the expanded state, the N target list items are moved.

[0023] In an exemplary embodiment, after expanding and displaying the target list in the folded state, the method further includes:

[0024] In response to a folding instruction for the expanded target list, determining a second spacing between the M target list items;

[0025] Based on the second spacing between the M target list items, the target list in the folded state is displayed; wherein at least one list item of the N target list items presents the folding process with a preset second animation display effect.

[0026] In an exemplary embodiment, the method further comprises:

[0027] Respectively acquiring layout attribute information of the target list in the folded state and the expanded state; the layout attribute information represents the position information and display attribute of each list item in the target list, and the display attribute includes a visible attribute and an invisible attribute;

[0028] The transition animation execution interface function is called to determine the difference information between the layout attribute information in the folded state and the layout attribute information in the expanded state, and the preset first animation display effect or the preset second animation display effect is generated according to the difference information.

[0029] In an exemplary embodiment, the target list is a list view based on a system list component.

[0030] According to a second aspect of an embodiment of the present disclosure, there is provided a list display device, including:

[0031] A display unit is configured to display a target list in a folded state; wherein the target list in the folded state displays M target list items;

[0032] A display list item determination unit is configured to execute, in response to an expansion instruction for the target list in the folded state, determine N target list items displayed in the target list in the expanded state, wherein N is greater than M;

[0033] A first spacing determination unit, configured to determine a first spacing between the N target list items;

[0034] an expanding unit, configured to expand and display the target list in the folded state based on a first spacing between the N target list items;

[0035] At least one list item of the N target list items presents the expansion process with a preset first animation display effect.

[0036] In an exemplary embodiment, the first spacing is different from a second spacing between the M target list items displayed in a folded state.

[0037] In an exemplary embodiment, the first distance determining unit includes:

[0038] an area parameter determination unit configured to determine an area parameter of a display area for displaying the target list;

[0039] A first spacing determination subunit is configured to determine a first spacing between the N target list items based on the area parameter and the number N of the target list items displayed in the expanded state;

[0040] The area parameter includes at least one of the following: the size and position of the display area.

[0041] In an exemplary embodiment, the expansion unit is further configured to determine a target position during the expansion process, and display the N target list items in the target list in the display area according to the first spacing based on the target position.

[0042] In an exemplary embodiment, the target position is any one of the following: the position of any one of the first M-1 target list items in the M target list items; or a preset position in the display area.

[0043] In an exemplary embodiment, when the area parameter includes the size of the display area, the first spacing determination subunit includes:

[0044] a candidate spacing determination unit, configured to determine the candidate spacing based on the size of the display area and the number N;

[0045] The first determining unit is configured to determine a first distance between the N target list items based on a comparison result between the candidate distance and a preset threshold.

[0046] In an exemplary embodiment, the apparatus further comprises:

[0047] The moving unit is configured to execute, in response to a move instruction for the target list in the expanded state, moving the N target list items.

[0048] In an exemplary embodiment, the apparatus further comprises:

[0049] A second spacing determination unit is configured to execute, in response to a folding instruction on the target list in the expanded state, to determine a second spacing between the M target list items;

[0050] The folding unit is configured to display the target list in the folded state based on a second spacing between the M target list items; wherein at least one list item of the N target list items presents the folding process with a preset second animation display effect.

[0051] In an exemplary embodiment, the apparatus further comprises:

[0052] a layout attribute information acquisition unit, configured to respectively acquire layout attribute information of the target list in the folded state and the expanded state; the layout attribute information represents position information and display attributes of each list item in the target list, the display attributes including visible attributes and invisible attributes;

[0053] The animation effect generation unit is configured to execute a call to a transition animation execution interface function, determine the difference information between the layout attribute information in the folded state and the expanded state, and generate the preset first animation display effect or the preset second animation display effect according to the difference information.

[0054] In an exemplary embodiment, the target list is a list view based on a system list component.

[0055] According to a third aspect of an embodiment of the present disclosure, there is provided an electronic device, including:

[0056] processor;

[0057] a memory for storing instructions executable by the processor;

[0058] The processor is configured to execute the instructions to implement the list display method of the first aspect.

[0059] According to a fourth aspect of an embodiment of the present disclosure, a computer-readable storage medium is provided. When instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the list display method of the first aspect.

[0060] According to a fifth aspect of an embodiment of the present disclosure, a computer program product is provided, including a computer program, and when the computer program is executed by a processor, the list display method of the first aspect is implemented.

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

[0062] In response to an instruction to expand a target list in a folded state, a first spacing between N target list items displayed in the target list in an expanded state is determined, the target list in the folded state is expanded and displayed based on the first spacing, and at least one list item among the N target list items is displayed with a preset first animation effect during the expansion process, thereby presenting the expansion process of the list in a preset animation effect manner, enhancing the interactivity of the list expansion process and the flexibility and diversity of the list layout, and achieving a smooth list expansion process.

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

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

[0065] Figure 1 is a schematic diagram of an application environment of a list display method according to an exemplary embodiment;

[0066] Figure 2 is a flowchart of a list display method according to an exemplary embodiment;

[0067] Figure 3 is a schematic diagram showing the layout of a target list in a folded state according to an exemplary embodiment;

[0068] Figure 4 is a schematic diagram showing a target list being expanded from a folded state to an expanded state according to an exemplary embodiment;

[0069] Figure 5 is a flowchart of another list display method according to an exemplary embodiment;

[0070] Figure 6 is a block diagram of a list display device according to an exemplary embodiment;

[0071] Figure 7 It is a block diagram of an electronic device according to an exemplary embodiment. DETAILED DESCRIPTION

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

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

[0074] See also Figure 1, which is a schematic diagram of an application environment of a list display method according to an exemplary embodiment, the application environment may include a terminal 110 and a server 120, and the terminal 110 and the server 120 may be connected via a wired network or a wireless network.

[0075] The terminal 110 may be a smart phone, a tablet computer, a laptop computer, a desktop computer, etc., but is not limited thereto. The terminal 110 may be installed with client software such as an application (Application, referred to as App) that provides a human-computer interaction function. The application may be an independent application or a subprogram in the application. Exemplarily, the application may be a news application, a live broadcast application, or a video application. The user of the terminal 110 may log in to the application using pre-registered user information, which may include an account number and a password.

[0076] The server 120 may be a server that provides background services for the application in the terminal 110. It may be an independent physical server, a server cluster or a distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, as well as big data and artificial intelligence platforms.

[0077] Figure 2 is a flowchart of a list display method according to an exemplary embodiment. Figure 2 As shown, this list display method is used Figure 1 Taking the terminal in as an example, the following steps are included:

[0078] In step S201, a target list in a folded state is displayed.

[0079] The target list in the folded state displays M target list items. It can be understood that M is smaller than the total number of list items in the target list in the expanded state.

[0080] The target list may be a function list that matches the currently browsed client interface. In an exemplary embodiment, the currently browsed client interface may be a video processing interface, and the target list may be a list for implementing the video processing function. Specifically, the target list may include multiple list items, each list item showing different functional contents, for example, the functional contents may include cutting, beautification, text addition, background blur, etc. In an exemplary embodiment, the currently browsed client interface may also be a video shooting interface, and the target list may be a list for implementing the video shooting function. Specifically, the functional contents of the multiple list items in the target list may include taking pictures, recording, beautification, flipping, music, special effects, etc. The setting position of the target list in the client interface may not be limited, and may be set horizontally along the client interface, or vertically along the client interface, or may be a combination of horizontal and vertical settings.

[0081] In an embodiment of the present disclosure, the display state of the target list may include a folded state and an expanded state, wherein a portion of the list items of the target list (i.e., M target list items) are displayed in the folded state, and the number of list items displayed in the expanded state is greater than the number of list items displayed in the folded state.

[0082] In an exemplary embodiment, the M target list items displayed in the folded state may be list items of high-priority functions, or list items corresponding to frequently used functions determined based on the user's personalized usage behavior. The specific value of M may be dynamically adjusted based on actual conditions.

[0083] In an exemplary embodiment, there is a second spacing between the M target list items displayed in the folded state of the target list. The second spacing can be a preset spacing or a calculated spacing calculated based on the area parameters of the display area for displaying the target list and the number M. Taking the target list displayed horizontally along the screen as an example, the calculated spacing can be obtained based on the ratio of the length of the display area to the number M.

[0084] In an exemplary embodiment, the target list can be a list view based on a system list component. Exemplarily, the system list component can be RecyclerView. RecyclerView is a component provided by the Android system for displaying large amounts of data and reusable views. Flexible is a feature of RecyclerView. RecyclerView can realize functions such as horizontal scrolling ListView, horizontal scrolling GridView, and waterfall flow controls.

[0085] In step S203, in response to an expansion instruction for the target list in the folded state, N target list items displayed in the target list in the expanded state are determined, where N is greater than M.

[0086] In an exemplary embodiment, the Mth list item among the M target list items displayed in the folded state can be used to trigger an expansion instruction. When the Mth list item receives a preset trigger event, an expansion instruction can be generated to expand the target list in the folded state to enter the expanded state, so that the terminal can respond to the expansion instruction and determine the N target list items displayed in the target list in the expanded state. Exemplarily, the number N can be the total number of list items included in the target list. The preset trigger event can include a click event, a touch event, and the like.

[0087] In another exemplary embodiment, the client interface may include a target control for implementing the triggering of an expansion instruction, and the target control is independent of the target list. When the target list is displayed in a collapsed state, the target control may overlap on top of the collapsed list item, and when the target control receives a preset trigger event, it may generate an expansion instruction to expand the collapsed target list to an expanded state.

[0088] In step S205, a first distance between the N target list items is determined.

[0089] In an exemplary embodiment, the first spacing between the N target list items is different from the second spacing between the M target list items displayed in the folded state, so that a completely different list layout is displayed before and after the target list is expanded, which not only enhances the interactivity of the list expansion but also improves the utilization of the screen space.

[0090] In order to realize that the list layout changes dynamically with the number of displayed list items, in an exemplary implementation, determining the first spacing between the N target list items may include:

[0091] Determine the area parameter of the display area for displaying the target list; wherein the area parameter includes at least one of the following: the size and position of the display area;

[0092] Based on the area parameter and the number N of the target list items displayed in the expanded state, a first spacing between the N target list items is determined.

[0093] In an exemplary implementation, the area parameter may include a size of a display area, and determining the first spacing between the N target list items based on the area parameter and the number N of the target list items displayed in the expanded state may include:

[0094] Determine a candidate spacing based on the size of the display area and the number N;

[0095] Based on the comparison result of the candidate distance and the preset threshold, a first distance between the N target list items is determined.

[0096] The size of the display area is the length of the target list in the expansion direction on the screen. The preset threshold can be set according to the needs of the actual application. Generally, the smaller the preset threshold is, the more densely the target list items displayed in the display area are arranged; conversely, the larger the preset threshold is, the more sparsely the target list items displayed in the display area are arranged.

[0097] In a specific implementation, the ratio of the size of the display area to the number N can be calculated and used as a candidate spacing. When the candidate spacing exceeds a preset threshold, the candidate spacing can be determined as the first spacing between the N target list items. When the candidate spacing does not exceed the preset threshold, the preset threshold can be determined as the first spacing between the N target list items.

[0098] The embodiment of the present disclosure determines the first spacing between N target list items based on the comparison result between the candidate spacing and the preset threshold, thereby avoiding the adverse effect on the operation caused by the spacing between the N target list items displayed in the display area being too small.

[0099] In practical applications, the area parameter of the display area for displaying the target list may be based on the screen size or may exceed the screen size. In the case where the area parameter of the display area exceeds the screen size, the movement of the N target list items in the expanded target list is allowed, so that the target list items in the display area that are outside the screen can enter the visible area of ​​the screen for user use, thereby improving the flexibility of the list layout. Based on this, in an exemplary embodiment, the method may further include: in response to a move instruction for the target list in the expanded state, moving the N target list items.

[0100] In step S207, based on the first spacing between the N target list items, the target list in the folded state is unfolded and displayed.

[0101] At least one of the N target list items presents the expansion process with a preset first animation display effect. Specifically, the preset first animation display effect may include an animation display effect corresponding to the position change of each list item and an animation display effect corresponding to the visibility change of each list item. In a specific implementation, the preset first animation display effect may be set according to actual needs, for example, it may include a panning animation effect, a fade-out animation effect, etc.

[0102] In an exemplary embodiment, when the target list in the folded state is expanded and displayed, the target position can also be determined, and based on the target position, the N target list items in the target list can be displayed in the display area according to the first spacing to enhance the interactivity and smoothness of the list expansion process.

[0103] In an exemplary embodiment, the Mth list item among the M target list items displayed in the folded state can be used to trigger the expansion instruction, and the target position can be the position of any list item among the first M-1 target list items among the M target list items displayed in the folded state; in another exemplary embodiment, the target position can be a preset position in the display area, and the preset position can be set according to actual needs, for example, it can be set to a position of the display area close to the edge of the screen. By setting different target positions, the target list can be expanded with different references, thereby further enhancing the interactivity of the list expansion process and the flexibility of list layout changes.

[0104] The disclosed embodiment determines a first spacing between N target list items displayed in the target list in the expanded state in response to an expansion instruction for the target list in the folded state, expands and displays the target list in the folded state based on the first spacing, and displays at least one of the N target list items with a preset first animation display effect during the expansion process, thereby presenting the expansion process of the list in a preset animation effect manner, enhancing the interactivity of the list expansion process and the flexibility and diversity of the list layout, and achieving a smooth list expansion process.

[0105] In addition, when the target list is a list view based on a system list component (such as RecyclerView), the embodiment of the present disclosure can realize flexible configuration of the number of expanded list items while realizing the list expansion animation, which has strong scalability and further improves the flexibility and diversity of the list layout.

[0106] In an exemplary embodiment, the animation effect during the expansion process may be presented by forming a transition animation. In order to improve the performance and performance of the animation effect during the expansion process and avoid refreshing the list during the animation process, the method may further include:

[0107] Respectively obtaining layout attribute information of the target list in the folded state and the expanded state;

[0108] The transition animation execution interface function is called to determine the difference information between the layout attribute information in the folded state and the layout attribute information in the expanded state, and a preset first animation display effect is generated according to the difference information.

[0109] The layout attribute information represents the position information and display attributes of each list item in the target list, and the display attributes include visible attributes and invisible attributes. It can be understood that the layout attribute information in the folded state represents the position information and display attributes of each list item in the target list in the folded state; the layout attribute information in the expanded state represents the position information and display attributes of each list item in the target list in the expanded state. In a specific implementation, the layout attribute information can be determined according to the spacing and display attributes between each list item in the corresponding display state.

[0110] The target list in the folded state includes M displayed target list items and folded and hidden list items. Assuming that N target list items are displayed in the expanded state, the folded and hidden list items are NM list items. Among them, there is a second spacing between the M displayed target list items, and the M target list items are visible attributes; there is a third spacing between the NM folded and hidden list items, and the third spacing is the negative value of the length of the list items in the expansion direction of the target list. Taking the horizontal expansion of the target list along the screen as an example, the third spacing is -W (W is the width of the list item), and the folded and hidden NM list items are invisible attributes.

[0111] It should be noted that the spacing between list items is positive when they are separated, 0 when they are fitted, negative when they overlap, and negative width / height when they completely overlap.

[0112] In actual applications, when calculating the second spacing between the M target list items displayed in the folded state based on the quantity M, it is necessary to consider the implementation form of the object used to trigger the expansion instruction.

[0113] When the object used to trigger the expansion instruction is the Mth target list item among M target list items, the second spacing may be the ratio of the size of the display area to the number M. At this time, the spacing between the Mth target list item and the first list item among the folded NM list items is set to -W, so that the Mth target list item can overlap with the folded NM list items.

[0114] When the object used to trigger the expansion instruction is a target control independent of the target list, the second spacing may be the ratio of the size of the display area to the number (M+1), in which case the spacing between the Mth target list item and the first list item among the folded NM list items is set to the above second spacing, and the target control is overlapped on the folded NM list items. Figure 3 It is a schematic diagram of the layout of a target list in a folded state provided by an embodiment of the present disclosure, wherein the target control is independent of the target list and can overlap with the position of the folded list item.

[0115] For the expanded target list, the spacing between list items is the first spacing and is a visible property.

[0116] Figure 4 The figure shows a schematic diagram of a target list provided by an embodiment of the present disclosure being expanded from a folded state to an expanded state. In the folded state of the target list, 5 target list items are displayed, and the fifth list item among the 5 target list items, i.e., the "→" indicating expansion, can be used to trigger an expansion instruction in the folded state. By triggering, for example, clicking the fifth list item "→", an expansion instruction for the target list in the folded state can be triggered, and then the folded state target list can be expanded. Figure 4 The animation effect shown in the display renders all list items in the target list.

[0117] In a specific implementation, when the "→" list item indicating expansion is triggered, the first spacing can be determined by calculation, and the layout attribute information in the expanded state is generated based on the first spacing and the display attribute, and the layout attribute information is set in the list component, and the system interface TransitionManager.beginDelayedTransition is called, and parameters such as ChangeBounds() and Fade() are passed in. The Transition framework will generate a transition animation based on the difference information between the layout attribute information in the folded state and the layout attribute information in the expanded state. Specifically, by passing in the ChangeBounds() parameter, the Transition framework compares the position difference to generate a translation animation, and by passing in the Fade() parameter, the Transition framework can compare the visibility difference to generate a fade-out animation. It can be understood that other types of parameters can also be passed in when calling the system interface TransitionManager.beginDelayedTransition to generate different types of animation effects.

[0118] In another possible implementation, when the object used to trigger the expansion instruction is a target control independent of the target list, an animation such as a fade-out animation may be added to the target control to hide the target control, and the target control may be deleted when the animation ends.

[0119] The disclosed embodiment simplifies the calculation of animation parameters into the calculation of layout attribute information, thereby greatly reducing the complexity and amount of calculation of the animation process. The animation process does not trigger a list refresh, has good stability, and improves the expression and performance of the animation effect during the expansion process.

[0120] In an exemplary embodiment, Figure 5 As shown in the flowchart of another list display method provided, after displaying the target list in the folded state, the method may further include:

[0121] In step S209 , in response to a folding instruction for the expanded target list, a second spacing between the M target list items is determined.

[0122] The second spacing may be a preset spacing, or may be determined according to a ratio of an area parameter of the display area to the number M. For example, the ratio of the size of the display area to the number M may be directly used as the second spacing.

[0123] In a scenario where expansion and then folding is required, the Mth target list item among the M target list items can be set to trigger an expansion instruction and a folding instruction based on a preset event, and the Mth target list item is always visible in the expanded state and the folded state of the target list.

[0124] In step S211, the target list in the folded state is displayed based on the second spacing between the M target list items.

[0125] At least one of the N target list items presents the folding process with a preset second animation display effect. Specifically, the preset second animation display effect may include an animation display effect corresponding to the position change of each list item and an animation display effect corresponding to the visibility change of each list item. In a specific implementation, the preset second animation display effect may be set according to actual needs, for example, it may include a panning animation effect, a fade-out animation effect, etc. The preset second animation display effect may be the same as or different from the preset first animation display effect.

[0126] The disclosed embodiment further enhances the interactivity of the list display state switching process and the flexibility and diversity of the list layout by presenting the folding process of the list from the expanded state to the folded state with a preset second animation display effect, thereby achieving smooth list folding.

[0127] In an exemplary embodiment, layout attribute information of the target list in a folded state can be generated based on the second spacing between the M target list items, the third spacing for folding the remaining NM list items, and the display attributes of each list item; then the transition animation execution interface function is called to determine the difference information between the layout attribute information in the folded state and the expanded state, and a preset second animation display effect is generated according to the difference information. The specific implementation process can be found in the aforementioned description of the preset first animation display effect, which will not be repeated here.

[0128] In the process of realizing the folding animation of the expanded target list, the disclosed embodiment simplifies the calculation of animation parameters into the calculation of layout attribute information, which greatly reduces the complexity and amount of calculation of the animation process. While realizing the folding animation of the target list, it avoids refreshing the list during the animation process, thereby improving the expression and performance of the animation effect during the list folding process.

[0129] Figure 6 A block diagram of a list display device according to an exemplary embodiment. Figure 6 The list display device 600 includes a display unit 610, a display list item determination unit 620, a first spacing determination unit 630 and an expansion unit 640, wherein:

[0130] The display unit 610 is configured to display a target list in a folded state; wherein the target list in the folded state displays M target list items;

[0131] A display list item determination unit 620 is configured to execute, in response to an expansion instruction for the target list in the folded state, determine N target list items displayed in the target list in the expanded state, where N is greater than M;

[0132] A first spacing determination unit 630 is configured to determine a first spacing between the N target list items;

[0133] An expanding unit 640 is configured to expand and display the target list in the collapsed state based on a first spacing between the N target list items;

[0134] At least one list item of the N target list items presents the expansion process with a preset first animation display effect.

[0135] In an exemplary embodiment, the first spacing is different from a second spacing between the M target list items displayed in a folded state.

[0136] In an exemplary embodiment, the first distance determining unit includes:

[0137] an area parameter determination unit configured to determine an area parameter of a display area for displaying the target list;

[0138] A first spacing determination subunit is configured to determine a first spacing between the N target list items based on the area parameter and the number N of the target list items displayed in the expanded state;

[0139] The area parameter includes at least one of the following: the size and position of the display area.

[0140] In an exemplary embodiment, the expansion unit is further configured to determine a target position during the expansion process, and display the N target list items in the target list in the display area according to the first spacing based on the target position.

[0141] In an exemplary embodiment, the target position is any one of the following: the position of any one of the first M-1 target list items in the M target list items; or a preset position in the display area.

[0142] In an exemplary embodiment, when the area parameter includes the size of the display area, the first spacing determination subunit includes:

[0143] a candidate spacing determination unit, configured to determine the candidate spacing based on the size of the display area and the number N;

[0144] The first determining unit is configured to determine a first distance between the N target list items based on a comparison result between the candidate distance and a preset threshold.

[0145] In an exemplary embodiment, the apparatus further comprises:

[0146] The moving unit is configured to execute, in response to a move instruction for the target list in the expanded state, moving the N target list items.

[0147] In an exemplary embodiment, the apparatus further comprises:

[0148] A second spacing determination unit is configured to execute, in response to a folding instruction on the target list in the expanded state, to determine a second spacing between the M target list items;

[0149] The folding unit is configured to display the target list in the folded state based on a second spacing between the M target list items; wherein at least one list item of the N target list items presents the folding process with a preset second animation display effect.

[0150] In an exemplary embodiment, the apparatus further comprises:

[0151] a layout attribute information acquisition unit, configured to respectively acquire layout attribute information of the target list in the folded state and the expanded state; the layout attribute information represents position information and display attributes of each list item in the target list, the display attributes including visible attributes and invisible attributes;

[0152] The animation effect generation unit is configured to execute a call to a transition animation execution interface function, determine the difference information between the layout attribute information in the folded state and the expanded state, and generate the preset first animation display effect or the preset second animation display effect according to the difference information.

[0153] In an exemplary embodiment, the target list is a list view based on a system list component.

[0154] Regarding the device in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0155] In an exemplary embodiment, an electronic device is also provided, including a processor; a memory for storing processor executable instructions; wherein, when the processor is configured to execute the instructions stored in the memory, any one of the list display methods provided in the embodiments of the present disclosure is implemented.

[0156] The electronic device may be a terminal, a server or a similar computing device. For example, the electronic device is a terminal. Figure 7 is a block diagram of an electronic device for list display according to an exemplary embodiment. Specifically:

[0157] The terminal may include components such as an RF (Radio Frequency) circuit 710, a memory 720 including one or more computer-readable storage media, an input unit 730, a display unit 740, a sensor 750, an audio circuit 760, a WiFi (wireless fidelity) module 770, a processor 780 including one or more processing cores, and a power supply 790. Those skilled in the art will appreciate that Figure 7 The terminal structure shown in the figure does not constitute a limitation on the terminal, and may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently.

[0158] The RF circuit 710 can be used for receiving and sending signals during information transmission or calls. In particular, after receiving the downlink information of the base station, it is handed over to one or more processors 780 for processing; in addition, the data related to the uplink is sent to the base station. Generally, the RF circuit 710 includes but is not limited to an antenna, at least one amplifier, a tuner, one or more oscillators, a user identity module (SIM) card, a transceiver, a coupler, an LNA (Low Noise Amplifier), a duplexer, etc. In addition, the RF circuit 710 can also communicate with the network and other terminals through wireless communication. The wireless communication can use any communication standard or protocol, including but not limited to GSM (Global System of Mobile communication), GPRS (General Packet Radio Service), CDMA (Code Division Multiple Access), WCDMA (Wideband Code Division Multiple Access), LTE (Long Term Evolution), email, SMS (Short Messaging Service), etc.

[0159] The memory 720 can be used to store software programs and modules, and the processor 780 executes various functional applications and data processing by running the software programs and modules stored in the memory 720. The memory 720 may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, application programs required for functions, etc.; the data storage area may store data created according to the use of the terminal, etc. In addition, the memory 720 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other volatile solid-state storage devices. Accordingly, the memory 720 may also include a memory controller to provide the processor 780 and the input unit 730 with access to the memory 720.

[0160] The input unit 730 can be used to receive input digital or character information, and generate keyboard, mouse, joystick, optical or trackball signal input related to user settings and function control. Specifically, the input unit 730 may include a touch-sensitive surface 731 and other input devices 732. The touch-sensitive surface 731, also known as a touch display screen or touch pad, can collect user touch operations on or near it (such as operations performed by users using fingers, styluses, or any other suitable objects or accessories on or near the touch-sensitive surface 731), and drive corresponding connection devices according to a pre-set program. Optionally, the touch-sensitive surface 731 may include a touch detection device and a touch controller. Among them, the touch detection device detects the user's touch orientation, detects the signal brought by the touch operation, and transmits the signal to the touch controller; the touch controller receives the touch information from the touch detection device, converts it into touch point coordinates, and then sends it to the processor 780, and can receive and execute commands sent by the processor 780. In addition, the touch-sensitive surface 731 can be implemented in various types such as resistive, capacitive, infrared, and surface acoustic wave. In addition to the touch-sensitive surface 731, the input unit 730 may further include other input devices 732. Specifically, the other input devices 732 may include, but are not limited to, one or more of a physical keyboard, function keys (such as volume control keys, switch keys, etc.), a trackball, a mouse, a joystick, and the like.

[0161] The display unit 740 can be used to display information input by the user or information provided to the user and various graphical user interfaces of the terminal, which can be composed of graphics, text, icons, videos and any combination thereof. The display unit 740 may include a display panel 741. Optionally, the display panel 741 may be configured in the form of LCD (Liquid Crystal Display), OLED (Organic Light-Emitting Diode), etc. Further, the touch-sensitive surface 731 may cover the display panel 741. When the touch-sensitive surface 731 detects a touch operation on or near it, it is transmitted to the processor 780 to determine the type of touch event, and then the processor 780 provides corresponding visual output on the display panel 741 according to the type of touch event. Among them, the touch-sensitive surface 731 and the display panel 741 can be two independent components to realize input and output functions, but in some embodiments, the touch-sensitive surface 731 and the display panel 741 can also be integrated to realize input and output functions.

[0162] The terminal may also include at least one sensor 750, such as a light sensor, a motion sensor, and other sensors. Specifically, the light sensor may include an ambient light sensor and a proximity sensor, wherein the ambient light sensor may adjust the brightness of the display panel 741 according to the brightness of the ambient light, and the proximity sensor may turn off the display panel 741 and / or the backlight when the terminal is moved to the ear. As a type of motion sensor, the gravity acceleration sensor can detect the magnitude of acceleration in each direction (generally three axes), and can detect the magnitude and direction of gravity when stationary. It can be used for applications that identify the terminal posture (such as horizontal and vertical screen switching, related games, magnetometer posture calibration), vibration recognition related functions (such as pedometer, tapping), etc.; as for other sensors such as gyroscopes, barometers, hygrometers, thermometers, infrared sensors, etc. that can be configured in the terminal, they will not be repeated here.

[0163] The audio circuit 760, the speaker 761, and the microphone 762 can provide an audio interface between the user and the terminal. The audio circuit 760 can transmit the received audio data to the speaker 761 after converting the electrical signal, which is converted into a sound signal for output; on the other hand, the microphone 762 converts the collected sound signal into an electrical signal, which is received by the audio circuit 760 and converted into audio data, and then the audio data is output to the processor 780 for processing, and then sent to another terminal through the RF circuit 710, or the audio data is output to the memory 720 for further processing. The audio circuit 760 may also include an earplug jack to provide communication between an external headset and the terminal.

[0164] WiFi is a short-range wireless transmission technology. The terminal can help users send and receive emails, browse web pages, and access streaming media through the WiFi module 770, which provides users with wireless broadband Internet access. Figure 7 A WiFi module 770 is shown, but it is understandable that it is not an essential component of the terminal and can be omitted as needed without changing the essence of the invention.

[0165] The processor 780 is the control center of the terminal, and uses various interfaces and lines to connect various parts of the entire terminal. By running or executing software programs and / or modules stored in the memory 720, and calling data stored in the memory 720, the processor 780 performs various functions of the terminal and processes data, thereby monitoring the terminal as a whole. Optionally, the processor 780 may include one or more processing cores; preferably, the processor 780 may integrate an application processor and a modem processor, wherein the application processor mainly processes the operating system, user interface, and application programs, and the modem processor mainly processes wireless communications. It is understandable that the above-mentioned modem processor may not be integrated into the processor 780.

[0166] The terminal also includes a power supply 790 (such as a battery) for supplying power to each component. Preferably, the power supply can be logically connected to the processor 780 through a power management system, so that the power management system can manage charging, discharging, and power consumption management. The power supply 790 can also include any components such as one or more DC or AC power supplies, recharging systems, power failure detection circuits, power converters or inverters, and power status indicators.

[0167] Although not shown, the terminal may also include a camera, a Bluetooth module, etc., which will not be described in detail herein. Specifically in this embodiment, the terminal further includes a memory, and one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by one or more processors. The one or more programs include instructions for executing the list display method provided in the above method embodiment.

[0168] In an exemplary embodiment, a computer-readable storage medium including instructions is also provided, such as a memory 720 including instructions, and the instructions can be executed by a processor 780 of the device 700 to complete the above list display method. Optionally, the computer-readable storage medium can be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.

[0169] In an exemplary embodiment, a computer program product is also provided, including a computer program, and when the computer program is executed by a processor, any one of the list display methods provided in the embodiments of the present disclosure is implemented.

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

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

Claims

1. A list display method, characterized in that: include: Displaying a target list in a collapsed state; wherein the target list in the collapsed state displays M target list items, the target list includes a function list matching the currently browsed client interface, and the list items in the target list are used to display different function contents; In response to an expansion instruction for the target list in the folded state, determining N target list items displayed by the target list in the expanded state, wherein N is greater than M and N is less than or equal to the total number of list items included in the target list; Determining area parameters of a display area for displaying the target list; Determine a first spacing between the N target list items based on the area parameter and the number N of the target list items displayed in the expanded state; the area parameter includes at least one of the following: the size and position of the display area; the first spacing is different from a second spacing between the M target list items displayed in the folded state; Based on a first spacing between the N target list items, unfold and display the target list in the collapsed state; At least one list item of the N target list items presents the expansion process with a preset first animation display effect; Wherein, when the area parameter includes the size of the display area, determining the first spacing between the N target list items based on the area parameter and the number N of the target list items displayed in the expanded state includes: determining a ratio of the size of the display area to the number N, using the ratio as a candidate spacing, and when the candidate spacing exceeds a preset threshold, determining the candidate spacing as the first spacing between the N target list items; when the candidate spacing does not exceed the preset threshold, determining the preset threshold as the first spacing between the N target list items.

2. The list display method according to claim 1, characterized in that: The method further comprises: During the expansion process, a target position is determined, and based on the target position, the N target list items in the target list are displayed in the display area according to the first spacing.

3. The list display method according to claim 2, characterized in that: The target position is any one of the following: the position of any one of the first M-1 target list items in the M target list items; or a preset position in the display area.

4. The list display method according to claim 1, characterized in that: The method further comprises: In response to a move instruction for the target list in the expanded state, the N target list items are moved.

5. The list display method according to claim 1, characterized in that: After expanding and displaying the target list in the folded state, the method further includes: In response to a folding instruction for the expanded target list, determining a second spacing between the M target list items; Based on the second spacing between the M target list items, the target list in the folded state is displayed; wherein at least one list item of the N target list items presents the folding process with a preset second animation display effect.

6. The list display method according to claim 5, characterized in that: The method further comprises: Respectively acquiring layout attribute information of the target list in the folded state and the expanded state; the layout attribute information represents the position information and display attribute of each list item in the target list, and the display attribute includes a visible attribute and an invisible attribute; The transition animation execution interface function is called to determine the difference information between the layout attribute information in the folded state and the layout attribute information in the expanded state, and the preset first animation display effect or the preset second animation display effect is generated according to the difference information.

7. The list display method according to any one of claims 1 and 6, characterized in that: The target list is a list view based on the system list component.

8. A list display device, characterized in that: include: A display unit is configured to execute displaying a target list in a folded state; wherein the target list in the folded state displays M target list items, the target list includes a function list matching the currently browsed client interface, and the list items in the target list are used to display different function contents; A display list item determination unit is configured to execute, in response to an expansion instruction for the target list in the folded state, determine N target list items displayed in the target list in the expanded state, wherein N is greater than M and N is less than or equal to a total number of list items included in the target list; an area parameter determination unit configured to determine an area parameter of a display area for displaying the target list; A first spacing determination unit is configured to determine a first spacing between the N target list items based on the area parameter and the number N of the target list items displayed in the expanded state; the area parameter includes at least one of the following: the size and position of the display area; the first spacing is different from a second spacing between the M target list items displayed in the folded state; an expanding unit, configured to expand and display the target list in the folded state based on a first spacing between the N target list items; At least one list item of the N target list items presents the expansion process with a preset first animation display effect; Wherein, when the area parameter includes the size of the display area, determining the first spacing between the N target list items based on the area parameter and the number N of the target list items displayed in the expanded state includes: determining a ratio of the size of the display area to the number N, using the ratio as a candidate spacing, and when the candidate spacing exceeds a preset threshold, determining the candidate spacing as the first spacing between the N target list items; when the candidate spacing does not exceed the preset threshold, determining the preset threshold as the first spacing between the N target list items.

9. The list display device according to claim 8, characterized in that: The expansion unit is further configured to determine a target position during the expansion process, and display the N target list items in the target list in the display area based on the target position and the first spacing.

10. The list display device according to claim 9, characterized in that: The target position is any one of the following: the position of any one of the first M-1 target list items in the M target list items; or a preset position in the display area.

11. The list display device according to claim 8, characterized in that: The device also includes: The moving unit is configured to execute, in response to a move instruction for the target list in the expanded state, moving the N target list items.

12. The list display device according to claim 8, characterized in that: The device also includes: A second spacing determination unit is configured to execute, in response to a folding instruction on the target list in the expanded state, to determine a second spacing between the M target list items; The folding unit is configured to display the target list in the folded state based on a second spacing between the M target list items; wherein at least one list item of the N target list items presents the folding process with a preset second animation display effect.

13. The list display device according to claim 12, characterized in that: The device also includes: a layout attribute information acquisition unit, configured to respectively acquire layout attribute information of the target list in the folded state and the expanded state; the layout attribute information represents position information and display attributes of each list item in the target list, the display attributes including visible attributes and invisible attributes; The animation effect generation unit is configured to execute a call to a transition animation execution interface function, determine the difference information between the layout attribute information in the folded state and the expanded state, and generate the preset first animation display effect or the preset second animation display effect according to the difference information.

14. The list display device according to any one of claims 8 and 13, characterized in that: The target list is a list view based on the system list component.

15. An electronic device, characterized in that: include: processor; a memory for storing instructions executable by the processor; The processor is configured to execute the instructions to implement the list display method as described in any one of claims 1 to 7. 16 . A computer-readable storage medium, when instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the list display method according to any one of claims 1 to 7.

17. A computer program product comprising a computer program, characterized in that When the computer program is executed by a processor, the list display method according to any one of claims 1 to 7 is implemented.

Images