Card position adjusting method, device and equipment

Abstract

The invention provides a card position adjusting method, device and equipment and a readable storage medium, the method is applied to the technical field of terminals, and the method comprises the steps that in the process of adjusting the position of a card, when a touch operation of a user on the card is received, a card view of the card of a first size is displayed in a user interface, and if the dragging operation of the user on the card view is received, controlling the size of the card view to gradually change from the first size to the second size, adjusting the position of the card view according to the real-time position of the dragging operation, and then updating the position of the card according to the ending position of the dragging operation when the dragging operation is ended. According to the method provided by the invention, the size of the card view gradually changes from the first size to the second size in the process of converting from touching the card to dragging the card by the user, and the size change process of the card view is relatively smooth, so that the condition of flickering can be avoided, and the user experience can be improved.

Description

Technical Field

[0001] The present application relates to the field of terminal technology, and more specifically, to a card position adjustment method, device, equipment and readable storage medium in the field of terminal technology. Background Art

[0002] A widget is a quick access point for applications or services displayed on the user interface (UI). It not only enables users to quickly open and use applications or services, but also displays the latest information of applications or services, such as weather forecasts, schedule reminders, etc., so that users can get the required content without opening the application.

[0003] In actual applications, the user may need to adjust the position of the card in the user interface. During the process of adjusting the position of the card, the card may flicker. Summary of the invention

[0004] The present application provides a card position adjustment method, device, equipment and readable storage medium, which can solve the flickering problem that occurs during the card position adjustment process.

[0005] In a first aspect, a card position adjustment method is provided, the method comprising:

[0006] When a touch operation on a card is received, displaying a card view of the card of a first size;

[0007] If a drag operation is received on the card view, the size of the card view is controlled to gradually change from the first size to a second size, and the position of the card view is adjusted according to the real-time position of the drag operation; wherein the second size is different from the first size;

[0008] When the dragging operation ends, the position of the card is updated according to the end position of the dragging operation.

[0009] In an embodiment of the present application, in the process of adjusting the position of a card, when a user touches a card, a card view of a card of a first size is displayed in the user interface, and then if a user drags the card view, the size of the card view is controlled to gradually change from the first size to the second size, and the position of the card view is adjusted according to the real-time position of the drag operation, and then the position of the card is updated according to the end position of the drag operation at the end of the drag operation. In this way, in the process of switching from the user touching the card to dragging the card, the size of the card view gradually changes from the first size to the second size. Compared with the method of directly changing from the first size to the second size, the size change process of the card view is smoother, flickering can be avoided, and the user experience can be improved.

[0010] Optionally, the card view that displays the card of the first size includes: determining the second relative position of the touch point of the touch operation in the card view of the first size based on the first relative position and the first size; wherein the first relative position is the relative position of the touch point of the touch operation in the card; determining the display area of ​​the card view of the first size based on the touch point and the second relative position; and displaying the card view of the first size in the display area.

[0011] In an embodiment of the present application, after the user touches the card, the original view of the card is reduced with the touch point of the touch operation as the reference point to obtain a card view of the first size, which can reduce the degree of jumping phenomenon in the card view and thus improve the user experience.

[0012] Optionally, controlling the size of the card view to gradually change from the first size to the second size includes: determining a size gradient speed of the card view; and controlling the size of the card view to gradually change from the first size to the second size at the size gradient speed.

[0013] In the embodiment of the present application, the size of the card view is controlled to gradually change from the first size to the second size at a gradual size change speed, so that the size of the card view can be smoothly gradually changed to the second size, thereby making the size change of the card view smoother.

[0014] Optionally, determining the size gradient speed of the card view includes: determining a size difference between the first size and the second size; determining the size gradient speed according to the size difference and a gradient duration; or, determining the size gradient speed according to a drag speed of the drag operation; wherein the drag speed is positively correlated with the size gradient speed.

[0015] In the embodiment of the present application, the size gradient speed is determined according to the size difference between the first size and the second size, so that the size gradient speed is related to the size of the card view, which can reduce the discomfort caused by the size change to the user. The size gradient speed is determined according to the dragging speed of the drag operation, so that the size change of the card view can be matched with the user operation, thereby improving the user experience.

[0016] Optionally, before determining the size gradient speed according to the size difference and the gradient duration, the method further includes: determining a touch duration of the touch operation; determining the gradient duration according to the touch duration; wherein the gradient duration is positively correlated with the touch duration.

[0017] In an embodiment of the present application, the gradient duration is determined according to the touch duration, and the touch duration is set to be positively correlated with the gradient duration, so that the user can set the gradient duration through the touch duration, so that the size change speed of the card view can be associated with the user's touch operation, thereby improving the user experience.

[0018] Optionally, controlling the size of the card view to gradually change from the first size to the second size at the size gradient speed includes: determining a touch point of the touch operation on the card; and using the touch point as a reference point, controlling the size of the card view to gradually change from the first size to the second size at the size gradient speed.

[0019] In an embodiment of the present application, when the user drags the card view, the card view is expanded with the touch point of the touch operation as the reference point to obtain a card view of a second size, which can reduce the degree of jumping phenomenon in the card view and thus improve the user experience.

[0020] Optionally, the card view that displays the card of the first size includes: determining the first size according to the touch duration of the touch operation; wherein the first size is negatively correlated with the touch duration; and displaying the card view of the card of the first size.

[0021] In an embodiment of the present application, setting the first size is negatively correlated with the touch duration, so that the user can set the first size by the duration of the touch operation, thereby controlling the size of the card view, which can facilitate the user to flexibly adjust the size of the card view.

[0022] Optionally, before controlling the size of the card view to gradually change from the first size to the second size, the method further includes: determining a touch duration of the touch operation; determining the second size based on the touch duration; wherein the second size is positively correlated with the touch duration.

[0023] In an embodiment of the present application, setting the second size is positively correlated with the touch duration, so that the user can set the second size by the duration of the touch operation, thereby controlling the size of the card view, which can facilitate the user to flexibly adjust the size of the card view.

[0024] In a second aspect, a device for adjusting a card position is provided, the device comprising:

[0025] A display module, configured to display a card view of the card of a first size when a touch operation on the card is received;

[0026] a control module, configured to control the size of the card view to gradually change from the first size to a second size if a drag operation is received on the card view, and adjust the position of the card view according to the real-time position of the drag operation; wherein the second size is different from the first size;

[0027] The updating module is used to update the position of the card according to the end position of the dragging operation when the dragging operation ends.

[0028] In a third aspect, an electronic device is provided, comprising a memory for storing executable program code; and a processor for calling and running the executable program code from the memory, so that the electronic device executes a method in any possible implementation of the first aspect.

[0029] In a fourth aspect, an electronic device program product is provided, the electronic device program product comprising: an executable program code, when the executable program code is run on an electronic device, the electronic device executes the method in any possible implementation manner of the above-mentioned first aspect.

[0030] In a fifth aspect, a readable storage medium is provided, which stores an executable program code. When the executable program code runs on an electronic device, the electronic device executes the method in any possible implementation of the first aspect. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] Figure 1 A schematic diagram showing a change of a card view in the related art is shown;

[0032] Figure 2 is a flowchart of a card position adjustment method provided in an embodiment of the present application;

[0033] Figure 3 A schematic diagram showing a change of a card view provided in an embodiment of the present application is shown;

[0034] Figure 4 A schematic diagram showing a change of a card view provided in an embodiment of the present application is shown;

[0035] Figure 5 is a structural schematic diagram of a card position adjustment device provided in an embodiment of the present application;

[0036] Figure 6 It is a structural schematic diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0037] The technical solution in the present application will be described clearly and in detail below in conjunction with the accompanying drawings. In the description of the embodiments of the present application, unless otherwise specified, " / " means or, for example, A / B can mean A or B: "and / or" in the text is only a description of the association relationship of associated objects, indicating that there can be three relationships, for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, in the description of the embodiments of the present application, "multiple" means two or more than two.

[0038] In the following, the terms "first" and "second" are used for descriptive purposes only and are not to be understood as suggesting or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features.

[0039] Cards are quick access portals to applications or services displayed on the user interface (UI). They not only allow users to quickly open and use applications or services, but also display the latest information of applications or services, such as weather forecasts, schedule reminders, etc., so that users can get the required content without opening the application.

[0040] In order to meet the different needs of users, electronic devices usually support users to manually adjust the position of cards in the user interface. When adjusting the position of a card, the usual practice is for the user to touch the selected card first, and then drag it, and the electronic device resets the position of the card according to the end position of the dragging operation. In order to present the different states of the card during the position adjustment process, the card view of the card is usually displayed in different sizes to present the different states of the card through card views of different sizes. For example, when the user selects a card, the card view of the card is reduced to display a smaller card view to present the selected state of the card, and when the user drags the card, the card view of the card is enlarged to display a larger card view to present the dragged state of the card.

[0041] See also Figure 1 , Figure 1 A schematic diagram of a card view change in the related art is shown. A user interface 10 is displayed on the screen of an electronic device, and the user interface 10 includes a card library 11, and the card library 11 includes at least one card. When the user needs to move a card 12 out of the card library 11 and put it in another position of the user interface 10, the user first touches the card 12. When the electronic device receives the touch operation, the card view 13 of the card 12 is displayed. At this time, the size of the card view 13 (hereinafter referred to as the first size) is smaller than the actual size of the card. The first size can be, for example, 0.9 times the actual size.

[0042] After displaying the card view 13 of the first size, if the user drags the card view 13, the electronic device will expand the size of the card view 13. The size of the expanded card view 13 (hereinafter referred to as the second size) is larger than the actual size of the card 12. The second size can be, for example, 1.2 times the actual size. Figure 1 As shown, after the user drags the card view 13 out of the card library 11 along the direction 15, the size of the card view 13 is larger than the size of the card view 13 when the user touches the card. In this process, when the user quickly drags the card view 13, the size of the card view 13 quickly changes from 0.9 times to 1.2 times, which may cause the card view 13 to flicker, affecting the user's experience.

[0043] In order to solve the above technical problems, an embodiment of the present application provides a card position adjustment method, in which when the electronic device receives a touch operation on a card from a user, a card view of a card of a first size is displayed in a user interface, and then if a drag operation on the card view is received from the user, the size of the card view is controlled to gradually change from the first size to the second size, and the position of the card view is adjusted according to the real-time position of the drag operation, and then the position of the card is updated according to the end position of the drag operation at the end of the drag operation. In this way, in the process of transitioning from the user touching the card to dragging the card, the size of the card view gradually changes from the first size to the second size. Compared with the method of directly changing from the first size to the second size, the size change process of the card view is smoother, flickering can be avoided, and the user experience is improved.

[0044] It should be noted that in the method provided in the embodiment of the present application, the first size can be smaller than the actual size of the card, can be larger than the actual size of the card, and of course can be equal to the actual size of the card. The second size can be smaller than the actual size of the card, can be larger than the actual size of the card, and of course can be equal to the actual size of the card, as long as the first size and the second size are different.

[0045] Among them, the electronic device provided in the embodiment of the present application can be a mobile phone, a tablet computer, a computer, and various terminal devices, such as a host unit terminal (HUT) set in a vehicle, but is not limited to this.

[0046] See also Figure 2 , Figure 2 is a flowchart of a card position adjustment method provided by an embodiment of the present application. The execution subject of the method may be an electronic device, such as Figure 1 As shown, the method includes the following steps 201 and 202.

[0047] Step 201: When a touch operation on a card is received, a card view of a card of a first size is displayed.

[0048] Step 202: If a drag operation is received on the card view, the size of the card view is controlled to gradually change from a first size to a second size, and the position of the card view is adjusted according to the real-time position of the drag operation.

[0049] A card is any card displayed in a user interface. A card view refers to a card view displayed in a user interface by an electronic device based on elements such as the shape, background, color, and information in the card during the process of adjusting the position of the card. The real-time position of a drag operation refers to the position where the drag operation contacts the user interface.

[0050] Exemplarily, the first size is smaller than the actual size of the card, and the second size is larger than the actual size of the card. In the process of adjusting the position of the card in the user interface, when the electronic device receives a touch operation on the card by the user, it first displays a card view of the first size. In the process of converting the touch operation to the drag operation, the electronic device can continuously display multiple card views, and the sizes of the multiple card views displayed continuously are gradually increased from the first size to the second size.

[0051] See also Figure 3 , Figure 3 A schematic diagram of a card view change provided by an embodiment of the present application is shown. A card library 31 is displayed in the user interface 30, and a card 32 is displayed in the card library 31. When the user needs to move the card 32 from the card library 31 to another position in the user interface 30, the user can first perform a touch operation on the card 32, and the touch point is located at position 34. When receiving the user's touch operation on the card 32, the electronic device responds to the user's touch operation and displays a card view 33 of the first size.

[0052] After displaying the card view 33 of the first size, when the user drags the card view (i.e., the card) along direction 35 and performs a drag operation on the card view 33 from position 34 to position 36, the electronic device can continuously display multiple card views 33, and the sizes of the multiple card views 33 gradually increase from the first size to the second size. When dragged to position 36, the size of the card view 33 reaches the second size.

[0053] Before displaying the card view of the first size, the card 32 displayed in the user interface 30 is the original view of the card 32, that is, the view of the card 32 displayed in the user interface 30 before the user touches the card 32, and the size of the original view is the actual size of the card. When displaying the card view of the first size, the electronic device can stop displaying the original view.

[0054] It should be noted that Figure 3In order to facilitate the display of the size change of the card view, multiple card views are displayed. Those skilled in the art should understand that at the same time, the electronic device only displays a card view of one size. For example, N consecutive sizes can be preset, the first size of the N sizes is larger than the first size, the last size is the second size, and the N sizes gradually increase from the first size to the last size. In the process of controlling the size of the card view 33 to gradually change from the first size to the second size, N card views of N sizes can be displayed continuously, and the sizes of the N card views gradually increase from small to large to the second size. For another example, a size increment can be preset. In the process of dragging the card view, the real-time position of the dragging operation moves M pixels horizontally and / or M pixels vertically every time, the size of the card view is controlled to increase by a size increment. After continuously moving multiple pixels, a card view of the second size can be obtained. It should be understood that the above is only an exemplary example, and the specific method of controlling the size of the card view to gradually change from the first size to the second size may include but is not limited to the above example.

[0055] In this embodiment, during the process of dragging the card view, the electronic device can also adjust the position of the card view in the user interface according to the real-time position of the drag operation. Figure 3 As shown, during the process of dragging the card view 33, the real-time position of the dragging operation moves from position 34 along direction 35 to position 36, and then moves from position 36 along direction 37 to position 38. The electronic device controls the touch point of the touch operation on the card view to be consistent with the real-time position of the dragging operation, so that the card view moves in the user interface together with the touch point.

[0056] Step 203: When the dragging operation ends, update the position of the card according to the end position of the dragging operation.

[0057] The end position refers to the position where the dragging operation contacts the user interface when the dragging operation ends.

[0058] In this embodiment, during the dragging of the card view, the electronic device can search for a location area in the user interface where the card can be placed based on the location of the touch point in the user interface. When the dragging operation ends, the electronic device uses the location area searched at the end of the dragging operation as the final location of the card. Figure 3As shown, the user interface can be divided into a series of fixed-size grid units. During the process of dragging the card view 33, the touch point moves from position 34 along direction 35 to position 36, and then moves from position 36 along direction 37 to position 38. When moving to position 36, the electronic device can search for multiple free grid units around position 36 where the card can be placed. When moving to position 38, the electronic device can search for multiple free grid units around position 38 where the card can be placed. When the end position of the drag operation is position 38, the multiple free grid units searched around position 38 can be used as the new position of the card 32, and the position information of the card 32 recorded in the system is updated. In the process of displaying the card 32 later, the view of the card 32 is displayed at the new position.

[0059] In the process of searching for free grid units, the electronic device can follow the alignment principle, search for multiple grid units that can correspond to other elements in the user interface, and can also perform collision detection to avoid collisions with other elements in the user interface when the card is placed in multiple free grid units. It should be understood that the method for updating the position of the card according to the end position of the drag operation can be specifically set according to needs, and this embodiment does not limit this.

[0060] In an embodiment of the present application, in the process of adjusting the position of a card, when a user touches a card, a card view of a card of a first size is displayed in the user interface, and then if a user drags the card view, the size of the card view is controlled to gradually change from the first size to the second size, and the position of the card view is adjusted according to the real-time position of the drag operation, and then the position of the card is updated according to the end position of the drag operation at the end of the drag operation. In this way, in the process of switching from the user touching the card to dragging the card, the size of the card view gradually changes from the first size to the second size. Compared with the method of directly changing from the first size to the second size, the size change process of the card view is smoother, flickering can be avoided, and the user experience can be improved.

[0061] Optionally, a card view that displays a card of a first size includes:

[0062] Based on the first relative position and the first size, determining a second relative position of the touch point of the touch operation in the card view of the first size; wherein the first relative position is the relative position of the touch point of the touch operation in the card;

[0063] Determine a display area of ​​a card view of a first size based on the touch point and the second relative position;

[0064] Displays the first-sized card view in the display area.

[0065] In one embodiment, the first relative position may be the relative position between the touch point and the first reference point in the original view of the card, and the second relative position may be the relative position between the touch point and the second reference point in the card view of the first size, and the first reference point and the second reference point are the same reference point. For example, the first reference point may be the upper left corner vertex of the original view, and the second reference point may be the upper left corner vertex of the card view of the first size. Of course, the first reference point and the second reference point may also be the lower left corner vertex, the center point, and the lower right corner vertex, etc., but are not limited thereto.

[0066] like Figure 4 As shown, Figure 4 A schematic diagram of a card view change provided by an embodiment of the present application is shown. When the user touches the card 32, the touch point is located at position 34, the first reference point is located at position 40, and the second reference point is located at position 39. When the first reference point is the upper left corner vertex, the first relative position may include a first relative distance L1 between the touch point and the first reference point in the horizontal direction, and a second relative distance H1 in the vertical direction. The second relative position may include a third relative distance L2 between the touch point and the second reference point in the horizontal direction, and a fourth relative distance H2 in the vertical direction.

[0067] In the process of determining the second relative position based on the first relative position and the first size, the first relative distance L1 and the second relative distance H1 can be determined based on the coordinates of the first reference point and the touch point in the user interface. Then, based on the size ratio between the first size and the actual size (for example, the first size is 0.9 times the actual size), the third relative distance L2 can be determined to be 0.9 times the first relative distance L1, and the fourth relative distance H2 can be determined to be 0.9 times the second relative distance H1. After determining the third relative distance L2 and the fourth relative distance H2, the coordinates of the position 39 where the second reference point is located can be determined based on the coordinates of the position 34 where the touch point is located, the third relative distance L2 and the fourth relative distance H2. Further, according to the coordinates of the position 39 and the first size, it can be determined that the display area is an area with the position 39 as the origin, extending 0.9 times the actual size to the right in the horizontal direction, and extending 0.9 times the actual size downward in the horizontal direction. After that, a card view of the first size can be displayed in the display area.

[0068] In another embodiment, the first relative position may be the relative position between the touch point and the view edge of the original view of the card, and the second relative position may be the relative position between the touch point and the view edge in the card view of the first size. Figure 4As shown, in the process of determining the second relative position based on the first relative position and the first size, based on the coordinates of the touch point and the left view edge of the original view, the relative distance between the touch point and the left view edge of the original view can be determined. Similarly, the relative distance between the touch point and the top view edge of the original view can be determined, the relative distance between the touch point and the right view edge of the original view can be determined, and the relative distance between the touch point and the bottom view edge of the original view can be determined.

[0069] Then, based on the size ratio between the first size and the actual size, and the relative distance between the touch point and the left view edge of the original view, the relative distance between the touch point and the left view edge of the card view of the first size can be determined. For example, when the size ratio is 0.9 times and the relative distance between the touch point and the left view edge of the original view is X, the relative distance between the touch point and the left view edge of the card view of the first size is 0.9X. Similarly, the relative distance between the touch point and the top view edge of the card view of the first size can be determined, the relative distance between the touch point and the bottom view edge of the card view of the first size can be determined, and the relative distance between the touch point and the right view edge of the card view of the first size can be determined.

[0070] Afterwards, based on the coordinates of the touch point and the relative distance between the touch point and the left view edge of the card view of the first size, the position of the left view edge of the card view of the first size can be determined. Similarly, based on the coordinates of the touch point and the relative distance between the touch point and the top view edge of the card view of the first size, the position of the top view edge of the card view of the first size can be determined; based on the coordinates of the touch point and the relative distance between the touch point and the right view edge of the card view of the first size, the position of the right view edge of the card view of the first size can be determined, and based on the coordinates of the touch point and the relative distance between the touch point and the bottom view edge of the card view of the first size, the position of the bottom view edge of the card view of the first size can be determined.

[0071] Finally, based on the positions of the left view edge, right view edge, top view edge, and bottom view edge of the first-sized card view, it can be determined that the area enclosed by the left view edge, right view edge, top view edge, and bottom view edge is the display area where the first-sized card view is located, and the first-sized card view is displayed in the display area.

[0072] In the related art, when displaying a card view of a first size, the card view of the first size is displayed with the touch point as the center point of the card view, so that the center point of the card view moves toward the touch point and coincides with the touch point. Figure 1As shown, when the user touches card 12, the touch point is located at position 14. After detecting the user's touch point, the electronic device will use the touch point at position 14 as the center point of the card view and display the card view. At this time, the center point of the card view coincides with the touch point. In this process, the center point of the original view of the card is first located at position 17. After the size is changed to the first size, the center point of the card view quickly moves from position 17 to position 14 to coincide with the touch point, which will cause the card to have a jumping phenomenon, affecting the user experience.

[0073] In the embodiment of the present application, after the user touches the card, the original view of the card is reduced based on the touch point of the touch operation as the reference point to obtain a card view of the first size, which can reduce the degree of jump phenomenon in the card view, thereby improving the user experience. Figure 4 As shown, before the card view of the first size is displayed, the center point of the card is located at position 41, the touch point is located at position 34, and the touch point is located at the lower right corner of the center point. After the card view of the first size is displayed 33, the touch point is still located at the lower right corner of the center point, and the center point does not overlap with the touch point, which reduces the moving distance of the center point, thereby reducing the degree of jumping phenomenon and improving user experience.

[0074] Optionally, controlling the size of the card view to gradually change from a first size to a second size includes:

[0075] Determine the card view's size gradient speed;

[0076] Controls the size of the card view to gradually change from the first size to the second size at a gradual speed.

[0077] In one embodiment, the size gradient speed may be a preset size gradient speed. In the process of controlling the size of the card view to gradually change from the first size to the second size, the size of the card view may be controlled to gradually increase at the preset size gradient speed until it increases to the second size. For example, the size gradient speed may be preset to 10 pixels per 100 milliseconds, that is, the length and width of the card view may be controlled to increase by 10 pixels every 100 milliseconds. In the process of controlling the size of the card view to gradually change from the first size to the second size, the length and width of the card view may be controlled to increase by 10 pixels every 100 milliseconds. After a certain period of time, the size of the card view may be gradually increased from the first size to the second size.

[0078] like Figure 4 As shown, when the size of the card view is increased with the touch point as the reference point, the length of the card view can be controlled to increase by 10 pixels per millisecond along direction 391 until the length of the card view of the first size is reached, and the width of the card view can be controlled to increase by 10 pixels per millisecond along direction 392 until the width of the card view of the first size is reached.

[0079] In the embodiment of the present application, the size of the card view is controlled to gradually change from the first size to the second size at a gradual size change speed, so that the size of the card view can be smoothly gradually changed to the second size, thereby making the size change of the card view smoother.

[0080] Optionally, determine the card view's resize gradient speed, including:

[0081] Determine a size difference between the first size and the second size; determine a size gradient speed according to the size difference and a gradient duration;

[0082] Alternatively, the size gradient speed is determined according to the dragging speed of the dragging operation; wherein the dragging speed is positively correlated with the size gradient speed.

[0083] In one embodiment, the gradient duration may be a preset gradient duration, and in the process of determining the size gradient speed, the size difference between the first size and the second size may be calculated first, and then the size gradient speed may be determined based on the ratio of the size difference to the gradient duration. For example, the length difference between the length of the card view of the first size and the length of the card view of the second size may be calculated, and then the length difference may be divided by the gradient duration to obtain the size gradient speed in the length direction. Similarly, the width difference between the width of the card view of the first size and the width of the card view of the second size may be calculated, and then the width difference may be divided by the gradient duration to obtain the size gradient speed in the width direction.

[0084] In the process of controlling the size of the card view from a first size to a second size, in the length direction, the length of the card view is controlled to gradually change from the length of the card view of the first size to the length of the card view of the second size at a size gradient speed in the length direction, and in the width direction, the width of the card view is controlled to gradually change from the width of the card view of the first size to the width of the card view of the second size at a size gradient speed in the width direction.

[0085] In another embodiment, the drag speed can be set to be positively correlated with the size gradient speed, and the size gradient speed is determined according to the drag speed of the drag operation. Exemplarily, when the user converts the touch operation into the drag operation, the pixel change amount of the real-time position of the drag operation within 100 milliseconds after the start of the drag operation can be monitored, and the pixel change amount can be used as the drag speed of the drag operation, and the pixel change amount can be used as the size gradient speed. For example, if it is monitored that the real-time position moves by 80 pixels within 100 milliseconds after the start of the drag operation, the size gradient speed can be determined to be 80 pixels per 100 milliseconds, and then the electronic device can control the length of the card view to increase by 80 pixels every 100 milliseconds, and control the width of the card view to increase by 80 pixels every 100 milliseconds, until the size of the card view reaches the second size.

[0086] In the embodiment of the present application, the size gradient speed is determined according to the size difference between the first size and the second size, so that the size gradient speed is related to the size of the card view, which can reduce the discomfort caused by the size change to the user. The size gradient speed is determined according to the dragging speed of the drag operation, so that the size change of the card view can be matched with the user operation, thereby improving the user experience.

[0087] Optionally, controlling the size of the card view to gradually change from a first size to a second size at a gradual size change speed includes:

[0088] Determine the touch point of the touch operation on the card;

[0089] With the touch point as the reference point, the size of the card view is controlled to gradually change from the first size to the second size at a gradual size change speed.

[0090] In one embodiment, when displaying the card view of the second size, the card view of the first size can be enlarged based on the touch point when the user touches the card, so that the size of the card view reaches the second size. Figure 4 As shown, after displaying a card view of the first size, when the user drags the card, the touch point at the lower right corner of the card view can be used as a reference point, and the length of the card view can be increased along the opposite direction of direction 391 at a determined gradient speed in the length direction, and the length of the card view can be controlled to gradually change to the length of the card view of the second size; and the width of the card view can be increased along the opposite direction of direction 392 at a determined gradient speed in the width direction, and the width of the card view can be controlled to gradually change to the width of the card view of the second size. During this process, the touch point is always located at the lower right corner of the card view.

[0091] In an embodiment of the present application, when the user drags the card view, the card view is expanded with the touch point of the touch operation as the reference point to obtain a card view of a second size, which can reduce the degree of jumping phenomenon in the card view and thus improve the user experience.

[0092] Optionally, before determining the gradient speed according to the size difference and the gradient duration, the method may further include:

[0093] Determine the touch duration of the touch operation;

[0094] The gradient duration is determined according to the touch duration; wherein the gradient duration is positively correlated with the touch duration.

[0095] Exemplarily, the electronic device starts timing when it detects that the user touches the card, and ends timing when the user starts to drag the card, and the timing duration is the touch duration of the touch operation. Afterwards, when the touch duration is less than or equal to the preset upper limit of duration, the touch duration is used as the gradual change duration, and when the touch duration is greater than the preset upper limit of duration, the upper limit of duration is used as the touch duration, so that the gradual change duration is positively correlated with the touch duration.

[0096] Alternatively, when the touch duration is less than or equal to a preset upper limit of duration, the touch duration can be reduced by a preset proportional coefficient (the proportional coefficient is greater than 1) to obtain a gradual duration; when the touch duration is greater than a preset upper limit of duration, the upper limit of duration can be reduced by the preset proportional coefficient to obtain a gradual duration, so that the gradual duration is positively correlated with the touch duration.

[0097] In an embodiment of the present application, the gradient duration is determined according to the touch duration, and the touch duration is set to be positively correlated with the gradient duration, so that the user can set the gradient duration through the touch duration, so that the size change speed of the card view can be associated with the user's touch operation, thereby improving the user experience.

[0098] Optionally, before displaying the card view of the card of the first size, the method may further include:

[0099] Determining a first size according to a touch duration of the touch operation; wherein the first size is negatively correlated with the touch duration;

[0100] A card view that displays a card of the first size.

[0101] In one embodiment, in the process of displaying a card view of a first size, the touch duration of the touch operation can be obtained, and the first size can be adjusted according to the touch duration. The longer the touch duration, the smaller the first size. For example, the initial value of the first size can be preset, and the initial value can be 0.9 times the actual size. At the same time, the first size can be set to decrease by 0.01 times for every 100 milliseconds increase in the touch duration. In this way, when the user starts to touch the card, the first size is 0.9 times the actual size. After the touch duration increases by 100 milliseconds, the first size is 0.89 times. When the touch duration increases by 200 milliseconds, the first size is 0.88 times, and so on. A first size that is negatively correlated with the touch duration can be obtained. In this way, in the process of displaying a card view of the first size, the longer the user touches the card, the smaller the first size, and the smaller the displayed card view.

[0102] Optionally, a lower limit value of the first size can be set in advance. When the first size is controlled to gradually decrease with increasing touch duration, when the first size is greater than the lower limit value, the first size gradually decreases with increasing touch duration, and when the first size reaches the lower limit value, the first size is controlled to remain unchanged at the lower limit value.

[0103] In an embodiment of the present application, setting the first size is negatively correlated with the touch duration, so that the user can set the first size by the duration of the touch operation, thereby controlling the size of the card view, which can facilitate the user to flexibly adjust the size of the card view.

[0104] Optionally, before controlling the size of the card view to gradually change from the first size to the second size, the method may further include:

[0105] Determine the touch duration of the touch operation;

[0106] The second size is determined according to the touch duration; wherein the second size is positively correlated with the touch duration.

[0107] In one embodiment, in the process of displaying the card view of the second size, the second size is determined in real time according to the touch duration, and the longer the touch duration, the larger the second size. For example, the initial value of the second size can be preset, and the initial value can be 1.1 times the actual size. At the same time, it can be set that the second size increases by 0.01 times for every 100 milliseconds increase in the touch duration. In this way, after the user starts to touch the card, the second size is 1.11 times after the touch duration increases by 100 milliseconds, and the first size is 1.12 times when the touch duration increases by 200 milliseconds, and so on, and a second size that is positively correlated with the touch duration can be obtained.

[0108] Optionally, an upper limit value of the second size can be set in advance. When the second size is controlled to gradually increase with the increase of touch duration, when the second size is less than the upper limit value, the second size gradually increases with the increase of touch duration, when the second size reaches the upper limit value, the second size is controlled to remain unchanged at the upper limit value.

[0109] In an embodiment of the present application, setting the second size is positively correlated with the touch duration, so that the user can set the second size by the duration of the touch operation, thereby controlling the size of the card view, which can facilitate the user to flexibly adjust the size of the card view.

[0110] See also Figure 5 , Figure 5 Schematic diagram of a card position adjustment device provided in an embodiment of the present application. Figure 5 As shown, the device 500 includes:

[0111] The display module 501 is configured to display a card view of the card of a first size when a touch operation on the card is received;

[0112] A control module 502, configured to control the size of the card view to gradually change from the first size to a second size if a drag operation is received on the card view, and adjust the position of the card view according to the real-time position of the drag operation; wherein the second size is different from the first size;

[0113] The updating module 503 is used to update the position of the card according to the end position of the dragging operation when the dragging operation ends.

[0114] Optionally, the display module 501 is specifically used to determine the second relative position of the touch point of the touch operation in the card view of the first size based on the first relative position and the first size; wherein the first relative position is the relative position of the touch point of the touch operation in the card; based on the touch point and the second relative position, determine the display area of ​​the card view of the first size; and display the card view of the first size in the display area.

[0115] Optionally, the control module 502 is specifically configured to determine a size gradient speed of the card view; and control the size of the card view to gradiently change from the first size to the second size at the size gradient speed.

[0116] Optionally, the control module 502 is specifically used to determine the size difference between the first size and the second size; determine the size gradient speed according to the size difference and the gradient duration; or, determine the size gradient speed according to the dragging speed of the dragging operation; wherein the dragging speed is positively correlated with the size gradient speed.

[0117] Optionally, the control module 502 is also used to determine the touch duration of the touch operation before determining the size gradient speed according to the size difference and the gradient duration; determine the gradient duration according to the touch duration; wherein the gradient duration is positively correlated with the touch duration.

[0118] Optionally, the control module 502 is specifically used to determine a touch point of the touch operation on the card; and control the size of the card view to gradually change from the first size to the second size at the size gradient speed, taking the touch point as a reference point.

[0119] Optionally, the display module 501 is specifically used to determine the first size according to the touch duration of the touch operation; wherein the first size is negatively correlated with the touch duration; and display a card view of the card of the first size.

[0120] Optionally, the control module 502 is also used to determine the touch duration of the touch operation before controlling the size of the card view to gradually change from the first size to the second size; determine the second size based on the touch duration; wherein the second size is positively correlated with the touch duration.

[0121] Figure 6is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. For example, Figure 6 As shown, the electronic device 600 includes: a memory 601 and a processor 602, wherein the memory 601 stores an executable program code 6011, and the processor 602 is used to call and execute the executable program code 6011 to perform a card position adjustment method.

[0122] In addition, an embodiment of the present application also protects a card position adjustment device, which may include a memory and a processor, wherein the memory stores an executable program code, and the processor is used to call and execute the executable program code to execute a card position adjustment method provided in an embodiment of the present application.

[0123] In this embodiment, the functional modules of the device can be divided according to the above method example. For example, each functional module can be corresponded, or two or more functions can be integrated into one processing module. The above integrated module can be implemented in the form of hardware. It should be noted that the division of modules in this embodiment is schematic and is only a logical function division. There may be other division methods in actual implementation.

[0124] In the case of dividing each functional module according to each function, the device may also include a determination module and a control module, etc. It should be noted that all relevant contents of each step involved in the above method embodiment can be referred to the functional description of the corresponding functional module, which will not be repeated here.

[0125] It should be understood that the device provided in this embodiment is used to execute the above-mentioned card position adjustment method, and thus can achieve the same effect as the above-mentioned implementation method.

[0126] In the case of an integrated unit, the device may include a processing module and a storage module. When the device is applied to an electronic device, the processing module may be used to control and manage the actions of the electronic device. The storage module may be used to support the electronic device to execute mutual program codes, etc.

[0127] The processing module may be a processor or a controller, which may implement or execute various exemplary logic blocks, modules and circuits disclosed in the present application. The processor may also be a combination that implements computing functions, such as a combination of one or more microprocessors, a combination of digital signal processing (DSP) and a microprocessor, etc. The storage module may be a memory.

[0128] In addition, the device provided in the embodiments of the present application may specifically be a chip, component or module, and the chip may include a connected processor and memory; wherein the memory is used to store instructions, and when the processor calls and executes the instructions, the chip can execute a card position adjustment method provided in the above embodiments.

[0129] This embodiment also provides a readable storage medium, in which executable program code is stored. When the executable program code is run on an electronic device, the electronic device executes the above-mentioned related method steps to implement a card position adjustment method provided in the above embodiment.

[0130] This embodiment further provides an electronic device program product. When the electronic device program product is run on an electronic device, the electronic device executes the above-mentioned related steps to implement a card position adjustment method provided in the above embodiment.

[0131] Among them, the device, readable storage medium, electronic device program product or chip provided in this embodiment are all used to execute the corresponding methods provided above. Therefore, the beneficial effects that can be achieved can refer to the beneficial effects in the corresponding methods provided above and will not be repeated here.

[0132] Through the description of the above implementation methods, technical personnel in the relevant field can understand that for the convenience and simplicity of description, only the division of the above-mentioned functional modules is used as an example. In actual applications, the above-mentioned functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above.

[0133] In the embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic, for example, the division of modules or units is only a logical function division, and there may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another device, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0134] The above contents are only specific implementation methods of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A card position adjustment method, characterized in that: The method comprises: When a touch operation on a card is received, displaying a card view of the card of a first size; If a drag operation is received on the card view, the size of the card view is controlled to gradually change from the first size to a second size, and the position of the card view is adjusted according to the real-time position of the drag operation; wherein the second size is different from the first size; When the dragging operation ends, the position of the card is updated according to the end position of the dragging operation.

2. The method according to claim 1, characterized in that The card view displaying the card of the first size includes: Based on the first relative position and the first size, determining a second relative position of the touch point of the touch operation in the card view of the first size; wherein the first relative position is the relative position of the touch point of the touch operation in the card; Determine a display area of ​​the card view of the first size based on the touch point and the second relative position; The card view of the first size is displayed in the display area.

3. The method according to claim 1, characterized in that The step of controlling the size of the card view to gradually change from the first size to the second size includes: Determine the card view's size gradient speed; The size of the card view is controlled to gradually change from the first size to the second size at the size gradual change speed.

4. The method according to claim 3, characterized in that Determining the gradual change speed of the size of the card view includes: Determine a size difference between the first size and the second size; determine the size gradient speed according to the size difference and the gradient duration; Alternatively, the size gradient speed is determined according to a drag speed of the drag operation; wherein the drag speed is positively correlated with the size gradient speed.

5. The method according to claim 4, characterized in that Before determining the size gradient speed according to the size difference and the gradient duration, the method further includes: Determining a touch duration of the touch operation; The gradual change duration is determined according to the touch duration; wherein the gradual change duration is positively correlated with the touch duration.

6. The method according to claim 3, characterized in that The controlling the size of the card view to gradually change from the first size to the second size at the size gradient speed includes: Determine a touch point of the touch operation on the card; Taking the touch point as a reference point, controlling the size of the card view to gradually change from the first size to the second size at the size gradual change speed.

7. The method according to claim 1, characterized in that The card view displaying the card of the first size includes: Determine the first size according to the touch duration of the touch operation; wherein the first size is negatively correlated with the touch duration; A card view displays the card in the first size.

8. The method according to any one of claims 1 to 7, characterized in that Before controlling the size of the card view to gradually change from the first size to the second size, the method further includes: Determining a touch duration of the touch operation; The second size is determined according to the touch duration; wherein the second size is positively correlated with the touch duration.

9. A card position adjustment device, characterized in that: The device comprises: A display module, configured to display a card view of the card of a first size when a touch operation on the card is received; a control module, configured to control the size of the card view to gradually change from the first size to a second size if a drag operation is received on the card view, and adjust the position of the card view according to the real-time position of the drag operation; wherein the second size is different from the first size; The updating module is used to update the position of the card according to the end position of the dragging operation when the dragging operation ends.

10. An electronic device, characterized in that: The electronic device comprises: A memory for storing executable program codes; A processor, configured to call and run the executable program code from the memory, so that the electronic device executes the method according to any one of claims 1 to 8.

Images