Grid interface display method and device, chip system, and storage medium

Abstract

The present application relates to the technical field of terminals, and provides a grid interface display method and device, a chip system, and a storage medium. In the present application, when an album page is displayed on a screen, after two fingers of a user press the screen and before the two fingers leave the screen, an electronic device can switch a column in response to a two-finger scaling operation of the user, for example, switching from a current column to another column through the next column, and correcting a scaling center of the album page on the basis of the distance between the two fingers when column switching is performed each time. Therefore, when the two fingers of the user do not leave the screen, the user can trigger the electronic device to switch back and forth between any columns by means of continuous scaling operations, so that it is ensured that the content of the center of the two fingers is unchanged, the whole album page switching process is smoother, and the operation experience of the user when the user views an album is improved.

Description

Grid interface display method, device, chip system and storage medium

[0001] This application claims priority to the Chinese patent application filed with the State Intellectual Property Office on December 29, 2023, with application number 202311870554.2 and application name “Display method, device, chip system and storage medium for grid interface”, the entire contents of which are incorporated by reference into this application. Technical Field

[0002] The present application relates to the field of terminal technology, and in particular to a display method, device, chip system and storage medium for a grid interface. Background Art

[0003] With the rapid development of terminal technology, mobile phone storage space is increasing. Mobile phone gallery apps can store large numbers of images. Gallery apps can set up multiple albums based on image type, such as the Camera Roll, All Photos, All Videos, Screenshots, and Personal Collections.

[0004] Currently, Android-based phones support displaying a fixed number of images in a grid format within an album page. Users can trigger the phone to display more images by swiping up or down. However, when an album contains many photos and videos, users may need to swipe up or down multiple times to find the desired image, which is very inconvenient and affects the user experience.

[0005] Summary of the Invention

[0006] The present application provides a display method, device, chip system and storage medium for a grid interface, which can solve the technical problem of inconvenient image search on album pages.

[0007] To achieve the above objectives, this application adopts the following technical solutions:

[0008] In a first aspect, an embodiment of the present application provides a method for displaying a grid interface. The method may include:

[0009] A first grid interface based on a first recycler view (referred to as a custom RecyclerView) is displayed on a display screen, wherein the first grid interface includes grids of a first number of columns, each grid including an image, and the size of each grid being equal to the width of the display screen divided by the first number of columns; in response to a two-finger press operation by a user on the display screen, a two-finger center is determined; after detecting the two-finger press operation, a first zoom operation is continuously detected; in response to the first zoom operation, a zoom operation is performed on the first recycler view with a first position on the display screen as the zoom center, and a second grid interface is displayed based on the zoomed first recycler view, wherein the size of the grids in the second grid interface is not equal to the size of the grids in the first grid interface, and the first position is determined based on the two-finger center, the first number of columns, and the first zoom operation. From the two-finger press operation to the completion of the first zoom operation, the user's two fingers do not leave the display screen.

[0010] In the above scheme, the number of grid columns in the grid interface is also called gears. The electronic device sets only one custom RecyclerView for each gear. When the grid interface is displayed on the display screen, after the user presses two fingers and before the two fingers leave the display screen, the electronic device can respond to the user's two-finger zoom operation, determine a display screen position as the zoom center, and perform a zoom operation on the custom RecyclerView to change the size of the grid displayed on the display screen. In this way, without the user's two fingers leaving the display screen, the user can trigger the electronic device to switch back and forth between any gears through the zoom operation, such as switching from the current gear to the next gear to other gears. The entire album page switching process is smoother, allowing users to quickly find images, which improves the user's operating experience when viewing album pages.

[0011] In one possible implementation, the display screen samples the user's touch operation according to the dot reporting period T. For example, the display screen samples 240 times per second. Period T = 1 / 240 = 4.16ms, that is, the display screen samples touch data every 4.16ms. The first zoom operation is a zoom operation detected in one dot reporting period. From the time the two-finger press operation is detected in the first dot reporting period to the time the first zoom operation is detected in the i-th dot reporting period, other zoom operations may be detected, that is, the user's two fingers are constantly approaching.

[0012] In one possible implementation, the first grid interface and the second grid interface can be the album page of the gallery application, or they can be pages of other applications based on RecyclerView. Taking the album page of the gallery application as an example, the electronic device has pre-set multiple gears. Among them, "gear" can be understood as the number of image columns displayed on the display screen. The zoom factor corresponding to each gear is equal to the ratio of the minimum number of columns supported by the grid interface to this gear. For example, the ratio of the minimum number of columns supported by the grid interface to the second number of columns is the first zoom factor, and the ratio of the minimum number of columns supported by the grid interface to the third number of columns is the second zoom factor.

[0013] Taking the album page as an example, the display size is 1200 pixels wide by 2800 pixels high, and the custom RecyclerView size is 8400 pixels wide by 20000 pixels high. The custom RecyclerView consists of 21 columns by 50 rows = 1050 grids, each measuring 400 pixels wide by 400 pixels high. The electronic device pre-sets the display area of ​​the custom RecyclerView in 3, 5, 15, and 21 levels. The zoom factor corresponding to each level is equal to the ratio of the minimum number of columns supported by the grid interface to the level. For example, the zoom ratio corresponding to level 3 is 1, and 3 columns of grids are displayed on the screen, and the actual display size of each grid is 240 pixels wide and 240 pixels high; the zoom ratio corresponding to level 5 is 0.6, and 5 columns of grids are displayed on the screen, and the actual display size of each grid is 240 pixels wide and 240 pixels high; the zoom ratio corresponding to level 15 is 0.2, and 15 columns of grids are displayed on the screen, and the actual display size of each grid is 80 pixels wide and 80 pixels high; the zoom ratio corresponding to level 21 is 1 / 7, and 21 columns of grids are displayed on the screen, and the actual display size of each grid is 57 pixels wide and 57 pixels high.

[0014] In one possible implementation, the left edge of the second grid interface is aligned with the left edge of the display screen, and the right edge of the second grid interface is aligned with the right edge of the display screen. The method may further include: after detecting the first zoom operation, continuing to detect a hand-raise operation; and in response to the hand-raise operation, maintaining the display of the second grid interface.

[0015] In the above solution, if the left edge of the second grid interface is aligned with the left edge of the display screen, it means that the current zoom factor is exactly equal to the zoom factor of a preset gear. The user can raise his hand without updating the grid interface.

[0016] In one possible implementation, the left edge of the second grid interface is not aligned with the left edge of the display screen, and the right edge of the second grid interface is not aligned with the right edge of the display screen. The method may further include: after detecting the first zoom operation, continuing to detect the hand-raising operation. In response to the hand-raising operation, the first recycler view is zoomed with the first position as the zoom center, and the third grid interface is displayed based on the zoomed first recycler view. The size of the grid in the third grid interface is not equal to the size of the grid in the second grid interface and the size of the grid in the first grid interface. The left edge of the third grid interface is aligned with the left edge of the display screen, and the right edge of the third grid interface is aligned with the right edge of the display screen. Alternatively, in response to the hand-raising operation, the first recycler view is zoomed with the first position as the zoom center, and the first grid interface is displayed again based on the zoomed first recycler view. The left edge of the first grid interface is aligned with the left edge of the display screen, and the right edge of the first grid interface is aligned with the right edge of the display screen. Wherein, from the double-finger pressing operation to the completion of the hand-raising operation, the user's two fingers do not leave the display screen.

[0017] In the above scheme, if the user raises his hand after determining not to switch gears, the image of the original gear will continue to be displayed on the display screen; if the user raises his hand after determining to switch gears, the image of the new gear will be displayed on the display screen.

[0018] In a possible implementation, before displaying the third grid interface, or before displaying the first grid interface again, the method may further include: determining whether the first gear switching condition is met. In this way, if the first gear switching condition is met, the third grid interface is displayed after raising the hand; or, if the first gear switching condition is not met, the first grid interface is displayed again after raising the hand. The first gear switching condition includes: the zoom factor corresponding to the first zoom operation is less than the first gear critical point, and the first gear critical point is the critical point for switching the zoom factor from the first gear (such as 5 gear) to the second gear (such as 7 gear); the zoom factor corresponding to the first zoom operation is greater than the second gear critical point, and the second gear critical point is the critical point for switching the zoom factor from the first gear (such as 5 gear) to the third gear (such as 3 gear).

[0019] In the above solution, by judging whether the gear switching condition is satisfied, the number of image columns finally displayed on the display screen can be determined after the user raises his hand.

[0020] In a possible implementation, the method further includes: after detecting the first zoom operation, continuing to detect the second zoom operation (the first zoom operation and the second zoom operation can be understood as zoom operations collected in different reporting periods, and other zoom operations can be collected between these two zoom operations, or no other zoom operations are collected). In response to the second zoom operation, the first recycler view is zoomed with the second position in the display screen as the zoom center, and the fourth grid interface is displayed based on the zoomed first recycler view. The size of the grid in the fourth grid interface is not equal to the size of the grid in the second grid interface, and the second position is determined according to the double-finger center, the first column number and the second zoom operation. From the double-finger press operation to the completion of the second zoom operation, the user's double fingers do not leave the display screen.

[0021] In this solution, since only one custom RecyclerView is set for each gear, the electronic device can continuously zoom based on the same custom RecyclerView each time the gear is switched, achieving cross-gear zooming. In addition, since there is no need to remeasure the size and position of each grid, the response speed of cross-gear zooming is improved.

[0022] In one possible implementation, if the left edge of the fourth grid interface is not aligned with the left edge of the display screen, and the right edge of the fourth grid interface is not aligned with the right edge of the display screen, the method may further include: after detecting the second zoom operation, continuing to detect the hand-raising operation. In response to the hand-raising operation, the first recycler view is zoomed with the second position as the zoom center, and the fifth grid interface is displayed based on the zoomed first recycler view; the size of the grid in the fifth grid interface is not equal to the size of the grid in the fourth grid interface, the left edge of the fifth grid interface is aligned with the left edge of the display screen, and the right edge of the fifth grid interface is aligned with the right edge of the display screen. Alternatively, in response to the hand-raising operation, the first recycler view is zoomed with the second position as the zoom center, and the first grid interface is displayed again based on the zoomed first recycler view, the left edge of the first grid interface is aligned with the left edge of the display screen, and the right edge of the first grid interface is aligned with the right edge of the display screen. Wherein, from the double-finger pressing operation to the completion of the hand-raising operation, the user's two fingers do not leave the display screen.

[0023] In the above solution, after the user presses two fingers, the user can continue to zoom in and out. After the latest gear switch is determined, if the gear switch is not determined, the user raises his finger and the screen keeps displaying the image of the original gear; if the gear switch is determined, the user raises his finger and the screen displays the image of the new gear.

[0024] In a possible implementation, the method may further include: determining that a second gear switching condition is satisfied before displaying the fifth grid interface; or determining that the second gear switching condition is not satisfied before displaying the first grid interface again. The second gear switching condition includes: Condition 1: the zoom factor corresponding to the second zoom operation is less than the zoom factor corresponding to the first zoom operation, and the zoom factor corresponding to the second zoom operation is less than the third gear critical point, which is the critical point for switching the zoom factor from the fourth gear (such as 7) to the fifth gear (such as 15); Condition 2: the zoom factor corresponding to the second zoom operation is greater than the zoom factor corresponding to the first zoom operation, and the zoom factor corresponding to the second zoom operation is greater than the fourth gear critical point, which is the critical point for switching the zoom factor from the fourth gear (such as 7) to the sixth gear (such as 5).

[0025] In the above scheme, there is a critical switching point between any two adjacent gears among the multiple gears pre-set by the electronic device. Before switching from one gear to another, the number of image columns ultimately displayed on the display screen after the user raises their hand can be determined by determining whether the zoom factor Si corresponding to the i-th zoom operation crosses the critical switching point.

[0026] In one possible implementation, before performing a zoom operation on the first recycler view with the first position in the display screen as the zoom center and displaying the second grid interface, the method further includes: determining the zoom factor corresponding to the first zoom operation based on the first number of columns, the two-finger distance corresponding to the two-finger press operation, and the two-finger distance corresponding to the first zoom operation; when the zoom factor corresponding to the first zoom operation meets the first condition, determining the second number of columns based on the zoom factor corresponding to the first zoom operation; determining the first position based on the two-finger center, the second number of columns, and the position of the display area of ​​the first grid interface in the first recycler view. The first condition includes any one of the following: the zoom factor corresponding to the first zoom operation is greater than a preset zoom factor; the zoom factor corresponding to the first zoom operation is less than a preset zoom factor. The preset zoom factor is equal to the ratio of the minimum number of columns supported by the grid interface to the first number of columns.

[0027] In one possible implementation, determining the first position based on the center of the two fingers, the second number of columns, and the position of the display area of ​​the first grid interface in the first recycler view includes: determining a first distance screenRectF.left, a second distance X1, a third distance X2, and a first width screenRectF.width; the first distance screenRectF.left is the distance from the left edge of the display area of ​​the first grid interface in the first recycler view to the left edge of the first recycler view, the second distance X1 is the distance from the left edge of the display area corresponding to the second number of columns in the first recycler view to the left edge of the first recycler view, the third distance X2 is the distance from the right edge of the display area corresponding to the second number of columns in the first recycler view to the left edge of the first recycler view, and the first width screenRectF.width is the width of the display area of ​​the first grid interface in the first recycler view. Based on the first distance screenRectF.left, the second distance X1, the third distance X2, and the first width screenRectF.width, a first coordinate value centerX is determined, where the first coordinate value centerX represents the distance from the zoom center to the left edge of the first recycler view. The first coordinate value is mapped to the display screen to obtain a second coordinate value, pointx, which represents the distance from the zoom center to the left edge of the display screen. The position corresponding to the second coordinate value, pointx, and the third coordinate value, mBeginFocusy, is determined as the first position. The third coordinate value, mBeginFocusy, represents the distance from the center of the two fingers to the top edge of the display screen.

[0028] In one possible implementation, determining the second distance may include: determining the second distance based on the number of columns between the left edge of the display area of ​​the first grid interface in the first recycler view and the left edge of the first recycler view, the number of columns of the center of the two fingers in the display area corresponding to the first number of columns, the number of columns of the center of the two fingers in the display area corresponding to the second number of columns, and the first height. Wherein, the first height is the width of the table item view in the first recycler view when the grid interface with a third number of columns is displayed on the display screen, and the third number of columns is the minimum number of columns supported by the grid interface.

[0029] Exemplarily, the electronic device may calculate the first coordinate value using the following steps:

[0030] (1) Determine the column number of the display area corresponding to the first column number at the center of the two fingers based on the distance from the center of the two fingers to the left edge of the display screen, the second zoom factor, and the first height. For example, calculate the column number of the display area corresponding to the first column number at the center of the two fingers in the current gear position (i.e., the first column number) using the following relationship:

[0031] Among them, currentSelectIndex represents the column number of the two-finger center in the display area corresponding to the first column number, focusx represents the distance from the two-finger center to the left edge of the display screen, initChildheight represents the first height (that is, the original height of each ItemView in the custom RecyclerView), and scale1 represents the zoom factor of the current gear (that is, the second zoom factor).

[0032] (2) Determine the column number of the display area corresponding to the second column number where the center of the two fingers is located based on the distance from the center of the two fingers to the left edge of the display screen, the first zoom factor, and the first height. For example, the column number of the display area corresponding to the second column number where the center of the two fingers is located at the next gear position (i.e., the second column number) is calculated using the following relationship:

[0033] Among them, nextSelectIndex represents the column number of the two-finger center in the display area corresponding to the second column number, focusx represents the distance from the two-finger center to the left edge of the display screen, initChildheight represents the first height (that is, the original height of each ItemView in the custom RecyclerView), and scale11 represents the zoom factor of the next gear (that is, the first zoom factor).

[0034] (3) Determine a second distance based on the number of columns between the left edge of the display area corresponding to the first number of columns in the custom RecyclerView and the left edge of the custom RecyclerView, the number of columns in the display area corresponding to the first number of columns where the center of the two fingers is positioned, the number of columns in the display area corresponding to the second number of columns where the center of the two fingers is positioned, and the first height. For example, the second distance is calculated using the following relationship:

[0035] X1=(span.left+currentSelectIndex-nextSelectIndex)*initChild height;

[0036] Among them, X1 represents the second distance, span.left represents the number of ItemView columns from the left edge of the current gear (i.e., the first column number) in the custom RecyclerView to the left edge of the custom RecyclerView, currentSelectIndex represents the column number of the double-finger center in the display area corresponding to the first column number, nextSelectIndex represents the column number of the double-finger center in the second column number, and initChildheight represents the first height (i.e., the original height of each ItemView in the custom RecyclerView).

[0037] (4) Determine the third distance based on the second distance and the width of the second column in the custom RecyclerView. For example, the third distance is calculated using the following relationship:

[0038] X2=(span.left+currentSelectIndex-nextSelectIndex+nextShowSpan)*initChildheight;

[0039] Among them, X2 represents the third distance, span.left represents the number of ItemView columns from the left edge of the current gear (i.e., the first column number) in the custom RecyclerView to the left edge of the custom RecyclerView, currentSelectIndex represents the column number of the double-finger center in the display area corresponding to the first column number, nextSelectIndex represents the column number of the double-finger center in the second column number, nextShowSpan represents the second column number, and initChildheight represents the first height (i.e., the original height of each ItemView in the custom RecyclerView).

[0040] (5) Determine the first coordinate value based on the first distance screenRectF.left, the second distance X1, the third distance X2, and the first width screenRectF.width. For example, the first coordinate value is calculated using the following relationship:

[0041] Among them, centerX represents the first coordinate value, screenRectF.left represents the first distance, X1 represents the second distance, X2 represents the third distance, and screenRectF.width represents the first width.

[0042] In the above solution, by setting the zoom center and enlarging or reducing the custom RecyclerView with the zoom center as the center point, it can ensure that the left edges of the first grid interface and the second grid interface are aligned with the left edge of the display, and the right edges of the first grid interface and the second grid interface are aligned with the right edge of the display, avoiding the appearance of half a grid or blank area on the left and right edges of the display.

[0043] In the above solution, by setting the zoom center and zooming in or out of the custom RecyclerView with the zoom center as the center point, the left edge of the grid interface can be aligned with the left edge of the display, and the right edge of the grid interface can be aligned with the right edge of the display, avoiding the appearance of half a grid or blank area on the left and right edges of the display.

[0044] In one possible implementation, a zoom operation is performed on the first recycler view with the first position in the display screen as the zoom center, and a second grid interface is displayed, including: taking the first position as the zoom center, and based on the zoom multiple corresponding to the first zoom operation, a zoom operation is performed on the first recycler view; based on the zoomed first recycler view, the second grid interface is displayed.

[0045] In the above solution, by calculating the zoom factor corresponding to the first zoom operation, the custom RecyclerView can be zoomed in and out, changing the size of each grid on the display screen to ensure that the grid interface is fully responsive to the hand.

[0046] In one possible implementation, the method may further include: after detecting a two-finger press operation, continuing to detect a third zoom operation, determining the zoom factor corresponding to the third zoom operation based on the first number of columns, the two-finger distance corresponding to the two-finger press operation, and the two-finger distance corresponding to the third zoom operation. When the zoom factor corresponding to the third zoom operation meets the second condition, performing a zoom operation on the first recycler view with the center of the two fingers as the zoom center to display the sixth grid interface. The left edge of the sixth grid interface is not aligned with the left edge of the display screen, and the right edge of the sixth grid interface is not aligned with the right edge of the display screen; the size of the grid in the sixth grid interface is larger than the size of the grid in the grid interface at the minimum gear, or smaller than the size of the grid in the grid interface at the maximum gear; the minimum gear is the minimum number of columns supported by the first recycler view, and the maximum gear is the maximum number of columns supported by the first recycler view. For example, the second condition may include any one of the following: the zoom factor corresponding to the third zoom operation is greater than the maximum zoom factor; or the zoom factor corresponding to the third zoom operation is less than the minimum zoom factor.

[0047] In the above solution, when the second condition is met, it can be predicted that the user's two-finger operation has exceeded the maximum or minimum gear. After exceeding the maximum or minimum gear, there is no edge alignment issue, so the electronic device can directly set the center of the two fingers as the zoom center.

[0048] In a possible implementation, the method may further include: after detecting the third zoom operation, continuing to detect a hand-raising operation. In response to the hand-raising operation, performing a zoom operation on the first recycler view with the center of the two fingers as the zoom center, and displaying the seventh grid interface based on the zoomed recycler view. The left edge of the seventh grid interface is aligned with the left edge of the display screen, and the right edge of the seventh grid interface is aligned with the right edge of the display screen; the number of columns of the seventh grid interface is equal to the maximum number of columns supported by the first recycler view, or the number of columns of the seventh grid interface is equal to the minimum number of columns supported by the first recycler view.

[0049] In the above solution, when the user raises his hand, if the number of columns in the grid interface is greater than the maximum number of columns supported by the custom RecyclerView, or less than the minimum number of columns supported by the custom RecyclerView, it can be determined that the current interface is only a temporary transition interface and does not belong to the pre-set gear, so it is necessary to fall back to the minimum gear or the maximum gear.

[0050] In one possible implementation, the method is applied to an electronic device, which includes a touch event receiving layer, a first recycler view, and a zoom gesture detector, wherein the size of the touch event receiving layer is equal to the size of the display screen, and the size of the first recycler view is larger than the size of the display screen. Displaying a first grid interface based on the first recycler view on the display screen includes: displaying the first grid interface based on the first recycler view on the display screen in response to a user's selection operation on an album card. In response to a two-finger touch operation on the grid interface based on the first recycler view, transmitting first two-finger coordinates to the zoom gesture detector via the touch event receiving layer, and determining a first two-finger distance based on the first two-finger coordinates via the zoom gesture detector.

[0051] In the above scheme, in the grid page of the album, each grid is continuous, and there is no need to set the year title, month title and day title. In the process of switching gears, the electronic device only needs to change the size and number of the grids. Based on the grid characteristics of the album page, this application only sets up one custom RecyclerView for the album page of all gears. Therefore, after the user presses two fingers and before the two fingers leave the display screen, the electronic device can switch back and forth between any gears based on the custom RecyclerView, such as switching from the current gear to the next gear and then to other gears. In addition, by setting ReceiveTouchView. The size of ReceiveTouchView is consistent with the size of the display screen, and ReceiveTouchView directly passes the two-finger coordinates to the zoom gesture detector without multiplying the two-finger coordinates by a zoom factor less than 1, thereby solving the problem that the zoom action of the album page image zoom scheme based on the custom RecyclerView is prone to premature failure.

[0052] In one possible implementation, the electronic device further includes a second recycler view and a third recycler view, the size of the second recycler view is equal to the size of the display screen, and the size of the third recycler view is equal to the size of the display screen. The method may further include: in response to a selection operation on a photo control, displaying a grid interface based on the second recycler view on the display screen; in response to a two-finger touch operation on the grid interface based on the second recycler view, transmitting second two-finger coordinates to a zoom gesture detector through the second recycler view, and determining a second two-finger distance based on the second two-finger coordinates through the zoom gesture detector; when the second two-finger distance is greater than or equal to a preset distance, displaying a grid interface based on the third recycler view on the display screen. Wherein, the number of grid columns of the grid interface based on the second recycler view is different from the number of grid columns of the grid interface based on the third recycler view.

[0053] In the above solution, the grid interface based on the second recycler view and the grid interface based on the third recycler view can be photo pages. The electronic device can set a native RecyclerView for each level of the photo page. The size of each native RecyclerView is equal to the size of the display screen, so that the zoom factor s1 = 1. In this way, the coordinates obtained by the zoom gesture detector are the same as the coordinate pairs collected by the touch driver, and the distance calculated by the zoom gesture detector based on the obtained coordinate pairs is equal to the actual two-finger distance.

[0054] In one possible implementation, the display screen samples the user's touch operation according to the reporting period T. If the user touches the touch screen with one or two fingers in a certain period, the electronic device can determine the touch position of the single finger or two fingers based on voltage changes, etc. For example, in the i-th reporting period, the electronic device obtains the coordinates (xi1, yi1) and coordinates (xi2, yi2) of the two fingers. The electronic device can calculate the two-finger distance Di and the zoom factor Si based on the coordinates (xi1, yi1) and coordinates (xi2, yi2) of the two fingers.

[0055] For example, the two-finger distance di can be obtained by the following relationship:

[0056] Case 1: If i=1, the zoom factor of the current gear is determined as the zoom factor Si, and it is determined whether to reposition the custom RecyclerView. After that, the double-finger center coordinates are no longer calculated, and the display content of the display is not refreshed.

[0057] If i=1, the coordinates of the two-finger center can also be obtained using the following relationship:

[0058] Case 2: If i > 1 and di > d(i - 1), or i > 1 and di < d(i - 1), then the zoom factor Si is obtained through the following relational expression:

[0059] where scale1 is the zoom factor when two fingers are pressed. di is the distance between two fingers corresponding to the i-th zoom operation, and d1 is the distance between two fingers corresponding to the two-finger press operation.

[0060] Case 3: If i > 1 and di = d(i - 1), then the center coordinates of the two fingers are no longer calculated, and the display content of the display screen is not refreshed either.

[0061] where Si represents the zoom factor of the i-th reporting point period, di represents the distance between two fingers of the i-th reporting point period, and d(i - 1) represents the distance between two fingers of the (i - 1)-th reporting point period.

[0062] In the above solution, by calculating the change in the distance between two fingers, the zoom factor of each reporting point period can be calculated, so as to facilitate judging whether there is a gear shift according to the zoom factor of each reporting point period, calculating the center coordinates of the two fingers when there is a gear shift, and refreshing the display content of the display screen.

[0063] In a second aspect, the present application provides a device, which includes units for executing the method in the first aspect above. This device can correspond to executing the method described in the first aspect above. For the relevant descriptions of the units in this device, please refer to the description in the first aspect. For the sake of brevity, they will not be repeated here.

[0064] Among them, the method described in the first aspect above can be implemented by hardware or by hardware executing corresponding software. The hardware or software includes one or more modules or units corresponding to the above functions. For example, a processing module or unit, a display module or unit, etc.

[0065] In a third aspect, the present application provides an electronic device, which includes: one or more processors and a memory. The memory is coupled to the one or more processors. The memory is used to store computer program code, and the computer program code includes computer instructions. The one or more processors call the computer instructions to cause the electronic device to execute the method provided in the first aspect and any possible implementation manner thereof.

[0066] In a fourth aspect, the present application provides a computer-readable storage medium. This computer-readable storage medium includes computer instructions. When the computer instructions run on an electronic device, the electronic device is caused to execute the method provided in the first aspect and any possible implementation manner thereof.

[0067] In a fifth aspect, the present application provides a computer program product. When the computer program product is run on a computer, the computer is caused to execute the method provided in the first aspect and any possible implementation thereof.

[0068] In a sixth aspect, the present application provides a chip system, which is applied to an electronic device. The chip system includes one or more processors, and the one or more processors are used to call computer instructions to enable the electronic device to execute the method provided in the first aspect and any possible implementation thereof.

[0069] It can be understood that the beneficial effects that can be achieved by the above-mentioned device of the second aspect, the electronic device of the third aspect, the computer-readable storage medium of the fourth aspect, the computer program product of the fifth aspect and the chip system of the sixth aspect can be referred to as the beneficial effects in the first aspect and any possible implementation thereof, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0070] FIG1 is a schematic diagram of a scenario in which a mobile phone scrolls and displays images on an album page, provided by an embodiment of the present application;

[0071] FIG2 is a schematic diagram of a scenario in which a mobile phone zooms and displays an image on an album page, provided by an embodiment of the present application;

[0072] FIG3 is a schematic diagram of another scenario of zooming and displaying an image on an album page on a mobile phone provided by an embodiment of the present application;

[0073] FIG4 is a schematic diagram of another scenario of zooming and displaying an image on an album page on a mobile phone provided by an embodiment of the present application;

[0074] FIG5 is a schematic diagram of a scenario in which a mobile phone zooms and displays an image on a photo page according to an embodiment of the present application;

[0075] FIG6 is a schematic diagram of another scenario of zooming and displaying an image on a photo page on a mobile phone provided by an embodiment of the present application;

[0076] FIG7 is a schematic diagram of two native RecyclerViews provided for a photo page according to an embodiment of the present application;

[0077] FIG8 is a schematic diagram of a custom RecyclerView configured for an album page according to an embodiment of the present application;

[0078] 9A to 9D are schematic diagrams of RecyclerView and display areas at different gears provided by an embodiment of the present application;

[0079] FIG10 is a schematic diagram of an actual layout position index and an actual adaptation position index during the scaling process;

[0080] FIG11 is a software architecture diagram of an electronic device provided in an embodiment of the present application;

[0081] FIG12 is a flowchart of a gear-by-gear image scaling solution based on native RecyclerView provided in an embodiment of the present application;

[0082] FIG13 is a flow chart of a method for premature failure of a cross-gear scaling solution based on a custom RecyclerView provided in an embodiment of the present application;

[0083] FIG14 is a flow chart of a method for preventing premature failure of a cross-gear scaling solution based on a custom RecyclerView provided in an embodiment of the present application;

[0084] FIG15 is a schematic diagram of scaling and displaying a custom RecyclerView based on a scaling center and a scaling factor Si according to an embodiment of the present application;

[0085] FIG16 is a flow chart of a method for calculating a zoom center provided in an embodiment of the present application;

[0086] FIG17 is a schematic diagram of a display area for switching from a small gear to a large gear according to an embodiment of the present application;

[0087] FIG18 is a flow chart of a method for refreshing AP values ​​provided in an embodiment of the present application;

[0088] FIG19 is a flowchart of a method for scaling across gears in a grid interface in the i-th reporting period provided by an embodiment of the present application;

[0089] 20A to 20G are schematic diagrams of interface changes from a high gear to a low gear according to an embodiment of the present application;

[0090] 21A to 21D are schematic diagrams of interface changes from a small gear to a large gear according to an embodiment of the present application;

[0091] FIG22 is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0092] In order to make the purpose, technical solutions and advantages of the embodiments of the present application more clear, the technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments.

[0093] In an embodiment of the present application, the gallery application supports multiple image display methods. For example, as shown in Figures 1 to 4, the gallery application supports displaying images in the form of albums on the album page. Albums can include camera, video, photo, cloud disk selfie, live photo, long exposure, slow motion, screenshots, and animated images. For another example, as shown in Figures 5 and 6, the gallery application supports displaying all images in the gallery application on the photo page.

[0094] For photo pages and album pages, the electronic device has pre-set multiple gears respectively. The gear setting methods for photo pages and album pages can be the same or different. Among them, "gear" can be understood as the number of image columns displayed on the screen. Taking the album page as an example, the electronic device has pre-set the following gears for the album page: 3 gears, 5 gears, 15 gears and 21 gears. Among them, 3 gear is the minimum gear of the album page, and 21 gear is the maximum gear of the album page. When the gear is 3 gear, the number of image columns displayed on the corresponding screen is 3 columns; when the gear is 5 gear, the number of image columns displayed on the corresponding screen is 5 columns; when the gear is 15 gear, the number of image columns displayed on the corresponding screen is 15 columns; when the gear is 21 gear, the number of image columns displayed on the corresponding screen is 21 columns.

[0095] The user can use a pinch-to-zoom operation to change the number of image columns displayed on the photo page or album page on the screen. As an example, the user can trigger the electronic device to increase the number of image columns displayed on the photo page or album page by reducing the distance between the two fingers. As another example, the user can trigger the electronic device to reduce the number of image columns displayed on the photo page or album page on the screen by increasing the distance between the two fingers. If the user uses a pinch-to-zoom operation to set the album page to 21 columns, the electronic device will continue to display 21 columns of images until the next pinch-to-zoom operation is received.

[0096] The present application provides a step-by-step zooming method for photo pages, and a cross-step zooming method for album pages. Among them, "step-by-step zooming" means that after the user presses two fingers and before the two fingers leave the screen, when the user increases or decreases the distance between the two fingers on the screen, the electronic device can switch from the current gear to the next gear, that is, one gesture can only switch one gear. For example, if the number of image columns displayed on the screen before the user presses two fingers is 5 columns, after the user presses two fingers, the distance between the two fingers is reduced, and before the two fingers leave the screen, the number of image columns displayed on the screen can be switched from 5 columns to 15 columns as the distance between the two fingers decreases. After switching to 15 columns, reducing the distance between the two fingers again will not trigger the screen to switch from 15 columns to 21 columns.

[0097] "Cross-gear zooming" means that after the user presses two fingers and before the two fingers leave the screen, when the user increases or decreases the distance between the two fingers on the screen, the electronic device can switch from the current gear to the next gear via the next gear, that is, a single gesture can switch multiple gears. For example, if the number of image columns displayed on the screen is 5 before the user presses two fingers, after the user presses two fingers and decreases the distance between the two fingers, before the two fingers leave the screen, the number of image columns displayed on the screen can switch from 5 columns to 15 columns as the distance between the two fingers decreases. After switching to 15 columns, the number of image columns displayed on the screen can switch from 15 columns to 21 columns as the distance between the two fingers decreases.

[0098] It should be noted that the above method can be an electronic device based on the Android system or an electronic device based on other operating systems. The above electronic device is also referred to as a terminal or user equipment (UE). For example, the electronic device can be a personal computer (PC), a mobile phone, a smart screen, a smart TV, a tablet computer (Pad), a wearable device, a computer with wireless transceiver function, a virtual reality (VR) device, an augmented reality (AR) device, a wireless terminal in industrial control, a wireless terminal in self-driving, a wireless terminal in remote medical surgery, a wireless terminal in smart grid, a wireless terminal in transportation safety, a wireless terminal in smart city or a wireless terminal in smart home, etc., or can be other devices or apparatuses with gallery functions.

[0099] The following uses a mobile phone as an example of an electronic device, and describes an example usage scenario of the gallery application in conjunction with FIG1 to FIG6 .

[0100] In some embodiments, the mobile phone supports scrolling of images in response to a single-finger operation on the album page.

[0101] For example, FIG1 shows a schematic diagram of a scene in which a mobile phone scrolls and displays images on an album page.

[0102] As shown in Figure 1 (a), the phone displays icons for applications such as the Gallery app on the desktop. To view an image, the user can click the Gallery app icon 01. In response to the user clicking the Gallery app icon 01, the phone displays the card page shown in Figure 1 (b). The card page includes multiple areas: a status bar that displays battery level and signal strength indicators, an action bar that displays photos and a search box, and a footer that displays photos, albums, memories, and creations. Areas other than these areas also provide album cards, such as the Camera app, All photos, and Videos app. Album cards, also known as album cards, are each an entry to an album. The user can select one of these album cards. For example, as shown in Figure 1 (b), the user can click the "Camera" card 02. In response to the user clicking the "Camera" card 02, the phone displays the album page shown in Figure 1 (c). The album page includes multiple square grids 03 and is therefore also called a grid page. Taking the grid page including 5 columns of grids as an example, the side length h1 of each grid is equal to the width of the screen divided by 5. Each grid 03 is used to display an image. The user can trigger the mobile phone to display more images on the album page by sliding up and down. As shown in (c) in Figure 1, the user can press and hold the image 455 with a single finger. As shown in (d) in Figure 1, the single finger starts to slide downward. If the single finger slides downward by a distance d1, in response to the user's sliding operation, as shown in (e) in Figure 1, the album page slides downward by the hand by a distance d1. The user can continue to press and hold the image 455 and slide it downward by a distance d2. In response to the user's sliding operation, as shown in (f) in Figure 1, the album page slides downward by the hand by a distance d2. Generally, the sliding distance of the sliding operation is equal to the distance the album page scrolls down. The longer the sliding distance of the sliding operation, the more content is displayed when the album page scrolls down. In the above embodiment, the mobile phone supports displaying more images in response to a single-finger sliding operation on the album page. However, when there are many photos and videos on the album page, the user may need to perform multiple single-finger sliding operations to find the image they want to view. This process is inconvenient and may affect the user's operating experience.

[0103] In other embodiments, the mobile phone further supports zooming in and out of images in response to a double-finger operation on the album page.

[0104] For example, FIG2 to FIG4 are schematic diagrams showing scenes in which a mobile phone zooms in and out to display an image on an album page.

[0105] Figures 2 to 4 illustrate the preset gear positions of the album page as 3, 5, 15, and 21, respectively, and do not limit the present application. In actual implementation, the gear positions of the album page can be set arbitrarily. For example, the mobile phone pre-sets the gear positions 1, 3, 5, 15, 21, and 31 for the album page, with gear 1 being the lowest gear and gear 31 being the highest gear. The user can trigger the phone to switch between these six gear positions by pinching to zoom.

[0106] As an example, after a user taps the "Camera" card 02 shown in Figure 1 (b), the phone displays the album page shown in Figure 2 (a). The album page consists of five grids, each with a side length of h1. The user can press two fingers on the album page shown in Figure 2 (a), with the distance between the two fingers now being d3. As shown in Figure 2 (b), when the distance between the two fingers decreases from d3 to d4, the album page switches to 15 grids, with each grid 04 having a side length of h2, where h2 is equal to the screen width divided by 15. As shown in Figure 2 (c), when the distance between the two fingers decreases from d4 to d5, the album page switches to 21 grids, with each grid 05 having a side length of h3, where h3 is equal to the screen width divided by 21. As shown in Figure 2 (d), the user raises their finger, and the album page continues to display 21 columns of images. In other words, the phone allows for zooming in and out of the album page without lifting their fingers from the screen.

[0107] As another example, after a user taps the "Camera" card 02 shown in Figure 1 (b), the phone displays the album page shown in Figure 3 (a). The album page consists of five grids, each with a side length of h1. The user presses two fingers on the album page shown in Figure 3 (a), with the distance between the two fingers now being d6. As shown in Figure 3 (b), when the distance between the two fingers increases from d6 to d7, the album page switches to a three-column grid, with each grid 06 having a side length of h4, where h4 is equal to the screen width divided by 3. As shown in Figure 3 (c), the user continues to increase the distance between the two fingers to d8, and the album page continues to display three columns of images. As shown in Figure 3 (d), after the distance between the two fingers increases to d8, the user lifts their finger, and the album page continues to display three columns of images. In other words, after the phone switches from the 5-position setting to the minimum setting (3), the album page remains in 3-position.

[0108] As another example, after the user clicks the "Camera" card 02 as shown in (b) of Figure 1, the phone displays the album page as shown in (a) of Figure 4. The album page consists of 5 columns of grids, and the side length of each grid is h1. The user can press two fingers on the album page as shown in (a) of Figure 4. At this time, the distance between the two fingers is d9. As shown in (b) of Figure 4, when the distance between the two fingers increases from d9 to d10, the album page switches to 3 columns of grids, and the side length of each grid 06 is h4, where h4 is equal to the width of the screen divided by 3. As shown in (c) of Figure 4, when the distance between the two fingers increases to d11, the album page includes 3 columns of images with incomplete edge image content, and the height of each grid is h5, where h5>h4. As shown in (d) of Figure 4, the user raises his hand, and the album page rebounds to 3 columns of images, and the left and right edges of the 3 columns of images are aligned with the left and right edges of the screen. That is to say, after the phone switches from level 5 to the minimum level (level 3), it can continue to zoom in in response to user operations, but it will eventually rebound to the minimum level (level 3) after the user raises his hand.

[0109] In other embodiments, the mobile phone further supports zooming in and out of images in response to a double-finger operation on a photo page.

[0110] For example, FIG5 and FIG6 are schematic diagrams showing scenes in which a mobile phone zooms in and out to display an image on a photo page.

[0111] As shown in FIG5 (a), the user can click the photo control 07 in the bottom bar. In response to the click operation on the photo control 07, the mobile phone displays the photo page shown in FIG5 (b), which includes multiple day titles 08, each day title 08 indicating a date, such as "2023.11.18", "2023.11.10", or "2023.11.08". In the area below each day title 08, all images captured on that date are displayed in the form of 4 columns of grids, each grid having a side length of h6, where h6 is equal to the width of the screen divided by 4. The user can press two fingers on the photo page shown in FIG5 (b), and the distance between the two fingers is d12 at this time. As shown in (c) of Figure 5 , when the distance between the two fingers decreases from d12 to d13, the phone updates the photo page, which includes multiple month titles 09, such as "2023.11" or "2023.10". All images captured in that month are displayed in an 8-column grid format in the area below each month title 09. The side length of each grid is h7, which is equal to the width of the screen divided by 8. As shown in (d) of Figure 5 , if the user continues to decrease the distance between the two fingers, for example, from d13 to d14, the photo page will continue to display 8 columns of images. As shown in (e) of Figure 5 , if the user lifts their hand, the photo page will continue to display 8 columns of images. In other words, the phone supports responding to a zoom operation in the photo page (from pressing the two fingers to lifting the two fingers off the screen is a zoom operation), switching from 4 columns of images to 8 columns of images.

[0112] Based on Figure 5 (e), as shown in Figure 6 (a), when the photo page displays 8 columns of images, the user can press two fingers again, now with the distance between the two fingers being d15. As shown in Figure 6 (b), when the distance between the two fingers decreases from d15 to d16, the phone updates the photo page. This photo page includes a year title 10, such as "2023." Below the year title 10, all images captured in 2023 are displayed in a 15-column grid format. Each grid has a side length of h8, where h8 is equal to the screen width divided by 15. As shown in Figure 6 (c), if the user continues to decrease the distance between the two fingers, for example, from d16 to d17, the photo page continues to display 15 columns of images. As shown in Figure 6 (d), if the user lifts their finger, the photo page continues to display 15 columns of images. In other words, the phone supports switching from 8 columns of images to 15 columns of images in response to a zoom operation on the photo page (from pressing two fingers to lifting the two fingers off the screen as one zoom operation).

[0113] In other embodiments, the mobile phone also supports scrolling and displaying images in response to a single-finger operation on a photo page. Please refer to the specific description of scrolling and displaying images in response to a single-finger operation on an album page, which will not be repeated here.

[0114] It should be noted that the number of grid columns in Figures 1 to 6 above is for illustrative purposes only and does not limit the present application. In actual implementation, the number of grid columns can be adjusted according to usage requirements. The solutions shown in Figures 1 to 6 above are not limited to album pages and photo pages, and can also be extended to other forms of interface grids.

[0115] In addition, this application does not limit the number of image columns displayed when the phone enters the album page or photo page. Taking the album page as an example, the number of image columns displayed each time the phone enters the album page can be set according to a preset level (such as 5 levels), or the level when the phone enters the album page this time can be the same as the level when the phone last exited the album page.

[0116] Taking an electronic device using the Android operating system as an example, the step-by-step zooming method for photo pages and the cross-step zooming method for album pages provided in this application are described below.

[0117] On devices running the Android operating system, gallery apps can implement their interface using the native RecyclerView (RV). In the native Android logic, the native RecyclerView supports scrolling but not scaling, and its size always matches the screen size.

[0118] Referring to the description of Figures 5 to 6 of the above embodiment, the photo page includes a title and a grid corresponding to each title. During the gear switching process, the title size remains unchanged, the grid size changes, and the title and grid are not scaled synchronously. Based on this, the electronic device can set a native RecyclerView for each gear of the photo page. The size of each native RecyclerView is always equal to the size of the screen. When the user reduces or increases the distance between the two fingers, the mobile phone can re-determine the gear to be switched, measure the size and position of each grid, and refill the content of each grid, thereby realizing the scaling of the album interface, but there is a problem of long time consumption.

[0119] For example, FIG7 shows a schematic diagram of two native RecyclerViews set for a photo page.

[0120] On the photo page, the phone's pre-set number of gears equals the number of native RecyclerViews, meaning each gear corresponds to a native RecyclerView. Switching gears on the phone can be understood as switching from one native RecyclerView to another. Assume the phone's pre-set gears include at least 4 and 8. As shown in Figure 7 (a), RecyclerView1 and the screen both have dimensions of 1200 pixels wide by 2800 pixels high, and RecyclerView1 supports displaying 4 columns of grid images. As shown in Figure 7 (b), RecyclerView2 and the screen both have dimensions of 1200 pixels wide by 2800 pixels high, and RecyclerView2 supports displaying 8 columns of grid images. Furthermore, when displaying RecyclerView1 and RecyclerView2 on the screen, the phone typically overlays other layers on top of RecyclerView1 and RecyclerView2 with preset transparency, such as the status bar layer, activity bar layer, and bottom bar layer. It should be understood that when the mobile phone pre-sets the gears including 4 gears, 8 gears and 15 gears, it can also include RecyclerView3, and RecyclerView3 includes 15 columns of grid images.

[0121] Referring to the description of Figures 1 to 4 in the above embodiment, in the grid page of the album, each grid is continuous, and there is no need to set the year title, month title, and day title. In the process of switching gears, only the size and number of the grids need to be changed. Based on this, the present application provides a custom RecyclerView, and the size of the custom RecyclerView control is larger than the size of the screen. For example, the screen size is 1200 pixels wide and 2800 pixels high, and the size of the custom RecyclerView control is 8400 pixels wide and 20000 pixels high. The custom RecyclerView consists of multiple item views (ItemView) in the form of a grid, each ItemView corresponds to an image view (ImageView), and each ImageView is used to display an image. The custom RecyclerView can be regarded as a container for displaying images. When the user slides their finger up and down on the gallery interface, the custom RecyclerView displayed on the screen will also scroll up and down; or when the user zooms in and out on the gallery interface, the custom RecyclerView displayed on the screen will also zoom in or out, thus solving the problem of re-measuring the size and position of each grid when switching gears and refilling the content of each grid, which results in a long time consumption.

[0122] For example, FIG8 shows a schematic diagram of a custom RecyclerView set for an album page.

[0123] After the phone receives a click on the gallery icon, it starts running the gallery app and initializes a custom RecyclerView. As shown in Figure 8, the initialized custom RecyclerView can include 21 columns * 50 rows = 1050 ItemViews, and the width and height of each ItemView are both 400 pixels. The number of columns, rows, and side length of each ItemView in the initialized custom RecyclerView are calculated as follows: Taking a screen size of 1200 pixels wide and 2800 pixels high, and the preset gears of 3, 5, 15, and 21 as an example, the phone can divide the screen width of 1200 pixels by the minimum gear of 3, thereby obtaining a side length of 400 pixels for each ItemView in the initialized custom RecyclerView. The phone can then multiply the minimum gear of 3 by the side length of 400 pixels for each ItemView in the initialized custom RecyclerView, and then divide it by the maximum gear of 21, to calculate that the side length of each ItemView on the screen at the maximum gear (21) is 57 pixels. Then, the phone can divide the height of the screen, 2800 pixels, by the side length of each ItemView on the screen at the maximum gear (21), 57 pixels, and add 1 to get the number of rows of the initialized custom RecyclerView, 50 rows. It should be noted that at gear 21, the phone can divide the height of the screen by the side length of each ItemView on the screen at the maximum gear (21), 57 pixels, to determine that a maximum of 49 rows of pixels are displayed. The custom RecyclerView is at least one row more than the screen, so that the size of the custom RecyclerView displayed on the screen can be larger than the size of the screen, so that there will be no blank space on the screen, ensuring that the custom RecyclerView can scroll up and down.

[0124] As shown in Figure 8, in gear 3, the custom RecyclerView's display area on the screen is 3 rows and 7 columns of ItemView. Each ItemView includes an ImageView, and each ImageView is used to display an image. The image displayed by an ImageView can be a thumbnail of a photo or a thumbnail of a frame from a video. When an ImageView displays a photo thumbnail, the user clicks the thumbnail and the phone displays the photo in full screen. When an ImageView displays a thumbnail of a frame from a video, the user clicks the thumbnail and the phone plays the video in full screen.

[0125] It should be noted that the relative positional relationship between the display area and the custom RecyclerView in Figure 8 is only an example. In actual implementation, the user can change the relative positional relationship between the screen and the custom RecyclerView, as well as the size of the display area seen by the user, by sliding up and down and zooming. For example, when the user swipes up on the screen, the custom RecyclerView slides up relative to the screen, thereby displaying photos taken at a later time; when the user swipes down on the screen, the custom RecyclerView slides down relative to the screen, thereby displaying photos taken at an earlier time. For another example, when the user reduces the distance between the two fingers, the display area in the custom RecyclerView is enlarged, and after the enlarged display area is sent to the screen, the screen displays more images of smaller size; when the user increases the distance between the two fingers, the display area in the custom RecyclerView is reduced, and after the reduced display area is sent to the screen, the screen displays fewer images of larger size.

[0126] This application's custom RecyclerView involves two sizes:

[0127] One is the original size of the custom RecyclerView, that is, the initial size. Regardless of how many columns of images the custom RecyclerView's display area includes, the original size of the custom RecyclerView remains unchanged. For example, when the screen size is 1200 pixels wide and 2800 pixels high, the minimum number of columns displayed on the screen is 3, then the original size of each ItemView in the custom RecyclerView is 400 pixels wide and 400 pixels high. Since the maximum number of columns in the custom RecyclerView is 21, and the number of rows is 50 in the case of 21 columns, the original size of the custom RecyclerView is 8400 pixels wide and 20000 pixels high.

[0128] The other is the actual display size of the custom RecyclerView. Since the number of ItemView columns displayed on the screen is different when the display area of ​​the custom RecyclerView includes different numbers of columns, it is necessary to multiply the original size of the custom RecyclerView by a scaling factor to obtain a reduced display size, and then display the reduced custom RecyclerView on the screen. For example, the current gear is N, the minimum gear is M, and the original size of the custom RecyclerView is (x, y). Then, the display size of the custom RecyclerView at the current gear is (x*M / N, y*M / N). Among them, x represents the original width of the custom RecyclerView, y represents the original height of the custom RecyclerView, and M / N represents the scaling factor.

[0129] In some embodiments, the scaling factor corresponding to each gear position is less than or equal to 1.0.

[0130] Exemplarily, FIG9A to FIG9D show schematic diagrams of the relationship between a customized RecyclerView and a screen at different gears.

[0131] Assume the phone screen size is 1200 pixels wide by 2800 pixels high, and the custom RecyclerView size is 8400 pixels wide by 20000 pixels high. The custom RecyclerView consists of 21 columns by 50 rows, or 1050 grids, each measuring 400 pixels wide by 400 pixels high. The phone pre-sets the display area of ​​the custom RecyclerView in 3, 5, 15, and 21 levels. The minimum level is 3, which displays 3 columns of grids on the screen; the maximum level is 21, which displays 21 columns of grids.

[0132] As shown in Figure 9A , when the display area of ​​a custom RecyclerView consists of 3 columns * 7 rows = 21 grids, the original size of the display area is equal to the screen size. The display area can be displayed on the screen at a 1:1 ratio (i.e., multiplying the display area of ​​the custom RecyclerView by the scaling factor of 1.0). At this point, the actual display size of each ItemView in the custom RecyclerView on the screen is 400 pixels wide and 400 pixels high.

[0133] As shown in Figure 9B , when the display area of ​​a custom RecyclerView consists of 5 columns * 12 rows = 60 grids, the original size of the display area is larger than the screen size. The display area of ​​the custom RecyclerView can be multiplied by a scaling factor of 0.6 before being displayed on the screen. At this point, the actual display size of each ItemView in the custom RecyclerView on the screen is 240 pixels wide by 240 pixels high.

[0134] As shown in Figure 9C , when the custom RecyclerView's display area includes 15 columns * 35 rows = 525 grids, the original size of the display area is larger than the screen size. The custom RecyclerView's display area can be multiplied by a scaling factor of 0.2 before being displayed on the screen. At this point, the actual display size of each ItemView in the custom RecyclerView on the screen is 80 pixels wide by 80 pixels high.

[0135] As shown in Figure 9D , when the custom RecyclerView's display area includes 21 columns * 49 rows = 1029 grids, the original size of the display area is larger than the screen size. The custom RecyclerView's display area can be multiplied by the zoom factor of 1 / 7 before being displayed on the screen. At this point, the actual display size of each ItemView in the custom RecyclerView on the screen is 57 pixels wide by 57 pixels high.

[0136] It should be noted that in Figures 9A to 9D, the actual display size of the display area of ​​the custom RecyclerView multiplied by the zoom factor is equal to the size of the mobile phone screen. Therefore, the grids in the display area will fill the entire screen. As an example, as shown in Figures 2 to 4, the mobile phone will overlay the status bar layer, activity bar layer, etc. on the grid according to the preset transparency, so that the grid covered by the status bar layer and activity bar layer is in a completely invisible state or incompletely visible state. It can be understood that in actual implementation, the activity bar and / or status bar can also be removed to make all grids fully visible, and this application does not make specific limitations.

[0137] The above embodiment describes that a custom RecyclerView can include multiple ItemViews, each of which corresponds to an ImageView, and an ImageView is used to display an image. To distinguish between the ItemViews and ImageViews in a custom RecyclerView, this application provides two custom indexes: one index is the real layout position index (LP) and the other index is the real adapter position index (AP).

[0138] Among them, the actual layout position index is an index established from the perspective of the layout manager (LayoutManager), which is used to indicate the position of the grid in the custom RecyclerView. In the native logic of the Android system, the layout position index cannot be customized. In this application, the terminal device can change the actual layout position index value based on the zoom magnification, zoom center, and scrolling operations. In a custom RecyclerView, the actual layout position index is numbered consecutively from the ItemView in the first row and first column to the ItemView in the last row and last column.

[0139] The actual fit position index is an index set separately for the content displayed on the screen from the perspective of the adapter. It is used to represent the number of the image displayed in the grid of the custom RecyclerView. In the native logic of the Android system, the fit position index cannot be customized. However, in this application, during the zooming process, the actual fit position index of the ItemView corresponding to the center of the two fingers remains unchanged, but the actual fit position indexes of other ItemViews may be renumbered, resulting in the actual fit position index of the entire custom RecyclerView not necessarily being continuous. In other words, in the zooming scenario, the actual fit position index may not be equal to the layout position index.

[0140] Exemplarily, FIG10 shows a schematic diagram of an actual layout position index and an actual adaptation position index during a scaling process.

[0141] For ease of understanding, let's take a custom RecyclerView with a maximum gear of 5 and a width and height of each ItemView equal to the width of the screen divided by 3, i.e., a minimum gear of 3, as an example. As shown in (a) of Figure 10, before receiving the user's two-finger zoom operation, the custom RecyclerView actually displayed on the screen is reduced to the same width as the screen, and the actual layout position index and actual adaptation position index of each ItemView are equal. For example, the actual layout position index LP=0 and the actual adaptation position index AP=0 corresponding to the ItemView in the first row and first column in the upper left corner of the screen, and the actual layout position index LP=49 and the actual adaptation position index AP=49 corresponding to the ItemView in the last row and last column in the lower right corner of the screen. When the user wants to view the enlarged image of the grid (i.e., ItemView) surrounded by the dotted frame, the user can place two fingers in the area surrounded by the dotted frame and gradually increase the distance between the two fingers. In response to the two-finger distance zoom operation, the phone zooms in on the entire custom RecyclerView with the ItemView surrounded by the dotted frame as the center. The ItemView displayed on the screen is updated to have 3 columns.

[0142] As an example, as shown in Figure 10 (b), the phone can renumber the actual fit position index values ​​corresponding to the ItemViews in columns 1 through 3 of the custom RecyclerView. The numbering rule for the actual fit position index values ​​corresponding to the ItemViews in these three columns is as follows: the actual fit position index of the ItemView enclosed by the dashed box remains at AP = 6; starting from the ItemView enclosed by the dashed box, the AP value of each ItemView before the ItemView enclosed by the dashed box is decremented by 1, and the AP value of each ItemView after the ItemView enclosed by the dashed box is incremented by 1. For the ItemViews in columns 4 through 5 of the custom RecyclerView, the phone can assign an AP value of -1 to each ItemView. AP = -1 indicates that the actual fit position value is invalid. At this point, an ItemView can display a blank image or continue to display the image shown in Figure 10 (a). Referring to Figures 10 (a) and 10 (b), it can be seen that the actual layout position index and the actual fit position index value of an ItemView correspond to each other. When scaling a custom RecyclerView with the ItemView with layout index LP=6 as the scaling center, the actual fit index of the ItemView on the screen changes, but the actual layout index of each ItemView remains unchanged. This scaling solution ensures that the center content remains unchanged and maintains the continuity of the displayed image.

[0143] As another example, the phone can also number based on the native Android system's adaptation position index. In the native Android system logic, the adaptation position index cannot be customized. Therefore, as shown in (c) in Figure 10, when switching from 5th gear to 3rd gear, the adaptation position index value corresponding to each ItemView in the custom RecyclerView remains unchanged.

[0144] Exemplarily, FIG11 shows a software architecture diagram of an electronic device.

[0145] As shown in Figure 11, electronic devices can adopt a layered architecture, dividing the software into several layers, each with clear roles and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the software layers of the software structure are divided from top to bottom into: application (APP) layer, application framework (FWK) layer, system library and kernel layer. The above software architecture runs on the hardware layer, which may include screens and sensors.

[0146] The application layer can include a series of application packages, such as the gallery application, camera application, scale gesture detector (ScaleGestureDetector), receiving touch event layer (ReceiveTouchView) control, native recycler view (RecyclerView) control, custom recycler view (RecyclerView) control, etc. The gallery application, camera application, native RecyclerView control and scale gesture detector are native controls of the Android system, while the ReceiveTouchView control and custom RecyclerView control are newly added controls in this application.

[0147] The Camera app can use the camera to take photos and videos, and store them in the Gallery app. The Gallery app can not only manage the photos and videos taken, but also manage screenshots and shared images.

[0148] The ReceiveTouchView control is used to receive user touch operations.

[0149] If a single-finger touch is received, the ReceiveTouchView control passes the touch data to the custom RecyclerView control. The custom RecyclerView control controls the RecyclerView to scroll in the same direction as the single-finger swipe. When scrolling to the top or bottom of the RecyclerView, the custom RecyclerView control moves the entire RecyclerView in the opposite direction of the single-finger swipe and refills the RecyclerView with content.

[0150] If a two-finger touch operation is received, the ReceiveTouchView control passes the two-finger touch data to the zoom gesture detector. The zoom gesture detector executes the cross-grid zoom method for the grid interface provided by this application based on the two-finger touch data. The specific description of the following embodiments can be referred to and will not be repeated here. As an example, the zoom gesture detector can be an interface of RecyclerView or a custom RecyclerView.

[0151] When these application packages are running, they can access various service modules provided by the application framework layer through the application programming interface (API) and execute corresponding intelligent services.

[0152] The application framework layer provides application APIs and a programming framework. It includes predefined functions. For example, the application framework layer may include the window manager service (WMS), activity manager service (AMS), SurfaceFlinger, and resource manager. The WMS is used to transmit data collected by the touch driver to the currently bound window control, such as the RecyclerView control or the ReceiveTouchView control.

[0153] The system library includes multiple functional modules, such as the surface manager, media libraries, a 2D graphics engine (e.g., SGL), and a 3D graphics library (e.g., OpenGL ES). Within the system library, the Android Runtime comprises a core library and a virtual machine. The Android Runtime is responsible for scheduling and managing the Android system. The core library consists of two parts: one containing the functional functions required by the Java language and the other the Android core library. The application layer and application framework layer run in the virtual machine.

[0154] The kernel layer is the layer between hardware and software and belongs to the bottom layer of the Android system. The kernel layer can contain various driver interfaces, such as display drivers, audio drivers, touch drivers, and sensor drivers.

[0155] It should be noted that although the embodiments of the present application are described using the Android system as an example, its basic principles are also applicable to electronic devices based on operating systems such as iOS or Windows.

[0156] Referring to the operation of the above embodiment, the gallery application supports displaying all images on the photo page, and also supports displaying images in the form of albums on the album page. For these two display methods, this application provides a step-by-step image scaling solution based on the native RecyclerView, and a cross-step image scaling solution based on the custom RecyclerView.

[0157] The specific implementation methods of these two image scaling solutions are described below.

[0158] Example 1

[0159] As described in the above embodiment, the photo page includes a title and a grid corresponding to each title. When the user decreases or increases the distance between two fingers, the electronic device can re-determine the gear to be switched, measure the size and position of each grid, and refill each grid with content, thereby achieving zooming of the photo page. In other words, the electronic device can set a native RecyclerView for each gear on the photo page, and the size of each native RecyclerView is equal to the size of the screen.

[0160] For the photo page, taking the mobile phone pre-set 4, 8 and 15 levels, and the screen size of 1200 pixels wide * 2800 pixels high as an example, Figure 12 shows the flowchart of the level-by-level image scaling solution based on the native RecyclerView.

[0161] A1: The touch driver samples the user's touch operation according to a period T.

[0162] The above cycle, also called the control cycle or the reporting cycle, is the cycle in which the touch driver collects the user's touch operations.

[0163] For example, the touch driver collects touch data 240 times per second. The period T = 1 / 240 = 4.16ms, meaning the touch driver collects touch data every 4.16ms. If the user presses the touchscreen with one or two fingers during this period, the touch driver can determine the touch location based on voltage changes and other factors.

[0164] A2: The touch driver receives a user click operation on the icon of the gallery application and starts the gallery application.

[0165] For example, when a user wants to view an image, the user can click on the gallery icon 01 as shown in (a) in Figure 1. The touch driver receives the user's click operation on the gallery icon 01 and passes the click operation to the application processor. The application processor starts the gallery application. The gallery application initializes the native RecyclerView and zoom gesture detector, etc. Among them, the native RecyclerView includes RecyclerView1, RecyclerView2 and RecyclerView3, and the size of RecyclerView1, RecyclerView2 and RecyclerView3 is equal to the screen size, such as 1200 pixels wide and 2800 pixels high. RecyclerView1 is the day title and supports the display of 4 columns of images. RecyclerView2 is the month title and supports the display of 8 columns of images. RecyclerView3 is the year title and supports the display of 15 columns of images.

[0166] A3. After initialization, the gallery app determines to display the photo page based on RecyclerView2 (also called the second RecyclerView) and notifies the WMS. For example, the phone can display the photo interface based on RecyclerView2 as shown in Figure 7 (b). Accordingly, the WMS determines RecyclerView2 as the layer to handle zoom events.

[0167] It should be noted that if the phone displayed a photo page based on RecyclerView2 before the user last exited the Gallery app, then when the user enters the Gallery app this time, the Gallery app will determine to display a photo page based on RecyclerView2. It is understandable that if the user opens the Gallery app for the first time, the Gallery app may determine to display a photo page based on a pre-set native RecyclerView (RecyclerView1, RecyclerView2, or RecyclerView3), and this application does not make specific restrictions.

[0168] A4: The touch driver receives the user's two-finger press and passes the coordinates (200, 200) and (800, 1000) to the WMS. The WMS passes the coordinates (200, 200) and (800, 1000) to RecyclerView2.

[0169] Among them, the coordinates (200, 200) and (800, 1000) are pixel coordinates.

[0170] At this time, the distance between the two fingers Pixels.

[0171] A5, RecyclerView2 multiplies the coordinate (200, 200) by the scaling factor s1 = 1 to obtain the coordinate (200, 200), and multiplies the coordinate (800, 1000) by the scaling factor s1 = 1 to obtain the coordinate (800, 1000).

[0172] With reference to the description of the above embodiment, since the size of RecyclerView2 is equal to the size of the screen, the scaling factor s1=1.

[0173] A6, RecyclerView2 passes coordinates (200,200) and coordinates (800,1000) to the zoom gesture detector.

[0174] A7, the zoom gesture detector calculates the distance D1 = 1000 based on the coordinates (200, 200) and the coordinates (800, 1000).

[0175] in, Pixels.

[0176] Since the zoom factor s1 = 1, the distance D1 = 1000 calculated based on the coordinates (200, 200) and the coordinates (800, 1000) is equal to the actual two-finger distance d1 = 1000.

[0177] A8 , the zoom gesture detector determines whether the distance D1 = 1000 is less than a threshold value D = 540.

[0178] Normally, the distance between two fingers is greater than or equal to 27mm. When the distance between two fingers is less than 27mm, it can be basically ruled out that this operation is a two-finger touch operation. Take the physical size of the screen as 60mm wide * 140mm high, and the resolution of the screen as 1200 pixels wide * 2800 pixels high as an example. Convert the physical distance 27mm into pixel distance: 1200÷60*27=540 pixels. That is to say, when the distance D1 is less than the threshold D=540 pixels, it can be determined that this operation is invalid, thereby ending the zoom event, and the touch driver continues to detect user input. If the distance D1 is greater than or equal to the threshold D=540 pixels, then it can be determined that this operation is valid, the distance D1 is recorded, and the following A9 is executed.

[0179] It should be noted that this application uses a threshold value D = 540 pixels as an example for illustration and does not limit this application. Different people have different distances between their two fingers, the physical size of the screen may vary, and the screen resolution may also vary. In this case, the threshold value D calculated based on these parameters will also vary.

[0180] A9: The touch driver receives the user's two-finger movement and sends the collected coordinates (150, 150) and (630, 790) to the WMS. The WMS passes the coordinates (150, 150) and (630, 790) to RecyclerView2.

[0181] Among them, the coordinates (150,150) and (630,790) are pixel coordinates.

[0182] At this time, the distance between the two fingers is equal to Pixels.

[0183] A10, RecyclerView2 multiplies the coordinate (150, 150) by the scaling factor s1 = 1 to obtain the coordinate (150, 150), and multiplies the coordinate (630, 790) by the scaling factor s1 = 1 to obtain the coordinate (630, 790).

[0184] A11, RecyclerView2 passes coordinates (150,150) and coordinates (630,790) to the zoom gesture detector.

[0185] A12. The pinch gesture detector calculates the distance Di = 800 pixels based on the coordinates (150, 150) and the coordinates (630, 790).

[0186] Among them, pixels.

[0187] Since the zoom factor s1 = 1, the distance Di = 800 pixels calculated based on the coordinates (150, 150) and the coordinates (630, 790) is the true two-finger distance di.

[0188] A13. The pinch gesture detector determines whether the distance Di = 800 is less than the threshold D = 540 (also known as the preset spacing).

[0189] Since the distance Di = 800 pixels is greater than the threshold D = 540 pixels, the pinch gesture detector can determine that this zoom operation is valid and execute the following A14.

[0190] A14. The pinch gesture detector determines whether Di < D1 and Si ≤ a1, or Di > D1 and Si ≥ a2 are satisfied.

[0191] Among them, a1 is the gear shift critical point for switching from a small gear to a large gear. For example, the gear shift critical points for switching from gear 4 to gear 8 and from gear 8 to gear 15 are both a1 = 0.8; a2 is the gear shift critical point for switching from a large gear to a small gear. For example, the gear shift critical points for switching from gear 15 to gear 8 and from gear 8 to gear 4 are both a2 = 1.2.

[0192] The above Si is the current zoom factor. For example, the calculation method of the current zoom factor Si is as follows:

[0193] Among them, scale1 is the zoom factor when the two fingers are pressed. di is the two-finger spacing corresponding to the i-th zoom operation, and d1 is the two-finger spacing corresponding to the two-finger press operation.

[0194] Since Di < D1 and Si ≤ a1, the pinch gesture detector can determine to execute the following A15 and A16.

[0195] A15. The pinch gesture detector determines to switch from gear 8 to gear 15 and notifies the gallery application.

[0196] A16. The gallery application determines to display the photo page based on RecyclerView3 (also known as the third RecyclerView) and notifies WMS. Accordingly, WMS determines that RecyclerView3 is the layer for processing the zoom event.

[0197] A17. The touch drive receives the user's two-finger lift operation and notifies the WMS of the lift event. The WMS passes the lift event to RecyclerView13. Accordingly, RecyclerView3 passes the zoom event to the zoom gesture detector.

[0198] A18. The zoom gesture detector determines to maintain the current gear position.

[0199] For example, if a lift event is detected after switching from gear 8 to gear 15, then gear 15 is maintained.

[0200] It should be noted that the two-finger coordinates collected by the touch drive in A4 and A9 above are only for illustrative purposes and do not limit this application. In actual implementation, the user may decrease the distance between the two fingers, may increase the distance between the two fingers, and the speed of the two-finger movement may also change.

[0201] In addition, the above embodiments are illustrated by taking D2 < D1 and Si ≤ a1 as an example. In one example, if D2 > D1 and Si ≥ a2, then the zoom gesture detector determines to switch from gear 8 to gear 4 and notifies the gallery application. Then the gallery application determines to display the photo page based on RecyclerView1 and notifies the WMS. After that, the WMS determines that RecyclerView1 is the layer for processing the zoom event.

[0202] In the above photo page image zooming scheme based on the native RecyclerView, since a corresponding native RecyclerView is set for each gear's photo page, and the size of the native RecyclerView is equal to the size of the screen, therefore, the zoom factor s = 1. In this way, the coordinates obtained by the zoom gesture detector are the same as the coordinate pairs collected by the touch drive, so that the distance calculated by the zoom gesture detector based on the obtained coordinate pairs is equal to the actual distance between the two fingers.

[0203] Example 2

[0204] Referring to the description of Example 1 above, in the photo page image zooming scheme, a corresponding native RecyclerView is set for each gear's photo page, and the size of the native RecyclerView is equal to the size of the screen. For example, both the native RecyclerView and the screen are 1200 pixels wide * 2800 pixels high. Each time the gear is switched, the electronic device needs to re-measure the size and position of each grid and refill the content of each grid, which has the problem of taking a long time.

[0205] Different from the photo page, in the grid page of the album, each grid is continuous, and there is no need to set the year title, month title and day title. In the process of switching gears, the electronic device only needs to change the size and number of the grids. Based on the grid characteristics of the album page, this application only sets one custom RecyclerView for the album page of all gears. The size of the custom RecyclerView is much larger than the size of the screen. For example, the size of the custom RecyclerView is 8400 pixels wide and 20000 pixels high, and the size of the screen is 1200 pixels wide and 2800 pixels high. In this way, after the user presses two fingers and before the two fingers leave the screen, the electronic device can switch back and forth between any gears based on the custom RecyclerView, such as switching from the current gear to the next gear through the next gear. For the specific implementation of the custom RecyclerView, please refer to the relevant description of Figures 8, 9A to 9D, and 10 in the above embodiment, which will not be repeated here.

[0206] For example, for the album page, the phone pre-sets zoom levels 3, 5, 15, and 21. The screen size is 1200 pixels wide by 2800 pixels high, and the size of the custom RecyclerView is 8400 pixels wide by 20000 pixels high. If, as described in Example 1 above, WMS passes the two-finger coordinates to the custom RecyclerView, the custom RecyclerView calculates a zoom factor corresponding to the two-finger operation. However, if this zoom factor is less than 1, the zoom action may fail prematurely.

[0207] The following provides a flowchart of how the cross-gear scaling solution based on a custom RecyclerView will fail prematurely in conjunction with Figure 13.

[0208] B1: The touch driver samples the user's touch operation according to a period T.

[0209] For the implementation of B1, please refer to the description of A1, which will not be repeated here.

[0210] B2. The touch driver receives a click operation on the icon of the gallery application by the user and starts the gallery application.

[0211] After starting the gallery application, the gallery application initializes the native RecyclerView (not shown in Figure 13), the custom RecyclerView, and the zoom gesture detector. Among them, the native RecyclerView includes RecyclerView1, RecyclerView2, and RecyclerView3. For RecyclerView1, RecyclerView2, and RecyclerView, you can refer to the description of Example 1 above, which will not be repeated here. The size of the custom RecyclerView is 8400 pixels wide and 20000 pixels high. It should be noted that the custom RecyclerView is customized and is not included in the native system of the Android system. There is no need to initialize this control when running the gallery application.

[0212] In addition, after completing the initialization, the gallery application may also display the album card page as shown in (b) in FIG. 1 .

[0213] If the phone was displaying the Photos page before the user last exited the Gallery app, the Gallery app will display the Photos page after initialization. If the phone was displaying any album page before the user last exited the Gallery app, the Gallery app will display the album card page shown in Figure 1 (b) after initialization.

[0214] B3: The touch driver receives the user's click on the camera card in the album card page and notifies the gallery application through WMS.

[0215] In B4, the gallery app displays the album page based on the custom RecyclerView and notifies the WMS. Accordingly, the WMS determines the custom RecyclerView as the layer that handles the zoom event.

[0216] B5: The touch driver receives the user's two-finger press and passes the coordinates (200, 200) and (800, 1000) to the WMS. The WMS passes the coordinates (200, 200) and (800, 1000) to the custom RecyclerView.

[0217] At this time, the distance between the two fingers Pixels.

[0218] B6, the custom RecyclerView multiplies the coordinates (200, 200) by the zoom factor 0.6 to get the coordinates (120, 120), and multiplies the coordinates (800, 1000) by the zoom factor 0.6 to get the coordinates (480, 600).

[0219] Assuming that 5 columns of images are displayed when entering the album page, referring to FIG. 9B , the zoom factor is 0.6.

[0220] It is understood that the zoom factor of the custom RecyclerView will vary depending on the number of columns of images displayed on the album page when two fingers are pressed. For example, if the album page displays three columns of images when two fingers are pressed, the zoom factor of the custom RecyclerView is 1.0, referring to Figure 9A above.

[0221] B7, the custom RecyclerView passes the coordinates (120,120) and (480,600) to the zoom gesture detector.

[0222] B8, the zoom gesture detector calculates the distance D1 = 600 pixels based on the coordinates (120, 120) and (480, 600).

[0223] in, Pixels.

[0224] B9, the zoom gesture detector determines that the distance D1 = 600 pixels is greater than the threshold D = 540 pixels, determines that this operation is valid, and records the distance D1 = 600 pixels.

[0225] B10: The touch driver receives the user's two-finger movement operation and sends the collected coordinates (150, 150) and (630, 790) to the WMS. The WMS passes the coordinates (150, 150) and (630, 790) to the custom RecyclerView.

[0226] At this time, the distance between the two fingers is equal to Pixels.

[0227] B11, the custom RecyclerView multiplies the coordinates (150,150) by the zoom factor 0.6 to obtain the coordinates (90,90), and multiplies the coordinates (630,790) by the zoom factor 0.6 to obtain the coordinates (378,474).

[0228] In B11, since zooming is not yet performed through a custom RecyclerView, the zoom factor of the custom RecyclerView still uses the zoom factor of 0.6 when pressing with two fingers.

[0229] B12, the custom RecyclerView passes the coordinates (90,90) and (378,474) to the zoom gesture detector.

[0230] B13, the zoom gesture detector calculates the distance Di = 480 pixels based on the coordinates (90,90) and (378,474).

[0231] in, Pixel.

[0232] B14, the zoom gesture detector determines that the distance Di = 480 pixels is less than the threshold D = 540 pixels, determines that this operation is invalid, and prematurely ends the zoom event. That is, cross-gear cannot be achieved.

[0233] As another example, if the distance Di is greater than the threshold D = 540 pixels, the zoom ratio of the custom RecyclerView is recalculated according to the following relationship:

[0234] If Di < D1 and Si ≤ a1, or Di > D1 and Si ≥ a2 are satisfied, then when the next zoom operation is received, the zoom ratio of the custom RecyclerView is updated to Si. Here, a1 is the gear switching critical point for switching from a small gear to a large gear, and a2 is the gear switching critical point for switching from a large gear to a small gear.

[0235] In the above-mentioned album page image zooming scheme based on the custom RecyclerView, since only one custom RecyclerView is set for the album pages of all gears, the size of the custom RecyclerView is much larger than the size of the screen. In this way, when the user reduces the distance between the two fingers, after the custom RecyclerView converts the touch coordinates, the zoom gesture detector calculates the distance between the two fingers to be less than the actual distance between the two fingers according to the converted coordinates, resulting in the inability to handle normal zoom events and the inability to achieve cross-gear zooming of the photo page. In the embodiment of this application, the custom RecyclerView converts the touch coordinates, resulting in the inability to handle normal zoom events, which is called the premature invalidation of the zoom action.

[0236] Example 3

[0237] Referring to the description of Example 2 above, in the album page image zooming scheme, using a custom RecyclerView may cause the problem of premature invalidation of the zoom action. In this regard, this application also adds a custom ReceiveTouchView. The size of the ReceiveTouchView is the same as the size of the screen. In the zooming scenario, the ReceiveTouchView directly passes the two-finger coordinates to the zoom gesture detector without multiplying the two-finger coordinates by a scaling factor less than 1, thus solving the problem that the album page image zooming scheme based on the custom RecyclerView is prone to premature invalidation of the zoom action.

[0238] In addition, referring to the description of Example 2 above, in the zoom scenario of the album page, due to a custom RecyclerView (also called the first RecyclerView) set for each gear, after the user presses two fingers and before the two fingers leave the screen, the electronic device can switch back and forth between any gears based on the custom RecyclerView, such as switching from the current gear to the next gear and then to other gears.

[0239] The following provides a flowchart of a cross-gear scaling solution based on a custom RecyclerView that will not fail prematurely in conjunction with Figure 14.

[0240] C1, the touch driver samples the user's touch operation according to a period T.

[0241] For the implementation of B1, please refer to the description of A1, which will not be repeated here.

[0242] C2, the touch driver receives a click operation on the icon of the gallery application by the user and starts the gallery application.

[0243] The gallery application initializes the native RecyclerView (not shown in Figure 14), the touch event receiving layer (ReceiveTouchView), the custom RecyclerView, and the zoom gesture detector. Among them, the native RecyclerView includes RecyclerView1, RecyclerView2, and RecyclerView3. For RecyclerView1, RecyclerView2, and RecyclerView3, you can refer to the description of Example 1 above, which will not be repeated here. The size of ReceiveTouchView is 1200 pixels wide and 2800 pixels high. The size of the custom RecyclerView is 8400 pixels wide and 20000 pixels high. It should be noted that both ReceiveTouchView and the custom RecyclerView are customized by this application. These two controls are not included in the native system of the Android system, and there is no need to initialize these two controls when running the gallery application.

[0244] In addition, after completing the initialization, the gallery application may display the album card page as shown in (b) in FIG. 1 .

[0245] It should be noted that if the phone was displaying the photo page before the user last exited the Gallery app, the photo page will be displayed after the Gallery app completes initialization. If the phone was displaying any album page before the user last exited the Gallery app, the album card page shown in Figure 1 (b) will be displayed after the Gallery app completes initialization.

[0246] C3, the touch driver receives the user's click operation on the camera card in the album card page and notifies the gallery application through WMS.

[0247] C4: The gallery app displays the album page based on the custom RecyclerView and notifies the WMS. Accordingly, the WMS determines ReceiveTouchView as the layer that handles the zoom event.

[0248] C5: The touch driver receives the user's two-finger press and passes the coordinates (x11, y11) and (x12, y12) of the two-finger press to the WMS. The WMS passes the coordinates (x11, y11) and (x12, y12) to ReceiveTouchView.

[0249] C6, ReceiveTouchView passes coordinates (x11, y11) and coordinates (x12, y12) to the zoom gesture detector.

[0250] Referring to the description of the above embodiment, since the size of ReceiveTouchView is consistent with the size of the screen, for example, both are 1200 pixels wide and 2800 pixels high, ReceiveTouchView can directly pass the coordinates (x11, y11) and (x12, y12) to the zoom gesture detector without coordinate transformation.

[0251] C7, the zoom gesture detector calculates the two-finger center coordinates (mBeginFocusx, mBeginFocusy) ​​and the two-finger distance d1 based on the coordinates (x11, y11) and the coordinates (x12, y12).

[0252] When creating ReceiveTouchView, the phone establishes a two-dimensional coordinate system with the upper left corner of ReceiveTouchView as the origin, with the x-axis pointing horizontally to the right and the y-axis pointing vertically downward. When the user presses two fingers somewhere on the screen, the phone calculates the center coordinates of the two fingers (mBeginFocusx, mBeginFocusy) ​​and the distance d1 between the two fingers based on the coordinates (x11, y11) and (x12, y12).

[0253] The coordinates of the two-finger center (mBeginFocusx, mBeginFocusy) ​​can be obtained by the following relationship (1):

[0254] The two-finger distance d1 can be obtained by the following relationship (2):

[0255] For example, when two fingers are pressed, the coordinates (x11, y11) = (200, 200) and the coordinates (x12, y12) = (800, 1000) are obtained. After the zoom gesture detector calculates the distance d1 = 1000 pixels between the two fingers, it can determine that the distance d1 = 1000 is greater than the threshold D = 540 pixels, deeming the operation valid, and recording the center coordinates of the two fingers (500, 600) and the distance d1 = 1000 pixels.

[0256] It can be understood that since ReceiveTouchView does not multiply the coordinates (200,200) and the coordinates (800,1000) by a zoom factor less than 1, the calculated distance d1 = 1000 pixels is the actual two-finger distance, and the problem of premature failure of the zoom action will not occur.

[0257] C8, the touch driver receives the user's two-finger movement operation (also called the first zoom operation), and sends the coordinates (xi1, yi1) and coordinates (xi2, yi2) after the two-finger movement operation to ReceiveTouchView through WMS.

[0258] C9, ReceiveTouchView passes the coordinates (xi1, yi1) and (xi2, yi2) to the zoom gesture detector.

[0259] Wherein, i is an integer greater than or equal to 2. i represents the i-th two-finger operation collected.

[0260] C10, the zoom gesture detector calculates the two-finger distance di based on the coordinates (xi1, yi1) and the coordinates (xi2, yi2).

[0261] The two-finger distance di can be obtained by the following equation (3):

[0262] For example, after a two-finger move operation, the coordinates (xi1, yi1) = (100, 100) and (xi2, yi2) = (460, 580) are obtained. After the zoom gesture detector calculates the two-finger distance d1 = 600 pixels, it can be determined that the two-finger distance di = 600 is greater than the threshold D = 540 pixels, and the operation is considered valid. Then, step C11 is executed.

[0263] It can be understood that since ReceiveTouchView does not multiply the coordinates (100,100) and the coordinates (460,580) by a zoom factor less than 1, the calculated distance di = 600 pixels is the actual two-finger distance, and the problem of premature failure of the zoom action will not occur.

[0264] C11. The pinch gesture detector calculates the zoom factor Si based on the distance di between two fingers and the distance d1 between two fingers.

[0265] The zoom factor Si can be obtained through the following relational expression (4):

[0266] where scale1 is the zoom factor when two fingers are pressed. di is the distance between two fingers corresponding to the i-th zoom operation, and d1 is the distance between two fingers corresponding to the two-finger press operation.

[0267] It should be understood that if the user reduces the distance between two fingers, then di < d1; if the user increases the distance between two fingers, then di > d1; if the user's two fingers do not move and the zoom factor is equal to 1, then it is determined to be invalid and there is no need to determine whether the zoom center is set. In a period T, the faster the two fingers move, the greater the difference between di and d1, and the faster the gear shift.

[0268] C12. The pinch gesture detector determines the zoom factor scale1 of the current gear and the gear shift critical points a1 and a2 for switching gears.

[0269] where a1 is the gear shift critical point for switching from the current gear (such as gear 5) to a higher gear (such as gear 15), and a2 is the gear shift critical point for switching from the current gear (such as gear 5) to a lower gear (such as gear 3).

[0270] Among the multiple gears preset in the mobile phone, there is a gear shift critical point between any two adjacent gears. Here, two adjacent gears mean that no other gears are set between these two gears.

[0271] Taking the gears preset in the album page as an example, which are gear 3, gear 5, gear 15, and gear 21 in sequence. Among them, gear 3 and gear 5 are called adjacent gears, gear 5 and gear 15 are called adjacent gears, and gear 15 and gear 21 are called adjacent gears. Referring to the description of FIG. 9A in the above embodiment, when the display area includes 3 columns of grids, the zoom factor of the custom RecyclerView is 1.0. Referring to the description of FIG. 9B in the above embodiment, when the display area includes 5 columns of grids, the size of the display area is larger than the size of the screen, and the zoom factor of the custom RecyclerView is 0.6. Referring to the description of FIG. 9C in the above embodiment, when the display area includes 15 columns of grids, the zoom factor of the custom RecyclerView is 0.2. Referring to the description of FIG. 9D in the above embodiment, when the display area includes 21 columns of grids, the zoom factor of the custom RecyclerView is 1 / 7.

[0272] In one implementation, for any two adjacent gears, the critical point for switching from a higher gear to a lower gear is equal to the critical point for switching from a lower gear to a higher gear.

[0273] If the scaling factor of the small gear is represented by a1, the scaling factor of the large gear is represented by a2, and the critical point of the gear switching is represented by a3, the critical point of the gear switching a3 can be calculated by the following relationship (5):

[0274] As shown in Table 1, according to the above relationship (5), it can be calculated that the critical point for switching gears between gears 3 and 5 is 0.8, the critical point for switching gears between gears 5 and 15 is 0.4, and the critical point for switching gears between gears 15 and 21 is 12 / 35.

[0275] Table 1

[0276] In another implementation, for any two adjacent gears, the critical point for switching from a large gear to a small gear is not equal to the critical point for switching from a small gear to a large gear.

[0277] If the scaling factor of the small gear is represented by a1, the scaling factor of the large gear is represented by a2, and the critical point of switching from the small gear to the large gear is represented by a4, the critical point of switching gears a4 can be calculated by the following relationship (6):

[0278] a4=a1-k1*(a1-a2) (6).

[0279] If the scaling factor of the small gear is represented by a1, the scaling factor of the large gear is represented by a2, and the critical point of switching from the large gear to the small gear is represented by a5, the critical point of switching gear a5 can be calculated by the following relationship (7):

[0280] a5=k1*(a1-a2)+a2 (7).

[0281] Taking k1 = 0.25 as an example, as shown in Table 2, according to the above relationship (6), it can be calculated that the critical point for switching from 3rd gear to 5th gear is 0.9, the critical point for switching from 5th gear to 15th gear is 0.5, and the critical point for switching from 15th gear to 21st gear is 13 / 70.

[0282] Table 2

[0283] Taking k1 = 0.25 as an example, as shown in Table 3, according to the above relationship (7), it can be calculated that the critical point for switching from 5th gear to 3rd gear is 0.7, the critical point for switching from 15th gear to 5th gear is 0.3, and the critical point for switching from 21st gear to 15th gear is 11 / 70.

[0284] Table 3

[0285] It should be noted that the above gears and the zoom multiples of each gear are fixed, and the switching gear critical points between adjacent gears are also fixed. Therefore, the mobile phone can pre-store each preset gear and the switching gear critical points between adjacent gears. In addition, the above method for calculating the switching gear critical point is only an exemplary illustration. In actual implementation, other methods can also be used to use other zoom multiples between the zoom multiple a1 of the small gear and the zoom multiple a2 of the large gear as the switching gear critical point between these two adjacent gears.

[0286] The pinch gesture detector can determine the next gear of the current gear according to whether the distance between the two fingers becomes larger or smaller. For example, after the user clicks on the "Camera" card 02 shown in (b) of FIG. 1, the mobile phone displays the album page shown in (a) of FIG. 2, and the current gear is gear 5, scale1 = 0.6. When the distance between the two fingers becomes larger, the next gear is gear 3, and the critical point a2 for switching from gear 5 to gear 3 is 0.8. For another example, when the current gear is gear 5 and the distance between the two fingers becomes smaller, the next gear is gear 15, and the critical point a1 for switching from gear 5 to gear 15 is 0.4. It should be noted that in C8 - C11, if i = 2 and the current two - finger movement operation is the first movement operation after the two fingers are pressed, the pinch gesture detector can calculate the zoom multiple Si of this cycle and use the zoom multiple (such as 0.6) of the gear when the two fingers are pressed as the zoom multiple of the previous cycle.

[0287] C13, the pinch gesture detector determines whether Si and scale1 satisfy Condition 1.

[0288] Among them, Condition 1 can include any one of the following conditions:

[0289] The first condition: The zoom multiple Si in the i - th reporting point cycle and the zoom multiple S(i - 1) in the (i - 1)-th reporting point cycle are on both sides of the zoom multiple scale1 of the current gear (such as gear 5).

[0290] If Si > S(i - 1), then the first condition is specifically: S(i - 1) < scale1 < Si.

[0291] For example, Si = 0.7, scale1 = 0.6, S(i - 1) = 0.5.

[0292] If Si < S(i - 1), then the first condition is specifically: Si < scale1 < S(i - 1).

[0293] For example, Si = 0.5, scale1 = 0.6, S(i - 1) = 0.7.

[0294] The second condition is that the scaling factor Si (which can also be expressed as scaleLevel) obtained in this reporting period is equal to the scaling factor scale1 of the current gear.

[0295] Specifically, the zoom factor oldScaleLevel obtained in the i-1 reporting period is greater than scale1 or oldScaleLevel is less than scale1. The zoom factor scaleLevel obtained in the i reporting period is equal to scale1.

[0296] For example, oldScaleLevel=1.1, scaleLevel=scale1=1.0.

[0297] The third condition is that the current two-finger touch operation is the first press operation, and the scaling factor S(i-1) (which can also be represented by oldScaleLevel) of the previous cycle is equal to the scaling factor scale1 of the current gear.

[0298] Specifically, the zoom factor oldScaleLevel=scale1 obtained in one reporting period, and the zoom factor scaleLevel>scale1 or scaleLevel<scale1 obtained in two reporting periods. For example, oldScaleLevel=scale1=1, scaleLevel=0.9.

[0299] If condition 1 is met, then execute C14 below first, and then execute C15 below.

[0300] If condition 1 is not met, then directly execute the following C15.

[0301] C14, the zoom gesture detector calculates the zoom center (pointx, mBeginFocusy) ​​based on the two-finger center coordinates (mBeginFocusx, mBeginFocusy).

[0302] It should be noted that the method for calculating the zoom center when two fingers are pressed can refer to the description of Figures 16 and 17 in the following embodiments, which will not be repeated here.

[0303] For example, if the zoom factor S1 of this cycle and the zoom factor S(i-1) of the previous cycle are on both sides of the zoom factor of the next gear, it means that the gear is about to be crossed, and the zoom center (pointx, mBeginFocusy) ​​needs to be calculated based on the double-finger center coordinates (mBeginFocusx, mBeginFocusy) ​​to ensure that the left and right edges of the custom RecyclerView are aligned with the left and right edges of the screen in the next gear; otherwise, there is no need to reset the zoom center.

[0304] It should be understood that by setting a zoom center, during a two-finger zoom operation, the custom RecyclerView can be enlarged or reduced with the zoom center as the center point, ensuring that the grid edge of the grid is aligned with the left and right edges of the screen, and avoiding half a grid or a blank area at the left and right edges of the screen.

[0305] C15, the zoom gesture detector determines whether the following conditions are met: Si < S(i - 1) and Si ≤ a1, or, Si > S(i - 1) and Si ≥ a2.

[0306] Among them, a1 is also called the first gear critical point, and the first gear critical point is the critical point of the zoom multiple for switching from the first gear (the current gear) to the second gear (the larger gear adjacent to the current gear).

[0307] a2 is also called the second gear critical point, and the second gear critical point is the critical point of the zoom multiple for switching from the first gear (the current gear) to the third gear (the smaller gear adjacent to the current gear).

[0308] If Si < S(i - 1), then the current operation is to reduce the custom RecyclerView. Further, when Si ≤ a1, the condition for switching gears is met, and the following C17 is executed; when Si > a1, the condition for switching gears is not met, and the following C16 is executed.

[0309] If Si > S(i - 1), then the current operation is to enlarge the custom RecyclerView. When Si ≥ a2, the condition for switching gears is met, and the following C17 is executed; when Si < a2, the condition for switching gears is not met, and the following C16 is executed.

[0310] It should be noted that the above C15 is described by taking the example of judging whether the gear switching condition is met by comparing the zoom multiples, and it does not limit this application. Referring to the above relational expression (4), the zoom multiple is calculated according to the two-finger distance, so the zoom gesture detector can also judge whether di < d1 and Si ≤ a1, or di > d1 and Si ≥ a2 are met to determine whether the gear switching condition is met.

[0311] C16, the zoom gesture detector determines not to switch gears.

[0312] Taking the example that the zoom gesture detector maintains 5 gears, if the user raises both fingers, regardless of whether the zoom multiple Si is equal to 0.6, finally 5 columns of images are displayed on the screen, and the left and right edges of the 5 columns of images are aligned with the left and right edges of the screen.

[0313] C17, the zoom gesture detector determines to switch gears.

[0314] Taking the zoom gesture detector switching from level 5 to level 3 as an example, after switching to level 3, if the user raises his hand with two fingers, regardless of whether the zoom factor Si is equal to 1.0, three columns of images will be displayed on the screen, and the left and right edges of the three columns of images will be aligned with the left and right edges of the screen.

[0315] The difference between the above C16 and C17 is: if the user raises his hand after determining not to switch gears, the image of the original gear will continue to be displayed on the screen (such as the first grid interface); if the user raises his hand after determining to switch gears, the image of the new gear will be displayed on the screen (such as the third grid interface).

[0316] As a first optional implementation method, after C17, C18 may be executed first, and then C19.

[0317] C18, the zoom gesture detector notifies the custom RecyclerView to refresh the content corresponding to the next gear ItemView.

[0318] Referring to (a) and (b) in Figure 10, when switching from gear 5 to gear 3, the ItemView corresponding to gear 3 is located in the 1st to 3rd columns of the custom RecyclerView. The actual adaptation position index values ​​corresponding to the ItemViews in the 1st to 3rd columns of the custom RecyclerView are renumbered. The numbering rules for the actual adaptation position index values ​​corresponding to the ItemViews in these 3 columns are as follows: the actual adaptation position index of the ItemView surrounded by the dotted box remains AP=6; starting from the ItemView surrounded by the dotted box, the AP value of each ItemView before the ItemView surrounded by the dotted box is reduced by 1 in sequence, and the AP value of each ItemView after the ItemView surrounded by the dotted box is increased by 1 in sequence. For the ItemViews in the 4th to 5th columns of the custom RecyclerView, the mobile phone can assign an AP value of -1 to each ItemView.

[0319] As a second optional implementation, C18 may not be executed after C17, but C19 may be executed directly.

[0320] Referring to (a) and (c) in FIG. 10 , when switching from gear 5 to gear 3, the adaptation position index value corresponding to each ItemView in the custom RecyclerView can also remain unchanged.

[0321] C19, the zoom gesture detector notifies the custom RecyclerView to zoom based on the zoom center and zoom factor Si, and displays the second grid interface.

[0322] Exemplarily, Figure 15 shows a first coordinate system and a second coordinate system. The first coordinate system takes the upper left corner of ReceiveTouchView as the origin, the x-axis is horizontal to the right, and the y-axis is vertically downward, where the size of ReceiveTouchView is equal to the size of the screen. The second coordinate system takes the upper left corner of the custom RecyclerView as the origin, the x-axis is horizontal to the right, and the y-axis is vertically downward. Scaling and displaying the custom RecyclerView based on the zoom center and the zoom factor Si has the following meanings: for point A1 at the zoom center, after being displayed to the screen at zoom factors of 1.0, 0.9, and 0.8, the coordinates of point A1 in the first coordinate system are all (pointx, mBeginFocusy), that is, when performing a zoom operation with point A1 as the center, the coordinates of point A1 in the first coordinate system remain unchanged. However, for points other than point A1, such as point B1, after being displayed on the screen at zoom factors of 1.0, 0.9, and 0.8, the coordinates of point B1 in the first coordinate system are (x1, y1), (x2, y2), and (x3, y3), respectively. That is, when the zoom operation is performed with point A1 as the center, the coordinates of point B1 in the first coordinate system change.

[0323] C20, the touch driver receives the user's two-finger hand-raising operation and notifies the zoom gesture detector of the hand-raising event through WMS and ReceiveTouchView.

[0324] The hand-up event indicates that both hands have left the screen and the zoom operation has ended.

[0325] C21, the zoom gesture detector determines the zoom factor corresponding to the gear position before the hand is raised, and notifies the custom RecyclerView to zoom and display based on the zoom factor corresponding to the gear position before the hand is raised, so that the left and right edges of the first grid interface or the third grid interface are aligned with the left and right edges of the screen.

[0326] For example, referring to Table 1 above, the critical point between level 3 and level 5 is 0.8, the critical point between level 5 and level 15 is 0.4, and the critical point between level 15 and level 21 is 12 / 35. If the zoom factor obtained in the previous reporting period before raising the hand is greater than 0.8, 3 columns of images will be displayed in the end, and the left and right edges of the 3 columns of images will be aligned with the left and right edges of the screen. If the zoom factor obtained in the previous reporting period before raising the hand is less than or equal to 0.8 and greater than 0.4, 5 columns of images will be displayed in the end, and the left and right edges of the 5 columns of images will be aligned with the left and right edges of the screen. If the zoom factor obtained in the previous reporting period before raising the hand is less than or equal to 0.2 and greater than 12 / 35, 15 columns of images will be displayed in the end, and the left and right edges of the 15 columns of images will be aligned with the left and right edges of the screen. If the zoom factor obtained in the previous reporting period before raising the hand is less than or equal to 12 / 35, 21 columns of images will be displayed in the end, and the left and right edges of the 21 columns of images will be aligned with the left and right edges of the screen.

[0327] In the above method, the size of ReceiveTouchView is consistent with the size of the screen. In the zoom scenario, ReceiveTouchView receives the user's two-finger operation, thereby solving the functional and scalability problems of the RecyclerView control directly receiving click events. In addition, in the process from two-finger pressing to two-finger lifting, the mobile phone can periodically collect touch operations and calculate the zoom factor based on the change in the distance between the two fingers in adjacent cycles, and then determine whether to switch from the current gear to the next gear based on the zoom factor. In this way, without leaving the two fingers on the screen, the user can trigger the electronic device to switch back and forth between any gears through continuous zoom operations, which improves the user's operating experience when viewing album pages.

[0328] The following example uses the case where the screen size of a mobile phone is 1200 pixels wide and 2800 pixels high, the size of a custom RecyclerView is 8400 pixels wide and 20000 pixels high, and the preset gears of the custom RecyclerView are 3, 5, 15, and 21, respectively. A method for calculating the zoom center is introduced in conjunction with Figures 16 and 17.

[0329] For example, Figure 16 shows a flow chart of a method for calculating a zoom center. Figure 17 shows a schematic diagram of a display area when switching from a small gear to a large gear.

[0330] (1) Determine the coordinates of the center of the two fingers (mBeginFocusx, mBeginFocusy), the number of display columns of the current gear currentShowSpan, the number of display columns of the next gear nextShowSpan, the zoom factor of the current gear scale1, the zoom factor of the next gear scale11, the original height initChildheight of each ItemView in the custom RecyclerView, and the display area of ​​the current gear mapped to the coordinates of the custom RecyclerView screenRectF.

[0331] As shown in FIG17 , the double-finger center coordinates (mBeginFocusx, mBeginFocusy) ​​= (370, 360) pixels.

[0332] The number of display columns of the current gear is currentShowSpan=5.

[0333] The number of display columns for the next gear is nextShowSpan=15.

[0334] The current gear's scaling factor is scale1 = 0.6.

[0335] The scaling factor of the next gear is scale11=0.2.

[0336] The original height of each ItemView in the custom RecyclerView is initChildheight = 400 pixels, also known as the first height.

[0337] In the second coordinate system, the display area of ​​the current gear is mapped to the upper left vertex coordinates of the custom RecyclerView as (2800, 2000), the upper right vertex coordinates as (4800, 2000), the lower left vertex coordinates as (2800, 6000), and the lower right vertex coordinates as (4800, 6000).

[0338] (2) According to the display area of ​​the current gear mapped to the coordinate screenRectF of the custom RecyclerView, the following is calculated:

[0339] The number of columns to the left of the current gear is span.left = 7 columns;

[0340] The left offset of the current gear is screenRectF.left = span.left * initChildheight = 7 * 400 = 2800, also known as the first distance;

[0341] The width of the display area of ​​the current gear is screenRectF.width = currentShowSpan * initChildheigh = 2000 pixels.

[0342] Among them, the number of columns offset to the left of the current gear refers to the number of columns from the left edge of the display area of ​​the current gear to the Y axis, and the left offset of the current gear refers to the distance from the left edge of the display area of ​​the current gear to the Y axis.

[0343] (3) According to the distance mBeginFocusx from the center of the two fingers to the left edge of the screen, the original height initChildheight of each ItemView in the custom RecyclerView, and the zoom factor scale1 of the current gear, calculate the number of columns currentSelectIndex in the display area where the center of the two fingers is at the current gear.

[0344] Among them, currentSelectIndex represents the number of columns in the display area of ​​the center of the two fingers in the current gear, mBeginFocusx represents the distance from the center of the two fingers to the left edge of the screen, initChildheight represents the original height of each ItemView in the custom RecyclerView, and scale1 represents the zoom factor of the current gear.

[0345] (4) According to the distance mBeginFocusx from the center of the two fingers to the left edge of the screen, the original height initChildheight of each ItemView in the custom RecyclerView, and the zoom factor scale11 of the next gear, calculate the number of columns nextSelectIndex in the display area of ​​the center of the two fingers in the next gear

[0346] (5) According to the number of columns span.left offset on the left side of the current gear, the number of columns currentSelectIndex of the center of the double finger in the display area under the current gear, and the number of columns nextSelectIndex of the center of the double finger in the display area under the next gear, calculate the number of columns Index1 of the first column of the display area of ​​the next gear in the custom RecyclerView.

[0347] Index1=span.left+currentSelectIndex-nextSelectIndex+1=7+2-5+1=5.

[0348] (6) According to the original height initChildheight of each ItemView in the custom RecyclerView and the number of columns Index1 from the left edge of the display area of ​​the next gear in the custom RecyclerView to the left edge of the custom RecyclerView, the distance X1 from the left edge of the display area of ​​the next gear in the custom RecyclerView to the left edge of the custom RecyclerView is obtained, which is also called the second distance.

[0349] X1 = (Index1 - 1) * initChildheight = (5 - 1) * 400 = 1600 pixels.

[0350] It should be noted that the number of columns in the first column of the display area of ​​the next gear in the custom RecyclerView refers to the number of columns in the first column of the display area of ​​the next gear calculated by taking the leftmost column of the custom RecyclerView as the first column, increasing the number of columns to the right, and the rightmost column as the last column as a reference, such as Index1 = screenRectF.left + currentSelectIndex - nextSelectIndex + 1 = 7 + 2 - 5 + 1 = 5. As another implementation method, the leftmost column of the custom RecyclerView can be taken as the 0th column, increasing the number of columns to the right, and the rightmost column as the last column as a reference, and the number of columns in the first column of the display area of ​​the next gear calculated in the custom RecyclerView, such as Index = span.left + currentSelectIndex - nextSelectIndex = 7 + 2 - 5 = 4 columns. It should be understood that no matter what method is used as a reference, the X-axis coordinate of the upper left corner of the first ImageView in the first column of the display area of ​​the next gear calculated in the end remains consistent.

[0351] (7) According to the number of columns of the left offset of the current gear, span.left, the number of columns of the center of the two fingers in the display area in the current gear, currentSelectIndex, the number of columns of the center of the two fingers in the display area in the next gear, nextSelectIndex, and the number of columns of the display area in the next gear, nextShowSpan, calculate the number of columns Index2 of the last column of the display area of ​​the next gear in the custom RecyclerView.

[0352] Index2=span.left+currentSelectIndex-nextSelectIndex+nextShowSpan=7+2-5+15=19.

[0353] (8) Substitute the original height initChildheight of each ItemView in the custom RecyclerView and the column number Index2 of the last column of the display area of ​​the next gear in the custom RecyclerView to obtain the distance X2 from the right edge of the display area of ​​the next gear in the custom RecyclerView to the left edge of the custom RecyclerView, also known as the third distance.

[0354] X2=Index2*initChildheight=19*400=7600 pixels.

[0355] (9) Calculate the distance centerX from the zoom center to the left edge of the custom RecyclerView based on the left offset of the current gear screenRectF.left, the width of the display area of ​​the current gear screenRectF.width, the distance X1 from the left edge of the display area of ​​the next gear in the custom RecyclerView to the left edge of the custom RecyclerView, and the distance X2 from the right edge of the display area of ​​the next gear in the custom RecyclerView to the left edge of the custom RecyclerView.

[0356] Because the scaling center centerX has the same proportional position in the current gear and the next gear before and after scaling, the following relationship can be obtained:

[0357] By transforming the above relationship, we can get:

[0358] (10) Map the scaling center centerX (also called the first coordinate value) in the custom RecyclerView coordinate system to the screen coordinate system to obtain pointx (also called the second coordinate value).

[0359] The x-axis coordinate of the scaling center is calculated as follows:

[0360] pointx=(centerX-X1)*L / (nextShowSpan*initChildheight)

[0361] =(3400-1600)*1200 / (15*400)

[0362] =360 pixels.

[0363] Where L represents the screen width.

[0364] (11) Determine the coordinates of the zoom center as (pointx, mBeginFocusy).

[0365] For example, the coordinates of the zoom center are (pointx, mBeginFocusy) ​​= (360, 360).

[0366] The coordinates of the two-finger center (360, 360) are different from the coordinates of the zoom center (370, 360). In some cases, when the relative position of the current gear display area and the custom RecyclerView is changed, or the coordinates of the two-finger center are changed, the coordinates of the two-finger center and the zoom center may be the same.

[0367] In the above solution, by setting the zoom center, the custom RecyclerView can be enlarged or reduced with the zoom center as the center point, ensuring that the left and right edges of the grid are aligned with the left and right edges of the screen, respectively, to avoid half a grid or blank area on the left and right edges of the screen.

[0368] Exemplarily, FIG18 shows a flow chart of a method for refreshing an AP value.

[0369] D1, based on the above steps (1) to (11), determines the zoom center (pointx, mBeginFocusy), the column number Index1 of the first column of the display area of ​​the next gear in the custom RecyclerView, and the column number Index2 of the last column of the display area of ​​the next gear in the custom RecyclerView.

[0370] The description of steps (1) to (11) in the above embodiment can be referred to and will not be repeated here.

[0371] D2, determines the LP value of the ItemView selected by the zoom center (also called selectLP), and the AP value of the ItemView selected by the zoom center (also called selectAP).

[0372] The ItemView selected by the zoom center refers to the ItemView where the coordinates of the zoom center are located.

[0373] For each ItemView in your custom RecyclerView, you can perform the following steps:

[0374] D3, determine the number of columns LineNum and LP value of an ItemView in a custom RecyclerView.

[0375] The column number lineNum where the grid to be adjusted is located can be determined according to the following relationship:

[0376] LineNum=LP%maxShowSpan+1.

[0377] Among them, maxShowSpan represents the maximum gear (for example, gear 21).

[0378] D4, determine whether Index1≤LineNum≤Index2 is satisfied.

[0379] If Index1≤LineNum≤Index2 is satisfied, execute D5.

[0380] If Index1≤LineNum≤Index2 is not satisfied, execute D8.

[0381] D5, determine whether LP≤selectLP is satisfied.

[0382] If LP≤selectLP, execute D7.

[0383] If LP>selectLP, execute D6.

[0384] D6, determine the AP value of this ItemView according to the first formula.

[0385] Among them, the first formula can be:

[0386] D7, determine the AP value of this ItemView according to the second formula.

[0387] The second formula can be:

[0388] D8, set the AP value to -1.

[0389] Among them, AP=-1 represents that the actual adaptation position value is invalid. At this moment, an ItemView may display a blank image or continue to display the image shown in (a) in FIG10 .

[0390] In the above scheme, when the cross-gear condition is met, the AP value of the grid can be refreshed. Since the AP value of the grid corresponds to the order of the images displayed in the grid in the album, the order of the images displayed on the screen is coherent.

[0391] Based on the flowchart provided in FIG14 and in combination with FIG19 , the following describes how to implement the cross-gear zoom method of the grid interface provided by the present application in the i-th reporting period, where i is a positive integer.

[0392] As shown in FIG. 19 , the method may include the following S1 to S14 .

[0393] S1. The pinch gesture detector calculates the distance between two fingers di and the zoom factor Si based on the coordinates of two fingers (xi1, yi1) and (xi2, yi2).

[0394] For the implementation of S1, reference can be made to the description of C10 above, which will not be elaborated here.

[0395] S2. The pinch gesture detector obtains the zoom factor scale2 of the boundary gear of the custom RecyclerView.

[0396] The above-mentioned boundary gear of the custom RecyclerView refers to the maximum gear and the minimum gear of the custom RecyclerView.

[0397] Taking the pre-set gears of the custom RecyclerView as 3, 5, 15, and 21 in sequence as an example, the boundary gears are 3 and 21. Among them, the zoom factor scale2 of the boundary gear 3 is scale2 = scalemax = 1.0, and the zoom factor scale2 of the boundary gear 21 is scale2 = scalemin = 1 / 7.

[0398] S3. The pinch gesture detector determines whether the current scene is to continue zooming in at the minimum gear or continue zooming out at the maximum gear.

[0399] Exemplarily, the pinch gesture detector can compare the zoom factor Si and the zoom factor of the boundary gear.

[0400] If Si > scalemax and di > d(i - 1), it can be determined that the current scene is to continue zooming in at the minimum gear (such as gear 3), and the following S4 is executed.

[0401] If Si < scalemin and di < d(i - 1), it can be determined that the current scene is to continue zooming out at the maximum gear (such as gear 21), and the following S4 is executed.

[0402] If neither Si > scalemax and di > d(i - 1) nor Si < scalemin and di < d(i - 1) is satisfied, it can be determined that the current scene is neither to zoom in on the custom RecyclerView based on the minimum gear (such as gear 3) nor to zoom out on the custom RecyclerView based on the maximum gear (such as gear 21), and the following S6 is executed.

[0403] S4. The pinch gesture detector determines whether condition 2 is satisfied.

[0404] As an example, condition 2 can include any of the following conditions:

[0405] Condition 1: The scaling factor Si in the i-th reporting period and the scaling factor S(i-1) in the (i-1)-th reporting period are on both sides of the scaling factor at the boundary gear.

[0406] If Si > scalemax, then Condition 1 is specifically: Si > scalemax > S(i-1).

[0407] For example, Si = 1.1, scalemax = 1.0, S(i-1) = 0.9.

[0408] If Si < scalemin, then Condition 1 is specifically: Si < scalemin < S(i-1).

[0409] For example, Si = 0.1, scalemin = 1 / 7, S(i-1) = 0.2.

[0410] Condition 2: The current two-finger touch operation is the first press operation, and the scaling factor S(i-1) (which can also be represented by oldScaleLevel) in the previous period is equal to the scaling factor scale2 at the boundary gear.

[0411] The scaling factor oldScaleLevel = scale2 = scalemax obtained at i = 1, and the scaling factor scaleLevel > scale2 = scalemax obtained at i = 2; or, the scaling factor oldScaleLevel = scale2 = scalemin obtained at i = 1, and the scaling factor scaleLevel < scale2 = scalemin obtained at i = 2.

[0412] When the user first presses two fingers, the scaling factor of the previous reporting period has not been stored, and it can be defaulted that the scaling factor of the current gear is equal to the scaling factor of the first reporting period.

[0413] If Condition 2 is satisfied, then first execute S5 below, and then execute S13 below.

[0414] If Condition 2 is not satisfied, then do not execute S5 below and directly execute S13 below.

[0415] S5: The pinch gesture detector uses the center of the two fingers as the scaling center.

[0416] That is, the coordinates of the center of the two fingers are the same as the coordinates of the scaling center.

[0417] It should be understood that after sliding past the boundary gear position, there is no issue of edge alignment involved, and the pinch gesture detector can directly set the center of the two fingers as the zoom center. After sliding past the boundary gear position, there is no need to switch the gear critical point anymore, and the mobile phone does not need to refresh the content of the current gear in the screen to the content of the next gear, but only changes the zoom multiple of the custom RecyclerView.

[0418] In S6, the pinch gesture detector determines the zoom multiple scale1 of the current gear and the gear switching critical points a1 and a2.

[0419] Among them, a1 is the gear switching critical point for switching to a larger gear from the current gear, and a2 is the gear switching critical point for switching to a smaller gear from the current gear.

[0420] Each gear of the custom RecyclerView is pre-set, such as 3 gears, 5 gears, 15 gears, and 21 gears.

[0421] For example, the pinch gesture detector can determine the zoom multiple scale1 of the current gear according to the zoom multiple Si.

[0422] Taking Table 1 above as an example, if Si≥0.8, then the current gear belongs to the 3 - gear, and the zoom multiple scale1 of the 3 - gear = 1.0. If 0.4≤Si<0.8, then the current gear belongs to the 5 - gear, and the zoom multiple scale1 of the 5 - gear = 0.6. If 12 / 35≤Si<0.4, then the current gear belongs to the 15 - gear, and the zoom multiple scale1 of the 15 - gear = 0.6. If Si<12 / 35, then the current gear belongs to the 21 - gear, and the zoom multiple scale1 of the 21 - gear = 1 / 7.

[0423] In S7, the pinch gesture detector determines whether Si and scale1 satisfy Condition 1.

[0424] If Condition 1 is satisfied, then first execute S8 below, and then execute S9 below.

[0425] If Condition 1 is not satisfied, then directly execute S9 below.

[0426] In S8, the pinch gesture detector calculates the zoom center (pointx, mBeginFocusy) according to the two - finger center coordinates (mBeginFocusx, mBeginFocusy).

[0427] In S9, the pinch gesture detector determines whether it satisfies: Si < S(i - 1) and Si≤a1, or, Si > S(i - 1) and Si≥a2.

[0428] If Si < S(i - 1), then the current operation is to shrink the custom RecyclerView. Further, when Si ≤ a1, the condition for switching gears is met, and S11 below is executed; when Si > a1, the condition for switching gears is not met, and S10 below is executed.

[0429] If Si > S(i - 1), then the current operation is to enlarge the custom RecyclerView. When Si ≥ a2, the condition for switching gears is met, and S11 below is executed; when Si < a2, the condition for switching gears is not met, and S10 below is executed.

[0430] S10, the pinch gesture detector determines not to switch gears.

[0431] S11, the pinch gesture detector determines to switch gears.

[0432] As a first optional implementation, after S11, S12 can be executed first, and then S13.

[0433] S12, the pinch gesture detector refreshes the content corresponding to the next gear ItemView in the custom RecyclerView.

[0434] As a second optional implementation, after S11, S12 may not be executed, but S13 can be directly executed.

[0435] S13, the pinch gesture detector sets the zoom factor of the custom RecyclerView to Si.

[0436] Specifically, the pinch gesture detector can call the native zoom factor interface of the Android system to set the zoom factor Si as the zoom factor of the current custom RecyclerView. It can be understood that in each reporting period, by setting the zoom factor Si in real time, the size of the custom RecyclerView displayed on the screen can be changed to ensure that the custom RecyclerView follows the user's operation completely.

[0437] S14, the pinch gesture detector notifies the custom RecyclerView to perform a zoom display based on the zoom center and the zoom factor Si.

[0438] For the specific implementation of S6 to S14, reference can be made to the descriptions of C11 to C19 above, which will not be elaborated here.

[0439] For ease of understanding, the following uses 2 embodiments to illustrate the specific implementation of the cross-gear zoom method for the grid interface of the album page provided in this application.

[0440] In the following two embodiments, in order to more clearly show the scaling process in Figures 20A to 20G and Figures 21A to 21D, a custom RecyclerView with a smaller size and a smaller number of columns is used as an example for explanation. It can be understood that in actual implementation, the total number of columns of the custom RecyclerView can be more, such as the 21 columns listed in the above embodiment. In addition, the numbers in Figures 20A to 20G and Figures 21A to 21D represent the actual adaptation position index value (AP value) of ItemView. It should be understood that in actual implementation, the size of the custom RecyclerView, the gear position of the custom RecyclerView, the number of rows and columns of the custom RecyclerView, the actual adaptation position index value, the actual layout position index value, etc. can all be adjusted according to actual needs such as the screen size and user operation.

[0441] Example 1

[0442] 20A to 20G are schematic diagrams showing interface changes when switching from a large gear to a small gear.

[0443] In Figures 20A to 20G, the screen size is 1200 pixels wide by 2800 pixels high, the custom RecyclerView consists of 5 columns and 14 rows of grids, the size of each grid in the custom RecyclerView is 400 pixels wide by 400 pixels high, the size of the custom RecyclerView is 2000 pixels wide by 5600 pixels high, and the custom RecyclerView is preset with at least two gears: 3 and 5. When the display area in the custom RecyclerView includes 3 columns of grids, the zoom factor is 1.0. When the display area in the custom RecyclerView includes 5 columns of grids, the zoom factor is 0.6.

[0444] As shown in Figure 20A, when the custom RecyclerView is in level 5, five columns of grids are displayed on the screen. The AP of the first grid displayed on the screen is 105, and the AP of the last grid displayed on the screen is 154. At this moment, the zoom factor scale1 in the current level is 0.6. When the user wants to view an enlarged image of an image from image 105 to image 154, the user can press two fingers in the area corresponding to this image, such as pressing two fingers in the area corresponding to image 124. In the first reporting cycle, the phone can obtain the two-finger coordinates (mBeginFocusx, mBeginFocusy) ​​= (1080, 840) and calculate the two-finger distance based on the two-finger coordinates, such as d1 = 1000 pixels. Since there is only one two-finger distance d1 = 1000 in the first reporting cycle, and other two-finger distances have not yet been obtained, the zoom trend cannot be determined. Therefore, there is no need to set the two-finger center coordinates, and there is no need to refresh the screen content. From the user's perspective, the content displayed on the screen does not change.

[0445] Based on Figure 20A, as shown in Figure 20B, the user can increase the distance between the two fingers, which is also called the first zoom operation. In the second reporting cycle, the mobile phone can obtain the new two-finger coordinates and calculate the two-finger distance based on the two-finger coordinates, such as d2 = 1167 pixels, and then calculate the zoom factor S1 = 0.6 + 0.6 * (1167-1000) / 1000 = 0.7 based on the two-finger distance d1 and the two-finger distance d2. Since the current scene belongs to: the zoom factor oldScaleLevel = scale1 = 0.6 when the two fingers are pressed for the first time, it is necessary to set the zoom center (pointx, mBeginFocusy). In addition, the current cycle's zoom factor scaleLevel = 0.7 is less than the critical point of switching from gear 5 to gear 3 (1.0 + 0.6) / 2 = 0.8. Therefore, the phone does not need to refresh the content of the current gear on the screen to display the second grid interface. Instead, it directly sets the zoom factor of the custom RecyclerView to 0.7. At this moment, from the user's perspective, the content displayed on the screen is enlarged with (pointx, mBeginFocusy) ​​as the center point.

[0446] The coordinates of the zoom center are calculated as (pointx, mBeginFocusy) ​​and can be calculated as follows:

[0447] Determine the number of display columns for the current gear: currentShowSpan=5 columns.

[0448] The number of display columns for the next gear is determined to be nextShowSpan=3 columns.

[0449] The number of columns offset to the left of the display area of ​​level 5 is determined to be span.left=0 columns.

[0450] The left offset of the display area of ​​level 5 is determined to be: screenRectF.left = 0 pixels.

[0451] The width of the display area of ​​level 5 is determined to be screenRectF.width = 2000 pixels.

[0452] Determine the column number where the center of the two fingers is located in level 5: currentSelectIndex = 5 columns.

[0453] Determine the column number where the center of the two fingers is located in gear 3: nextSelectIndex = 3 columns.

[0454] Determine the number of columns in the first column of the display area of ​​3 levels in the custom RecyclerView:

[0455] Index1=span.left+currentSelectIndex-nextSelectIndex+1=0+5-3+1=3 columns.

[0456] Determine the X-axis coordinate of the upper left corner of the first ImageView in the first column of the display area of ​​​​level 3:

[0457] X1 = (3-1) * 400 = 800 pixels.

[0458] Determine the number of columns in the custom RecyclerView for the last column of the display area of ​​​​level 3:

[0459] Index2=span.left+currentSelectIndex-nextSelectIndex+nextShowSpan=0+5-3+3=5 columns.

[0460] Determine the X-axis coordinate of the lower right corner of the last ImageView in the last column of the display area of ​​​​level 3:

[0461] X2=5*400=2000 pixels.

[0462] Determine the zoom center centerX when switching from 5th gear to 3rd gear:

[0463] Map the scaling center centerX in the custom RecyclerView coordinate system to the screen coordinate system to obtain the x-axis coordinate of the scaling center: pointx = 1200 pixels.

[0464] Finally, the coordinates of the zoom center are calculated as (pointx, mBeginFocusy) ​​= (1200, 840). That is, the coordinates of the zoom center (1200, 840) are different from the coordinates of the two-finger center (1080, 840).

[0465] It should be understood that when switching from gear 5 to gear 3, by correcting the zoom center in advance, it can be ensured that when switching to gear 3, the left edge of the display area is aligned with the left edge of the screen, and the right edge of the display area is aligned with the right edge of the screen, avoiding incomplete display of the grid interface or blank areas on the left and right edges of the screen.

[0466] Based on FIG20B , as shown in FIG20C , the user can continue to increase the distance between the two fingers, which is also called the second zoom operation. In the third reporting period, the mobile phone can obtain the new two-finger coordinates and calculate the two-finger distance based on the two-finger coordinates, such as D3 = 1500 pixels, and then calculate the zoom factor S2 = 0.6 + 0.6 * (1500-1000) / 1000 = 0.9 based on the two-finger distance d1 and the two-finger distance D3. Since the zoom factor of 0.7 in the two reporting periods and the zoom factor of 0.9 in the third reporting period are both less than the zoom factor of 1.0 in the third gear, there is no need to reset the zoom center, and the zoom center (1200, 840) remains unchanged. In addition, the current zoom factor of 0.9 is greater than the critical point of 0.8, so the phone can refresh the AP values ​​of all ItemViews corresponding to the 3rd to 5th columns of the custom RecyclerView, refresh the AP values ​​of all ItemViews corresponding to the 1st to 2nd columns of the custom RecyclerView to -1, and set the zoom factor of the custom RecyclerView to 0.9 to display the fourth grid interface.

[0467] Among them, the AP value of all grids corresponding to the 3rd to 5th columns of the custom RecyclerView is refreshed as follows: selectLP=124 of the ItemView selected by the zoom center. The LP value of the ItemView selected by the zoom center can also be obtained. Referring to the description of the above embodiment, the LP value of each ItemView in the 3rd to 5th columns and the 1st to 5th rows of the custom RecyclerView can be calculated based on the second formula of the above embodiment, and the LP value of each ItemView in the 3rd to 5th columns and the 7th to 14th rows of the custom RecyclerView can be calculated based on the first formula of the above embodiment.

[0468] It should be noted that the gear mentioned in the above embodiment refers to the number of columns of images displayed on the screen for a long time after the user ends the two-finger operation. For example, after the user sets the zoom factor of the custom RecyclerView to the zoom factor of 1.0 corresponding to the 3rd gear through the two-finger operation, if the two fingers leave the screen, the image displayed on the screen will continue to display the 3rd gear before receiving the next touch operation. However, in actual implementation, the user may not directly set the zoom factor to 1.0. In the first scenario, the user may set the zoom factor of the custom RecyclerView to a value in the interval (0.8, 1.0) and then leave the screen with two fingers. In the second scenario, the user may set the zoom factor of the custom RecyclerView to a zoom factor greater than 1.0. For these two scenarios, the present application provides the following solutions respectively.

[0469] Solution for the first scenario:

[0470] Based on Figure 20C, as shown in Figure 20D, after the user sets the zoom factor of the custom RecyclerView to 0.9, in the fourth reporting cycle, the phone detects that two fingers leave the screen (raise the hand), and at this moment the edge of the grid interface on the screen is not aligned with the edge of the screen. In this case, the phone keeps the zoom center (1200, 840) unchanged, sets the zoom factor of the custom RecyclerView to 1.0, and displays the third grid interface. The left edge of the first column of grids displayed on the screen (such as image 116) is aligned with the left edge of the screen, and the right edge of the last column of grids displayed on the screen (such as image 136) is aligned with the right edge of the screen.

[0471] It should be noted that, when switching from the current reporting period to the next reporting period, the various figures of the embodiments of the present application are explained by taking the updating of the screen display content as an example. In actual implementation, in order to ensure the continuity of the picture changes and avoid visual jumps, the mobile phone can play a video switching animation, which consists of multiple video frames. The first frame of the multiple video frames is the picture corresponding to the current reporting period. The last frame of the multiple video frames is the picture corresponding to the next reporting period. The zoom center corresponding to each video frame in the multiple video frames is consistent. In the scenario of switching from a large gear to a small gear, the zoom multiple of each video frame in the multiple video frames increases successively. In the scenario of switching from a small gear to a large gear, the zoom multiple of each video frame in the multiple video frames decreases successively.

[0472] Take the magnified scene of the grid interface corresponding to Figure 20D as an example. The switching animation includes 11 video frames, and the zoom centers of these video frames are all (1200, 840). The zoom factor of the first frame is 0.9, the zoom factor of the second frame is 0.91, the zoom factor of the third frame is 0.92, ..., the zoom factor of the tenth frame is 0.99, and the zoom factor of the eleventh frame is 1.0. It can be understood that before playing the switching animation, the first frame has been displayed on the screen, so the mobile phone can also play it frame by frame from the second frame until the eleventh frame. It should be noted that the number of video frames included in the video switching animation can be pre-set or adjusted according to the rate of change of the zoom factor.

[0473] Solution for the second scenario:

[0474] Based on Figure 20C, as shown in Figure 20E, after the user sets the zoom factor of the custom RecyclerView to 0.9, the user can also continue to increase the distance between the two fingers, which is also called the third zoom operation. In the fourth reporting period, the mobile phone can obtain the new two-finger coordinates and calculate the two-finger distance based on the two-finger coordinates, such as d4 = 1833 pixels, and then calculate the zoom factor S3 = 0.6 + 0.6 * (1833-1000) / 1000 = 1.1 based on the two-finger distance d1 and the two-finger distance d4. Since the zoom factor of 0.9 in the three reporting periods is less than the zoom factor of 1.0 in the third gear, and the zoom factor of 1.1 in the fourth reporting period is greater than the zoom factor of 1.0 in the third gear, the current zoom has slipped past the third gear (i.e., it has achieved cross-gear), so the zoom center needs to be reset to ensure edge alignment. In addition, the current 3rd gear is already the smallest gear. After sliding past the 3rd gear, there is no edge alignment issue. The phone can directly set the center of the two fingers (1080,840) as the zoom center and display the sixth grid interface. After sliding past the 3rd gear, there is no need to switch the gear critical point. The phone does not need to refresh the content of the custom RecyclerView, but directly sets the zoom factor of the custom RecyclerView to 1.1, that is, directly enlarge the content displayed on the screen.

[0475] Based on Figure 20E, as shown in Figure 20F, after the user sets the zoom factor of the custom RecyclerView to 1.1, the user can continue to increase the distance between the two fingers. In the 5th reporting period, the mobile phone can obtain the new two-finger coordinates and calculate the two-finger distance based on the two-finger coordinates, such as d5 = 2500 pixels, and then calculate the zoom factor S4 = 0.6 + 0.6 * (2500-1000) / 1000 = 1.5 based on the two-finger distance d1 and the two-finger distance d5. Since the zoom factor of 1.1 in the 4 reporting periods and the zoom factor of 1.5 in the 5th reporting period are both greater than the zoom factor of 1.0 in the 3rd gear, there is no need to reset the zoom center, that is, keep the zoom center (1080, 840). The mobile phone can directly set the zoom factor of the custom RecyclerView to 1.5, and further enlarge the screen display content with (1080, 840) as the zoom center.

[0476] Based on Figure 20F, as shown in Figure 20G, after the user sets the zoom factor of the custom RecyclerView to 1.5, the user lifts two fingers off the screen. Since the current interface is only a temporary transition interface and does not belong to the pre-set gear, after the two fingers are raised, the phone returns to the minimum gear (3rd gear) and displays the seventh grid interface. As an example, the phone maintains the zoom center (1080, 840) and sets the zoom factor of the custom RecyclerView to 1.0. After that, the phone plays a rebound animation, switching from the screen with a zoom factor of 1.5 to the screen with a zoom factor of 1.0, and finally keeps the display at the minimum gear (3rd gear).

[0477] Example 2

[0478] 21A to 21D are schematic diagrams showing interface changes when switching from a small gear to a large gear.

[0479] In Figures 21A to 21D, the screen size is 1200 pixels wide and 2800 pixels high, the custom RecyclerView consists of 7 columns and 14 rows of grids, the size of each grid in the custom RecyclerView is 400 pixels wide and 400 pixels high, the size of the custom RecyclerView is 2800 pixels wide and 5600 pixels high, and the custom RecyclerView has three preset gears: 3, 5, and 7. When the display area in the custom RecyclerView includes 3 columns of grids, the zoom factor is 1.0. When the display area in the custom RecyclerView includes 5 columns of grids, the zoom factor is 0.6. When the display area in the custom RecyclerView includes 7 columns of grids, the zoom factor is 3 / 7.

[0480] As shown in Figure 21A, when the custom RecyclerView is in gear 3, three columns of grids are displayed on the screen. The AP of the first grid displayed on the screen is 72, and the AP of the last grid displayed on the screen is 89. At this moment, the zoom factor of the current gear is scale1 = 1.0. When the user wants to view more images, the user can press two fingers in the area corresponding to a certain image, such as pressing two fingers in the area corresponding to image 75. In the first reporting cycle, the mobile phone can obtain the coordinates of the two fingers and calculate the two-finger distance based on the two-finger coordinates, such as d1 = 1500 pixels, and the two-finger center coordinates (mBeginFocusx, mBeginFocusy) ​​= (300, 600). Since there is only one two-finger distance d1 = 1500 pixels in the first reporting cycle, and other two-finger distances have not yet been obtained, the zoom trend cannot be determined. Therefore, there is no need to set the two-finger center coordinates or refresh the screen content.

[0481] Based on Figure 21A, as shown in Figure 21B, the user can reduce the distance between the two fingers. In the second reporting cycle, the mobile phone can obtain the new two-finger coordinates and calculate the two-finger distance based on the two-finger coordinates, such as d2 = 1350 pixels, and then calculate the zoom factor S1 = 1.0 + 1.0 * (1350-1500) / 1500 = 0.9 based on the two-finger distance d1 and the two-finger distance d2. Since the current scene belongs to: the zoom factor oldScaleLevel = scale1 = 1.0 when the two fingers are pressed for the first time, it is necessary to set the zoom center (pointx, mBeginFocusy). In addition, the current cycle's zoom factor scaleLevel = 0.9 is greater than the critical point of switching from gear 3 to gear 5 (1.0 + 0.6) / 2 = 0.8. Therefore, the mobile phone does not need to refresh the content of the custom RecyclerView, but directly sets the zoom factor of the custom RecyclerView to 0.9. At this moment, from the user's perspective, the content displayed on the screen is slightly reduced with (pointx, mBeginFocusy) ​​as the center point.

[0482] In addition, the coordinates of the zoom center are calculated as (pointx, mBeginFocusy) ​​and the calculation method can be as follows:

[0483] Determine the number of display columns for the current gear: currentShowSpan=3 columns.

[0484] The number of display columns for the next gear is determined to be nextShowSpan=5 columns.

[0485] The number of columns offset to the left of the display area of ​​level 3 is determined to be span.left = 1 column.

[0486] The left offset of the display area of ​​level 3 is determined to be: screenRectF.left = 400 pixels.

[0487] The width of the display area of ​​level 3 is determined to be screenRectF.width = 1200 pixels.

[0488] Determine the column number where the center of the two fingers is located in gear 3: currentSelectIndex = 1 column.

[0489] Determine the column number where the center of the two fingers is located in level 5: nextSelectIndex = 2 columns.

[0490] Determine the number of columns in the first column of the 5-level display area in the custom RecyclerView:

[0491] Index1=span.left+currentSelectIndex-nextSelectIndex+1=1+1-2+1=1 column.

[0492] Determine the X-axis coordinate of the upper left corner of the first ImageView in the first column of the display area of ​​5 levels:

[0493] X1=(1-1)*400=0 pixels.

[0494] Determine the number of columns in the custom RecyclerView for the last column of the 5-level display area:

[0495] Index2=span.left+currentSelectIndex-nextSelectIndex+nextShowSpan=1+1-2+5=5 columns.

[0496] Determine the X-axis coordinate of the lower right corner of the last ImageView in the last column of the display area of ​​5 levels:

[0497] X2=5*400=2000 pixels.

[0498] Determine the zoom center centerX when switching from 5th gear to 3rd gear:

[0499] Map the scaling center centerX in the custom RecyclerView coordinate system to the screen coordinate system to obtain the x-axis coordinate of the scaling center: pointx = 600 pixels.

[0500] The coordinates of the zoom center are finally calculated as (pointx, mBeginFocusy) ​​= (600, 600).

[0501] It should be understood that when switching from gear 3 to gear 5, by correcting the zoom center, it can be ensured that when switching to gear 5, the left edge of the display area is aligned with the left edge of the screen, and the right edge of the display area is aligned with the right edge of the screen, avoiding incomplete image display or blank space.

[0502] Based on Figure 21B, as shown in Figure 21C, the user can continue to reduce the distance between the two fingers. In the third reporting period, the mobile phone can obtain the new coordinates of the two fingers and calculate the distance between the two fingers based on the coordinates of the two fingers, such as d3 = 700 pixels, and then calculate the zoom factor S2 = 1.0 + 1.0 * (1050-1500) / 1500 = 0.7 based on the distance between the two fingers d1 and the distance between the two fingers d3. Since the zoom factor of 0.9 in the two reporting periods and the zoom factor of 0.7 in the third reporting period are both greater than the zoom factor of 0.6 in the fifth gear, there is no need to reset the zoom center, and the zoom center (600, 600) remains unchanged. In addition, the current zoom factor of 0.7 is less than the critical point of 0.8, so the phone can refresh the AP values ​​of all ItemViews corresponding to the 1st to 5th columns of the custom RecyclerView, refresh the AP values ​​of all ItemViews corresponding to the 4th to 5th columns of the custom RecyclerView to -1, and set the zoom factor of the custom RecyclerView to 0.7.

[0503] Among them, the AP values ​​of all grids corresponding to the 3rd to 5th columns of the custom RecyclerView are refreshed as follows: Referring to the description of Figure 18 in the above embodiment, selectLP=75 of the ItemView selected by the zoom center. The LP value of the ItemView selected by the zoom center can also be obtained. Then, the LP value of each ItemView in the 1st to 5th columns and the 1st to 3rd rows of the custom RecyclerView can be calculated based on the second formula of the above embodiment, and the LP value of each ItemView in the 1st to 5th columns and the 4th to 14th rows of the custom RecyclerView can be calculated based on the first formula of the above embodiment.

[0504] As another implementation method, the phone can also immediately refresh the AP values ​​of all ItemViews corresponding to the 1st to 5th columns of the custom RecyclerView after the two-finger distance is reduced from d1 to d2, and refresh the AP values ​​of all ItemViews corresponding to the 4th to 5th columns of the custom RecyclerView to -1. This ensures that there will be no blank area between the 3rd and 5th levels during the reduction process.

[0505] Based on Figure 21C, as shown in Figure 21D, after the user sets the zoom factor of the custom RecyclerView to 0.7, the user can continue to reduce the distance between the two fingers. In the fourth reporting period, the mobile phone can obtain the new two-finger coordinates and calculate the two-finger distance based on the two-finger coordinates, such as d4 = 126 pixels, and then calculate the zoom factor S3 = 1.0 + 1.0 * (750-1500) / 1500 = 0.5 based on the two-finger distance d1 and the two-finger distance d4. Since the zoom factor of 0.7 in the three reporting periods is greater than the zoom factor of 0.6 in the fifth gear, and the zoom factor of 0.5 in the fourth reporting period is less than the zoom factor of 0.6 in the third gear, the current zoom has slipped past the fifth gear (about to cross the gear), so the zoom center needs to be reset.

[0506] The coordinates of the zoom center are calculated as (pointx, mBeginFocusy) ​​and can be calculated as follows:

[0507] Determine the number of display columns for the current gear: currentShowSpan=5 columns.

[0508] The number of display columns for the next gear is determined to be nextShowSpan=7 columns.

[0509] The number of columns offset to the left of the display area of ​​level 5 is determined to be span.left=0 columns.

[0510] The left offset of the display area of ​​level 5 is determined to be: screenRectF.left = 0 pixels.

[0511] The width of the display area of ​​level 5 is determined to be screenRectF.width = 2000 pixels.

[0512] Determine the column number where the center of the two fingers is located in level 5: currentSelectIndex = 2 columns.

[0513] Determine the column number where the center of the two fingers is located in level 7: nextSelectIndex = 2 columns.

[0514] Determine the number of columns in the custom RecyclerView for the first column of the 7-level display area:

[0515] Index=span.left+currentSelectIndex-nextSelectIndex+1=0+2-2+1=1 column.

[0516] Determine the X-axis coordinate of the upper left corner of the first ImageView in the first column of the display area of ​​7 gears:

[0517] X1=(1-1)*400=0 pixels.

[0518] Determine the number of columns in the custom RecyclerView for the last column of the 7-level display area:

[0519] Index=span.left+currentSelectIndex-nextSelectIndex+nextShowSpan=0+2-2+7=7 columns.

[0520] Determine the X-axis coordinate of the lower right corner of the last ImageView in the last column of the display area of ​​7 levels:

[0521] X2=7*400=2800 pixels.

[0522] Determine the zoom center centerX when switching from 7th gear to 5th gear:

[0523] Map the scaling center centerX in the custom RecyclerView coordinate system to the screen coordinate system to obtain the x-axis coordinate of the scaling center: pointx = 0 pixels.

[0524] The coordinates of the zoom center are finally calculated as (pointx, mBeginFocusy) ​​= (0, 600).

[0525] It should be understood that when switching from gear 5 to gear 7, by correcting the zoom center in advance, it can be ensured that when switching to gear 7, the left edge of the display area is aligned with the left edge of the screen, and the right edge of the display area is aligned with the right edge of the screen, avoiding the problem of incomplete image display or blank space on the screen.

[0526] For example, FIG22 is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present application.

[0527] As shown in FIG22 , the electronic device 100 may include a processor 110, an internal memory 120, a button 130, a sensor module 140, a display screen 150, an audio module 160, a speaker 160A, a receiver 160B, a microphone 160C, an earphone jack 160D, etc. The sensor module may include a touch sensor.

[0528] The processor 110 can be used to execute the cross-level scaling method for the album page in the above-mentioned embodiment, and can also be used to execute the level-by-level scaling method for the photo page in the above-mentioned embodiment. The processor 110 may include one or more processing units, for example, the processor 110 may include a central processing unit (CPU), a graphics processing unit (GPU), an application processor (AP), an image signal processor (ISP), etc.

[0529] The internal memory 120 can be used to store computer executable program codes, which include instructions. The processor 110 executes various functional applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 120. The internal memory 120 may include a program storage area and a data storage area. Among them, the program storage area can store an operating system and an application (APP) required for at least one function, such as a gallery application. The data storage area can store configuration files of each APP, as well as data created during the use of the electronic device 100.

[0530] The display screen 150 includes a display panel for displaying various images in the gallery application.

[0531] A touch sensor, also known as a "touch panel," can be provided on the display screen 150. The touch sensor and the display screen 150 form a touch screen, also known as a "touch screen." The touch sensor can be used to detect touch operations applied to or near the touch sensor. The touch sensor can transmit the detected touch operation to the application processor to determine the type of touch event and provide visual output related to the touch operation through the display screen 150. In other embodiments, the touch sensor can also be provided on the surface of the electronic device 100, at a location different from that of the display screen 150.

[0532] The present application also provides a computer-readable storage medium having computer instructions stored therein. When the computer-readable storage medium is run on an electronic device, the electronic device executes the method described in the above embodiment. The computer instructions can be stored in a computer-readable storage medium or transferred from one computer-readable storage medium to another computer-readable storage medium. The computer-readable storage medium can be any available medium that can be accessed by a computer or a data storage device such as a server or data center that can be integrated with one or more media. The available medium can be a magnetic medium, an optical medium, or a semiconductor medium, etc.

[0533] An embodiment of the present application further provides a computer program product, which includes a computer program code. When the computer program code runs on an electronic device, the electronic device executes the methods in the above embodiments.

[0534] The present application also provides a chip coupled to a memory, configured to read and execute computer programs or instructions stored in the memory to perform the methods of the above embodiments. The chip may be a general-purpose processor or a dedicated processor.

[0535] The electronic device, computer-readable storage medium, computer program product and chip provided in the embodiments of the present application are all used to execute the methods provided in the above embodiments. Therefore, the beneficial effects that can be achieved can refer to the corresponding beneficial effects of the methods provided above, and will not be repeated here.

[0536] In the description of this application, " / " means or. For example, A / B can mean A or B. In the description of this application, "and / or" is simply a way to describe the association relationship between related objects, indicating that three relationships can exist. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone.

[0537] In the specification and claims of this application, the terms "first" and "second" are used to distinguish different objects or to distinguish different processing of the same object, rather than to describe a specific order of objects. For example, the terms "first operation" and "second operation" are used to distinguish different operations, rather than to describe a specific order of operations. In the embodiments of this application, "plurality" refers to two or more.

[0538] Through the description of the above implementation methods, those skilled in the art can clearly 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 distributed and completed by 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. In addition, the functional units in the various embodiments of the present application 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 above-mentioned integrated units can be implemented in the form of hardware or in the form of software functional units.

[0539] The above content is only a specific embodiment of this application, but the scope of protection of this application is not limited to this. Any changes or replacements within the technical scope disclosed in this application should be included in the scope of protection of this application. Therefore, the scope of protection of this application should be based on the scope of protection of the claims.

Claims

1. A method for displaying a grid interface, characterized in that: The method comprises: Displaying a first grid interface based on the first recycler view on the display screen, wherein the first grid interface includes grids of a first number of columns, and the grids include images; In response to a two-finger press operation by a user on the display screen, determining a two-finger center; After detecting the two-finger pressing operation, continue to detect a first zooming operation; In response to the first zoom operation, zooming the first recycler view with a first position in the display screen as a zoom center, displaying a second grid interface based on the zoomed first recycler view, wherein a size of grids in the second grid interface is not equal to a size of grids in the first grid interface, and the first position is determined based on the two-finger center, the first number of columns, and the first zoom operation; From the two-finger pressing operation to the completion of the first zooming operation, the user's two fingers do not leave the display screen.

2. The method according to claim 1, characterized in that A left edge of the second grid interface is aligned with a left edge of the display screen, and a right edge of the second grid interface is aligned with a right edge of the display screen; The method further comprises: After detecting the first zoom operation, continue to detect a hand-raising operation; In response to the hand-raising operation, the second grid interface remains displayed.

3. The method according to claim 1, characterized in that A left edge of the second grid interface is not aligned with a left edge of the display screen, and a right edge of the second grid interface is not aligned with a right edge of the display screen; The method further comprises: After detecting the first zoom operation, continue to detect a hand-raising operation; In response to the hand-raising operation, the first recycler view is scaled with the first position as the scaling center, and a third grid interface is displayed based on the scaled first recycler view; the size of the grids in the third grid interface is not equal to the size of the grids in the second grid interface and the size of the grids in the first grid interface, the left edge of the third grid interface is aligned with the left edge of the display screen, and the right edge of the third grid interface is aligned with the right edge of the display screen; or, In response to the hand-raising operation, scaling the first recycler view with the first position as the scaling center, and re-displaying the first grid interface based on the scaled first recycler view, with the left edge of the first grid interface aligned with the left edge of the display screen, and the right edge of the first grid interface aligned with the right edge of the display screen; Among them, from the two-finger pressing operation to the completion of the hand-lifting operation, the user's two fingers do not leave the display screen.

4. The method according to claim 3, characterized in that The method further comprises: Before displaying the third grid interface, determining that a first gear shift condition is satisfied; or, Before displaying the first grid interface again, determining that the first gear shift condition is not satisfied; The first gear shifting condition includes: The zoom factor corresponding to the first zoom operation is smaller than a first gear critical point, where the first gear critical point is a critical point for switching the zoom factor from the first gear to the second gear; The zoom factor corresponding to the first zoom operation is greater than a second gear critical point, and the second gear critical point is a critical point for switching the zoom factor from the first gear to the third gear.

5. The method according to claim 1, wherein The method further comprises: After detecting the first zoom operation, continue to detect a second zoom operation; In response to the second zoom operation, zooming the first recycler view with a second position in the display screen as a zoom center, and displaying a fourth grid interface based on the zoomed first recycler view; the size of the grids in the fourth grid interface is not equal to the size of the grids in the second grid interface, and the second position is determined according to the two-finger center, the first number of columns, and the second zoom operation; From the two-finger pressing operation to the completion of the second zooming operation, the user's two fingers do not leave the display screen.

6. The method according to claim 5, characterized in that The left edge of the fourth grid interface is not aligned with the left edge of the display screen, and the right edge of the fourth grid interface is not aligned with the right edge of the display screen; The method further comprises: After detecting the second zoom operation, continuing to detect a hand-raising operation; in response to the hand-raising operation, performing a zoom operation on the first recycler view with the second position as the zoom center, and displaying a fifth grid interface based on the zoomed first recycler view; the size of the grids in the fifth grid interface is not equal to the size of the grids in the fourth grid interface, the left edge of the fifth grid interface is aligned with the left edge of the display screen, and the right edge of the fifth grid interface is aligned with the right edge of the display screen; or, performing a zoom operation on the first recycler view with the second position as the zoom center; in response to the hand-raising operation, re-displaying the first grid interface based on the zoomed first recycler view, with the left edge of the first grid interface aligned with the left edge of the display screen, and the right edge of the first grid interface aligned with the right edge of the display screen; Among them, from the two-finger pressing operation to the completion of the hand-lifting operation, the user's two fingers do not leave the display screen.

7. The method according to claim 6, characterized in that The method further comprises: Before displaying the fifth grid interface, determining that the second gear shift condition is satisfied; or, Before displaying the first grid interface again, determining that the second gear shift condition is not satisfied; The second gear shifting condition includes: The zoom factor corresponding to the second zoom operation is smaller than the zoom factor corresponding to the first zoom operation, and the zoom factor corresponding to the second zoom operation is smaller than a third gear critical point, which is a critical point for switching the zoom factor from the fourth gear to the fifth gear; The zoom factor corresponding to the second zoom operation is greater than the zoom factor corresponding to the first zoom operation, and the zoom factor corresponding to the second zoom operation is greater than the fourth gear critical point, which is the critical point for switching the zoom factor from the fourth gear to the sixth gear.

8. The method according to any one of claims 1 to 7, characterized in that Before displaying the second grid interface based on the scaled first recycler view, the method further includes: determining a zoom factor corresponding to the first zoom operation according to the first number of columns, a two-finger distance corresponding to the two-finger pressing operation, and a two-finger distance corresponding to the first zoom operation; When the zoom factor corresponding to the first zoom operation satisfies a first condition, determining a second number of columns according to the zoom factor corresponding to the first zoom operation; The first position is determined according to the two-finger center, the second column number, and the position of the display area of ​​the first grid interface in the first recycler view.

9. The method according to claim 8, characterized in that The first condition includes any one of the following: The zoom factor corresponding to the first zoom operation is greater than a preset zoom factor; The zoom factor corresponding to the first zoom operation is smaller than a preset zoom factor; The preset zoom factor is equal to the ratio of the minimum number of columns supported by the grid interface to the first number of columns.

10. The method according to claim 8, characterized in that The determining the first position according to the two-finger center, the second column number, and the position of the display area of ​​the first grid interface in the first recycler view includes: Determine a first distance, a second distance, a third distance, and a first width; the first distance is the distance from the left edge of the display area of ​​the first grid interface in the first recycler view to the left edge of the first recycler view, the second distance is the distance from the left edge of the display area corresponding to the second column number in the first recycler view to the left edge of the first recycler view, the third distance is the distance from the right edge of the display area corresponding to the second column number in the first recycler view to the left edge of the first recycler view, and the first width is the width of the display area of ​​the first grid interface in the first recycler view; Determine a first coordinate value according to the first distance, the second distance, the third distance, and the first width, where the first coordinate value represents a distance from the zoom center to a left edge of the first recycler view; Mapping the first coordinate value onto the display screen to obtain a second coordinate value, where the second coordinate value represents a distance from the zoom center to a left edge of the display screen; A position corresponding to the second coordinate value and the third coordinate value is determined as the first position, and the third coordinate value represents the distance from the center of the two fingers to the upper edge of the display screen.

11. The method according to claim 10, characterized in that Determining the second distance includes: Determine the second distance based on the number of columns between the left edge of the display area of ​​the first grid interface in the first recycler view and the left edge of the first recycler view, the number of columns of the center of the two fingers in the display area corresponding to the first number of columns, the number of columns of the center of the two fingers in the display area corresponding to the second number of columns, and the first height; The first height is the width of the table item view in the first recycler view when a grid interface with a third number of columns is displayed on the display screen, and the third number of columns is the minimum number of columns supported by the grid interface.

12. The method according to claim 11, characterized in that Determining the third distance includes: The third distance is determined according to the second distance and a width of the second number of columns in the first recycler view.

13. The method according to claim 11, characterized in that Before determining the second distance, the method further includes: Determining, based on a distance from the center of the two fingers to the left edge of the display screen, a first zoom factor, and the first height, the column number of the center of the two fingers in the display area corresponding to the second number of columns; Determining, based on a distance from the center of the two fingers to the left edge of the display screen, a second zoom factor, and the first height, the column number of the center of the two fingers in the display area corresponding to the first number of columns; The first zoom factor is equal to the ratio of the minimum number of columns supported by the grid interface to the second number of columns; the second zoom factor is equal to the ratio of the minimum number of columns supported by the grid interface to the first number of columns.

14. The method according to any one of claims 1 to 13, characterized in that The scaling operation on the first recycler view with the first position in the display screen as the scaling center, and displaying the second grid interface based on the scaled first recycler view, includes: Taking the first position as the zoom center, based on the zoom factor corresponding to the first zoom operation, a zoom operation is performed on the first recycler view; based on the zoomed first recycler view, the second grid interface is displayed.

15. The method according to any one of claims 1 to 14, characterized in that The method further comprises: After detecting the two-finger press operation, continuing to detect a third zoom operation; in response to the third zoom operation, determining a zoom factor corresponding to the third zoom operation based on the first number of columns, the two-finger distance corresponding to the two-finger press operation, and the two-finger distance corresponding to the third zoom operation; When the zoom factor corresponding to the third zoom operation satisfies the second condition, performing a zoom operation on the first recycler view with the center of the two fingers as the zoom center to display the sixth grid interface; Among them, the left edge of the sixth grid interface is not aligned with the left edge of the display screen, and the right edge of the sixth grid interface is not aligned with the right edge of the display screen; the size of the grid in the sixth grid interface is larger than the size of the grid in the grid interface at the minimum gear, or smaller than the size of the grid in the grid interface at the maximum gear; the minimum gear is the minimum number of columns supported by the first recycler view for display, and the maximum gear is the maximum number of columns supported by the first recycler view for display.

16. The method according to claim 15, characterized in that The second condition includes any one of the following: The zoom factor corresponding to the third zoom operation is greater than the maximum zoom factor; or, The zoom factor corresponding to the third zoom operation is smaller than the minimum zoom factor.

17. The method according to claim 15, characterized in that The method further comprises: After detecting the third zoom operation, continue detecting a hand-raising operation; In response to the hand-raising operation, the first recycler view is scaled with the center of the two fingers as the scaling center, and the seventh grid interface is displayed based on the scaled first recycler view; the left edge of the seventh grid interface is aligned with the left edge of the display screen, and the right edge of the seventh grid interface is aligned with the right edge of the display screen; the number of columns of the seventh grid interface is equal to the maximum number of columns supported by the first recycler view, or the number of columns of the seventh grid interface is equal to the minimum number of columns supported by the first recycler view.

18. The method according to any one of claims 1 to 17, characterized in that The method is applied to an electronic device, the electronic device comprising a touch event receiving layer, a first recycler view, and a zoom gesture detector, wherein the size of the touch event receiving layer is equal to the size of the display screen, and the size of the first recycler view is larger than the size of the display screen; Displaying a first grid interface based on the first recycler view on the display screen includes: In response to a user selecting an album card, displaying the first grid interface based on the first recycler view on the display screen; The method further comprises: In response to a two-finger touch operation on the grid interface based on the first recycler view, first two-finger coordinates are passed to the zoom gesture detector through the received touch event layer, and a first two-finger distance is determined by the zoom gesture detector based on the first two-finger coordinates.

19. The method according to claim 18, characterized in that The electronic device further includes a second recycler view and a third recycler view, the size of the second recycler view is equal to the size of the display screen, and the size of the third recycler view is equal to the size of the display screen; The method further comprises: In response to a selection operation on the photo control, displaying a grid interface based on the second recycler view in the display screen; In response to a two-finger touch operation on the grid interface based on the second recycler view, transmitting second two-finger coordinates to the zoom gesture detector through the second recycler view, and determining a second two-finger distance through the zoom gesture detector based on the second two-finger coordinates; When the distance between the second two fingers is greater than or equal to a preset distance, displaying a grid interface based on the third recycler view on the display screen; The number of grid columns of the grid interface based on the second recycler view is different from the number of grid columns of the grid interface based on the third recycler view.

20. The method according to any one of claims 1 to 19, characterized in that The recycler view includes M rows and N columns of table item views, and each table item view is used to display an image.

21. An electronic device, characterized in that: The electronic device includes: one or more processors, and a memory; The memory is coupled to the one or more processors, and the memory is used to store computer program code, where the computer program code includes computer instructions. The one or more processors call the computer instructions to enable the electronic device to execute the method according to any one of claims 1 to 20.

22. A chip system, characterized in that: The chip system is applied to an electronic device, and the chip system includes one or more processors, and the one or more processors are used to call computer instructions so that the electronic device executes the method as described in any one of claims 1 to 20.

23. A computer-readable storage medium, characterized in that The computer-readable storage medium comprises instructions, which, when executed on an electronic device, cause the electronic device to perform the method according to any one of claims 1 to 20.

Images