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

Abstract

The invention provides a grid interface display method and device, a chip system and a storage medium, and relates to the technical field of terminals. In the application, when the album page is displayed in the screen, after the user presses the two fingers and before the two fingers leave the screen, the electronic equipment can switch gears in response to the double-finger zooming operation of the user, for example, the current gear is switched to other gears through the next gear; and correcting the zoom center of the album page according to the distance between the two fingers when the gears are switched each time. Thus, under the condition that the two fingers of the user do not leave the screen, the user can trigger the electronic equipment to be switched back and forth between any gears through continuous zooming operation, it is guaranteed that the content of the centers of the two fingers is not changed, the whole photo album page switching process is smoother, and the operation experience when the user views the photo album pages is improved.

Description

Technical Field

[0001] This application relates to the technical field of terminals, and in particular, to a method, device, chip system, and storage medium for displaying a grid interface. Background Art

[0002] With the rapid development of terminal technology, the storage space of mobile phones is getting larger and larger. The gallery application of a mobile phone can store a large number of images. The gallery application can set multiple photo albums according to the image type, such as a camera album, an all photos album, an all videos album, a screenshot album, and a personal favorites album, etc.

[0003] Currently, mobile phones based on the Android system support displaying images in a fixed number of columns in a grid form on an album page. Users can trigger the mobile phone to display more images by swiping up and down. However, when there are a large number of photos and videos in an album, users may need to perform multiple up and down swipe operations to find the image they want to view in this album, and this process is very inconvenient to operate, affecting the user experience. Summary of the Invention

[0004] This application provides a method, device, chip system, and storage medium for displaying a grid interface, which can solve the technical problem of inconvenient image search on an album page.

[0005] To achieve the above object, this application adopts the following technical solutions:

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

[0007] Display a first grid interface based on a first recycler view (referred to as a custom RecyclerView) within a display screen. The first grid interface includes grids with a first number of columns, each grid includes an image, and the size of each grid is equal to the width of the display screen divided by the first number of columns; in response to a two-finger press operation of a user on the display screen, determine the center of the two fingers; after detecting the two-finger press operation, continue to detect a first zoom operation; in response to the first zoom operation, perform a zoom operation on the first recycler view with a first position in the display screen as the zoom center, and display a second grid interface based on the zoomed first recycler view. 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 according to the center of the two fingers, the first number of columns, and the first zoom operation. Wherein, 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.

[0008] In the above solution, the number of columns of the grid interface is also called the gear. The electronic device only sets 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, in response to the two-finger zoom operation of the user, 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 other gears through the next gear. The entire photo album page switching process is smoother, enabling the user to quickly find the image and enhancing the operation experience when the user views the photo album page.

[0009] In a possible implementation, the display screen samples the user's touch operation according to the reporting period T. Taking the display screen sampling 240 times per second as an example. The period T = 1 / 240 = 4.16 ms, that is, the display screen samples the touch data every 4.16 ms. The first zoom operation is the zoom operation detected in one reporting period. Between detecting the two-finger press operation in the first reporting period and detecting the first zoom operation in the i-th reporting period, other zoom operations may be detected, that is, the user's two fingers are always approaching.

[0010] In a possible implementation, the first grid interface and the second grid interface can be the photo album page of the gallery application or the page of other applications based on RecyclerView. Taking the photo album page of the gallery application as an example, the electronic device pre-sets multiple gears. Among them, the "gear" can be understood as the number of image columns displayed on the display screen. The zoom multiple 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 multiple, and the ratio of the minimum number of columns supported by the grid interface to the third number of columns is the second zoom multiple.

[0011] Taking the photo album page as an example, the size of the display screen is 1200 pixels in width and 2800 pixels in height, and the size of the custom RecyclerView is 8400 pixels in width and 20000 pixels in height. The custom RecyclerView includes 21 columns * 50 rows = 1050 grids, and the size of each grid is 400 pixels in width and 400 pixels in height. For the display area of the custom RecyclerView, the electronic device has preset 3 gears, 5 gears, 15 gears and 21 gears. Among them, the zoom factor corresponding to each gear is equal to the ratio of the minimum number of columns supported by the grid interface display to this gear. For example, the zoom factor corresponding to the 3rd gear is 1, 3 columns of grids are displayed on the display screen, and the actual display size of each grid is 240 pixels in width and 240 pixels in height; the zoom factor corresponding to the 5th gear is 0.6, 5 columns of grids are displayed on the display screen, and the actual display size of each grid is 240 pixels in width and 240 pixels in height; the zoom factor corresponding to the 15th gear is 0.2, 15 columns of grids are displayed on the display screen, and the actual display size of each grid is 80 pixels in width and 80 pixels in height; the zoom factor corresponding to the 21st gear is 1 / 7, 21 columns of grids are displayed on the display screen, and the actual display size of each grid is 57 pixels in width and 57 pixels in height.

[0012] In a 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, continuously detecting a lift operation; in response to the lift operation, maintaining the display of the second grid interface.

[0013] 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 certain preset gear. When the user lifts their hand, there is no need to update the grid interface.

[0014] In a 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 a first zoom operation, continuously detecting a lift operation. In response to the lift operation, performing a zoom operation on the first recycler view with the first position as the zoom center, and displaying a third grid interface based on the zoomed 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. Alternatively, in response to the lift operation, performing a zoom operation on the first recycler view with the first position as the zoom center, and redisplaying the first grid interface 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 two-finger press operation to before the lift operation is completed, the user's two fingers do not leave the display screen.

[0015] In the above solution, if the user lifts their hand after determining not to switch gears, the original gear image is kept displayed on the display screen; if the user lifts their hand after determining to switch gears, the new gear image is displayed on the display screen.

[0016] In a possible implementation, before displaying the third grid interface or redisplaying the first grid interface, the method may further include: determining whether the first gear switching condition is satisfied. Thus, if the first gear switching condition is satisfied, the third grid interface is displayed after lifting the hand; or, if the first gear switching condition is not satisfied, the first grid interface is redisplayed after lifting the hand. The first gear switching condition includes: the zoom ratio corresponding to the first zoom operation is less than the first gear critical point, and the first gear critical point is the critical point of the zoom ratio for switching from the first gear (such as gear 5) to the second gear (such as gear 7); the zoom ratio corresponding to the first zoom operation is greater than the second gear critical point, and the second gear critical point is the critical point of the zoom ratio for switching from the first gear (such as gear 5) to the third gear (such as gear 3).

[0017] In the above solution, by determining whether the gear switching condition is satisfied, the number of image columns finally displayed on the display screen can be determined after the user lifts their hand.

[0018] In a possible implementation, the method further includes: after detecting a first zoom operation, continuously detecting a second zoom operation (the first zoom operation and the second zoom operation can be understood as zoom operations collected in different reporting point cycles, and other zoom operations may or may not be collected between these two zoom operations). In response to the second zoom operation, perform a zoom operation on the first recycler view with the second position in the display screen as the zoom center, and display a fourth grid interface based on the zoomed first recycler view. Among them, 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 center of the two fingers, the first number of columns, and the second zoom operation. From the two-finger press operation to the completion of the second zoom operation, the user's two fingers do not leave the display screen.

[0019] In the above solution, since only one custom RecyclerView is set for each gear, when switching gears each time, the electronic device can perform continuous zoom operations based on the same custom RecyclerView to achieve cross-gear zooming. In addition, since there is no need to re-measure the size and position of each grid, the response speed of cross-gear zooming is improved.

[0020] In a 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, continuously detecting a lift operation. In response to the lift operation, perform a zoom operation on the first recycler view with the second position as the zoom center, and display 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, in response to the lift operation, perform a zoom operation on the first recycler view with the second position as the zoom center, and display the first grid interface 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. Among them, from the two-finger press operation to before the completion of the lift operation, the user's two fingers do not leave the display screen.

[0021] In the above solution, after the user presses the two fingers, the user can continuously perform zoom operations. After the latest judgment on whether to switch gears, if it is determined not to switch gears, the user lifts the hand, and the original gear image is displayed on the display screen; if it is determined to switch gears, the user lifts the hand, and the new gear image is displayed on the display screen.

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

[0023] In the above solution, there is a switching gear critical point between any two adjacent gears preset in the electronic device. Before switching from one gear to another, by determining whether the zoom ratio Si corresponding to the i-th zoom operation crosses the switching gear critical point, it can be decided the number of image columns finally displayed on the display screen after the user raises the hand.

[0024] In a possible implementation, before performing a zoom operation on the first recycler view with the first position on the display screen as the zoom center and displaying the second grid interface, the method further includes: determining the zoom ratio corresponding to the first zoom operation according to the first number of columns, the distance between the two fingers corresponding to the two-finger press operation, and the distance between the two fingers corresponding to the first zoom operation; determining the second number of columns according to the zoom ratio corresponding to the first zoom operation when the zoom ratio corresponding to the first zoom operation meets the first condition; determining the first position according to 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. The first condition includes any one of the following: the zoom ratio corresponding to the first zoom operation is greater than the preset zoom ratio; the zoom ratio corresponding to the first zoom operation is less than the preset zoom ratio. The preset zoom ratio is equal to the ratio of the minimum number of columns supported by the grid interface to the first number of columns.

[0025] In a possible implementation, determining the first position according to the center of 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 position 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. According to the first distance screenRectF.left, the second distance X1, the third distance X2, and the first width screenRectF.width, determine a first coordinate value centerX, where the first coordinate value centerX represents the distance from the zoom center to the left edge of the first recycler view. Map the determined first coordinate value to the display screen to obtain a second coordinate value pointx, where the second coordinate value pointx represents the distance from the zoom center to the left edge of the display screen. Determine the position corresponding to the second coordinate value pointx and a third coordinate value mBeginFocusy as the first position, where the third coordinate value mBeginFocusy represents the distance from the center of two fingers to the upper edge of the display screen.

[0026] In a possible implementation, determining the second distance may include: determining the second distance according to 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 two fingers in the display area corresponding to the first number of columns, the number of columns of the center of two fingers in the display area corresponding to the second number of columns, and a first height. The first height is the width of the table item view in the first recycler view when the grid interface of the 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 for display.

[0027] Exemplarily, the electronic device may calculate the first coordinate value by the following steps:

[0028] (1) Determine the number of columns of the center of two fingers in the display area corresponding to the first number of columns according to the distance from the center of two fingers to the left edge of the display screen, a second zoom multiple, and a first height. For example, calculate the number of columns of the center of two fingers in the display area corresponding to the first number of columns at the current gear (i.e., the first number of columns) through the following relational expression:

[0029]

[0030] Among them, currentSelectIndex represents the column number of the center of the two fingers in the display area corresponding to the first column of numbers, focusx represents the distance from the center of the two fingers to the left edge of the display screen, initChildheight represents the first height (i.e., the original height of each ItemView in the custom RecyclerView), and scale1 represents the scaling factor of the current gear (i.e., the second scaling factor).

[0031] (2) Determine the column number of the center of the two fingers in the display area corresponding to the second column of numbers according to the distance from the center of the two fingers to the left edge of the display screen, the first scaling factor, and the first height. For example, calculate the column number of the center of the two fingers in the display area corresponding to the second column of numbers in the next gear (i.e., the second column of numbers) through the following relationship:

[0032]

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

[0034] (3) Determine the second distance according to the number of columns between the left edge of the position of the display area corresponding to the first column of numbers in the custom RecyclerView and the left edge of the custom RecyclerView, the column number of the center of the two fingers in the display area corresponding to the first column of numbers, the column number of the center of the two fingers in the display area corresponding to the second column of numbers, and the first height. For example, calculate the second distance through 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 columns of the ItemView between the left edge of the position of the current gear (i.e., the first column number) in the custom RecyclerView and the left edge of the custom RecyclerView, currentSelectIndex represents the column number of the center of the two fingers in the display area corresponding to the first column number, nextSelectIndex represents the column number of the center of the two fingers 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 according to the second distance and the width of the second column number in the custom RecyclerView.

[0038] For example, calculate the third distance through the following relational expression:

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

[0040] Among them, X2 represents the third distance, span.left represents the number of columns of the ItemView between the left edge of the position of the current gear (i.e., the first column number) in the custom RecyclerView and the left edge of the custom RecyclerView, currentSelectIndex represents the column number of the center of the two fingers in the display area corresponding to the first column number, nextSelectIndex represents the column number of the center of the two fingers 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).

[0041] (5) Determine the first coordinate value according to the first distance screenRectF.left, the second distance X1, the third distance X2, and the first width screenRectF.width. For example, calculate the first coordinate value through the following relational expression:

[0042]

[0043] 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.

[0044] In the above solution, by setting a scaling center and zooming in or out on the custom RecyclerView with the scaling center as the center point, it is possible to ensure that the left edges of the first grid interface and the second grid interface are aligned with the left edge of the display screen, and the right edges of the first grid interface and the second grid interface are aligned with the right edge of the display screen, avoiding half a grid or a blank area at the left and right edges of the display screen.

[0045] In the above solution, by setting a scaling center and zooming in or out on the custom RecyclerView with the scaling center as the center point, it is possible to ensure that the left edge of the grid interface is aligned with the left edge of the display screen, and the right edge of the grid interface is aligned with the right edge of the display screen, avoiding half a grid or a blank area at the left and right edges of the display screen.

[0046] In a possible implementation, a zoom operation is performed on the first recycler view with a first position in the display screen as the scaling center to display a second grid interface, including: performing a zoom operation on the first recycler view with the first position as the scaling center based on a zoom factor corresponding to a first zoom operation; and displaying the second grid interface based on the zoomed first recycler view.

[0047] In the above solution, by calculating the zoom factor corresponding to the first zoom operation, a zoom operation can be performed on the custom RecyclerView to change the sizes of the grids in the display screen, ensuring that the grid interface is fully responsive.

[0048] In a possible implementation, the method may further include: after detecting a two-finger press operation, continuing to detect a third zoom operation, and determining a zoom factor corresponding to the third zoom operation according to the number of columns in the first column, 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 a second condition, a zoom operation is performed on the first recycler view with the two-finger center as the scaling center to display a 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 grids in the sixth grid interface is larger than the size of the grids in the grid interface in the minimum gear or smaller than the size of the grids in the grid interface in the maximum gear; the minimum gear is the minimum number of columns supported by the first recycler view to display, and the maximum gear is the maximum number of columns supported by the first recycler view to display. 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.

[0049] 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 issue of edge alignment. Therefore, the electronic device can directly set the center of the two fingers as the zoom center.

[0050] In a possible implementation, the method may further include: after detecting a third zoom operation, continuously detecting a lift operation. In response to the lift operation, perform a zoom operation on the first recycler view with the center of the two fingers as the zoom center, and display a 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 for display, or the number of columns of the seventh grid interface is equal to the minimum number of columns supported by the first recycler view for display.

[0051] In the above solution, when the user lifts their hand, if the number of columns of the grid interface is greater than the maximum number of columns supported by the custom RecyclerView for display, or less than the minimum number of columns supported by the custom RecyclerView for display, it can be determined that the current interface is only a temporary transitional interface and does not belong to the pre-set gears. Therefore, it is necessary to roll back to the minimum or maximum gear.

[0052] In a possible implementation, the method is applied to an electronic device. The electronic device includes a touch event receiving layer, a first recycler view, and a pinch gesture detector. 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 greater than the size of the display screen. Displaying a first grid interface based on the first recycler view within the display screen includes: in response to the user's selection operation on the album card, displaying a first grid interface based on the first recycler view within the display screen. In response to a two-finger touch operation on the grid interface based on the first recycler view, transmit the first two-finger coordinates to the pinch gesture detector through the touch event receiving layer, and determine the first two-finger distance according to the first two-finger coordinates by the pinch gesture detector.

[0053] In the above solution, in the grid page of the photo album, each grid is continuous, and there is no need to set year titles, month titles, and day titles. During the process of switching gears, the electronic device only needs to change the size and quantity of the grids. Based on the grid characteristics of the photo album page, this application only sets one custom RecyclerView for the photo album pages of all gears. Therefore, before the user's two fingers leave the display screen after pressing the two fingers, the electronic device can switch back and forth between any gears based on the custom RecyclerView, such as switching from the current gear through the next gear to other gears. Additionally, by setting ReceiveTouchView, the size of ReceiveTouchView is the same as the size of the display screen. ReceiveTouchView directly transmits the two-finger coordinates to the pinch gesture detector without multiplying the two-finger coordinates by a scaling factor less than 1, thereby solving the problem that the image scaling solution for the photo album page based on the custom RecyclerView is prone to early invalidation of the scaling action.

[0054] In a 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 within 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 pinch gesture detector through the second recycler view, and determining a second two-finger distance by the pinch gesture detector according to the second two-finger coordinates; in the case where the second two-finger distance is greater than or equal to a preset distance, displaying a grid interface based on the third recycler view within the display screen. Among them, 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.

[0055] In the above solution, the grid interface based on the second recycler view and the grid interface based on the third recycler view may be photo pages. The electronic device may set a native RecyclerView for each gear of the photo page respectively. The size of each native RecyclerView is equal to the size of the display screen, so that the scaling factor s1 = 1, and thus the coordinates obtained by the pinch gesture detector are the same as the coordinate pairs collected by the touch drive. The distance calculated by the pinch gesture detector according to the obtained coordinate pairs is equal to the real two-finger distance.

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

[0057] Exemplarily, the two-finger distance di can be obtained through the following relational expression:

[0058]

[0059] Case 1: If i = 1, then determine the zoom factor of the current gear as the zoom factor Si, determine whether to reposition the custom RecyclerView, and then no longer calculate the two-finger center coordinates, nor refresh the display content of the display screen.

[0060] If i = 1, then the two-finger center coordinates can also be obtained through the following relational expression:

[0061]

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

[0063]

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

[0065] Case 3: If i > 1 and di = d(i - 1), then no longer calculate the two-finger center coordinates, nor refresh the display content of the display screen.

[0066] Among them, Si represents the zoom factor of the i-th reporting period, di represents the two-finger distance of the i-th reporting period, and d(i - 1) represents the two-finger distance of the (i - 1)-th reporting period.

[0067] In the above solution, by calculating the change in the distance between the two fingers, the zoom factor of each reporting period can be calculated, so as to facilitate judging whether to cross gears according to the zoom factor of each reporting period, calculating the two-finger center coordinates when crossing gears, and refreshing the display content of the display screen.

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

[0069] 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.

[0070] 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 enable the electronic device to execute the method provided in the first aspect and any possible implementation thereof.

[0071] Fourth aspect, the present application provides a computer-readable storage medium. The computer-readable storage medium includes computer instructions. When the computer instructions run on the electronic device, the electronic device is enabled to execute the method provided in the first aspect and any possible implementation thereof.

[0072] Fifth aspect, the present application provides a computer program product. When the computer program product runs on a computer, the computer is enabled to execute the method provided in the first aspect and any possible implementation thereof.

[0073] Sixth aspect, the present application provides a chip system. The chip system 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.

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

[0075] Figure 1 It is a schematic diagram of a scenario where a mobile phone scrolls and displays images on an album page provided by an embodiment of the present application;

[0076] Figure 2 It is a schematic diagram of a scenario where a mobile phone zooms and displays images on an album page provided by an embodiment of the present application;

[0077] Figure 3 Another schematic diagram of the scenario where a mobile phone provided by an embodiment of the present application zooms and displays an image on the album page;

[0078] Figure 4 Another schematic diagram of the scenario where a mobile phone provided by an embodiment of the present application zooms and displays an image on the album page;

[0079] Figure 5 A schematic diagram of the scenario where a mobile phone provided by an embodiment of the present application zooms and displays an image on the photo page;

[0080] Figure 6 Another schematic diagram of the scenario where a mobile phone provided by an embodiment of the present application zooms and displays an image on the photo page;

[0081] Figure 7 A schematic diagram of two native RecyclerViews provided for the photo page by an embodiment of the present application;

[0082] Figure 8 A schematic diagram of a custom RecyclerView provided for the album page by an embodiment of the present application;

[0083] Figures 9A to 9D A schematic diagram of RecyclerViews at different gears and display areas provided by an embodiment of the present application;

[0084] Figure 10 A schematic diagram of the actual layout position index and the actual adaptation position index during the zooming process;

[0085] Figure 11 A software architecture diagram of an electronic device provided by an embodiment of the present application;

[0086] Figure 12 A flowchart of a step-by-step gear image zooming scheme based on a native RecyclerView provided by an embodiment of the present application;

[0087] Figure 13 A flowchart of a method for the early failure of a cross-gear zooming scheme based on a custom RecyclerView provided by an embodiment of the present application;

[0088] Figure 14 A flowchart of a method for the non-early failure of a cross-gear zooming scheme based on a custom RecyclerView provided by an embodiment of the present application;

[0089] Figure 15 A schematic diagram of zooming and displaying a custom RecyclerView based on a zoom center and a zoom factor Si provided by an embodiment of the present application;

[0090] Figure 16 Flowchart of a method for calculating a scaling center provided by an embodiment of the present application;

[0091] Figure 17 Schematic diagram of a display area for switching from a small gear to a large gear provided by an embodiment of the present application;

[0092] Figure 18 Flowchart of a method for refreshing an AP value provided by an embodiment of the present application;

[0093] Figure 19 Flowchart of a cross-gear scaling method for a grid interface in the i-th reporting period provided by an embodiment of the present application;

[0094] Figures 20A to 20G Schematic diagram of an interface change for switching from a large gear to a small gear provided by an embodiment of the present application;

[0095] Figures 21A to 21D Schematic diagram of an interface change for switching from a small gear to a large gear provided by an embodiment of the present application;

[0096] Figure 22 Schematic diagram of the hardware structure of an electronic device provided by an embodiment of the present application. Detailed implementation manners

[0097] In order to make the objectives, technical solutions, and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present application. Apparently, the described embodiments are some, but not all, of the embodiments of the present application.

[0098] In the embodiments of the present application, the gallery application supports multiple image display modes. For example, as Figures 1 to 4 shown, the gallery application supports classifying and displaying images in the form of albums on the album page. Among them, the albums can include camera, video, photo, network disk, selfie, live photo, long exposure, slow motion, screenshot, and animated picture, etc. For another example, as Figures 5 to 6 shown, the gallery application supports displaying all images of the gallery application on the photo page.

[0099] For the photo page and the album page, the electronic device has pre-set multiple gears respectively. The gear setting methods for the photo page and the album page 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 gears is the minimum gear of the album page, and 21 gears is the maximum gear of the album page. When the gear is 3 gears, the corresponding number of image columns displayed on the screen is 3 columns; when the gear is 5 gears, the corresponding number of image columns displayed on the screen is 5 columns; when the gear is 15 gears, the corresponding number of image columns displayed on the screen is 15 columns; when the gear is 21 gears, the corresponding number of image columns displayed on the screen is 21 columns.

[0100] The user can change the number of image columns of the photo page or album page displayed on the screen through a two-finger zoom operation. As an example, the user can trigger the electronic device to increase the number of image columns of the photo page or album page displayed on the screen 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 of the photo page or album page displayed on the screen by increasing the distance between the two fingers. If the user sets the album page to 21 gears through a zoom operation, then before receiving the next two-finger operation, the electronic device always keeps displaying 21 columns of images.

[0101] This application provides a gear-by-gear zoom method for the photo page and a cross-gear zoom method for the album page. Among them, "gear-by-gear zoom" means that: after the user presses the 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. Taking the number of image columns displayed on the screen before the user presses the two fingers as 5 columns as an example, after the user presses the two fingers and reduces the distance between the two fingers, before the two fingers leave the screen, as the distance between the two fingers decreases, the number of image columns displayed on the screen can switch from 5 columns to 15 columns. After switching to 15 columns, if the distance between the two fingers is reduced again, it will not trigger the screen to switch from 15 columns to 21 columns.

[0102] "Cross-gear zoom" means that: after the user presses the 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 through the next gear to a non-adjacent gear of the current gear, that is, one gesture can switch multiple gears. Taking the number of image columns displayed on the screen before the user presses the two fingers as 5 columns as an example, after the user presses the two fingers and reduces the distance between the two fingers, before the two fingers leave the screen, as the distance between the two fingers decreases, the number of image columns displayed on the screen can switch from 5 columns to 15 columns. After switching to 15 columns, as the distance between the two fingers decreases, the number of image columns displayed on the screen can switch from 15 columns to 21 columns.

[0103] It should be noted that the above method can be applied to 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 a 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 (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 a gallery function.

[0104] Taking the electronic device as a mobile phone as an example, in combination with Figures 1 to 6 , the usage scenarios of the gallery application will be illustrated by examples.

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

[0106] Exemplarily, Figure 1 shows a schematic diagram of the scenario where the mobile phone scrolls to display images on the album page.

[0107] As Figure 1 shown in (a) thereof, the mobile phone displays the icons of applications such as the gallery on the desktop. When the user wants to view images, the user can click on the icon 01 of the gallery. In response to the user's click operation on the icon 01 of the gallery, the mobile phone displays a card page as shown in (b) of Figure 1 . The card page includes multiple areas: the status bar provides the battery and signal strength indicators, the action bar provides the photo and search box, the foot bar provides the photo, album, memories and creation, and the other areas except these areas provide album cards such as the camera, all photos and videos. Among them, the album card is also called a photo album card, and each album card is an entrance to an album. The user can select an album card from these album cards. For example, as Figure 1As shown in (b) therein, the user can click on the "Camera" card 02. In response to the user's click operation on the "Camera" card 02, the mobile phone displays an album page as shown in Figure 1 (c) therein. The album page includes a plurality of square grids 03, so it is 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 respectively used to display an image. The user can trigger the mobile phone to display more images of the album page by swiping up and down. As shown in Figure 1 (c) therein, the user can press and hold the image 455 with a single finger without releasing. As shown in Figure 1 (d) therein, start swiping down with a single finger. If the single finger swipes down a distance d1, in response to the user's swiping operation, as shown in Figure 1 (e) therein, the album page follows and swipes down a distance d1. The user can continue to press and hold the image 455 and swipe down a distance d2. In response to the user's swiping operation, as shown in Figure 1 (f) therein, the album page follows and swipes down a distance d2. Generally, the swiping distance of the follow - up swiping operation is equal to the distance that the album page scrolls down. The longer the swiping distance of the follow - up swiping operation, the more content is scrolled down and displayed on the album page. In the above - mentioned embodiment, the mobile phone supports displaying more images in response to a single - finger swiping operation in the album page. However, when there are many photos and videos in the album page, the user may need to perform multiple single - finger swiping operations to find the image they want to view. This process is inconvenient to operate and may affect the user's operation experience.

[0108] In some other embodiments, the mobile phone also supports zooming in and out of images in response to a two - finger operation on the album page.

[0109] Exemplarily, Figures 2 to 4 shows a schematic diagram of the scenario where the mobile phone zooms in and out of images on the album page.

[0110] Figures 2 to 4 Taking the preset gears of the album page as 3 gears, 5 gears, 15 gears, and 21 gears as an example for illustration, it does not limit the present application. In actual implementation, the gears of the album page can be set arbitrarily. For example, the mobile phone pre - sets gears such as 1 gear, 3 gears, 5 gears, 15 gears, 21 gears, and 31 gears for the album page. The 1st gear is the minimum gear, and the 31st gear is the maximum gear. The user can trigger the mobile phone to switch between these six gears through a two - finger zooming operation.

[0111] As an example, after the user clicks on the "Camera" card 02 as shown in Figure 1 (b) therein, the mobile phone displays an album page as shown in Figure 2 (a) therein. The album page is composed of 5 columns of grids, and the side length of each grid is h1. The user can Figure 2In the album page shown in (a), two fingers are pressed, and the distance between the two fingers is d3. Figure 2 As shown in (b) in FIG. 1 , when the distance between two fingers decreases from d3 to d4, the album page switches to 15 columns of grids, and the side length of each grid 04 is h2, where h2 is equal to the width of the screen divided by 15. Figure 2 As shown in (c) in FIG. 5 , when the distance between the two fingers decreases from d4 to d5, the album page switches to 21 columns of grids, and the side length of each grid 05 is h3, where h3 is equal to the width of the screen divided by 21. Figure 2 As shown in (d) in the figure, when the user raises his hand, the album page keeps displaying 21 columns of images. In other words, the mobile phone can zoom in and out of the album page without the user lifting his fingers off the screen.

[0112] As another example, when a user clicks Figure 1 After selecting the "Camera" card 02 shown in (b) in the figure, the phone displays the following Figure 3 The album page shown in (a) in the figure consists of 5 columns of grids, and the side length of each grid is h1. Figure 3 In the album page shown in (a), two fingers are pressed, and the distance between the two fingers is d6. Figure 3 As shown in (b) in FIG. 1 , when the distance between the two fingers increases from d6 to d7, the album page switches to a 3-column grid, and the side length of each grid 06 is h4, where h4 is equal to the width of the screen divided by 3. Figure 3 As shown in (c) in FIG. 1 , the user continues to increase the distance between the two fingers to d8, and the album page continues to display 3 columns of images. Figure 3 As shown in (d) in FIG, after the two-finger interval increases to d8, the user lifts his hand, and the album page continues to display 3 columns of images. In other words, after the mobile phone switches from 5 gears to the minimum gear (3 gears), the album page remains at 3 gears.

[0113] As another example, when a user clicks Figure 1 After selecting the "Camera" card 02 shown in (b) in the figure, the phone displays the following Figure 4 The album page shown in (a) in the figure consists of 5 columns of grids, and the side length of each grid is h1. Figure 4 In the album page shown in (a), press two fingers, and the distance between the two fingers is d9. Figure 4 As shown in (b) in FIG. 1 , when the distance between the two fingers increases from d9 to d10, the album page switches to a 3-column grid, and the side length of each grid 06 is h4, where h4 is equal to the width of the screen divided by 3. Figure 4 As shown in (c) in FIG. 1 , when the distance between the two fingers increases to d11, the album page includes three columns of images with incomplete edge image content, and the height of each grid is h5, where h5>h4. Figure 4As shown in (d), when the user raises their hand, the photo album page rebounds to three columns of images, and the left and right edges of the three columns of images align with the left and right edges of the screen. That is to say, after the mobile phone switches from the fifth gear to the minimum gear (third gear), it can continue to zoom in response to the user's operation, but will eventually rebound to the minimum gear (third gear) after the user raises their hand.

[0114] In some other embodiments, the mobile phone also supports zooming and displaying images on the photo page in response to a two-finger operation.

[0115] Exemplarily, Figure 5 and Figure 6 shows a schematic diagram of the scenario where the mobile phone zooms and displays images on the photo page.

[0116] As Figure 5 shown in (a), the user can click on the photo control 07 at the bottom bar. In response to the click operation on the photo control 07, the mobile phone displays the photo page as shown in (b). The photo page includes multiple daily titles 08, and each daily title 08 indicates a date, such as "2023.11.18", "2023.11.10", or "2023.11.08". In the area below each daily title 08, all the images taken on this date are displayed in a four-column grid form, and the side length of each grid is h6, where h6 is equal to the width of the screen divided by 4. The user can press two fingers on the photo page as shown in (b), and at this moment, the distance between the two fingers is d12. As Figure 5 shown in (c), when the distance between the two fingers decreases from d12 to d13, the mobile phone updates the photo page, which includes multiple monthly titles 09, such as "2023.11" or "2023.10". In the area below each monthly title 09, all the images taken in this month are displayed in an eight-column grid form, and the side length of each grid is h7, where h7 is equal to the width of the screen divided by 8. As Figure 5 shown in (d), if the user continues to decrease the distance between the two fingers, for example, from d13 to d14, the photo page remains displaying eight columns of images. As Figure 5 shown in (e), if the user raises their hand, the photo page remains displaying eight columns of images. That is to say, the mobile phone supports switching from four columns of images to eight columns of images in response to a single zoom operation (from pressing two fingers to the two fingers leaving the screen is one zoom operation) on the photo page. Figure 5 Figure 5

[0117] Figure 5 Figure 6 On the basis of (e), as Figure 6 shown in (a), when the photo page is displaying eight columns of images, the user can press two fingers again, and at this moment, the distance between the two fingers is d15. As Figure 6 shown in (a), when the photo page is displaying eight columns of images, the user can press two fingers again, and at this moment, the distance between the two fingers is d15. As Figure 6As shown in (b) thereof, when the distance between the two fingers decreases from d15 to d16, the mobile phone updates the photo page. The photo page includes a year title 10, such as "2023". In the area below the year title 10, all the images obtained in 2023 are displayed in a 15-column grid form. The side length of each grid is h8, and h8 is equal to the width of the screen divided by 15. As Figure 6 As shown in (c) thereof, if the user continues to decrease the distance between the two fingers, such as from d16 to d17, the photo page remains displaying 15 columns of images. As Figure 6 As shown in (d) thereof, if the user raises the hand, the photo page remains displaying 15 columns of images. That is to say, the mobile phone supports a zoom operation in the photo page (one zoom operation is from pressing the two fingers to the two fingers leaving the screen), switching from 8 columns of images to 15 columns of images.

[0118] In some other embodiments, the mobile phone also supports scrolling and displaying images in response to a single-finger operation on the photo page. For the specific description of the mobile phone scrolling and displaying images in response to a single-finger operation on the album page, it will not be elaborated here.

[0119] It should be noted that the above Figures 1 to 6 The number of columns of the grid in the above is only an exemplary illustration and does not limit this application. In actual implementation, the number of columns of the grid can be adjusted according to usage requirements. The above Figures 1 to 6 The shown solution is not limited to the album page and the photo page, and can also be extended to other forms of interface grids.

[0120] In addition, this application does not limit the number of columns of images displayed when the mobile phone enters the album page and the photo page. Taking the album page as an example, the number of columns of images when the mobile phone enters the album page each time can be set according to a certain preset gear (such as 5 gears), or the gear when the mobile phone enters the album page this time is the same as the gear when it exited the album page last time.

[0121] Taking an electronic device using the Android operating system as an example below, the step-by-step zoom method for the photo page and the cross-gear zoom method for the album page provided by this application will be described.

[0122] In an electronic device using the Android operating system, the gallery application can implement interface display based on the native RecyclerView (RV). In the native logic of the Android system, the native RecyclerView supports scrolling up and down for display, but does not support zooming. The size of the native RecyclerView is always equal to the size of the screen.

[0123] Referring to the above embodiments for Figures 5 to 6Description: The photo page includes a title and a grid corresponding to each title. During the process of switching gears, the size of the title remains unchanged while the size of the grid changes, and the title and the grid do not scale 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 decreases 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, thus realizing the zooming of the album interface, but there is a problem of long time consumption.

[0124] Exemplarily, Figure 7 The schematic diagram shows two native RecyclerViews set for the photo page.

[0125] In the photo page, the number of gears preset by the mobile phone is equal to the number of native RecyclerViews, that is, each gear corresponds to a native RecyclerView respectively. The mobile phone switching gears can be understood as switching from one native RecyclerView to another. Assume that the gears preset by the mobile phone include at least 4 gears and 8 gears. As shown in (a) of Figure 7 , both the RecyclerView1 and the screen have a size of 1200 in width * 2800 in height pixels, and RecyclerView1 supports displaying 4 columns of grid images. As shown in (b) of Figure 7 , both the RecyclerView2 and the screen have a size of 1200 in width * 2800 in height pixels, and RecyclerView2 supports displaying 8 columns of grid images. In addition, when sending RecyclerView1 and RecyclerView2 to the screen for display, the mobile phone usually also superimposes other layers on RecyclerView1 and RecyclerView2 according to the preset transparency, such as the status bar layer, the activity bar layer, and the bottom bar layer, etc. It should be understood that when the gears preset by the mobile phone include 4 gears, 8 gears, and 15 gears, it can also include RecyclerView3, and RecyclerView3 includes 15 columns of grid images.

[0126] Referring to the above embodiments for Figures 1 to 4In the description, in the grid page of the photo album, each grid is continuous, and there is no need to set the year title, month title, and day title. During the process of switching gears, only the size and quantity of the grids need to be changed. Based on this, the present application provides a custom RecyclerView. The size of the custom RecyclerView control is larger than the size of the screen. For example, the screen size is 1200 pixels wide * 2800 pixels high, and the size of the custom RecyclerView control is 8400 pixels wide * 20000 pixels high. The custom RecyclerView is composed of multiple item views (ItemView) in the form of grids. 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 swipes their finger up and down on the gallery interface, the custom RecyclerView displayed on the screen will also scroll up and down accordingly; or, when the user performs a zoom operation in the gallery interface, the custom RecyclerView displayed on the screen will also be enlarged or reduced accordingly, thus solving the problem of taking a long time due to re-measuring the size and position of each grid and re-populating the content of each grid when switching gears.

[0127] Exemplarily, Figure 8 The schematic diagram of the custom RecyclerView set for the photo album page is shown.

[0128] After the mobile phone receives a click operation on the gallery icon, the mobile phone starts to run the gallery application and initializes a custom RecyclerView. As Figure 8As shown, the initialized custom RecyclerView can include 21 columns * 50 rows = 1050 ItemViews, and the width and height of each ItemView are both 400 pixels. Among them, the calculation methods for the number of columns, rows, and the side length of each ItemView of the initialized custom RecyclerView are as follows: Taking the screen size of 1200 pixels in width * 2800 pixels in height, and the preset gears being 3 gears, 5 gears, 15 gears, and 21 gears in sequence as an example, the mobile phone can divide the width of the screen, 1200 pixels, by the minimum gear, 3, to obtain the side length of each ItemView of the initialized custom RecyclerView as 400 pixels; then, the mobile phone can multiply the minimum gear, 3, by the side length of each ItemView of the initialized custom RecyclerView, 400 pixels, and then divide by the maximum gear, 21, to calculate the side length of each ItemView on the screen at the maximum gear (21 gears) as 57 pixels. Then, the mobile 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 gears), 57 pixels, and add 1 to obtain the number of rows of the initialized custom RecyclerView as 50 rows. It should be noted that at 21 gears, the mobile phone can divide the height of the screen by the side length of each ItemView on the screen at the maximum gear (21 gears), 57 pixels, to determine that at most 49 rows of pixels can be displayed. The custom RecyclerView has at least one more row than the screen, so that the size of the custom RecyclerView sent to the screen is larger than the size of the screen, thus preventing blank spaces from appearing on the screen and ensuring the up and down scrolling of the custom RecyclerView.

[0129] As Figure 8 shown, at 3 gears, the display area of the custom RecyclerView on the screen is 3 rows * 7 columns of ItemViews. Each ItemView includes an ImageView, and each ImageView is used to display an image. Among them, the image displayed by an ImageView can be a thumbnail of a photo or a thumbnail of a certain frame in a video. When the image displayed by an ImageView is a thumbnail of a photo, when the user clicks on the thumbnail, the mobile phone can display this photo full screen. When the image displayed by an ImageView is a thumbnail of a certain frame in a video, when the user clicks on the thumbnail, the mobile phone can play this video full screen.

[0130] It should be noted that Figure 8The relative position relationship between the display area and the custom RecyclerView shown is only for illustrative purposes. In actual implementation, the user can change the relative position relationship between the screen and the custom RecyclerView, as well as the size of the display area seen by the user, through up and down sliding operations and zoom operations. For example, when the user performs an up sliding operation on the screen, the custom RecyclerView slides up relative to the screen, so as to display photos taken at a later time on the screen; when the user performs a down sliding operation on the screen, the custom RecyclerView slides down relative to the screen, so as to display photos taken at an earlier time on the screen. Another example is that when the user reduces the distance between the two fingers, the display area in the custom RecyclerView enlarges, so that after sending the enlarged display area to the screen, the screen displays a larger number of smaller-sized images; when the user increases the distance between the two fingers, the display area in the custom RecyclerView decreases, so that after sending the reduced display area to the screen, the screen displays a smaller number of larger-sized images.

[0131] The custom RecyclerView of this application involves two sizes:

[0132] One is the original size of the custom RecyclerView, that is, the initialized size. Regardless of the number of columns of images included in the display area of the custom RecyclerView, the original size of the custom RecyclerView always remains unchanged. For example, when the screen size is 1200 in width * 2800 in height pixels, and the minimum number of columns displayed on the screen is 3 columns, then the original size of each ItemView in the custom RecyclerView is 400 in width * 400 in height pixels. Since the maximum number of columns of the custom RecyclerView is 21, and the number of rows in the case of 21 columns is 50, the original size of the custom RecyclerView is 8400 in width * 20000 in height pixels.

[0133] Another is to customize the actual display size of the RecyclerView. Since the number of columns in the display area of the customized RecyclerView is different, the number of ItemViews displayed on the screen is different. Therefore, it is necessary to multiply a scaling factor on the basis of the original size of the customized RecyclerView to obtain a reduced display size, and then send the reduced customized RecyclerView to the screen for display. For example, when the current gear is N and the minimum gear is M, and the original size of the customized RecyclerView is (x, y), then the display size of the customized RecyclerView at the current gear is (x * M / N, y * M / N). Here, x represents the original width of the customized RecyclerView, y represents the original height of the customized RecyclerView, and M / N represents the scaling factor.

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

[0135] Exemplarily, Figures 9A to 9D The schematic diagram showing the relationship between the customized RecyclerView and the screen at different gears is shown.

[0136] Assume that the size of the mobile phone screen is 1200 in width * 2800 in height pixels, and the size of the customized RecyclerView is 8400 in width * 20000 in height pixels. The customized RecyclerView includes 21 columns * 50 rows = 1050 grids, and the size of each grid is 400 in width * 400 in height pixels. For the display area of the customized RecyclerView, the mobile phone is pre-set with 3 gears, 5 gears, 15 gears, and 21 gears. Among them, the minimum gear is 3 gears, that is, 3 columns of grids are displayed on the screen; the maximum gear is 21 gears, that is, 21 columns of grids are displayed on the screen.

[0137] As Figure 9A shown, when the display area of the customized RecyclerView includes 3 columns * 7 rows = 21 grids. The original size of the display area is equal to the size of the screen, and the display area can be sent to the screen according to the ratio 1:1 (that is, multiplying the display area of the customized RecyclerView by the scaling factor 1.0). At this moment, the actual display size of each ItemView in the customized RecyclerView on the screen is 400 in width * 400 in height pixels.

[0138] As Figure 9BAs shown, when the display area of the custom RecyclerView includes 5 columns * 12 rows = 60 grids. The original size of the display area is larger than the size of the screen. After multiplying the display area of the custom RecyclerView by the scaling factor 0.6, it is sent to the screen for display. At this moment, the actual display size of each ItemView in the custom RecyclerView on the screen is 240 pixels wide * 240 pixels high.

[0139] As Figure 9C shown, when the display area of the custom RecyclerView includes 15 columns * 35 rows = 525 grids. The original size of the display area is larger than the size of the screen. After multiplying the display area of the custom RecyclerView by the scaling factor 0.2, it is sent to the screen for display. At this moment, the actual display size of each ItemView in the custom RecyclerView on the screen is 80 pixels wide * 80 pixels high.

[0140] As Figure 9D shown, when the display area of the custom RecyclerView includes 21 columns * 49 rows = 1029 grids. The original size of the display area is larger than the size of the screen. After multiplying the display area of the custom RecyclerView by the scaling factor 1 / 7, it is sent to the screen for display. At this moment, the actual display size of each ItemView in the custom RecyclerView on the screen is 57 pixels wide * 57 pixels high.

[0141] It should be noted that in Figures 9A to 9D , the actual display size after multiplying the display area of the custom RecyclerView by the scaling 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 Figures 2 to 4 shown, the mobile phone will cover the status bar layer, activity bar layer, etc. above the grids according to the preset transparency, so that the grids covered by the status bar layer and activity bar layer are in a completely invisible state or an incompletely visible state. It can be understood that in actual implementation, the activity bar and / or status bar can also be removed so that all grids are in a completely visible state, which is not specifically limited in this application.

[0142] The above embodiments introduce that a custom RecyclerView may include multiple ItemViews, each ItemView corresponding to an ImageView, and one ImageView is used to display an image. To distinguish each ItemView and ImageView in the custom RecyclerView, the present application provides two custom indexes: one index is the real layout position index, abbreviated as LP; the other index is the real adapter position index, abbreviated as AP.

[0143] Among them, the real layout position index is an index established from the perspective of the LayoutManager and is used to represent the position of the grid in the custom RecyclerView. In the native logic of the Android system, the layout position index cannot be customized, while in the present application, the terminal device can change the real layout position index value according to the zoom factor, zoom center, scrolling operation, etc. In a custom RecyclerView, the real layout position index is continuously numbered from the ItemView in the first row and first column to the ItemView in the last row and last column.

[0144] The real adapter position index is an index separately set for the content displayed on the screen from the perspective of the adapter and 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 adapter position index cannot be customized, while in the present application, during the zooming process, the real adapter position index of the ItemView corresponding to the center of the two fingers remains unchanged, but the real adapter position indexes of other ItemViews may be renumbered, resulting in the real adapter position indexes of the entire custom RecyclerView not necessarily being continuous. That is to say, in the zooming scenario, the real adapter position index and the layout position index may not be equal.

[0145] Exemplarily, Figure 10 A schematic diagram showing the real layout position index and the real adapter position index during the zooming process is shown.

[0146] For ease of understanding, take the example where the maximum gear of the custom RecyclerView is 5 gears, and the width and height of each ItemView are equal to the width of the screen divided by 3, that is, the minimum gear is 3 gears. As Figure 10As shown in (a) below, before receiving the two-finger zoom-in operation of the user, the custom RecyclerView actually displayed on the screen is reduced to the same width as the screen, and the actual layout position index and the 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 of the ItemView in the first row and the 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 of the ItemView in the last row and the 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 line box, the user can place two fingers in the area surrounded by the dotted line box and gradually increase the distance between the two fingers. In response to the two-finger distance zoom-in operation, the mobile phone zooms in on the entire custom RecyclerView with the ItemView surrounded by the dotted line box as the center. The ItemView displayed on the screen is updated to 3 columns.

[0147] As an example, as Figure 10 shown in (b) below, the mobile phone can re-number the actual adaptation position index values corresponding to the ItemViews in the 1st to 3rd columns of the custom RecyclerView. The numbering rule for the actual adaptation position index values of the ItemViews in these 3 columns is as follows: the actual adaptation position index of the ItemView surrounded by the dotted line box remains AP = 6; starting from the ItemView surrounded by the dotted line box, the AP values of the ItemViews before the ItemView surrounded by the dotted line box are decreased by 1 in sequence, and the AP values of the ItemViews after the ItemView surrounded by the dotted line box are increased by 1 in sequence. For the ItemViews in the 4th to 5th columns of the custom RecyclerView, the mobile phone can assign the AP value of each ItemView to -1. Among them, AP = -1 represents that the actual adaptation position value is invalid. At this moment, an ItemView can display a blank image or can also keep displaying the image as Figure 10 shown in (a) below. Referring to Figure 10 (a) below and Figure 10 (b) below, it can be seen that the actual layout position index and the actual adaptation position index value of an ItemView are in a corresponding relationship. After performing a zoom operation on the custom RecyclerView with the ItemView with the layout position index LP = 6 as the zoom center, the actual adaptation position index values of the ItemViews on the screen are changed, and the actual layout position index values of each ItemView do not change. The above zoom scheme can ensure that the content in the center of the two fingers remains unchanged and can ensure the continuity of the image displayed on the screen.

[0148] As another example, the mobile phone can also be numbered based on the native adaptation position index of the Android system. In the native logic of the Android system, the adaptation position index cannot be customized. Therefore, as shown in (c) of Figure 10 , when switching from the fifth gear to the third gear, the customized adaptation position index value corresponding to each ItemView in the RecyclerView always remains unchanged.

[0149] Exemplarily, Figure 11 shows a software architecture diagram of an electronic device.

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

[0151] The application layer may include a series of application packages, such as a gallery application, a camera application, a ScaleGestureDetector, a ReceiveTouchView control for receiving touch event layers, a native RecyclerView control, a custom RecyclerView control, etc. The gallery application, the camera application, the native RecyclerView control and the ScaleGestureDetector are native controls of the Android system, and the ReceiveTouchView control and the custom RecyclerView control are newly added controls of this application.

[0152] The camera application can call the camera to take photos and videos, and store the taken photos and videos in the gallery application. The gallery application can not only manage the taken photos and videos, but also manage screenshots, shared images, etc.

[0153] The ReceiveTouchView control is used to receive the touch operations of the user.

[0154] If a single-finger touch operation 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 direction. 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 direction and repopulates the content in the RecyclerView.

[0155] If a two-finger touch operation is received, the ReceiveTouchView control passes the two-finger touch data to the pinch gesture detector. The pinch gesture detector executes the cross-gear zooming method of the grid interface provided in this application according to the two-finger touch data. For specific descriptions, reference can be made to the following embodiments and will not be elaborated here. As an example, the pinch gesture detector can be an interface of the RecyclerView or the custom RecyclerView.

[0156] When these application packages are run, various service modules provided by the application framework layer can be accessed through the application programming interface (API), and corresponding intelligent services can be executed.

[0157] The application framework layer provides APIs and programming frameworks for applications. The application framework layer includes some predefined functions. For example, the application framework layer can include the window manager service (WMS), the activity manager service (AMS), SurfaceFlinger, and the resource manager, etc. Among them, the WMS is used to pass the data collected by the touch driver to the currently bound window control, such as the RecyclerView control or the ReceiveTouchView control.

[0158] The system library can include multiple functional modules, such as the surface manager, media libraries, the 2D graphics engine (e.g., SGL), the 3D graphics processing library (e.g., OpenGL ES), etc. In the system library, the Android Runtime includes the core library and the virtual machine. The Android Runtime is responsible for the scheduling and management of the Android system. The core library consists of two parts: one part is the functional functions that need to be called by the Java language, and the other part is the core library of Android. The application layer and the application framework layer run in the virtual machine.

[0159] The kernel layer is the layer between hardware and software and belongs to the underlying part of the Android system. The kernel layer can include various driver interfaces, such as display drivers, audio drivers, touch drivers, and sensor drivers, etc.

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

[0161] Referring to the operations of the above embodiments, the gallery application supports both displaying all images on the photo page and classifying and 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 scheme based on the native RecyclerView and a cross-step image scaling scheme based on the custom RecyclerView respectively.

[0162] The following describes the specific implementation methods of these two image scaling schemes.

[0163] Example 1

[0164] Referring to the description of the above embodiments, the photo page includes titles and grids corresponding to each title. When the user reduces 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 the content of each grid, thereby realizing the scaling of the photo page. That is, the electronic device can set a native RecyclerView for each gear of the photo page, and the size of each native RecyclerView is equal to the size of the screen.

[0165] Taking the mobile phone as an example, it is pre-set with 4 gears, 8 gears, and 15 gears, and the size of the screen is 1200 in width * 2800 in height pixels. Figure 12 The flowchart of the step-by-step image scaling scheme based on the native RecyclerView is shown.

[0166] A1, the touch driver samples the user's touch operation according to the period T.

[0167] The above period, also known as the control period and reporting period, is the period for the touch driver to collect the user's touch operation.

[0168] Taking the touch driver sampling 240 times per second as an example. The period T = 1 / 240 = 4.16 ms, that is, the touch driver samples the touch data every 4.16 ms. If in a certain period, the user presses the touch screen with a single finger or two fingers, then the touch driver can determine the touch position of the single finger or two fingers according to voltage changes, etc.

[0169] A2. The touch driver receives the user's click operation on the icon of the gallery application and launches the gallery application.

[0170] Exemplarily, when the user wants to view an image, the user can click on the gallery icon 01 as shown in (a) of 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 launches the gallery application. The gallery application initializes the native RecyclerView and pinch gesture detector, etc. Among them, the native RecyclerView includes RecyclerView1, RecyclerView2, and RecyclerView3. The sizes of RecyclerView1, RecyclerView2, and RecyclerView3 are equal to the screen size, such as 1200 in width * 2800 in height pixels. RecyclerView1 is the daily title and supports displaying 4 columns of images. RecyclerView2 is the monthly title and supports displaying 8 columns of images. RecyclerView3 is the yearly title and supports displaying 15 columns of images.

[0171] A3. After the initialization is completed, the gallery application determines to display the photo page based on RecyclerView2 (also known as the second RecyclerView) and notifies the WMS. For example, the mobile phone can display the photo interface based on RecyclerView2 as shown in (b) of Figure 7 . Correspondingly, the WMS determines that RecyclerView2 is the layer for processing zoom events.

[0172] It should be noted that if the mobile phone displayed the photo page based on RecyclerView2 before the user last exited the gallery application, then when entering the gallery application this time, the gallery application determines to display the photo page based on RecyclerView2. It can be understood that if the user opens the gallery application for the first time, the gallery application can determine to display the photo page based on a pre-set native RecyclerView (RecyclerView1, RecyclerView2, or RecyclerView3), and this application does not make specific limitations.

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

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

[0175] At this time, the distance between the two fingers

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

[0177] Referring to the description of the above embodiments, since the size of RecyclerView2 is equal to the size of the screen, the scaling factor s1 = 1.

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

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

[0180] Among them,

[0181] Since the scaling factor s1 = 1, the calculated distance D1 = 1000 based on the coordinates (200, 200) and the coordinates (800, 1000) is equal to the true distance d1 = 1000 between the two fingers.

[0182] A8, the pinch gesture detector determines whether the distance D1 = 1000 is less than the threshold D = 540.

[0183] Generally, the distance between the two fingers is greater than or equal to 27mm. When the distance between the two fingers is less than 27mm, it can be basically excluded that this operation is a two-finger touch operation. Taking the physical size of the screen as 60 wide * 140mm high and the screen resolution as 1200 wide * 2800 pixels 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, and thus the zoom event ends, 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, record the distance D1, and execute the following A9.

[0184] It should be noted that this application takes the threshold D = 540 pixels as an example for illustration, and it does not limit this application. The distance between the two fingers of different people may be different, the physical size of the screen may be different, and the screen resolution may also be different. In this case, the threshold D calculated according to these parameters will also be different.

[0185] A9. The touch drive receives the two-finger movement operation of the user and sends the collected coordinates (150, 150) and the coordinates (630, 790) to the WMS. The WMS transfers the coordinates (150, 150) and the coordinates (630, 790) to the RecyclerView2.

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

[0187] At this time, the distance between the two fingers is equal to

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

[0189] A11. The RecyclerView2 transfers the coordinates (150, 150) and the coordinates (630, 790) to the pinch gesture detector.

[0190] A12. The pinch gesture detector calculates the distance Di = 800 pixels according to the coordinates (150, 150) and the coordinates (630, 790).

[0191] Among them,

[0192] Since the scaling factor s1 = 1, the distance Di = 800 pixels calculated according to the coordinates (150, 150) and the coordinates (630, 790) is the true two-finger distance di.

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

[0194] 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 effective and execute the following A14.

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

[0196] 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 the 4th gear to the 8th gear and from the 8th gear to the 15th gear 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 the 15th gear to the 8th gear and from the 8th gear to the 4th gear are both a2 = 1.2.

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

[0198]

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

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

[0201] A15, the zoom gesture detector determines to switch from gear 8 to gear 15 and notifies the gallery application.

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

[0203] A17, the touch driver receives the two-finger lift operation of the user 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.

[0204] A18, the zoom gesture detector determines to maintain the current gear.

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

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

[0207] 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, and then the WMS determines that RecyclerView1 is the layer for handling zoom events.

[0208] In the above photo page image scaling solution based on the native RecyclerView, since a corresponding native RecyclerView is set for each gear of the photo page, and the size of the native RecyclerView is equal to the size of the screen, 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 drive, so that the distance calculated by the zoom gesture detector based on the obtained coordinate pairs is equal to the actual two-finger distance.

[0209] Example 2

[0210] Referring to the description of Example 1 above, in the photo page image scaling solution, a corresponding native RecyclerView is set for each gear of the photo page, and the size of the native RecyclerView is equal to the size of the screen. For example, the sizes of the native RecyclerView and the screen are both 1200 in width * 2800 in height pixels. 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 long time consumption.

[0211] 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. During the gear switching process, the electronic device only needs to change the size and number of grids. Based on the grid characteristics of the album page, this application only sets one custom RecyclerView for all gears of the album page. 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 in width * 20000 in height pixels, and the size of the screen is 1200 in width * 2800 in height pixels. In this way, before the user's two fingers leave the screen after pressing the two fingers, the electronic device can switch back and forth between any gears based on the custom RecyclerView, such as switching from the current gear to other gears through the next gear. For the specific implementation method of the custom RecyclerView, reference can be made to the relevant descriptions of the above embodiments for Figure 8 、 Figures 9A to 9D 、 Figure 10 which will not be elaborated here.

[0212] For example, for the photo album page, the mobile phone is preset with 3, 5, 15, and 21 gears. The screen size is 1200 pixels wide * 2800 pixels high, and the size of the custom RecyclerView is 8400 pixels wide * 20000 pixels high. According to the description of the above Example 1, when the WMS transfers the two-finger coordinates to the custom RecyclerView, the custom RecyclerView will calculate a zoom factor corresponding to the two-finger operation. However, when this zoom factor is less than 1, the zoom action may fail prematurely.

[0213] The following combines Figure 13 Provide a flowchart showing that the cross-gear zoom solution based on the custom RecyclerView will fail prematurely.

[0214] B1, the touch drive samples the user's touch operation according to the period T.

[0215] For the implementation method of B1, the description of A1 can be referred to and will not be elaborated here.

[0216] B2, the touch drive receives the click operation of the user on the icon of the gallery application and starts the gallery application.

[0217] After starting the gallery application, the gallery application initializes the native RecyclerView ( Figure 13 not shown), the custom RecyclerView, the pinch gesture detector, etc. Among them, the native RecyclerView includes RecyclerView1, RecyclerView2, RecyclerView3. For RecyclerView1, RecyclerView2, RecyclerView, the description of the above Example 1 can be referred to and will not be elaborated here. The size of the custom RecyclerView is 8400 pixels wide * 20000 pixels high. It should be noted that the custom RecyclerView is custom-made 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.

[0218] In addition, after the initialization is completed, the gallery application can also display the photo album card page as shown in Figure 1 (b) of.

[0219] If the mobile phone shows the photo page before the user exits the gallery application last time, the gallery application shows the photo page after the initialization is completed. If the mobile phone shows any photo album page before the user exits the gallery application last time, the gallery application shows the photo album card page as shown in Figure 1 (b) of.

[0220] B3. The touch drive receives the operation of the user clicking on the camera card in the album card page and notifies the gallery application through the WMS.

[0221] B4. The gallery application displays the album page based on the custom RecyclerView and notifies the WMS. Accordingly, the WMS determines that the custom RecyclerView is the layer for handling the zoom event.

[0222] B5. The touch drive receives the two-finger press operation of the user and passes the coordinates (200, 200) and the coordinates (800, 1000) when the two fingers are pressed to the WMS. The WMS passes the coordinates (200, 200) and the coordinates (800, 1000) to the custom RecyclerView.

[0223] At this time, the distance between the two fingers

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

[0225] Assume that 5 columns of images are displayed when entering the album page. Then, referring to the above Figure 9B , the zoom factor is 0.6.

[0226] It can be understood that when the number of image columns displayed on the album page is different when the two fingers are pressed, the zoom factor of the custom RecyclerView is also different. For example, when 3 columns of images are displayed on the album page when the two fingers are pressed, then referring to the above Figure 9A , the zoom factor of the custom RecyclerView is 1.0.

[0227] B7. The custom RecyclerView passes the coordinates (120, 120) and the coordinates ((480, 600) to the pinch gesture detector.

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

[0229] Among them,

[0230] B9. The pinch 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.

[0231] B10, The touch driver receives the two-finger moving operation of the user and sends the collected coordinates (150, 150) and coordinates (630, 790) to the WMS. The WMS passes the coordinates (150, 150) and coordinates (630, 790) to the custom RecyclerView.

[0232] At this time, the distance between the two fingers is equal to

[0233] B11, The custom RecyclerView multiplies the coordinate (150, 150) by the scaling factor 0.6 to get the coordinate (90, 90), and multiplies the coordinate (630, 790) by the scaling factor 0.6 to get the coordinate (378, 474).

[0234] In B11, since the scaling has not been performed through the custom RecyclerView yet, the scaling factor of the custom RecyclerView still uses the scaling factor 0.6 when the two fingers are pressed.

[0235] B12, The custom RecyclerView passes the coordinates (90, 90) and coordinates (378, 474) to the pinch gesture detector.

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

[0237] Among them,

[0238] B14, The pinch gesture detector determines that the distance Di = 480 pixels is less than the threshold D = 540 pixels, determines that this operation is invalid, and ends the scaling event in advance. That is, cross-gear cannot be achieved.

[0239] As another example, if the distance Di is greater than the threshold D = 540 pixels, the scaling factor of the custom RecyclerView is recalculated according to the following relational expression:

[0240]

[0241] If Di < D1 and Si ≤ a1, or Di > D1 and Si ≥ a2 are satisfied, then when the next scaling operation is received, the scaling factor of the custom RecyclerView is updated to Si. Among them, 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.

[0242] In the above-mentioned album page image scaling solution based on a custom RecyclerView, since only one custom RecyclerView is set for all levels of album pages, and the size of the custom RecyclerView is much larger than the size of the screen. When the user reduces the distance between the two fingers, after the custom RecyclerView converts the touch coordinates, the pinch gesture detector calculates that the distance between the two fingers is less than the actual distance between the two fingers based on the converted coordinates, resulting in the inability to process normal scaling events and the failure to achieve cross-level scaling of photo pages. In the embodiment of the present application, the custom RecyclerView converts the touch coordinates, resulting in the inability to process normal scaling events, which is called the early failure of the scaling action.

[0243] Example 3

[0244] Referring to the description of Example 2 above, in the album page image scaling solution, using a custom RecyclerView may cause the problem of early failure of the scaling action. To this end, the present application also adds a custom ReceiveTouchView. The size of the ReceiveTouchView is the same as the size of the screen. In the scaling scenario, the ReceiveTouchView directly passes the two-finger coordinates to the pinch gesture detector without multiplying the two-finger coordinates by a scaling factor less than 1, thus solving the problem that the album page image scaling solution based on a custom RecyclerView is prone to early failure of the scaling action.

[0245] In addition, referring to the description of Example 2 above, in the scaling scenario of the album page, since a custom RecyclerView (also called the first RecyclerView) is set for each level, when the user presses the two fingers and before the two fingers leave the screen, the electronic device can switch back and forth between any levels based on the custom RecyclerView, such as switching from the current level to other levels through the next level.

[0246] The following combines Figure 14 Provide a flowchart of a cross-level scaling solution based on a custom RecyclerView that will not fail prematurely.

[0247] C1. The touch driver samples the user's touch operations according to the period T.

[0248] For the implementation method of B1, reference can be made to the description of A1, which will not be elaborated here.

[0249] C2. The touch driver receives the click operation of the user on the icon of the gallery application and starts the gallery application.

[0250] The gallery application processes the native RecyclerView (Figure 14 (not shown), the ReceiveTouchView layer for receiving touch events, a custom RecyclerView, a pinch gesture detector, etc. are initialized. Among them, the native RecyclerView includes RecyclerView1, RecyclerView2, and RecyclerView3. For RecyclerView1, RecyclerView2, and RecyclerView3, reference can be made to the description in the above Example 1, which will not be elaborated 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 in 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.

[0251] Additionally, after the initialization is completed, the gallery application can display an album card page as shown in Figure 1 (b) in the figure.

[0252] It should be noted that if the phone displays a photo page before the user last exits the gallery application, the gallery application will display a photo page after the initialization is completed. If the phone displays any album page before the user last exits the gallery application, the gallery application will display an album card page as shown in Figure 1 (b) in the figure.

[0253] C3, the touch driver receives the operation of the user clicking on the camera card in the album card page and notifies the gallery application through the WMS.

[0254] C4, the gallery application displays an album page based on the custom RecyclerView and notifies the WMS. Correspondingly, the WMS determines that ReceiveTouchView is the layer for handling zoom events.

[0255] C5, the touch driver receives the two-finger press operation of the user and transmits the coordinates (x11, y11) and coordinates (x12, y12) when the two fingers are pressed to the WMS. The WMS transmits the coordinates (x11, y11) and coordinates (x12, y12) to ReceiveTouchView.

[0256] C6, ReceiveTouchView transmits the coordinates (x11, y11) and coordinates (x12, y12) to the pinch gesture detector.

[0257] Referring to the description of the above embodiments, since the size of ReceiveTouchView is the same as the size of the screen, for example, both are 1200 in width * 2800 in height pixels, ReceiveTouchView can directly transfer the coordinates (x11, y11) and the coordinates (x12, y12) to the pinch gesture detector without coordinate transformation.

[0258] C7, based on the coordinates (x11, y11) and the coordinates (x12, y12), the pinch gesture detector calculates the center coordinates (mBeginFocusx, mBeginFocusy) of the two fingers and the distance d1 between the two fingers.

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

[0260] The center coordinates (mBeginFocusx, mBeginFocusy) of the two fingers can be obtained through the following relational expression (1):

[0261]

[0262] The distance d1 between the two fingers can be obtained through the following relational expression (2):

[0263]

[0264] Taking the coordinates (x11, y11) = (200, 200) and the coordinates (x12, y12) = (800, 1000) when the two fingers are pressed as an example. After the pinch gesture detector calculates that the distance d1 between the two fingers is 1000 pixels, it can be determined that the distance d1 between the two fingers is 1000 which is greater than the threshold D = 540 pixels, determining that this operation is valid, and recording the center coordinates (500, 600) of the two fingers and the distance d1 between the two fingers as 1000 pixels.

[0265] It can be understood that since ReceiveTouchView does not multiply the coordinates (200, 200) and the coordinates (800, 1000) by a scaling factor less than 1, the calculated distance d1 = 1000 pixels is the real distance between the two fingers, and there will be no problem that the scaling action fails prematurely.

[0266] C8, The touch drive receives a two-finger movement operation (also known as the first zoom operation) from the user, and sends the coordinates (xi1, yi1) and (xi2, yi2) after the two-finger movement operation to ReceiveTouchView through WMS.

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

[0268] Where i is an integer greater than or equal to 2. i represents the i-th time a two-finger operation is detected.

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

[0270] Where the two-finger distance di can be obtained through the following relation (3):

[0271]

[0272] Taking the coordinates (xi1, yi1) = (100, 100) and (xi2, yi2) = (460, 580) after the two-finger movement operation as an example. After the pinch gesture detector calculates that 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 it is determined that this operation is valid, and the following C11 is executed.

[0273] It can be understood that since ReceiveTouchView does not multiply the coordinates (100, 100) and (460, 580) by a scaling factor less than 1, the calculated distance di = 600 pixels is the true two-finger distance, and there will be no problem of the zoom action failing prematurely.

[0274] C11, The pinch gesture detector calculates the scaling factor Si based on the two-finger distance di and the two-finger distance d1.

[0275] Where the scaling factor Si can be obtained through the following relation (4):

[0276]

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

[0278] It should be understood that if the user reduces the distance between the two fingers, then di < d1; if the user increases the distance between the two fingers, then di > d1; if the user keeps the two fingers still, the zoom factor is equal to 1, then it is determined as 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.

[0279] 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.

[0280] Among them, 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).

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

[0282] 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 the above embodiment for Figure 9A When the display area includes 3 columns of grids, the zoom factor of the custom RecyclerView is 1.0. Referring to the description of the above embodiment for Figure 9B 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 the above embodiment for Figure 9C When the display area includes 15 columns of grids, the zoom factor of the custom RecyclerView is 0.2. Referring to the description of the above embodiment for Figure 9D When the display area includes 21 columns of grids, the zoom factor of the custom RecyclerView is 1 / 7.

[0283] 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.

[0284] If the zoom factor of the lower gear is represented by a1, the zoom factor of the higher gear is represented by a2, and the gear shift critical point is represented by a3, then the gear shift critical point a3 can be calculated by the following relational expression (5):

[0285]

[0286] As shown in Table 1, according to the above relationship (5), it can be calculated that: the critical point for gear shifting between the 3rd gear and the 5th gear is 0.8, the critical point for gear shifting between the 5th gear and the 15th gear is 0.4, and the critical point for gear shifting between the 15th gear and the 21st gear is 12 / 35.

[0287] Table 1

[0288] - Magnification factor 3 gears 1.0 Critical point for gear shifting 0.8 5 gears 0.6 Critical point for gear shifting 0.4 15 gears 0.2 Critical point for gear shifting 12 / 35 21 gears 1 / 7

[0289] In another implementation, for any two adjacent gears, the critical point for shifting from a higher gear to a lower gear is not equal to the critical point for shifting from a lower gear to a higher gear.

[0290] If the scaling factor of the lower gear is represented by a1, the scaling factor of the higher gear is represented by a2, and the critical point for shifting from the lower gear to the higher gear is represented by a4, then the critical point for gear shifting a4 can be calculated through the following relationship (6):

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

[0292] If the scaling factor of the lower gear is represented by a1, the scaling factor of the higher gear is represented by a2, and the critical point for shifting from the higher gear to the lower gear is represented by a5, then the critical point for gear shifting a5 can be calculated through the following relationship (7):

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

[0294] 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 shifting from the 3rd gear to the 5th gear is 0.9, the critical point for shifting from the 5th gear to the 15th gear is 0.5, and the critical point for shifting from the 15th gear to the 21st gear is 13 / 70.

[0295] Table 2

[0296] - Magnification factor 3 gears 1.0 Critical point for shifting from 3 gears to 5 gears 0.9 5 gears 0.6 Critical point for shifting from 5 gears to 15 gears 0.5 15 gears 0.2 Critical point for shifting from 15 gears to 21 gears 13 / 70 21 gears 1 / 7

[0297] 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 shifting from the 5th gear to the 3rd gear is 0.7, the critical point for shifting from the 15th gear to the 5th gear is 0.3, and the critical point for shifting from the 21st gear to the 15th gear is 11 / 70.

[0298] Table 3

[0299] - Magnification factor 3 gears 1.0 Critical point for shifting from 5 gears to 3 gears 0.7 5 gears 0.6 Critical point for shifting from 15 gears to 5 gears 0.3 15 gears 0.2 Critical point for shifting from 21 gears to 15 gears 11 / 70 21 gears 1 / 7

[0300] 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.

[0301] 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 Figure 1 , the mobile phone displays the album page shown in (a) of Figure 2 . The current gear is gear 5, and 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 - finger press, 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.

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

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

[0304] 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).

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

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

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

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

[0309] The second condition is that the scaling factor Si (which can also be represented by scaleLevel) obtained in the current reporting point period is equal to the scaling factor scale1 of the current gear.

[0310] Specifically, the scaling factor oldScaleLevel obtained in the (i - 1)th reporting point period is > scale1 or oldScaleLevel < scale1. The scaling factor scaleLevel obtained in the ith reporting point period is = scale1.

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

[0312] 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) in the previous period is equal to the scaling factor scale1 of the current gear.

[0313] Specifically, the scaling factor oldScaleLevel obtained in the 1st reporting point period is = scale1, and the scaling factor scaleLevel obtained in the 2nd reporting point period is > scale1 or scaleLevel < scale1. For example, oldScaleLevel = scale1 = 1 and scaleLevel = 0.9.

[0314] If condition 1 is satisfied, then first execute C14 below, and then execute C15 below.

[0315] If condition 1 is not satisfied, then directly execute C15 below.

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

[0317] It should be noted that the method for calculating the zoom center when two fingers are pressed can refer to the descriptions of the following embodiments for Figure 16 and Figure 17 and will not be elaborated here.

[0318] For example, if the zoom factor S1 in the current cycle and the zoom factor S(i-1) in the previous cycle are respectively on both sides of the zoom factor of the next gear position, it indicates that a cross-gear operation is about to occur. It is necessary to calculate the zoom center (pointx, mBeginFocusy) based on the center coordinates (mBeginFocusx, mBeginFocusy) of the two fingers to ensure that the left and right edges of the custom RecyclerView align with the left and right edges of the screen in the next gear position; otherwise, there is no need to reset the zoom center.

[0319] It should be understood that by setting the zoom center, during the two-finger zoom operation, the custom RecyclerView can be enlarged or reduced with the zoom center as the center point, ensuring that the gear edges of the grid align 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.

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

[0321] Among them, a1 is also called the critical point of the first gear position. The critical point of the first gear position is the critical point of the zoom factor for switching from the first gear position (the current gear position) to the second gear position (the larger gear position adjacent to the current gear position).

[0322] a2 is also called the critical point of the second gear position. The critical point of the second gear position is the critical point of the zoom factor for switching from the first gear position (the current gear position) to the third gear position (the smaller gear position adjacent to the current gear position).

[0323] 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.

[0324] 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.

[0325] It should be noted that the above C15 is described by taking the comparison of the zoom factors to determine whether the condition for switching gears is met as an example, and it does not limit this application. Referring to the above relational expression (4), the zoom factor is calculated based on the distance between the two fingers. Therefore, the pinch gesture detector can also determine whether di < d1 and Si ≤ a1, or di > d1 and Si ≥ a2 are met to determine whether the condition for switching gears is met.

[0326] C16. The pinch gesture detector determines not to switch gears.

[0327] Taking the case where the pinch gesture detector maintains the 5th gear as an example, if the user raises their two fingers, regardless of whether the zoom factor Si is equal to 0.6, finally 5 columns of images will be 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.

[0328] C17. The pinch gesture detector determines to switch gears.

[0329] Taking the case where the pinch gesture detector switches from the 5th gear to the 3rd gear as an example, after switching to the 3rd gear, if the user raises their two fingers, regardless of whether the zoom factor Si is equal to 1.0, finally 3 columns of images will be displayed on the screen, and the left and right edges of the 3 columns of images are aligned with the left and right edges of the screen.

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

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

[0332] C18. The pinch gesture detector notifies the custom RecyclerView to refresh the content corresponding to the ItemView of the next gear.

[0333] Refer to Figure 10 in (a) and Figure 10 in (b). When switching from the 5th gear to the 3rd gear, the ItemView corresponding to the 3rd gear is located in the 1st to 3rd columns of the custom RecyclerView. Renumber the actual adaptation position index values corresponding to the ItemView in the 1st to 3rd columns of the custom RecyclerView. The numbering rule for the actual adaptation position index values of the ItemView in these 3 columns is as follows: The actual adaptation position index of the ItemView surrounded by this dashed box remains AP = 6; starting from the ItemView surrounded by this dashed box, the AP values of the ItemView before the ItemView surrounded by this dashed box are decreased by 1 in sequence, and the AP values of the ItemView after the ItemView surrounded by this dashed box are increased by 1 in sequence. For the ItemView in the 4th to 5th columns of the custom RecyclerView, the mobile phone can assign the AP value of each ItemView to -1.

[0334] As a second optional implementation method, after C17, C18 may not be executed, but instead C19 can be directly executed.

[0335] Referring to Figure 10 (a) in and Figure 10 (c) in, when switching from the fifth gear to the third gear, the index value of the adaptation position corresponding to each ItemView in the custom RecyclerView can also always remain unchanged.

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

[0337] Exemplarily, Figure 15 shows the first coordinate system and the second coordinate system. The first coordinate system takes the upper left corner of the ReceiveTouchView as the origin, the x-axis is horizontal to the right, and the y-axis is vertical downward, where the size of the 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 vertical downward. The zoom display of the custom RecyclerView based on the zoom center and the zoom factor Si has the following meaning: For the point A1 located at the zoom center, after being sent to the screen according to the zoom factors 1.0, 0.9, and 0.8, the coordinates of the point A1 in the first coordinate system are all (pointx, mBeginFocusy), that is, when performing a zoom operation centered on the point A1, the coordinates of the point A1 in the first coordinate system always remain unchanged. However, for other points except the point A1, such as the point B1, after being sent to the screen according to the zoom factors 1.0, 0.9, and 0.8, the coordinates of the point B1 in the first coordinate system are (x1, y1), (x2, y2), and (x3, y3) respectively, that is, when performing a zoom operation centered on the point A1, the coordinates of the point B1 in the first coordinate system change.

[0338] C20, the touch drive receives the two-finger lift operation of the user, and notifies the pinch gesture detector of the lift event through the WMS and the ReceiveTouchView.

[0339] Among them, the lift event is used to indicate that both hands have left the screen and this zoom operation has ended.

[0340] C21, the pinch gesture detector determines the zoom factor corresponding to the gear before the lift, and notifies the custom RecyclerView to perform zoom display based on the zoom factor corresponding to the gear before the lift, and finally aligns the left and right edges of the first grid interface or the third grid interface with the left and right edges of the screen.

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

[0342] In the above method, the size of ReceiveTouchView is the same as the size of the screen. In the zoom scenario, ReceiveTouchView receives the two-finger operation of the user, thus solving the functional problem and scalability problem of the RecyclerView control directly receiving click events. In addition, during the process from pressing the two fingers to raising the two fingers, the mobile phone can periodically collect touch operations, calculate the zoom factor according to the change of the distance between the two fingers in adjacent cycles, and then determine whether to switch from the current gear to the next gear according to the zoom factor. In this way, without the two fingers leaving the screen, the user can trigger the electronic device to switch back and forth between any gears through continuous zoom operations, improving the operation experience when the user views the album page.

[0343] Taking the size of the mobile phone screen as 1200 in width * 2800 in height pixels, the custom RecyclerView size as 8400 in width * 20000 in height pixels, and the pre-set gears of the custom RecyclerView being the 3rd gear, 5th gear, 15th gear, and 21st gear in sequence as an example, combined with Figure 16 and Figure 17 introduce a method for calculating the zoom center.

[0344] Exemplarily, Figure 16 shows a flowchart of a method for calculating the zoom center. Figure 17 shows a schematic diagram of the display area for switching from a small gear to a large gear.

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

[0346] As Figure 17 shown, the center coordinates of the two fingers (mBeginFocusx, mBeginFocusy) = (370, 360) pixels.

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

[0348] The number of display columns nextShowSpan of the next gear = 15.

[0349] The zoom factor scale1 of the current gear = 0.6.

[0350] The zoom factor scale11 of the next gear = 0.2.

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

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

[0353] (2) According to the coordinates screenRectF of the display area of the current gear mapped to the custom RecyclerView, calculate:

[0354] The number of left offset columns span.left of the current gear = 7 columns;

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

[0356] The width of the display area of the current gear position screenRectF.width = currentShowSpan * initChildheigh = 2000 pixels.

[0357] Among them, the number of offset columns on the left side of the current gear position refers to the number of columns between the left edge of the display area of the current gear position and the Y-axis, and the left offset of the current gear position refers to the distance between the left edge of the display area of the current gear position and the Y-axis.

[0358] (3) Calculate the number of columns currentSelectIndex of the two-finger center in the display area at the current gear position according to the distance mBeginFocusx from the two-finger center to the left edge of the screen, the original height initChildheight of each ItemView in the custom RecyclerView, and the scaling factor scale1 of the current gear position.

[0359]

[0360] Among them, currentSelectIndex represents the number of columns of the two-finger center in the display area at the current gear position, mBeginFocusx represents the distance from the two-finger center to the left edge of the screen, initChildheight represents the original height of each ItemView in the custom RecyclerView, and scale1 represents the scaling factor of the current gear position.

[0361] (4) Calculate the number of columns nextSelectIndex of the two-finger center in the display area at the next gear position according to the distance mBeginFocusx from the two-finger center to the left edge of the screen, the original height initChildheight of each ItemView in the custom RecyclerView, and the scaling factor scale11 of the next gear position

[0362]

[0363] (5) Calculate the number of columns Index1 of the first column of the display area of the next gear position in the custom RecyclerView according to the number of offset columns span.left on the left side of the current gear position, the number of columns currentSelectIndex of the two-finger center in the display area at the current gear position, and the number of columns nextSelectIndex of the two-finger center in the display area at the next gear position.

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

[0365] (6) Obtain the distance X1, also known as the second distance, from the left edge of the display area of the next gear position in the custom RecyclerView to the left edge of the custom RecyclerView, based on 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 position in the custom RecyclerView to the left edge of the custom RecyclerView.

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

[0367] It should be noted that the number of columns of the first column of the display area of the next gear position in the custom RecyclerView refers to the number of columns calculated with the leftmost column of the custom RecyclerView as the first column, increasing the number of columns to the right in sequence, and the rightmost column as the last column as a reference. For example, Index1 = screenRectF.left + currentSelectIndex - nextSelectIndex + 1 = 7 + 2 - 5 + 1 = 5. As another implementation method, it is also possible to use the leftmost column of the custom RecyclerView as the 0th column, increasing the number of columns to the right in sequence, and the rightmost column as the last column as a reference to calculate the number of columns of the first column of the display area of the next gear position in the custom RecyclerView. For example, Index = span.left + currentSelectIndex - nextSelectIndex = 7 + 2 - 5 = 4 columns. It should be understood that regardless of the reference method, 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 position finally calculated remains the same.

[0368] (7) Calculate the number of columns Index2 of the last column of the display area of the next gear position in the custom RecyclerView based on the left offset column number span.left of the current gear position, the number of columns currentSelectIndex of the center of the two fingers in the display area in the current gear position, the number of columns nextSelectIndex of the center of the two fingers in the display area in the next gear position, and the number of columns nextShowSpan of the display area in the next gear position.

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

[0370] (8) Obtain the original height initChildheight of each ItemView in the custom RecyclerView and the number of columns Index2 of the last column in the display area of the next gear position in the custom RecyclerView, to get the distance X2 from the right edge of the display area of the next gear position in the custom RecyclerView to the left edge of the custom RecyclerView, which is also called the third distance.

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

[0372] (9) Calculate the distance centerX from the scaling center to the left edge of the custom RecyclerView based on the left offset screenRectF.left of the current gear position, the width screenRectF.width of the display area of the current gear position, the distance X1 from the left edge of the display area of the next gear position 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 position in the custom RecyclerView to the left edge of the custom RecyclerView.

[0373] Because the proportional positions of the scaling center centerX in the current gear position and the next gear position are the same before and after scaling, the following relational expression can be obtained:

[0374]

[0375] Transform the above relational expression and calculate to obtain:

[0376]

[0377] (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).

[0378] Among them, the calculation method of the x-axis coordinate of the scaling center is as follows:

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

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

[0381] = 360 pixels.

[0382] Where L represents the screen width.

[0383] (11) Determine that the coordinates of the zoom center are (pointx, mBeginFocusy).

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

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

[0386] 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 gears in the grid are respectively aligned with the left and right edges of the screen, and avoiding half - grid or blank areas at the left and right edges of the screen.

[0387] Exemplarily, Figure 18 Shows the method flow chart for refreshing the AP value.

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

[0389] The descriptions of steps (1) to (11) can be referred to the above embodiments, and will not be elaborated here.

[0390] D2. Determine the LP value (also known as selectLP) of the ItemView selected by the zoom center, and the AP value (also known as selectAP) of the ItemView selected by the zoom center.

[0391] Among them, the ItemView selected by the zoom center refers to the ItemView where the coordinates of the zoom center are located.

[0392] For each ItemView in the custom RecyclerView, the following steps can be executed:

[0393] D3. Determine the number of columns LineNum and LP value of an ItemView in the custom RecyclerView.

[0394] Among them, the number of columns lineNum of the grid to be adjusted can be determined according to the following relational formula:

[0395] LineNum = LP % maxShowSpan + 1.

[0396] Among them, maxShowSpan represents the maximum gear (such as 21 gears).

[0397] D4. Judge whether Index1 ≤ LineNum ≤ Index2 is satisfied.

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

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

[0400] D5. Judge whether LP ≤ selectLP is satisfied.

[0401] If LP ≤ selectLP, execute D7.

[0402] If LP > selectLP, execute D6.

[0403] D6. Determine the AP value of this ItemView according to the first formula.

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

[0405]

[0406] D7. Determine the AP value of this ItemView according to the second formula.

[0407] Among them, the second formula can be:

[0408]

[0409] D8. Set the AP value to -1.

[0410] Among them, AP = -1 represents that the actual adaptation position value is invalid. At this time, an ItemView can display a blank image or keep displaying the image as shown in Figure 10 (a) in.

[0411] In the above solution, 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.

[0412] Next, based on Figure 14 the provided flowchart, combined with Figure 19 , it is introduced how to implement the cross-gear zooming method of the grid interface provided by this application in the i-th reporting point period. Where i is a positive integer.

[0413] As Figure 19 shown, the method may include the following S1 to S14.

[0414] S1. The pinch gesture detector calculates the pinch distance di and the zoom factor Si according to the two-finger coordinates (xi1, yi1) and the coordinates (xi2, yi2).

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

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

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

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

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

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

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

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

[0423] 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 scenario is neither to magnify the custom RecyclerView based on the minimum gear (such as gear 3) nor to reduce the custom RecyclerView based on the maximum gear (such as gear 21). Then, execute the following S6.

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

[0425] As an example, condition 2 may include any one of the following conditions:

[0426] The first condition: 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.

[0427] If Si > scalemax, the first condition is specifically: Si > scalemax > S(i - 1).

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

[0429] If Si < scalemin, the first condition is specifically: Si < scalemin < S(i - 1).

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

[0431] The second condition: 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.

[0432] 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.

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

[0434] If condition 2 is satisfied, then first execute S5 below and then execute S13 below.

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

[0436] In S5, the pinch gesture detector takes the center of the two fingers as the zoom center.

[0437] That is, the coordinates of the center of the two fingers are the same as the coordinates of the zoom center.

[0438] It should be understood that after sliding past the boundary gear, 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, there is no need to switch the gear critical point either. The mobile phone does not need to refresh the content of the current gear on the screen to the content of the next gear, but only changes the zoom ratio of the custom RecyclerView.

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

[0440] Among them, a1 is the gear switching critical point for switching to a higher gear from the current gear, and a2 is the gear switching critical point for switching to a lower gear from the current gear.

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

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

[0443] Taking Table 1 above as an example, if Si ≥ 0.8, then the current gear belongs to the 3 - gear, and the zoom ratio 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 ratio 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 ratio scale1 of the 15 - gear = 0.6. If Si < 12 / 35, then the current gear belongs to the 21 - gear, and the zoom ratio scale1 of the 21 - gear = 1 / 7.

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

[0445] If condition 1 is satisfied, then first execute S8 below and then execute S9 below.

[0446] If condition 1 is not satisfied, then directly execute S9 below.

[0447] S8, The pinch gesture detector calculates the zoom center (pointx, mBeginFocusy) based on the two-finger center coordinates (mBeginFocusx, mBeginFocusy).

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

[0449] 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 the following S11 is executed; when Si > a1, the condition for switching gears is not met, and the following S10 is executed.

[0450] 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 S11 is executed; when Si < a2, the condition for switching gears is not met, and the following S10 is executed.

[0451] S10, The pinch gesture detector determines not to switch gears.

[0452] S11, The pinch gesture detector determines to switch gears.

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

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

[0455] As a second alternative implementation, after S11, S12 may not be executed, but instead S13 is directly executed.

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

[0457] Specifically, the pinch gesture detector can call the native zoom factor interface of the Android system to set the zoom factor Si as the current zoom factor of the custom RecyclerView. It can be understood that in each reporting cycle, 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.

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

[0459] For the specific implementation manners of S6 to S14, reference may be made to the descriptions of C11 to C19 above, which will not be elaborated herein.

[0460] For the sake of easy understanding, the following uses two embodiments to illustrate the specific implementation manners of the cross-gear zooming method for the grid interface of the album page provided in this application.

[0461] In the following two embodiments, for the sake of easy display of the zooming process in 20A to Figure 20G , Figures 21A to 21D is exemplified by a custom RecyclerView with a smaller size and a smaller number of columns. It can be understood that in actual implementation, the total number of columns of the custom RecyclerView can be more, such as 21 columns listed in the above embodiments. In addition, the numbers in 20A to Figure 20G , Figures 21A to 21D represent the actual adaptation position index values (AP values) of the ItemView. It should be understood that in actual implementation, the size of the custom RecyclerView, the gear 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 requirements such as the screen size and user operations.

[0462] Embodiment 1

[0463] Figures 20A to 20G Shows a schematic diagram of the interface change when switching from a large gear to a small gear.

[0464] In Figures 20A to 20G , the screen size is 1200 in width * 2800 in height pixels. The custom RecyclerView consists of a grid of 5 columns and 14 rows. The size of each grid in the custom RecyclerView is 400 in width * 400 in height pixels. The size of the custom RecyclerView is 2000 in width * 5600 in height pixels. The custom RecyclerView is preset with at least two gears: 3rd gear and 5th gear. 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.

[0465] As Figure 20AAs shown, when the custom RecyclerView is in the 5th gear, 5 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 gear is 0.6. When the user wants to view the enlarged image of a certain image from image 105 to image 154, the user can press two fingers in the area corresponding to this image, for example, press two fingers in the area corresponding to image 124. In the first reporting cycle, the mobile phone can obtain the two-finger coordinates (mBeginFocusx, mBeginFocusy) = (1080, 840), and calculate the distance between the two fingers according to the two-finger coordinates, for example, d1 = 1000 pixels. Since there is only one two-finger distance d1 = 1000 in the first reporting cycle and no other two-finger distances have been obtained, the zoom trend cannot be determined. Therefore, the two-finger center coordinates do not need to be set, and the screen content does not need to be refreshed. From the user's perspective, the content displayed on the screen remains unchanged.

[0466] On the basis of Figure 20A , as Figure 20B shown, 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 distance between the two fingers according to the two-finger coordinates, for example, d2 = 1167 pixels. Then, the zoom factor S1 = 0.6 + 0.6 * (1167 - 1000) / 1000 = 0.7 is calculated according to the two-finger distances d1 and d2. Since the current scenario is that the zoom factor oldScaleLevel when the two fingers are first pressed = scale1 = 0.6, the zoom center (pointx, mBeginFocusy) needs to be set. In addition, the zoom factor scaleLevel in the current cycle is 0.7, which is less than the critical point (1.0 + 0.6) / 2 = 0.8 for switching from the 5th gear to the 3rd gear. Therefore, the mobile phone does not need to refresh the content in the current gear on the screen and display the second grid interface. Instead, the zoom factor of the custom RecyclerView is directly set to 0.7. At this moment, from the user's perspective, the content displayed on the screen is enlarged a little with (pointx, mBeginFocusy) as the center point.

[0467] Among them, the calculation method of the coordinates of the zoom center (pointx, mBeginFocusy) can be as follows:

[0468] Determine the number of columns currentShowSpan = 5 columns displayed in the current gear.

[0469] Determine the number of columns nextShowSpan = 3 columns displayed in the next gear.

[0470] Determine that the number of columns of the left offset of the display area in the fifth gear is span.left = 0 columns.

[0471] Determine that the left offset of the display area in the fifth gear is: screenRectF.left = 0 pixels.

[0472] Determine that the width of the display area in the fifth gear is screenRectF.width = 2000 pixels.

[0473] Determine the number of columns where the center of the two fingers is located in the fifth gear: currentSelectIndex = 5 columns.

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

[0475] Determine the number of columns of the first column of the display area in the third gear in the custom RecyclerView:

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

[0477] Determine the X-axis coordinate of the upper left corner of the first ImageView in the first column of the display area in the third gear:

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

[0479] Determine the number of columns of the last column of the display area in the third gear in the custom RecyclerView:

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

[0481] Determine the X-axis coordinate of the lower right corner of the last ImageView in the last column of the display area in the third gear:

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

[0483] Determine the scaling center centerX for switching from the fifth gear to the third gear:

[0484]

[0485] 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.

[0486] Finally, the coordinates of the calculated zoom center are (pointx, mBeginFocusy) = (1200, 840). That is, the coordinates of the zoom center (1200, 840) are different from the coordinates of the center of the two fingers (1080, 840).

[0487] It should be understood that when switching from the 5th gear to the 3rd gear, by correcting the zoom center in advance, it can be ensured that when switching to the 3rd gear, 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 situation that the grid interface is not fully displayed or there are blank areas on the left and right edges of the screen.

[0488] On Figure 20B this basis, as Figure 20C shown, the user can continue to increase the distance between the two fingers, which is also called the second zoom operation. In the 3rd reporting point cycle, the mobile phone can obtain the new coordinates of the two fingers, and calculate the distance between the two fingers according to these coordinates of the two fingers. For example, D3 = 1500 pixels, and then calculate the zoom factor S2 = 0.6 + 0.6 * (1500 - 1000) / 1000 = 0.9 according to the distance d1 between the two fingers and the distance D3 between the two fingers. Since the zoom factors 0.7 in 2 reporting point cycles and 0.9 in the 3rd reporting point cycle are both less than the zoom factor 1.0 of the 3rd gear, there is no need to reset the zoom center, and the zoom center (1200, 840) remains unchanged. In addition, the current zoom factor 0.9 is greater than the critical point 0.8, so the mobile 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.

[0489] Among them, the method of refreshing the AP values of all grids corresponding to the 3rd to 5th columns of the custom RecyclerView is as follows: The selectLP of the ItemView selected by the zoom center is 124. 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 values 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 values 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.

[0490] It should be noted that the gear mentioned in the above embodiments refers to the number of columns of the image displayed on the screen for a long time after the user finishes the two-finger operation. For example, after the user sets the zoom factor of the custom RecyclerView to the zoom factor 1.0 corresponding to 3 gears through the two-finger operation, if the two fingers leave the screen, the image displayed on the screen will always remain at 3 gears 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 certain value in the range (0.8, 1.0) and then the two fingers leave the screen. In the second scenario, the user may set the zoom factor of the custom RecyclerView to a value greater than 1.0. For these two scenarios, the present application provides the following solutions respectively.

[0491] Solution for the first scenario:

[0492] Based on Figure 20C as shown in Figure 20D After the user sets the zoom factor of the custom RecyclerView to 0.9, at the 4th reporting point cycle, the mobile phone detects that the two fingers leave the screen (lift up). At this moment, the edge of the grid interface on the screen has not been aligned with the edge of the screen. In this case, the mobile 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 (such as image 116) displayed on the screen is aligned with the left edge of the screen, and the right edge of the last column of grids (such as image 136) displayed on the screen is aligned with the right edge of the screen.

[0493] It should be noted that when switching from the current reporting point cycle to the next reporting point cycle, each drawing in the embodiments of the present application is described by taking one update of the screen display content as an example. In actual implementation, in order to ensure the continuity of the picture change and avoid visual jump, 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 point cycle. The last frame of the multiple video frames is the picture corresponding to the next reporting point cycle. The zoom center corresponding to each video frame in the multiple video frames is the same. In the scenario of switching from a large gear to a small gear, the zoom factors of the respective video frames in the multiple video frames increase sequentially. In the scenario of switching from a small gear to a large gear, the zoom factors of the respective video frames in the multiple video frames decrease sequentially.

[0494] Taking Figure 20DTake the enlarged scene of the corresponding grid interface as an example. The switching animation includes 11 video frames. The scaling centers of these video frames are all (1200, 840). The scaling factor of the first frame is 0.9, the scaling factor of the second frame is 0.91, the scaling factor of the third frame is 0.92,..., the scaling factor of the tenth frame is 0.99, and the scaling 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. Therefore, the mobile phone can also start playing 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 preset or adjusted according to the change rate of the scaling factor.

[0495] Solution for the second scenario:

[0496] On Figure 20C the basis of, as Figure 20E shown, after the user sets the scaling factor of the custom RecyclerView to 0.9, the user can continue to increase the distance between the two fingers, which is also called the third scaling operation. In the 4th reporting point period, the mobile phone can obtain the new coordinates of the two fingers, and based on these coordinates of the two fingers, calculate the distance between the two fingers. For example, d4 = 1833 pixels, and then calculate the scaling factor S3 = 0.6 + 0.6 * (1833 - 1000) / 1000 = 1.1 according to the distance d1 between the two fingers and the distance d4 between the two fingers. Since the scaling factor 0.9 in 3 reporting point periods is less than the scaling factor 1.0 of the third gear, and the scaling factor 1.1 in the 4th reporting point period is greater than the scaling factor 1.0 of the third gear, and the current scaling has passed the third gear (i.e., cross-gear is achieved), it is necessary to reset the scaling center to ensure edge alignment. In addition, the current third gear is already the minimum gear, and there is no problem of edge alignment after passing the third gear. The mobile phone can directly set the center of the two fingers (1080, 840) as the scaling center and display the sixth grid interface. After passing the third gear, there is no need to switch the gear critical point anymore. The mobile phone does not need to refresh the content of the custom RecyclerView, but directly sets the scaling factor of the custom RecyclerView to 1.1, that is, directly enlarges the content displayed on the screen.

[0497] On Figure 20E the basis of, as Figure 20FAs shown, 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 point cycle, the mobile phone can obtain the new coordinates of the two fingers, and based on these coordinates of the two fingers, calculate the distance between the two fingers. For example, d5 = 2500 pixels, and then calculate the zoom factor S4 = 0.6 + 0.6 * (2500 - 1000) / 1000 = 1.5 according to the distance d1 between the two fingers and the distance d5 between the two fingers. Since the zoom factor 1.1 in the 4 reporting point cycles and the zoom factor 1.5 in the 5th reporting point cycle are both greater than the zoom factor 1.0 of the third gear, there is no need to reset the zoom center, that is, the zoom center (1080, 840) is maintained. The mobile phone can directly set the zoom factor of the custom RecyclerView to 1.5 and further magnify the screen display content with (1080, 840) as the zoom center.

[0498] On the basis of Figure 20F , as Figure 20G shown, after the user sets the zoom factor of the custom RecyclerView to 1.5, the two fingers of the user leave the screen. Since the current interface is only a temporary transitional interface and does not belong to the pre-set gears, after the two fingers are lifted, the mobile phone has to return to the minimum gear (third gear) and display the seventh grid interface. As an example, the mobile phone maintains the zoom center (1080, 840) and sets the zoom factor of the custom RecyclerView to 1.0. After that, the mobile phone plays a bounce animation, switches from the screen with a zoom factor of 1.5 to the screen with a zoom factor of 1.0, and finally remains displayed in the minimum gear (third gear).

[0499] Embodiment 2

[0500] Figures 21A to 21D Shows a schematic diagram of the interface change when switching from a small gear to a large gear.

[0501] In Figures 21A to 21D , the size of the screen is 1200 in width * 2800 in height pixels. The custom RecyclerView consists of a grid of 7 columns and 14 rows. The size of each grid in the custom RecyclerView is 400 in width * 400 in height pixels. The size of the custom RecyclerView is 2800 in width * 5600 in height pixels. The custom RecyclerView is preset with 3 gears: third gear, fifth gear, and seventh gear. 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.

[0502] As Figure 21A shown, when the custom RecyclerView is in the third gear, 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 scale1 of the current gear is 1.0. When the user wants to view more images, the user can press two fingers on the area corresponding to a certain image, for example, press two fingers on 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 distance between the two fingers according to the coordinates of the two fingers. For example, d1 = 1500 pixels, and the center coordinates of the two fingers (mBeginFocusx, mBeginFocusy) = (300, 600). Since there is only one distance d1 = 1500 pixels between the two fingers in the first reporting cycle, and other distances between the two fingers have not been obtained yet, the zoom trend cannot be determined. Therefore, the center coordinates of the two fingers do not need to be set, and the screen content does not need to be refreshed either.

[0503] On the basis of Figure 21A , as Figure 21B shown, the user can reduce the distance between the two fingers. In the second reporting cycle, the mobile phone can obtain the new coordinates of the two fingers and calculate the distance between the two fingers according to the coordinates of the two fingers. For example, d2 = 1350 pixels. Then, the zoom factor S1 = 1.0 + 1.0 * (1350 - 1500) / 1500 = 0.9 is calculated according to the distance d1 between the two fingers and the distance d2 between the two fingers. Since the current scenario is: the zoom factor oldScaleLevel when the two fingers are first pressed = scale1 = 1.0, the zoom center (pointx, mBeginFocusy) needs to be set. In addition, the zoom factor scaleLevel of the current cycle is 0.9, which is greater than the critical point (1.0 + 0.6) / 2 = 0.8 for switching from the third gear to the fifth gear. 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 reduced a little with (pointx, mBeginFocusy) as the center point.

[0504] In addition, the calculation method for the coordinates of the zoom center (pointx, mBeginFocusy) can be as follows:

[0505] Determine the number of columns currentShowSpan = 3 columns displayed in the current gear.

[0506] Determine the number of columns nextShowSpan = 5 columns displayed in the next gear.

[0507] Determine that the left offset column number of the display area in the third gear is span.left = 1 column.

[0508] Determine that the left offset of the display area in the third gear is: screenRectF.left = 400 pixels.

[0509] Determine that the width of the display area in the third gear is screenRectF.width = 1200 pixels.

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

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

[0512] Determine the column number of the first column of the display area in the fifth gear in the custom RecyclerView:

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

[0514] Determine the X-axis coordinate of the upper left corner of the first ImageView in the first column of the display area in the fifth gear:

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

[0516] Determine the column number of the last column of the display area in the fifth gear in the custom RecyclerView:

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

[0518] Determine the X-axis coordinate of the lower right corner of the last ImageView in the last column of the display area in the fifth gear:

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

[0520] Determine the scaling center centerX for switching from the fifth gear to the third gear:

[0521]

[0522] 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.

[0523] Finally, the coordinates of the calculated zoom center are (pointx, mBeginFocusy) = (600, 600).

[0524] 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.

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

[0526] Among them, the method of refreshing the AP values of all grids corresponding to columns 3 to 5 of the custom RecyclerView is as follows: Referring to the description of Figure 18 in the above-mentioned embodiment, the selectLP of the ItemView selected by the zoom center is 75. The LP value of the ItemView selected by the zoom center can also be obtained. Then, for each ItemView in columns 1 to 5 and rows 1 to 3 of the custom RecyclerView, the LP value can be calculated based on the second formula of the above-mentioned embodiment, and for each ItemView in columns 1 to 5 and rows 4 to 14 of the custom RecyclerView, the LP value can be calculated based on the first formula of the above-mentioned embodiment.

[0527] As another implementation, the mobile phone can also immediately refresh the AP values of all ItemViews corresponding to columns 1 to 5 of the custom RecyclerView after the distance between the two fingers decreases from d1 to d2, and refresh the AP values of all ItemViews corresponding to columns 4 to 5 of the custom RecyclerView to -1. This prevents a blank area from appearing between the third and fifth gears during the shrinking process.

[0528] 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 decrease the distance between the two fingers. In the fourth reporting cycle, the mobile phone can obtain the new coordinates of the two fingers, and based on these coordinates, calculate the distance between the two fingers, such as d4 = 126 pixels. Then, based on the distance between the two fingers d1 and the distance between the two fingers d4, the zoom factor S3 = 1.0 + 1.0 * (750 - 1500) / 1500 = 0.5 is calculated. Since the zoom factor of 0.7 in the three reporting cycles is greater than the zoom factor of 0.6 in the fifth gear, and the zoom factor of 0.5 in the fourth reporting cycle is less than the zoom factor of 0.6 in the third gear, and the current zoom has passed the fifth gear (about to cross gears), it is necessary to reset the zoom center.

[0529] Among them, the calculation method for the coordinates of the zoom center as (pointx, mBeginFocusy) can be as follows:

[0530] Determine the number of display columns currentShowSpan = 5 columns in the current gear.

[0531] Determine the number of display columns nextShowSpan = 7 columns in the next gear.

[0532] Determine that the left offset column number of the display area in the fifth gear is span.left = 0 columns.

[0533] Determine that the left offset of the display area in the fifth gear is: screenRectF.left = 0 pixels.

[0534] Determine that the width of the display area in the fifth gear is screenRectF.width = 2000 pixels.

[0535] Determine the column number where the center of the two fingers is located in the fifth gear: currentSelectIndex = 2 columns.

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

[0537] Determine the number of columns of the first column of the display area of the 7th gear in the custom RecyclerView:

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

[0539] Determine the upper left X-axis coordinate of the first ImageView in the first column of the display area of the 7th gear:

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

[0541] Determine the number of columns of the last column of the display area of the 7th gear in the custom RecyclerView:

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

[0543] Determine the lower right X-axis coordinate of the last ImageView in the last column of the display area of the 7th gear:

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

[0545] Determine the scaling center centerX for switching from the 7th gear to the 5th gear:

[0546]

[0547] 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.

[0548] Finally, the coordinates of the calculated scaling center are (pointx, mBeginFocusy) = (0, 600).

[0549] It should be understood that when switching from the 5th gear to the 7th gear, by correcting the scaling center in advance, it can be ensured that when switching to the 7th gear, 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 problems such as incomplete image display or blank space on the screen.

[0550] Exemplarily, Figure 22 is a schematic diagram of the hardware structure of an electronic device provided by an embodiment of the present application.

[0551] As Figure 22As shown in the figure, the electronic device 100 may include a processor 110, an internal memory 120, keys 130, a sensor module 140, a display screen 150, an audio module 160, a speaker 160A, a receiver 160B, a microphone 160C, a headphone jack 160D, etc. Among them, the sensor module may include a touch sensor.

[0552] The processor 110 may be used to execute the cross-gear zooming method of the album page in the above embodiments, or may also be used to execute the one-by-one gear zooming method of the photo page in the above embodiments. 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.

[0553] The internal memory 120 may be used to store computer-executable program codes, and the executable program codes 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 may store an operating system and application programs (APPs) required for at least one function, such as a gallery application, etc. The data storage area may store configuration files of each APP and data created during the use of the electronic device 100.

[0554] The display screen 150 includes a display panel for displaying each image in the gallery application.

[0555] The touch sensor is also called a "touch panel". The touch sensor may be disposed on the display screen 150, and the touch sensor and the display screen 150 form a touch screen, also called a "touch screen". The touch sensor may be used to detect a touch operation acting thereon or nearby. The touch sensor may transmit the detected touch operation to the application processor to determine the type of touch event and provide a visual output related to the touch operation through the display screen 150. In some other embodiments, the touch sensor may also be disposed on the surface of the electronic device 100, at a different position from the display screen 150.

[0556] The embodiments of the present application further provide a computer-readable storage medium, in which computer instructions are stored. When the computer-readable storage medium runs on an electronic device, the electronic device is enabled to execute the method as shown in the above embodiments. The computer instructions can be stored in the computer-readable storage medium or transmitted from one computer-readable storage medium to another. 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 a data center that includes one or more integrated media. The available medium can be a magnetic medium, an optical medium, a semiconductor medium, etc.

[0557] The embodiments of the present application further provide a computer program product, which includes computer program code. When the computer program code runs on an electronic device, the electronic device is enabled to execute the methods in the above embodiments.

[0558] The embodiments of the present application further provide a chip, which is coupled to a memory. The chip is used to read and execute the computer program or instructions stored in the memory to execute the methods in the above embodiments. The chip can be a general-purpose processor or a dedicated processor.

[0559] 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 beneficial effects corresponding to the methods provided above, and will not be elaborated here.

[0560] In the description of the present application, " / " means "or". For example, A / B can represent A or B. In the description of the present application, "and / or" is only a description of the association relationship between associated objects, indicating that there can be three relationships. For example, A and / or B can represent: A exists alone, A and B exist simultaneously, and B exists alone.

[0561] In the description and claims of the present application, terms such as "first" and "second" are used to distinguish different objects or different processes for the same object, rather than to describe a specific order of the object. For example, the first operation and the second operation are used to distinguish different operations, rather than to describe a specific order of the operations. In the embodiments of the present application, "a plurality of" means two or more.

[0562] Through the description of the above embodiments, those skilled in the art can clearly understand that for the convenience and brevity of description, only the division of the above functional modules is used as an example. In actual applications, the above functions can be allocated to different functional modules as needed, that is, the internal structure of the device is divided into different functional modules to complete all or part of the functions described above. In addition, in each embodiment of the present application, each functional unit can be integrated in a processing unit, or each unit can exist physically alone, or two or more units can be integrated in one unit. The above integrated unit can be implemented in the form of hardware or in the form of a software functional unit.

[0563] The above content is only the specific implementation manner of the present application, but the protection scope of the present application is not limited thereto. Any changes or substitutions within the technical scope disclosed in the present application should be covered by the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claims.

Claims

1. A display method for a grid interface, characterized in that, The method includes: Displaying a first grid interface based on a first recycler view within a display screen, the first grid interface including a grid with a first number of columns, and the grid including images; Determining a two-finger center in response to a two-finger press operation of the user on the display screen; After detecting the two-finger press operation, continuously detecting a first zoom operation; In response to the first zoom operation, performing a zoom operation on the first recycler view with a first position in the display screen as a zoom center, and displaying a second grid interface based on the zoomed first recycler view, where the size of the grid in the second grid interface is not equal to the size of the grid in the first grid interface, and the first position is determined according to the two-finger center, the first number of columns, and the first zoom operation; Wherein, 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.

2. The method according to claim 1, wherein 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 further includes: After detecting the first zoom operation, continuously detecting a lift hand operation; In response to the lift hand operation, maintaining the display of the second grid interface.

3. The method according to claim 1, wherein 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 further includes: After detecting the first zoom operation, continuously detecting a lift hand operation; In response to the lift hand operation, performing a zoom operation on the first recycler view with the first position as a zoom center, and displaying a third grid interface 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; or, In response to the lift hand operation, performing a zoom operation on the first recycler view with the first position as a zoom center, and redisplaying the first grid interface 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 two-finger press operation to before the completion of the lift hand operation, the user's two fingers do not leave the display screen.

4. The method according to claim 3, wherein The method further includes: Before displaying the third grid interface, determining that a first gear switching condition is satisfied; or, Before redisplaying the first grid interface, determining that the first gear switching condition is not satisfied; Wherein, the first gear switching condition includes: The zoom multiple corresponding to the first zoom operation is less than a first gear critical point, and the first gear critical point is a critical point of the zoom multiple for switching from the first gear to the second gear; The zoom multiple corresponding to the first zoom operation is greater than a second gear critical point, and the second gear critical point is a critical point of the zoom multiple for switching from the first gear to the third gear.

5. The method according to claim 1, wherein The method further includes: After detecting the first zoom operation, continuously detecting a second zoom operation; In response to the second zoom operation, performing a zoom operation on the first recycler view with the second position in the display screen as the 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; Wherein, from the two-finger press operation to the completion of the second zoom operation, the user's two fingers do not leave the display screen.

6. The method according to claim 5, wherein 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 includes: After detecting the second zoom operation, continuously detecting a raising hand operation; in response to the raising hand 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 raising hand operation, displaying the first grid interface 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 two-finger press operation to before the completion of the raising hand 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 includes: Before displaying the fifth grid interface, determining that the second gear switching condition is met; or, Before displaying the first grid interface again, determining that the second gear switching condition is not met; Wherein, the second gear switching condition includes: The zoom ratio corresponding to the second zoom operation is less than the zoom ratio corresponding to the first zoom operation, and the zoom ratio corresponding to the second zoom operation is less than the third gear critical point, and the third gear critical point is the critical point of the zoom ratio for switching from the fourth gear to the fifth gear; The zoom ratio corresponding to the second zoom operation is greater than the zoom ratio corresponding to the first zoom operation, and the zoom ratio corresponding to the second zoom operation is greater than the fourth gear critical point, and the fourth gear critical point is the critical point of the zoom ratio for switching 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 zoomed first recycler view, the method further includes: Determining the zoom ratio corresponding to the first zoom operation according to 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 satisfies a first condition, determine a second number of columns according to the zoom factor corresponding to the first zoom operation; Determine the first position according to 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.

9. The method according to claim 8, wherein 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; Wherein, 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, wherein The determining the first position according to 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 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 number of columns 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 position 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 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 the distance from the zoom center to the left edge of the first recycler view; Map the determined first coordinate value to the display screen to obtain a second coordinate value, where the second coordinate value represents the distance from the zoom center to the left edge of the display screen; Determine the position corresponding to the second coordinate value and the third coordinate value as the first position, where the third coordinate value represents the distance from the two-finger center to the upper edge of the display screen.

11. The method according to claim 10, wherein Determining the second distance includes: Determine the second distance according to 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 two-finger center in the display area corresponding to the first number of columns, the number of columns of the two-finger center in the display area corresponding to the second number of columns, and a first height; Wherein, the first height is the width of the table item view in the first recycler view when the grid interface displaying the third number of columns is shown 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, wherein Determining the third distance includes: Determine the third distance according to the second distance and the width of the second number of columns in the first recycler view.

13. The method according to claim 11, wherein Before determining the second distance, the method further includes: Determine the column number of the two - finger center in the display area corresponding to the second column number according to the distance from the two - finger center to the left edge of the display screen, the first zoom factor, and the first height; Determine the column number of the two - finger center in the display area corresponding to the first column number according to the distance from the two - finger center to the left edge of the display screen, the second zoom factor, and the first height; Wherein, the first zoom factor is equal to the ratio of the minimum number of columns supported by the grid interface for display to the second column number; the second zoom factor is equal to the ratio of the minimum number of columns supported by the grid interface for display to the first column number.

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

15. The method according to any one of claims 1 to 14, characterized in that The method further includes: After detecting the two - finger press operation, continue to detect a third zooming operation; in response to the third zooming operation, determine the zoom factor corresponding to the third zooming operation according to the first column number, the two - finger distance corresponding to the two - finger press operation, and the two - finger distance corresponding to the third zooming operation; When the zoom factor corresponding to the third zooming operation meets the second condition, perform a zooming operation on the first recycler view with the two - finger center as the zoom center, and display a sixth grid interface; Wherein, 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 grids in the sixth grid interface is larger than the size of the grids in the grid interface at the minimum gear or smaller than the size of the grids 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, wherein The second condition includes any one of the following: The zoom factor corresponding to the third zooming operation is greater than the maximum zoom factor; or, The zoom factor corresponding to the third zooming operation is less than the minimum zoom factor.

17. The method according to claim 15, characterized in that, The method further includes: After detecting the third zooming operation, continue to detect a lift - hand operation; In response to the lift - hand operation, perform a zooming operation on the first recycler view with the two - finger center as the zoom center, and display a seventh grid interface based on the zoomed - in 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 for display, or the number of columns of the seventh grid interface is equal to the minimum number of columns supported by the first recycler view for display.

18. The method according to any one of claims 1 to 17, characterized in that The method is applied to an electronic device, which includes a touch event receiving layer, the first recycler view, and a pinch gesture detector. 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 within the display screen includes: In response to a user's selection operation on an album card, displaying the first grid interface based on the first recycler view within the display screen; The method further includes: 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 pinch gesture detector through the touch event receiving layer, and determining a first two-finger distance by the pinch gesture detector according to the first two-finger coordinates.

19. The method according to claim 18, wherein 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 includes: In response to a selection operation on a photo control, displaying a grid interface based on the second recycler view within 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 pinch gesture detector through the second recycler view, and determining a second two-finger distance by the pinch gesture detector according to the second two-finger coordinates; 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 within the display screen; Wherein, the number of columns of the grid interface based on the second recycler view is different from the number of 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 table item views arranged in M rows and N columns, 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. 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 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. The chip system includes one or more processors, and the one or more processors are used to call computer instructions to cause the electronic device to execute the method according to any one of claims 1 to 20.

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

Images