Control method, device, equipment and medium for displaying page in mobile phone application

Abstract

The present application relates to the field of digital medical treatment, and particularly relates to a control control method, device and equipment of a display page in a mobile phone application, and a medium, the method constructs a container in the display page when a target control in the display page of the mobile phone application is controlled to move, and adds the target control in the container; whether a touch event occurs in a display area where the container is located is monitored, if it is monitored that the touch event occurs in the display area where the container is located, the position when the touch event occurs is determined as an initial position; if it is monitored that the touch event becomes a sliding event, the position when the sliding event ends is determined as a stop position; according to the stop position, the adsorption direction and the adsorption position of the container are determined, the container is controlled to move to the adsorption position, in the moving process, a preset adsorption animation is filled in the display area between the position where the container is located and the adsorption position in real time, and a self-defined animation effect is realized in the displayed page, and the operation experience of doctors in a medical scene is enriched.

Description

Technical Field

[0001] This invention relates to the field of digital healthcare, and more particularly to a method, apparatus, device, and medium for controlling controls on a display page in a mobile application. Background Technology

[0002] To enhance user experience, Android interfaces incorporate numerous animation effects. Currently, most applications utilize animation functionality to animate controls. These animation effects include movement, scaling, shrinking, fading, and combinations of different animations. For example, in medical settings, animations such as movement and scaling of medical images received on the phone can assist doctors in examining details of patient lesions.

[0003] Most controls on the interface inherit from a unified view (i.e., View), and the container of View (ViewGroup) also inherits from View. Animating controls essentially involves animate effects on the View. Currently, animation effects such as movement and snapping within the display page are achieved by adding Views to ViewGroups. However, due to the interface rendering mechanism in the Android platform, the animation effects of Views are predetermined and cannot be changed; that is, the animation effects are implemented by the Android platform's animation framework. This lack of control over control animation effects results in a poor user experience. Therefore, improving the implementation of animation effects to enhance the user experience has become an urgent problem to be solved. Summary of the Invention

[0004] In view of this, embodiments of the present invention provide a method, apparatus, device, and medium for controlling controls on a display page in a mobile application, in order to solve the problem of how to improve the implementation of animation effects and thereby enhance the user experience.

[0005] In a first aspect, embodiments of the present invention provide a control control method for displaying a page in a mobile application, the control control method comprising:

[0006] When a target control is moved within the display page of a mobile application, a container is constructed within the display page, and the target control is added to the container.

[0007] Monitor whether a touch event occurs in the display area where the container is located. If a touch event is detected in the display area where the container is located, determine the position where the touch event occurs as the initial position.

[0008] Based on the initial position, monitor whether the touch event changes into a swipe event. If the touch event changes into a swipe event, enable the container to follow the swipe trajectory of the swipe event and determine the position where the swipe event ends as the stop position.

[0009] Based on the stop position, the adsorption direction and adsorption position of the container are determined, and the container is controlled to move to the adsorption position. During the movement, a preset adsorption animation is filled in real time within the display area between the container's location and the adsorption position.

[0010] Secondly, embodiments of the present invention provide a control control device for displaying a page in a mobile application, the control control device comprising:

[0011] A container building module is used to build a container within a display page of a mobile application and add the target control within the container when a target control is moved within the display page.

[0012] The first detection module is used to monitor whether a touch event occurs in the display area where the container is located. If a touch event is detected in the display area where the container is located, the position where the touch event occurs is determined as the initial position.

[0013] The second detection module is used to monitor whether the touch event changes into a swipe event based on the initial position. If the touch event changes into a swipe event, the container is enabled to follow the swipe trajectory of the swipe event, and the position where the swipe event ends is determined as the stop position.

[0014] The movement control module is used to determine the adsorption direction and adsorption position of the container based on the stop position, control the container to move to the adsorption position, and fill the display area between the container's location and the adsorption position in real time during the movement.

[0015] Thirdly, embodiments of the present invention provide a computer device, the computer device including a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the control method as described in the first aspect.

[0016] Fourthly, embodiments of the present invention provide a computer-readable storage medium storing a computer program that, when executed by a processor, implements the control method as described in the first aspect.

[0017] The beneficial effects of the embodiments of the present invention compared with the prior art are as follows:

[0018] When this invention performs movement control on a target control within the display page of a mobile application, a container is constructed within the display page, and the target control is added to the container. The invention monitors whether a touch event occurs in the display area where the container is located. If a touch event is detected, the position where the touch event occurs is determined as the initial position. Based on the initial position, the invention monitors whether the touch event changes into a swipe event. If the touch event changes into a swipe event, the container is enabled to follow the swipe trajectory of the swipe event, and the position where the swipe event ends is determined as the stop position. Based on the stop position, the invention determines the container's adsorption direction and adsorption position, controls the container to move to the adsorption position, and during the movement, a preset adsorption animation is filled in real-time within the display area between the container's current position and the adsorption position. By adding any target control from the displayed page to a newly constructed container, the container can then move and attach following gestures. This allows for monitoring of touch and swipe events to determine if the container has moved. Once movement is confirmed, custom animation effects are achieved based on the container's stopping position and the determined attachment direction and position. This enriches the doctor's operational experience in medical scenarios, meets the doctor's experience design requirements, and improves the doctor's usability. Attached Figure Description

[0019] To more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0020] Figure 1 This is a schematic diagram of an application environment for a control method for displaying a page in a mobile application, provided in Embodiment 1 of the present invention.

[0021] Figure 2 This is a flowchart illustrating a method for controlling the display page controls in a mobile application, as provided in Embodiment 1 of the present invention.

[0022] Figure 3 This is a flowchart illustrating a method for controlling the display page controls in a mobile application, as provided in Embodiment 2 of the present invention.

[0023] Figure 4 This is a flowchart illustrating a method for controlling the display page controls in a mobile application, as provided in Embodiment 3 of the present invention.

[0024] Figure 5This is a flowchart illustrating a method for controlling the display page controls in a mobile application, provided in Embodiment 4 of the present invention.

[0025] Figure 6 This is a schematic diagram of the structure of a control device for displaying a page in a mobile application, provided in Embodiment 5 of the present invention;

[0026] Figure 7 This is a schematic diagram of the structure of a computer device provided in Embodiment Six of the present invention. Detailed Implementation

[0027] In the following description, specific details such as particular system architectures and techniques are set forth for illustrative purposes and not for limitation, in order to provide a thorough understanding of the embodiments of the invention. However, those skilled in the art will understand that the invention can be implemented in other embodiments without these specific details. In other instances, detailed descriptions of well-known systems, apparatuses, circuits, and methods are omitted so as not to obscure the description of the invention with unnecessary detail.

[0028] It should be understood that, when used in this specification and the appended claims, the term "comprising" indicates the presence of the described features, integrals, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, integrals, steps, operations, elements, components and / or collections thereof.

[0029] It should also be understood that the term “and / or” as used in this specification and the appended claims refers to any combination of one or more of the associated listed items and all possible combinations, and includes such combinations.

[0030] As used in this specification and the appended claims, the term "if" may be interpreted, depending on the context, as "when," "once," "in response to determination," or "in response to detection." Similarly, the phrase "if determined" or "if [described condition or event] is detected" may be interpreted, depending on the context, as meaning "once determined," "in response to determination," "once [described condition or event] is detected," or "in response to detection of [described condition or event]."

[0031] Furthermore, in the description of this invention and the appended claims, the terms "first," "second," "third," etc., are used only to distinguish descriptions and should not be construed as indicating or implying relative importance.

[0032] References to "one embodiment" or "some embodiments" as described in this specification mean that one or more embodiments of the invention include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized.

[0033] It should be understood that the sequence number of each step in the following embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0034] To illustrate the technical solution of the present invention, specific embodiments are described below.

[0035] The present invention provides a method for controlling the display of a page in a mobile application, which can be applied to applications such as... Figure 1 In this application environment, the client communicates with the server. Clients include, but are not limited to, handheld computers, desktop computers, laptops, ultra-mobile personal computers (UMPCs), netbooks, cloud terminal devices, and personal digital assistants (PDAs). The server can be a standalone server or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content delivery networks (CDNs), and big data and artificial intelligence platforms.

[0036] See Figure 2 This is a flowchart illustrating a control method for displaying a page in a mobile application, provided in Embodiment 1 of the present invention. The above control method can be applied to... Figure 1 The client-side computer device connects to the server to obtain relevant background data, such as a target control within the display interface of a mobile application, which is used to move and control the target control to achieve custom animation effects.

[0037] In this application, the developer manages the database on the server side, that is, the operation object for entering data into the database is the developer, the aforementioned client is operated by the developer, the database is connected to the corresponding digital medical device, so as to move and control any target control on the display page of the digital medical device, thereby realizing a custom animation effect.

[0038] like Figure 2 As shown, the control method of this control may include the following steps:

[0039] Step S201: When moving a target control within the display page of a mobile application, a container is constructed within the display page, and the target control is added to the container.

[0040] In essence, a control refers to a view. In Android applications (APPs), all user interface (UI) elements are composed of View and container (ViewGroup) objects. A View object is a data structure whose properties store the layout parameters and content of a specific rectangular area on the screen. A View object handles its own measurement, layout, drawing, focus changes, scrolling, key / gesture interactions with the rectangular area on the screen. As an object in the user interface, the View is also a point of interaction with the user and an event receiver. A ViewGroup, on the other hand, is a layout container used to store other View and ViewGroup objects. It is derived from View and its function is to load and manage the next-level View or ViewGroup objects. In other words, it is a container that holds other elements and is responsible for managing and laying out the added Views and ViewGroups.

[0041] In this embodiment of the invention, when moving any target control within a page already displayed in a mobile application, a container is first constructed within the page, and then the target control is added to the constructed container to facilitate the management and layout of the target control.

[0042] For example, in a digital healthcare scenario, a doctor uses a touch-enabled mobile phone to view any medical image on the phone to examine the lesions of the corresponding patient. During the viewing process, if it is necessary to move any target control in the medical image on the phone, a container is built on the display page corresponding to the medical image, and the target control is added to the built container so that custom animation effects can be achieved by moving the container later.

[0043] Step S202: Monitor whether a touch event occurs in the display area where the container is located. If a touch event is detected in the display area where the container is located, determine the position where the touch event occurs as the initial position.

[0044] In this context, a touch event refers to a user's finger touching the screen of a mobile application. Therefore, in this embodiment of the invention, pressure characteristics in the display area where the container is located can be obtained, and the occurrence of a touch event in the display area can be monitored based on these pressure characteristics. If pressure characteristics are obtained in the display area where the container is located, it indicates that a touch event has occurred; conversely, if no pressure characteristics are obtained, it indicates that no touch event has occurred. Therefore, when a touch event is detected in the display area where the container is located, the position where the touch event occurred is determined as the initial position.

[0045] It is worth noting that for interactive smart tablets, the method of acquiring touch data from touchscreen input can adopt existing input acquisition methods. That is, the hardware collects touch messages and sends them to the PC system of the interactive smart tablet. Taking the PC system as Microsoft Windows operating system as an example, the Windows system collects touch data through the Wireless Internet Service Provider (WISP) process on the one hand, and triggers mouse messages and informs the interface framework program (Windows Presentation Foundation, WPF) provided by Microsoft on the other hand. When the WPF program receives the mouse message, it checks whether the WISP process has collected touch data at the corresponding time. If the WISP process has collected touch data at the corresponding time, the WPF program can determine that the system has received a touch message. Then, the WPF program obtains the touch data from the WISP process, parses the touch data to obtain the corresponding pressure characteristics, that is, the pressure value.

[0046] However, the efficiency of obtaining pressure features as described above is relatively low. In order to overcome the problem of low acquisition efficiency, in this embodiment of the invention, touch data transmitted by a Universal Serial Bus (USB interface) is obtained. The USB interface is the connection interface between the touch screen and the motherboard of the mobile phone. The touch data is then parsed to obtain the corresponding pressure features. The touch screen is connected to the motherboard of the mobile phone via USB. The touch screen sends touch messages to the motherboard through the USB interface. Then, the touch data is obtained by directly reading the USB interface, which improves the efficiency of touch data acquisition.

[0047] Step S203: Monitor whether the touch event changes into a swipe event based on the initial position. If the touch event changes into a swipe event, enable the container to follow the swipe trajectory of the swipe event and determine the position where the swipe event ends as the stop position.

[0048] In this invention, a sliding event refers to the movement of the container. Therefore, in this embodiment of the invention, starting from the initial position when a touch event occurs, the system monitors whether the touch event changes into a sliding event. If the touch event changes into a sliding event, it indicates that the container has moved. The system then controls the container to follow the sliding trajectory of the sliding event. At the end of the sliding event, the system determines the position where the sliding event ends as the stopping position of the container.

[0049] For example, in a digital healthcare scenario, for medical images on a mobile phone, after monitoring whether the doctor clicks on a container built on the display page of the medical image and determining the initial position of the first click, the system monitors whether the doctor performs a sliding operation on the container. If the doctor is detected to be sliding on the container, the system controls the container to move along the sliding trajectory of the doctor. When the doctor stops moving, the system records the stopping position of the container.

[0050] Step S204: Based on the stop position, determine the adsorption direction and adsorption position of the container, control the container to move to the adsorption position, and during the movement, fill the display area between the container's location and the adsorption position with a preset adsorption animation in real time.

[0051] In this invention, the adsorption direction refers to the direction in which the container moves during the animation, and the adsorption position refers to the position where the container stops moving during the animation. Therefore, in this embodiment of the invention, the adsorption direction and adsorption position of the container are determined based on the stopping position of the container on the display page. During the animation, the container is controlled to move to the adsorption position, and during the movement, a preset adsorption animation is filled in real time within the display area between the container's location and the adsorption position, thereby achieving the animation effect of the target control.

[0052] For example, in a digital healthcare scenario, the suction direction and suction position of the container are determined based on the stop position of the doctor's operation on the container. This is used to control the container to move to the suction position. During the movement, the suction animation that the doctor wants to achieve is filled in real time in the display area between the container's location and the suction position. This animation could include movement, zooming in, zooming out, gradation, or a combination of several animations.

[0053] In this embodiment of the invention, when moving a target control within the display page of a mobile application, a container is constructed within the display page, and the target control is added to the container. The system monitors whether a touch event occurs in the display area where the container is located. If a touch event is detected, the position where the touch event occurs is determined as the initial position. Based on the initial position, the system monitors whether the touch event changes into a swipe event. If the touch event changes into a swipe event, the container is enabled to follow the swipe trajectory of the swipe event, and the position where the swipe event ends is determined as the stop position. Based on the stop position, the system determines the container's adsorption direction and adsorption position, controls the container to move to the adsorption position, and during the movement, a preset adsorption animation is filled in real-time within the display area between the container's current position and the adsorption position. By adding any target control from the displayed page into a newly constructed container, the container can move and snap to follow gestures. This allows for monitoring of touch and swipe events to determine if the container has moved. Once movement is confirmed, custom animation effects are achieved based on the container's stopping position and the determined snapping direction and position. This enriches the user experience, satisfies user experience design requirements, and improves the user experience.

[0054] In one embodiment, reference is made to Figure 3 This is a flowchart illustrating a method for controlling controls on a mobile application page according to Embodiment 2 of the present invention. Figure 3 As shown, in step S203, monitoring whether the touch event becomes a swipe event based on the initial position includes:

[0055] Step S301: After a preset time interval, monitor whether a touch event occurs in the display area where the container is located. If a touch event is detected in the display area where the container is located, determine the position where the touch event occurred as the current position.

[0056] Step S302: Calculate the distance between the current position and the initial position, and detect whether the distance is greater than or equal to a preset minimum sliding distance. If the distance is detected to be greater than or equal to the preset minimum sliding distance, then determine that the touch event becomes a sliding event.

[0057] For steps S301 and S302, the preset time interval can be 0.1 or 0.5 seconds, and is not required. The minimum sliding distance refers to the minimum distance the container moves within the preset time interval.

[0058] In this embodiment of the invention, if a user's finger does not leave the screen of the mobile application and moves the display area of ​​the container on the display page, it can be characterized that a sliding event has occurred in the container. Therefore, after a preset time interval, the pressure characteristics of the display area where the container is located are continuously acquired, and the display area where the container is located is monitored for touch events based on the pressure characteristics. If pressure characteristics are acquired in the display area where the container is located, it indicates that a touch event has occurred in the display area where the container is located. Conversely, if pressure characteristics are not acquired in the display area where the container is located, it indicates that no touch event has occurred in the display area where the container is located. If a touch event occurs in the display area where the container is located after a preset time interval, the position at which the touch event occurred is determined as the current position.

[0059] After confirming that the user's finger has not left the screen of the mobile application and re-determining the position of the container on the display page, the distance between the current position and the initial position of the container is calculated, and it is checked whether the distance is greater than or equal to the preset minimum swipe distance. If the distance is detected to be greater than or equal to the preset minimum swipe distance, it means that the user has performed a swipe operation on the container, and the touch event is determined to become a swipe event. Then, the swipe operation is marked as a swipe. Then, the current position is used as the initial position, and after the same time interval, it is checked again whether the touch event has become a swipe event.

[0060] It should be noted that the minimum sliding distance can be customized according to the implementer's needs or habits, and this invention does not require it.

[0061] In one embodiment, regarding step S203, after monitoring whether a touch event occurs in the display area where the container is located after a preset time interval, the process includes:

[0062] If no touch event is detected in the display area where the container is located, it is determined that the touch event has not been converted into a swipe event.

[0063] In this embodiment of the invention, if the detected distance is less than the preset minimum sliding distance, it means that the user only touches the container and does not perform a sliding operation on the container. Therefore, the touch event does not become a sliding event, thus keeping the container stationary.

[0064] In one embodiment, reference is made to Figure 4 This is a flowchart illustrating a method for controlling controls on a mobile application page, as provided in Embodiment 3 of the present invention. Figure 4 As shown, for step S204, determining the adsorption direction and adsorption position of the container based on the stop position includes:

[0065] Step S401: Taking the lower left corner of the mobile application's screen as the origin, obtain the horizontal coordinate value of the center of the screen of the mobile application and the horizontal coordinate value at the stop position, and calculate the horizontal coordinate difference between the horizontal coordinate value of the center of the screen and the horizontal coordinate value.

[0066] In this embodiment of the invention, after determining the stopping position of the container's sliding motion, a Cartesian coordinate system is constructed with the lower left corner of the mobile application's screen as the origin. This Cartesian coordinate system is then used to determine the vertical, horizontal, and vertical orientation of the mobile application's screen. Therefore, based on the constructed Cartesian coordinate system, the horizontal coordinate value of the center of the mobile application's screen and the horizontal coordinate value at the stopping position are obtained. The difference between the horizontal coordinate values ​​at the screen center and the stopping position is calculated. This difference is used to detect which direction the stopping position of the container is biased towards on the mobile application's screen, thereby determining the container's adsorption direction and position.

[0067] Step S402: When the difference in the horizontal coordinate is negative, the adsorption direction of the container is determined to be to the right, and the corresponding adsorption position is the right side of the screen of the mobile application.

[0068] In this embodiment of the invention, if a negative difference in the horizontal coordinate is detected, it indicates that the container's stopping position exceeds half of the mobile application's screen. Therefore, the container's adsorption direction is determined to be to the right, meaning that during the animation process, the container should move towards the right side of the mobile application's screen. Thus, the container's corresponding adsorption position is on the right side of the mobile application's screen. For example, based on the constructed Cartesian coordinate system, assuming the horizontal coordinate of the screen center is 5 and the horizontal coordinate of the container's stopping position is 8, it means the container's position is to the right of the screen center, leaning towards the right side of the mobile application's screen. Therefore, the container's adsorption direction can be determined to be to the right, and the corresponding adsorption position is on the right side of the mobile application's screen.

[0069] Step S403: When the difference in the horizontal coordinate is positive, the adsorption direction of the container is determined to be to the left, and the corresponding adsorption position is the left side of the screen of the mobile application.

[0070] Similarly, in this embodiment of the invention, if a positive difference in the horizontal coordinate is detected, it indicates that the container's stopping position is less than half the screen of the mobile application. Therefore, the container's adsorption direction is determined to be to the left. This means that during the animation process, the container should move towards the left side of the mobile application's screen. Thus, the corresponding adsorption position of the container is on the left side of the mobile application's screen. For example, based on the constructed Cartesian coordinate system, assuming the horizontal coordinate of the screen center is 5 and the horizontal coordinate of the container's stopping position is 3, it indicates that the container's position is to the left of the screen center, leaning towards the left side of the mobile application's screen. Therefore, the adsorption direction of the container can be determined to be to the left, and the corresponding adsorption position is on the left side of the mobile application's screen.

[0071] In one embodiment, reference is made to Figure 5 This is a flowchart illustrating a method for controlling the display page controls in a mobile application, as provided in Embodiment 4 of the present invention. Figure 5 As shown, for step S204, determining the adsorption direction and adsorption position of the container based on the stop position includes:

[0072] Step S501: Taking the lower left corner of the mobile application screen as the origin, obtain the vertical coordinate value of the screen center of the mobile application and the vertical coordinate value at the stop position, and calculate the vertical coordinate difference between the vertical coordinate value of the screen center and the vertical coordinate value.

[0073] In this embodiment of the invention, after determining the stopping position of the container's sliding motion, a Cartesian coordinate system is constructed with the lower left corner of the mobile application's screen as the origin. This Cartesian coordinate system is then used to determine the vertical, horizontal, and vertical orientation of the mobile application's screen. Therefore, based on the constructed Cartesian coordinate system, the vertical coordinate value of the center of the mobile application's screen and the vertical coordinate value at the stopping position are obtained. The difference between the vertical coordinate values ​​at the screen center and the stopping position is calculated. This difference is used to detect which direction the stopping position of the container is biased towards on the mobile application's screen, thereby determining the container's adsorption direction and position.

[0074] Step S502: When the difference in the vertical coordinate is negative, the adsorption direction of the container is determined to be upward, and the corresponding adsorption position is the top of the screen of the mobile application.

[0075] In this embodiment of the invention, if a negative difference in the vertical coordinate is detected, it indicates that the container's stopping position exceeds half of the mobile application's screen. Therefore, the container's adsorption direction is determined to be upwards, meaning that during the animation process, the container should move towards the top of the mobile application's screen. Thus, the container's corresponding adsorption position is at the top of the mobile application's screen. For example, based on the constructed Cartesian coordinate system, assuming the vertical coordinate of the screen center is 5 and the vertical coordinate of the container's stopping position is 8, it indicates that the container's position is above the screen center, biased towards the top of the mobile application's screen. Therefore, the container's adsorption direction can be determined to be upwards, and the corresponding adsorption position is at the top of the mobile application's screen.

[0076] Step S503: When the difference in the vertical coordinate is positive, the adsorption direction of the container is determined to be downward, and the corresponding adsorption position is the bottom of the screen of the mobile application.

[0077] Similarly, in this embodiment of the invention, if a positive difference in the vertical coordinate is detected, it indicates that the container's stopping position is less than half the screen of the mobile application. Therefore, the container's adsorption direction is determined to be downwards. This means that during the animation process, the container should move towards the bottom of the mobile application's screen. Thus, the corresponding adsorption position of the container is the bottom of the mobile application's screen. For example, based on the constructed Cartesian coordinate system, assuming the vertical coordinate of the screen center is 5 and the vertical coordinate of the container's stopping position is 3, it indicates that the container's position is below the screen center, biased towards the bottom of the mobile application's screen. Therefore, the container's adsorption direction can be determined to be downwards, and the corresponding adsorption position is the bottom of the mobile application's screen.

[0078] In one embodiment, in step S201, adding the target control to the container includes: adding the target control to the container using the structure of an XML file.

[0079] In this embodiment of the invention, XML layout is a method for presenting pages in the Android system. Various controls can be placed in different positions and wrapped within each other to be displayed on the page using the structure of an XML file. Therefore, the target controls are added to the container using the structure of an XML file.

[0080] In one embodiment, in step S201, adding the target control to the container includes: copying the target control from the display page and adding the target control to the container.

[0081] In this embodiment of the invention, unlike the XML layout method, the target control is added to the constructed container by dynamically adding controls. Specifically, the container's addView method can be used in the logic code to copy and add the target control already displayed on the page into the container. It is worth noting that the layout parameters (LayoutParams) of the target control are copied to the container, and then the addView method is called using the original container of the target control to add it to the constructed container, thereby ensuring that the size of the target view does not change after this operation.

[0082] Corresponding to the control method in the above embodiment, Figure 6 This diagram illustrates a structural block diagram of a control device for displaying a page in a mobile application, according to Embodiment 5 of the present invention. The control device is applied to... Figure 1 The client, a computer device corresponding to the client, connects to the server to obtain relevant background data, such as a target control within the display interface of a mobile application, for moving and controlling the target control to achieve custom animation effects. For ease of explanation, only the parts relevant to the embodiments of the present invention are shown.

[0083] See Figure 6 The control device includes:

[0084] The container building module 61 is used to build a container in the display page and add the target control in the container when a target control is moved within the display page of a mobile application.

[0085] The first detection module 62 is used to monitor whether a touch event occurs in the display area where the container is located. If a touch event is detected in the display area where the container is located, the position where the touch event occurs is determined as the initial position.

[0086] The second detection module 63 is used to monitor whether the touch event changes into a swipe event based on the initial position. If the touch event changes into a swipe event, the container is enabled to follow the swipe trajectory of the swipe event, and the position where the swipe event ends is determined as the stop position.

[0087] The movement control module 64 is used to determine the adsorption direction and adsorption position of the container according to the stop position, control the container to move to the adsorption position, and fill the display area between the container's location and the adsorption position in real time during the movement.

[0088] Optionally, the second detection module 63 includes:

[0089] A position detection unit is used to monitor whether a touch event occurs in the display area where the container is located after a preset time interval. If a touch event is detected in the display area where the container is located, the position at the time of the touch event is determined as the current position.

[0090] The distance determination unit is used to calculate the distance between the current position and the initial position, detect whether the distance is greater than or equal to a preset minimum sliding distance, and if the distance is detected to be greater than or equal to the preset minimum sliding distance, determine that the touch event becomes a sliding event.

[0091] Optionally, the position detection unit includes:

[0092] The detection subunit is used to monitor whether a touch event occurs in the display area where the container is located after a preset time interval. If no touch event is detected in the display area where the container is located, the detection subunit determines that the touch event has not turned into a swipe event.

[0093] Optionally, the motion control module 64 includes:

[0094] The first calculation unit is used to obtain the horizontal coordinate value of the center of the screen of the mobile application and the horizontal coordinate value at the stop position, with the lower left corner of the screen of the mobile application as the origin, and calculate the horizontal coordinate difference between the horizontal coordinate value of the center of the screen and the horizontal coordinate value.

[0095] The first evaluation unit is used to determine that the adsorption direction of the container is to the right when the difference of the horizontal coordinate is negative, and the corresponding adsorption position is the right side of the screen of the mobile application.

[0096] The second evaluation unit is used to determine that the adsorption direction of the container is to the left when the difference in the horizontal coordinate is positive, and the corresponding adsorption position is the left side of the screen of the mobile application.

[0097] Optionally, the motion control module 64 includes:

[0098] The second calculation unit is used to obtain the vertical coordinate value of the screen center of the mobile application and the vertical coordinate value at the stop position, with the lower left corner of the screen of the mobile application as the origin, and calculate the vertical coordinate difference between the vertical coordinate value of the screen center and the vertical coordinate value.

[0099] The third evaluation unit is used to determine that the adsorption direction of the container is upward and the corresponding adsorption position is the top of the screen of the mobile application when the difference of the vertical coordinate is negative.

[0100] The fourth evaluation unit is used to determine that the adsorption direction of the container is downward and the corresponding adsorption position is the bottom of the screen of the mobile application when the difference in the vertical coordinate is positive.

[0101] Optionally, container building module 61 includes:

[0102] The first adding unit is used to add the target control to the container using the structure of an XML file.

[0103] Optionally, container building module 61 includes:

[0104] The second adding unit is used to copy the target control in the display page and add the target control to the container.

[0105] It should be noted that the information interaction and execution process between the above modules, units, and sub-units are based on the same concept as the method embodiments of the present invention. For details on their specific functions and technical effects, please refer to the method embodiments section, which will not be repeated here.

[0106] Figure 7 This is a schematic diagram of the structure of a computer device provided in Embodiment Six of the present invention. Figure 7 As shown, the computer device of this embodiment includes: at least one processor ( Figure 7 Only one is shown in the diagram), a memory, and a computer program stored in the memory and capable of running on at least one processor, which, when executing the computer program, implements the steps in any of the above-described control method embodiments.

[0107] This computer device may include, but is not limited to, a processor and memory. Those skilled in the art will understand that... Figure 7 The examples of computer devices are merely examples and do not constitute a limitation on computer devices. Computer devices may include more or fewer components than shown in the illustration, or combinations of certain components, or different components, such as network interfaces, displays, and input devices.

[0108] The processor referred to can be a CPU, but it can also be other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor can be a microprocessor or any conventional processor.

[0109] Memory includes readable storage media, internal memory, etc., wherein internal memory can be the RAM of a computer device, providing an environment for the operation of the operating system and computer-readable instructions stored in the readable storage media. The readable storage media can be the hard drive of a computer device, or in other embodiments, it can be an external storage device of the computer device, such as a plug-in hard drive, Smart Media Card (SMC), Secure Digital (SD) card, or Flash Card. Furthermore, memory can include both internal storage units and external storage devices of a computer device. Memory is used to store the operating system, applications, bootloader, data, and other programs, such as program code for computer programs. Memory can also be used to temporarily store data that has been output or will be output.

[0110] Those skilled in the art will understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is used as an example. In practical applications, the functions described above can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiments can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit. Furthermore, the specific names of the functional units and modules are only for easy differentiation and are not intended to limit the scope of protection of this invention. The specific working process of the units and modules in the above device can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here. If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present invention can implement all or part of the processes in the methods of the above embodiments by instructing related hardware through a computer program. The computer program can be stored in a computer-readable storage medium, and when executed by a processor, it can implement the steps of the above method embodiments. The computer program includes computer program code, which can be in the form of source code, object code, executable files, or certain intermediate forms. A computer-readable medium can include at least: any entity or device capable of carrying computer program code, a recording medium, a computer memory, read-only memory (ROM), random access memory (RAM), electrical carrier signals, telecommunication signals, and software distribution media. Examples include USB flash drives, portable hard drives, magnetic disks, or optical disks. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electrical carrier signals or telecommunication signals.

[0111] The present invention can implement all or part of the processes in the methods of the above embodiments, or it can be accomplished by a computer program product. When the computer program product is run on a computer device, the computer device executes the steps in the above method embodiments.

[0112] In the above embodiments, the descriptions of each embodiment have different focuses. For parts that are not described in detail or recorded in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0113] Those skilled in the art will recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementations should not be considered beyond the scope of this invention.

[0114] In the embodiments provided by this invention, it should be understood that the disclosed apparatus / computer devices and methods can be implemented in other ways. For example, the apparatus / computer device embodiments described above are merely illustrative. For instance, the division of modules or units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the mutual coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0115] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0116] The above embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included within the protection scope of the present invention.

Claims

1. A method for controlling the display of a page in a mobile application, characterized in that, The control method includes: When a target control is moved within the display page of a mobile application, a container is constructed within the display page, and the target control is added to the container. Monitor whether a touch event occurs in the display area where the container is located. If a touch event is detected in the display area where the container is located, determine the position where the touch event occurs as the initial position. Based on the initial position, monitor whether the touch event changes into a swipe event. If the touch event changes into a swipe event, enable the container to follow the swipe trajectory of the swipe event and determine the position where the swipe event ends as the stop position. Based on the stop position, the adsorption direction and adsorption position of the container are determined, and the container is controlled to move to the adsorption position. During the movement, a preset adsorption animation is filled in real time within the display area between the container's location and the adsorption position.

2. The control method according to claim 1, characterized in that, The step of monitoring whether the touch event changes into a swipe event based on the initial position includes: After a preset time interval, monitor whether a touch event occurs in the display area where the container is located. If a touch event is detected in the display area where the container is located, determine the position where the touch event occurred as the current position. Calculate the distance between the current position and the initial position, and detect whether the distance is greater than or equal to a preset minimum sliding distance. If the distance is detected to be greater than or equal to the preset minimum sliding distance, then determine that the touch event becomes a sliding event.

3. The control method according to claim 2, characterized in that, After monitoring whether a touch event occurs in the display area where the container is located after a preset time interval, the process includes: If no touch event is detected in the display area where the container is located, it is determined that the touch event has not been converted into a swipe event.

4. The control method according to claim 1, characterized in that, Determining the adsorption direction and adsorption position of the container based on the stop position includes: Using the bottom left corner of the mobile application's screen as the origin, obtain the horizontal coordinate value of the center of the screen and the horizontal coordinate value at the stop position, and calculate the horizontal coordinate difference between the horizontal coordinate value of the center of the screen and the horizontal coordinate value. When the difference in the horizontal coordinate is negative, the adsorption direction of the container is determined to be to the right, and the corresponding adsorption position is the right side of the screen of the mobile application. When the difference in the horizontal coordinate is positive, the adsorption direction of the container is determined to be to the left, and the corresponding adsorption position is the left side of the screen of the mobile application.

5. The control method according to claim 1, characterized in that, Determining the adsorption direction and adsorption position of the container based on the stop position includes: Taking the bottom left corner of the mobile application's screen as the origin, obtain the vertical coordinate value of the center of the screen and the vertical coordinate value at the stop position, and calculate the vertical coordinate difference between the vertical coordinate value of the center of the screen and the vertical coordinate value. When the difference in the vertical coordinate is negative, the adsorption direction of the container is determined to be upward, and the corresponding adsorption position is the top of the screen of the mobile application. When the difference in the vertical coordinate is positive, the adsorption direction of the container is determined to be downward, and the corresponding adsorption position is the bottom of the screen of the mobile application.

6. The control method according to claim 1, characterized in that, Adding the target control to the container includes: The target control is added to the container using the structure of an XML file.

7. The control method according to claim 1, characterized in that, Adding the target control to the container includes: Copy the target control from the display page and add the target control to the container.

8. A control device for displaying a page in a mobile application, characterized in that, The control device includes: A container building module is used to build a container within a display page of a mobile application and add the target control within the container when a target control is moved within the display page. The first detection module is used to monitor whether a touch event occurs in the display area where the container is located. If a touch event is detected in the display area where the container is located, the position where the touch event occurs is determined as the initial position. The second detection module is used to monitor whether the touch event changes into a swipe event based on the initial position. If the touch event changes into a swipe event, the container is enabled to follow the swipe trajectory of the swipe event, and the position where the swipe event ends is determined as the stop position. The movement control module is used to determine the adsorption direction and adsorption position of the container based on the stop position, control the container to move to the adsorption position, and fill the display area between the container's location and the adsorption position in real time during the movement.

9. A computer device, characterized in that, The computer device includes a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the control method as described in any one of claims 1 to 7.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the control method as described in any one of claims 1 to 7.

Images