Interface display method, electronic equipment and program product
By receiving user operations and replacing the first sliding view with the second sliding view in the interface display method, the risk of misoperation caused by the difficulty of distinguishing between the fixed view and the sliding view is solved, and a better user experience is achieved.
Patent Information
- Application Number
- CN202510031818.8
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-01-08
- Publication Date
- 2025-05-02
AI Technical Summary
In the prior art, the unified design style of fixed view and sliding view makes it difficult for users to distinguish, increasing the risk of misoperation.
In the interface display method, the user operation is received and when the user performs a sliding operation on the fixed view, the first sliding view is replaced with the second sliding view, thereby reducing the risk of misoperation.
It effectively reduces the risk of user misoperation and improves the usability of user experience and interface operations.
Smart Images

Figure CN119916984A_ABST
Abstract
Description
Technical Field
[0001] The present disclosure relates to the technical field of computers, and more particularly to an interface display method, an electronic device, and a program product. Background Art
[0002] With the popularity of smartphones and tablets, competition in the mobile application field is becoming increasingly fierce. Users' expectations for applications are constantly increasing. They not only want beautiful interfaces and easy operations, but also pursue fast responses and seamless interactive experiences.
[0003] In the prior art, in order to enable users to access required content more intuitively and conveniently on small-screen devices, the application interface usually includes a fixed view (referring to stationary elements on the interface, providing stable information presentation, so that users can quickly obtain key content, such as navigation menus or titles) and a sliding view (referring to a content area that can be scrolled with the user's gestures, used to display content that exceeds the screen range).
[0004] However, in order to ensure a unified design style for the application interface, the fixed view and the sliding view may use the same color, font, and graphic elements, which makes them difficult to distinguish in the eyes of users, thereby increasing the risk of misoperation. Summary of the invention
[0005] In order to solve at least one of the above technical problems, the present disclosure provides an interface display method, an electronic device and a program product.
[0006] According to one aspect of the present disclosure, there is provided an interface display method, comprising: Displaying a first interface, wherein the first interface includes a fixed view and a first sliding view; Receiving an operation on the first interface by a user; When the operation is a sliding operation on the fixed view, the first sliding view is replaced by the second sliding view.
[0007] According to the interface display method of at least one embodiment of the present disclosure, Before replacing the first sliding view with the second sliding view, the interface display method further includes: acquiring an operation target and an operation mode of the operation; When the operation is a sliding operation on the fixed view, the first sliding view is replaced by the second sliding view, including: when the operation target is the fixed view and the operation mode is a sliding operation, the first sliding view is replaced by the second sliding view.
[0008] According to the interface display method of at least one embodiment of the present disclosure, the interface display method further includes: When the operation target is the fixed view and the operation mode is a click operation, a second interface related to the first element in the fixed view pointed to by the operation is displayed.
[0009] According to the interface display method of at least one embodiment of the present disclosure, the interface display method further includes: When the operation target is the first sliding view and the operation mode is a sliding operation, the first sliding view is replaced by the second sliding view.
[0010] According to the interface display method of at least one embodiment of the present disclosure, the interface display method further includes: When the operation target is the first sliding view and the operation method is a click operation, a third interface related to the second element in the first sliding view pointed to by the operation is displayed.
[0011] According to the interface display method of at least one embodiment of the present disclosure, a view container is also provided on the first interface, and the fixed view and the first sliding view are arranged in the view container; the view container is used to execute the step of receiving the user's operation on the first interface, and is also used to trigger the first processor to replace the first sliding view with the second sliding view.
[0012] According to the interface display method of at least one embodiment of the present disclosure, when the operation target is the fixed view and the operation mode is a click operation, the view container is also used to trigger the second processor to display a second interface related to the first element in the fixed view pointed to by the operation.
[0013] According to the interface display method of at least one embodiment of the present disclosure, the first sliding view and the second sliding view have the same height; or, the first sliding view and the second sliding view have different heights.
[0014] According to the interface display method of at least one embodiment of the present disclosure, the view container is used to trigger the first processor using an operation interception method or an operation target identification method.
[0015] According to the interface display method of at least one embodiment of the present disclosure, the view container is visible or invisible on the first interface.
[0016] According to another aspect of the present disclosure, an electronic device is provided, comprising: a memory storing execution instructions; and a processor executing the execution instructions stored in the memory, so that the processor executes the interface display method of any embodiment of the present disclosure.
[0017] According to another aspect of the present disclosure, a computer program product is provided, including a computer program, wherein when the computer program is executed by a processor, the interface display method of any embodiment of the present disclosure is implemented. BRIEF DESCRIPTION OF THE DRAWINGS
[0018] The accompanying drawings illustrate exemplary embodiments of the present disclosure and together with the description serve to explain the principles of the present disclosure. These drawings are included to provide a further understanding of the present disclosure and are incorporated in and constitute a part of this specification.
[0019] Figure 1 This is a flow chart of an interface display method according to an embodiment of the present disclosure. Figure 1 .
[0020] Figure 2 yes Figure 1 A schematic diagram of the first interface before sliding in the interface display method shown.
[0021] Figure 3 yes Figure 1 An example diagram of the first interface before sliding in the interface display method shown.
[0022] Figure 4 yes Figure 1 A schematic diagram of the first interface after sliding in the interface display method shown.
[0023] Figure 5 yes Figure 1 An example diagram of the first interface after sliding in the interface display method shown.
[0024] Figure 6 This is a flow chart of an interface display method according to an embodiment of the present disclosure. Figure 2 .
[0025] Figure 7 This is a flow chart of an interface display method according to an embodiment of the present disclosure. Figure 3 .
[0026] Figure 8 This is a flow chart of an interface display method according to an embodiment of the present disclosure. Figure 4 .
[0027] Fig. 9 yes Figure 8 A schematic diagram of the second interface after clicking a fixed view in the interface display method shown.
[0028] Fig.10 yes Figure 8 An example diagram of the second interface after clicking on a fixed view in the interface display method shown.
[0029] Fig.11This is a flow chart of an interface display method according to an embodiment of the present disclosure. Figure 5 .
[0030] Fig.12 yes Fig.11 A schematic diagram of the third interface after clicking the first sliding view in the interface display method shown.
[0031] Fig.13 yes Fig.11 An example diagram of the third interface after clicking the first sliding view in the interface display method shown.
[0032] Fig.14 This is a flow chart of an interface display method according to an embodiment of the present disclosure. Figure 6 .
[0033] Fig.15 It is a schematic block diagram of the structure of an interface display device according to an embodiment of the present disclosure.
[0034] Fig.16 It is a schematic block diagram of the structure of an electronic device equipped with an interface display device according to an embodiment of the present disclosure. DETAILED DESCRIPTION
[0035] The present disclosure is further described in detail below in conjunction with the accompanying drawings and examples. It is understood that the specific examples described herein are only used to explain the relevant content, rather than to limit the present disclosure. It should also be noted that, for ease of description, only the parts related to the present disclosure are shown in the accompanying drawings.
[0036] It should be noted that, in the absence of conflict, the embodiments and features of the embodiments in the present disclosure can be combined with each other. The technical solution of the present disclosure will be described in detail below with reference to the accompanying drawings and in combination with the embodiments.
[0037] Since the elements of fixed views and sliding views usually use the same color, font, and graphic design to ensure a unified design style for the application interface, users can easily mistake them for the same type of views, increasing the risk of misoperation; for example, if a user wants to switch to a sliding view, they mistakenly believe that the fixed view can also be slidable, so they try to slide the fixed view but find that they cannot slide, resulting in an invalid operation.
[0038] To this end, the present disclosure proposes an interface display method, an electronic device and a program product. The present disclosure can be implemented through application software configured on electronic devices such as tablet computers and mobile phones, or can be implemented through mini-programs or web applications.
[0039] For the convenience of description and to make the technical solutions of the specific implementation methods of the present disclosure easier to understand, before describing the interface display method implemented by the present disclosure, the technical terms involved in the specific implementation methods of the present disclosure are explained as follows: Fixed views are parts of the interface that are fixed in position and cannot be slid.
[0040] A swipe view is a portion of an interface where users can swipe or scroll to see more content.
[0041] A view container is a control or layout used to contain and organize multiple views, such as fixed views and sliding views.
[0042] Figure 1 FIG. 1 is a schematic diagram showing the overall flow of an interface display method M100 according to an embodiment of the present disclosure. Figure 1 The method shown includes steps S110 to S130. The method can be executed by electronic devices such as mobile phones and tablet computers.
[0043] Specifically, Figure 1 The methods shown include: Step S110, displaying a first interface, the first interface including a fixed view and a first sliding view.
[0044] In some embodiments of the present disclosure, the fixed view and the first sliding view in step S110 are usually adjacent or not; the fixed view is usually located above the first sliding view to ensure that the user can access the functions of the fixed view first during interaction. The first interface in step S110 can be a composite interface that simultaneously displays the fixed view and the first sliding view, such as a news interface, an e-commerce interface, a social media interface, a real estate service interface, etc. The fixed view and the first sliding view can be displayed simultaneously on the first interface using a layout manager; wherein the fixed view is usually used for a title bar, a toolbar or other static information; the first sliding view is usually used to display long text, a list or a picture, etc., and the user can slide or scroll to switch views. The method of simultaneously displaying the fixed view and the first sliding view on the first interface through step S110 may include: wrapping the first sliding view and the fixed view with a sliding container, and keeping the fixed view stationary through constraint layout, etc.; or only wrapping the first sliding view with a sliding container, directly adding the fixed view to the view hierarchy of the view controller, and setting the fixed view not to move with the first sliding view.
[0045] Figure 2 is a schematic diagram of a first interface before sliding according to an embodiment of the present disclosure; Figure 3 It is an example diagram of a first interface before sliding according to an embodiment of the present disclosure.
[0046] refer to Figure 2, the red area represents the fixed view, which is a horizontal list covering a single screen and cannot be scrolled, but can respond to the click operation of the user's finger and jump the interface to the detail interface related to the element in the fixed view pointed to by the click operation; the green area represents the first sliding view, which can slide to the second sliding view based on the user's horizontal sliding operation. The view height of the sliding view can be changed in real time during the sliding process of the user's finger, that is, the first sliding view can be different from the second sliding view in height. At the same time, the first sliding view or the second sliding view can also respond to the click operation of the user's finger and jump the interface to the detail interface related to the element in the first sliding view or the second sliding view pointed to by the click operation. The fixed view can respond to the click operation of the user's finger. The sliding operation of the user's finger in the fixed view can be responded by the first sliding view or the second sliding view, thereby expanding the sliding area boundary of the sliding view and reducing the risk of misoperation.
[0047] refer to Figure 3 The first volleyball area is usually the area where the fixed view is located. It can be fixed to 5 booths (for example, including second-hand houses, new houses, rented houses, decorations, and shops and offices). The number of booths can also be less than 5, that is, the first volleyball area actually fills the single screen; the first volleyball area can respond to user clicks but cannot scroll. The second volleyball area is the area where the first sliding view is located. The first sliding view and the second sliding view are content areas that can be displayed independently in the sliding container (a view responsible for containing and managing multiple sliding views). The sliding container can be made slidable through a scroll control; the heights of multiple subviews can be the same or different; the total number of subviews can be set as needed, and the total number is generally a positive integer greater than or equal to 2. In particular, in order to effectively manage and display content and make the user experience smoother and more intuitive, the total number of sub-views can be set to 2, the first sliding view is fixed to 5 booths (for example, including: map house search, mortgage calculation, selling house, high-end residence and worry-free rental), and the remaining parts are all placed in the second sliding view (for example, including: finding a community, recent launches, quality cleaning, finding a broker, finding a store, live house viewing, VR services, decoration cases, Sheniu AI, convenient services, house valuation, house buying knowledge, outside the fifth ring road, I want to sell my house and view more). The first sliding view can respond in real time to the user's sliding operation in the first sliding view or the fixed view, as well as the user's click operation in the first sliding view.
[0048] Step S120: receiving the user's operation on the first interface.
[0049] In some embodiments of the present disclosure, step S120 can be implemented through operation monitoring, and the operation on the first interface in step S120 can be specifically an operation on a fixed view in the first interface, or it can be specifically an operation on a first sliding view in the first interface; the operation received through step S120 can be a click operation, and its external manifestation can be a single click, double click, long press, gesture click or voice click, etc.; the operation received through step S120 can also be a sliding operation, and its external manifestation can be a sliding gesture or a drag gesture, etc.
[0050] Step S130: When the operation is a sliding operation on a fixed view, the first sliding view is replaced by the second sliding view.
[0051] In some embodiments of the present disclosure, in response to the user's sliding operation on the fixed view, the first sliding view can be replaced with the second sliding view through step S130. Through this method, even if the user mistakenly believes that the fixed view can also slide and attempts to slide the fixed view, the first sliding view can be controlled to slide instead of being deemed as invalid, thereby reducing the risk of misoperation and improving the user experience.
[0052] Figure 4 is a schematic diagram of a first interface after sliding according to an embodiment of the present disclosure; Figure 5 This is an example diagram of the first interface after sliding according to an embodiment of the present disclosure.
[0053] The sliding operation on the fixed view can be a dragging or sliding operation of a finger on the fixed view, or a dragging operation of a mouse on the fixed view, etc. In the process of realizing the interface display, the interface display software can monitor the operation on the first interface, and when the monitored operation is specifically a sliding operation on the fixed view, the first sliding view is replaced by the second sliding view after calculating the sliding distance and direction according to the movement of the finger or the mouse. After replacing the first sliding view with the second sliding view, the user can also use the finger or the mouse to continue to slide the second sliding view, such as replacing the second sliding view with the third sliding view, etc.; the third sliding view can be a subsequent sliding view of the first sliding view and the second sliding view, or it can be the first sliding view (that is, looping back to the first sliding view from the last sliding view).
[0054] In particular, to ensure that the sliding operation does not exceed the visible area boundary of the sliding container (that is, the boundary of the sliding container area that the user can directly see on the screen), boundary control can be performed; for example, the sliding range can be limited according to the visible area boundary to avoid exceeding the visible area boundary of the sliding container. Specifically, it can be determined whether it exceeds the visible area boundary of the sliding container during sliding. If it does not exceed the visible area boundary, the sliding view is replaced according to the sliding distance and direction, and the user is allowed to continue sliding. If it exceeds the visible area boundary, further sliding operations are stopped to prevent the user from sliding too much. In some cases, after sliding to the visible area boundary, the user can be informed through visual or auditory prompts that the visible area boundary has been reached, such as displaying a boundary prompt or playing a prompt sound effect, and a rebound effect can also be set to provide visual feedback to tell the user that they have reached the edge of the sliding container, thereby improving the interactivity and usability of the application.
[0055] Among them, the visible area boundary of the sliding container may include the minimum sliding position and maximum sliding position where the sliding container can scroll; the minimum sliding position refers to the lowest position where the user can slide up (or left), usually set to 0, indicating the starting position of all sliding views; the maximum sliding position refers to the highest position where the user can slide down (or right), and this value usually indicates the bottom of the content that the user can slide to.
[0056] In some embodiments of the present disclosure, the replacement method of the first sliding view and the second sliding view in step S130 can be card-style switching, that is, the first sliding view and the second sliding view are respectively presented as different separate cards, and the user can switch the cards by sliding left and right; or it can be list-style switching, that is, the first sliding view and the second sliding view are respectively presented as different list items, and the user can switch by sliding up and down. In particular, in order to improve the user experience, the above switching can also be infinitely looped. Taking left and right sliding as an example, the user can slide left or right without limit, and can seamlessly return to the first sliding view even if the sliding reaches the last sliding view.
[0057] Furthermore, a view container may be provided on the first interface, and the fixed view and the first sliding view are provided in the view container; the view container is used to execute the steps of receiving the user's operation on the first interface, and is also used to trigger the first processor to replace the first sliding view with the second sliding view. In order to improve the performance of the interface display software and reduce the rendering and layout calculation of the first interface by the interface display software, the view container may be invisible, but the invisibility does not affect its functional realization; in particular, in order to enhance the layering of the first interface and the user's visual feedback, the view container may also be visible, for example, to provide visual effects such as background and border.
[0058] When the operation target is a fixed view and the operation mode is a click operation, the view container is also used to trigger the second processor to display a second interface related to the first element in the fixed view pointed to by the operation.
[0059] The first processor is specifically used to process a sliding operation on a fixed view; and the second processor is specifically used to process a clicking operation on the fixed view.
[0060] The view container can use the operation interception method or the operation target identification method to trigger the corresponding first processor or second processor to perform the corresponding operation. Among them, the operation interception method refers to the technical means of intercepting the operation during user interaction, which can be implemented through operation listeners, middleware, invalid operation events, etc.; taking the implementation of operation interception through invalid operation events as an example, when the user operates the invalid operation event, first simulate an "invalid" operation event; then calculate the operation distance based on the start and end positions of the operation; if the operation distance exceeds a certain threshold, the first processor is triggered; if the operation distance is less than a certain threshold, the second processor is triggered.
[0061] The operation target recognition method refers to identifying and judging the user's operation in the user interaction. Based on this method, it can be determined which view the user wants to interact with and what kind of interaction, so as to perform the corresponding operation. Specifically, the operation target recognition can be realized through gesture recognition, click hit conditions, etc. Taking the realization of operation target recognition through click hit conditions as an example, the click hit condition is to first record the starting position of the operation when the user starts the operation, and immediately check whether the operation position is in the fixed view or the first sliding view after the operation is completed, and check the moving distance of the operation; if the distance is greater than the threshold and the operation position is in the fixed view, the first processor is triggered; if the distance is less than the threshold and the operation position is in the fixed view, the second processor is triggered.
[0062] At this time, if Figure 6 As shown, step S120 may specifically be receiving a user operation on the first interface through the view container; step S130 may specifically be triggering the first processor to replace the first sliding view with the second sliding view through the view container.
[0063] Furthermore, if Figure 7 As shown, step S140 may be further included before step S130.
[0064] Step S140, obtaining the operation target and operation mode of the operation.
[0065] In some embodiments of the present disclosure, the operation target in step S140 may be a fixed view or a first sliding view, and the operation mode may be a click operation or a sliding operation; when the operation target obtained through step S140 is a fixed view and the operation mode is a sliding operation, execute step S130.
[0066] The process of obtaining the operation mode through step S140 may include: first obtaining the initial time and initial position when the operation starts; secondly, during the operation, calculating the displacement of the current operation position relative to the initial position; if the displacement exceeds a certain threshold (such as 10 pixels, etc., which can be set or modified according to actual conditions), it is considered to be a sliding operation, and further processing of the click operation can be stopped; at the end of the operation, the operation mode is determined to be a click operation or a sliding operation based on the final displacement and duration of the operation. For example: if the final displacement is greater than the threshold, the operation mode can be identified as a sliding operation regardless of the duration. If the displacement is less than the threshold, it is necessary to further judge in combination with the duration. If the duration is short (for example, less than 300 milliseconds), the operation mode is identified as a click operation; if the duration is long, the operation mode is identified as a sliding operation.
[0067] In response to the sliding operation on the fixed view through step S140, the first sliding view is switched, thereby expanding the slidable area boundary of the first sliding view. Even if the user mistakenly believes that the fixed view can also be slid and attempts to slide the fixed view, the first sliding view can be controlled to slide instead of believing that the operation is invalid, thereby reducing the risk of misoperation and improving the user experience.
[0068] When the operation target obtained in step S140 is a fixed view and the operation mode is a click operation, Figure 8 As shown, the interface display method provided by the present disclosure may further include step S150.
[0069] Step S150: displaying a second interface related to the first element in the fixed view pointed to by the operation.
[0070] In some embodiments of the present disclosure, after receiving an operation, the interface display software can process the operation, determine the second interface according to the first element in the fixed view pointed to by the operation, and control the interface display software to jump the displayed first interface to the second interface. Among them, a navigation controller can be used to implement the jump between the first interface and the second interface; an event listener can also be added to each element in the fixed view respectively, and the jump logic can be defined in the event processing function. When the event listener detects a sliding operation, the jump between the first interface and the second interface is implemented through the event processing function; the routing library can also be used to control the jump between the first interface and the second interface, etc. In particular, in order to achieve a smooth transition between the first interface and the second interface and improve the user experience, it is also possible to jump from the first interface to the second interface by fading in and out, sliding switching, or zooming.
[0071] Fig. 9 is a schematic diagram of a second interface after clicking a fixed view according to an embodiment of the present disclosure; Fig.10 This is an example diagram of the second interface after clicking on a fixed view according to an embodiment of the present disclosure.
[0072] By expanding the slidable area boundary of the first sliding view through step S150, the original operation of the fixed view is not affected, and the user's operating experience and application usability can be significantly improved without changing the basic function of the fixed view.
[0073] When the operation target obtained in step S140 is the first sliding view and the operation mode is a click operation, Fig.11 As shown, the interface display method provided by the present disclosure may further include step S160.
[0074] Step S160, displaying a third interface related to the second element in the first sliding view pointed to by the operation.
[0075] In some embodiments of the present disclosure, after receiving the operation, the interface display software can process the operation, determine the third interface according to the second element in the first sliding view pointed to by the operation, and control the interface display software to jump the displayed first interface to the third interface. Figure 8 The process of jumping from the first interface to the second interface in step S150 is similar and will not be described in detail here.
[0076] Fig.12 is a schematic diagram of a third interface after clicking on the first sliding view according to an embodiment of the present disclosure; Fig.13 This is an example diagram of the third interface after clicking the first sliding view according to an embodiment of the present disclosure.
[0077] In some embodiments of the present disclosure, Fig.14 As shown, when the operation target obtained in step S140 is the first sliding view and the operation mode is a sliding operation, the process of replacing the first sliding view with the second sliding view in step S130 can also be performed. This step can expand the slidable area boundary of the first sliding view without affecting the original operation of the first sliding view, and can significantly improve the user's operating experience and the usability of the application without changing the basic function of the first sliding view.
[0078] In some embodiments of the present disclosure, in order to determine the target view (second sliding view) corresponding to the sliding operation, the interface display software can monitor the user's touch events or mouse events to detect the user's sliding gestures; when monitoring the user's touch events or mouse events, record the position where the user starts to touch or the mouse starts (starting point); when the user moves his finger or mouse, record the current moving position; calculate the difference between the current moving position and the position where the user starts to touch or the mouse starts to obtain an offset; after determining the corresponding second sliding view according to the calculated offset, replace the first sliding view with the second sliding view.
[0079] In particular, in order to ensure that the first sliding view does not exceed the maximum movement range allowed by the sliding container when sliding, and improve the user experience, when initializing the first sliding view, its corresponding maximum movement range can be explicitly set. The specific process may include: first, determining the size of the visible area of the first sliding view, including its width and height, through the layout attributes of the first sliding view; second, obtaining the total height or total width of the sliding container, the total height can be obtained by accumulating the heights of all sliding views in the sliding container, and the total width can be obtained by accumulating the widths of all sliding views in the sliding container; third, calculating the maximum allowable scrolling distance according to the size and total size of the visible area (taking horizontal scrolling as an example: the maximum scrolling distance is equal to the total width minus the width of the first sliding view; taking vertical scrolling as an example: the maximum scrolling distance is equal to the total height minus the height of the first sliding view); finally, setting the calculated maximum scrolling distance as the boundary value of the first sliding view. If the size of the first sliding view changes during runtime (for example, adjusting the size of the first sliding view, etc.), the maximum scrolling distance can be recalculated when these changes occur, and the boundary value can be reset.
[0080] At this time, when processing the sliding operation, the current scrolling position will be checked to determine whether the current scrolling position exceeds the calculated boundary value; if not, the process of replacing the first sliding view with the second sliding view can be directly executed; if it exceeds the calculated boundary value, it will be restricted within the sliding container; for example, when the user slides the view to the left or up, it is determined whether the boundary has been reached. If the boundary has been reached, further sliding is no longer allowed. If the boundary has not been reached, no restriction is imposed and the user can continue to slide. When reaching the boundary, a rebound effect can also be implemented to automatically return to the nearest legal position when exceeding the boundary of the sliding container; for example, when the user slides up beyond the upper boundary, the first view in the view container is usually displayed after rebound; when the user slides down beyond the lower boundary, the last view in the view container is usually displayed after rebound.
[0081] In order to achieve a more natural sliding effect of replacing the first sliding view with the second sliding view, an animation or interpolation algorithm may be used to smoothly replace the first sliding view with the second sliding view; in particular, the acceleration or deceleration of the movement may also be set to make the sliding effect more natural.
[0082] In order to make the operation of the first interface feel more natural and smooth, the motion law of the physical world can also be simulated by inertial scrolling when processing the sliding operation to provide a better user experience. For example, during the operation, when the user releases the finger or stops dragging the mouse, the scrolling of the sliding view does not stop immediately, but continues to be performed in a gradually decelerating manner for a period of time; when a certain static condition (such as the speed is reduced to zero) is reached, the sliding view stops scrolling. The specific implementation method may include: when the user releases the touch point, by analyzing the movement of the first sliding view before the user releases, the current moving speed and direction are calculated; according to the current moving speed and direction, the deceleration formula (for example, using mathematical models such as exponential decay or linear decay) is applied to simulate the deceleration process in physics to obtain deceleration or acceleration; according to the calculated deceleration or acceleration, the position of the current sliding view is continuously adjusted until the speed is reduced to a certain threshold or the sliding view stops completely; when the sliding speed is lower than a certain threshold, the scrolling should stop; this threshold should be small enough so that the sliding view looks like a natural stop.
[0083] Furthermore, in order to improve the consistency of the interface layout, simplify the event handling process, optimize performance, and enhance the interactive experience, the fixed view and the first sliding view can be set in a view container (referring to a layout element or control, which can contain other views (such as fixed views, sliding views, etc.) and provide layout, management and event handling functions). The view container is used to manage the layout and interaction logic of the fixed view and sliding view.
[0084] In some embodiments of the present disclosure, in order to provide a neat and consistent visual effect and enhance the readability and aesthetics of the interface, the first sliding view in step S130 may be the same height as the second sliding view; the first sliding view in step S130 may also be different in height from the second sliding view. When the heights of the two sliding views are different, the visual hierarchy and content contrast of the page can be increased to attract user attention, while optimizing information density and screen space utilization, providing better visual guidance and personalized experience.
[0085] In some embodiments of the present disclosure, on a horizontal screen device such as a tablet computer or other electronic device with a wider screen width, the fixed view and the first sliding view in the first interface can be arranged horizontally; on a vertical screen device such as a smart phone or other electronic device with a smaller screen width, the fixed view and the first sliding view in the first interface can be arranged vertically. The view container can inherit from the linear layout LinearLayout. Since the usage rate of mobile devices is high, the screen height of the mobile device is greater than the width, and people's reading habits when using mobile devices are vertical, the vertical arrangement of the fixed view and the first sliding view in the first interface can be used as the default setting in the mobile application design.
[0086] In particular, in order to enable the view container to intercept all user operations on the fixed view and the first sliding view, regardless of whether the operation type is click or slide, the default return value of the onInterceptTouchEvent() function of the view container can be set to true. The onTouchEvent() function of the view container neither returns the return value of the dispatchTouchEvent() function of the first processor nor the return value of the dispatchTouchEvent() function of the second processor, which can prevent the return value of the onTouchEvent() function of the view container from being invalid, and by setting the return value to true, it can ensure that all operations are consumed by the view container and will not be passed on to other structures.
[0087] After the view container's onInterceptTouchEvent() returns true to intercept the operation, all subsequent operations in the same operation sequence will be transferred to the current view container's onTouchEvent() function for processing. The core distribution logic of the interface display is implemented through the view container's onTouchEvent() function, that is, all operations are converged to the common parent container of the fixed view and the first sliding view - the view container for centralized processing (the view container controls when to trigger the first processor, when to trigger the second processor, etc.). In this way, the first processor and the second processor no longer need to be compatible with any related operation conflict logic, but only need to focus on the logical implementation of the internal functions of the first processor and the second processor. The first processor and the second processor do not need to introduce complex conflict detection and resolution mechanisms, which can reduce the complexity of the design and implementation of the first processor and the second processor and improve processing performance.
[0088] The view container can obtain the operation coordinates through the onTouchEvent() function, and actively identify whether the operation position is a fixed view or a first sliding view based on the operation coordinates. Specifically, the y coordinate of the upper boundary of the view container can be set to 0, and the judgment condition of the identification process can be whether the y coordinate of the operation (that is, the y coordinate of the operation relative to the entire view container) is less than or equal to the height of the fixed view. When the y coordinate of the operation is less than or equal to the height of the fixed view, it means that the operation occurs in the fixed view; when the y coordinate of the operation is greater than the height of the fixed view, it means that the operation occurs in the sliding view. The click operation of the fixed view can be implemented by the dispatchTouchEvent() function of the second processor; the sliding operation of the fixed view, the click or sliding operation of the first sliding view can be implemented by the dispatchTouchEvent() function of the first processor. In order to realize the distribution operation of the view container, before distribution, the current y coordinate relative to the entire view container can also be converted into the y coordinate in the fixed view or sliding view coordinate system.
[0089] The first processor and the second processor can respectively use the null safety call method to determine whether each is null; whichever processor is not null executes the corresponding process.
[0090] For the second processor, when the y coordinate of the operation is less than or equal to the height of the fixed view, y can be set to a specific height in the fixed view, such as half of the height of the fixed view, and the position update event is called to update the position of the operation, so that the second processor can process the click operation of the fixed view; when the y coordinate of the operation is greater than the height of the fixed view, y can be set to an "invalid" value, such as -1, indicating that the operation target is not on the fixed view and the second processor cannot process the operation. When the operation is a sliding operation of the fixed view, the second processor can also set y to an "invalid" value.
[0091] For the first processor, when the y coordinate of the operation is less than or equal to the height of the fixed view and it is a click operation, y can be set to an "invalid" value, such as -1, indicating that the operation target is not on the first sliding view and the second processor cannot process the operation; when the y coordinate of the operation is greater than the height of the fixed view, the y coordinate of the operation can be set to the current y coordinate minus the height of the fixed view, and the position update event is called to update the position of the operation so that the first processor can process the operation.
[0092] The above process can realize the distribution of operations. During the distribution process, the operations can be distributed to corresponding processors in combination with specific types of operations.
[0093] In particular, the user can adjust the positions of the fixed view and the first sliding view in the view container as needed, and then only needs to call the first processor and the second processor to implement the specific processing process. Through the above steps, the interface display can be easily and quickly implemented.
[0094] In order to ensure that the operation processing between the first processor and the second processor does not conflict, thereby avoiding processing the same operation at the same time, an "invalid" touch event can be simulated. This approach can ensure that the operation will only be passed to the corresponding processor, and not to other processors, thereby preventing them from processing the event; this method actually "cheats" the event processing mechanism by changing the y coordinate so that only a specific processor can respond to the event; this method can effectively prevent multiple processing of events. Another way is to put the operation distribution logic inside the click hit condition, which means that the event distribution processing logic is only executed when it is determined that the operation hits a certain processor. This method has clear code logic and is easy to understand.
[0095] The view container perfectly solves the problem of breaking through the boundaries of the slidable view area, and has no side effects on the click events of the original fixed view, as well as the click events and sliding events of the original sliding view.
[0096] Based on any of the above implementations, the present disclosure also provides an interface display device.
[0097] Fig.15 It is a schematic block diagram of the structure of an interface display device according to an embodiment of the present disclosure.
[0098] like Fig.15 As shown, the interface display device includes: The first display module 110 is used to display a first interface, which includes a fixed view and a first sliding view.
[0099] The operation receiving module 120 is used to receive the user's operation on the first interface.
[0100] The second display module 130 is used to replace the first sliding view with the second sliding view when the operation is a sliding operation on the fixed view.
[0101] When the operation received by the operation receiving module 120 is a click operation on the fixed view, the second display module is also used to display the second interface related to the first element in the fixed view pointed to by the operation; when the operation received by the operation receiving module 120 is a click operation on the first sliding view, the second display module is also used to display the third interface related to the second element in the first sliding view pointed to by the operation; when the operation received by the operation receiving module 120 is a sliding operation on the first sliding view, the second display module is also used to replace the first sliding view with the second sliding view. When the operation received by the second display module through step S120 is a sliding operation, whether the sliding operation acts on the fixed view or the first sliding view, it can be responded by the area corresponding to the first sliding view, and the slidable area boundary of the first sliding view can be expanded, that is, the sliding area is expanded from the area corresponding to the first sliding view to the total area corresponding to the fixed view plus the first sliding view. And after the expansion, it does not affect the original click operation of the fixed view and the first sliding view, and can still respond to the click operation to jump to the corresponding interface, reducing the risk of misoperation.
[0102] Each of the above modules can be implemented by a computer program module. Fig.15 The interface display device shown can be implemented based on a computer program module architecture.
[0103] The implementation process of the functions and effects of each module in the above-mentioned device is specifically described in the implementation process of the corresponding steps in the above-mentioned interface display method, which will not be repeated here.
[0104] The execution subject of the interface display method in the specific implementation manner of the present disclosure may be an electronic device such as a mobile phone, a tablet computer, or a server.
[0105] Therefore, based on any of the above embodiments, the present disclosure also provides an electronic device, which can execute the interface display method of any of the embodiments described above in the present disclosure, and the interface display device of any of the embodiments described above can be configured on the electronic device.
[0106] Fig.16 1 is a schematic block diagram of the structure of an electronic device 1000 equipped with an interface display device according to an embodiment of the present disclosure.
[0107] The hardware structure of the electronic device 1000 can be implemented using a bus architecture. The bus architecture can include any number of interconnected buses and bridges, depending on the specific application and overall design constraints of the hardware. The bus 1100 connects various circuits including one or more processors 1200, memory 1300 and / or hardware modules together. The bus 1100 can also connect various other circuits 1400 such as peripherals, voltage regulators, power management circuits, external antennas, etc.
[0108] The bus 1100 may be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Component (EISA) bus, etc. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, the figure only uses one connecting line, but does not mean that there is only one bus or one type of bus.
[0109] The present disclosure also provides a readable storage medium, in which a computer program is stored, and the computer program is used to implement the above method when executed by a processor. "Readable storage medium" can be any device that can contain, store, communicate, propagate or transmit a program for use in an instruction execution system, device or equipment or in combination with these instruction execution systems, devices or equipment. More specific examples of readable storage media include the following: an electrical connection portion (electronic device) with one or more wirings, a portable computer disk box (magnetic device), a random access memory (RAM), a read-only memory (ROM), an erasable and editable read-only memory (EPROM or flash memory), an optical fiber device, and a portable read-only memory (CDROM), etc.
[0110] The present disclosure also provides a computer program product. The method of the present disclosure can be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer programs or instructions. When the computer program or instruction is loaded and executed, the process or function of the present disclosure is executed in whole or in part.
[0111] The computer program or instructions may be stored in a readable storage medium or transmitted from one readable storage medium to another readable storage medium, for example, the computer program or instructions may be transmitted from one website, computer, server or data center to another website, computer, server or data center by wired or wireless means. The readable storage medium may be any available medium that can be accessed or a data storage device such as a server, data center, etc. that integrates one or more available media. The available medium may be a magnetic medium, such as a floppy disk, a hard disk, or a magnetic tape; it may also be an optical medium, such as a digital video disk; it may also be a semiconductor medium, such as a solid state drive. The computer readable storage medium may be a volatile or non-volatile storage medium, or may include both volatile and non-volatile types of storage media.
[0112] Those skilled in the art will appreciate that the embodiments of the present disclosure may be provided as methods, systems, or computer program products. Therefore, the present disclosure may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present disclosure may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.
[0113] The present disclosure is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to the present disclosure. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.
[0114] These computer program instructions may also be stored in a computer readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer readable memory produce an article of manufacture including an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.
[0115] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process in the computer or other programmable device. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.
[0116] In the description of this specification, the description with reference to the terms "one embodiment / method", "some embodiments / methods", "example", "specific example", or "some examples" etc. means that the specific features, structures, or characteristics described in conjunction with the embodiment / method or example are included in at least one embodiment / method or example of the present disclosure. In this specification, the schematic representations of the above terms do not necessarily refer to the same embodiment / method or example. Moreover, the specific features, structures, or characteristics described may be combined in any one or more embodiments / methods or examples in a suitable manner. In addition, those skilled in the art may combine and combine different embodiments / methods or examples described in this specification and features of different embodiments / methods or examples, unless they are contradictory.
[0117] In addition, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of the features. In the description of the present disclosure, "plurality" means at least two, such as two, three, etc., unless otherwise clearly and specifically defined.
[0118] Those skilled in the art should understand that the above embodiments are only for the purpose of clearly illustrating the present disclosure, and are not intended to limit the scope of the present disclosure. For those skilled in the art, other changes or modifications may be made based on the above disclosure, and these changes or modifications are still within the scope of the present disclosure.
Claims
1. An interface display method, characterized in that: include: Displaying a first interface, wherein the first interface includes a fixed view and a first sliding view; Receiving an operation on the first interface by a user; as well as When the operation is a sliding operation on the fixed view, the first sliding view is replaced by the second sliding view.
2. The interface display method according to claim 1, characterized in that: Before replacing the first sliding view with the second sliding view, the interface display method further includes: acquiring an operation target and an operation mode of the operation; and When the operation is a sliding operation on the fixed view, the first sliding view is replaced by the second sliding view, including: when the operation target is the fixed view and the operation mode is a sliding operation, the first sliding view is replaced by the second sliding view.
3. The interface display method according to claim 2, characterized in that: The interface display method further includes: When the operation target is the fixed view and the operation mode is a click operation, a second interface related to the first element in the fixed view pointed to by the operation is displayed.
4. The interface display method according to claim 2, characterized in that: The interface display method further includes: When the operation target is the first sliding view and the operation mode is a sliding operation, the first sliding view is replaced by the second sliding view.
5. The interface display method according to claim 2, characterized in that: The interface display method further includes: When the operation target is the first sliding view and the operation method is a click operation, a third interface related to the second element in the first sliding view pointed to by the operation is displayed.
6. The interface display method according to any one of claims 1 to 5, characterized in that: A view container is also provided on the first interface, and the fixed view and the first sliding view are set in the view container; the view container is used to execute the steps of receiving the user's operation on the first interface, and is also used to trigger the first processor to replace the first sliding view with a second sliding view.
7. The interface display method according to claim 6, characterized in that: When the operation target is the fixed view and the operation mode is a click operation, the view container is further used to trigger the second processor to display a second interface related to the first element in the fixed view pointed to by the operation.
8. The interface display method according to any one of claims 1 to 5, characterized in that: The first sliding view has the same height as the second sliding view; or, The first sliding view and the second sliding view have different heights.
9. An electronic device, characterized in that: include: A memory storing execution instructions; as well as A processor, wherein the processor executes the execution instruction stored in the memory, so that the processor executes the interface display method according to any one of claims 1 to 8.
10. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the interface display method according to any one of claims 1 to 8 is implemented.