View display method, computing device, storage medium and program product

Abstract

The embodiment of the invention provides a view display method, computing equipment, a storage medium and a program product. The view display method comprises the following steps: receiving a sliding operation for a sliding component; determining a root node from the view tree of the sliding component; determining a plurality of branch nodes in the view tree from the root node; respectively determining the display lengths of the plurality of branch nodes in the sliding direction; determining the longest branch node in the sliding direction as a target node; determining at least one leaf node contained in the target node; based on the sliding distance, determining boundary position information of a view corresponding to the at least one leaf node on a display interface of the client; and determining the display state of the at least one view in the display interface based on the boundary position information and the display area of the sliding component. According to the technical scheme provided by the embodiment of the invention, the intelligent degree and usability of determining the display state of the view are improved.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of Internet technology, and in particular to a view display method, a computing device, a storage medium, and a program product. Background Art

[0002] In modern mobile application development, sliding components are widely used to display large amounts of data or content to provide a smooth user experience. For example, in e-commerce application scenarios, sliding components can be used to display a large number of products in a list format, and users can view the products one by one by sliding the sliding components.

[0003] The visible elements in the sliding component are defined as views. For example, in the above scenario, each product can be a view.

[0004] Since the display area of ​​the sliding component is limited, the view will only be visible when it is slid within the display area. And only when the view is visible can the product corresponding to the view appear in front of the user, thereby achieving product exposure.

[0005] Therefore, how to determine the display status of a view becomes a technical problem that needs to be solved urgently. Summary of the invention

[0006] Embodiments of the present application provide a view display method, a computing device, a storage medium, and a program product.

[0007] In a first aspect, an embodiment of the present application provides a view display method, which is applied to a client, and the method includes:

[0008] Receiving a sliding operation on the sliding component, and determining a sliding direction and a sliding distance of the sliding operation;

[0009] Determine a root node from the view tree of the sliding component, wherein the view tree has the sliding component as the root node, the view container corresponding to the sliding component as the branch node, and the view contained in the view container as the leaf node;

[0010] Starting from the root node, determining a plurality of branch nodes in the view tree;

[0011] respectively determining display lengths of the plurality of branch nodes in the sliding direction;

[0012] The longest branch node in the sliding direction is determined as the target node;

[0013] Determine at least one leaf node included in the target node;

[0014] Based on the sliding distance, determining the boundary position information of the view corresponding to each of the at least one leaf node on the display interface of the client;

[0015] Determining a display state of at least one view in the display interface based on the boundary position information and the display area of ​​the sliding component;

[0016] According to the display state of at least one view in the display interface, the display effect of the at least one view in the display interface is controlled.

[0017] In a second aspect, an embodiment of the present application provides a view display device, which is applied to a client, and the device includes:

[0018] An operation receiving module, used for receiving a sliding operation on the sliding component, and determining a sliding direction and a sliding distance of the sliding operation;

[0019] A root node determination module, used to determine a root node from a view tree of the sliding component, wherein the view tree is constructed with the sliding component as the root node, the view container corresponding to the sliding component as the branch node, and the view contained in the view container as the leaf node;

[0020] A branch node determination module, used to determine a plurality of branch nodes in the view tree starting from the root node;

[0021] a length determination module, used to respectively determine the display lengths of the plurality of branch nodes in the sliding direction;

[0022] A target node determination module, used to determine the longest branch node in the sliding direction as the target node;

[0023] A leaf node determination module, used to determine at least one leaf node included in the target node;

[0024] A boundary determination module, configured to determine, based on the sliding distance, boundary position information of the views respectively corresponding to the at least one leaf node on the display interface of the client;

[0025] a state determination module, configured to determine a display state of at least one view in the display interface based on the boundary position information and the display area of ​​the sliding component;

[0026] The display module is used to control the display effect of at least one view on the display interface according to the display state of at least one view in the display interface.

[0027] In a third aspect, an embodiment of the present application provides a computing device, including a processing component and a storage component;

[0028] The storage component stores one or more computer instructions; the one or more computer instructions are used to be called and executed by the processing component to implement the view display method provided in the embodiment of the present application.

[0029] In a fourth aspect, a computer-readable storage medium is provided in an embodiment of the present application, on which a computer program is stored. When the computer program is executed by a processing component, the view display method provided in the embodiment of the present application is implemented.

[0030] In a fifth aspect, a computer program product is provided in an embodiment of the present application, including a computer program / instruction, which, when executed by a processing component, implements the view display method provided in an embodiment of the present application.

[0031] In an embodiment of the present application, by monitoring the sliding operation of the sliding component, the sliding direction and sliding distance are identified during the sliding process. Subsequently, the branch node with the longest display length in the sliding direction is determined based on the view tree of the sliding component, and the branch node is used as the target node and the display state of the view corresponding to the leaf node contained in the target node is determined. As a result, the client only needs to detect the sliding operation without additionally obtaining the display information of the view, and can accurately determine the view whose display state needs to be determined, thereby improving the intelligence and ease of use of determining the display state of the view.

[0032] These and other aspects of the present application will become more clearly understood in the description of the following embodiments. BRIEF DESCRIPTION OF THE DRAWINGS

[0033] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, a brief introduction will be given below to the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0034] Figure 1 A flowchart of a view display method provided by an embodiment of the present application is shown;

[0035] Figure 2 A schematic diagram of a display area and a view of a sliding component provided in an embodiment of the present application;

[0036] Figure 3 A schematic diagram showing a display area and a view of a sliding component after a sliding operation;

[0037] Figure 4 A block diagram of a view display device provided by an embodiment of the present application is shown;

[0038] Figure 5 A block diagram of a computing device provided by the present application is shown. DETAILED DESCRIPTION

[0039] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application.

[0040] In some of the processes described in the specification and claims of this application and the above-mentioned figures, multiple operations that appear in a specific order are included, but it should be clearly understood that these operations may not be executed in the order in which they appear in this article or executed in parallel. The serial numbers of the operations, such as 101, 102, etc., are only used to distinguish between different operations, and the serial numbers themselves do not represent any execution order. In addition, these processes may include more or fewer operations, and these operations may be executed in sequence or in parallel. It should be noted that the descriptions of "first", "second", etc. in this article are used to distinguish different messages, devices, modules, etc., do not represent the order of precedence, and do not limit the "first" and "second" to be different types.

[0041] In modern mobile application development, sliding components are widely used to display large amounts of data or content to provide a smooth user experience. For example, in e-commerce application scenarios, sliding components can be used to display a large number of products in a list format, and users can view the products one by one by sliding the sliding components.

[0042] The visible elements in the sliding component are defined as views. For example, in the above scenario, each product can be a view.

[0043] Since the display area of ​​the sliding component is limited, the view will only be visible when it is slid within the display area. And only when the view is visible can the product corresponding to the view appear in front of the user, thereby achieving product exposure.

[0044] In related technologies, ViewTreeObserver is usually used to monitor the layout changes of the sliding component and determine the visibility of its internal items. The specific implementation logic is as follows:

[0045] 1. Create OnGlobalLayoutListener: Implement the ViewTreeObserver.OnGlobalLayoutListener interface to monitor the layout changes of the sliding component. When the layout changes (such as size, position, visibility, etc.), call back the onGlobalLayout() method.

[0046] 2. Add a listener to the ViewTreeObserver of the sliding component: Bind OnGlobalLayoutListener to the ViewTreeObserver of the sliding component to trigger a callback when the layout changes.

[0047] 3. Calculate the visibility of the view in the checkItemVisibility method: In the onGlobalLayout() callback, call the checkItemVisibility method, traverse all views in the sliding component, and use the View.getGlobalVisibleRect(Rect) method to obtain the display area of ​​each view relative to the sliding component. This method needs to fill the visible area information of the view into the passed Rect object. By comparing the Rect of the view and the Rect of the sliding component, it is determined whether the item is in the display area of ​​the sliding component, thereby determining its display status.

[0048] The inventor discovered in the process of implementing the concept of the present application that in the related art, when determining the display state of a view, it is necessary to manually obtain the visible area information of all views to compare with the display area of ​​the sliding component. However, the sliding components used in actual applications are often internally complex and opaque, and it is difficult to obtain the visible area information of all views, which makes it difficult to determine the display state of the view.

[0049] In order to solve the technical problems existing in the related art, the embodiment of the present application provides a view display method, which identifies the sliding direction and sliding distance during the sliding process by monitoring the sliding operation of the sliding component. Subsequently, the branch node with the longest display length in the sliding direction is determined in the view tree based on the sliding component, and the branch node is used as the target node and the display status of the view corresponding to the leaf node contained in the target node is determined. As a result, the client only needs to detect the sliding operation without additionally obtaining the display information of the view, and can accurately determine the view whose display status needs to be determined, thereby improving the intelligence and ease of use of determining the display status of the view.

[0050] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of this application.

[0051] Figure 1A flowchart of a view display method provided by an embodiment of the present application is shown. The view display method can be applied to a client. The method can specifically include the following steps:

[0052] 101: Receive a sliding operation on a sliding component, and determine a sliding direction and a sliding distance of the sliding operation.

[0053] When a user uses a client on a mobile device, for example, the user can perform a touch-slide operation on the sliding component. The sliding component may include various page elements that allow the user to view more content by sliding, such as a message list, a picture gallery, and the like.

[0054] Among them, for the sliding direction, the client can record the starting position and the ending position of the sliding operation started by the user. The starting position may include, for example, the coordinate point where the finger first touches the display interface of the client, and the ending position may include, for example, the coordinate point where the finger leaves the display interface. The sliding direction can be determined by the starting position and the ending position. The specific method for determining the sliding direction will be described in detail in the following embodiments.

[0055] The sliding distance may include the distance between the above-mentioned starting position and the ending position.

[0056] The sliding direction may include horizontal sliding and vertical sliding. For horizontal sliding, the sliding distance may be the absolute value of the difference between the horizontal coordinate of the starting position and the horizontal coordinate of the ending position; for vertical sliding, the sliding distance may be the absolute value of the difference between the vertical coordinate of the starting position and the vertical coordinate of the ending position.

[0057] 102: Determine a root node from the view tree of the sliding component, wherein the view tree is constructed with the sliding component as the root node, the view container corresponding to the sliding component as the branch node, and the view contained in the view container as the leaf node.

[0058] In an embodiment of the present application, a view tree can be used to describe the view structure of the sliding component. The view tree is a tree-like hierarchical structure used to organize and manage the views of the sliding component. In the view tree provided in an embodiment of the present application, the sliding component itself is set as the root node, which is similar to the trunk of a tree, and the entire interface structure based on the sliding component extends from here.

[0059] Slide components usually contain some view containers, such as LinearLayout, RelativeLayout, etc. These view containers act as branch nodes in the view tree. Branch nodes are like the branches of a tree, connecting the root node and further subdividing and organizing different parts of the interface. The function of the view container is to manage the layout of the views contained in it, such as determining the arrangement and relative position of the views.

[0060] The specific views contained in the view container, such as TextView (text view) for displaying text, ImageView (image view) for displaying pictures, etc., are leaf nodes in the view tree. They are similar to the leaves of a big tree, and are the basic elements of the interface, directly presenting visible content to users.

[0061] 103: Starting from the root node, determine multiple branch nodes in the view tree.

[0062] After the root node is determined, the nodes in the view tree can be identified one by one by traversing from the root node to determine the branch nodes in the view tree.

[0063] In some possible implementations of the present application, for example, a depth-first search algorithm, a breadth-first search algorithm, etc. may be used to determine multiple branch nodes in the view tree.

[0064] As in the above-mentioned embodiment, in the view tree of the sliding component, the view container is constructed as a branch node, so by determining multiple branch nodes in the view tree, multiple view containers of the sliding component can be found.

[0065] 104: Determine display lengths of the plurality of branch nodes in the sliding direction respectively.

[0066] After determining the plurality of branch nodes, the display lengths of the plurality of branch nodes in the sliding direction may be determined, wherein the display length may include the display length of the view container corresponding to the branch node on the display interface.

[0067] In some embodiments, determining the display lengths of multiple branch nodes in the sliding direction can be specifically implemented as follows: when the sliding direction is horizontal, the width values ​​of the multiple branch nodes are used as the display length; when the sliding direction is vertical, the height values ​​of the multiple branch nodes are used as the display length.

[0068] For any view container, its display length can depend on its internal layout and the views it contains. For example, for vertical sliding, the display length can be the size of the space occupied by the branch node in the vertical direction. For example, a view container corresponding to a branch node contains multiple TextViews and ImageViews, which are arranged vertically. Then the display length of the branch node can be the sum of the heights of all views in the vertical direction, plus the spacing between views and the inner margins of the view container itself. If it is a horizontal sliding, the display length can be the width in the horizontal direction. For example, a view container corresponding to a branch node has several buttons arranged horizontally as views, then the display length of this view container is the sum of the widths of these buttons, plus the spacing between buttons and the inner margins of the view container itself.

[0069] 105: Determine the longest branch node in the sliding direction as the target node.

[0070] In the process of realizing the concept of the present application, the inventor discovered that since the sliding component needs to accommodate all the views it contains, the branch node with the longest display length in the sliding direction determines the maximum space that the sliding component needs to provide in that direction, and directly determines the size of the display area of ​​the sliding component. For example, a sliding component has multiple horizontally arranged view containers, one of which contains more TextView and ImageView, and its display length is greater than the display length of other view containers. Then, the view container with the longest display length determines the width of the display area of ​​the sliding component in the horizontal direction. In addition, from the perspective of functional design, the sliding component needs to ensure that all the views it contains can be displayed normally to avoid the defect of view being blocked. Therefore, the length of the display area of ​​the sliding component should be able to accommodate the view container with the longest display length among all view containers.

[0071] Therefore, the longest branch node in the sliding direction can be used as the "parent" of the view whose display state needs to be determined, and the views corresponding to the leaf nodes contained therein are views that may be exposed to the display area of ​​the sliding component during the sliding process.

[0072] 106: Determine at least one leaf node included in the target node.

[0073] 107: Based on the sliding distance, determine the boundary position information of the view corresponding to at least one leaf node on the display interface of the client.

[0074] 108: Determine a display state of at least one view in the display interface based on the boundary position information and the display area of ​​the sliding component.

[0075] 109: Controlling a display effect of at least one view on the display interface according to a display state of at least one view on the display interface.

[0076] When the user slides the sliding component, the sliding operation will change the position of the view corresponding to the leaf node in the target node on the display interface. The user end can calculate the boundary position information of the view corresponding to the leaf node on the display interface based on the sliding distance.

[0077] The sliding component has its specific display area, which is the part that the user can directly see on the display interface. By comparing the boundary position information of the view corresponding to the leaf node with the display area of ​​the sliding component, the display status of these views in the display interface can be determined.

[0078] If all the borders of a view are completely within the display area of ​​the sliding component, then the view is in a fully displayed state and the user can see the contents of the view in its entirety; if part of the view's borders are within the display area and part are outside the area, then the view is in a partially displayed state and the user can only see part of the contents of the view; if all the borders of the view are outside the display area of ​​the sliding component, then the view is in an invisible state and the user cannot see the view on the current screen.

[0079] By determining the display status of the view, you can implement functions such as exposure statistics (determine which content is seen by the user) and on-demand loading (load only the content in the display area), optimizing user experience and application performance. For example, in a long list sliding interface, this method can be used to know which list items are fully visible, partially visible, or invisible, so that the visible list items can be processed accordingly, such as updating their status or loading related data.

[0080] In an embodiment of the present application, when a view is in a fully visible state, it means that all boundaries of the view are within the display area of ​​the sliding component. In this case, no additional special processing is usually required, and the view can be displayed in its normal style and layout. For example, in a news reading application, if the paragraph view of an article is fully visible, it is presented on the screen in normal font, color and layout, and the user can read it directly. For partially visible views, some adjustments may need to be made according to actual conditions. For example, in a sliding interface for displaying pictures, if the picture is only partially visible, in order to provide a better user experience, the visible part can be appropriately enlarged or highlighted to attract the user's attention. In addition, in some scenarios, it may be necessary to load more content related to the partially visible view, such as when a list item is partially visible, preload more detailed information of the list item so that it can be quickly presented when the user slides to fully visible. When the view is in an invisible state, from the perspective of performance optimization, some operations related to the view can be paused, such as stopping the playback of the video (if the view is a video player), pausing the loading of the picture (if the view is a picture view and has not been fully loaded), etc., to save system resources. At the same time, in some cases, you can set a placeholder to indicate the position of the view, so that when the view slides to the visible area, there can be a smooth transition effect. For example, in an infinite scrolling picture list, the invisible pictures are replaced by a gray rectangular placeholder, and when the picture slides to the visible area, the real picture is loaded and displayed.

[0081] In an embodiment of the present application, by monitoring the sliding operation of the sliding component, the sliding direction and sliding distance are identified during the sliding process. Subsequently, the branch node with the longest display length in the sliding direction is determined based on the view tree of the sliding component, and the branch node is used as the target node and the display state of the view corresponding to the leaf node contained in the target node is determined. As a result, the client only needs to detect the sliding operation without additionally obtaining the display information of the view, and can accurately determine the view whose display state needs to be determined, thereby improving the intelligence and ease of use of determining the display state of the view.

[0082] In some embodiments, starting from the root node, determining multiple branch nodes in the view tree can be specifically implemented as follows: for any node under the root node, determine whether the node is a leaf node; if the node is a leaf node, skip the node, otherwise record the node as a branch node.

[0083] As described in the above embodiments, the view tree is a hierarchical structure consisting of a root node, branch nodes, and leaf nodes. The branch nodes and leaf nodes can be collectively referred to as nodes in the view tree.

[0084] In an embodiment of the present application, for any node in the view tree, it is necessary to determine whether it is a leaf node. A leaf node is the bottom-level node in the view tree, which no longer contains other nodes and is not a branch node. When the node is determined to be a leaf node, the node can be skipped and the next node can be determined to be a branch node.

[0085] When it is determined that the node is not a leaf node, it means that the node can be based on a branch, and its corresponding view container also includes a view.

[0086] By judging each node under the root node one by one, multiple branch nodes can be identified and recorded from the view tree, so as to determine the display length of the branch nodes in the sliding direction.

[0087] In an embodiment of the present application, each node in the view tree may have an attribute information indicating the number of child nodes of the node, and thus, whether the node is a leaf node can be determined based on the attribute information of the node. For example, if the attribute information of the node is 0, it means that the node has no child nodes, and the node can be determined to be a leaf node.

[0088] In some embodiments, recording a node as a branch node may be specifically implemented by: determining whether the display length of the node in the sliding direction is 0; and recording the node as a branch node when the display length of the child node in the sliding direction is not 0.

[0089] In the embodiment of the present application, when the display length of a node in the sliding direction is 0, it means that the view or view container corresponding to the node does not occupy space in the display area of ​​the sliding component. Therefore, when a node is recorded as a branch node, it is first necessary to determine whether the display length of the node in the sliding direction is 0. Only when the display length of the node in the sliding direction is not 0, the node will be recorded as a branch node.

[0090] By recording nodes whose display length in the sliding direction is not 0 as branch nodes, it is possible to avoid nodes that do not occupy space or do not affect the sliding operation from being included in subsequent calculation and processing flows, thereby improving calculation and processing efficiency.

[0091] In some embodiments, determining the display status of at least one view in the display interface based on boundary position information and the display area of ​​the sliding component can be specifically implemented as follows: when it is determined according to the boundary position information that the boundary of the view is within the visible area, determining the display status of the view is a visible state; when it is determined according to the boundary position information that the boundary of the view is not within the visible area, determining the display status of the view is an invisible state.

[0092] The display area of ​​a sliding component may refer to the area of ​​the sliding component that can be directly displayed to the user on the display interface of the client. For example, a sliding component displayed on a mobile phone screen has a display area that is a rectangular area that the user sees on the mobile phone screen. The display area of ​​a sliding component is often limited. When the content of the view exceeds this area, the user needs to slide to view the rest.

[0093] After the user operates the sliding component, the positions of the views inside the sliding component will change. By recording and calculating the position information of these views in the screen coordinate system, the boundary position information of each view can be obtained. The boundary position information can be used to describe the space range occupied by the view on the client's display interface. For example, for a rectangular view, its boundary position information can be the coordinate values ​​of the four vertices of the rectangle.

[0094] When it is determined based on the boundary position information that the boundary of a view (e.g., the rectangular range defined by the four vertices of the view) is completely within the visible area of ​​the sliding component, the display state of the view can be determined to be visible. This means that the user can completely see the entire content of the view on the current screen and can obtain the information conveyed by the view without any sliding operation.

[0095] For example, in a sliding component that displays an image, if the boundary position information of an image view indicates that its four vertices are within the display area of ​​the sliding component, then the image is completely visible and the user can clearly see the image.

[0096] If it is determined based on the boundary position information that the boundary of a view is completely out of the visible area of ​​the sliding component, then the display state of the view can be determined to be invisible. In this case, the content of the view is not displayed on the current screen at all, and the user needs to slide the view to bring it into the visible area in order to see its content.

[0097] For example, in a sliding list containing multiple list items, the list item view has completely slid out of the display area of ​​the sliding component due to the user's sliding operation. At this time, according to its boundary position information, the list item view is in an invisible state.

[0098] In actual application scenarios, such as advertising delivery scenarios, the method for determining the view state provided in the embodiments of the present application can be used to determine the display state of the advertising view. Only when the advertising view is in a visible state can it be considered that the advertisement is actually seen by the user, thereby accurately counting the exposure of the advertisement.

[0099] In some embodiments, determining the sliding direction of the sliding operation may be specifically implemented as follows:

[0100] A first sliding offset of the sliding component in the horizontal direction and a second sliding offset in the vertical direction are obtained; and a sliding direction is determined according to the first sliding offset and the second sliding offset.

[0101] In an embodiment of the present application, member variables mScrollX and mScrollY can be created to record the first sliding offset of the sliding component in the horizontal direction and the second sliding offset in the vertical direction, respectively. The first offset and the second offset can reflect the position change of the sliding component on the display interface.

[0102] By comparing the values ​​of scrollX and mScrollX, you can determine whether the sliding component has slid on the X axis. If the values ​​of scrollX and mScrollX are not equal, it means that the sliding component has changed its position in the horizontal direction, that is, it is sliding in the horizontal direction. Correspondingly, by comparing the difference between scrollY and mScrollY, you can determine whether the sliding component has slid in the vertical direction. If the difference is not zero, it means that the component has changed its position in the vertical direction, that is, it is sliding in the vertical direction.

[0103] In some embodiments, based on the sliding distance, determining the boundary position information of the view corresponding to at least one leaf node on the display interface can be specifically implemented as follows: for any view, determining the initial position information of the view on the display interface; determining the boundary position information based on the sliding distance and the initial position information.

[0104] In some embodiments, based on the sliding distance, determining the boundary position information of the view corresponding to at least one leaf node on the display interface can be specifically implemented as follows: when the sliding direction is horizontal, determining the left boundary position information and the right boundary position information of the view; when the sliding direction is vertical, determining the upper boundary position information and the lower boundary position information of the view.

[0105] On the display interface, each view has its initial position information, which describes the position of the view on the interface when no sliding operation is performed.

[0106] In different development environments, the methods for obtaining initial position information vary. For example, in Android development, for a View type object, you can use the getLeft(), getTop(), getRight(), and getBottom() methods to obtain the initial boundary position information of the view. These methods return the coordinate position of the view relative to its parent container. getLeft() and getTop() represent the horizontal and vertical coordinates of the upper left corner of the view, respectively, and getRight() and getBottom() represent the horizontal and vertical coordinates of the lower right corner of the view.

[0107] When the user slides, the sliding distance affects the position of the view on the display interface. For horizontal sliding, the sliding distance changes the position of the view in the horizontal direction (X axis); for vertical sliding, it changes the position of the view in the vertical direction (Y axis).

[0108] Assuming that the sliding distance in the horizontal direction is scrollX and in the vertical direction is scrollY, the new boundary position information can be calculated based on the sliding distance and the initial position information. The calculation logic is as follows:

[0109] For horizontal swipe:

[0110] New left border position = initial left border position + horizontal sliding distance.

[0111] New right border position = initial right border position + horizontal sliding distance.

[0112] For vertical sliding:

[0113] New upper boundary position = initial upper boundary position + vertical sliding distance.

[0114] New lower boundary position = initial lower boundary position + vertical sliding distance.

[0115] In some embodiments, determining the display status of at least one view in the display interface based on the boundary position information and the display area of ​​the sliding component includes: when the sliding direction is horizontal, determining the display status of at least one view based on whether the left boundary position information or the right boundary position information is within the display area; when the sliding direction is vertical, determining the display status of at least one view based on whether the upper boundary position information or the lower boundary position information is within the display area.

[0116] Assume that the left boundary of the display area of ​​the sliding component in the horizontal direction is displayLeft, and the right boundary is displayRight. For a certain view, its left boundary position is leftBoundary, and its right boundary position is rightBoundary.

[0117] If leftBoundary is greater than or equal to displayLeft and less than or equal to displayRight, the left boundary of the view is within the display area of ​​the slider component, which means that at least part of the view is visible. For example, if the left boundary of an image view falls exactly in the middle of the display area of ​​the slider component, then it can be determined that the image view is visible.

[0118] If leftBoundary is less than displayLeft and the view width plus leftBoundary is greater than displayLeft, that is, the left boundary of the view is on the left side of the display area but the view partially extends into the display area, which also means that the view is partially visible. For example, a long text view has its left boundary outside the display area, but part of the text extends into the display area. This view is also partially visible.

[0119] If leftBoundary is greater than displayRight, the view is completely to the right of the display area and is invisible.

[0120] If rightBoundary is greater than or equal to displayLeft and less than or equal to displayRight, the right boundary of the view is within the display area and the view is at least partially visible.

[0121] If rightBoundary is greater than displayRight and rightBoundary minus the view width is less than displayRight, that is, the right boundary of the view is on the right side of the display area but partially extends into the display area, and the view is partially visible.

[0122] If rightBoundary is less than displayLeft, the view is completely on the left side of the display area and is not visible.

[0123] Similarly, let the upper boundary of the display area of ​​the sliding component in the vertical direction be displayTop, and the lower boundary be displayBottom. For the view, its upper boundary position is topBoundary, and its lower boundary position is bottomBoundary.

[0124] When topBoundary is greater than or equal to displayTop and less than or equal to displayBottom, the top boundary of the view is within the display area and the view is at least partially visible. For example, if the top boundary of a button view is within the display area of ​​the slider component, the button is visible.

[0125] If topBoundary is less than displayTop and the view height plus topBoundary is greater than displayTop, that is, the upper boundary of the view is above the display area but partially extends into the display area, the view is partially visible. For example, a video player view has its top beyond the display area, but some of its content is still in the display area, and this view is partially visible.

[0126] If topBoundary is greater than displayBottom, the view is completely below the display area and is not visible.

[0127] If bottomBoundary is greater than or equal to displayTop and less than or equal to displayBottom, the bottom boundary of the view is within the display area and the view is at least partially visible.

[0128] If bottomBoundary is greater than displayBottom and bottomBoundary minus the view height is less than displayBottom, that is, the bottom boundary of the view is below the display area but partially extends into the display area, the view is partially visible.

[0129] If bottomBoundary is less than displayTop, the view is completely above the display area and is not visible.

[0130] Figure 2 A schematic diagram of the display area and view of the sliding component provided in an embodiment of the present application.

[0131] like Figure 2 As shown, 201 may represent the display area of ​​the sliding component, 202 may represent the view container, and the view container 202 may include view 2021, view 2022, and view 2023, wherein the view 2021, view 2022, and view 2023 included in the view container 202 may be a tiled layout structure. In other embodiments of the present application, the layout structure may also include tiled overlay, overlay, disordered overlay, etc.

[0132] exist Figure 2 It can be seen that in the initial state, in the view container 202, the view 2021 is in the display area 201 of the sliding component, while the view 2022 and the view 2023 are not in the display area 201 of the sliding component.

[0133] The user 203 may trigger a sliding operation on the sliding component 201 . For example, the sliding direction of the sliding operation triggered by the user 203 is a horizontal left sliding.

[0134] Based on the user's sliding operation, view 2021, view 2022 and view 2023 will all move horizontally to the left accordingly.

[0135] Figure 3 A schematic diagram showing the display area and view of the sliding component after a sliding operation is shown.

[0136] Figure 3 It can be in Figure 2 On the basis of, after a sliding operation, view 2021, view 2022 and view 2023 are all horizontally slid to the left and their relative positions with respect to the display area 201.

[0137] like Figure 3 It can be seen that after the sliding operation, the left and right borders of view 2022 are completely in the display area 201 and are in a visible state; the left border of view 2023 is in the display area 201, but the right border has not slid into the display area 201 and is in a partially visible state.

[0138] The following is a schematic view tree. Next, the following view tree will be used as an example to schematically illustrate the implementation process of finding the branch node with the longest display length from the view tree.

[0139] The view tree structure is as follows:

[0140]

[0141] Step 1: Determine the root node: The root node is RecyclerView.

[0142] Step 2: Traverse each node under the root node.

[0143] Node 1: LinearLayout, with child nodes, recorded as branch nodes.

[0144] Node 2: ConstraintLayout, has child nodes, recorded as branch nodes.

[0145] Node 1.1: TextView, no child nodes, a leaf node, skipped. Node 1.2: FrameLayout, has child nodes, recorded as a branch node.

[0146] Node 1.3: RelativeLayout, with child nodes, recorded as branch nodes.

[0147] Node 1.2.1: ImageView, no child nodes, a leaf node, skip. Node 1.2.2: Button, no child nodes, a leaf node, skip.

[0148] Node 1.3.1: TextView, no child nodes, leaf node, skipped.

[0149] Node 1.3.2: LinearLayout, with child nodes, recorded as branch nodes.

[0150] Node 1.3.2.1: ImageView, no child nodes, is a leaf node, skipped.

[0151] Node 1.3.2.2: TextView, no child nodes, is a leaf node, skipped.

[0152] Node 2.1: TextView, no child nodes, a leaf node, skip. Node 2.2: ImageView, no child nodes, a leaf node, skip.

[0153] Node 2.3: LinearLayout, with child nodes, recorded as branch nodes.

[0154] Node 2.3.1: Button, no child nodes, a leaf node, skipped.

[0155] Node 2.3.2: FrameLayout, has child nodes, recorded as branch nodes.

[0156] Node 2.3.2.1: TextView, no child nodes, is a leaf node, skipped.

[0157] Step 3: Record all branch nodes.

[0158] Node 1: LinearLayout;

[0159] Node 1.2: FrameLayout;

[0160] Node 1.3: RelativeLayout;

[0161] Node 1.3.2: LinearLayout;

[0162] Node 2: ConstraintLayout;

[0163] Node 2.3: LinearLayout;

[0164] Node 2.3.2: FrameLayout;

[0165] Step 4: Compare display lengths.

[0166] Assume that the display length of each branch node is as follows:

[0167] LinearLayout (Node 1): 400dp.

[0168] FrameLayout (Node 1.2): 200dp.

[0169] RelativeLayout (Node 1.3): 300dp.

[0170] LinearLayout (Node 1.3.2): 150dp.

[0171] ConstraintLayout (Node 2): 500dp.

[0172] LinearLayout (Node 2.3): 250dp.

[0173] FrameLayout (Node 2.3.2): 100dp.

[0174] It is found that the leaf node with the longest display length is ConstraintLayout, and its display length is 500dp.

[0175] Figure 4 A block diagram of a view display device provided by an embodiment of the present application is shown. The device can be applied to a client and specifically may include:

[0176] An operation receiving module 401 is used to receive a sliding operation on the sliding component and determine a sliding direction and a sliding distance of the sliding operation;

[0177] A root node determination module 402 is used to determine a root node from a view tree of a sliding component, wherein the view tree is constructed with the sliding component as the root node, the view container corresponding to the sliding component as the branch node, and the view contained in the view container as the leaf node;

[0178] A branch node determination module 403 is used to determine multiple branch nodes in the view tree starting from the root node;

[0179] The length determination module 404 is used to respectively determine the display lengths of the plurality of branch nodes in the sliding direction;

[0180] A target node determination module 405, configured to determine the longest branch node in the sliding direction as the target node;

[0181] A leaf node determination module 406, used to determine at least one leaf node included in the target node;

[0182] A boundary determination module 407, configured to determine boundary position information of views corresponding to at least one leaf node on a display interface of a client based on a sliding distance;

[0183] A state determination module 408, configured to determine a display state of at least one view in a display interface based on the boundary position information and the display area of ​​the sliding component;

[0184] The display module 409 is used to control the display effect of at least one view on the display interface according to the display state of at least one view in the display interface.

[0185] In some embodiments, the branch node determination module 403 is specifically used to: for any node under the root node, determine whether the node is a leaf node; if the node is a leaf node, skip the node; otherwise, record the node as a branch node.

[0186] In some embodiments, the branch node determination module 403 is specifically used to: determine whether the display length of the node in the sliding direction is 0; if the display length of the child node in the sliding direction is not 0, record the node as a branch node.

[0187] In some embodiments, the state determination module 408 is specifically used to: when it is determined according to the boundary position information that the boundary of the view is within the visible area, determine that the display state of the view is a visible state; when it is determined according to the boundary position information that the boundary of the view is not within the visible area, determine that the display state of the view is an invisible state.

[0188] In some embodiments, the operation receiving module 401 is specifically used to: obtain a first sliding offset of the sliding component in the horizontal direction and a second sliding offset in the vertical direction; and determine the sliding direction according to the first sliding offset and the second sliding offset.

[0189] In some embodiments, the length determination module 404 is specifically used to: when the sliding direction is horizontal, use the width values ​​of the multiple branch nodes as the display length; when the sliding direction is vertical, use the height values ​​of the multiple branch nodes as the display length.

[0190] In some embodiments, the boundary determination module 407 is specifically used to: for any view, determine the initial position information of the view on the display interface; and determine the boundary position information according to the sliding distance and the initial position information.

[0191] In some embodiments, the boundary determination module 407 is specifically used to: determine the left boundary position information and the right boundary position information of the view when the sliding direction is horizontal; determine the upper boundary position information and the lower boundary position information of the view when the sliding direction is vertical.

[0192] In some embodiments, the state determination module 408 is specifically used to: when the sliding direction is horizontal, determine the display state of at least one view based on whether the left boundary position information or the right boundary position information is in the display area; when the sliding direction is vertical, determine the display state of at least one view based on whether the upper boundary position information or the lower boundary position information is in the display area.

[0193] Figure 4 The view display device can perform Figure 1 The implementation principle and technical effect of the view display method described in the illustrated embodiment will not be described in detail. The specific manner in which each module and unit performs operations in the view display device in the above embodiment has been described in detail in the embodiment of the method, and will not be described in detail here.

[0194] The present application also provides a computing device, such as Figure 5 As shown, the device may include a storage component 501 and a processing component 502;

[0195] The storage component 501 stores one or more computer instructions, wherein the one or more computer instructions are called and executed by the processing component 502 to implement the view display method provided in the embodiment of the present application.

[0196] Of course, the computing device may also include other components, such as input / output interfaces, display components, communication components, etc.

[0197] The computing device may also include a display component to perform corresponding display operations.

[0198] The input / output interface provides an interface between the processing component and the peripheral interface module, which may be an output device, an input device, etc. The communication component is configured to facilitate wired or wireless communication between the computing device and other devices.

[0199] The processing component may include one or more processors to execute computer instructions to complete all or part of the steps in the above method. Of course, the processing component may also be implemented by one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors or other electronic components to perform the above method.

[0200] The storage component is configured to store various types of data to support operations at the terminal. The storage component can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk or optical disk.

[0201] The display component may be an electroluminescent (EL) element, a liquid crystal display or a micro display having a similar structure, or a retinal direct display or a similar laser scanning display.

[0202] It should be noted that the above computing device can be a physical device or an elastic computing host provided by a cloud computing platform, etc. It can be implemented as a distributed cluster consisting of multiple servers or terminal devices, or as a single server or a single terminal device.

[0203] The present application also provides a computer-readable storage medium storing a computer program, wherein the computer program can achieve the above-mentioned Figure 1 The view display method of the illustrated embodiment. The computer readable medium may be included in the electronic device described in the above embodiment; or may exist independently without being assembled into the electronic device.

[0204] The present application also provides a computer program product, which includes a computer program carried on a computer-readable storage medium. When the computer program is executed by a computer, the computer program can achieve the above-mentioned Figure 1 The view display method of the illustrated embodiment. In such an embodiment, the computer program can be downloaded and installed from a network, and / or installed from a removable medium. When the computer program is executed by a processor, various functions defined in the system of the present application are executed.

[0205] It should be noted that the embodiments of the present application may involve the use of user data. In actual applications, user-specific personal data can be used in the scheme described herein within the scope permitted by applicable laws and regulations, subject to the requirements of applicable laws and regulations of the country where the user is located (for example, with the user's explicit consent, effective notification to the user, etc.).

[0206] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

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

[0208] Through the description of the above implementation methods, those skilled in the art can clearly understand that each implementation method can be implemented by means of software plus a necessary general hardware platform, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solution is essentially or the part that contributes to the prior art can be embodied in the form of a software product, and the computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a disk, an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0209] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit it. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application.

Claims

1. A view display method, characterized in that: Applied to a client, the method comprises: Receiving a sliding operation on the sliding component, and determining a sliding direction and a sliding distance of the sliding operation; Determine a root node from the view tree of the sliding component, wherein the view tree has the sliding component as the root node, the view container corresponding to the sliding component as the branch node, and the view contained in the view container as the leaf node; Starting from the root node, determining a plurality of branch nodes in the view tree; respectively determining display lengths of the plurality of branch nodes in the sliding direction; The longest branch node in the sliding direction is determined as the target node; Determine at least one leaf node included in the target node; Based on the sliding distance, determining the boundary position information of the view corresponding to each of the at least one leaf node on the display interface of the client; Determining a display state of at least one view in the display interface based on the boundary position information and the display area of ​​the sliding component; According to the display state of at least one view in the display interface, the display effect of the at least one view in the display interface is controlled.

2. The method according to claim 1, characterized in that The step of determining a plurality of branch nodes in the view tree starting from the root node includes: For any node under the root node, determine whether the node is a leaf node; If the node is a leaf node, the node is skipped; otherwise, the node is recorded as a branch node.

3. The method according to claim 2, characterized in that The recording the node as a branch node comprises: Determine whether the display length of the node in the sliding direction is 0; When the display length of the child node in the sliding direction is not 0, the node is recorded as a branch node.

4. The method according to claim 1, characterized in that: The determining, based on the boundary position information and the display area of ​​the sliding component, a display state of at least one view in the display interface comprises: In a case where it is determined according to the boundary position information that the boundary of the view is within the visible area, determining that the display state of the view is a visible state; When it is determined according to the boundary position information that the boundary of the view is not within the visible area, the display state of the view is determined to be an invisible state.

5. The method according to claim 1, characterized in that The determining the sliding direction of the sliding operation includes: Acquire a first sliding offset of the sliding component in a horizontal direction and a second sliding offset in a vertical direction; The sliding direction is determined according to the first sliding offset and the second sliding offset.

6. The method according to claim 5, characterized in that The respectively determining the display lengths of the plurality of branch nodes in the sliding direction comprises: When the sliding direction is a horizontal direction, using the width values ​​of the plurality of branch nodes as the display length; When the sliding direction is a vertical direction, the height values ​​of the plurality of branch nodes are used as the display length.

7. The method according to claim 6, characterized in that The determining, based on the sliding distance, the boundary position information of the view corresponding to each of the at least one leaf node on the display interface comprises: For any view, determining initial position information of the view on the display interface; The boundary position information is determined according to the sliding distance and the initial position information.

8. The method according to claim 7, characterized in that The determining, based on the sliding distance, the boundary position information of the view corresponding to each of the at least one leaf node on the display interface comprises: When the sliding direction is a horizontal direction, determining left boundary position information and right boundary position information of the view; When the sliding direction is a vertical direction, determining upper boundary position information and lower boundary position information of the view; The determining, based on the boundary position information and the display area of ​​the sliding component, a display state of at least one view in the display interface comprises: When the sliding direction is a horizontal direction, determining a display state of the at least one view based on whether the left boundary position information or the right boundary position information is within the display area; When the sliding direction is a vertical direction, the display state of the at least one view is determined based on whether the upper boundary position information or the lower boundary position information is within the display area.

9. A computing device, characterized in that including a processing component and a storage component; The storage component stores one or more computer instructions; the one or more computer instructions are used to be called and executed by the processing component to implement the view display method as described in claims 1 to 8.

10. A computer-readable storage medium, characterized in that: A computer program is stored thereon, and when the computer program is executed by the processing component, the view display method as described in claims 1 to 8 is implemented.

11. A computer program product, characterized in that It comprises a computer program / instruction, which, when executed by a processing component, implements the view display method as described in claims 1 to 8.

Images