Relocation method and device, chip system and storage medium

Abstract

The invention provides a repositioning method and device, a chip system and a storage medium, and relates to the technical field of terminals. According to the scheme, under the condition that the first grid interface is displayed on the basis of the first area of RecyclerView, if the double-finger pressing operation of a user is received, the electronic equipment can respond to the double-finger pressing operation, and the second grid interface is displayed on the basis of the second area of RecyclerView. Wherein the second area and the first area do not coincide or partially coincide, the grid arrangement modes of the second grid interface and the first grid interface are the same, and the grid content of the second grid interface and the grid content of the first grid interface are the same. According to the method, the user-defined Recycler View is repositioned, so that no blank area appears in the screen after the user performs the zooming operation.

Description

Technical Field

[0001] This application relates to the field of terminal technologies, and in particular, to a repositioning method, device, chip system, and storage medium. Background Art

[0002] With the rapid development of terminal technologies, the storage space of mobile phones is getting larger and larger. Mobile phones can store various types of images. For example, the gallery application can set up a camera album, a photo album, a video album, a screenshot album, and a personal favorites album. Currently, Android mobile phones support displaying images based on the RecyclerView, but there may be blank areas at the edges of the screen when displaying images, which seriously affects the user experience. Summary of the Invention

[0003] This application provides a repositioning method, device, chip system, and storage medium for solving the problem of long time consumption during the scaling of the grid interface.

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

[0005] In a first aspect, an embodiment of this application provides a repositioning method. The method includes:

[0006] In response to a first operation, display a first grid interface based on a first area of the RecyclerView; when the first grid interface is displayed, a two-finger press operation is received; in response to the two-finger press operation, display a second grid interface based on a second area of the RecyclerView, where the second area does not coincide with or partially coincides with the first area, the grid arrangement modes of the second grid interface and the first grid interface are the same, and the grid contents of the second grid interface and the first grid interface are the same.

[0007] In the above solution, the fact that the second area does not completely coincide with the first area can be understood as repositioning the RecyclerView, changing the relative position relationship between the display areas of the RecyclerView and the display screen. After detecting that the user presses with two fingers, by repositioning the RecyclerView, it can be ensured that no matter where the current gear display area is located in the RecyclerView or where the user operation is located in the current gear display area, if the user continues to perform a scaling operation after the press operation, there will be no blank area in the display screen, improving the operation experience when the user views images.

[0008] In a possible implementation, the above grid interface can be the grid interface of the album page, the grid interface of the photo page, or other grid interfaces based on the RecyclerView.

[0009] In a possible implementation, the method may further include: after detecting a two-finger press operation, continuously detecting a first zoom operation; in response to the first zoom operation, performing a zoom operation on the RecyclerView with a first position in the display screen as the zoom center, and displaying a third grid interface, where 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 first position is determined according to the center of the two fingers of the two-finger press operation, the number of columns of the first grid interface, 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.

[0010] In the above solution, after the user presses two fingers and before the two fingers leave the display screen, the electronic device can respond to the user's two-finger zoom operation, determine a display screen position as the zoom center, and perform a zoom operation on the RecyclerView to change the size of the grids 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, and the entire album page switching process is smoother, enabling the user to quickly find the image.

[0011] In a possible implementation, before displaying the second grid interface in the second area based on the RecyclerView, the method may further include: determining the center of the two fingers of the two-finger press operation; determining a first offset and a second offset according to the center of the two fingers; taking the display screen as a reference, moving the RecyclerView by the first offset in the first direction and moving the RecyclerView by the second offset in the second direction. Wherein, the first direction and the second direction are neither opposite nor relative. For example, the first direction and the second direction are perpendicular to each other within the display screen.

[0012] In the above solution, when the user's two fingers are at different positions on the display screen, the electronic device can determine the zoom center at different positions based on the center of the two fingers. The zoom centers at some positions (such as near the center of the display screen) may not cause blank areas to appear within the display screen, while the zoom centers at some positions (such as near the edge of the display screen) may cause blank areas to appear within the display screen. That is to say, the center of the two fingers is closely related to whether blank areas appear. Therefore, repositioning the RecyclerView based on the center of the two fingers can solve the problem of blank areas appearing during the zoom process.

[0013] In a possible implementation, determining a first offset based on the center of two fingers may include: determining a first column number and a second column number; determining an offset column number according to the first column number and the second column number; and determining the first offset according to the offset column number and the height of the grid in the first grid interface. The first column number is the column number of the item view selected by the center of two fingers when the first grid interface is displayed in the RecyclerView. The second column number is the column number of the item view selected by the center of two fingers when the fourth grid interface based on the RecyclerView is displayed. The number of columns of the grid in the fourth grid interface is equal to the total number of columns of the RecyclerView. The fourth grid interface can be understood as the grid interface displayed in the maximum gear.

[0014] Exemplarily, the electronic device may determine the first column number according to the distance from the center of two fingers to the left edge of the display screen and the height of the grid in the first grid interface. The first column number can be understood as the column number of the ItemView selected by the two-finger center coordinates (mBeginFocusx, mBeginFocusy) in the current gear in the custom RecyclerView. For example, the electronic device may determine the first column number through the following relational expression:

[0015]

[0016] where columnRecyclerView represents the first column number, childHeight represents the height of the ItemView displayed on the display screen in the current gear, and mBeginFocusX is the coordinate in the second coordinate system corresponding to mBeginFocusx.

[0017] Exemplarily, the electronic device may determine the second column number according to the distance from the center of two fingers to the left edge of the display screen and the height of the grid in the fourth grid interface. The second column number can be understood as the column number of the ItemView selected by the two-finger center coordinates (mBeginFocusx, mBeginFocusy) in the maximum gear in the custom RecyclerView. For example, the electronic device may determine the second column number through the following relational expression:

[0018]

[0019] where normalColumnRecyclerView represents the second column number, initChildHeight represents the height of the ItemView displayed on the display screen in the maximum gear, and mBeginFocusx represents the distance from the center of two fingers to the left edge of the display screen.

[0020] In a possible implementation, determining a second offset according to the center of two fingers may include: determining a first row number and a second row number; determining an offset row number based on the first row number and the second row number; and determining the second offset according to the offset row number and the height of the grid in the first grid interface. The first row number is the row number of the table item view selected by the center of two fingers when the first grid interface is displayed in the RecyclerView, the second row number is the row number of the table item view selected by the center of two fingers when the fourth grid interface based on the RecyclerView is displayed, and the number of grid rows in the fourth grid interface is equal to the total number of rows in the RecyclerView. The fourth grid interface can be understood as the grid interface displayed in the maximum gear.

[0021] Exemplarily, the electronic device may determine the first row number according to the distance from the center of two fingers to the upper edge of the display screen and the height of the grid in the first grid interface. The first row number can be understood as the row number of the ItemView selected by the center coordinates (mBeginFocusx, mBeginFocusy) of two fingers in the current gear in the custom RecyclerView.

[0022] For example, the electronic device may determine the first row number through the following relational expression:

[0023]

[0024] where topCorrectLine represents the row number from the upper edge of the ItemView selected by the center coordinates (mBeginFocusx, mBeginFocusy) of two fingers in the current gear to the upper edge of the custom RecyclerView, childHeight represents the height of the ItemView displayed on the display screen in the current gear, and mBeginFocusY is the Y-axis coordinate of the center of two fingers in the second coordinate system.

[0025] Exemplarily, the electronic device may determine the second row number according to the distance from the center of two fingers to the upper edge of the display screen and the height of the grid in the fourth grid interface. The second row number can be understood as the row number of the ItemView selected by the center coordinates (mBeginFocusx, mBeginFocusy) of two fingers in the maximum gear in the custom RecyclerView.

[0026] For example, the electronic device may determine the second row number through the following relational expression:

[0027]

[0028] Among them, nowSelectTopLine represents the number of rows from the upper edge of the ItemView selected by the center coordinates (mBeginFocusx, mBeginFocusy) of the two fingers in the maximum gear to the upper edge of the custom RecyclerView, initChildHeight represents the height of the ItemView displayed on the display screen in the maximum gear, and mBeginFocusy is the y-axis coordinate of the center of the two fingers in the first coordinate system.

[0029] In a possible implementation, the electronic device can also calculate the row offset of the RecyclerView through the following relational expression: translationLineNumOffset = nowSelectTopLine’ - topCorrectLine’.

[0030] In a possible implementation, the electronic device can also calculate the row offset of the RecyclerView through the following relational expression: translationLineNumOffset = nowSelectTopLine - topCorrectLine.

[0031] In a possible implementation, the table item views in the first area and the table item views in the second area are in a one-to-one correspondence. Accordingly, after moving the RecyclerView and before displaying the second grid interface, the method may further include: determining the table item views in the second area respectively corresponding to the table item views in each of the first areas based on the offset column number and the offset row number, where the offset column number is the number of columns the RecyclerView is moved, and the offset row number is the number of rows the RecyclerView is moved; refreshing the AP values of the table item views in the second area according to the AP values of the table item views in the first area.

[0032] For example, the pinch gesture detector can set the AP value of the first ItemView in the display area after relocation to be equal to the AP value of the second ItemView in the display area before relocation. Among them, the LP value of the first ItemView is represented by newLp, and the LP value of the second ItemView is represented by oldLp.

[0033] newLp and oldLp satisfy the following relational expression:

[0034] newLp = oldLp + translationColumnNumOffset + maxShowSpan * translationLineNumOffset.

[0035] Among them, translationLineNumOffset represents the line number offset, translationColumnNumOffset represents the column number offset, and maxShowSpan represents the number of columns of the custom RecyclerView.

[0036] In the above solution, after repositioning the custom RecyclerView, since the relative position relationship between the custom RecyclerView and the display area changes, the image on the display screen changes. After the user presses a finger and before any zooming or moving operations are performed, theoretically, from the user's perspective, the image on the display screen should not change. By refreshing the display area corresponding to the display screen, the album interface before and after the two fingers are pressed remains unchanged.

[0037] In a possible implementation, before moving the RecyclerView, the display screen shows the image of the first area; after moving the RecyclerView, the display screen shows the image of the second area. Since the AP value of the first area is the same as the AP value of the second area, from the user's perspective, the image on the display screen does not change.

[0038] In a possible implementation, based on the second area of the recycler view, before displaying the second grid interface, the method may further include: determining that the repositioning condition is met. The repositioning condition includes at least one of the following: the distance between the center of the two fingers in the two-finger press operation and any edge of the display screen is less than the first threshold, the distance between the upper edge of the recycler view and the upper edge of the display screen is less than the second threshold; the distance between the lower edge of the recycler view and the lower edge of the display screen is less than the second threshold; the distance between the left edge of the recycler view and the left edge of the display screen is less than the third threshold; the distance between the right edge of the recycler view and the right edge of the display screen is less than the third threshold. Among them, the first threshold is determined according to the grid size of the first grid interface, the number of columns of the recycler view, and the display area of the first grid interface in the recycler view; the second threshold is determined according to the grid size of the first grid interface and the number of rows of the recycler view; the third threshold is determined according to the grid size of the first grid interface and the number of columns of the recycler view.

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

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

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

[0042] In a 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 an electronic device, the electronic device is caused to execute the method provided in the first aspect and any one of its possible implementation manners.

[0043] In a fifth aspect, the present application provides a computer program product. When the computer program product runs on a computer, the computer is caused to execute the method provided in the first aspect and any one of its possible implementation manners.

[0044] In a 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 cause the electronic device to execute the method provided in the first aspect and any one of its possible implementation manners.

[0045] 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 one of its possible implementation manners, and will not be elaborated here. Description of the Drawings

[0046] Figure 1 It is a schematic diagram of the scenario of scrolling and displaying images on the album page provided by the embodiment of the present application;

[0047] Figure 2 It is one of the schematic diagrams of the scenario of zooming and displaying images on the album page provided by the embodiment of the present application;

[0048] Figure 3 It is another schematic diagram of the scenario of zooming and displaying images on the album page provided by the embodiment of the present application;

[0049] Figure 4 It is a third schematic diagram of the scenario of zooming and displaying images on the album page provided by the embodiment of the present application;

[0050] Figure 5 Schematic diagram of the custom RecyclerView provided for the album page setting in the embodiment of the present application;

[0051] Figure 6 Schematic diagram of the reduction operation on the custom RecyclerView provided for the embodiment of the present application;

[0052] Figures 7A to 7D Schematic diagram of the relationship between the custom RecyclerView and the screen at different gears;

[0053] Figure 8 Schematic diagram of the actual layout position index and the actual adaptation position index during the zooming process;

[0054] Figure 9 Software architecture diagram of an electronic device provided for the embodiment of the present application;

[0055] Figure 10 Flowchart of a zooming method based on the custom RecyclerView;

[0056] Figure 11 Flowchart of a zooming method based on the custom RecyclerView and the ReceiveTouchView;

[0057] Figure 12 Schematic diagram of the white edge caused by non-relocation provided for the embodiment of the present application;

[0058] Figure 13 Method flowchart for repositioning the custom RecyclerView provided for the embodiment of the present application;

[0059] Figure 14 Method flowchart for calculating the zoom center provided for the embodiment of the present application;

[0060] Figure 15 Schematic diagram of the display area for switching from a small gear to a large gear provided for the embodiment of the present application;

[0061] Figure 16 Method flowchart for calculating the AP value provided for the embodiment of the present application;

[0062] Figures 17A to 17C Schematic diagram of refreshing the grid interface when switching from a small gear to a large gear provided for the embodiment of the present application;

[0063] Figures 18A to 18C Schematic diagram of refreshing the grid interface when switching from a large gear to a small gear provided for the embodiment of the present application;

[0064] Figure 19 This is a schematic diagram of the hardware structure of an electronic device provided by an embodiment of the present application. Detailed implementation manners

[0065] 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. Obviously, the described embodiments are some, but not all, of the embodiments of the present application.

[0066] Currently, the gallery application supports multiple image display modes. For example, 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, self-taken photo, live photo, long exposure, slow motion, screenshot, and animated picture, etc.

[0067] Mobile phones based on the Android system support displaying a fixed number of columns of images in a grid form on each album page. Users can trigger the mobile phone to display more images by swiping up and down. However, when there are many 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.

[0068] In view of the above problems, the present application provides an interface display method. After the user presses two fingers and before the two fingers leave the screen, the user can continuously change the distance between the two fingers, and the electronic device can respond to the continuous zoom operation of the two fingers to switch back and forth between any gears, and refresh other images on the interface while keeping the image selected at the center of the two fingers unchanged. In this way, users can quickly find images based on the zoom operation, improving the operation experience when viewing the album page.

[0069] The electronic device has preset multiple gears respectively. Among them, "gear" can be understood as the number of columns of images displayed on the screen. The electronic device has preset 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 columns of images displayed on the screen is 3 columns; when the gear is 5 gears, the corresponding number of columns of images displayed on the screen is 5 columns; when the gear is 15 gears, the corresponding number of columns of images displayed on the screen is 15 columns; when the gear is 21 gears, the corresponding number of columns of images displayed on the screen is 21 columns.

[0070] The user can change the number of image columns of the 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 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 album page displayed on the screen by increasing the distance between the two fingers. If the user sets the album page to 21 columns through the zoom operation, the electronic device will always display 21 columns of images until the next two-finger operation is received. As yet another example, the electronic device supports "cross-gear zoom" of the album page. When 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, until 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.

[0071] It should be noted that the above method can be an electronic device based on the Android system or an electronic device based on other operating systems, and this application does not make specific limitations. The above electronic device is also called 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.

[0072] Next, taking the electronic device as a mobile phone as an example, combined with Figures 1 to 4 , an example is given to illustrate the usage scenario of the gallery application.

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

[0074] For example, Figure 1 A schematic diagram showing a scene in which a mobile phone scrolls and displays images on an album page.

[0075] like Figure 1 As shown in (a) of FIG. 1 , the mobile phone displays icons of application programs such as the gallery on the desktop. When the user wants to view an image, the user can click the gallery icon 01. In response to the user's click operation on the gallery icon 01, the mobile phone displays the following Figure 1 The card page is shown in (b) in the figure. The card page includes multiple areas: the status bar provides battery and signal strength indicators, the action bar provides photos and search boxes, the foot bar provides photos, albums, memories and creations, and other areas provide album cards such as camera, all photos and videos. Among them, the album card is also called the album card, and each album card is the entrance to an album. Users can select an album card from these album cards. For example, Figure 1 As shown in (b) of FIG. 1 , the user can click on the “Camera” card 02. In response to the user clicking on the “Camera” card 02, the mobile phone displays the following Figure 1 The album page shown in (c) in FIG. The album page includes a plurality of square grids 03, and is therefore also called a grid page. For example, a grid page includes 5 columns of grids, and the side length h1 of each grid is equal to the width of the screen divided by 5. Each grid 03 is used to display an image. The user can trigger the mobile phone to display more images on the album page by sliding up and down. Figure 1 As shown in (c) in FIG. 4 , the user can press image 455 with one finger without releasing it. Figure 1 As shown in (d) in FIG. 1 , a single finger starts sliding downward. If a single finger slides downward by a distance d1, in response to the user's sliding operation, as shown in FIG. Figure 1 As shown in (e) of FIG. 4 , the album page slides downward with the hand by a distance d1. The user can continue to press and hold the image 455 and slide downward by a distance d2. In response to the user's sliding operation, as shown in FIG. Figure 1 As shown in (f) in the figure, the album page slides downward with the hand for a distance d2. Usually, the sliding distance of the sliding operation with the hand is equal to the distance the album page is scrolled downward. The longer the sliding distance of the sliding operation with the hand, the more content is displayed when the album page is scrolled downward. In the above embodiment, the mobile phone supports displaying more images in response to a single-finger sliding operation on the album page, but when there are many photos and videos on the album page, the user may need to perform multiple single-finger sliding operations to find the image they want to view. This process is inconvenient to operate and may affect the user's operating experience.

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

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

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

[0079] As an example, after the user clicks on the "Camera" card 02 as shown in (b) of Figure 1 , the mobile phone displays the album page as shown in (a) of Figure 2 . The album page consists of 5-column grids, and the side length of each grid is h1. The user can press two fingers on the album page as shown in (a) of Figure 2 . At this moment, the distance between the two fingers is d3. As shown in (b) of Figure 2 , when the distance between the two fingers decreases from d3 to d4, the album page switches to 15-column grids, and the side length of each grid 04 is h2, where h2 is equal to the screen width divided by 15. As shown in (c) of Figure 2 , when the distance between the two fingers decreases from d4 to d5, the album page switches to 21-column grids, and the side length of each grid 05 is h3, where h3 is equal to the screen width divided by 21. As shown in (d) of Figure 2 , when the user raises the hand, the album page remains displaying 21 images. That is to say, on the premise that the user's two fingers do not leave the screen, the mobile phone realizes cross-gear zooming of the album page.

[0080] As another example, after the user clicks on the "Camera" card 02 as shown in (b) of Figure 1 , the mobile phone displays the album page as shown in (a) of Figure 3 . The album page consists of 5-column grids, and the side length of each grid is h1. The user can press two fingers on the album page as shown in (a) of Figure 3 . At this moment, the distance between the two fingers is d6. As shown in (b) of Figure 3 , when the distance between the two fingers increases from d6 to d7, the album page switches to 3-column grids, and the side length of each grid 06 is h4, where h4 is equal to the screen width divided by 3. As shown in (c) of Figure 3 , when the user continues to increase the distance between the two fingers to d8, the album page remains displaying 3 images. As shown in (d) of Figure 3As shown in (d) in FIG, after the two-finger position increases to d8, the user raises his hand, and the album page continues to display 3 columns of images. In other words, after the mobile phone switches from the 5th gear to the minimum gear (3rd gear), the album page remains at 3rd gear.

[0081] 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 4 As shown in (d) in the figure, when the user raises his hand, the album page rebounds to 3 columns of images, and the left and right edges of the 3 columns of images are aligned with the left and right edges of the screen. In other words, after the phone switches from 5 levels to the minimum level (level 3), it can continue to zoom in in response to user operations, but it will eventually rebound to the minimum level (level 3) after the user raises his hand.

[0082] It should be noted that the above Figures 1 to 4 The number of grid columns in the above is only an exemplary description and does not limit the present application. In actual implementation, the number of grid columns can be adjusted according to the use requirements. Figures 1 to 4 The solution shown is not limited to album pages and photo pages, but can also be extended to other forms of interface grids.

[0083] In addition, this application does not limit the number of image columns displayed when the mobile phone enters the album page. For example, the number of image columns displayed each time the mobile phone enters the album page can be set according to a preset gear (such as 5 gears). For another example, the gear of the mobile phone when entering the album page this time is consistent with the gear when exiting the album page last time. If the gear when exiting the album page last time was 3 gears, then the gear of the mobile phone when entering the album page this time is also 3 gears.

[0084] The following is an explanation of the local refresh method provided by this application by taking an electronic device based on the Android system as an example.

[0085] In an electronic device using the Android 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 does not support scaling, and the size of the native RecyclerView is always equal to the size of the screen.

[0086] Referring to the description of Figures 1 to 4 in the above embodiment, in the grid page of the photo album, each grid is continuous and the sizes of all grids are the same. During the process of switching gears, only the size and quantity of the grids are changed. Based on this, the present application provides a custom RecyclerView, and the size of the custom RecyclerView control is larger than the size of the screen. For example, the screen size is 1200 pixels wide * 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 on the gallery interface, the custom RecyclerView displayed on the screen will also be enlarged or reduced accordingly, thus avoiding the problem of re-measuring the size and position of each grid and repopulating the content of each grid during gear switching, which results in a long time-consuming issue.

[0087] Exemplarily, Figure 5 shows a schematic diagram of a custom RecyclerView set for the photo album page.

[0088] 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 5As 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, the number of 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 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 is at least one row more 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.

[0089] As Figure 5 shown, at 3 gears, 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.

[0090] It should be noted that Figure 5The relative positional relationship between the display area and the custom RecyclerView shown is only for illustrative purposes. In actual implementation, the user can change the relative positional relationship between the screen and the custom RecyclerView, as well as the size of the display area seen by the user, 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. For another example, 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 greater number of smaller-sized images; when the user increases the distance between the two fingers, the display area in the custom RecyclerView reduces, so that after sending the reduced display area to the screen, the screen displays a smaller number of larger-sized images.

[0091] Exemplarily, Figure 6 shows a schematic diagram of performing a reduction operation on the custom RecyclerView.

[0092] As Figure 6 shown, the custom RecyclerView includes 21 columns of ItemView. At the initial moment, 60 ItemView, which are 5 columns and 12 rows, are displayed on the screen. When the user wants to view a greater number of photos, the user can press the two fingers on the screen and gradually reduce the distance between the two fingers. In response to the user's operation of reducing the distance between the two fingers, the mobile phone reduces the custom RecyclerView displayed on the screen. At this moment, 525 ItemView, which are 15 columns and 35 rows, are displayed on the screen. As another example, the user can also increase the distance between the two fingers, trigger the mobile phone to enlarge the custom RecyclerView, reduce the number of ItemView displayed on the screen, and increase the size of the image corresponding to each ItemView.

[0093] The custom RecyclerView of the present application involves two sizes:

[0094] One is to customize the original size of the RecyclerView, that is, the initialized size. Regardless of how many columns of images are included in the display area of the customized RecyclerView, the minimum number of columns displayed on the screen is 3 columns. Then, the original size of each ItemView in the customized RecyclerView is 400 pixels wide * 400 pixels high. Since the maximum number of columns of the customized RecyclerView is 21, and the number of rows is 50 in the case of 21 columns, the original size of the customized RecyclerView is 8400 pixels wide * 20000 pixels high.

[0095] The other is to customize the actual display size of the RecyclerView. Since the number of columns of ItemView displayed on the screen is different when the number of columns included in the display area of the customized RecyclerView is different, 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 in 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.

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

[0097] Exemplarily, Figures 7A to 7D shows a schematic diagram of the relationship between the customized RecyclerView and the screen at different gears.

[0098] Assume that the size of the mobile phone screen is 1200 pixels wide * 2800 pixels high, and the size of the customized RecyclerView is 8400 pixels wide * 20000 pixels high. The customized RecyclerView includes 21 columns * 50 rows = 1050 grids, and the size of each grid is 400 pixels wide * 400 pixels high. 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.

[0099] As Figure 7AAs shown in the figure, when the display area of the custom RecyclerView includes 3 columns * 7 rows = 21 grids. The original size of the display area is equal to the size of the screen. The display area can be sent to the screen according to a ratio of 1:1 (that is, multiplying the display area of the custom RecyclerView by a scaling factor of 1.0). At this moment, the actual display size of each ItemView in the custom RecyclerView on the screen is 400 pixels wide * 400 pixels high.

[0100] As Figure 7B shown in the figure, 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. The display area of the custom RecyclerView can be multiplied by a scaling factor of 0.6 and then sent to the screen. At this moment, the actual display size of each ItemView in the custom RecyclerView on the screen is 240 pixels wide * 240 pixels high.

[0101] As Figure 7C shown in the figure, 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. The display area of the custom RecyclerView can be multiplied by a scaling factor of 0.2 and then sent to the screen. At this moment, the actual display size of each ItemView in the custom RecyclerView on the screen is 80 pixels wide * 80 pixels high.

[0102] As Figure 7D shown in the figure, 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. The display area of the custom RecyclerView can be multiplied by a scaling factor of 1 / 7 and then sent to the screen. At this moment, the actual display size of each ItemView in the custom RecyclerView on the screen is 57 pixels wide * 57 pixels high.

[0103] It should be noted that in Figures 7A to 7D , 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 in the figure, the mobile phone will cover the status bar layer, the activity bar layer, etc. above the grids according to the preset transparency, so that the grids covered by the status bar layer and the 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 the status bar can also be removed so that all grids are in a completely visible state. This application does not make specific limitations.

[0104] 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 one image. To distinguish each ItemView and ImageView in the custom RecyclerView, this application provides two custom indexes: one index is the real layout position index, simply referred to as the real LP; the other index is the real adapter position index, simply referred to as the real AP.

[0105] 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 customize the value, while in this application, the terminal device can change the real layout position index value according to factors such as the zoom ratio, zoom center, and scrolling operation. 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.

[0106] 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 customize the value, while in this 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.

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

[0108] For the sake of easy understanding, take the example where the maximum gear of the custom RecyclerView is 5 gears, and the width and height of each ItemView are both equal to the width of the screen divided by 3, that is, the minimum gear is 3 gears. As Figure 8As shown in (a) below, before receiving the two-finger zoom-in operation of the user, the custom RecyclerView actually displayed on the screen is shrunk to be equal to the width of the screen, and the actual layout position index and the actual adaptation position index of each ItemView are equal. For example, for the ItemView in the first row and the first column in the upper left corner of the screen, the actual layout position index LP = 0 and the actual adaptation position index AP = 0; for the ItemView in the last row and the last column in the lower right corner of the screen, the actual layout position index LP = 49 and the actual adaptation position index AP = 49. When the user wants to view the enlarged image of the grid (i.e., ItemView) surrounded by the dashed box, the user can place two fingers in the area surrounded by the dashed box and gradually increase the distance between the two fingers.

[0109] 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 dashed box as the center. The ItemViews displayed on the screen are updated to 3 columns. As Figure 8 shown in (b) below, the mobile phone can re-number the actual adaptation position index values of the ItemViews corresponding to the 1st to 3rd columns and the 1st to 6th rows in the custom RecyclerView. The numbering rule can be as follows: the actual adaptation position index of the ItemView surrounded by the dashed box remains AP = 6; starting from the ItemView surrounded by the dashed box, the AP values of the ItemViews before the ItemView surrounded by the dashed box (i.e., the 1st row) are decreased by 1 in sequence, and the AP values of the ItemViews after the ItemView surrounded by the dashed box (i.e., the 3rd to 6th rows) are increased by 1 in sequence. For other ItemViews in 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 8 shown in (a) 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 the 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 value of the ItemViews on the screen is changed, and the actual layout position index values of each ItemView do not change. The above zooming 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.

[0110] It should be noted that the above Figure 8The example in (b) is based on re - numbering the actual adaptation position index values corresponding to the ItemViews in the 1st to 3rd columns and 1st to 6th rows of the custom RecyclerView by the mobile phone, which does not limit this application. In actual implementation, the mobile phone can also re - number the actual adaptation position index values corresponding to all ItemViews in the 1st to 3rd columns.

[0111] Exemplarily, Figure 9 shows a software architecture diagram of an electronic device.

[0112] As Figure 9 shown, the electronic device can adopt a layered architecture, dividing the software into several layers, and each layer has a clear role and division of labor. The layers communicate with each other 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 - mentioned software architecture runs on top of the hardware layer, and the hardware layer may include a display screen, sensors, etc.

[0113] 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 custom RecyclerView control, etc. The gallery application, camera application, and ScaleGestureDetector are native controls of the Android system, and the ReceiveTouchView control and the custom RecyclerView control are newly added controls in this application. As an example, the ScaleGestureDetector can be an interface for handling zoom events of the custom RecyclerView control.

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

[0115] The ReceiveTouchView control is used to receive the user's touch operations.

[0116] If a single-finger touch operation is received, the ReceiveTouchView control passes the touch data to the custom RecyclerView control. The custom RecyclerView control scrolls in the same direction as the single-finger swipe direction. When it scrolls 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.

[0117] 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 zooming method provided in this application based on the two-finger touch data. For details, reference can be made to the specific descriptions in the following embodiments and will not be elaborated here. As an example, the pinch gesture detector can be an interface of the native RecyclerView or the custom RecyclerView.

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

[0119] 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 ReceiveTouchView control.

[0120] 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 libraries and the virtual machine. The Android Runtime is responsible for the scheduling and management of the Android system. The core libraries consist of two parts: one part is the functional functions required by the Java language, and the other part is the core libraries of Android. The application layer and the application framework layer run in the virtual machine.

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

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

[0123] Exemplarily, Figure 10 The flowchart of a scaling method based on a custom RecyclerView is shown.

[0124] As Figure 10 shown, the method may include the following S101 to S109.

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

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

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

[0128] S102, the touch driver receives the user's click operation on the icon of the gallery application and starts the gallery application.

[0129] After starting the gallery application, the gallery application initializes a custom RecyclerView, a zoom gesture detector, etc. For example, as Figure 5 shown, the size of the custom RecyclerView is 8400 in width * 20000 in height pixels. It should be noted that the custom RecyclerView is custom-made and is not included in the native system of the Android system, and there is no need to initialize this control when running the gallery application.

[0130] In addition, after completing the initialization, the gallery application can also display the album card page as shown in Figure 1 (b) therein.

[0131] If the mobile phone shows the photo page before the user exits the gallery application last time, then the gallery application shows the photo page after completing the initialization. If the mobile phone shows any album page before the user exits the gallery application last time, then the gallery application shows as shown in Figure 1The photo album card page shown in (b) therein.

[0132] S103, the touch drive receives the operation of the user clicking on the camera card in the photo album card page and notifies the gallery application through the WMS.

[0133] S104, the gallery application displays the photo album page based on the custom RecyclerView and notifies the WMS. Accordingly, the WMS determines the custom RecyclerView as the layer for handling the zoom event.

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

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

[0136] S106, the custom RecyclerView multiplies the coordinates (200, 200) by the zoom factor 0.2 to obtain the coordinates (40, 40), and multiplies the coordinates (800, 1000) by the zoom factor 0.2 to obtain the coordinates (160, 200).

[0137] Assume that 15 columns of images are displayed when entering the photo album page. Then, referring to the above Figure 7C , the zoom factor is 0.2.

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

[0139] S107, the custom RecyclerView transfers the coordinates (40, 40) and the coordinates (160, 200) to the pinch gesture detector.

[0140] S108, the pinch gesture detector calculates the distance D1 = 200 pixels based on the coordinates (40, 40) and the coordinates (160, 200).

[0141] Among them,

[0142] S109, the pinch gesture detector determines that the distance D1 = 200 pixels is less than the threshold D = 540 pixels, determines that this operation is invalid, and ends the zoom event in advance.

[0143] Generally, the distance between two fingers is greater than or equal to 27 mm. When the distance between the two fingers is less than 27 mm, it can be basically excluded that this operation is a two-finger touch operation. Taking the physical size of the screen as 60 (width) * 140 (height) mm and the screen resolution as 1200 (width) * 2800 (height) pixels as an example. Convert the physical distance of 27 mm into pixel distance: 1200÷60*27 = 540 pixels. That is to say, when the distance D1 is less than the threshold D = 540 pixels, it can be determined that this operation is invalid, thereby ending the zoom event, and the touch drive 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, and the distance D1 is recorded.

[0144] It should be noted that this application takes the threshold D = 540 pixels as an example for illustration, which does not limit this application. The distances between the two fingers of different people may be different, the physical sizes of the screens may be different, and the screen resolutions may also be different. In this case, the threshold D calculated based on these parameters will also be different.

[0145] In the above-mentioned album page image zooming scheme based on the custom RecyclerView, since only one custom RecyclerView is set for album pages of all gears, the size of the custom RecyclerView is much larger than the size of the screen. In this way, when the user presses two fingers on the screen, the custom RecyclerView will multiply the touch coordinates by a scaling factor less than 1, and the pinch gesture detector calculates the distance between the two fingers to be less than the actual distance between the two fingers, resulting in the inability to handle normal zoom events and the inability to achieve the zooming of the photo page. In the embodiment of this application, the custom RecyclerView converts the touch coordinates, resulting in the inability to handle normal zoom events, which is called the early failure of the zoom action.

[0146] In the album page image zooming scheme, using a custom RecyclerView may cause the problem of early failure of the zoom action. To this end, this application adds a custom ReceiveTouchView. The size of the ReceiveTouchView is the same as the size of the screen, and the upper left corner of the ReceiveTouchView coincides with the upper left corner of the screen.

[0147] In the zooming scenario, the ReceiveTouchView can directly pass the two-finger coordinates to the zoom gesture detector without multiplying the two-finger coordinates by a zoom factor less than 1, thus solving the problem that the image zooming solution based on the custom RecyclerView on the album page is prone to early invalidation of the zooming action.

[0148] In addition, in the zooming scenario of the album page, since a custom RecyclerView is set for each gear, when the user presses two fingers and before the two fingers leave the screen, the electronic device can switch back and forth between any gears based on the custom RecyclerView, for example, switching from the current gear through the next gear to other gears, and refreshing the images on the album page based on the changed gear.

[0149] Exemplarily, Figure 11 shows a flowchart of a zooming method based on a custom RecyclerView and a ReceiveTouchView. As Figure 11 shown, the method may include the following S201 to S222.

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

[0151] For the implementation manner of S201, reference may be made to the description of S101, which will not be elaborated here.

[0152] S202, the touch driver receives the user's click operation on the icon of the gallery application and starts the gallery application.

[0153] The gallery application initializes the ReceiveTouchView, the custom RecyclerView, the zoom gesture detector, etc. The size of the ReceiveTouchView is 1200 pixels wide * 2800 pixels high. The size of the custom RecyclerView is 8400 pixels wide * 20000 pixels high. The upper left corner of the ReceiveTouchView coincides with the upper left corner of the screen. It should be noted that both the ReceiveTouchView and the custom RecyclerView are customized in this application.

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

[0155] S203, the touch driver receives the user's click operation on the camera card in the album card page (also referred to as the first operation) and notifies the gallery application through the WMS.

[0156] S204, The gallery application displays an album page based on a custom RecyclerView and notifies the WMS. Accordingly, the WMS determines that the ReceiveTouchView is the layer for handling zoom events.

[0157] S205, The touch driver receives the user's two-finger press operation and transfers the coordinates (x11, y11) and (x12, y12) at the time of the two-finger press to the WMS. The WMS transfers the coordinates (x11, y11) and (x12, y12) to the ReceiveTouchView.

[0158] S206, The ReceiveTouchView transfers the coordinates (x11, y11) and (x12, y12) to the zoom gesture detector.

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

[0160] S207, The zoom gesture detector calculates the two-finger distance d1 based on the coordinates (x11, y11) and (x12, y12).

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

[0162] The two-finger distance d1 can be obtained through the following relational expression (1):

[0163]

[0164] S208, The zoom gesture detector determines whether the two-finger distance d1 is less than the threshold D = 540.

[0165] Taking the coordinates (x11, y11) = (200, 200) and (x12, y12) = (800, 1000) at the time of the two-finger press as an example. After the zoom gesture detector calculates the two-finger distance d1 = 1000 pixels, it can be determined that the two-finger distance d1 = 1000 is greater than the threshold D = 540 pixels, determining that this operation is valid and executing the following S209.

[0166] 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 true two-finger distance, and there will be no problem of premature invalidation of the scaling action.

[0167] S209. The pinch gesture detector relocates the custom RecyclerView based on the two-finger center and refreshes the AP values in the custom RecyclerView corresponding to the display area on the screen (also known as the second area).

[0168] Exemplarily, the pinch gesture detector calculates the two-finger center coordinates (mBeginFocusx, mBeginFocusy) according to the coordinates (x11, y11) and the coordinates (x12, y12).

[0169] The two-finger center coordinates (mBeginFocusx, mBeginFocusy) can be obtained through the following relational formula (2):

[0170]

[0171] After the user presses a finger on the screen, the mobile phone can determine whether the current operation is a single-finger press operation or a two-finger press operation based on the number of touch points and the coordinates of the touch points, etc. If the current operation is a single-finger press operation, it can be predicted that the user is about to perform a single-finger swipe operation, such as swiping up and down on the screen. If the current operation is a two-finger press operation, it can be predicted that the user is about to perform a scaling operation, such as changing the distance between the two fingers on the screen.

[0172] After calculating the two-finger center coordinates according to the coordinates (x11, y11) and the coordinates (x12, y12), if the user changes the distance between the two fingers, the mobile phone can perform a scaling operation on the RecyclerView based on the two-finger center. As Figure 12 shown, if the display area of the current gear (5th gear) is close to the edge of the custom RecyclerView, then after performing a scaling operation on the RecyclerView based on the two-finger center, it is possible that some areas of the scaled custom RecyclerView are located outside the screen, resulting in white edges on the screen and unable to display all the content of the next gear (15th gear).

[0173] To avoid white edges on the screen, the present application provides a solution for repositioning a custom RecyclerView: after detecting a two-finger press operation, it indicates that the user is about to perform a zoom operation. The mobile phone uses the display area corresponding to the screen as a reference to move the custom RecyclerView, changing the relative position relationship between the custom RecyclerView and the display area, so that the edges of the zoomed custom RecyclerView are outside the screen, and the problem of white edges will not occur.

[0174] It should be noted that for the specific implementation method of repositioning the RecyclerView and refreshing the content displayed on the screen, reference can be made to the description of the following embodiments for Figure 13 which will not be elaborated here.

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

[0176] S211, The ReceiveTouchView passes the coordinates (xi1, yi1) and coordinates (xi2, yi2) to the pinch gesture detector.

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

[0178] S212, The pinch gesture detector calculates the two-finger distance di according to the coordinates (xi1, yi1) and coordinates (xi2, yi2).

[0179] Among them, the two-finger distance di can be obtained through the following relational expression (3):

[0180]

[0181] S213, The pinch gesture detector determines whether the two-finger distance di is less than the threshold D = 540.

[0182] Taking the coordinates (xi1, yi1) = (100, 100) and coordinates (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 S214 is executed.

[0183] 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 premature invalidation of the scaling action.

[0184] S214. The pinch gesture detector calculates a scaling factor Si based on the two-finger spacing di and the two-finger spacing d1.

[0185] Among them, the scaling factor Si can be obtained through the following relational expression (4):

[0186]

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

[0188] 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 scaling factor is equal to 1, then it is determined to be invalid, and there is no need to determine whether to set the scaling center. In a cycle T, the faster the two fingers move, the greater the difference between di and d1, and the faster the gear shift.

[0189] S215. The pinch gesture detector determines the scaling factor scale1 of the current gear and the gear shift critical points a1 and a2 for switching gears.

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

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

[0192] Taking the gears preset in the album page as an example, which are the 3rd gear, 5th gear, 15th gear, and 21st gear in sequence. Among them, the 3rd gear and the 5th gear are called adjacent gears, the 5th gear and the 15th gear are called adjacent gears, and the 15th gear and the 21st gear are called adjacent gears. Referring to the description of the above embodiments for Figure 7A When the display area includes 3 columns of grids, the scaling factor of the custom RecyclerView is 1.0. Referring to the description of the above embodiments for Figure 7B 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 scaling factor of the custom RecyclerView is 0.6. Referring to the description of the above embodiments for Figure 7CDescription: When the display area includes 15 column grids, the scaling factor of the custom RecyclerView is 0.2. Referring to the above embodiments, for Figure 7D Description: When the display area includes 21 column grids, the scaling factor of the custom RecyclerView is 1 / 7.

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

[0194] 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 switching gears is represented by a3, then the critical point a3 for switching gears can be calculated by the following relational expression (5):

[0195]

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

[0197] Table 1

[0198] - 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

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

[0200] 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 switching from a lower gear to a higher gear is represented by a4, then the critical point a4 for switching gears can be calculated by the following relational expression (6):

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

[0202] 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 switching from a higher gear to a lower gear is represented by a5, then the critical point a5 for switching gears can be calculated by the following relational expression (7):

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

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

[0205] Table 2

[0206] - 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

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

[0208] Table 3

[0209] - 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

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

[0211] 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 the 5th gear, and scale1 = 0.6. When the distance between the two fingers becomes larger, the next gear is the 3rd gear, and the critical point a2 for switching from the 5th gear to the 3rd gear is 0.8. For another example, when the current gear is the 5th gear and the distance between the two fingers becomes smaller, the next gear is the 15th gear, and the critical point a1 for switching from the 5th gear to the 15th gear is 0.4. It should be noted that if i = 2 and the current two-finger movement operation is the first movement operation after the two fingers are pressed, the pinch gesture detector can calculate the scaling multiple Si of this period and use the scaling multiple (such as 0.6) of the gear when the two fingers are pressed as the scaling multiple of the previous period.

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

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

[0214] The 1st condition, the scaling multiple Si in the i-th reporting point period and the scaling multiple S(i - 1) in the (i - 1)-th reporting point period are on both sides of the scaling multiple scale1 of the current gear (such as the 5th gear).

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

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

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

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

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

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

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

[0222] The third 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 scale1 of the current gear.

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

[0224] If condition 1 is met, then first execute the following S217, and then execute the following S218.

[0225] If condition 1 is not met, then directly execute the following S218.

[0226] The above S216 and S217 are optional steps. That is, the mobile phone can perform a zoom operation on the custom RecyclerView centered on the zoom center. In actual implementation, S218 below can also be directly executed after S215. That is, the mobile phone can perform a zoom operation on the custom RecyclerView centered on the center of the two fingers (also called the first position).

[0227] S217. The pinch gesture detector calculates the zoom center (pointx, mBeginFocusy) according to the center coordinates of the two fingers (mBeginFocusx, mBeginFocusy).

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

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

[0230] It should be understood that by setting the zoom center, during the two-finger zoom operation, the custom RecyclerView can be enlarged or reduced centered on the zoom center, ensuring that the gear edges of the grid are aligned with the left and right edges of the screen, and avoiding half a grid or a blank area appearing at the left and right edges of the screen.

[0231] S218. 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.

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

[0233] 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 S219 - S220 below are executed; when Si < a2, the condition for switching gears is not met, and S220 below is executed.

[0234] It should be noted that the above S218 is described by taking the condition of judging whether to switch gears by comparing the zoom ratio as an example, which does not limit the present application. Referring to the above relational formula (4), the zoom ratio is calculated according to the distance between two fingers. Therefore, the pinch gesture detector can also judge whether di < d1 and Si ≤ a1, or di > d1 and Si ≥ a2 are satisfied to determine whether the condition for switching gears is met.

[0235] S219, customize the AP value of the display area corresponding to the next gear for RecyclerView to refresh.

[0236] Take the pinch gesture detector switching from gear 5 to gear 3 as an example. If after determining to switch gears, the AP value of the display area corresponding to the next gear for RecyclerView is customized. After the user raises their hand, the mobile phone displays the image of the new gear (also known as the third grid interface) on the screen. Regardless of whether the zoom ratio Si is equal to 1.0, finally 3 columns of images are 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.

[0237] It should be noted that the method for refreshing the AP value of the display area corresponding to the next gear can refer to the specific description of the following embodiments for Figure 16 and will not be elaborated here.

[0238] S220, customize RecyclerView to perform zoom display based on the zoom center and zoom ratio Si.

[0239] If after determining not to switch gears and the user raises their hand, the image of the original gear is kept displayed on the screen. Take the pinch gesture detector remaining in gear 5 as an example. If the user raises their two fingers, regardless of whether the zoom ratio Si is equal to 0.6, finally 5 columns of images are displayed on the screen, and the left and right edges of the 5 columns of images are aligned with the left and right edges of the screen.

[0240] Regardless of whether gears are switched or not, customize RecyclerView to perform zoom display based on the zoom center and zoom ratio Si.

[0241] S221, the touch drive receives the user's two - finger raise operation and notifies the pinch gesture detector of the raise event through WMS and ReceiveTouchView.

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

[0243] S222, the pinch gesture detector notifies the customized RecyclerView to perform zoom display based on the zoom ratio corresponding to the gear before raising the hand.

[0244] For example, referring to Table 1 above, the critical point between the third gear and the fifth gear is 0.8, the critical point between the fifth gear and the fifteenth gear is 0.4, and the critical point between the fifteenth gear and the twenty-first gear is 12 / 35. If the zoom factor obtained in the previous reporting period before raising the hand is greater than 0.8, then three columns of images will be finally displayed, and the left and right edges of the three columns of images are aligned with the left and right edges of the screen. If the zoom factor obtained in the previous reporting period before raising the hand is less than or equal to 0.8 and greater than 0.4, then five columns of images will be finally displayed, and the left and right edges of the five columns of images are aligned with the left and right edges of the screen. If the zoom factor obtained in the previous reporting period before raising the hand is less than or equal to 0.2 and greater than 12 / 35, then fifteen columns of images will be finally displayed, and the left and right edges of the fifteen columns of images are aligned with the left and right edges of the screen. If the zoom factor obtained in the previous reporting period before raising the hand is less than or equal to 12 / 35, then twenty-one columns of images will be finally displayed, and the left and right edges of the twenty-one columns of images are aligned with the left and right edges of the screen.

[0245] 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 two fingers down to raising two fingers up, the mobile phone can periodically collect touch operations, calculate the zoom factor based on the change in the distance between the two fingers in adjacent periods, and then determine whether to switch from the current gear to the next gear according to the zoom factor. In this way, without leaving the screen with two fingers, 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.

[0246] The following combines Figure 13 to introduce a flowchart of a method for repositioning a custom RecyclerView.

[0247] As Figure 13 shown, the method may include the following S301 to S313.

[0248] S301, when detecting that two fingers are pressed down, the zoom gesture detector calculates the coordinates of the center of the two fingers (also called the first position) through the following relational expression:

[0249]

[0250] where (x11, y11) and (x12, y12) are the coordinates of the two fingers collected in the i-th reporting period when two fingers are pressed down.

[0251] It should be noted that after obtaining the center coordinates of two fingers in the i-th reporting point period and before detecting the lifting of the two fingers in the j-th reporting point period, if the user changes the distance between the two fingers, the pinch gesture detector will not recalculate the center coordinates of the two fingers, and will still regard the center coordinates of the two fingers calculated in the i-th reporting point period as the only center coordinates of the two fingers during this zooming process.

[0252] S302. The pinch gesture detector calculates the number of columns (also known as the first column number) of the ItemView selected by the center coordinates (mBeginFocusx, mBeginFocusy) of the two fingers in the current gear through the following relational expression in the custom RecyclerView:

[0253] columnRecyclerView = LP1 % maxShowSpan + 1.

[0254] Among them, LP1 represents the LP value of the ItemView where the center coordinates (mBeginFocusx, mBeginFocusy) of the two fingers are located in the current gear, % is the remainder symbol, and maxShowSpan represents the number of columns of the custom RecyclerView in the maximum gear (that is, the total number of columns of the custom RecyclerView).

[0255] As another example, the pinch gesture detector calculates the number of columns of the ItemView selected by the center coordinates (mBeginFocusx, mBeginFocusy) of the two fingers in the current gear through the following relational expression:

[0256]

[0257] Among them, childHeight represents the height of the ItemView displayed on the screen in the current gear, and mBeginFocusX is the X-axis coordinate of the center of the two fingers in the second coordinate system.

[0258] Since LP1 is related to mBeginFocusx and maxShowSpan, the columnRecyclerView calculated by the above two methods is equal.

[0259] S303. The pinch gesture detector calculates the number of columns (also known as the second column number) of the ItemView selected by the center coordinates (mBeginFocusx, mBeginFocusy) of the two fingers in the maximum gear through the following relational expression:

[0260]

[0261] Among them, initChildHeight represents the height of the ItemView displayed on the screen in the maximum gear.

[0262] S304. The pinch gesture detector calculates the column offset of the custom RecyclerView through the following relationship:

[0263] translationColumnNumOffset = normalColumnRecyclerView - columnRecyclerView.

[0264] S305. The pinch gesture detector determines whether the column offset of the custom RecyclerView is equal to 0.

[0265] If the column offset translationColumnNumOffset = 0, it means that the column number columnRecyclerView of the ItemView selected by the two-finger center coordinates in the custom RecyclerView at the current gear is the same as the column number normalColumnRecyclerView of the ItemView selected by the two-finger center coordinates in the custom RecyclerView in the maximum gear, and there is no need to move the custom RecyclerView left and right (that is, no column correction is required for the custom RecyclerView). Then the pinch gesture detector can set offsetx = 0 and execute S307 below.

[0266] If the column offset translationColumnNumOffset is less than 0, it means that the column number columnRecyclerView of the ItemView selected by the two-finger center coordinates in the custom RecyclerView at the current gear is greater than the column number normalColumnRecyclerView of the ItemView selected by the two-finger center coordinates in the custom RecyclerView in the maximum gear, and the custom RecyclerView needs to be moved to the right. Then the pinch gesture detector can first execute S306 below and then execute S307 below.

[0267] If the column number offset translationColumnNumOffset is greater than 0, it means that the ItemView selected by the center coordinates of the two fingers in the current gear in the custom RecyclerView (columnRecyclerView) is less than the ItemView selected by the center coordinates of the two fingers in the maximum gear in the custom RecyclerView (normalColumnRecyclerView). It is necessary to move the custom RecyclerView to the left. Then, the pinch gesture detector can first execute the following S306 and then execute the following S307.

[0268] S306. The pinch gesture detector calculates the offset of the x-axis of the custom RecyclerView in the first coordinate system (also known as the first offset) through the following relational expression:

[0269] offsetx = -translationColumnNumOffset * childheight.

[0270] Where childHeight represents the height of the ItemView in the current gear. The height of the ItemView in the current gear is equal to the original height of the ItemView multiplied by the scaling factor ItemView of the current gear.

[0271] It should be noted that this application involves two coordinate systems: The first coordinate system is a two-dimensional coordinate system established with the upper left corner of the screen (i.e., the upper left corner of ReceiveTouchView) as the origin, the x-axis horizontally to the right, and the y-axis vertically downward; The second coordinate system is a two-dimensional coordinate system established with the upper left corner of the custom RecyclerView as the origin, the X-axis horizontally to the right, and the Y-axis vertically downward. The coordinate pairs in the first coordinate system and the coordinate pairs in the second coordinate system can be converted to each other.

[0272] S307. The pinch gesture detector calculates the number of rows from the upper edge of the ItemView selected by the center coordinates of the two fingers (mBeginFocusx, mBeginFocusy) in the current gear to the upper edge of the custom RecyclerView (also known as the first number of rows) through the following relational expression:

[0273]

[0274] Where childHeight represents the height of the ItemView displayed on the screen in the current gear, and mBeginFocusY is the Y-axis coordinate of the center of the two fingers in the second coordinate system.

[0275] S308, The pinch gesture detector calculates the number of rows (also known as the second number of rows) from the upper edge of the ItemView selected by the center coordinates of two fingers (mBeginFocusx, mBeginFocusy) at the maximum gear to the upper edge of the custom RecyclerView through the following relationship:

[0276]

[0277] where initChildHeight represents the height of the ItemView displayed on the screen at the maximum gear, and mBeginFocusy is the y-axis coordinate of the center of two fingers in the first coordinate system.

[0278] S309, The pinch gesture detector calculates the row offset of the custom RecyclerView through the following relationship:

[0279] translationLineNumOffset = nowSelectTopLine - topCorrectLine.

[0280] S310, The pinch gesture detector determines whether the row offset of the custom RecyclerView is equal to 0.

[0281] If the row offset translationLineNumOffset = 0, it means that the number of rows nowSelectTopLine from the upper edge of the ItemView selected by the center coordinates of two fingers at the maximum gear to the upper edge of the custom RecyclerView is equal to the number of rows topCorrectLine from the upper edge of the ItemView selected by the center coordinates of two fingers at the current gear to the upper edge of the custom RecyclerView, and there is no need to move the custom RecyclerView up and down (that is, no row correction is required for the custom RecyclerView). Then the pinch gesture detector can set offsety = 0 and execute S312 below.

[0282] If the row offset translationLineNumOffset is less than 0, it means that the number of rows nowSelectTopLine from the upper edge of the ItemView selected by the center coordinates of two fingers at the maximum gear to the upper edge of the custom RecyclerView is less than the number of rows topCorrectLine from the upper edge of the ItemView selected by the center coordinates of two fingers at the current gear to the upper edge of the custom RecyclerView, and the custom RecyclerView needs to be moved up. Then the pinch gesture detector can first execute S311 below and then execute S312 below.

[0283] If the line number offset translationLineNumOffset is greater than 0, it means that the number of lines nowSelectTopLine from the upper edge of the ItemView selected by the center coordinates of the two fingers to the upper edge of the custom RecyclerView at the maximum gear is greater than the number of lines topCorrectLine from the upper edge of the ItemView selected by the center coordinates of the two fingers to the upper edge of the custom RecyclerView at the current gear. It is necessary to move the custom RecyclerView downward. Then, the pinch gesture detector can first execute the following S311 and then execute the following S312.

[0284] S311, the pinch gesture detector calculates the offset of the y-axis of the custom RecyclerView in the first coordinate system (also called the second offset) through the following relational expression:

[0285] offsety = (nowSelectTopLine - topCorrectLine) * childheight.

[0286] Among them, childHeight represents the height of the ItemView displayed on the screen at the current gear. The height of the ItemView at the current gear is equal to the original height of the ItemView multiplied by the scaling factor ItemView of the current gear.

[0287] S312, the pinch gesture detector relocates the custom RecyclerView based on the offset offsetx of the x-axis and the offset offsety of the y-axis.

[0288] S310, the pinch gesture detector refreshes the AP value of the display area corresponding to the screen.

[0289] After relocating the custom RecyclerView, since the relative position relationship between the custom RecyclerView and the display area changes, the image on the screen changes. After the user presses the finger and before any zooming or moving operation, theoretically, from the user's perspective, the image on the screen should not change. In this case, the pinch gesture detector can also refresh the display area corresponding to the screen so that the album interface before and after the two fingers are pressed remains unchanged.

[0290] For example, the zoom gesture detector can set the AP value of the first ItemView in the display area after relocation to be equal to the AP value of the second ItemView in the display area before relocation. Herein, the LP value of the first ItemView is represented by newLp, and the LP value of the second ItemView is represented by oldLp.

[0291] newLp and oldLp satisfy the following relational expression (8):

[0292] newLp = oldLp + translationColumnNumOffset + maxShowSpan * translationLineNumOffset.

[0293] Herein, translationLineNumOffset represents the line number offset, translationColumnNumOffset represents the column number offset, and maxShowSpan represents the number of columns of the custom RecyclerView.

[0294] In the above embodiment, after the mobile phone detects that the user presses with two fingers, it can predict that the user is about to perform a zoom operation. By relocating the custom RecyclerView with the maximum gear as a reference, it can be ensured that no matter where the current gear display area is located in the custom RecyclerView or where the user operation is located in the current gear display area, after performing a zoom operation in any gear, the edge of the custom RecyclerView can be located outside the screen, and there will be no blank area within the screen.

[0295] Taking the size of the mobile phone screen as 1200 pixels in width and 2800 pixels in height, and the size of the custom RecyclerView as 8400 pixels in width and 20000 pixels in height, and the pre-set gears of the custom RecyclerView being 3 gears, 5 gears, 15 gears, and 21 gears in sequence as an example, combined with Figure 14 and Figure 15 a method for calculating the zoom center will be introduced.

[0296] Exemplarily, Figure 14 a flowchart of a method for calculating the zoom center is shown. Figure 15 A schematic diagram of the display area when switching from a small gear to a large gear is shown. As Figure 14 shown, the method may include the following S401 to S411.

[0297] S401. Determine the double - finger center coordinates (mBeginFocusx, mBeginFocusy) (i.e., the coordinates of the first position), 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.

[0298] As Figure 15 shown, the double - finger center coordinates (mBeginFocusx, mBeginFocusy) = (370, 360) pixels.

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

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

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

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

[0303] The original height initChildheight of each ItemView in the custom RecyclerView = 400 pixels.

[0304] In the second coordinate system, the coordinates of the upper - left vertex 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).

[0305] It should be noted that this application involves two coordinate systems: The first coordinate system is a two - dimensional coordinate system with the upper - left corner of the screen (i.e., the upper - left corner of ReceiveTouchView) as the origin, the x - axis horizontally to the right, and the y - axis vertically downward; the second coordinate system is a two - dimensional coordinate system with the upper - left corner of the custom RecyclerView as the origin, the X - axis horizontally to the right, and the Y - axis vertically downward. The coordinate pairs in the first coordinate system and the second coordinate system can be mutually transformed. The above double - finger center coordinates (mBeginFocusx, mBeginFocusy) are the coordinates in the first coordinate system.

[0306] S402. Calculate based on the display area of the current gear position mapped to the coordinates screenRectF of the custom RecyclerView:

[0307] The number of offset columns on the left side of the current gear position span.left = 7 columns;

[0308] The left offset of the current gear position screenRectF.left = span.left * initChildheight = 7 * 400 = 2800;

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

[0310] Among them, the number of offset columns on the left side of the current gear position span.left 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 screenRectF.left refers to the distance between the left edge of the display area of the current gear position and the Y-axis.

[0311] S403. Calculate the number of columns currentSelectIndex of the two-finger center in the display area at the current gear position based on 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 (i.e., the actual display height in the minimum gear position), and the scaling factor scale1 of the current gear position.

[0312]

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

[0314] S404. Calculate the number of columns nextSelectIndex of the two-finger center in the display area at the next gear position based on 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 (i.e., the actual display height in the minimum gear position), and the scaling factor scale11 of the next gear position.

[0315]

[0316] S405. Calculate the column number Index1 of the first 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 column number currentSelectIndex of the center of the two fingers in the display area in the current gear position, and the column number nextSelectIndex of the center of the two fingers in the display area in the next gear position.

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

[0318] S406. Obtain 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 based on the original height initChildheight of each ItemView in the custom RecyclerView and the column number 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.

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

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

[0321] S407. Calculate the column number Index2 of the last column of the display area in the next gear in the custom RecyclerView based on the left offset column number span.left of the current gear, the column number currentSelectIndex of the center of the two fingers in the display area in the current gear, the column number nextSelectIndex of the center of the two fingers in the display area in the next gear, and the column number nextShowSpan of the display area in the next gear.

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

[0323] S408. Obtain the distance X2 from the right edge of the display area in the next gear 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 column number Index2 of the last column of the display area in the next gear in the custom RecyclerView.

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

[0325] S409. 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, the width screenRectF.width of the display area of the current gear, the distance X1 from the left edge of the display area in the next gear in the custom RecyclerView to the left edge of the custom RecyclerView, and the distance X2 from the right edge of the display area in the next gear in the custom RecyclerView to the left edge of the custom RecyclerView.

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

[0327]

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

[0329]

[0330] S410. Map the scaling center centerX in the custom RecyclerView coordinate system to the screen coordinate system to obtain pointx.

[0331] The above scaling center centerX is the coordinate in the second coordinate system and needs to be converted to the coordinate pointx in the first coordinate system.

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

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

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

[0335] = 360 pixels.

[0336] Among them, L represents the screen width.

[0337] S411. Determine that the coordinate of the scaling center is (pointx, mBeginFocusy).

[0338] For example, the coordinate of the scaling center is (pointx, mBeginFocusy) = (360, 360).

[0339] The two-finger center coordinate (360, 360) is different from the scaling center coordinate (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 coordinate, the two-finger center coordinate and the scaling center coordinate may also be the same.

[0340] In the above solution, by setting the scaling center, the custom RecyclerView can be enlarged or reduced with the scaling center as the center point, ensuring that the left and right edges of the gear in the grid are respectively aligned with the left and right edges of the screen, and avoiding half a grid or a blank area at the left and right edges of the screen.

[0341] Next, in combination with Figure 16 introduce a method for calculating the AP value.

[0342] As Figure 16 shown, this method may include the following S501 to S508.

[0343] S501, the pinch gesture detector obtains the following parameters: the pinch center (pointx, mBeginFocusy), the number of columns Index1 of the first column of the display area of the next gear position in the custom RecyclerView, and the number of columns Index2 of the last column of the display area of the next gear position in the custom RecyclerView.

[0344] These parameters can be calculated through S401 to S411 and will not be elaborated here.

[0345] S502, the pinch gesture detector determines the actual layout position index value (also known as selectLP) of the ItemView selected by the pinch center, and the AP value (also known as selectAP) of the ItemView selected by the pinch center.

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

[0347] S503, the pinch gesture detector determines the number of columns LineNum and the actual layout position index value LP of an ItemView in the custom RecyclerView.

[0348] Among them, an ItemView refers to any ItemView in the actual layout position index set outerLPList or the actual layout position index set innerLPList.

[0349] For example, the number of columns lineNum of an ItemView can be determined according to the following relational formula:

[0350] LineNum = LP % maxShowSpan + 1.

[0351] Among them, LP represents the actual layout position index value of an ItemView, and maxShowSpan represents the maximum gear position (for example, maxShowSpan = 21).

[0352] S504, the pinch gesture detector determines whether Index1 ≤ LineNum ≤ Index2 is satisfied.

[0353] If Index1 ≤ LineNum ≤ Index2 is satisfied, then execute S505 - S507.

[0354] If Index1 ≤ LineNum ≤ Index2 is not satisfied, then execute S508.

[0355] S505, the pinch gesture detector determines whether LP ≤ selectLP is satisfied.

[0356] If LP ≤ selectLP is satisfied, then S507 is executed.

[0357] If LP ≤ selectLP is not satisfied, then S506 is executed.

[0358] S506. The pinch gesture detector determines the AP value of this ItemView according to the first formula.

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

[0360]

[0361] Among them, selectAP represents the AP value of the ItemView selected at the zoom center, selectLP represents the LP value of the ItemView selected at the zoom center, nextShowSpan represents the number of display columns in the next gear, maxShowSpan represents the number of columns in the display area at the maximum gear, selectLineNum represents the number of columns LineNum of the ItemView selected at the zoom center in the custom RecyclerView, LP represents the actual layout position index value of an ItemView, and lineNum represents the number of columns of an ItemView in the custom RecyclerView.

[0362] S507. The pinch gesture detector determines the AP value of this ItemView according to the second formula.

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

[0364]

[0365] Among them, selectAP represents the AP value of the ItemView selected at the zoom center, selectLP represents the LP value of the ItemView selected at the zoom center, nextShowSpan represents the number of display columns in the next gear, maxShowSpan represents the number of columns in the display area at the maximum gear, selectLineNum represents the number of columns LineNum of the ItemView selected at the zoom center in the custom RecyclerView, LP represents the actual layout position index value of an ItemView, and lineNum represents the number of columns of an ItemView in the custom RecyclerView.

[0366] S508. Set the AP value to -1.

[0367] Among them, AP = -1 indicates that the actual adaptation position value is invalid. At this moment, an ItemView can display a blank image or keep displaying the image before shifting gears.

[0368] 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 atlas, the order of the images displayed on the screen is coherent.

[0369] The following is an illustration of Figures 17A to 17C and Figures 18A to 18C for the specific implementation method of the partial refresh method provided by the embodiments of the present application.

[0370] It should be noted that in Figures 17A to 17C and Figures 18A to 18C , in order to more clearly display the scaling process, a custom RecyclerView with a smaller size and a smaller number of columns is used as an example for illustration. For example, the size of the mobile phone screen is 1200 pixels wide * 2400 pixels high, and the size of the custom RecyclerView is 2800 pixels wide * 6000 pixels high. The pre-set gears of the custom RecyclerView are 3 gears, 5 gears, and 7 gears in sequence. It can be understood that in actual implementation, the size of the custom RecyclerView, the gears 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 size of the screen and user operations.

[0371] Embodiment 1

[0372] Figures 17A to 17C shows a schematic diagram of refreshing the grid interface when switching from a small gear to a large gear.

[0373] As shown in Figure 17AAs shown in the figure, it is located in the first grid interface of the custom RecyclerView. The LP of the ItemView in the upper left corner of the custom RecyclerView is 63, and the LP of the ItemView in the lower right corner of the custom RecyclerView is 167. In the order from left to right and from top to bottom, the LP values of each ItemView increase sequentially. When the custom RecyclerView is in the third gear, there are 3 columns of grids shown on the screen, and the AP values corresponding to these 3 columns of grids increase sequentially from 79 to 123. At this moment, the zoom factor scale1 in the current gear is 1.0. As an example, the user can slide up and down on the screen with a single finger to view each image corresponding to these 3 columns of grids, and these images are arranged in chronological order. As another example, when the user wants to view the enlarged image of a certain image, the user can press two fingers in the area near this image for zooming operations. For example, the user can press two fingers in the area near the image with AP = 87. In the first reporting period, with the first coordinate system (a coordinate system established with the upper left corner of the screen as the origin, the x-axis horizontally to the right, and the y-axis vertically downward as the reference), the mobile phone can obtain two two-finger coordinates, and based on the two two-finger coordinates, calculate the two-finger center coordinates (mBeginFocusx, mBeginFocusy) = (1000, 600) and the two-finger spacing (that is, the distance between the two two-finger coordinates), such as d1 = 1500 pixels. In the first reporting period, there is only one two-finger spacing d1 = 1500, and no other two-finger spacings have been obtained yet, so it is temporarily impossible to determine the zoom trend of the custom RecyclerView.

[0374] In addition, when the two fingers are pressed, it can be predicted that the user is about to perform a zoom-in operation or a zoom-out operation. As Figure 17A shown in the figure, the current gear display area is close to the upper right corner of the custom RecyclerView, and the two-finger center coordinates are close to the upper right corner of the current gear display area. If the custom RecyclerView is directly zoomed out with the two-finger center coordinates as the center, it may cause the upper edge and the right edge of the custom RecyclerView to be within the screen, and there will be a blank area on the screen.

[0375] To avoid such problems, after detecting that the two fingers are pressed, the mobile phone needs to determine whether to reposition the custom RecyclerView. Among them, the calculation method for repositioning the custom RecyclerView can be as follows:

[0376] Determine the two-finger center coordinates in the first coordinate system: (mBeginFocusx, mBeginFocusy) = (1000, 600).

[0377] Determine the two-finger center coordinates in the second coordinate system: (mBeginFocusX, mBeginFocusY) = (3000, 900).

[0378] Determine the number of columns of the custom RecyclerView in the maximum gear (7th gear): maxShowSpan = 7 columns.

[0379] Determine the scaling factor of the custom RecyclerView in the current gear (3rd gear): scaleLevel = 1.0.

[0380] Determine the scaling factor of the custom RecyclerView in the maximum gear (7th gear): initScaleLevel = 3 / 7.

[0381] Determine the height of the ItemView displayed on the screen in the current gear (3rd gear): childHeight = 400 pixels.

[0382] Determine the height of the ItemView displayed on the screen in the maximum gear (7th gear): initChildHeight = 400 * 3 / 7 = 172 pixels.

[0383] Determine the number of columns between the left edge of the display area in the current gear (3rd gear) and the left edge of the custom RecyclerView: leftPlaceholderNum = 4 columns.

[0384] Determine the number of columns between the right edge of the display area in the current gear (3rd gear) and the right edge of the custom RecyclerView: rightPlaceholderNum = 0 columns.

[0385] Determine the number of columns of the ItemView selected by the two-finger center in the current gear (3rd gear):

[0386] column of the custom RecyclerView = LP1 % maxShowSpan + 1 = 83 % 7 + 1 = 7 columns.

[0387] Among them, LP1 represents the LP value of the ItemView where the two-finger center coordinates (mBeginFocusx, mBeginFocusy) are located in the 3rd gear, and % is the remainder symbol.

[0388] In this way, it can be determined that the ItemView selected by the two-finger center in the 3rd gear is located in the 7th column of the custom RecyclerView.

[0389] Determine the number of columns of the ItemView selected by the two-finger center in the maximum gear (7th gear):

[0390]

[0391] In this way, it can be determined that the ItemView selected at the center of the two fingers in the 7th gear is located in the 6th column of the custom RecyclerView.

[0392] Determine the column offset of the custom RecyclerView:

[0393] translationColumnNumOffset = normalColumnRecyclerView - columnRecyclerView = -1.

[0394] In this way, it can be determined that the custom RecyclerView needs to be offset 1 column to the right.

[0395] Determine the offset of the custom RecyclerView on the x-axis in the first coordinate system:

[0396] offsetx = -translationColumnNumOffset * childheight = 400 pixels.

[0397] In this way, with reference to the first coordinate system, the custom RecyclerView needs to be moved 400 pixels to the right.

[0398] Determine the left offset column number of the updated current gear:

[0399] newLeftPlaceholderNum = leftPlaceholderNum + translationColumnNumOffset = 4 - 1 = 3.

[0400] Among them, newLeftPlaceholderNum represents the number of columns between the left edge of the display area of the current gear (3rd gear) and the left edge of the custom RecyclerView after repositioning the custom RecyclerView.

[0401] Determine the right offset column number of the updated current gear:

[0402] newRightPlaceholderNum = rightPlaceholderNum - translationColumnNumOffset = 0 + 1 = 1.

[0403] Among them, newRightPlaceholderNum represents the number of columns between the right edge of the display area of the current gear (3rd gear) after repositioning the custom RecyclerView and the right edge of the custom RecyclerView.

[0404] Determine the number of rows from the upper edge of the ItemView where the two-finger center coordinates (mBeginFocusx, mBeginFocusy) are located to the upper edge of the custom RecyclerView in the current gear (3rd gear):

[0405]

[0406] Among them, mBeginFocusY represents the Y-axis coordinate value of the two-finger center in the second coordinate system.

[0407] Determine the number of rows from the upper edge of the ItemView where the two-finger center coordinates (mBeginFocusx, mBeginFocusy) are located to the upper edge of the custom RecyclerView in the maximum gear (7th gear):

[0408]

[0409] Determine the offset of the custom RecyclerView on the y-axis of the first coordinate system:

[0410] offsety = (nowSelectTopLine - topCorrectLine) * childheight = 400 pixels.

[0411] In this way, with the first coordinate system as a reference, it is necessary to move the custom RecyclerView upward by 400 pixels.

[0412] According to the above method, it can be determined that it is necessary to move the custom RecyclerView one column to the right (also called the first direction) and one row upward (also called the second direction). That is, with the second coordinate system as a reference, move the custom RecyclerView 400 pixels to the right and 400 pixels upward.

[0413] After moving the custom RecyclerView, the second grid interface is displayed, and the ItemView corresponding to the display area of the current gear in the second grid interface also changes. For example, before moving the custom RecyclerView, the display area of the current gear (referred to as the first area) has LP values of 67, 68, and 69 in the first row, with corresponding APs of 79, 80, and 81 for LP = 67, 68, and 69, LP values of 74, 75, and 76 in the second row, with corresponding APs of 82, 83, and 84 for LP = 74, 75, and 76... and LP values of 116, 117, and 118 in the last row, with corresponding APs of 100, 101, and 102 for LP = 116, 117, and 118. After moving the custom RecyclerView, the display area of the current gear (referred to as the second area) has LP values of 73, 74, and 75 in the first row, LP values of 80, 81, and 82 in the second row,... and LP values of 122, 123, and 124 in the last row. To ensure that the images in the album interface do not change from the user's perspective before and after moving the custom RecyclerView, the phone can refresh the AP values corresponding to the display area of the current gear after moving the custom RecyclerView.

[0414] As Figure 17B shown, the phone can, based on the above relationship (8), refresh the ImageView corresponding to LP = 73, 74, and 75 to AP = 79, 80, and 81, refresh the ImageView corresponding to LP = 80, 81, and 82 to AP = 82, 83, and 84,... and refresh the ImageView corresponding to LP = 122, 123, and 124 to AP = 100, 101, and 102. In this way, although the phone relocates the custom RecyclerView, the user sees no change in the album interface before and after pressing the two fingers, that is, the user cannot perceive that the custom RecyclerView has been relocated.

[0415] It should be understood that after the phone detects that the user presses two fingers, it can predict that the user is about to perform a zoom operation. By repositioning the custom RecyclerView with the maximum gear as a reference, it can ensure that regardless of the position of the display area of the current gear in the custom RecyclerView or the position of the user's operation within the display area of the current gear, after performing a zoom operation on any gear, the edge of the custom RecyclerView is outside the screen, and there is no blank area within the screen.

[0416] On Figure 17A this basis, as Figure 17BAs shown, the user can gradually reduce 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 coordinates of the two fingers, and calculate the distance between the two fingers based on the new coordinates of the two fingers. For example, d2 = 1350 pixels, and then calculate the zoom factor S1 = 1.0 + 1.0 * (1350 - 1500) / 1500 = 0.9 according to the distance d1 between the two fingers and the distance d2 between the two fingers.

[0417] Since the current scenario belongs to: the zoom factor oldScaleLevel = scale1 = 1.0 when the two fingers are pressed for the first time, and the zoom factor S1 = 0.9 < scale1 = 1.0 in the second reporting cycle, that is, it conforms to the change trend of switching from gear 3 to gear 5. The mobile phone can set the zoom center (pointx, mBeginFocusy) with reference to the first coordinate system.

[0418] As an example, the zoom factor S1 = 0.9 in the current cycle is greater than the critical point (1.0 + 0.6) / 2 = 0.8 for switching from gear 3 to gear 5. The mobile phone does not need to refresh the AP value of the custom RecyclerView, and sets the zoom factor of the custom RecyclerView to 0.9. From the user's perspective, the content displayed on the screen is centered at the position (pointx, mBeginFocusy) and is reduced a little, and white edges appear in the edge area of the screen.

[0419] As another example, the zoom factor S1 = 0.9 in the current cycle is greater than the critical point (1.0 + 0.6) / 2 = 0.8 for switching from gear 3 to gear 5. As Figure 17C shown, the mobile phone can refresh the AP values of all ItemViews within gear 5 and outside gear 3, and display the third grid interface. From the user's perspective, the content displayed on the screen is centered at the position (pointx, mBeginFocusy) and is reduced a little, and new images are displayed in the edge area of the screen.

[0420] As another example, without the two fingers leaving the screen, the user can continue the zoom operation, and the mobile phone calculates that the zoom factor is 0.7. The zoom factor of 0.7 is less than the critical point of 0.8 for switching from gear 3 to gear 5. The mobile phone can refresh the AP values of all ItemViews within gear 5. From the user's perspective, the content displayed on the screen is centered at the position (pointx, mBeginFocusy) and is reduced a little more, and the image corresponding to gear 5 is displayed on the screen.

[0421] As another example, after the user sets the zoom factor of the custom RecyclerView to a certain value in the range (0.6, 0.8), the two fingers leave the screen. In this case, the phone keeps the zoom center (pointx, mBeginFocusy) unchanged and sets the zoom factor of the custom RecyclerView to 0.6. The left edge of the first column of grids shown on the screen is aligned with the left edge of the screen, and the right edge of the last column of grids shown on the screen is aligned with the right edge of the screen.

[0422] It should be noted that for the calculation method of the coordinates of the zoom center being (pointx, mBeginFocusy), and for the refresh methods of the AP values in the 3rd and 5th gears, reference can be made to the description of the above embodiments, which will not be elaborated here.

[0423] Embodiment 2

[0424] Figures 18A to 18C Shows a schematic diagram of refreshing the grid interface when switching from a large gear to a small gear.

[0425] As Figure 18A shown, it is the first grid interface displayed in the custom RecyclerView. When the custom RecyclerView is in the 5th gear, 5 columns of grids are shown on the screen. As an example, the user slides a single finger up and down on the screen to view the respective images corresponding to these 5 columns of grids, and these images are arranged in chronological order. As another example, when the user wants to view more images, the user can also press two fingers in the area near this image to perform a zoom operation. For example, the user can press two fingers in the area near the image with AP = 95. In the first reporting period, with reference to the first coordinate system (a coordinate system established with the upper left corner of the screen as the origin, the x-axis horizontally to the right, and the y-axis vertically downward), the phone can obtain the coordinates of the two fingers and calculate the center coordinates of the two fingers (mBeginFocusx, mBeginFocusy) = (610, 1140) and the distance between the two fingers (i.e., the distance between the coordinates of the two fingers), such as d1 = 1000 pixels. Since there is only one distance d1 between the two fingers in the first reporting period and no other distances between the two fingers have been obtained, the zoom trend cannot be determined, so the center coordinates of the two fingers are not set.

[0426] When the two fingers are pressed, it can be predicted that the user is about to perform a zoom-in or zoom-out operation. To avoid blank areas on the screen, the phone needs to determine whether to reposition the custom RecyclerView after detecting the two fingers being pressed.

[0427] Among them, the calculation method for repositioning the custom RecyclerView can be as follows:

[0428] Determine the double-finger center coordinates in the first coordinate system: (mBeginFocusx, mBeginFocusy) = (610, 1140).

[0429] Determine the double-finger center coordinates in the second coordinate system: (mBeginFocusX, mBeginFocusY) = (1417, 2200).

[0430] Determine the number of columns of the custom RecyclerView in the maximum gear (7th gear): maxShowSpan = 7 columns.

[0431] Determine the scaling factor of the custom RecyclerView in the current gear (5th gear): scaleLevel = 0.6.

[0432] Determine the scaling factor of the custom RecyclerView in the maximum gear (7th gear): initScaleLevel = 3 / 7.

[0433] Determine the height of the ItemView displayed on the screen in the current gear (5th gear): childHeight = 400 * 0.6 = 240 pixels.

[0434] Determine the height of the ItemView displayed on the screen in the maximum gear (7th gear): initChildHeight = 400 * 3 / 7 = 172 pixels.

[0435] Determine the number of columns between the left edge of the display area in the current gear (5th gear) and the left edge of the custom RecyclerView: leftPlaceholderNum = 1 column.

[0436] Determine the number of columns between the right edge of the display area in the current gear (5th gear) and the right edge of the custom RecyclerView: rightPlaceholderNum = 1 column.

[0437] Determine the number of columns of the ItemView selected by the double-finger center in the current gear (5th gear):

[0438] Column of the custom RecyclerView = LP1%maxShowSpan + 1 = 101% * 7 + 1 = 4 columns.

[0439] Among them, LP1 represents the LP value of the ItemView where the double-finger center coordinates (mBeginFocusx, mBeginFocusy) are located in the 5th gear. In this way, it can be determined that the ItemView selected by the double-finger center in the 5th gear is located in the 4th column of the custom RecyclerView.

[0440] Determine the number of columns of the ItemView selected by the center of two fingers in the maximum gear (gear 7):

[0441]

[0442] In this way, it can be determined that the ItemView selected by the center of two fingers in gear 7 is located in the 4th column of the custom RecyclerView.

[0443] Determine the column offset of the custom RecyclerView:

[0444] translationColumnNumOffset = normalColumnRecyclerView - columnRecyclerView = 0.

[0445] It should be understood that since the number of columns of the ItemView selected by the center of two fingers in the maximum gear (gear 7) is the same as that in the current gear (gear 5), there is no need to offset the custom RecyclerView left or right.

[0446] Determine the number of rows from the upper edge of the ItemView where the center coordinates (mBeginFocusx, mBeginFocusy) of two fingers are located in the current gear (gear 5) to the upper edge of the custom RecyclerView:

[0447]

[0448] Among them, mBeginFocusY represents the Y-axis coordinate value of the center of two fingers in the second coordinate system.

[0449] Determine the number of rows from the upper edge of the ItemView where the center coordinates (mBeginFocusx, mBeginFocusy) of two fingers are located in the maximum gear (gear 7) to the upper edge of the custom RecyclerView:

[0450]

[0451] Determine the offset of the custom RecyclerView on the y-axis of the first coordinate system:

[0452] offsety = (nowSelectTopLine - topCorrectLine) * childheight = 240 pixels.

[0453] In this way, with reference to the first coordinate system, the custom RecyclerView needs to be moved up by 240 pixels.

[0454] According to the above method, it can be determined that the custom RecyclerView needs to be moved up one row (also known as the second direction). That is, with reference to the first coordinate system, the custom RecyclerView is moved up by 240 pixels.

[0455] After moving the custom RecyclerView, the second grid interface is displayed, and the ItemView corresponding to the display area of the current gear will also change. For example, before moving the custom RecyclerView, the LP values of the first row in the display area of the current gear (also known as the first area) are 64, 65, 66, 67, 68 respectively, and the corresponding AP values for LP = 64, 65, 66, 67, 68 are 68, 69, 70, 71, 72 respectively. The LP values of the second row are 71, 72, 73, 74, 75 respectively, and the corresponding AP values for LP = 71, 72, 73, 74, 75 are 73, 74, 75, 76, 77... The LP values of the last row are 141, 142, 143, 144, 145 respectively, and the corresponding AP values for LP = 141, 142, 143, 144, 145 are 123, 124, 125, 126, 127 respectively. After moving the custom RecyclerView up by 240 pixels, the LP values of the first row in the display area of the current gear (also known as the second area) are 71, 72, 73, 74, 75 respectively, the LP values of the second row are 78, 79, 80, 81, 82 respectively,... The LP values of the last row are 148, 149, 150, 151, 152 respectively. In order to ensure that the images on the album interface do not change before and after moving the custom RecyclerView, it is necessary to refresh the AP values corresponding to the display area of the current gear after moving the custom RecyclerView.

[0456] As Figure 18B shown, the mobile phone can, based on the above relationship (8), refresh the ImageView corresponding to LP = 71, 72, 73, 74, 75 to AP = 68, 69, 70, 71, 72, refresh the ImageView corresponding to LP = 78, 79, 80, 81, 82 to AP = 73, 74, 75, 76, 77,... refresh the ImageView corresponding to LP = 148, 149, 150, 151, 152 to AP = 123, 124, 125, 126, 127. In this way, although the mobile phone relocates the custom RecyclerView, the user sees no change in the album interface before and after pressing the two fingers, that is, the user cannot perceive that the custom RecyclerView has been relocated.

[0457] It should be noted thatFigure 18B For example, after repositioning the custom RecyclerView, only the AP values corresponding to the display area of the current gear are refreshed, which is only for illustration and does not limit the present application. When implemented, it is also possible to refresh the ImageView outside the screen in the current gear or refresh the ImageView of the entire custom RecyclerView.

[0458] It should be understood that when the mobile phone detects that the user presses with two fingers, it can predict that the user is about to perform a zoom operation. By repositioning the custom RecyclerView with reference to the maximum gear, it can ensure that no matter where the display area of the current gear is located in the custom RecyclerView or where the user's operation is located within the display area of the current gear, after any gear zoom operation, the edge of the custom RecyclerView will be outside the screen and there will be no blank area on the screen.

[0459] Based on Figure 18B as shown in Figure 18C , without lifting the two fingers off the screen, the user can increase the distance between the two fingers (also known as the first zoom operation). 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 based on the new coordinates. For example, d2 = 500 pixels, and then calculate the zoom factor S1 = 0.6 + 0.6 * (1500 - 1000) / 1000 = 0.9 according to the distance between the two fingers d1 and d2. Since the current scenario is: the zoom factor oldScaleLevel = scale1 = 0.6 when the two fingers are pressed for the first time, and the zoom factor S1 = 0.9 in the second reporting cycle > scale1 = 0.6, that is, it conforms to the change trend of switching from gear 5 to gear 3. The mobile phone sets the zoom center (pointx, mBeginFocusy) with reference to the first coordinate system. In addition, the zoom factor S1 = 0.9 in the current cycle is greater than the critical point (1.0 + 0.6) / 2 = 0.8 for switching from gear 5 to gear 3. Therefore, the mobile phone needs to refresh the content of the current gear on the screen to display the third grid interface. For example, refresh the AP values within gear 3. At this moment, from the user's perspective, the content displayed on the screen is enlarged with the coordinate (pointx, mBeginFocusy) as the center point, and the image corresponding to gear 3 is displayed.

[0460] It should be noted that the calculation method of the coordinates of the zoom center (pointx, mBeginFocusy) and the refresh method of the AP values for gear 3 and gear 5 can refer to the description of the above embodiments and will not be elaborated here.

[0461] It should be noted that when switching from the current reporting point period to the next reporting point period, each of the accompanying drawings 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 screen change and avoid visual jumps, the mobile phone can play a video switching animation, which is composed of multiple video frames. The first frame of the multiple video frames is the screen corresponding to the current reporting point period. The last frame of the multiple video frames is the screen corresponding to the next reporting point period. The scaling centers corresponding to each of the multiple video frames are the same. In the scenario of switching from a large gear to a small gear, the scaling multiples of each of the multiple video frames increase sequentially. In the scenario of switching from a small gear to a large gear, the scaling multiples of each of the multiple video frames decrease sequentially.

[0462] Exemplarily, Figure 19 Schematic diagram of the hardware structure of an electronic device provided by an embodiment of the present application.

[0463] As Figure 19 shown, the electronic device 100 may include a processor 110, an internal memory 120, a key 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.

[0464] The processor 110 may be used to execute the method 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.

[0465] The internal memory 120 may be used to store computer-executable program code, and the executable program code includes 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 at least one application program (APP) required for functions, 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.

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

[0467] A touch sensor, also known as a "touch panel". The touch sensor can be disposed on the display screen 150. The touch sensor and the display screen 150 form a touch screen, also known as a "touch display screen". The touch sensor can be used to detect a touch operation acting thereon or nearby. The touch sensor can 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 can also be disposed on the surface of the electronic device 100 at a position different from that of the display screen 150.

[0468] The embodiment of the present application also provides a computer-readable storage medium storing computer instructions. When the computer-readable storage medium runs on an electronic device, the electronic device is caused to execute the method as shown in the above embodiment. 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 available media. The available medium can be a magnetic medium, an optical medium, or a semiconductor medium, etc.

[0469] The embodiment of the present application also provides a computer program product including computer program code. When the computer program code runs on an electronic device, the electronic device is caused to execute the methods in the above embodiments.

[0470] The embodiment of the present application also provides a chip coupled to a memory. The chip is configured to read and execute a 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.

[0471] The electronic device, computer-readable storage medium, computer program product, and chip provided by the embodiment of the present application are all configured to execute the method provided by the above embodiment. Therefore, the beneficial effects that can be achieved can refer to the beneficial effects corresponding to the method provided above and will not be elaborated herein.

[0472] In the description of the present application, " / " means "or". For example, A / B can mean A or B. In the description of the present application, "and / or" is merely an association relationship describing associated objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists alone, A and B exist simultaneously, and B exists alone.

[0473] The terms "first", "second", etc. in the description and claims of this application are used to distinguish different objects or different treatments of the same object, rather than to describe a specific order of the objects. For example, the first operation, the second operation, etc. are used to distinguish different operations, rather than to describe a specific order of the operations. In the embodiments of this application, "a plurality of" means two or more.

[0474] From the description of the above embodiments, those skilled in the art can clearly understand that for the convenience and conciseness of description, only the division of the above functional modules is used as an example. In practical applications, the above functions can be allocated to different functional modules according to needs, that is, the internal structure of the device is divided into different functional modules to complete all or part of the functions described above.

[0475] In addition, each functional unit in the various embodiments of this application can be integrated into a processing unit, or each unit can exist physically alone, or two or more units can be integrated into one unit. The above integrated unit can be implemented in the form of hardware or in the form of a software functional unit.

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

Claims

1. A relocation method, characterized in that, The method includes: In response to a first operation, display a first grid interface based on a first area of the recycler view; When displaying the first grid interface, receive a two-finger press operation; In response to the two-finger press operation, display a second grid interface based on a second area of the recycler view, where the second area does not coincide or partially coincides with the first area, the grid arrangement of the second grid interface is the same as that of the first grid interface, and the grid content of the second grid interface is the same as that of the first grid interface.

2. The method according to claim 1, characterized in that, The method further includes: 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 recycler view with a first position in the display screen as the zoom center, and display a third grid interface based on the zoomed recycler view, where 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 first position is determined according to the center of the two fingers of the two-finger press operation, the number of columns of the first grid interface, 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.

3. The method according to claim 1 or 2, characterized in that, Before displaying the second grid interface based on the second area of the recycler view, the method further includes: Determine the center of the two fingers of the two-finger press operation; According to the center of the two fingers, determine a first offset and a second offset; With the display screen as a reference, move the recycler view by the first offset in a first direction and move the recycler view by the second offset in a second direction; Wherein, the first direction and the second direction are neither opposite nor relative.

4. The method according to claim 3, wherein The first direction and the second direction are perpendicular to each other within the display screen.

5. The method according to claim 3, characterized in that Determining the first offset according to the center of the two fingers includes: Determine a first number of columns and a second number of columns; According to the first number of columns and the second number of columns, determine an offset number of columns; According to the offset number of columns and the height of the grids in the first grid interface, determine the first offset; Wherein, the first number of columns is the number of columns of the table item view selected by the center of the two fingers when displaying the first grid interface in the recycler view, the second number of columns is the number of columns of the table item view selected by the center of the two fingers when displaying a fourth grid interface based on the recycler view, and the number of columns of the grids in the fourth grid interface is equal to the total number of columns of the recycler view.

6. The method according to claim 5, wherein Determining the first number of columns and the second number of columns includes: Determine the first number of columns according to the distance from the center of the two fingers to the left edge of the display screen and the height of the grids in the first grid interface; determine the second number of columns according to the distance from the center of the two fingers to the left edge of the display screen and the height of the grids in the fourth grid interface.

7. The method according to claim 3, wherein Determining the second offset according to the center of the two fingers includes: Determine a first number of rows and a second number of rows; Based on the first number of rows and the second number of rows, determine an offset number of rows; According to the offset number of rows and the height of the grids in the first grid interface, determine the second offset; Wherein, the first row number is the row number of the table item view selected by the center of the two fingers in the recycler view when the first grid interface is displayed, the second row number is the row number of the table item view selected by the center of the two fingers in the recycler view when the fourth grid interface based on the recycler view is displayed, and the number of grid rows of the fourth grid interface is equal to the total number of rows of the recycler view.

8. The method according to claim 7, wherein Determining the first row number and the second row number includes: Determining the first row number according to the distance from the center of the two fingers to the upper edge of the display screen and the height of the grid in the first grid interface; determining the second row number according to the distance from the center of the two fingers to the upper edge of the display screen and the height of the grid in the fourth grid interface.

9. The method according to any one of claims 3 to 8, characterized in that, The table item views in the first area and the table item views in the second area are in a one-to-one correspondence relationship; After moving the recycler view and before displaying the second grid interface, the method further includes: Based on the offset column number and the offset row number, determining the table item views in the second area respectively corresponding to the table item views in each of the first areas, where the offset column number is the number of columns moved by the recycler view, and the offset row number is the number of rows moved by the recycler view; Refreshing the AP values of the table item views in the second area according to the AP values of the table item views in the first area, where the AP value is the image number.

10. The method according to any one of claims 1 to 9, characterized in that, Before displaying the second grid interface based on the second area of the recycler view, the method further includes: Determining that the relocation condition is satisfied, and the relocation condition includes at least one of the following: The distance between the center of the two fingers of the two-finger press operation and any edge of the display screen is less than the first threshold; The distance between the upper edge of the recycler view and the upper edge of the display screen is less than the second threshold; The distance between the lower edge of the recycler view and the lower edge of the display screen is less than the second threshold; The distance between the left edge of the recycler view and the left edge of the display screen is less than the third threshold; The distance between the right edge of the recycler view and the right edge of the display screen is less than the third threshold; Wherein, the first threshold is determined according to the grid size of the first grid interface, the number of columns of the recycler view, and the display area of the first grid interface in the recycler view; The second threshold is determined according to the grid size of the first grid interface and the number of rows of the recycler view; The third threshold is determined according to the grid size of the first grid interface and the number of columns of the recycler view.

11. The method according to any one of claims 1 to 10, characterized in that, The grid arrangement of the second grid interface and the first grid interface is the same, including: the number of grids in the second grid interface is the same as the number of grids in the first grid interface, and the grid positions of the second grid interface are the same as the grid positions of the first grid interface.

12. 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, the computer program code includes computer instructions, and 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 11.

13. A chip system, characterized in that, The chip system is applied to an electronic device, and the chip system includes one or more processors, and the one or more processors are configured to call computer instructions to cause the electronic device to execute the method according to any one of claims 1 to 11.

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

Images