Display method and device of grid interface and storage medium

Abstract

The invention provides a grid interface display method and device and a storage medium, and relates to the technical field of terminals. In the application, a first grid interface based on a recoverer view is displayed in a screen, in response to a double-finger pressing operation of double fingers of a user on the screen, a double-finger center is determined, the double-finger center corresponds to a first grid of the first grid interface, the first grid displays a first image, and after the double-finger pressing operation is detected, the recoverer view is displayed on the screen. The first zooming operation continues to be detected, a second grid interface based on the recoverer view is displayed, the second grid interface comprises grids of a second column number, the second column number is different from the first column number, the first image is displayed in the second grid in the second grid interface, and due to the fact that the column numbers of the first grid interface and the second grid interface are different, the first image is displayed in the second grid. Therefore, equivalently, the electronic equipment can jump from the first grid interface to the second grid interface with any column number different from the column number displayed by the first grid interface through the first zooming operation, and the user experience is improved.

Description

Technical Field

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

[0002] With the rapid development of terminal technology, the storage space of mobile phones is getting larger and larger. The photo gallery of a mobile phone can store a large number of photos and videos taken by users. When there are many photos and videos in the photo gallery, the screen of the mobile phone may not be able to display all of them at the same time.

[0003] Currently, related technologies have proposed a grid-based photo album interface display solution. Each small grid in the photo album interface is used to display an image. Users can increase the grid gear by reducing the distance between two fingers, and zoom out the photo album interface to display a larger number of images. Users can also reduce the grid gear by increasing the distance between two fingers, and zoom in the photo album interface to display a larger-sized image.

[0004] However, currently, mobile phones based on the Android system only support zooming the photo album interface in one gear at a time. From the moment when two fingers are pressed down to the moment when two fingers leave the screen, only one gear can be increased or decreased. If a user wants to view a photo album interface across gears, multiple presses and multiple raises of the hand are required. This process is very inconvenient and affects the user experience. Summary of the Invention

[0005] This application provides a method, device, and storage medium for displaying a grid interface, which can solve the problem of cross-gear zooming of the grid interface during the process from when two fingers are pressed down to when two fingers leave the screen.

[0006] To achieve the above objective, this application adopts the following technical solutions:

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

[0008] Display a first grid interface based on a recycler view on the screen. The first grid interface includes a first number of columns of grids, and the grids include images;

[0009] In response to a two-finger press operation of a user on the screen, determine the center of the two fingers. The center of the two fingers corresponds to a first grid in the first grid interface, and a first image is displayed in the first grid;

[0010] After detecting the two-finger press operation, continue to detect a first zoom operation, and display a second grid interface based on a recycler view; the second grid interface includes a second number of columns of grids, the second number of columns is different from the first number of columns, and the first image is displayed in a second grid in the second grid interface. The actual layout position index values of the second grid and the first grid are the same.

[0011] Among them, the first scaling operation may refer to the scaling operation in the i-th reporting point period. The reporting point period, also known as the surveillance period, is the period for the touch drive to collect the user's touch operations.

[0012] Taking the touch drive collecting 240 times per second as an example. The period T = 1 / 240 = 4.16 ms, that is, the touch drive collects 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 drive can determine the touch position of the single finger or two fingers according to voltage changes, etc.

[0013] The first grid interface may refer to the interface displayed on the screen before the scaling operation, such as the interface shown in (a) in Figure 7 . The first column number may refer to the number of columns in the recycler view displayed on the first grid interface. For example, as shown in (a) in Figure 7 , if the number of columns in the recycler view displayed on the first grid interface is 5 columns, then the first column number is 5 columns. The first grid may be the grid corresponding to the center of the two fingers in the first grid interface. For example, Figure 7 the grid with the actual layout position index value of 6 shown in (a) in

[0014] The second grid interface may refer to the interface displayed on the screen during or after the scaling operation, such as the interface on the screen shown in (b) in Figure 7 . The second column number may refer to the number of columns in the recycler view displayed on the second grid interface. For example, as shown in (b) in Figure 7 , if the number of columns in the recycler view displayed on the second grid interface is 3 columns, then the second column number is 3 columns. The second grid may refer to the grid corresponding to the center of the two fingers in the second grid interface. For example, Figure 7 the grid with the actual layout position index value of 6 shown in (b) in

[0015] The display method of the grid interface provided by the embodiments of the present application displays a first grid interface based on a recycler view within the screen. The first grid interface includes grids arranged in a first number of columns, and images are displayed in the grids. In response to a two-finger press operation of the user on the screen, the center of the two fingers is determined. The center of the two fingers corresponds to a first grid in the first grid interface, and a first image is displayed in the first grid. After detecting the two-finger press operation, when a first zoom operation is continuously detected, a second grid interface based on the recycler view is displayed. Among them, the second grid interface includes grids arranged in a second number of columns, and the second number of columns is different from the first number of columns. The first image is displayed in the second grid in the second grid interface, and the actual layout position index value of the first grid in the second grid is the same. Since the number of columns in the first grid interface and the second grid interface is different, it is equivalent that the electronic device can jump from the first grid interface to a grid interface with any number of columns different from the number of columns displayed in the first grid interface through the first zoom operation, that is, it is equivalent to switching from the first grid interface to the second grid interface across gears through the first zoom operation, improving the user experience.

[0016] In combination with the first aspect, in some embodiments of the first aspect, when the first grid interface is displayed, the recycler view corresponds to a first zoom ratio, and when the second grid interface is displayed, the recycler view corresponds to a second zoom ratio, and the first zoom ratio and the second zoom ratio are different.

[0017] Taking the recycler view as Figures 6A to 6D the recycler view RecylerView shown as an example, if the first number of columns in the first grid interface is 3 columns, as Figure 6A shown, then the first zoom ratio of the recycler view when the first grid interface is displayed is 1.0. If the second number of columns in the second grid interface is 5 columns, as Figure 6B shown, then the second zoom ratio of the recycler view when the second grid interface is displayed is 0.6.

[0018] It can be understood that the first zoom ratio can be greater than the second zoom ratio or less than the second zoom ratio, and the embodiments of the present application do not limit this.

[0019] In combination with the first aspect, in some embodiments of the first aspect, the recycler view includes M rows and N column item views, where each item view is used to display an image.

[0020] For example, the recycler view can be as Figure 5 shown, including 50 rows and 21 columns of item views ItemView, that is to say, M is 21 and N is 50.

[0021] Exemplarily, as Figure 5 shown, each item view is used to display an image.

[0022] In combination with the first aspect, in some embodiments of the first aspect, the actual layout position index value is used to indicate the position of the grid cell in the recycler view.

[0023] Among them, the actual layout position index is an index established from the perspective of the LayoutManager, and is used to represent the position of the grid cell in the custom RecyclerView. The actual 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.

[0024] In combination with the first aspect, in some embodiments of the first aspect, each grid cell in the recycler view corresponds to an adaptation position index respectively, and the adaptation position index is used to represent the display order of the images displayed in the grid cells in the recycler view.

[0025] The actual adaptation 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 cell of the custom RecyclerView. In the native logic of the Android system, the adaptation position index cannot be customized numerically. However, in this application, during the zooming process, the actual adaptation position index of the ItemView corresponding to the center of the two fingers remains unchanged, but the actual adaptation position indices of other ItemViews may be renumbered, resulting in the actual adaptation position indices of the entire custom RecyclerView not necessarily being continuous. That is to say, in the zooming scenario, the actual adaptation position index and the layout position index may not be equal.

[0026] In combination with the first aspect, in some embodiments of the first aspect, the method further includes: determining a second grid cell based on the center of the two fingers; and determining the display order of the images displayed in the other grid cells in the interface of the second grid cell.

[0027] Among them, the other grid cells may refer to the grid cells other than the second grid cell in the interface of the second grid cell. For example Figure 7 as shown in (b) of, the second grid cell is the grid cell with LP equal to 6, and the other grid cells may be the grid cells other than those with LP equal to 6 in the interface of the second grid cell, that is, the grid cells with LP equal to 0, 1, 2, 5, 7, 10, 11, 12, 15, 16, 17, 20, 21, 22, 25, 26, 27.

[0028] The display method of the grid interface provided by the embodiment of the present application displays a first grid interface based on a recycler view on the screen. The first grid interface includes grids with a first number of columns, and images are displayed in the grids. In response to a two-finger press operation of the user on the screen, the center of the two fingers is determined. The center of the two fingers corresponds to the first grid of the first grid interface, and a first image is displayed in the first grid. After detecting the two-finger press operation, when a first zoom operation is continuously detected, a second grid interface based on the recycler view is displayed, and the second grid is determined based on the center of the two fingers. Then, based on the second grid, the display order of the images displayed in the other grids of the second grid interface is determined. In this way, the display order of the images displayed in the other grids of the second grid interface after zooming is determined based on the second grid corresponding to the center of the two fingers, avoiding the situation where the display order of the images displayed in each grid of the second grid interface is chaotic, and further improving the user experience.

[0029] In combination with the first aspect, in some embodiments of the first aspect, determining the display order of the images displayed in the other grids of the second grid interface based on the second grid includes: determining a third grid and a fourth grid based on the second grid, the number of display columns of the second grid interface, and the maximum number of display columns of the recycler view. The number of columns where the third grid is located is the number of columns in the recycler view displayed on the second grid interface, and the third grid does not include the second grid. The number of columns where the fourth grid is located is the number of columns in the recycler view not displayed on the second grid interface; determining the display order of the images displayed in the third grid based on the positional relationship between the third grid and the second grid.

[0030] Among them, the number of columns of the first column of the display area of the second grid interface in the recycler view can be Index1, and the number of columns of the last column of the display area of the second grid interface in the recycler view can be Index2. The number of columns where the third grid is located is greater than or equal to Index1 and less than or equal to Index2. The number of columns where the fourth grid is located is less than Index1 or greater than Index2.

[0031] In combination with the first aspect, in certain embodiments of the first aspect, determining the display order of the images displayed in the third grid based on the positional relationship between the third grid and the second grid includes: If the third grid is the grid to be displayed before the second grid, then determine the display order of the images in the third grid based on the sum of the adaptation position index value of the second grid and the first parameter, where the first parameter is determined according to the number of columns of the recycler view displayed on the second grid interface, the actual layout position index value of the second grid in the recycler view, the maximum number of columns displayed in the recycler view, the actual layout position index value of the third grid in the recycler view, the number of columns where the second grid is located, and the number of columns where the third grid is located; If the third grid is the grid to be displayed after the second grid, then determine the display order of the images in the third grid based on the difference between the adaptation position index value of the second grid and the second parameter, and the second parameter is determined according to the number of columns of the recycler view displayed on the second grid interface, the actual layout position index value of the second grid in the recycler view, the maximum number of columns displayed in the recycler view, the actual layout position index value of the third grid in the recycler view, the number of columns where the second grid is located, and the number of columns where the third grid is located.

[0032] Among them, if the third grid is the grid to be displayed before the second grid, that is to say, the actual layout position index value of the third grid is less than the actual layout position index value of the second grid, the first formula can be used to determine the display order of the images in the third grid, that is, the adaptation position index value of the third grid. The first formula includes:

[0033]

[0034] Among them, selectAP represents the adaptation position index value of the center of the two fingers, that is, the adaptation position index value of the second grid. nextshowSpan represents the number of columns displayed on the screen, that is, the number of columns displayed on the second grid interface. LP represents the actual layout position index value of the third grid. maxShowSPAN represents the total number of columns of the recycler view; selectLP represents the actual layout position index value of the second grid; selectlineNum represents the number of columns where the second grid is located; lineNum represents the number of columns where the third grid is located.

[0035] If the third grid is the grid to be displayed after the second grid, that is to say, the actual layout position index value of the third grid is greater than the actual layout position index value of the second grid, the second formula can be used to determine the display order of the images in the third grid, that is, the adaptation position index value of the third grid. The second formula includes:

[0036]

[0037] Among them, selectAP represents the adaptation position index value of the center of two fingers, that is, the adaptation position index value of the second grid; nextshowSpan represents the number of columns displayed on the screen, that is, the number of columns displayed on the second grid interface; LP represents the actual layout position index value of the third grid; maxShowSPAN represents the total number of columns of the recycler view; selectLP represents the actual layout position index value of the second grid; selectlineNum represents the column number where the second grid is located; lineNum represents the column number where the third grid is located.

[0038] Combined with the first aspect, in some embodiments of the first aspect, a blank image is displayed in the fourth grid.

[0039] The method for displaying a grid interface provided by the embodiments of the present application can display a blank image in the fourth grid that is not displayed in the second grid interface. That is to say, the electronic device does not need to consume resources to determine the image displayed in the fourth grid, so the burden on the processor of the electronic device can be effectively reduced.

[0040] Combined with the first aspect, in some embodiments of the first aspect, the above-mentioned display of the second grid interface based on the recycler view includes: performing a zoom operation on the recycler view based on the center of two fingers and the zoom factor corresponding to the first zoom operation; displaying the second grid interface based on the zoomed recycler view.

[0041] Combined with the first aspect, in some embodiments of the first aspect, the above method is applied to an electronic device. The electronic device includes a touch event receiving layer, a recycler view, and a pinch gesture detector. The size of the touch event receiving layer is equal to the size of the screen, and the size of the recycler view is larger than the size of the screen; displaying the first grid interface based on the recycler view within the screen includes: in response to a user's selection operation on the album card, displaying the first grid interface based on the recycler view within the screen; the method further includes: in response to a two-finger touch operation on the grid interface based on the recycler view, the electronic device transmits the first two-finger coordinates to the pinch gesture detector through the touch event receiving layer; the electronic device determines the center of two fingers according to the first two-finger coordinates through the pinch gesture detector.

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

[0043] Among them, the method described in the above first aspect 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.

[0044] In a third aspect, the present application provides a terminal device, which includes a memory and one or more processors. Among them, the memory is used to store computer program code, and the computer program code includes computer instructions. When the computer instructions are called by the processor, the terminal device executes the display method of the grid interface provided in any one of the first aspects.

[0045] 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 the terminal device, the terminal device executes the display method of the grid interface provided in the first aspect and any possible implementation manner thereof.

[0046] In a fifth aspect, the present application provides a computer program product. When the computer program product runs on a computer, the computer executes the display method of the grid interface provided in the first aspect and any possible implementation manner thereof.

[0047] In a sixth aspect, the present application provides a chip system. The chip system includes one or more interface circuits and one or more processors. The interface circuit and the processor are interconnected by a line. The chip system can be applied to a terminal device including a communication module and a memory. The interface circuit is used to receive a signal from the memory of the terminal device and send the received signal to the processor, and the signal includes computer instructions stored in the memory. When the processor calls the computer instructions, the terminal device can execute the display method of the grid interface provided in the first aspect and any possible implementation manner thereof.

[0048] It can be understood that the beneficial effects that can be achieved by the device in the second aspect, the terminal device in the third aspect, the computer-readable storage medium in the fourth aspect, the computer program product in the fifth aspect, and the chip system in the sixth aspect provided above can refer to the beneficial effects in the first aspect and any possible implementation manner thereof, and will not be elaborated here. Description of the Drawings

[0049] Figure 1 It is a schematic diagram of a scenario for zooming and displaying an image on a mobile phone based on the Android system provided by an embodiment of the present application;

[0050] Figure 2 It is a schematic diagram of a scenario for cross-gear zooming and displaying an image provided by an embodiment of the present application;

[0051] Figure 3Another schematic diagram of the scenario for zooming and displaying images across gears provided by the embodiments of the present application;

[0052] Figure 4 A schematic diagram of a user performing a magnification operation on a RecyclerView provided by the embodiments of the present application;

[0053] Figure 5 A schematic diagram of the relationship among RecyclerView, ItemView, and ImageView provided by the embodiments of the present application;

[0054] Figures 6A to 6D A schematic diagram of RecyclerViews and display areas at different gears provided by the embodiments of the present application;

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

[0056] Figure 8 A software architecture diagram of a terminal device provided by the embodiments of the present application;

[0057] Figure 9 A flowchart of another method for displaying a grid interface provided by the embodiments of the present application;

[0058] Figure 10 A flowchart of a method for displaying a grid interface provided by the embodiments of the present application;

[0059] Figure 11 A schematic diagram of the actual layout position index and the actual adaptation position index corresponding to a grid provided by the embodiments of the present application;

[0060] Figure 12 A flowchart of a method for adjusting the actual adaptation position index of a grid provided by the embodiments of the present application;

[0061] Figure 13 A schematic diagram of the actual layout position index and the actual adaptation position index after refreshing provided by the embodiments of the present application;

[0062] Figure 14 A schematic diagram of the actual layout position index and the actual adaptation position index before and after zooming provided by the embodiments of the present application;

[0063] Figure 15 A schematic diagram of the hardware structure of a terminal device provided by the embodiments of the present application. Detailed implementation manners

[0064] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the following will clearly and completely describe the technical solutions in the embodiments of this application with reference to the accompanying drawings in the embodiments of this application. Obviously, the described embodiments are some, but not all, of the embodiments of this application.

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

[0066] For the album page, the electronic device has respectively preset multiple gears in advance. Among them, the "gear" can be understood as the number of image columns displayed on the screen. For example, 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 image columns displayed on the screen is 3 columns; when the gear is 5 gears, the corresponding number of image columns displayed on the screen is 5 columns; when the gear is 15 gears, the corresponding number of image columns displayed on the screen is 15 columns; when the gear is 21 gears, the corresponding number of image columns displayed on the screen is 21 columns.

[0067] 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 gears through a zoom operation, then before receiving the next two-finger operation, the electronic device always keeps displaying 21 columns of images.

[0068] This application provides a display method for the grid interface of the album page. Among them, "zooming by gear" means that: before the user leaves the screen after pressing the two fingers, when the user increases or decreases the distance between the two fingers on the screen, the electronic device can switch from the current gear to the next gear, that is, only one gear can be switched with one gesture. Taking the number of image columns displayed on the screen before the user presses the two fingers as 5 columns as an example, after the user presses the two fingers and reduces the distance between the two fingers, before the two fingers leave the screen, as the distance between the two fingers decreases, the number of image columns displayed on the screen can switch from 5 columns to 15 columns. After switching to 15 columns, reducing the distance between the two fingers again will not trigger the screen to switch from 15 columns to 21 columns.

[0069] "Cross-gear zooming" means that after the user presses two fingers and before the two fingers leave the screen, when the user increases or decreases the distance between the two fingers on the screen, the electronic device can switch from the current gear through the next gear to a non-adjacent gear of the current gear, that is, a single gesture can switch multiple gears. Taking the number of image columns displayed on the screen before the user presses two fingers as 5 columns as an example, after the user presses two fingers and decreases the distance between the two fingers, before the two fingers leave the screen, as the distance between the two fingers decreases, the number of image columns displayed on the screen can switch from 5 columns to 15 columns. After switching to 15 columns and the two fingers have not left the screen, as the distance between the two fingers continues to decrease, the number of image columns displayed on the screen can switch from 15 columns to 21 columns.

[0070] It should be noted that the above method can be applied to an electronic device based on the Android system or an electronic device based on other operating systems. The above electronic device is also referred to as a terminal or 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.

[0071] Next, taking the electronic device as a mobile phone as an example, combined with Figures 1 to 5 , the usage scenarios of the gallery application will be illustrated by examples.

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

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

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

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

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

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

[0078] 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 columns of grids, and the side length of each grid is h1. The user can press two fingers on the album page as shown in (a) of Figure 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 columns of grids, and the side length of each grid 04 is h2, where h2 is equal to the width of the screen divided by 15. 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 columns of grids, and the side length of each grid 05 is h3, where h3 is equal to the width of the screen divided by 21. As shown in (d) of Figure 2 , when the user raises the hand, the album page remains showing 21 columns of images. That is to say, on the premise that the user's two fingers do not leave the screen, the mobile phone realizes the cross-gear zoom of the album page.

[0079] 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 columns of grids, and the side length of each grid is h1. The user can press two fingers on the album page as shown in (a) of Figure 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 columns of grids, and the side length of each grid 06 is h4, where h4 is equal to the width of the screen divided by 3. As shown in (c) of Figure 3 , the user continues to increase the distance between the two fingers to d8, and the album page remains showing 3 columns of images. As shown in (d) of Figure 3 , after the distance between the two fingers increases to d8, the user raises the hand, and the album page remains showing 3 columns of images. That is to say, after the mobile phone switches from 5 gears to the minimum gear (3 gears), the album page remains at 3 gears.

[0080] As yet 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 4The photo album page shown in (a) consists of a 5-column grid, and the side length of each grid is h1. The user can press two fingers on the photo album page as shown in Figure 4 (a). At this moment, the distance between the two fingers is d9. As shown in Figure 4 (b), when the distance between the two fingers increases from d9 to d10, the photo album page switches to a 3-column grid, and the side length of each grid 06 is h4, and h4 is equal to the width of the screen divided by 3. As shown in Figure 4 (c), when the distance between the two fingers increases to d11, the photo album page includes 3 columns of images with incomplete edge image content, and the height of each grid is h5, and h5 > h4. As shown in Figure 4 (d), when the user raises the hand, the photo album page rebounds to 3 columns of images, and the left and right edges of the 3 columns of images are aligned with the left and right edges of the screen. That is to say, after the mobile phone switches from the 5th gear to the minimum gear (3rd gear), it can continue to zoom in in response to the user operation, but it will finally rebound to the minimum gear (3rd gear) after the user raises the hand.

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

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

[0083] Next, taking an electronic device using the Android operating system as an example, the display method for the grid interface of the photo album page provided by the present application will be described.

[0084] 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 shown in Figure 5As shown, the initialized RecyclerView may 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 RecyclerView are as follows: Taking the screen size of width 1200 * height 2800 pixels 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 RecyclerView as 400 pixels; then, the mobile phone can multiply the minimum gear, 3, by the side length of each ItemView of the initialized custom RecyclerView, 400 pixels, and then divide by the maximum gear, 21, to calculate the side length of each ItemView on the screen at the maximum gear (21 gears) as 57 pixels. Then, the mobile phone can divide the height of the screen, 2800 pixels, by the side length of each ItemView on the screen at the maximum gear (21 gears), 57 pixels, and add 1 to obtain the number of rows of the initialized custom RecyclerView as 50 rows. It should be noted that at 21 gears, the mobile phone can divide the height of the screen by the side length of each ItemView on the screen at the maximum gear (21 gears), 57 pixels, to determine that at most 49 rows of pixels can be displayed. The custom RecyclerView 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.

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

[0086] 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. Another example is that when the user reduces the distance between the two fingers, the display area in the custom RecyclerView enlarges, so that after the enlarged display area is sent to the screen, the screen displays a larger number of images with smaller sizes; when the user increases the distance between the two fingers, the display area in the custom RecyclerView reduces, so that after the reduced display area is sent to the screen, the screen displays a smaller number of images with larger sizes.

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

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

[0089] Another is to customize the actual display size of the RecyclerView. Since the number of columns in the display area of the customized RecyclerView is different, the number of ItemViews displayed on the screen is different. Therefore, it is necessary to multiply a scaling factor on the basis of the original size of the customized RecyclerView to obtain a reduced display size, and then send the reduced customized RecyclerView to the screen for display. For example, when the current gear is N and the minimum gear is M, and the original size of the customized RecyclerView is (x, y), the display size of the customized RecyclerView at the current gear is (x * M / N, y * M / N). Where 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.

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

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

[0092] Suppose 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.

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

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

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

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

[0097] It should be noted that in Figures 6A to 6D , the actual display size after multiplying the display area of the custom RecyclerView by the scaling factor is equal to the size of the mobile phone screen. Therefore, the grids in the display area will fill the entire screen. As an example, as Figures 2 to 4 shown, the mobile phone will cover the status bar layer, activity bar layer, etc. above the grids according to the preset transparency, so that the grids covered by the status bar layer and activity bar layer are in a completely invisible state or a partially invisible state. It can be understood that in actual implementation, the activity bar and / or status bar can also be removed so that all grids are in a completely visible state, and the present application does not make specific limitations.

[0098] 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, the present application provides two custom indexes: one index is the real layout position index, abbreviated as LP; the other index is the real adapter position index, abbreviated as AP.

[0099] 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 the present application, the terminal device can change the real layout position index value according to factors such as the zoom factor, 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.

[0100] 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 the present application, during the zooming process, the real adapter position index of the ItemView corresponding to the center of the two fingers remains unchanged, but the real adapter position indexes of other ItemViews may be renumbered, resulting in the real adapter position indexes of the entire custom RecyclerView not necessarily being continuous. That is to say, in the zooming scenario, the real adapter position index and the layout position index may not be equal.

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

[0102] For the sake of convenience of description, take the example where the maximum gear of the custom RecyclerView is 5 gears, and the width and height of each ItemView are equal to the width of the screen divided by 3, that is, the minimum gear is 3 gears. As Figure 7As shown in (a) below, before receiving the user's two-finger zoom-in operation, 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 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 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 within the area surrounded by the dashed box and gradually increase the distance between the two fingers. In response to the two-finger distance zoom-in operation, the mobile phone zooms in on the entire custom RecyclerView with the ItemView surrounded by the dashed box as the center. The ItemViews displayed on the screen are updated to 3 columns.

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

[0104] It can be understood that Figure 7 The interface displayed on the screen shown in (a) in Figure 7 may refer to the first grid interface. The ItemView displayed on the screen has 5 columns. That is to say, the number of columns in the first column of the first grid interface is 5 columns. The first grid may be the grid corresponding to the center of two fingers on the first grid interface, that is, the grid with LP = 6. Figure 7 The interface displayed on the screen shown in (b) in Figure 7 may refer to the second grid interface. The ItemView displayed on the screen has 3 columns. That is to say, the number of columns in the second column of the second grid interface is 3 columns. The second grid may be the grid corresponding to the center of two fingers on the second grid interface, that is, the grid with LP = 6. That is, the number of columns in the first column and the second column are different, and the actual layout position index LP of the first grid and the second grid is the same, both being 6.

[0105] Exemplarily, Figure 8 shows a software architecture diagram of an electronic device.

[0106] As Figure 8 shown, the electronic device may 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 software architecture runs on top of the hardware layer, and the hardware layer may include a screen, sensors, etc.

[0107] 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 events, a custom RecyclerView control, etc. The gallery application, the camera application, and the ScaleGestureDetector are native controls of the Android system, and the ReceiveTouchView control and the custom RecyclerView control are newly added controls in this application.

[0108] 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 and shared images, etc.

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

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

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

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

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

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

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

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

[0117] Referring to the operations of the above embodiments, the gallery application supports classifying and displaying images in the form of albums on the album page. This application provides a cross-gear image scaling scheme based on a custom RecyclerView.

[0118] The following describes the specific implementation method of the cross-gear image scaling scheme for the custom RecyclerView.

[0119] On the grid page of the album, each grid is continuous, and there is no need to set year titles, month titles, and day titles. During the process of switching gears, only the size and quantity of the grids need to be changed. Based on the grid characteristics of the album page, this application sets a custom RecyclerView for the album pages of all gears. The size of the custom RecyclerView is much larger than the size of the screen. For example, the size of the custom RecyclerView is 8400 pixels wide * 20000 pixels high, and the size of the screen is 1200 pixels wide * 2800 pixels high. In this way, before the user's two fingers leave the screen after pressing the two fingers, the electronic device can switch back and forth between any gears based on the custom RecyclerView in response to the user's two-finger zoom operation, such as switching from the current gear through the next gear to other gears. For the specific implementation method of the custom RecyclerView, reference can be made to the relevant descriptions of the above embodiments for Figure 5 、 Figures 6A to 6D 、 Figure 7 , which will not be elaborated here.

[0120] For example, for the album page, the mobile phone is pre-set with 3 gears, 5 gears, 15 gears, and 21 gears. The size of the screen is 1200 pixels wide * 2800 pixels high, and the size of the custom RecyclerView is 8400 pixels wide * 20000 pixels high. If described according to the above Example 1, when the WMS transfers the two-finger coordinates to the custom RecyclerView, the custom RecyclerView will calculate a zoom multiple corresponding to the two-finger operation. However, when this zoom multiple is less than 1, there may be a problem that the zoom action fails prematurely.

[0121] The following combines with Figure 9Provide a flowchart showing that a cross-gear scaling solution based on a custom RecyclerView fails prematurely.

[0122] B1. The touch driver samples the user's touch operations at a period T.

[0123] The above period, also known as the layout control period or reporting point period, is the period for the touch driver to collect the user's touch operations.

[0124] 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 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 based on voltage changes, etc.

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

[0126] After launching the gallery application, the gallery application initializes the custom RecyclerView, pinch gesture detector, etc. Among them, the size of the custom RecyclerView is 8400 in width * 20000 in height pixels. It should be noted that the custom RecyclerView is custom and is not included in the native system of the Android system. It is also possible not to initialize this control when running the gallery application.

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

[0128] If the phone shows a photo page before the user last exited the gallery application, then the gallery application shows the photo page after completing the initialization. If the phone shows any album page before the user last exited the gallery application, then the gallery application shows an album card page as shown in (b) of Figure 1 .

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

[0130] B4. The gallery application shows an album page based on the custom RecyclerView and notifies the WMS. Accordingly, the WMS determines that the custom RecyclerView is the layer for handling scaling events.

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

[0132] At this time, the distance between the two fingers pixels.

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

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

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

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

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

[0138] Among them, pixels.

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

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

[0141] At this time, the distance between the two fingers is equal to pixels.

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

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

[0144] In B12, RecyclerView2 passes the coordinates (90, 90) and the coordinates (378, 474) to the pinch gesture detector.

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

[0146] Among them, Pixels.

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

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

[0149]

[0150] If Di < D1 and Si ≤ a1, or Di > D1 and Si ≥ a2 are satisfied, then when the next scaling operation is received, the scaling factor of the custom RecyclerView is updated to Si. Among them, a1 is the gear shift critical point for switching from a small gear to a large gear, and a2 is the gear shift critical point for switching from a large gear to a small gear.

[0151] In the above-mentioned image scaling solution for the album page based on the custom RecyclerView, since only one custom RecyclerView is set for all gears of the album page, and the size of the custom RecyclerView is much larger than the size of the screen. When the user reduces the distance between the two fingers, after the custom RecyclerView converts the touch coordinates, the pinch gesture detector calculates the distance D between the two fingers based on the converted coordinates, which is less than the actual distance between the two fingers. This easily leads to the inability to handle normal scaling events and the failure to implement gear switching on the photo page. In the embodiment of the present application, the conversion of the touch coordinates by the custom RecyclerView, which results in the inability to handle normal scaling events, is called the premature invalidation of the scaling action.

[0152] In view of the above problems, the present application also adds a custom ReceiveTouchView. The size of the ReceiveTouchView is the same as the size of the screen. In the scaling scenario, the ReceiveTouchView directly passes the two-finger coordinates to the pinch gesture detector without multiplying the two-finger coordinates by a scaling factor less than 1, thereby solving the problem that the image scaling solution for the album page based on the custom RecyclerView is prone to premature invalidation of the scaling action. In addition, referring to the description of Example 2 above, in the scaling scenario of the album page, since a custom RecyclerView is set for each gear, when the user presses the two fingers and before the two fingers leave the screen, the electronic device can switch back and forth between any gears in response to the two-finger scaling operation of the user based on the custom RecyclerView, such as switching from the current gear through the next gear to other gears.

[0153] The following combines Figure 10 Provide a flowchart of a cross-gear scaling solution based on a custom RecyclerView that will not be prematurely invalidated.

[0154] C1, The touch drive samples the user's touch operation according to the period T.

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

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

[0157] C2, The touch drive receives the user's click operation on the icon of the gallery application and starts the gallery application.

[0158] The gallery application initializes the layer for receiving touch events (ReceiveTouchView), the custom RecyclerView, and the pinch gesture detector, etc. The size of ReceiveTouchView is 1200 pixels wide and 2800 pixels high. The size of the custom RecyclerView is 8400 pixels wide and 20000 pixels high. It should be noted that both ReceiveTouchView and the custom RecyclerView are customized in this application. These two controls are not included in the native Android system, and the gallery application can also run without initializing these two controls.

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

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

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

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

[0163] C5, the touch driver receives the two-finger press operation of the user and transmits the coordinates (x11, y11) and the coordinates (x12, y12) at the time of the two-finger press to the WMS. The WMS transmits the coordinates (x11, y11) and the coordinates (x12, y12) to ReceiveTouchView.

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

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

[0166] C7, The pinch gesture detector calculates the center coordinates (mBeginFocusx, mBeginFocusy) of the two fingers and the distance d1 between the two fingers according to the coordinates (x11, y11) and the coordinates (x12, y12).

[0167] 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 horizontally to the right, and the y-axis vertically downward. When the user presses two fingers at a certain position on the screen, the mobile phone can calculate the center coordinates (mBeginFocusx, mBeginFocusy) of the two fingers and the distance d1 between the two fingers according to the coordinates (x11, y11) and the coordinates (x12, y12).

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

[0169]

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

[0171]

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

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

[0174] C8, The touch drive receives the two-finger movement operation of the user, and sends the coordinates (xi1, yi1) and the coordinates (xi2, yi2) after the two-finger movement operation to the ReceiveTouchView through the WMS.

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

[0176] Among them, i is an integer greater than or equal to 2. i represents the i-th time of collecting a two-finger operation.

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

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

[0179]

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

[0181] C11, the pinch gesture detector calculates the zoom ratio Si according to the two-finger distance di and the two-finger distance d1.

[0182] Among them, the zoom ratio Si can be obtained through the following relational expression (4):

[0183]

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

[0185] 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's two fingers do not move, and the zoom ratio is equal to 1, then it is determined to be invalid, and there is no need to determine whether to set the zoom center. In a cycle T, the faster the two-finger moving speed, the greater the difference between di and d1, and the faster the gear shift.

[0186] C12, the pinch gesture detector determines the zoom ratio scale1 of the current gear and the gear shift critical points a1 and a2.

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

[0188] 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 there is no other gear set between these two gears.

[0189] Taking the preset gears of the album page as 3, 5, 15, and 21 for example. Among them, 3 and 5 are called adjacent gears, 5 and 15 are called adjacent gears, and 15 and 21 are called adjacent gears. Referring to the description of the above embodiment for Figure 6A 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 embodiment for Figure 6B 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 embodiment for Figure 6C When the display area includes 15 columns of grids, the scaling factor of the custom RecyclerView is 0.2. Referring to the description of the above embodiment for Figure 6D When the display area includes 21 columns of grids, the scaling factor of the custom RecyclerView is 1 / 7.

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

[0191] 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 for switching gears a3 can be calculated by the following relational expression (5):

[0192]

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

[0194] Table 1

[0195] - Zoom factor 3 gears 1.0 Critical point for gear shift 0.8 5 gears 0.6 Critical point for gear shift 0.4 15 gears 0.2 Critical point for gear shift 12 / 35 21 gears 1 / 7

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

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

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

[0199] If the zoom factor of the small gear is represented by a1, the zoom factor of the large gear is represented by a2, and the critical point for switching from the large gear to the small gear is represented by a5, then the critical point a5 for switching gears can be calculated by the following relational expression (7):

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

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

[0202] Table 2

[0203] - Zoom 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

[0204] Taking k1 = 0.25 as an example. As shown in Table 3, according to the above relational expression (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.

[0205] Table 3

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

[0207] It should be noted that the above gears and the zoom factors 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 point for switching gears is only an exemplary illustration. In actual implementation, other methods can also be used to use other zoom factors between the zoom factor a1 of the small gear and the zoom factor a2 of the large gear as the critical point for switching between these two adjacent gears.

[0208] 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 as shown in Figure 2The photo album page shown in (a) has the current gear position as gear 5, and scale1 = 0.6. When the distance between the two fingers increases, the next gear position is gear 3, and the critical point a2 for switching from gear 5 to gear 3 is 0.8. For another example, when the current gear position is gear 5 and the distance between the two fingers decreases, the next gear position is gear 15, and the critical point a1 for switching from gear 5 to gear 15 is 0.4. It should be noted that in C8 - C11, if i = 2 and the current two - finger movement operation is the first movement operation after the two - finger press, the pinch - zoom gesture detector can calculate the zoom factor Si of this cycle, and use the zoom factor (such as 0.6) of the gear position when the two fingers are pressed as the zoom factor of the previous cycle.

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

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

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

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

[0213] C14, the pinch - zoom gesture detector determines not to switch gears.

[0214] Taking the pinch - zoom gesture detector maintaining gear 5 as an example, if the user raises the two fingers, regardless of whether the zoom factor 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 - column images are aligned with the left and right edges of the screen.

[0215] C15, the pinch - zoom gesture detector determines to switch gears.

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

[0217] The difference between C14 and C15 above is as follows: If the user raises their hand after it is determined that the gear is not switched, the image of the original gear will be kept displayed on the screen; if the user raises their hand after it is determined that the gear is switched, the image of the new gear will be displayed on the screen.

[0218] As a first optional implementation, after C15, C16 can be executed first, and then C17.

[0219] C16, the pinch gesture detector notifies the custom RecyclerView to refresh the content corresponding to the ItemView of the next gear based on the center of the two fingers.

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

[0221] C17, the pinch gesture detector notifies the custom RecyclerView to perform zoom display based on the zoom factor Si.

[0222] C18, the touch driver receives the two-finger raising operation of the user, and notifies the pinch gesture detector of the raising event through the WMS and ReceiveTouchView.

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

[0224] C19, the pinch gesture detector determines the zoom factor corresponding to the gear before raising the hand, and notifies the custom RecyclerView to perform zoom display based on the zoom factor corresponding to the gear before raising the hand, finally aligning the left and right edges of the grid interface with the left and right edges of the screen.

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

[0226] In the above method, the size of the ReceiveTouchView is the same as the size of the screen. In the zoom scenario, the ReceiveTouchView receives the two-finger operation of the user, thus solving the functional problem and scalability problem of the RecyclerView control directly receiving click events. In addition, during the process from pressing the two fingers to raising the two fingers, the mobile phone can periodically collect touch operations, calculate the zoom factor 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 the two fingers leaving the screen, the user can trigger the electronic device to switch back and forth between any gears through continuous zoom operations, improving the operation experience when viewing the album page.

[0227] It can be understood that zooming the album will change the number of columns of images displayed on the screen, thus possibly resulting in a situation where the order of the images displayed on the screen after zooming is not continuous. For example, the screen display interface before zooming is as Figure 11As shown in (a) therein, the number of image columns displayed thereon is 5 columns, and the actual layout position index LP is arranged in the order of 1, 2, 3, 4... The actual adaptation position index AP is also arranged in the order of 1, 2, 3, 4... It should be understood that the AP value of the grid corresponds to the order of the images displayed in the grid in the album. For example, image 1 refers to the first image in the album, image 2 refers to the second image in the album, image 3 refers to the third image in the album, image 4 refers to the fourth image in the album... The first image in the album is displayed in the grid with an AP value of 1, the second image in the album is displayed in the grid with an AP value of 2, the third image in the album is displayed in the grid with an AP value of 3, and the fourth image in the album is displayed in the grid with an AP value of 4...

[0228] After receiving the two-finger zoom-in operation of the user, the number of image columns displayed on the screen switches from 5 columns to 3 columns, and the images displayed on the screen may be discontinuous.

[0229] The user presses two fingers on the display interface as shown in (a) in Figure 11 The center of the two fingers is the grid with an AP value of 8, and then the user starts to perform a zoom-in operation on the display interface as shown in (a) in Figure 11 After zooming in, the number of image columns displayed on the screen is reduced to 3 columns. In a possible case, the display interface after zooming in is as shown in Figure 11As shown in (b) of , the left two columns of images are not displayed on the screen, that is, the grid cells with AP value of 0, the grid cells with AP value of 1, the grid cells with AP value of 5, the grid cells with AP value of 6, the grid cells with AP value of 10, the grid cells with AP value of 11... the grid cells with AP value of 45, the grid cells with AP value of 46 are not displayed on the screen. Only the grid cells with AP value of 2, the grid cells with AP value of 3, the grid cells with AP value of 4, the grid cells with AP value of 7, the grid cells with AP value of 8, the grid cells with AP value of 12, the grid cells with AP value of 13, the grid cells with AP value of 14... the grid cells with AP value of 27, the grid cells with AP value of 28 and the grid cells with AP value of 29 are displayed on the screen. Correspondingly, only the second image in the album, the third image in the album, the fourth image in the album, the seventh image in the album, the eighth image in the album, the ninth image in the album, the twelfth image in the album, the thirteenth image in the album, the fourteenth image in the album... the twenty-seventh image in the album, the twenty-eighth image in the album and the twenty-ninth image in the album are displayed on the screen. This is equivalent to that the fifth image and the sixth image in the album between the fourth image and the seventh image in the album are not displayed, the tenth image and the eleventh image in the album between the ninth image and the twelfth image in the album are not displayed on the screen... the twenty-fifth image and the twenty-sixth image in the album between the twenty-fourth image and the twenty-seventh image in the album are not displayed on the screen, that is, the images displayed on the screen are not continuous.

[0230] In view of this, in order to display the images in sequence and continuously after zooming and improve the user experience, the AP values of the grids displayed on the screen can be adjusted through Figure 12 the embodiments shown in so that the images displayed on the screen are displayed in sequence and continuously.

[0231] Exemplarily, Figure 12 shows a flowchart of the method for refreshing the AP value.

[0232] D1, in response to the zoom operation, determine the center of the two fingers, 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.

[0233] Among them, the center of the two fingers can refer to the center of the two coordinate points when the user first presses the two fingers on the screen.

[0234] For example, when the user first places two fingers on the screen, the two coordinates are (200, 200) and (800, 1000) respectively. The X-axis value of the coordinates of the center of the two fingers can be obtained by adding and averaging the X-axis values of the above two coordinates, resulting in (200 + 800) / 2 = 500. The X-axis value of the coordinates of the center of the two fingers can be obtained by adding and averaging the Y-axis values of the above two coordinates, resulting in (200 + 1000) / 2 = 600. That is, the coordinates of the center of the two fingers are (500, 600).

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

[0236] Among them, the ItemView selected by the center of the two fingers refers to the ItemView where the coordinates of the center of the two fingers are located.

[0237] It can be understood that the LP value and the AP value of the center of the two fingers can be the same or different.

[0238] For example, assume that the maximum gear of the RecyclerView is 5 gears, and the width and height of each ItemView are equal to the width of the screen divided by 3, that is, the minimum gear is 3 gears. As Figure 7 shown in (a) below, before receiving the two-finger zoom-in operation of the user, the RecyclerView actually displayed on the screen is reduced to be equal to the screen size, and the actual layout position index LP value in each grid is the same as the actual adaptation position index AP value in that grid.

[0239] Another example, in response to the two-finger distance zoom-in operation, the mobile phone zooms in on the entire RecyclerView with the center of the two fingers as the center. The ItemView displayed on the screen is updated to 3 columns, and it is necessary to re-number the actual adaptation position index AP corresponding to the ItemView in these 3 columns. At this time, the actual layout position index LP value in each grid is different from the actual adaptation position index AP value in that grid. Exemplarily, as Figure 7 shown in (b) below, the grid of the LP value is 12, and the AP value corresponding to this grid is 10.

[0240] After determining the center of the two fingers, the electronic device can read the LP value and the AP value of the grid where the center of the two fingers is located from the memory.

[0241] Then, the following steps can be performed for each ItemView in the custom RecyclerView:

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

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

[0244] LineNum = LP % maxShowSpan + 1.

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

[0246] Optionally, determine the number of rows of the grid to be adjusted.

[0247] The number of rows of the grid to be adjusted can be obtained by obtained.

[0248] Among them, lp1 is the LP value of the grid to be adjusted, and L represents the total number of columns of the custom RecyclerView.

[0249] For example, the number of rows of the grid with an LP value of 29 can be determined by to be the 6th row.

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

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

[0252] If Index1 ≤ LineNum ≤ Index2 is satisfied, the number of columns of the grid is the number of columns displayed on the screen.

[0253] Exemplarily, as Figure 13 shown, the maximum gear of the RecyclerView is 5 gears, which is equivalent to the RecyclerView showing at most 5 columns of images. From left to right, they are the 1st column, the 2nd column, the 3rd column, the 4th column, and the 5th column. The first column of the display area of the next gear has a column number Index1 of 3 in the custom RecyclerView, and the last column of the display area of the next gear has a column number Index2 of 5 in the custom RecyclerView. Among them, for the grids in the 3rd column, 4th column, and 5th column, if LineNum satisfies Index1 ≤ LineNum ≤ Index2, then the 3rd column, 4th column, and 5th column are the columns displayed on the screen.

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

[0255] If Index1 ≤ LineNum ≤ Index2 is not satisfied, the column number where the grid cell is located is not the column number displayed on the screen.

[0256] Continue as Figure 13 shown, the lineNum of the grid cells in the 1st column and the 2nd column does not satisfy Index1 ≤ LineNum ≤ Index2, so the 1st column and the 2nd column are not the column numbers displayed on the screen.

[0257] If the LineNum of the grid cell ≤ Index1, the column number where the grid cell is located is less than the column number of the first column of the display area of the next gear position in the custom RecyclerView, that is to say, the column number where the grid cell is located is the column number not displayed on the left side of the screen. The column number not displayed on the left side of the screen can be called leftPlaceHolder.

[0258] If Index2 ≤ LineNum, the column number where the grid cell is located is greater than the column number of the last column of the display area of the next gear position in the custom RecyclerView, that is to say, the column number where the grid cell is located is the column number not displayed on the right side of the screen. The column number not displayed on the right side of the screen can be called rightPlaceHolder.

[0259] Optionally, based on the row number rowNum of the grid cell to be adjusted and the row numbers not displayed on the screen, determine whether the grid cell to be adjusted is displayed on the screen.

[0260] If the grid cell to be adjusted is not displayed on the screen, execute D8.

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

[0262] If LP ≤ selectLP is satisfied, execute D6.

[0263] If LP ≤ selectLP is not satisfied, execute D7.

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

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

[0266]

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

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

[0269]

[0270] Set the AP value to -1 for D8.

[0271] Among them, AP = -1 indicates that the actual adaptation position value is invalid. At this moment, an ItemView can display a blank image or maintain the display of the image as Figure 7 shown.

[0272] Exemplarily, the maximum gear of the custom RecyclerView is 5 gears, as shown in Figure 14 (a). The maximum gear of the custom RecyclerView shows 5 columns and 10 rows of grids. The maximum gear currently displayed on the screen is also 5 columns and 10 rows of grids shown on the screen. In response to the user's zoom-out operation with the LP value of the grid where the center of the two fingers is located being 8 (for example, the two fingers slide inward, and 3 columns and 6 rows of grids are shown on the screen. At this time, the columns shown on the screen are the 3rd, 4th, and 5th columns, which is equivalent to the 1st and 2nd columns not being shown on the screen. That is to say, Index1 is 3 and Index2 is 5.

[0273] Among them, the grid with LP value of 0 is in the 1st column and is not shown on the scaled screen. Therefore, set the AP value of the grid with LP value of 0 to -1 and end the process.

[0274] Exemplarily, determine the column number of the grid with LP value of 2 through LineNum = LP % maxShowSpan + 1. LineNum = (2 % 5) + 1 = 3, that is, the grid with LP value of 2 is in the 3rd column. The column number where the grid with LP value of 2 is located is 3, which satisfies Index1 ≤ LineNum ≤ Index2. Therefore, the grid with LP value of 2 is shown on the scaled screen. Therefore, it is necessary to further determine whether the LP value of this grid is less than the LP value selectLP of the center of the two fingers. As Figure 14 shown in (a), the LP value selectLP of the center of the two fingers is 8. Therefore, the LP value 2 of this grid is less than the LP value selectLP 8 of the center of the two fingers. Select the first formula to correct the AP value of the grid with LP value of 2, that is:

[0275]

[0276] Among them, selectAP represents the AP value of the center of the two fingers, specifically 8; nextshowSpan represents the number of columns displayed on the screen, specifically 3, LP represents the LP value of the grid to be adjusted, specifically 2; maxShowSPAN represents the total number of columns in the custom RecyclerView, specifically 5; selectLP represents the LP value of the center of the two fingers, specifically 8; selectlineNum represents the column number where the center of the two fingers is located, specifically 4; lineNum represents the column number where the grid to be adjusted is located, that is, the column number where the grid with LP value 2 is located, specifically 3. Substitute the above values into the first formula:

[0277]

[0278] Based on this, the AP value of the grid with LP of 2 is corrected to 4, and the 4th image in the album is displayed.

[0279] Exemplarily, through LineNum = LP % maxShowSpan + 1, determine the column number of the grid with LP value 12, lineNum = (12 % 5) + 1 = 3, that is, the grid with LP value 12 is in the 3rd column. The column number where the grid with LP value 12 is located is 3, which satisfies Index1 ≤ LineNum ≤ Index2. Therefore, the grid with LP value 12 is displayed on the scaled screen. Therefore, it is necessary to further determine whether the LP value of this grid is less than the LP value selectLP of the center of the two fingers. As Figure 14 shown in (a) of, the LP value selectLP of the center of the two fingers is 8. Therefore, the LP value 12 of this grid is not less than the LP value selectLP 8 of the center of the two fingers. Select the second formula to correct the AP value of the grid with LP value 2, that is:

[0280]

[0281] Among them, selectAP represents the AP value of the center of the two fingers, specifically 8; nextshowSpan represents the number of columns displayed on the screen, specifically 3, LP represents the LP value of the grid to be adjusted, specifically 12; maxShowSPAN represents the total number of columns in the custom RecyclerView, specifically 5; selectLP represents the LP value of the center of the two fingers, specifically 8; selectlineNum represents the column number where the center of the two fingers is located, specifically 4; lineNum represents the column number where the grid to be adjusted is located, that is, the column number where the grid with LP value 2 is located, specifically 3. Substitute the above values into the second formula:

[0282]

[0283] Based on this, the AP value of the grid with LP of 2 is corrected to 10, and the 10th image in the album is displayed.

[0284] In this way, the AP values of the grid displayed on the scaled screen are as shown in (b) of Figure 14 , and the AP values of the grid displayed on the screen are continuous. Since the AP value of the grid corresponds to the order of the images displayed in the grid in the photo album, the order of the images displayed on the screen is coherent.

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

[0286] As shown in Figure 15 , 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.

[0287] The processor 110 may be configured to execute the grid interface display 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.

[0288] 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 a function, such as a gallery application, etc. The data storage area may store configuration files of each APP and data created during the use of the electronic device 100.

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

[0290] A touch sensor, also known as a "touch panel". The touch sensor can be disposed on the display screen 150, and together with the display screen 150, they form a touch screen, also known as a "touch display screen". The touch sensor 180K is used to detect touch operations acting on or near it. The touch sensor can transmit the detected touch operations to the application processor to determine the type of touch event, and provide visual output related to the touch operation through the display screen 150. In some other embodiments, the touch sensor can also be disposed on the surface of the electronic device 100, at a different position from where the display screen 15050 is located.

[0291] An embodiment of the present application also provides a computer-readable storage medium, in which computer instructions are stored. When the computer-readable storage medium runs on a terminal device, it causes the terminal device to execute the method as shown in the above embodiments. The computer instructions can be stored in the computer-readable storage medium or transmitted from one computer-readable storage medium to another. The computer-readable storage medium can be any available medium that a computer can access 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.

[0292] An embodiment of the present application also provides a computer program product, which includes computer program code. When the computer program code runs on a terminal device, it causes the terminal device to execute the methods in the above embodiments.

[0293] An embodiment of the present application also provides a chip, which is coupled to a memory. The chip is used to read and execute the computer programs 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.

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

[0295] 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 only an association relationship describing associated objects, indicating that three relationships can exist. For example, A and / or B can mean: A exists alone, A and B exist simultaneously, and B exists alone.

[0296] 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 than two.

[0297] From the description of the above embodiments, those skilled in the art can clearly understand that, for the convenience and brevity of description, only the above division of each functional module 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.

[0298] In addition, each functional unit in each embodiment 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.

[0299] 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 display method for a grid interface, characterized in that, The method includes: Display a first grid interface based on a recycler view within the screen. The first grid interface includes grids with a first number of columns, and images are displayed in the grids. In response to a two-finger press operation of the user on the screen, determine the center of the two fingers. The center of the two fingers corresponds to a first grid in the first grid interface, and a first image is displayed in the first grid. After detecting the two-finger press operation, continue to detect a first zoom operation, and display a second grid interface based on the recycler view. The second grid interface includes grids with a second number of columns, and the second number of columns is different from the first number of columns. The first image is displayed in a second grid in the second grid interface, and the actual layout position index value of the second grid is the same as the actual layout position index value of the first grid.

2. The method according to claim 1, wherein When displaying the first grid interface, the recycler view corresponds to a first zoom factor, and when displaying the second grid interface, the recycler view corresponds to a second zoom factor, and the first zoom factor and the second zoom factor are different.

3. The method according to claim 1 or 2, characterized in that, The recycler view includes M rows and N list item views, where each list item view is used to display an image.

4. The method according to claim 3, characterized in that The actual layout position index value is used to indicate the position of the grid in the recycler view.

5. The method according to claim 4, wherein Each grid in the recycler view corresponds to an adaptation position index, and the adaptation position index is used to represent the display order of the images displayed in the grids in the recycler view.

6. The method according to claim 5, characterized in that, The method further includes: Determine the second grid based on the center of the two fingers. Based on the second grid, determine the display order of the images displayed in other grids in the second grid interface.

7. The method according to claim 6, characterized in that The determining the display order of the images displayed in other grids in the second grid interface based on the second grid includes: Based on the second grid, the number of display columns of the second grid interface, and the maximum number of display columns of the recycler view, determine a third grid and a fourth grid. The number of columns where the third grid is located is the number of columns of the recycler view displayed on the second grid interface, and the third grid does not include the second grid. The number of columns where the fourth grid is located is the number of columns of the recycler view not displayed on the second grid interface. Determine the display order of the image displayed in the third grid based on the positional relationship between the third grid and the second grid.

8. The method according to claim 7, wherein The determining the display order of the image displayed in the third grid based on the positional relationship between the third grid and the second grid includes: If the third grid is a grid displayed before the second grid, then determine the display order of the image in the third grid based on the sum of the adaptation position index value of the second grid and a first parameter, where the first parameter is determined according to the number of columns of the recycler view displayed on the second grid interface, the actual layout position index value of the second grid in the recycler view, the maximum number of columns displayed in the recycler view, the actual layout position index value of the third grid in the recycler view, the column where the second grid is located, and the column where the third grid is located. If the third grid cell is the grid cell displayed after the second grid cell, determine the display order of the images in the third grid cell based on the difference between the adaptation position index value of the second grid cell and the second parameter, where the second parameter is determined according to the number of columns of the recycler view displayed in the second grid cell interface, the actual layout position index value of the second grid cell in the recycler view, the maximum number of columns displayed in the recycler view, the actual layout position index value of the third grid cell in the recycler view, the number of columns where the second grid cell is located, and the number of columns where the third grid cell is located.

9. The method according to claim 7 or 8, characterized in that, A blank image is displayed in the fourth grid cell.

10. The method according to any one of claims 1 to 9, characterized in that, The display of the second grid cell interface based on the recycler view includes: Perform a zoom operation on the recycler view based on the center of the two fingers and the zoom factor corresponding to the first zoom operation; Display the second grid cell interface based on the zoomed recycler view.

11. The method according to any one of claims 1 to 10, characterized in that, The method is applied to an electronic device, which includes a touch event receiving layer, the recycler view, and a pinch gesture detector. The size of the touch event receiving layer is equal to the size of the screen, and the size of the recycler view is larger than the size of the screen; The display of the first grid cell interface based on the recycler view within the screen includes: In response to a user's selection operation on the album card, display the first grid cell interface based on the recycler view within the screen; The method further includes: In response to a two-finger touch operation on the grid cell interface based on the recycler view, the electronic device transmits the first two-finger coordinates to the pinch gesture detector through the touch event receiving layer; the electronic device determines the center of the two fingers through the pinch gesture detector according to the first two-finger coordinates.

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, and the computer program code includes computer instructions. The one or more processors call the computer instructions to cause the electronic device to execute the method described in any one of claims 1 to 11.

13. 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 described in any one of claims 1 to 11.

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

Images