User interface display method, device, equipment and storage medium

Abstract

The present application discloses a method, device, equipment and storage medium for displaying a user interface, and belongs to the field of computer technology. The method comprises: displaying element controls of n cells in a table control in a user interface that belong to a visible range; in response to a human-computer interaction operation, moving the element control of a first cell in the n cells out of the visible range, and recycling the element control of the first cell; creating an element control of a second cell in the user interface, the second cell being a cell in the table control indicated by the human-computer interaction operation other than the n cells, and being moved to the visible range. The present application can realize that when displaying a user interface, only element controls of cells displayed in the user interface are created, thereby avoiding the situation where a freeze occurs when loading the user interface due to the creation of a large number of element controls at one time, and can reduce the computing resources consumed when displaying the user interface.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method, device, equipment and storage medium for displaying a user interface. Background Art

[0002] The client may have a user interface that needs to provide a large number of elements for display. For example, in a first-person shooting (FPS) game, there is a user interface for displaying virtual weapons, and the types and quantities of virtual weapons that need to be displayed are large.

[0003] In the related art, the client uses the element control of the cell in the table control to control the display of the display elements in the user interface. The client displays the display element of each cell in the element control displayed in the user interface. Since the size of the display screen of the computer device where the client is located is limited, the client also supports sliding operations on the element control to realize sliding display of different element controls, thereby realizing switching display of display elements in different cells in the user interface.

[0004] When the user interface is displayed in the above manner, a large number of element controls will be created in the user interface at one time, which may cause a freeze when loading the user interface, and there is a problem of consuming a large amount of computing resources when displaying the user interface. Summary of the invention

[0005] The present application provides a method, device, equipment and storage medium for displaying a user interface, which can reduce the computing resources consumed when displaying a user interface. The technical solution is as follows:

[0006] According to one aspect of the present application, a method for displaying a user interface is provided, the method comprising:

[0007] Displaying an element control of n cells in a visible range in a table control in the user interface, wherein the element control is a display element for displaying a single cell, the table control includes m cells, m and n are positive integers, and m is greater than n;

[0008] In response to a human-computer interaction operation, move the element control of a first cell among the n cells out of the visible range, and recycle the element control of the first cell;

[0009] An element control of a second cell is created in the user interface, where the second cell is a cell in the table control other than the n cells indicated by the human-computer interaction operation and is moved to the visible range.

[0010] According to another aspect of the present application, a display device for a user interface is provided, the device comprising:

[0011] A display module, used for displaying element controls of n cells in a visible range in a table control in the user interface, wherein the element control is a display element for displaying a single cell, and the table control includes m cells, where m and n are positive integers, and m is greater than n;

[0012] A processing module, configured to move the element control of a first cell among the n cells out of the visible range and recycle the element control of the first cell in response to a human-computer interaction operation;

[0013] A creation module is used to create an element control of a second cell in the user interface, where the second cell is a cell in the table control other than the n cells indicated by the human-computer interaction operation and is moved to the visible range.

[0014] In an optional design, the device further includes:

[0015] The creation module is used to create a placeholder grid for each of the m cells of the table control for the user interface, wherein the placeholder grid includes first vertex information of the element control of the m cells in the user interface;

[0016] A determination module, configured to determine, based on the placeholder grid, that the first vertex information belongs to the n cells in the visible range;

[0017] The creation module is used to create element controls of the n cells in the user interface;

[0018] The display module is used to display the element controls of the n cells within the visible range of the user interface.

[0019] In an optional design, the processing module is used to:

[0020] In response to the human-computer interaction operation, modify the first vertex information of the placeholder grids of the m cells according to the human-computer interaction operation to obtain second vertex information;

[0021] The determining module is configured to determine, among cells of the placeholder grid corresponding to the second vertex information outside the visible range, a cell belonging to the n cells as the first cell;

[0022] The processing module is used to recycle the element control of the first cell.

[0023] In an optional design, the processing module is used to:

[0024] In response to the human-computer interaction operation, modify the first vertex information of the placeholder grids of the m cells according to the human-computer interaction operation to obtain second vertex information;

[0025] The determining module is configured to determine, among cells corresponding to the placeholder grid in the visible range in which the second vertex information belongs, cells that do not belong to the n cells as the second cells;

[0026] The creation module is used to create an element control of the second cell in the user interface.

[0027] In an optional design, the creation module is used to:

[0028] Based on the arrangement and size of the m cells of the table control in the user interface, placeholder grids for the m cells of the table control are created for the user interface.

[0029] In an optional design, the creation module is used to:

[0030] In the placeholder grid corresponding to the second cell, an element control of the second cell is created.

[0031] In an optional design, the processing module is used to:

[0032] Recycling the element control of the first cell into the cache pool;

[0033] The cache pool is used to store element controls to be loaded.

[0034] In an optional design, the processing module is used to:

[0035] Among the element controls loaded in the user interface, the element control of the first cell is deleted, and the element control of the first cell is stored as the element control to be loaded in the cache pool.

[0036] In an optional design, the creation module is used to:

[0037] In response to the number of element controls to be loaded stored in the cache pool being greater than the number of the second cells, acquiring element controls to be loaded having the same number as the number of the second cells through the cache pool;

[0038] By reusing the element control to be loaded obtained from the cache pool, an element control of the second cell is created in the placeholder grid corresponding to the second cell.

[0039] In an optional design, the creation module is used to:

[0040] In response to the number of element controls to be loaded stored in the cache pool being not greater than the number of the second cells, acquiring all element controls to be loaded in the cache pool;

[0041] By reusing the element controls to be loaded obtained from the cache pool and creating additional element controls, an element control of the second cell is created in the placeholder grid corresponding to the second cell;

[0042] The number of the additional element controls is the difference between the number of the second cells and the number of all element controls to be loaded stored in the cache pool.

[0043] In an optional design, the device further includes:

[0044] An adjustment module is used to adjust the size of the element control of the second cell according to the size of the display element in the element control of the second cell.

[0045] In an optional design, the device further includes:

[0046] A determination module is used to determine the display style and interaction effect of the element controls of the n cells in the table control displayed in the user interface based on preconfigured parameters.

[0047] In an optional design, the interaction effect includes at least one of the following:

[0048] Slide display;

[0049] Page turning display;

[0050] Keep the slide display centered.

[0051] According to another aspect of the present application, a computer device is provided, comprising a processor and a memory, wherein the memory stores at least one instruction, at least one program, a code set or an instruction set, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by the processor to implement the user interface display method as described above.

[0052] According to another aspect of the present application, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores at least one instruction, at least one program, a code set or an instruction set, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by a processor to implement the user interface display method as described above.

[0053] According to another aspect of the present application, a computer program product or a computer program is provided, the computer program product or the computer program including computer instructions, the computer instructions being stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the user interface display method provided in various optional implementations of the above aspects.

[0054] The beneficial effects of the technical solution provided by this application include at least:

[0055] By recycling the element controls of cells that are moved outside the display range of the user interface and creating element controls of cells that are moved to the visible range of the user interface, the element controls displayed in the user interface can be changed according to the human-computer interaction operation. When displaying the user interface, only the element controls of the cells displayed in the user interface can be created, thereby avoiding the situation where a large number of element controls are created at one time, which causes a freeze when loading the user interface, and can reduce the computing resources consumed when displaying the user interface. BRIEF DESCRIPTION OF THE DRAWINGS

[0056] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0057] Figure 1 is a structural block diagram of a computer system provided by an exemplary embodiment of the present application;

[0058] Figure 2 is a schematic diagram of a process of displaying a user interface provided by an exemplary embodiment of the present application;

[0059] Figure 3 is a flowchart of a method for displaying a user interface provided by an exemplary embodiment of the present application;

[0060] Figure 4 is a flowchart of a method for displaying a user interface provided by an exemplary embodiment of the present application;

[0061] Figure 5 is a schematic diagram of a sliding display effect provided by an exemplary embodiment of the present application;

[0062] Figure 6 is a schematic diagram of a page turning display effect provided by an exemplary embodiment of the present application;

[0063] Figure 7is a schematic diagram of a sliding display effect of keeping the display centered provided by an exemplary embodiment of the present application;

[0064] Figure 8 is a schematic diagram of pre-configured parameters provided by an exemplary embodiment of the present application;

[0065] Fig. 9 is a schematic diagram of a base class of a display control provided by an exemplary embodiment of the present application;

[0066] Fig.10 It is a schematic diagram of a process of implementing the creation of an element control provided by an exemplary embodiment of the present application;

[0067] Fig.11 is a schematic structural diagram of a display device of a user interface provided by an exemplary embodiment of the present application;

[0068] Fig.12 is a schematic structural diagram of a display device of a user interface provided by an exemplary embodiment of the present application;

[0069] Fig.13 is a schematic structural diagram of a display device of a user interface provided by an exemplary embodiment of the present application;

[0070] Fig.14 It is a schematic diagram of the structure of a terminal provided by an exemplary embodiment of the present application.

[0071] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application. DETAILED DESCRIPTION

[0072] In order to make the objectives, technical solutions and advantages of the present application clearer, the implementation methods of the present application will be further described in detail below with reference to the accompanying drawings.

[0073] First, the nouns involved in the embodiments of the present application are introduced:

[0074] Virtual environment: is a virtual environment displayed (or provided) when an application is running on a terminal. The virtual environment can be a simulation of the real world, a semi-simulation and semi-fictitious environment, or a purely fictitious environment. The virtual environment can be any one of a two-dimensional virtual environment, a 2.5-dimensional virtual environment, and a three-dimensional virtual environment, which is not limited in the embodiments of the present application.

[0075] Virtual character: refers to at least one movable object controlled by a user in a virtual environment. The virtual character can be a virtual person, a virtual animal, a cartoon character, etc. Optionally, the virtual character is a three-dimensional model created based on animation skeleton technology. Each virtual character has its own shape and volume in the virtual environment and occupies a part of the space in the virtual environment.

[0076] User Interface (UI) controls: refers to any visual controls or elements that can be seen on the user interface of an application, such as images, input boxes, text boxes, buttons, labels, etc. Some UI controls respond to user operations.

[0077] Figure 1 1 is a structural block diagram of a computer system provided by an exemplary embodiment of the present application. The computer system 100 includes: a first terminal 110, a second terminal 120 and a server 130.

[0078] The first terminal 110 is installed and runs an application involving a large number of elements for display, such as a warehouse management client, a mall client, an instant messaging client, a payment client, a video on demand client, a short video client, a live broadcast client, a music client, a financial client, and a game client. For example, the first terminal 110 is installed and runs an application that supports a virtual environment, which can be any one of a first-person shooting (First-Person Shooting, FPS) game, a third-person shooting (Third-Personal Shooting, TPS) game, a multiplayer online tactical competition (Multiplayer Online Battle Arena, MOBA) game, a tactical competitive game, and a strategy game (Simulation Game, SLG). The first terminal 110 is a terminal used by the first user 111. The first user 111 uses the first terminal 110 to control the virtual character in the application located in the virtual environment to perform activities. The virtual character can be called the virtual character of the first user 111. The activities of the virtual character include but are not limited to: adjusting body posture, crawling, walking, running, riding, flying, jumping, driving, picking up, shooting, attacking, and throwing. Illustratively, the avatar is a virtual human character, such as a simulated human character or an animated human character.

[0079] The second terminal 120 is installed and runs an application involving a large number of elements for display, such as a warehouse management client, a mall client, an instant messaging client, a payment client, a video on demand client, a short video client, a live broadcast client, a music client, a financial client, and a game client. For example, the second terminal 120 is installed and runs an application that supports a virtual environment, which can be any one of an FPS game, a TPS game, a MOBA game, a tactical competitive game, and an SLG. The second terminal 120 is a terminal used by the second user 121. The second user 121 uses the second terminal 120 to control the virtual character in the virtual environment in the application to perform activities. The virtual character can be called the virtual character of the second user 121. The activities of the virtual character include, but are not limited to: adjusting body posture, crawling, walking, running, riding, flying, jumping, driving, picking up, shooting, attacking, and throwing. Schematically, the virtual character is a virtual character, such as a simulation character or an animation character.

[0080] Optionally, the applications installed on the first terminal 110 and the second terminal 120 are the same, or the applications installed on the two terminals are the same type of applications of different control system platforms. The first terminal 110 may generally refer to one of a plurality of terminals, and the second terminal 120 may generally refer to one of a plurality of terminals. This embodiment is only illustrated by the first terminal 110 and the second terminal 120. The device types of the first terminal 110 and the second terminal 120 are the same or different, and the device type includes at least one of: a smart phone, a tablet computer, an e-book reader, an MP3 player, an MP4 player, a laptop portable computer, and a desktop computer. The following embodiments are illustrated by the example that the terminal includes a smart phone.

[0081] The first terminal 110 and the second terminal 120 are connected to the server 130 via a wireless network or a wired network.

[0082] The server 130 includes at least one of a single server, multiple servers, a cloud computing platform, and a virtualization center. The server 130 is used to provide background services for the above-mentioned application. Optionally, the server 130 undertakes the main computing work and the terminal undertakes the secondary computing work; or, the server 130 undertakes the secondary computing work and the terminal undertakes the main computing work; or, the server 130 and the terminal adopt a distributed computing architecture for collaborative computing.

[0083] In an illustrative example, the server 130 includes a processor 131, a user account database 132, a battle service module 133, and a user-oriented input / output interface (I / O interface) 134. The processor 131 is used to load instructions stored in the server 130 and process data in the user account database 132 and the battle service module 133; the user account database 132 is used to store data of user accounts used by the first terminal 110, the second terminal 120 and other terminals, such as the user account's avatar, the user account's nickname, the user account's combat power index, and the service area where the user account is located; the battle service module 133 is used to provide multiple battle rooms for users to fight; the user-oriented I / O interface 134 is used to establish communication and exchange data with the first terminal 110 and the second terminal 120 through a wireless network or a wired network.

[0084] Optionally, the above-mentioned terminal and server are both computer devices.

[0085] Those skilled in the art will appreciate that the number of the above terminals may be more or less. For example, the above terminal may be only one, or the above terminals may be dozens or hundreds, or more. The embodiment of the present application does not limit the number of terminals and device types.

[0086] Figure 2 FIG. 1 is a schematic diagram of a process of displaying a user interface provided by an exemplary embodiment of the present application. Figure 2 As shown in (a), when the user interface needs to be displayed, the client creates a placeholder grid 201 (for example, Figure 2 The 9 cells of the table control in the table have their own placeholder grids 201), and the placeholder grids 201 include the first vertex information of the element controls of the m cells in the user interface. Figure 2 As shown in (b), the client determines in the table control that the first vertex information belongs to the placeholder grid 201 (eg, Figure 2 n cells corresponding to the placeholder grids 1-6 in the example, and creating element controls 203 (e.g. Figure 2 The black placeholder grids 1-6 indicate that an element control 203 is created, so that the element controls 203 of the n cells are displayed within the visible range 202 of the user interface. The element control is a display element used to display a single cell.

[0087] like Figure 2As shown in (c), in response to the human-computer interaction operation, the client modifies the first vertex information of the placeholder grid 201 of each of the m cells according to the human-computer interaction operation to obtain the second vertex information. The client determines the cell corresponding to the placeholder grid 201 outside the visible range 202, which belongs to the n cells, as the first cell (e.g. Figure 2 The client determines the cell corresponding to the placeholder grid 201 in the visible range 202, which is not one of the n cells, as the second cell (e.g. Figure 2 The element control of the second cell is created in the user interface, thereby realizing the display of the element control of the second cell in the user interface.

[0088] Optionally, the above-mentioned process of recycling element controls and creating element controls is implemented through a cache pool, which is used to store element controls to be loaded. The recycled element controls are stored as element controls to be loaded in the cache pool. When it is necessary to create an element control, the element controls to be loaded in the cache pool will be reused first. When the number of element controls to be loaded cannot meet the number of element controls to be created, the client will create a new element control.

[0089] By displaying the user interface in the above manner, it is possible to create only the element controls of the cells displayed in the user interface when loading the user interface, thereby avoiding the situation where a large number of element controls are created at one time and the loading of the user interface is jammed. Since the placeholder grid does not include any resources for display, but only includes the vertex information of the element controls, it is possible to reduce the computing resources consumed when displaying the user interface compared to loading all the element controls in the user interface at one time.

[0090] Figure 3 FIG. 1 is a flow chart of a method for displaying a user interface provided by an exemplary embodiment of the present application. The method can be used for Figure 1 A terminal in the system shown or a client on the terminal. Figure 3 As shown, the method includes:

[0091] Step 302: Displaying element controls of n cells in a visible range in a table control on a user interface.

[0092] The user interface is any interface including a table control in the client. For example, the client is an FPS game, and the user interface includes a user's warehouse interface, a game setting interface, and a virtual character's wear setting interface, etc.

[0093] The table control is a UI control displayed in a table style. The element control is used to display the display elements of a single cell in the table control, for example, displayed as a rectangular box. The element control is also used to display the display elements of the cell, that is, the display elements of the cell corresponding to the element control will be displayed in the element control. Different cells correspond to different display elements, including pictures, text, icons, etc. The display element can also be a blank background for the cell, for example, the rectangular box of the cell is filled with different colors. Exemplarily, the client is an FPS game, and the display elements of the cell include different types of virtual weapons in the FPS game.

[0094] The element controls of n cells in the table control are displayed in the user interface, and the element controls of the n cells are located within the visible range of the user interface. The visible range of the user interface is the range included in the screen displayed by the user interface when it is displayed, and the display elements in the user interface that are located within the visible range will be displayed in the user interface. The table control includes m cells, m and n are positive integers, and m is greater than n. Optionally, the cells in the table control are arranged in the form of X*Y, X is the number of rows of cells in the table control, Y is the number of columns of cells in the table control, and X and Y are positive integers.

[0095] Step 304: In response to the human-computer interaction operation, the element control of the first cell among the n cells is moved out of the visible range, and the element control of the first cell is recycled.

[0096] Optionally, the human-computer interaction operation is triggered by a touch screen, mouse, keyboard or other external device of the computer device where the client is located. The human-computer interaction operation includes a sliding operation on the element controls of n cells in the user interface, such as an upward sliding operation, a downward sliding operation, a left sliding operation or a right sliding operation. In response to the human-computer interaction operation, the client will adjust the position of the element controls of the cells in the user interface according to the human-computer interaction operation. The element controls of the cells that originally belonged to the visible range may be moved out of the visible range of the user interface, and the cells that were originally outside the visible range may be moved into the visible range of the user interface. The first cell is a cell indicated by the human-computer interaction operation, which is moved out of the visible range of the user interface among the n cells. The first cell includes one or more cells among the n cells.

[0097] For example, the vertex coordinates of the user interface are (0, 0), (1920, 0), (0, 1080), and (1920, 1080), respectively, and the range formed by the vertex coordinates is the visible range of the user interface. The left side of cell 1 among the n cells is horizontally located at 10 in the user interface, the width of cell 1 is 300, and the human-computer interaction operation indicates that cell 1 is moved to the left by 400. In this case, the client will move cell 1 out of the visible range of the user interface based on the instructions of the human-computer interaction operation.

[0098] Optionally, the client reclaims the element control of the first cell, including the client deleting the element control of the first cell from element controls loaded in the user interface and storing the element control.

[0099] Step 306: Create an element control of the second cell in the user interface.

[0100] The second cell is a cell in the table control indicated by the human-computer interaction operation, except for the n cells, that is moved to the visible range of the user interface. The second cell includes one or more cells. When the second cell moves to the visible range, the second cell will be displayed in the user interface at this time, so the client will create an element control of the second cell in the user interface.

[0101] Optionally, after the client recycles the element control of the cell that is moved out of the visible range of the user interface, the client will store the reclaimed element control. The stored element control can be used for display in other cells in the table control, that is, when the client displays the other cell in the user interface, the previously reclaimed element control will be created as the element control of the other cell in the user interface. For example, when the client creates an element control for the second cell in the user interface, the above-mentioned reclaimed element control will be used to implement the creation, thereby avoiding the process of creating a new element control and reducing the computing resources used when creating the element control.

[0102] In summary, the method provided in this embodiment realizes changing the element controls displayed in the user interface according to the human-computer interaction operation by recycling the element controls of the cells moved outside the display range of the user interface and creating the element controls of the cells moved to the visible range of the user interface. It can be achieved that when displaying the user interface, only the element controls of the cells displayed in the user interface are created, thereby avoiding the situation where the user interface is loaded and jammed due to the creation of a large number of element controls at one time, and can reduce the computing resources consumed when displaying the user interface.

[0103] Figure 4 FIG. 1 is a flow chart of a method for displaying a user interface provided by an exemplary embodiment of the present application. The method can be used for Figure 1A terminal in the system shown or a client on the terminal. Figure 4 As shown, the method includes:

[0104] Step 402: creating placeholder grids for the m cells of the table control respectively for the user interface, wherein the placeholder grids include first vertex information of the element controls of the m cells in the user interface.

[0105] Before displaying the user interface for the first time, the client creates a placeholder grid for each of the m cells of the table control for the user interface, that is, a placeholder grid is created for each cell in the table control. The placeholder grid is used to reflect the position of the cell of the table control relative to the user interface. Optionally, when the element control is a rectangle, the first vertex information includes the coordinates of the four vertices of the element control of the cell in the coordinate system of the user interface.

[0106] Optionally, the client creates a placeholder grid for each of the m cells of the table control for the user interface based on the arrangement and size of the m cells of the table control in the user interface. Figure 2 (a), when the user interface is displayed for the first time, the client creates placeholder grids for the 9 cells of the table control based on the arrangement and size of the 9 cells of the table control in the user interface. The cells corresponding to placeholder grids 1-6 belong to the visible range of the user interface, and the cells corresponding to placeholder grids 7-9 are outside the visible range of the user interface.

[0107] Step 404: Based on the placeholder grid, determine n cells in the table control of the user interface whose first vertex information belongs to the visible range.

[0108] The client determines that the first vertex information in the table control of the user interface belongs to n cells in the visible range, that is, the client determines the cells corresponding to the placeholder grid in which the first vertex information belongs to the visible range as the n cells. The table control includes m cells, m is a positive integer, and m is greater than n. Optionally, the visible range is the range formed by the vertex coordinates of the user interface. When the first vertex information includes multiple vertex coordinates, if a vertex coordinate in the first vertex information belongs to the visible range, the client determines that the first vertex information belongs to the visible range.

[0109] Step 406: Create n cell element controls in the user interface.

[0110] Optionally, when the client displays the user interface for the first time, it will create n new element controls and use the newly created n element controls as element controls for n cells. The client creates the above element controls based on the default size of the cells in the table control. The client will create element controls for each of the n cells in the placeholder grid corresponding to each of the n cells.

[0111] The element control is used to display the display element of a single cell in the table control, for example, it is displayed as a rectangular box. The element control is also used to display the display element of the cell, that is, the element control will display the display element of the cell corresponding to the element control. Different cells correspond to different display elements, including pictures, text, icons, etc. The display element can also be a blank background of the cell.

[0112] Step 408: Display element controls of n cells within the visible range of the user interface.

[0113] After the client creates an element control of n cells in the user interface, when rendering the user interface, the created element control of n cells is used to render data, thereby realizing displaying the element control of n cells within the visible range of the user interface.

[0114] Step 410: In response to the human-computer interaction operation, modify the first vertex information of the placeholder grids of the m cells according to the human-computer interaction operation to obtain the second vertex information.

[0115] Optionally, the human-computer interaction operation is triggered by a touch screen, mouse, keyboard or other external device of the computer device where the client is located. The human-computer interaction operation includes a sliding operation on the element controls of n cells in the user interface. In response to the human-computer interaction operation, the client will modify the first vertex information of the placeholder grids of each of the m cells to obtain the second vertex information. This is equivalent to the client moving the position of the placeholder grids of each of the m cells relative to the user interface according to the human-computer interaction operation.

[0116] Step 412: Determine a cell belonging to n cells in the placeholder grid corresponding to the second vertex information outside the visible range as the first cell.

[0117] The first cell is a cell in the n cells that is moved out of the visible range of the user interface as indicated by the human-computer interaction operation. After modifying the vertex information of the placeholder grid, the client will determine a cell in the n cells that is located outside the display range of the user interface and corresponds to the placeholder grid as the first cell.

[0118] Step 414: Move the element control of the first cell among the n cells out of the visible range, and recycle the element control of the first cell.

[0119] Optionally, when the client moves the element control of the first cell among the n cells out of the visible range, a sliding animation is displayed, and the sliding animation is used to reflect the process of the element control of the first cell moving out of the visible range.

[0120] The client recycles the element control of the first cell, including the client deleting the element control of the first cell from the element controls loaded in the user interface and storing it. Optionally, the client will recycle the element control of the first cell to the cache pool for reuse by other cells that need to create element controls. The cache pool is used to store element controls to be loaded. Specifically, the client will delete the element control of the first cell from the element controls loaded in the user interface, and store the element control of the first cell as the element control to be loaded in the cache pool.

[0121] Step 416: Determine a cell that does not belong to the n cells among the cells corresponding to the placeholder grid in the visible range and for which the second vertex information belongs as a second cell.

[0122] The second cell is a cell in the table control indicated by the human-computer interaction operation, except for n cells, moved to the visible range of the user interface. When the human-computer interaction operation indicates to move the second cell to the visible range of the user interface, the element control of the second cell has not been created in the user interface.

[0123] Step 418: Create an element control of the second cell in the user interface.

[0124] The second cell is moved to the visible range of the user interface, that is, the user interface needs to display the element control of the second cell at this time, so the client creates the element control of the second cell in the user interface. Optionally, the client creates the element control of the second cell in the placeholder grid corresponding to the second cell.

[0125] Optionally, when the client recycles element controls of cells that do not need to be displayed through the cache pool and provides element controls for cells that need to be displayed, in response to the number of element controls to be loaded stored in the cache pool being greater than the number of second cells, the client obtains the same number of element controls to be loaded as the second cells through the cache pool. By reusing the element controls to be loaded obtained from the cache pool, the client creates the element controls of the second cell in the placeholder grid corresponding to the second cell.

[0126] In response to the number of element controls to be loaded stored in the cache pool being not greater than the number of the second cell, the client obtains all element controls to be loaded in the cache pool. By reusing the element controls to be loaded obtained in the cache pool and creating additional element controls, the client creates element controls of the second cell in the placeholder grid corresponding to the second cell. The number of additional element controls is the difference between the number of the second cell and the number of all element controls to be loaded stored in the cache pool.

[0127] It should be noted that the number of element controls of a cell that can be displayed within the visible range of the user interface is usually limited. Figure 2 , within the visible range of the user interface, at most 7 cells can be displayed (for example Figure 2 Compared with the 6 element controls that are first created when the user interface is displayed, the client needs to create 1 more element control. After that, the client does not need to create additional element controls. It only needs to recycle the element controls of cells that do not need to be displayed to the cache pool, and obtain the element controls from the cache pool to create element controls for cells that need to be displayed. That is, after the client displays the maximum number of element controls in the user interface, the client only needs to obtain the element controls through the cache pool, and no additional element controls need to be created.

[0128] After the client creates the element control of the second cell, the client will adjust the size of the element control of the second cell according to the size of the display element in the element control of the second cell, because the size of the display element in the second cell may be different from the size of the display element previously displayed in the element control used. For example, if the display element in the second cell is 300 characters, the client will use the element control in the cache pool when creating the element control for the second cell. The display element previously displayed in the element control is 10 characters. At this time, the client will adjust the size of the element control of the second cell to ensure that the display element of the second cell can be fully displayed in the element control.

[0129] Optionally, when the client creates an element control for a cell of a table control, the client uses preconfigured parameters to control the display style and interaction effect of the created element control. The preconfigured parameters are configured by the developer or operator of the client. By configuring different preconfigured parameters, the client can create element controls with different display styles and interaction effects. For example, in the above step 406, the client determines the display style and interaction effect of the element controls of n cells in the table control displayed in the user interface based on the preconfigured parameters. Optionally, the interaction effect includes at least one of the following:

[0130] Slide display;

[0131] Page turning display;

[0132] ·Slide the display to keep it centered.

[0133] Among them, sliding display means that the element control of the cell supports sliding display following the sliding operation. For example, in the case where the table control includes cells with multiple rows and columns, the element control of the cell supports sliding up, sliding down, sliding left and sliding right. In the case where the table control includes cells with one row and multiple columns, the element control of the cell supports sliding left and sliding right. In the case where the table control includes cells with multiple rows and one column, the element control of the cell supports sliding up and sliding down.

[0134] Paging display means that the element control of the cell supports paging display following the paging operation, that is, the client will display the current page of cells as another page of cells indicated by the paging operation. For example, in the case where the table control includes cells with multiple rows and columns, the element control of the cell supports page up operation, page down operation, page left operation and page right operation. In the case where the table control includes cells with one row and multiple columns, the element control of the cell supports page left operation and page right operation. In the case where the table control includes cells with multiple rows and one column, the element control of the cell supports page up operation and page down operation.

[0135] Keeping the sliding display centered means that the cell element control is displayed horizontally or vertically in the center of the user interface while supporting sliding display following the sliding operation. When the cell element control is displayed horizontally in the center, the cell element control supports sliding up and sliding down. When the cell element control is displayed vertically in the center, the cell element control supports sliding left and sliding right.

[0136] For example, Figure 5 FIG. 1 is a schematic diagram of a sliding display effect provided by an exemplary embodiment of the present application. Figure 5 As shown, in the clothing setting interface 501 of the virtual character of the FPS game, different types of virtual clothing are provided for display. The clothing setting interface 501 includes a table control, and the table control includes a cell 502 with a row and multiple columns. The element control of the cell 502 is displayed as a rectangular frame, and the virtual clothing corresponding to the cell 501 is displayed in the element control of the cell 502. The element control of the cell 502 supports left sliding operation and right sliding operation.

[0137] For example, Figure 6 FIG. 1 is a schematic diagram of a page turning display effect provided by an exemplary embodiment of the present application. Figure 6As shown, in the warehouse interface 601 of the FPS game, different types of virtual weapons are provided for display. The warehouse interface 601 includes a table control, and the table control includes a cell 602 with multiple rows and columns. The element control of the cell 602 is displayed as a rectangular frame, and the virtual weapon corresponding to the cell 601 is displayed in the element control of the cell 602. Alternatively, in the case where the cell 602 does not correspond to a virtual weapon, a solid color background is displayed in the element control of the cell 602. The element control of the cell 602 supports at least one of sliding operations in four directions and page turning operations in four directions.

[0138] For example, Figure 7 FIG. 1 is a schematic diagram of a sliding display effect for keeping the display centered provided by an exemplary embodiment of the present application. Figure 7 As shown, in the setting interface 701 of the FPS game, different types of setting options are provided for display. The setting interface 701 includes a table control, and the table control includes a cell 702 with multiple rows and one column. The element control of the cell 702 is displayed as a rectangular frame, and the setting options corresponding to the cell 701 are displayed in the element control of the cell 702. The element control of the cell 702 remains horizontally centered, and the element control of the cell 702 supports sliding up and sliding down operations.

[0139] For example, Figure 8 FIG. 1 is a schematic diagram of pre-configured parameters provided by an exemplary embodiment of the present application. Figure 8 As shown, the pre-configured parameters 802 corresponding to the table control 801 include parameters for configuring the number of rows and columns of cells in the table control 801, parameters for the display size and display position of the table control 801, parameters for the display style of the table control 801, and parameters for whether to display a page turning control corresponding to the table control 801. The page turning control is used to trigger a page turning operation for an element control of a cell of the table control 801.

[0140] In order to ensure that the element control can be used in different user interfaces of the client, the client will also provide a unified interface for developers to manage the addition, deletion, modification and query of the element controls provided by the client. Optionally, the circular list controls (table controls) of different expressions all inherit from the same base class, so they can be used in different user interfaces of the client.

[0141] For example, Fig. 9 FIG. 1 is a schematic diagram of a base class of a display control provided by an exemplary embodiment of the present application. Fig. 9As shown, component table library 902 (SLuaWidgetTableBase) inherits from panel component 901 (UPanelWigdet). Circular list controls with different performances include a circular list control 903 for sliding display, a circular list control 904 for page turning display, and a circular list control 905 for keeping the display centered. They all inherit from component table library 902. Among them, the scroll box (ScrollBox) layer is used to encapsulate the parameters that can be configured by the editor, so that operators can adjust the animation parameters of the table control. The scroll panel (ScrollPanel) layer is used to customize the logic of different sliding performances, supporting page turning sliding, horizontal and vertical sliding, and sliding that keeps the display centered. In the base class of the client, the general add, delete, modify and query interface of the element component of the cell in the table control will be encapsulated, so that different types of table controls have a universal unified interface, and add, delete, modify and query can be implemented with one line of code.

[0142] In a specific example, Fig.10 FIG. 1 is a schematic diagram of a process of implementing an element control provided by an exemplary embodiment of the present application. Fig.10 As shown, in step S1, the client receives a request from the user to open the warehouse interface. In step S2, the client obtains the display elements of the cells of the table control of the warehouse interface. In step S3, the client determines whether the number of display elements is greater than 0. If not greater than 0, the process ends. In step S4, if the number of display elements is greater than 0, the client creates a placeholder grid for the cells of the table control. In step S5, the client determines whether the placeholder grid is within the visible area of ​​the user interface. In step S6, if the placeholder grid is within the visible area of ​​the user interface, the client determines whether there is an element control in the buffer pool. In step S7, if there is an element control in the buffer pool, the client obtains the element control from the buffer pool and fills it into the placeholder grid belonging to the visible area to create a placeholder grid for the cell. In step S8, if the element control in the buffer pool does not meet the quantity requirement, the client creates a new element control and fills it into the placeholder grid belonging to the visible area to create a placeholder grid for the cell. In step S9, if the placeholder grid is not within the visible area of ​​the user interface, the client checks whether there is an element control in the placeholder grid. In step S10, if there is an element control in the placeholder grid that is not in the visible area of ​​the user interface, the client will recycle the element control to the cache pool. In step S11, the client will refresh the element control created in the user interface. In step S12, the client will determine whether the size of the element control needs to be adjusted according to the size of the element displayed in the element control. In step S13, if the client determines that the size of the element control needs to be adjusted, the client will adjust the size of the element control according to the size of the element displayed in the element control.

[0143] In summary, the method provided in this embodiment realizes changing the element controls displayed in the user interface according to the human-computer interaction operation by recycling the element controls of the cells moved outside the display range of the user interface and creating the element controls of the cells moved to the visible range of the user interface. It can be achieved that when displaying the user interface, only the element controls of the cells displayed in the user interface are created, thereby avoiding the situation where the user interface is loaded and jammed due to the creation of a large number of element controls at one time, and can reduce the computing resources consumed when displaying the user interface.

[0144] The method provided in this embodiment also uses a placeholder grid to determine whether it is necessary to create an element control for a cell. Since the placeholder grid does not include any resources for display and only includes vertex information of the element control, it can reduce the computing resources consumed when displaying the user interface compared to loading all the element controls in the user interface at one time.

[0145] The method provided in this embodiment also determines the first cell and recycles the first cell by adjusting the vertex information of the placeholder grid according to the human-computer interaction operation, thereby providing a method for quickly determining the cell that is moved out of the display range of the user interface.

[0146] The method provided in this embodiment also determines the second cell and creates an element control for the second cell by adjusting the vertex information of the placeholder grid according to the human-computer interaction operation, thereby providing a way to quickly determine the cell that is moved into the display range of the user interface.

[0147] The method provided in this embodiment also creates a placeholder grid based on the arrangement and size of cells in the user interface, thereby ensuring that the placeholder grid can accurately reflect the position of the cells relative to the user interface.

[0148] The method provided in this embodiment also creates an element control of a cell in a precise position by creating an element control of the cell in a placeholder grid corresponding to the cell.

[0149] The method provided in this embodiment also provides element controls for other cells that need to create element controls by recycling the element controls of the first cell into a cache pool, thereby avoiding repeated creation of element controls.

[0150] The method provided in this embodiment also achieves the goal of deleting element controls that do not need to be displayed in the user interface while providing element controls for other cells that need to create element controls, thereby avoiding repeated creation of element controls, by recycling the element controls of the first cell to the cache pool and deleting the element controls of the first cell in the user interface.

[0151] The method provided in this embodiment also obtains the element control to be loaded through the cache pool, realizes the reuse of the created element control, and improves the efficiency of creating element controls for cells.

[0152] The method provided in this embodiment also obtains the element control to be loaded through the cache pool and creates additional element controls, thereby realizing the reuse of the created element controls and avoiding the problem of insufficient element controls.

[0153] The method provided in this embodiment also ensures the display effect of the display element in the element control by adjusting the size of the element control according to the size of the display element.

[0154] The method provided in this embodiment also determines the display style and interaction effect of the element control by pre-configuring parameters, and provides a universal way to configure the element control.

[0155] The method provided in this embodiment also improves the user's interactive experience by providing different interactive effects for element controls.

[0156] It should be noted that the sequence of the method steps provided in the embodiments of the present application can be appropriately adjusted, and the steps can be increased or decreased accordingly according to the circumstances. Any technician familiar with the technical field can easily think of the changed methods within the technical scope disclosed in the present application, and they should be included in the protection scope of the present application, so they will not be repeated here.

[0157] Fig.11 FIG. 1 is a schematic diagram of a display device for a user interface provided by an exemplary embodiment of the present application. The device can be used for Figure 1 The terminals in the system shown. Fig.11 As shown, the device comprises:

[0158] Display module 1101 is used to display element controls of n cells in a visible range in a table control in a user interface. An element control is a display element used to display a single cell. The table control includes m cells, where m and n are positive integers and m is greater than n.

[0159] The processing module 1102 is used to move the element control of the first cell among the n cells out of the visible range in response to the human-computer interaction operation, and to recycle the element control of the first cell.

[0160] The creation module 1103 is used to create an element control of a second cell in the user interface, where the second cell is a cell in the table control indicated by the human-computer interaction operation, except for the n cells, and is moved to the visible range.

[0161] In an alternative design, such as Fig.12 As shown, the device also includes:

[0162] The creation module 1103 is used to create a placeholder grid for each of the m cells of the table control for the user interface, and the placeholder grid includes the first vertex information of the element control of the m cells in the user interface. The determination module 1104 is used to determine the n cells whose first vertex information belongs to the visible range based on the placeholder grid. The creation module 1103 is used to create the element control of the n cells in the user interface. The display module 1101 is used to display the element control of the n cells in the visible range of the user interface.

[0163] In an optional design, the processing module 1102 is used to respond to the human-computer interaction operation and modify the first vertex information of the placeholder grid of each of the m cells according to the human-computer interaction operation to obtain the second vertex information. The determination module 1104 is used to determine the cell belonging to the n cells in the placeholder grid corresponding to the second vertex information outside the visible range as the first cell. The processing module 1102 is used to recycle the element control of the first cell.

[0164] In an optional design, the processing module 1102 is used to respond to the human-computer interaction operation and modify the first vertex information of the placeholder grid of each of the m cells according to the human-computer interaction operation to obtain the second vertex information. The determination module 1104 is used to determine the cells corresponding to the placeholder grid whose second vertex information belongs to the visible range and which do not belong to the n cells as the second cell. The creation module 1103 is used to create an element control of the second cell in the user interface.

[0165] In an optional design, a module 1103 is created for:

[0166] Based on the arrangement and size of the m cells of the table control in the user interface, placeholder grids for the m cells of the table control are created for the user interface.

[0167] In an optional design, a module 1103 is created for:

[0168] Create an element control for the second cell in the placeholder grid corresponding to the second cell.

[0169] In an optional design, the processing module 1102 is used to:

[0170] The element control of the first cell is recycled to a buffer pool, wherein the buffer pool is used to store the element control to be loaded.

[0171] In an optional design, the processing module 1102 is used to:

[0172] In the element controls loaded in the user interface, the element control of the first cell is deleted, and the element control of the first cell is stored as the element control to be loaded in the cache pool.

[0173] In an optional design, a module 1103 is created for:

[0174] In response to the number of element controls to be loaded stored in the cache pool being greater than the number of the second cells, the same number of element controls to be loaded as the number of the second cells is obtained through the cache pool, and the element controls of the second cell are created in the placeholder grid corresponding to the second cell by reusing the element controls to be loaded obtained from the cache pool.

[0175] In an optional design, a module 1103 is created for:

[0176] In response to the number of element controls to be loaded stored in the cache pool being not greater than the number of the second cell, all element controls to be loaded in the cache pool are obtained. By reusing the element controls to be loaded obtained in the cache pool and creating additional element controls, element controls of the second cell are created in the placeholder grid corresponding to the second cell. The number of additional element controls is the difference between the number of the second cell and the number of all element controls to be loaded stored in the cache pool.

[0177] In an alternative design, such as Fig.13 As shown, the device also includes:

[0178] The adjusting module 1105 is used to adjust the size of the element control of the second cell according to the size of the display element in the element control of the second cell.

[0179] In an alternative design, such as Fig.12 As shown, the device also includes:

[0180] The determination module 1104 is used to determine the display style and interaction effect of the element controls of n cells in the table control displayed in the user interface based on preconfigured parameters.

[0181] In an optional design, the interaction effect includes at least one of the following:

[0182] Slide display;

[0183] Page turning display;

[0184] Keep the slide display centered.

[0185] It should be noted that the user interface display device provided in the above embodiment is only illustrated by the division of the above functional modules. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device is divided into different functional modules to complete all or part of the functions described above. In addition, the user interface display device provided in the above embodiment and the user interface display method embodiment belong to the same concept. The specific implementation process is detailed in the method embodiment and will not be repeated here.

[0186] An embodiment of the present application also provides a computer device, which includes: a processor and a memory, wherein the memory stores at least one instruction, at least one program, a code set or an instruction set, and the at least one instruction, at least one program, a code set or an instruction set is loaded and executed by the processor to implement the user interface display method provided by the above-mentioned method embodiments.

[0187] Optionally, the computer device is a terminal. Fig.14 It is a schematic diagram of the structure of a terminal provided by an exemplary embodiment of the present application.

[0188] Typically, the terminal 1400 includes a processor 1401 and a memory 1402 .

[0189] The processor 1401 may include one or more processing cores, such as a 4-core processor, an 8-core processor, etc. The processor 1401 may be implemented in at least one hardware form of DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), and PLA (Programmable Logic Array). The processor 1401 may also include a main processor and a coprocessor. The main processor is a processor for processing data in the awake state, also known as a CPU (Central Processing Unit); the coprocessor is a low-power processor for processing data in the standby state. In some embodiments, the processor 1401 may be integrated with a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content to be displayed on the display screen. In some embodiments, the processor 1401 may also include an AI (Artificial Intelligence) processor, which is used to process computing operations related to machine learning.

[0190] The memory 1402 may include one or more computer-readable storage media, which may be non-transitory. The memory 1402 may also include a high-speed random access memory, and a non-volatile memory, such as one or more disk storage devices, flash memory storage devices. In some embodiments, the non-transitory computer-readable storage medium in the memory 1402 is used to store at least one instruction, which is used to be executed by the processor 1401 to implement the display method of the user interface provided in the method embodiment of the present application.

[0191] In some embodiments, the terminal 1400 may further optionally include: a peripheral device interface 1403 and at least one peripheral device. The processor 1401, the memory 1402 and the peripheral device interface 1403 may be connected via a bus or a signal line. Each peripheral device may be connected to the peripheral device interface 1403 via a bus, a signal line or a circuit board. Specifically, the peripheral device includes: at least one of a radio frequency circuit 1404, a display screen 1405, a camera assembly 1406, an audio circuit 1407 and a power supply 1408.

[0192] The peripheral device interface 1403 may be used to connect at least one peripheral device related to I / O (Input / Output) to the processor 1401 and the memory 1402. In some embodiments, the processor 1401, the memory 1402, and the peripheral device interface 1403 are integrated on the same chip or circuit board; in some other embodiments, any one or two of the processor 1401, the memory 1402, and the peripheral device interface 1403 may be implemented on a separate chip or circuit board, which is not limited in the embodiments of the present application.

[0193] The radio frequency circuit 1404 is used to receive and transmit RF (Radio Frequency) signals, also known as electromagnetic signals. The radio frequency circuit 1404 communicates with the communication network and other communication devices through electromagnetic signals. The radio frequency circuit 1404 converts the electrical signal into an electromagnetic signal for transmission, or converts the received electromagnetic signal into an electrical signal. Optionally, the radio frequency circuit 1404 includes: an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a user identity module card, and the like. The radio frequency circuit 1404 can communicate with other terminals through at least one wireless communication protocol. The wireless communication protocol includes, but is not limited to: the World Wide Web, a metropolitan area network, an intranet, various generations of mobile communication networks (2G, 3G, 4G and 5G), a wireless local area network and / or a WiFi (Wireless Fidelity) network. In some embodiments, the radio frequency circuit 1404 may also include circuits related to NFC (Near Field Communication), which is not limited in this application.

[0194] The display screen 1405 is used to display the UI (User Interface, horizontal level interface). The UI may include graphics, text, icons, videos and any combination thereof. When the display screen 1405 is a touch display screen, the display screen 1405 also has the ability to collect touch signals on the surface or above the surface of the display screen 1405. The touch signal can be input to the processor 1401 as a control signal for processing. At this time, the display screen 1405 can also be used to provide virtual buttons and / or virtual keyboards, also known as soft buttons and / or soft keyboards. In some embodiments, the display screen 1405 can be one, and the front panel of the terminal 1400 is set; in other embodiments, the display screen 1405 can be at least two, which are respectively set on different surfaces of the terminal 1400 or are folded; in some other embodiments, the display screen 1405 can be a flexible display screen, which is set on the curved surface or folded surface of the terminal 1400. Even, the display screen 1405 can also be set as a non-rectangular irregular figure, that is, a special-shaped screen. The display screen 1405 can be made of materials such as LCD (Liquid Crystal Display) and OLED (Organic Light-Emitting Diode).

[0195] The camera assembly 1406 is used to capture images or videos. Optionally, the camera assembly 1406 includes a front camera and a rear camera. Typically, the front camera is arranged on the front panel of the terminal 1400, and the rear camera is arranged on the back of the terminal. In some embodiments, there are at least two rear cameras, which are any one of a main camera, a depth of field camera, a wide-angle camera, and a telephoto camera, so as to realize the fusion of the main camera and the depth of field camera to realize the background blur function, the fusion of the main camera and the wide-angle camera to realize the panoramic shooting and VR (Virtual Reality) shooting function or other fusion shooting functions. In some embodiments, the camera assembly 1406 may also include a flash. The flash can be a monochrome temperature flash or a dual-color temperature flash. A dual-color temperature flash refers to a combination of a warm light flash and a cold light flash, which can be used for light compensation at different color temperatures.

[0196] The audio circuit 1407 may include a microphone and a speaker. The microphone is used to collect sound waves from the user and the environment, and convert the sound waves into electrical signals and input them into the processor 1401 for processing, or input them into the radio frequency circuit 1404 to achieve voice communication. For the purpose of stereo acquisition or noise reduction, there may be multiple microphones, which are respectively arranged at different parts of the terminal 1400. The microphone may also be an array microphone or an omnidirectional acquisition microphone. The speaker is used to convert the electrical signal from the processor 1401 or the radio frequency circuit 1404 into sound waves. The speaker may be a traditional film speaker or a piezoelectric ceramic speaker. When the speaker is a piezoelectric ceramic speaker, it can not only convert the electrical signal into sound waves audible to humans, but also convert the electrical signal into sound waves inaudible to humans for purposes such as ranging. In some embodiments, the audio circuit 1407 may also include a headphone jack.

[0197] The power supply 1408 is used to power various components in the terminal 1400. The power supply 1408 can be an alternating current, a direct current, a disposable battery, or a rechargeable battery. When the power supply 1408 includes a rechargeable battery, the rechargeable battery can be a wired rechargeable battery or a wireless rechargeable battery. A wired rechargeable battery is a battery charged through a wired line, and a wireless rechargeable battery is a battery charged through a wireless coil. The rechargeable battery can also be used to support fast charging technology.

[0198] In some embodiments, the terminal 1400 further includes one or more sensors 1409 . The one or more sensors 1409 include, but are not limited to: an acceleration sensor 1410 , a gyroscope sensor 1411 , a pressure sensor 1412 , an optical sensor 1413 , and a proximity sensor 1414 .

[0199] The acceleration sensor 1410 can detect the magnitude of acceleration on the three coordinate axes of the coordinate system established by the terminal 1400. For example, the acceleration sensor 1410 can be used to detect the components of gravity acceleration on the three coordinate axes. The processor 1401 can control the touch display screen 1405 to display the horizontal level interface in a horizontal view or a vertical view according to the gravity acceleration signal collected by the acceleration sensor 1410. The acceleration sensor 1410 can also be used to collect motion data of games or users.

[0200] The gyro sensor 1411 can detect the body direction and rotation angle of the terminal 1400, and the gyro sensor 1411 can cooperate with the acceleration sensor 1410 to collect the user's 3D actions on the terminal 1400. The processor 1401 can implement the following functions based on the data collected by the gyro sensor 1411: motion sensing (such as changing the UI according to the user's tilt operation), image stabilization during shooting, game control, and inertial navigation.

[0201] The pressure sensor 1412 can be set on the side frame of the terminal 1400 and / or the lower layer of the touch display screen 1405. When the pressure sensor 1412 is set on the side frame of the terminal 1400, it can detect the user's holding signal of the terminal 1400, and the processor 1401 performs left and right hand recognition or shortcut operation according to the holding signal collected by the pressure sensor 1412. When the pressure sensor 1412 is set on the lower layer of the touch display screen 1405, the processor 1401 controls the operability controls on the UI interface according to the user's pressure operation on the touch display screen 1405. The operability controls include at least one of a button control, a scroll bar control, an icon control, and a menu control.

[0202] The optical sensor 1413 is used to collect the ambient light intensity. In one embodiment, the processor 1401 can control the display brightness of the touch display screen 1405 according to the ambient light intensity collected by the optical sensor 1413. Specifically, when the ambient light intensity is high, the display brightness of the touch display screen 1405 is increased; when the ambient light intensity is low, the display brightness of the touch display screen 1405 is reduced. In another embodiment, the processor 1401 can also dynamically adjust the shooting parameters of the camera assembly 1406 according to the ambient light intensity collected by the optical sensor 1413.

[0203] The proximity sensor 1414, also called a distance sensor, is usually arranged on the front panel of the terminal 1400. The proximity sensor 1414 is used to collect the distance between the user and the front of the terminal 1400. In one embodiment, when the proximity sensor 1414 detects that the distance between the user and the front of the terminal 1400 is gradually decreasing, the processor 1401 controls the touch display screen 1405 to switch from the screen-on state to the screen-off state; when the proximity sensor 1414 detects that the distance between the user and the front of the terminal 1400 is gradually increasing, the processor 1401 controls the touch display screen 1405 to switch from the screen-off state to the screen-on state.

[0204] Those skilled in the art will understand that Fig.14 The structure shown in the figure does not constitute a limitation on the terminal 1400, and the terminal 1400 may include more or less components than those shown in the figure, or combine some components, or adopt a different component arrangement.

[0205] A computer-readable storage medium is also provided in an embodiment of the present application. At least one program code is stored in the computer-readable storage medium. When the program code is loaded and executed by a processor of a computer device, the user interface display method provided in the above-mentioned method embodiments is implemented.

[0206] The present application also provides a computer program product or a computer program, which includes a computer instruction stored in a computer-readable storage medium. A processor of a computer device reads the computer instruction from the computer-readable storage medium, and the processor executes the computer instruction, so that the computer device executes the user interface display method provided by the above-mentioned method embodiments.

[0207] A person skilled in the art will understand that all or part of the steps to implement the above embodiments may be accomplished by hardware or by instructing related hardware through a program, and the program may be stored in a computer-readable storage medium, and the above-mentioned readable storage medium may be a read-only memory, a disk or an optical disk, etc.

[0208] The above description is only an optional embodiment of the present application and is not intended to limit the present application. Any modifications, equivalent switching, improvements, etc. made within the spirit and principles of the present application shall be included in the protection scope of the present application.

[0209] The above description is only an optional embodiment of the present application and is not intended to limit the present application. Any modifications, equivalent switching, improvements, etc. made within the spirit and principles of the present application shall be included in the protection scope of the present application.

Claims

1. A method for displaying a user interface, characterized in that: The method comprises: Creating a placeholder grid for each of the m cells of the table control for the user interface, the placeholder grid including first vertex information of the element controls of the m cells in the user interface, the element control being a display element for displaying a single cell; determining, based on the placeholder grid, that the first vertex information belongs to n cells in a visible range, where m and n are positive integers and m is greater than n; creating the element controls of the n cells in the user interface; and displaying the element controls of the n cells within the visible range of the user interface; In response to a human-computer interaction operation, first vertex information of the placeholder grids of the m cells are modified according to the human-computer interaction operation to obtain second vertex information; a cell corresponding to the placeholder grid outside the visible range and belonging to the n cells is determined as a first cell; an element control of the first cell is moved out of the visible range, and the element control of the first cell is recycled; An element control of a second cell is created in the user interface, where the second cell is a cell in the table control other than the n cells indicated by the human-computer interaction operation and is moved to the visible range.

2. The method according to claim 1, characterized in that: The step of creating an element control of a second cell in the user interface includes: Determine, among cells corresponding to the placeholder grid in the visible range in which the second vertex information belongs, cells that do not belong to the n cells as the second cells; An element control of the second cell is created in the user interface.

3. The method according to claim 1, characterized in that The step of creating a placeholder grid for each of the m cells of the table control for the user interface includes: Based on the arrangement and size of the m cells of the table control in the user interface, placeholder grids for the m cells of the table control are created for the user interface.

4. The method according to claim 2, characterized in that: The step of creating an element control of the second cell in the user interface includes: In the placeholder grid corresponding to the second cell, an element control of the second cell is created.

5. The method according to claim 1, characterized in that: The recycling of the element control of the first cell includes: Recycling the element control of the first cell into the cache pool; The cache pool is used to store element controls to be loaded.

6. The method according to claim 5, characterized in that The step of recycling the element control of the first cell to a cache pool includes: Among the element controls loaded in the user interface, the element control of the first cell is deleted, and the element control of the first cell is stored as the element control to be loaded in the cache pool.

7. The method according to claim 4, characterized in that The step of creating an element control of the second cell in a placeholder grid corresponding to the second cell includes: In response to the number of element controls to be loaded stored in the cache pool being greater than the number of the second cells, acquiring element controls to be loaded having the same number as the number of the second cells through the cache pool; By reusing the element control to be loaded obtained from the cache pool, an element control of the second cell is created in the placeholder grid corresponding to the second cell.

8. The method according to claim 4, characterized in that The step of creating an element control of the second cell in a placeholder grid corresponding to the second cell includes: In response to the number of element controls to be loaded stored in the cache pool being not greater than the number of the second cells, acquiring all element controls to be loaded in the cache pool; By reusing the element controls to be loaded obtained from the cache pool and creating additional element controls, an element control of the second cell is created in the placeholder grid corresponding to the second cell; The number of the additional element controls is the difference between the number of the second cells and the number of all element controls to be loaded stored in the cache pool.

9. The method according to any one of claims 1 to 8, characterized in that: The method further comprises: The size of the element control of the second cell is adjusted according to the size of the display element in the element control of the second cell.

10. The method according to any one of claims 1 to 8, characterized in that: The method further comprises: Based on preconfigured parameters, display styles and interaction effects of element controls of the n cells in the table control displayed in the user interface are determined.

11. The method according to claim 10, characterized in that The interaction effect includes at least one of the following: Slide display; Page turning display; Keep the slide display centered.

12. A display device for a user interface, characterized in that: The device comprises: A creation module, used to create a placeholder grid for each of the m cells of the table control for the user interface, wherein the placeholder grid includes first vertex information of the element controls of the m cells in the user interface, and the element control is a display element for displaying a single cell; a determination module, used to determine, based on the placeholder grid, that the first vertex information belongs to n cells in a visible range, where m and n are positive integers and m is greater than n; the creation module is further used to create the element controls of the n cells in the user interface; a display module, used to display the element controls of the n cells in the visible range of the user interface; The processing module is used to respond to a human-computer interaction operation and modify the first vertex information of the placeholder grids of the m cells according to the human-computer interaction operation to obtain the second vertex information; the determination module is also used to determine the cell belonging to the n cells in the placeholder grid outside the visible range as the first cell; the processing module is also used to move the element control of the first cell out of the visible range, and recycle the element control of the first cell; The creation module is further used to create an element control of a second cell in the user interface, where the second cell is a cell in the table control other than the n cells indicated by the human-computer interaction operation, which is moved to the visible range.

13. A computer device, characterized in that: The computer device includes a processor and a memory, wherein the memory stores at least one program, and the at least one program is loaded and executed by the processor to implement the user interface display method according to any one of claims 1 to 11.

14. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores at least one program, and the at least one program is loaded and executed by a processor to implement the user interface display method according to any one of claims 1 to 11.

15. A computer program product, characterized in that The computer program product includes computer instructions, which are stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the user interface display method as described in any one of claims 1 to 11.

Images