Cross-gear scaling method and device and storage medium

Abstract

The invention provides an image interface display method, electronic equipment and a storage medium, and relates to the technical field of terminals. In the application, when the photo page or the photo album page of the gallery is displayed, the electronic equipment can respond to multiple zooming operations of a user and continuously switch and display a plurality of gears, for example, the current gear is switched to other gears through the next gear, and the column numbers of images displayed by the electronic equipment under different gears are different. Thus, a user can trigger the electronic equipment to switch back and forth between any gears through continuous zooming operation, the whole process is smoother, and the operation experience of the user when the user checks pictures in a picture library is improved.

Description

Technical Field

[0001] This application relates to the technical field of terminals, and in particular, to a cross-gear zooming method, device, and storage medium. Background Art

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

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

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

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

[0006] In a first aspect, an embodiment of this application provides an image interface display method. The method may include: displaying first content based on a first recycler view on a first interface of a first application, the first content including images with a first number of columns, and the size of the first recycler view being equal to the size of the display screen; during the process of displaying the first interface, detecting a first zoom operation; in response to the first zoom operation, displaying second content based on a second recycler view on the first interface, the second content including images with a second number of columns, the size of the second recycler view being equal to the size of the display screen, and the first number of columns being different from the second number of columns; displaying third content based on a third recycler view on a second interface of the first application, the third content including images with a third number of columns, the size of the third recycler view being greater than the size of the display screen, and the first interface and the second interface being different interfaces; during the process of displaying the second interface, detecting a second zoom operation; in response to the second operation, displaying fourth content based on the third recycler view on the second interface, the fourth content including images with a fourth number of columns, and the third number of columns being different from the fourth number of columns.

[0007] Implementing the method provided by the first aspect, the electronic device can provide different image interface display methods for the photo page (the first interface) and the album page (the second interface) of the gallery (the first application). While improving the efficiency of the user viewing images in the gallery, it can also improve the efficiency of gear switching as much as possible, reduce the power consumption of the electronic device, and at the same time improve the flexibility of the solution design. Using the native RecyclerView to implement multi-gear switching on the photo page makes the solution simpler. Since the native RecyclerView does not support zooming and the size of the native RecyclerView is always equal to the size of the screen, different recycler views correspond to different grid interfaces. The first grid interface corresponds to the first recycler view, and the second grid interface corresponds to the second recycler view, so that different numbers of columns of images can be displayed on the photo page, facilitating the user to quickly view pictures. For the album page, a custom RecyclerView is used to implement multi-gear switching. The size of the custom RecyclerView is larger than the size of the screen, so the custom RecyclerView supports zooming. Furthermore, different grid interfaces correspond to the same custom RecyclerView, thus solving the problem that the native RecyclerView measures the size and position of each grid again when switching gears and refilling the content of each grid, resulting in a long time-consuming and high-power consumption problem.

[0008] In some embodiments, the method further includes: when the second content is displayed on the first interface, detecting a third zoom operation; in response to the third zoom operation, displaying fifth content based on a fourth recycler view on the first interface, the fifth content including images with a fifth number of columns, the size of the fourth recycler view being equal to the size of the display screen, the fifth number of columns being different from the first number of columns and different from the second number of columns.

[0009] After the first zoom operation, when the user inputs a third zoom operation again, it triggers the electronic device to switch from displaying images with the second number of columns to displaying images with the fifth number of columns. In this way, through two zoom operations, different numbers of columns of images can be displayed within the first interface, facilitating the user to quickly view gallery images.

[0010] In some embodiments, the method further includes: after detecting the second zoom operation, continuing to detect a fourth zoom operation. During the detection of the second zoom operation and the fourth zoom operation, the user's finger does not leave the display screen; in response to the fourth zoom operation, displaying sixth content based on a third recycler view on the first interface, the sixth content including images with a sixth number of columns, the sixth number of columns being different from the third number of columns and different from the fourth number of columns.

[0011] After the second zoom operation, without the user lifting their two fingers off the screen, the user can continue to input a fourth zoom operation, triggering the electronic device to switch from displaying an image of the fourth column of numbers to displaying an image of the sixth column of numbers. In this way, through two consecutive zoom operations, images of different numbers of columns can be displayed within the second interface, facilitating the user to quickly view gallery images.

[0012] In some embodiments, the first zoom operation includes a two-finger approaching operation or a two-finger moving away operation on the display screen; the third zoom operation includes a two-finger approaching operation or a two-finger moving away operation on the display screen; during the detection of the first zoom operation and the third zoom operation, the user's fingers do not leave the display screen.

[0013] The zoom operation can be a zoom-in operation or a zoom-out operation. When the two fingers approach during the zoom operation, the image displayed within the first interface will decrease, so that more columns of images can be displayed in the first interface; when the two fingers move away during the zoom operation, the image displayed within the first interface will enlarge, so that fewer columns of images can be displayed in the first interface. The first zoom operation and the third zoom operation are consecutive operations, and during this process, the user's fingers do not leave the display screen, making the entire gear shift process smoother and facilitating user operation.

[0014] In some embodiments, the first zoom operation includes a two-finger approaching operation or a two-finger moving away operation on the display screen, and the third zoom operation includes a two-finger approaching operation or a two-finger moving away operation on the display screen; in response to the first zoom operation, after the second content based on the second recycler view is displayed in the first interface and before the third zoom operation is detected, a hand-lifting operation is also detected, and the hand-lifting operation is an operation where the two fingers leave the screen; in response to the hand-lifting operation, the first interface maintains the display of the second content.

[0015] There needs to be a hand-lifting operation between the first zoom operation and the third zoom operation. In this way, before the user presses their two fingers and inputs the first zoom operation until the hand-lifting operation is received, only one gear shift can be achieved, and multiple gears cannot be switched. The user needs to lift their hand and then input the second zoom gesture to trigger the next gear shift.

[0016] In some embodiments, the second zoom operation includes a two-finger approaching operation or a two-finger moving away operation on the display screen; the fourth zoom operation includes a two-finger approaching operation or a two-finger moving away operation on the display screen.

[0017] The zoom operation can be a zoom-in operation or a zoom-out operation. When the two fingers approach during the zoom operation, the image displayed within the first interface will decrease, so that more columns of images can be displayed in the second interface; when the two fingers move away during the zoom operation, the image displayed within the first interface will enlarge, so that fewer columns of images can be displayed in the second interface.

[0018] In some embodiments, the numbers in the first column, the second column, and the fifth column increase or decrease in sequence; the numbers in the third column, the fourth column, and the sixth column increase or decrease in sequence.

[0019] In some embodiments, the electronic device includes a touch drive and a touch event receiving layer module. The method further includes: in response to a first zoom operation, the touch drive sends touch coordinates to a first recycler view; in response to a second zoom operation, the touch drive sends touch coordinates to the touch event receiving layer module and does not send touch coordinates to a third recycler view; in response to a third zoom operation, the touch drive sends touch coordinates to a second recycler view.

[0020] In some embodiments, the electronic device further includes a pinch gesture detector. The method further includes: the second recycler view sends touch coordinates to the pinch gesture detector; the pinch gesture detector calculates a two-finger distance and a first zoom ratio based on the touch coordinates; determining a first value and a second value corresponding to the second column number, the first value being less than the second value; in the case where the two-finger distance decreases and the first zoom ratio is less than or equal to the first value, displaying fifth content based on a fourth recycler view on a first interface; in the case where the two-finger distance increases and the first zoom ratio is greater than or equal to the second value, displaying first content based on a first recycler view on the first interface.

[0021] In some embodiments, the electronic device further includes a pinch gesture detector. The method further includes: the touch event receiving layer module sends touch coordinates to the pinch gesture detector; the pinch gesture detector calculates a second zoom ratio based on the touch coordinates; determining a third value and a fourth value corresponding to the fourth column number, the third value being less than the fourth value; in the case where the second zoom ratio decreases and the second zoom ratio is less than or equal to the third value, displaying sixth content based on a third recycler view on a first interface; in the case where the second zoom ratio increases and the second zoom ratio is greater than or equal to the fourth value, displaying third content based on the third recycler view on the first interface.

[0022] In some embodiments, before the pinch gesture detector calculates the first zoom ratio based on the touch coordinates, the method further includes: the pinch gesture detector determines that the distance between the two fingers is less than a first threshold. By determining that the distance between the two fingers is less than the first threshold, it is determined that this operation is valid.

[0023] In some embodiments, before the pinch gesture detector calculates the second zoom ratio based on the touch coordinates, the method further includes: the pinch gesture detector determines that the distance between the two fingers is less than the first threshold based on the touch coordinates.

[0024] In some embodiments, the zoom ratio of the first recycler view is 1, the zoom ratio of the second recycler view is 1, and the zoom ratio of the fourth recycler view is 1.

[0025] In some embodiments, the zoom factors of the third recycler view when displaying the third content, the third recycler when displaying the fourth content, and the third recycler view when displaying the sixth content are all different.

[0026] In some embodiments, the zoom factor of the third recycler view when displaying the third content, the zoom factor of the third recycler when displaying the fourth content, and the zoom factor of the third recycler view when displaying the sixth content increase in sequence; or, the zoom factor of the third recycler view when displaying the third content, the zoom factor of the third recycler when displaying the fourth content, and the zoom factor of the third recycler view when displaying the sixth content decrease in sequence. The third recycler view can be zoomed and can correspond to different zoom factors.

[0027] In some embodiments, the method further includes: after the first application is launched, creating a first recycler view, creating a second recycler view, creating a third recycler view, and creating a fourth recycler view.

[0028] In a second aspect, the present application provides an electronic 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 electronic device executes the cross-gear zoom method provided in any one of the first aspect.

[0029] In a third aspect, the present application provides a computer-readable storage medium. The computer-readable storage medium includes computer instructions. When the computer instructions run on the electronic device, the electronic device executes the cross-gear zoom method provided in the first aspect and any possible implementation manner thereof.

[0030] In a fourth aspect, the present application provides a computer program product. When the computer program product runs on a computer, the computer executes the cross-gear zoom method provided in the first aspect and any possible implementation manner thereof.

[0031] In a fifth aspect, the present application provides a chip system. The chip system includes one or more interface circuits and one or more processors. The interface circuits and the processors are interconnected by lines. The chip system can be applied to an electronic device including a communication module and a memory. The interface circuit is used to receive a signal from the memory of the electronic device and send the received signal to the processor, and the signal includes the computer instructions stored in the memory. When the processor calls the computer instructions, the electronic device can execute the cross-gear zoom method provided in the first aspect and any possible implementation manner thereof.

[0032] It can be understood that for the beneficial effects that can be achieved by the electronic device in the second aspect, the computer-readable storage medium in the third aspect, the computer program product in the fourth aspect, and the chip system in the fifth aspect provided above, reference can be made to the beneficial effects in the first aspect and any of its possible implementation manners, which will not be elaborated herein. Description of the Drawings

[0033] Figure 1 Schematic diagram of a mobile phone album page and a photo page provided by an embodiment of the present application;

[0034] Figure 2 Schematic diagram of a scenario where a mobile phone scrolls and displays images on an album page provided by an embodiment of the present application;

[0035] Figure 3 Schematic diagram of a scenario where a mobile phone zooms and displays images on an album page provided by an embodiment of the present application;

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

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

[0038] Figure 6 Schematic diagram of a scenario where a mobile phone zooms and displays images on a photo page provided by an embodiment of the present application;

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

[0040] Figure 8 Schematic diagram of two native RecyclerViews provided for a photo page by an embodiment of the present application;

[0041] Figure 9 Schematic diagram of a custom RecyclerView provided for an album page by an embodiment of the present application;

[0042] Figures 10A to 10D Schematic diagram of RecyclerViews at different levels and display areas provided by an embodiment of the present application;

[0043] Figure 11 Software architecture diagram of an electronic device provided by an embodiment of the present application;

[0044] Figure 12 Flowchart of a per-gear image zooming scheme based on a native RecyclerView provided by an embodiment of the present application;

[0045] Figure 13 It is a flowchart of another per-gear image scaling solution based on the native RecyclerView provided by the embodiments of the present application;

[0046] Figure 14 It is a flowchart of the cross-gear scaling solution based on the custom RecyclerView provided by the embodiments of the present application that will expire in advance;

[0047] Figure 15 It is a flowchart of the cross-gear scaling solution based on the custom RecyclerView provided by the embodiments of the present application that will not expire in advance;

[0048] Figure 16 It is a schematic diagram of the hardware structure of an electronic device provided by the embodiments of the present application. Detailed implementation manners

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

[0050] Currently, the gallery application supports multiple image display modes. The gallery application supports displaying images in a grid form on the album page, and the gallery application also supports displaying images in the album by date on the photo page. The album page and the photo page will be introduced below respectively.

[0051] Exemplarily, as shown in (a) of Figure 1 , the mobile phone displays icons of applications such as the gallery on the desktop. When the user wants to view an image, the user can click the icon 01 of the gallery. In response to the user's click operation on the icon 01 of the gallery, the mobile phone displays a card page as shown in (b) of Figure 1 . The card page includes multiple areas: the status bar provides power and signal strength indicators, the action bar provides photos and a search box, the foot bar provides photos, albums, memories, and creations, and other areas except these areas provide album cards such as the camera, all photos, and videos. Among them, the album card is also called the photo album card, and each album card can correspond to an entry of an album. The user can select an album card from these album cards. For example, as shown in (b) of Figure 1 , the user can click the "camera" card 02. In response to the user's click operation on the "camera" card 02, the mobile phone displays as shown in Figure 1The photo album page shown in (c) therein. The photo album page includes a plurality of square grids 03, so it is also called a grid page. Each grid 03 is respectively used to display an image, and an image corresponds to a picture or a video. The user can trigger the mobile phone to display more images of the photo album page through an up and down sliding operation.

[0052] Exemplarily, as Figure 1 shown in (d) therein, the user can click on the photo control 07 at the bottom bar. In response to the click operation on the photo control 07, the mobile phone displays a photo page as shown in Figure 1 (e) therein. The photo page includes a plurality of daily titles 08, and each daily title 08 indicates a date, such as "2023.11.18", "2023.11.10" or "2023.11.08". In the area below each daily title 08, all the images obtained on this date can be displayed in the form of a 4-column grid, and each grid is respectively used to display an image.

[0053] After the electronic device displays the photo album page or the photo page, the user can view more images through a sliding operation. Exemplarily, as Figure 2 shown in (c) therein, taking the photo album page as an example, the user can press and hold the image 455 with a single finger without releasing. As Figure 1 shown in (d) therein, start to slide down with a single finger. If the single finger slides down a distance d1, in response to the user's sliding operation, as Figure 1 shown in (e) therein, the photo album page slides down following the finger by a distance d1. The user can continue to press and hold the image 455 and slide down a distance d2. In response to the user's sliding operation, as Figure 1 shown in (f) therein, the photo album page slides down following the finger by a distance d2. Generally, the sliding distance of the follow-the-finger sliding operation is equal to the distance that the photo album page scrolls down. The longer the sliding distance of the follow-the-finger sliding operation, the more content the photo album page scrolls down to display. In the above embodiment, the mobile phone supports displaying more images in response to a single-finger sliding operation in the photo album page. However, when there are many photos and videos in the photo album page, the user may need to perform multiple single-finger sliding operations to find the image they want to view. This process is inconvenient to operate and may affect the user's operation experience.

[0054] To facilitate users to quickly view images in the gallery, this application provides an image interface display. Users can trigger the gallery page of the electronic device to switch and display images with different numbers of columns through a pinch gesture, enabling users to quickly view more images and find the target image more quickly. In one implementation, this application supports cross-gear zooming for both the album page and the photo page. On the album page and the photo page, users can view images in multiple gears through continuous pinch gestures, facilitating user operation. In one implementation, this application provides a per-gear zooming scheme for the photo page and a cross-gear zooming scheme for the album page, which can not only facilitate users to quickly view images but also further improve the smoothness of switching gears and displaying images on the photo page. The concepts of "gear", "per-gear zooming", and "cross-gear zooming" in this application are introduced below.

[0055] For the photo page and the album page, the electronic device has pre-set multiple gears respectively. The gear settings for the photo page and the album page can be the same or different. Among them, "gear" can be understood as the number of columns of images displayed on the screen. Taking the album page as an example, the electronic device has pre-set for the album page: 3 gears, 5 gears, 15 gears, and 21 gears. Among them, 3 gears is the minimum gear for the album page, and 21 gears is the maximum gear for the album page. When the gear is 3 gears, the corresponding number of columns of images displayed on the screen is 3 columns; when the gear is 5 gears, the corresponding number of columns of images displayed on the screen is 5 columns; when the gear is 15 gears, the corresponding number of columns of images displayed on the screen is 15 columns; when the gear is 21 gears, the corresponding number of columns of images displayed on the screen is 21 columns. The number of gears set for the album page of the electronic device in this application is not limited, and in practice, there can be more gears or fewer gears.

[0056] Users can change the number of columns of images on the photo page or album page displayed on the screen through a two-finger zoom operation. As an example, users can trigger the electronic device to increase the number of columns of images on the photo page or album page displayed on the screen by reducing the distance between the two fingers. As another example, users can trigger the electronic device to reduce the number of columns of images on the photo page or album page displayed on the screen by increasing the distance between the two fingers. If the user sets the album page to 21 gears through a zoom operation, the electronic device will always keep displaying 21 columns of images until the next two-finger operation is detected.

[0057] One zoom operation is used to trigger the display interface of the electronic device to switch from one gear to another, for example, from 3 gears to 5 gears. In response to detecting a pinch gesture, the electronic device can switch from displaying grid images with the first number of columns to displaying grid images with the second number of columns, where the first number of columns is different from the second number of columns. The zoom operation can be understood as an operation where the user's two fingers approach or move away from each other on the display screen of the electronic device.

[0058] Among them, "step-by-step zoom" means that after the user presses two fingers and before the two fingers leave the screen, when the user increases or decreases the distance between the two fingers on the screen, the electronic device can switch from the current gear to the next gear, that is, from the time when the user presses two fingers to the time when the two fingers leave the screen, only one gear can be switched during this period. 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 be switched from 5 columns to 15 columns. After switching to 15 columns, if the distance between the two fingers is further decreased, the screen will not be triggered to switch from 15 columns to 21 columns.

[0059] "Cross-gear zoom" 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, from the time when the user presses two fingers to the time when the two fingers leave the screen, multiple gears can be switched during this period. 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 be switched from 5 columns to 15 columns. After switching to 15 columns, as the distance between the two fingers continues to decrease, the number of image columns displayed on the screen can be switched from 15 columns to 21 columns.

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

[0061] Next, taking the electronic device as a mobile phone as an example, in combination with Figures 3 to 7, the usage scenarios of the photo gallery application are illustrated by examples.

[0062] In some embodiments, the mobile phone supports zooming in and out to display images in response to a two-finger operation on the photo album page.

[0063] Exemplarily, Figures 3 to 5 A schematic diagram of the scenario where the mobile phone zooms in and out to display images on the photo album page is shown.

[0064] Figures 3 to 5 Taking the preset gears of the photo album page as 3 gears, 5 gears, 15 gears, and 21 gears in sequence as an example for illustration, which does not limit the present application. In actual implementation, the gears of the photo 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 photo album page. The 1st gear is the smallest gear, and the 31st gear is the largest gear. The user can trigger the mobile phone to switch between these six gears through a two-finger zoom operation.

[0065] As an example, after the user clicks on the "Camera" card 02 shown in (b) of Figure 1 , the mobile phone displays the photo album page shown in (a) of Figure 3 . The photo album page consists of 5-column grids, and the side length h1 of each grid is equal to the screen width divided by 5. Each grid is used to display an image respectively. The user can press two fingers on the photo album page shown in (a) of Figure 3 . At this moment, the distance between the two fingers is d3. As shown in (b) of Figure 3 , when the distance between the two fingers decreases from d3 to d4, the photo album page switches to 15-column grids, and the side length of each grid 04 is h2, and h2 is equal to the screen width divided by 15. As shown in (c) of Figure 3 , when the distance between the two fingers decreases from d4 to d5, the photo album page switches to 21-column grids, and the side length of each grid 05 is h3, and h3 is equal to the screen width divided by 21. As shown in (d) of Figure 3 , when the user raises the hand, the photo album page remains displaying 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 zooming of the photo album page.

[0066] As another example, the mobile phone displays the photo album page shown in (a) of Figure 4 . The photo album page consists of 15-column grids, and the side length of each grid is h2. The user can press two fingers on the photo album page shown in (b) of Figure 4 . At this moment, the distance between the two fingers is d6. As shown in (c) of Figure 4 , when the distance between the two fingers increases from d6 to d7, the photo album page switches to 5-column grids, and the side length of each grid 06 is h1, and h1 is equal to the screen width divided by 5. As shown in (d) of Figure 4As shown in (c) thereof, when the distance between two fingers increases from d7 to d8, for example, the photo album page switches to a three-column grid, and the side length of each grid 07 is h4, where h4 is equal to the screen width divided by three. As Figure 4 As shown in (c) thereof, the user continues to increase the distance between two fingers to d8, and the photo album page remains showing three columns of images. As Figure 4 As shown in (d) thereof, after the distance between two fingers increases to d8, the user raises the hand, and the photo album page remains showing three columns of images. That is to say, after the mobile phone switches from the fifth gear to the minimum gear (third gear), the photo album page remains in the third gear.

[0067] As another example, after the user clicks on the "Camera" card 02 as shown in (b) of Figure 1 the mobile phone displays the photo album page as shown in (a) of Figure 5 The photo album page consists of five columns of grids, and the side length of each grid is h1. The user can press two fingers on the photo album page as shown in (a) of Figure 5 At this moment, the distance between the two fingers is d9. As Figure 5 As shown in (b) thereof, when the distance between two fingers increases from d9 to d10, the photo album page switches to a three-column grid, and the side length of each grid 06 is h4, where h4 is equal to the screen width divided by three. As Figure 5 As shown in (c) thereof, when the distance between two fingers increases to d11, the photo album page includes three columns of images with incomplete edge image content, and the height of each grid is h5, where h5 > h4. Figure 5 As shown in (d) thereof, when the user raises the hand, the photo album page rebounds to three columns of images, and the left and right edges of the three 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 fifth gear to the minimum gear (third gear), it can continue to zoom in response to the user operation without triggering gear switching, and will finally rebound to the minimum gear (third gear) after the user raises the hand.

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

[0069] Exemplarily, Figure 6 and Figure 7 show a schematic diagram of a scenario where the mobile phone zooms in and out of the displayed image on the photo page.

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

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

[0072] In some other embodiments, from Figure 6 (d) to Figure 7During the process of (c), the user's two fingers do not need to leave the screen, that is, it can be achieved through two consecutive pinch gestures. In response to a pinch gesture, the image switches from 4 columns to 8 columns. Without the user's two fingers leaving the screen, a second pinch gesture is continuously detected. In response to the second pinch gesture, the image switches from 8 columns to 15 columns. That is to say, on the premise that the user's two fingers do not leave the screen, the mobile phone realizes cross-gear zooming on the photo page. In some other embodiments, the mobile phone also supports single-finger operation to scroll and display images on the photo page. For the specific description of the mobile phone's single-finger operation to scroll and display images on the album page, it will not be elaborated here.

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

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

[0075] Next, taking an electronic device using the Android operating system as an example, the per-gear zooming solution for the photo page and the cross-gear zooming solution for the album page provided by this application will be described.

[0076] In an electronic device using the Android operating system, the gallery application can implement interface display based on the native RecyclerView (RV). In the native logic of the Android system, the native RecyclerView supports scrolling up and down for display, but does not support zooming. The size of the native RecyclerView is always equal to the size of the screen. Based on this, the electronic device can set a native RecyclerView for each gear on the photo page, so as to realize multi-gear switching on the photo page, and using the native RecyclerView makes the overall implementation solution simpler. The size of each native RecyclerView is always equal to the size of the screen. When the user reduces or increases the distance between the two fingers, the mobile phone can re-determine the gear to be switched, measure the size and position of each grid, and refill the content of each grid, thus realizing the zooming of the album interface.

[0077] For the photo page, the number of pre-set gears on the mobile phone is equal to the number of native RecyclerViews, that is, each gear corresponds to a native RecyclerView. Switching gears on the mobile phone can be understood as switching from one native RecyclerView to another. Assume that the pre-set gears on the mobile phone include at least 4 gears and 8 gears, and there are at least two native RecyclerViews set in the mobile phone. As Figure 8 shown in (a) of Figure 7 , both the RecyclerView1 and the screen have a size of 1200 pixels in width and 2800 pixels in height, and RecyclerView1 supports displaying 4-column grid images. As shown in (b) of Figure 7 , both the RecyclerView2 and the screen have a size of 1200 pixels in width and 2800 pixels in height, and RecyclerView2 supports displaying 8-column grid images. In addition, when sending RecyclerView1 and RecyclerView2 to the screen for display, the mobile phone usually overlays other layers on RecyclerView1 and RecyclerView2 according to the preset transparency, such as the status bar layer, the activity bar layer, and the bottom bar layer, etc. It should be understood that when the pre-set gears on the mobile phone include 4 gears, 8 gears, and 15 gears, there are at least three native RecyclerViews set in the mobile phone. In this case, in addition to setting RecyclerView1 and RecyclerView2 in the mobile phone, it may also include RecyclerView3, and RecyclerView3 includes 15-column grid images.

[0078] For the photo page, different native RecyclerViews need to be set for different gears to achieve gear switching, which makes the overall solution easier to implement based on the native RecyclerView. However, this also leads to the problem that every time a cross-gear zoom is performed on the photo page, such as switching from gear 4 to gear 8, the mobile phone needs to re-determine the gear to be switched, measure the size and position of each grid cell, and refill the content of each grid cell, resulting in a long time-consuming and high-power consumption process. For the album page, the present application provides a custom RecyclerView. The size of the custom RecyclerView control is larger than the size of the screen. For example, the screen size is 1200 pixels wide * 2800 pixels high, and the size of the custom RecyclerView control is 8400 pixels wide * 20000 pixels high. The custom RecyclerView can be regarded as a container for displaying images. When the user swipes their finger up and down on the gallery interface, the custom RecyclerView displayed on the screen will also scroll up and down accordingly; or when the user performs a zoom operation on the gallery interface, the custom RecyclerView displayed on the screen will also be enlarged or reduced accordingly, thus solving the problem of re-measuring the size and position of each grid cell and refilling the content of each grid cell when switching gears, resulting in a long time-consuming and high-power consumption problem.

[0079] The present application provides two different cross-gear zooming schemes for the photo page and the album page, which not only improve the efficiency of the user viewing images in the gallery but also can improve the gear switching efficiency as much as possible and reduce the power consumption of the electronic device.

[0080] Exemplarily, Figure 9 The schematic diagram of the custom RecyclerView set for the album page is shown.

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

[0082] As Figure 9 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.

[0083] It should be noted that Figure 9The 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 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 smaller-sized images; when the user increases the distance between 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 larger-sized images.

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

[0085] 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 pixels wide * 2800 pixels high, the original size of the custom RecyclerView is 8400 pixels wide * 20000 pixels high, and the original size of each ItemView in the custom RecyclerView is 400 pixels wide * 400 pixels high.

[0086] The other is the actual display size of the custom RecyclerView. Since the number of columns of ItemView displayed on the screen is different when the number of columns included in the display area of the custom RecyclerView is different, it is necessary to multiply a scaling factor on the basis of the original size of the custom RecyclerView to obtain a reduced display size, and then send the reduced custom RecyclerView to the screen. For example, when the current gear is N and the minimum gear is M, and the original size of the custom RecyclerView is (x, y), then the display size of the custom RecyclerView at the current gear is (x * M / N, y * M / N). Wherein, x represents the original width of the custom RecyclerView, y represents the original height of the custom RecyclerView, and M / N represents the scaling factor.

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

[0088] Exemplarily, Figures 10A to 10D A schematic diagram showing the relationship between the custom RecyclerView and the screen at different gears is shown.

[0089] Assume that the size of the mobile phone screen is 1200 in width * 2800 in height pixels, and the size of the custom RecyclerView is 8400 in width * 20000 in height pixels. The custom RecyclerView includes 21 columns * 50 rows = 1050 grids, and the size of each grid is 400 in width * 400 in height pixels. For the display area of the custom RecyclerView, the mobile phone has preset 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.

[0090] As Figure 10A shown, when the display area of the custom RecyclerView includes 3 columns * 7 rows = 21 grids. The original size of the display area is equal to the size of the screen, 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 custom RecyclerView by the zoom factor 1.0). At this moment, the actual display size of each ItemView in the custom RecyclerView on the screen is 400 in width * 400 in height pixels.

[0091] As Figure 10B 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, and the display area of the custom RecyclerView can be multiplied by the zoom factor 0.6 and then sent to the screen. At this moment, the actual display size of each ItemView in the custom RecyclerView on the screen is 240 in width * 240 in height pixels.

[0092] As Figure 10C 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, and the display area of the custom RecyclerView can be multiplied by the zoom factor 0.2 and then sent to the screen. At this moment, the actual display size of each ItemView in the custom RecyclerView on the screen is 80 in width * 80 in height pixels.

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

[0094] It should be noted that in Figures 10A to 10D , 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 cells 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, the action bar layer, etc. above the cells according to the preset transparency, so that the cells covered by the status bar layer and the action bar layer are in a completely invisible state or an incompletely visible state. It can be understood that in actual implementation, the action bar and / or the status bar can also be removed so that all cells are in a completely visible state. This application does not make specific limitations.

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

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

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

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

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

[0100] If a single-finger touch operation is detected, the ReceiveTouchView control will pass 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.

[0101] If a two-finger touch operation is detected, the ReceiveTouchView control will pass the two-finger touch data to the pinch gesture detector. The pinch gesture detector can execute the image interface display method 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.

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

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

[0104] The system library can include multiple functional modules, such as the surface manager, media libraries, the 2D (two-dimensional) graphics engine (e.g., SGL), the 3D (three-dimensional) 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 the Java language needs to call, and the other part is the core library of Android. The application layer and the application framework layer run in the virtual machine.

[0105] The kernel layer is the layer between the hardware and the 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.

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

[0107] Referring to the operations of the above embodiments, the gallery application supports both displaying all images on the photo page and classifying and displaying images in the form of albums on the album page. For these two display methods, this application respectively provides a per-gear image scaling scheme based on the native RecyclerView and a cross-gear image scaling scheme based on the custom RecyclerView.

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

[0109] Example 1

[0110] Referring to the description of the above embodiments, the photo page includes titles and grids corresponding to each title. During the process of switching gears, the size of the titles remains unchanged, the size of the grids changes, and the scaling of the titles and grids is not synchronized. Based on this, the electronic device can set a native RecyclerView for each gear of the photo page respectively. The size of each native RecyclerView is equal to the size of the screen.

[0111] For the photo page (the first interface), taking a mobile phone with 4 gears, 8 gears, and 15 gears preset and the size of the screen being 1200 in width * 2800 in height pixels as an example, Figure 12 The flowchart of the per-gear image scaling scheme based on the native RecyclerView is shown.

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

[0113] The above cycle, also known as the control cycle or reporting cycle, is the cycle for the touch drive to collect the user's touch operations.

[0114] Taking the touch drive collecting 240 times per second as an example. The cycle T = 1 / 240 = 4.16ms, that is, the touch drive collects touch data every 4.16ms. If in a certain cycle, 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.

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

[0116] Exemplarily, when the user wants to view an image, the user can click on the gallery icon 01 as shown in (a) of Figure 1 . The touch drive receives the user's click operation on the gallery icon 01 and passes the click operation to the application processor. The application processor starts the gallery application. The gallery application initializes the native RecyclerView and pinch gesture detector, etc. Among them, the native RecyclerView includes RecyclerView1 (the first recycler view), RecyclerView2 (the second recycler view), and RecyclerView3 (the fourth recycler view). The sizes of RecyclerView1, RecyclerView2, and RecyclerView3 are equal to the screen size, such as 1200 in width * 2800 in height pixels. RecyclerView1 is the daily title and supports displaying 4 columns (the first column number) of images. RecyclerView2 is the monthly title and supports displaying 8 columns (the second column number) of images. RecyclerView3 is the annual title and supports displaying 15 columns (the third column number) of images.

[0117] A3, after the initialization is completed, the gallery application determines to display the photo page based on RecyclerView1 and notifies the WMS. For example, the mobile phone can display the photo interface based on RecyclerView1 as shown in (a) of Figure 8 . At this time, the content displayed on the photo interface can be the first content. Correspondingly, the WMS determines that RecyclerView1 is the layer for processing the zoom event.

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

[0119] A4. The touch driver detects the user's two-finger press operation and transfers the coordinates (200, 200) and (800, 1000) when the two fingers are pressed to the WMS. The WMS transfers the coordinates (200, 200) and (800, 1000) to RecyclerView1.

[0120] Among them, the coordinates (200, 200) and (800, 1000) are pixel coordinates. At this time, the distance d1 between the two fingers is 1000.

[0121]

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

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

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

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

[0126] Among them,

[0127] Since the scaling factor s1 = 1, the scaled distance D1 = 1000 pixels calculated based on the coordinates (200, 200) and (800, 1000) is the real two-finger distance d1.

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

[0129] Generally, the distance between two fingers is greater than or equal to 27 mm. When the distance between the two fingers is less than 27 mm, it can be basically excluded that this operation is a two-finger touch operation. Taking the physical size of the screen as 60 (width) * 140 mm (height) and the screen resolution as 1200 (width) * 2800 pixels (height) as an example. Convert the physical distance of 27 mm into pixel distance: 1200÷60*27 = 540 pixels. That is to say, when the distance D1 after scaling is less than the threshold D = 540 pixels, it can be determined that this operation is invalid, and thus the scaling event ends, and the touch drive continues to detect user input. If the distance D1 after scaling is greater than or equal to the threshold D = 540 pixels, then it can be determined that this operation is valid, record the distance D1 after scaling, and execute A10 below.

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

[0131] A9, record the distance D1 after scaling.

[0132] Taking the case where the distance between the user's two fingers gradually decreases (the first scaling operation) as an example, the touch drive continues to collect the two-finger touch positions.

[0133] A10, the touch drive detects the two-finger movement operation of the user, and sends the collected coordinates (150, 150) and coordinates (630, 790) to the WMS. The WMS transfers the coordinates (150, 150) and coordinates (630, 790) to RecyclerView1.

[0134] Among them, the coordinates (150, 150) and coordinates (630, 790) are pixel coordinates. At this time, the distance di between the two fingers is 800.

[0135]

[0136] A11, RecyclerView1 multiplies the coordinates (150, 150) by the scaling factor s1 = 1 to get the coordinates (150, 150), and multiplies the coordinates (630, 790) by the scaling factor s1 = 1 to get the coordinates (630, 790).

[0137] A12, RecyclerView1 transfers the coordinates (150, 150) and coordinates (630, 790) to the pinch gesture detector.

[0138] A13. The pinch gesture detector calculates the scaled distance Di = 600 based on the coordinates (150, 150) and the coordinates (630, 790).

[0139] Among them,

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

[0141] A14. The pinch gesture detector determines whether the scaled distance Di = 800 is less than the threshold D = 540.

[0142] If the scaled distance Di is greater than the threshold D = 540 pixels, that is, the pinch gesture detector determines that the distance is not less than the threshold D, then the pinch gesture detector can determine that the current pinch operation is effective and execute the following A15.

[0143] A15. The pinch gesture detector calculates the current scaling factor Si based on the two-finger distance di and the two-finger distance d1.

[0144] Among them, the current scaling factor Si can be obtained through the following relational expression (1):

[0145]

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

[0147] A16. The pinch gesture detector determines that the current switching gear critical point is a1 or a2.

[0148] Among them, a1 is the gear switching critical point for switching from a low gear to a high gear. Exemplarily, the gear switching critical points for switching from the 4th gear to the 8th gear and from the 8th gear to the 15th gear are both a1 = 0.8; a2 is the gear switching critical point for switching from a high gear to a low gear. Exemplarily, the gear switching critical points for switching from the 15th gear to the 8th gear and from the 8th gear to the 4th gear are both a2 = 1.2.

[0149] Exemplarily, the electronic device can determine that the switching gear critical point is a1 = 0.8 according to Di < D1.

[0150] A17. The pinch gesture detector determines whether Di < D1 and Si ≤ a1, or Di > D1 and Si ≥ a2 are satisfied. In this calculation, scale1 = 1, so Si = 1 + 1 * (di - d1) / d1 = 0.8.

[0151] Assume that at this time, Di < D1 and Si ≤ a1 are satisfied. Then the pinch gesture detector can determine to execute the following A18 and A19. If Di < D1 and Si ≤ a1 are not satisfied, then the pinch gesture detector can determine that the condition for switching gears is not met, and the electronic device will perform a zoom display based on the current zoom factor Si, which is not shown in the figure, and then repeat the process of steps A9 - A17 until Di < D1 and Si ≤ a1 are satisfied. A18, the pinch gesture detector determines to switch from gear 4 to gear 8 and notifies the gallery application.

[0152] A19, the gallery application determines to display the photo page based on RecyclerView2 and notifies the WMS. Exemplarily, the content displayed on the photo page at this time is the second content.

[0153] A20, the WMS determines that RecyclerView2 is the layer for handling the zoom event.

[0154] A21, the touch driver detects the user's two - finger lift operation and notifies the WMS of the lift event. The WMS passes the lift event to RecyclerView2. Accordingly, RecyclerView2 passes the zoom event to the pinch gesture detector.

[0155] A22, the pinch gesture detector determines to maintain the current gear.

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

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

[0158] In addition, the above embodiments are illustrated by taking D2 < D1 and Si ≤ a1 as an example. In one example, when the user presses two fingers, the photo page displays 8 - column images. As the distance between the user's two fingers increases, if D2 > D1 and Si ≥ a2 are satisfied, then the pinch gesture detector determines to switch from gear 8 to gear 4 and notifies the gallery application. Then the gallery application determines to display the photo page based on RecyclerView1 and notifies the WMS. After that, the WMS determines that RecyclerView1 is the layer for handling the zoom event.

[0159] Exemplarily, Figure 13 is the flowchart for the photo page to switch from gear 8 to gear 15.

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

[0161] The above cycle, also known as the monitoring cycle or reporting cycle, is the cycle for the touch drive to collect the user's touch operations.

[0162] Taking the touch drive collecting 240 times per second as an example. The cycle T = 1 / 240 = 4.16ms, that is, the touch drive collects touch data every 4.16ms. If in a certain cycle, 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.

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

[0164] Exemplarily, when the user wants to view an image, the user can click on the gallery icon 01 as shown in (a) of Figure 1 . The touch drive receives the user's click operation on the gallery icon 01 and passes the click operation to the application processor. The application processor starts the gallery application. The gallery application initializes the native RecyclerView and pinch gesture detector, etc. Among them, the native RecyclerView includes RecyclerView1, RecyclerView2, and RecyclerView3, and the sizes of RecyclerView1, RecyclerView2, and RecyclerView3 are equal to the screen size, such as 1200 in width * 2800 in height pixels. RecyclerView1 is the daily title and supports displaying 8 columns of images. RecyclerView2 is the monthly title and supports displaying 8 columns of images. RecyclerView3 is the annual title and supports displaying 15 columns of images.

[0165] B3. After the initialization is completed, the gallery application determines to display the photo page based on RecyclerView2 and notifies the WMS. For example, the mobile phone can display the photo interface based on RecyclerView2 as shown in (b) of Figure 7 . Exemplarily, the content displayed on the photo interface at this time is the second content. Correspondingly, the WMS determines that RecyclerView2 is the layer for processing the zoom event.

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

[0167] B4, The touch drive detects the user's two-finger press operation and transfers the coordinates (150, 150) and the coordinates (630, 790) when the two fingers are pressed to the WMS. The WMS transfers the coordinates (150, 150) and the coordinates (630, 790) to RecyclerView2.

[0168] Among them, the coordinates (150, 150) and the coordinates (630, 790) are pixel coordinates. At this time, the distance d1 between the two fingers is 800.

[0169]

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

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

[0172] B6, RecyclerView2 transfers the coordinates (150, 150) and the coordinates (630, 790) to the pinch gesture detector.

[0173] B7, The pinch gesture detector calculates the scaled distance D1 = 800 based on the coordinates (150, 150) and the coordinates (630, 790).

[0174] Among them,

[0175] Since the scaling factor s1 = 1, the scaled distance D1 = 800 pixels calculated based on the coordinates (150, 150) and the coordinates (630, 790) is the true two-finger distance d1.

[0176] B8, The pinch gesture detector determines whether the scaled distance D1 = 800 is less than the threshold D = 540.

[0177] Generally, the distance between two fingers is greater than or equal to 27 mm. When the distance between the two fingers is less than 27 mm, it can be basically excluded that this operation is a two-finger touch operation. Taking the physical size of the screen as 60 (width) * 140 (height) mm and the screen resolution as 1200 (width) * 2800 (height) pixels as an example. Convert the physical distance of 27 mm into pixel distance: 1200÷60*27 = 540 pixels. That is to say, when the scaled distance D1 is less than the threshold D = 540 pixels, it can be determined that this operation is invalid, and thus the zoom event ends, and the touch drive continues to detect user input. If the scaled distance D1 is greater than or equal to the threshold D = 540 pixels, then it can be determined that this operation is valid, record the scaled distance D1, and execute B10 below.

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

[0179] B9, record the scaled distance D1.

[0180] Taking the case where the distance between the user's two fingers gradually decreases (the third pinch gesture) as an example, the touch drive continues to collect the two-finger touch positions.

[0181] B10, the touch drive detects the user's two-finger movement operation, and sends the collected coordinates (100, 100) and coordinates (460, 580) to the WMS. The WMS transfers the coordinates (100, 100) and coordinates (460, 580) to the RecyclerView2.

[0182] Among them, the coordinates (100, 100) and coordinates (460, 580) are pixel coordinates. At this time, the distance di between the two fingers is 600.

[0183]

[0184] B11, the RecyclerView2 multiplies the coordinates (100, 100) by the scaling factor s1 = 1 to get the coordinates (100, 100), and multiplies the coordinates (460, 580) by the scaling factor s1 = 1 to get the coordinates (460, 580).

[0185] B12, the RecyclerView2 transfers the coordinates (100, 100) and coordinates (460, 580) to the pinch gesture detector.

[0186] B13, the pinch gesture detector calculates the scaled distance Di = 600 according to the coordinates (100, 100) and coordinates (460, 580).

[0187] Among them,

[0188] Since the scaling factor s1 = 1, according to the coordinates (100, 100) and the coordinates (460, 580), the scaled distance Di = 600 pixels calculated is the true two-finger distance di.

[0189] B14, the pinch gesture detector determines whether the scaled distance Di = 600 is less than the threshold D = 540.

[0190] If the scaled distance Di is greater than the threshold D = 540 pixels, then the pinch gesture detector can determine that this scaling operation is effective and execute the following B15.

[0191] B15, the pinch gesture detector calculates the current scaling factor Si according to the distance Di between the two fingers after scaling and the distance D1 between the two fingers.

[0192] Among them, the current scaling factor Si can be obtained through the following relational expression (1):

[0193]

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

[0195] B16, the pinch gesture detector determines that the current gear shift critical point is a1 or a2.

[0196] Among them, a1 is the gear shift critical point for switching from a low gear to a high gear. Exemplarily, the gear shift critical points for switching from the 4th gear to the 8th gear and from the 8th gear to the 15th gear are both a1 = 0.8; a2 is the gear shift critical point for switching from a high gear to a low gear. Exemplarily, the gear shift critical points for switching from the 15th gear to the 8th gear and from the 8th gear to the 4th gear are both a2 = 1.2.

[0197] Exemplarily, the electronic device can determine that the gear shift critical point is a2 = 1.2 according to Di < D1.

[0198] B17, the pinch gesture detector determines whether Di < D1 and Si ≤ a1, or Di > D1 and Si ≥ a2 are satisfied.

[0199] Among them, in this calculation, scale1 = 1. Therefore, Si = 1 + 1 * (di - d1) / d1 = 0.8.

[0200] Assume that at this time, Di < D1 and Si ≤ a1 are satisfied. Then the pinch gesture detector can determine to execute B18 and B19 below. If Di < D1 and Si ≤ a1 are not satisfied, then the pinch gesture detector can determine that the condition for switching gears is not met, and the electronic device will perform a zoom display based on the current zoom ratio Si (not shown in the figure), and then repeat the process of steps B9 - B17 until Di < D1 and Si ≤ a1 are satisfied.

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

[0202] B19, the gallery application determines to display the photo page based on RecyclerView3 and notifies the WMS. Exemplarily, the content displayed on the photo interface at this time is the fifth content.

[0203] B20, the WMS determines that RecyclerView3 is the layer for handling zoom events.

[0204] B21, the touch driver detects the user's two - finger lift operation and notifies the WMS of the lift event. The WMS passes the lift event to RecyclerView13. Correspondingly, RecyclerView3 passes the zoom event to the pinch gesture detector.

[0205] B22, the pinch gesture detector determines to maintain the current gear.

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

[0207] In a possible implementation, the photo page supports "per - gear zoom", as Figure 12 shown. In response to a user's pinch gesture, as the distance between the two fingers decreases, the number of image columns displayed on the screen can be switched from 4 columns to 8 columns. After switching to 8 columns, further decreasing the distance between the two fingers will not trigger the screen to switch from 8 columns to 15 columns. If the user wants to switch from 8 columns to 15 columns, the two fingers need to be lifted and a pinch gesture needs to be triggered again to cause the electronic device to execute the steps of A1 - A20 in Figure 13.

[0208] In a possible implementation, the photo page supports "cross - gear zoom", as Figure 12 shown. In response to a user's pinch gesture, as the distance between the two fingers decreases, the number of image columns displayed on the screen can be switched from 4 columns to 8 columns. After switching to 8 columns, keeping the two fingers on the screen and continuing to decrease the distance between the two fingers, the number of image columns displayed on the screen can be switched from 8 columns to 15 columns. That is, after executing step A20, continue to execute the steps of B9 - B20, without needing to execute A21 - A22 and B1 - B8.

[0209] In the above photo page image scaling solution based on the native RecyclerView, since a corresponding native RecyclerView is set for each gear photo page, and the size of the native RecyclerView is equal to the size of the screen, therefore, the scaling factor s1 = 1. In this way, the coordinates obtained by the pinch gesture detector are the same as the coordinate pairs collected by the touch drive, so that the distance calculated by the pinch gesture detector based on the obtained coordinate pairs is equal to the true two-finger distance.

[0210] Example 2

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

[0212] Different from the photo page, in the grid page (the second interface) of the album, each grid is continuous, and the year title, month title, and day title do not need to be set. During the gear switching process, the electronic device only needs to change the size and number of grids. Based on the grid characteristics of the album page, this application only sets one custom RecyclerView (the third recycler view) for all gear album pages. The size of the custom RecyclerView is much larger than the size of the screen. For example, the size of the custom RecyclerView is 8400 pixels wide and 20000 pixels high, and the size of the screen is 1200 pixels wide and 2800 pixels high. In this way, before the user leaves the screen after pressing two fingers, the electronic device can switch back and forth between any gears based on the custom RecyclerView, such as switching from the current gear to other gears through the next gear. For the specific implementation method of the custom RecyclerView, reference can be made to the relevant descriptions of Figure 9 、 Figures 10A to 10D 、Figure 10, which will not be elaborated here.

[0213] For example, for the photo album page, the mobile phone is pre-set with 3 levels, 5 levels, 15 levels, and 21 levels. The screen size is 1200 pixels wide * 2800 pixels high, and the custom RecyclerView size is 8400 pixels wide * 20000 pixels high. According to the description of Example 1 above, when the WMS passes the two-finger coordinates to the custom RecyclerView, the custom RecyclerView will calculate a zoom factor corresponding to the two-finger operation. In the custom RecyclerView solution, the size of the RecyclerView is inconsistent with the screen size. Except that the zoom factor corresponding to 3 levels is 1.0, the zoom factors corresponding to 5 levels, 15 levels, and 21 levels are all less than 1. And when this zoom factor is less than 1, there may be a problem that the zoom action fails prematurely.

[0214] The following combines Figure 14 to provide a flowchart of the premature failure of the cross-level zoom scheme based on the custom RecyclerView.

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

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

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

[0218] After starting the gallery application, the gallery application initializes the native RecyclerView ( Figure 13 not shown), the custom RecyclerView, and the pinch gesture detector, etc. Among them, the native RecyclerView includes RecyclerView1, RecyclerView2, RecyclerView3. For RecyclerView1, RecyclerView2, RecyclerView, the description of Example 1 above can be referred to, and it will not be elaborated here. The size of the custom RecyclerView is 8400 pixels wide * 20000 pixels high. It should be noted that the custom RecyclerView is custom-made and is not included in the native system of the Android system. It is not necessary to initialize this control when running the gallery application.

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

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

[0221] 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 WMS.

[0222] C4, the gallery application shows the album page based on the custom RecyclerView and notifies WMS. Accordingly, WMS determines that the custom RecyclerView is the layer for handling zoom events.

[0223] C5, the touch driver detects the user's two-finger press operation and passes the coordinates (200, 200) and (800, 1000) at the time of the two-finger press to WMS. WMS passes the coordinates (200, 200) and (800, 1000) to the custom RecyclerView.

[0224] At this time, the distance d1 between the two fingers is 800.

[0225]

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

[0227] Assume that 5 columns of images are shown when entering the album page. Referring to the above Figure 10B , the zoom factor is 0.6.

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

[0229] C8, the zoom gesture detector calculates the distance D1 = 600 pixels based on the coordinates (120, 120) and (480, 600). Since the zoom factor is not 1, the calculated scaled distance D1 = 800 pixels is not equal to the actual two-finger distance d1.

[0230] Among them,

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

[0232] C10, The touch drive detects the user's two-finger movement operation and sends the collected coordinates (100, 100) and the coordinates (460, 580) to the WMS. The WMS passes the coordinates (100, 100) and the coordinates (460, 580) to the custom RecyclerView. At this time, the distance di between the two fingers is 600.

[0233]

[0234] C11, The custom RecyclerView multiplies the coordinates (100, 100) by the current zoom factor of 0.45 to get the coordinates (45, 45), and multiplies the coordinates (460, 580) by the zoom factor of 0.45 to get the coordinates (207, 261).

[0235] Among them, the current zoom factor Si can be obtained through the following relational formula (1):

[0236]

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

[0238] C12, The custom RecyclerView passes the coordinates (45, 45) and the coordinates (207, 261) to the pinch gesture detector.

[0239] C13, The pinch gesture detector calculates the scaled distance Di = 270 pixels based on the coordinates (45, 45) and the coordinates (207, 261).

[0240] Among them,

[0241] C14, The pinch gesture detector determines that the distance D2 = 270 pixels is less than the threshold D = 540 pixels, determines that this operation is invalid, and ends the zoom event in advance. That is, cross-gear cannot be achieved.

[0242] In the above-mentioned album page image scaling solution based on the custom RecyclerView, since only one custom RecyclerView is set for album pages of all gears, the size of the custom RecyclerView is much larger than the size of the screen. In this way, when the user reduces the distance between the two fingers, after the custom RecyclerView converts the touch coordinates, the pinch gesture detector calculates that the distance between the two fingers is less than the actual distance between the two fingers based on the converted coordinates. Therefore, for the user, for the same two operations, the calculation result in step A13 is that the distance between the two fingers is not less than the threshold D, and the calculation result in step B14 is that the distance between the two fingers is less than the threshold D, which will cause the inability to handle normal zoom events on the album page, that is, the cross-gear zoom of the photo page cannot be achieved. In the embodiment of the present application, the situation where the custom RecyclerView converts the touch coordinates and causes the inability to handle normal zoom events is called the premature failure of the zoom action.

[0243] Example 3

[0244] Referring to the description of Example 2 above, in the album page image scaling solution, using a custom RecyclerView (the third recycler view) may cause the problem of premature failure of the zoom action. In this regard, the present application also adds a custom ReceiveTouchView. The size of the ReceiveTouchView is the same as the size of the screen. In the zoom 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 album page image scaling solution based on the custom RecyclerView is prone to premature failure of the zoom action.

[0245] In addition, referring to the description of Example 2 above, in the zoom scenario of the album page, since each gear corresponds to the same custom RecyclerView, 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 based on the custom RecyclerView, such as switching from the current gear through the next gear to other gears. That is, through one pinch gesture, it is possible to switch from the 3rd gear to the 5th gear and then to the 15th gear. Or through one pinch gesture, it is possible to switch from the 3rd gear, through the 5th gear and the 15th gear, and finally switch to the 21st gear.

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

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

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

[0249] D2. The touch drive receives a user's click operation on the icon of the gallery application and launches the gallery application.

[0250] The gallery application initializes the native RecyclerView ( Figure 14 not shown), the Receive Touch Event Layer (ReceiveTouchView), the custom RecyclerView, the pinch gesture detector, etc. Among them, the native RecyclerView includes RecyclerView1, RecyclerView2, and RecyclerView3. For RecyclerView1, RecyclerView2, and RecyclerView3, reference can be made to the description of the above Example 1, which will not be elaborated here. The size of ReceiveTouchView is 1200 pixels wide * 2800 pixels high. The size of the custom RecyclerView is 8400 pixels wide * 20000 pixels high. It should be noted that both ReceiveTouchView and the custom RecyclerView are customized in this application. They are not included in the native system of the Android system, and there is no need to initialize these two controls when running the gallery application.

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

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

[0253] D3. The touch drive receives the user's click operation on the camera card in the album card page and notifies the gallery application through the WMS.

[0254] D4. 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 processing zoom events.

[0255] D5. The touch drive detects the two-finger press operation of the user and transfers the coordinates (x11, y11) and (x12, y12) when the two fingers are pressed to the WMS. The WMS transfers the coordinates (x11, y11) and (x12, y12) to the ReceiveTouchView, instead of transferring them to the custom RecyclerView.

[0256] Taking the coordinates (x11, y11) = (200, 200) and (x12, y12) = (800, 1000) when the two fingers are pressed as an example. At this time, the distance d1 between the two fingers is 1000.

[0257]

[0258] D6. The ReceiveTouchView transfers the coordinates (x11, y11) and (x12, y12) to the pinch gesture detector.

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

[0260] D7. The pinch gesture detector calculates the distance D1 between the two fingers according to the coordinates (x11, y11) and (x12, y12).

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

[0262]

[0263] Taking the coordinates (x11, y11) = (200, 200) and (x12, y12) = (800, 1000) when the two fingers are pressed as an example. After the pinch gesture detector calculates that the distance D1 between the two fingers is 1000 pixels, it can be determined that the distance D1 between the two fingers = 1000 is greater than the threshold D = 540 pixels, and 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 = 600 pixels are recorded.

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

[0265] D8, the touch drive detects the two-finger movement operation of the user, and sends the coordinates (xi1, yi1) and (xi2, yi2) after the two-finger movement operation to ReceiveTouchView through WMS, without passing them to the custom RecyclerView.

[0266] Taking the coordinates (xi1, yi1) = (100, 100) and (xi2, yi2) = (460, 580) after the two-finger movement operation as an example. At this time, the distance di between the two fingers is 600.

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

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

[0269] D10, the pinch gesture detector calculates the scaled distance Di between the two fingers according to the coordinates (xi1, yi1) and (xi2, yi2).

[0270] Where the scaled distance Di between the two fingers can be obtained through the following relational expression (3):

[0271]

[0272] Taking the coordinates (xi1, yi1) = (100, 100) and (xi2, yi2) = (460, 580) after the two-finger movement operation as an example. After the pinch gesture detector calculates that the distance D1 between the two fingers is 600 pixels, it can be determined that the distance Di between the two fingers is 600, which is greater than the threshold D = 540 pixels, and it is determined that this operation is valid, and the following C11 is executed.

[0273] It can be understood that since ReceiveTouchView does not multiply the coordinates (100, 100) and (460, 580) by a scaling factor less than 1, the calculated distance Di = 600 pixels is the real distance between the two fingers, and there will be no problem that the scaling action fails in advance.

[0274] D11, the pinch gesture detector calculates the scaling factor Si according to the scaled distance Di between the two fingers and the scaled distance D1 between the two fingers.

[0275] Where the scaling factor Si can be obtained through the following relational expression (1):

[0276]

[0277] Where scale1 is the scaling factor when the two fingers are pressed.

[0278] It should be understood that if the user reduces the distance between the two fingers, then Di < D1; if the user increases the distance between the two fingers, then Di > D1; if the user's two fingers remain stationary, the zoom factor S1 = 1, and it is determined to be invalid. In a cycle T, the faster the two fingers move, the greater the difference between D1 and Di, and the faster the gear shift.

[0279] For D12, the pinch gesture detector determines the zoom factor scale1 of the current gear and the gear shift critical points a1 and a2 for switching gears.

[0280] Among them, a1 is the gear shift critical point for switching from the current gear (such as 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).

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

[0282] Taking the gears preset for the album page as 3rd gear, 5th gear, 15th gear, and 21st gear as an example. Among them, the 3rd gear and the 5th gear are called adjacent gears, the 5th gear and the 15th gear are called adjacent gears, and the 15th gear and the 21st gear are called adjacent gears. Referring to the description of the above embodiment for Figure 10A When the display area includes 3 columns of grids, the zoom factor of the custom RecyclerView is 1.0. Referring to the description of the above embodiment for Figure 10B When the display area includes 5 columns of grids, the size of the display area is larger than the size of the screen, and the zoom factor of the custom RecyclerView is 0.6. Referring to the description of the above embodiment for Figure 10C When the display area includes 15 columns of grids, the zoom factor of the custom RecyclerView is 0.2. Referring to the description of the above embodiment for Figure 10D When the display area includes 21 columns of grids, the zoom factor of the custom RecyclerView is 1 / 7.

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

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

[0285]

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

[0287] Table 1

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

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

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

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

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

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

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

[0295] Table 2

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

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

[0298] Table 3

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

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

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

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

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

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

[0305] D14, the pinch gesture detector determines not to switch gears.

[0306] Taking the pinch gesture detector maintaining gear 5 as an example, if the user raises the two fingers, regardless of whether the zoom multiple Si is equal to 0.6, finally 5 columns of images are displayed on the screen, and the left and right edges of the 5 columns of images are aligned with the left and right edges of the screen.

[0307] D15. The pinch gesture detector determines the switching gear.

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

[0309] D16. The pinch gesture detector notifies the custom RecyclerView to perform zoom display based on the zoom ratio Si.

[0310] Subsequently, when the user continues to move their two fingers without leaving the screen, the touch drive of the electronic device can continue to detect the touch coordinates of the user's two fingers and repeat steps C8 - C16. If the operation of the two fingers being lifted is detected, then execute step C17 and subsequent steps.

[0311] D17. The touch drive detects the operation of the user lifting their two fingers and notifies the pinch gesture detector of the lift event through the WMS and ReceiveTouchView.

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

[0313] D18. The pinch gesture detector determines the zoom ratio corresponding to the gear before lifting the hand and notifies the custom RecyclerView to perform zoom display based on the zoom ratio corresponding to the gear before lifting the hand, finally making the left and right edges of the grid interface aligned with the left and right edges of the screen.

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

[0315] In the above method, the size of ReceiveTouchView is the same as that of the screen. In the zooming scenario, ReceiveTouchView receives the two-finger operation of the user, thus solving the functional problem and scalability problem of the RecyclerView control directly receiving click events. In addition, during the process from the two fingers being pressed down to the two fingers being lifted up, the mobile phone can periodically collect touch operations, calculate the zoom factor according to the change in the distance between the two fingers in adjacent cycles, and then determine whether to switch from the current gear to the next gear 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 zooming operations, improving the operation experience when viewing the album page.

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

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

[0318] The processor 110 may be used to execute the cross-gear zooming scheme for the album page in the above embodiment, or may be used to execute the step-by-step zooming scheme for the photo page in the above embodiment. The processor 110 may include one or more processing units. For example, the processor 110 may include a central processing unit (CPU), a graphics processing unit (GPU), an application processor (AP), an image signal processor (ISP), etc.

[0319] The internal memory 120 may be used to store computer-executable program codes, and the executable program codes include instructions. The processor 110 executes various functional applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 120. The internal memory 120 may include a program storage area and a data storage area. Among them, the program storage area may store an operating system and 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.

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

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

[0322] An embodiment of the present application also provides a computer-readable storage medium storing computer instructions. When the computer-readable storage medium runs on an electronic device, the electronic device is caused to execute the method as shown in the above embodiments. The computer instructions can be stored in the computer-readable storage medium or transmitted from one computer-readable storage medium to another. The computer-readable storage medium can be any available medium that can be accessed by a computer or a data storage device such as a server or a data center integrating one or more available media. The available medium can be a magnetic medium, an optical medium, or a semiconductor medium, etc.

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

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

[0325] The electronic device, computer-readable storage medium, computer program product, and chip provided in the embodiments of the present application are all configured 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 herein.

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

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

[0328] From the description of the above embodiments, those skilled in the art can clearly understand that for the convenience and conciseness of description, only the division of the above functional modules is used as an example. In actual 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.

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

[0330] 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. An image interface display method, characterized in that, Applied to an electronic device, the electronic device includes a display screen, and the method includes: Displaying first content based on a first recycler view on a first interface of a first application, the first content including images in a first number of columns, and the size of the first recycler view being equal to the size of the display screen; During the process of displaying the first interface, a first zoom operation is detected; In response to the first zoom operation, second content based on a second recycler view is displayed on the first interface, the second content including images in a second number of columns, the size of the second recycler view being equal to the size of the display screen, and the first number of columns being different from the second number of columns; Displaying third content based on a third recycler view on a second interface of the first application, the third content including images in a third number of columns, the size of the third recycler view being larger than the size of the display screen, and the first interface and the second interface being different interfaces; During the process of displaying the second interface, a second zoom operation is detected; In response to the second operation, fourth content based on the third recycler view is displayed on the second interface, the fourth content including images in a fourth number of columns, and the third number of columns being different from the fourth number of columns.

2. The method according to claim 1, characterized in that The method further includes: When the second content is displayed on the first interface, a third zoom operation is detected; In response to the third zoom operation, fifth content based on a fourth recycler view is displayed on the first interface, the fifth content including images in a fifth number of columns, the size of the fourth recycler view being equal to the size of the display screen, the fifth number of columns being different from the first number of columns, and the fifth number of columns being different from the second number of columns.

3. The method according to claim 1 or 2, characterized in that, The method further includes: After the second zoom operation is detected, a fourth zoom operation is continuously detected. During the process of detecting the second zoom gesture and the fourth zoom gesture, the user's finger does not leave the display screen; In response to the fourth zoom operation, sixth content based on the third recycler view is displayed on the first interface, the sixth content including images in a sixth number of columns, the sixth number of columns being different from the third number of columns, and the sixth number of columns being different from the fourth number of columns.

4. The method according to claim 1 or 2, characterized in that, The first zoom operation includes a two-finger approaching operation or a two-finger separating operation on the display screen; the third zoom operation includes a two-finger approaching operation or a two-finger separating operation on the display screen. During the process of detecting the first zoom gesture and the third zoom gesture, the user's finger does not leave the display screen.

5. The method according to claim 1 or 2, characterized in that, The first zoom operation includes a two-finger approaching operation or a two-finger separating operation on the display screen, and the third zoom operation includes a two-finger approaching operation or a two-finger separating operation on the display screen; After the second content is displayed on the first interface in response to the first zoom operation, before the third zoom operation is detected, a raising hand operation is further detected, and the raising hand operation is an operation of the two fingers leaving the screen; In response to the raising hand operation, the first interface maintains the display of the second content.

6. The method according to claim 3, wherein The second zoom operation includes a two-finger approaching operation or a two-finger moving-away operation on the display screen; the fourth zoom operation includes a two-finger approaching operation or a two-finger moving-away operation on the display screen.

7. The method according to any one of claims 1-6, characterized in that The first column number, the second column number, and the fifth column number increase or decrease in sequence. The third column number, the fourth column number, and the sixth column number increase or decrease in sequence.

8. The method according to claim 3, characterized in that The electronic device includes a touch drive and a layer module for receiving touch events. The method further includes: In response to the first zoom operation, the touch drive sends touch coordinates to the first recycler view. In response to the second zoom operation, the touch drive sends touch coordinates to the layer module for receiving touch events and does not send touch coordinates to the third recycler view. In response to the third zoom operation, the touch drive sends touch coordinates to the second recycler view.

9. The method according to claim 8, characterized in that, The electronic device further includes a pinch gesture detector. The method further includes: The second recycler view sends touch coordinates to the pinch gesture detector. The pinch gesture detector calculates the two-finger distance and the first zoom ratio based on the touch coordinates. Determine a first value and a second value corresponding to the second column number, where the first value is less than the second value. When the two-finger distance decreases and the first zoom ratio is less than or equal to the first value, display a fifth content based on the fourth recycler view on the first interface. When the two-finger distance increases and the first zoom ratio is greater than or equal to the second value, display a first content based on the first recycler view on the first interface.

10. The method according to claim 8, wherein The electronic device further includes a pinch gesture detector. The method further includes: The layer module for receiving touch events sends touch coordinates to the pinch gesture detector. The pinch gesture detector calculates a second zoom ratio based on the touch coordinates. Determine a third value and a fourth value corresponding to the fourth column number, where the third value is less than the fourth value. When the second zoom ratio decreases and the second zoom ratio is less than or equal to the third value, display a sixth content based on the third recycler view on the first interface. When the second zoom ratio increases and the second zoom ratio is greater than or equal to the fourth value, display a third content based on the third recycler view on the first interface.

11. The method according to claim 9, characterized in that, Before the pinch gesture detector calculates the first zoom ratio based on the touch coordinates, the method further includes: The pinch gesture detector determines that the distance between the two fingers is less than a first threshold.

12. The method according to claim 10, characterized in that, Before the pinch gesture detector calculates the second zoom ratio based on the touch coordinates, the method further includes: The pinch gesture detector determines that the distance between the two fingers is less than a first threshold based on the touch coordinates.

13. The method according to any one of claims 1 to 12, characterized in that, The zoom ratio of the first recycler view is 1, the zoom ratio of the second recycler view is 1, and the zoom ratio of the fourth recycler view is 1.

14. The method according to any one of claims 1-13, characterized in that, The zoom ratio of the third recycler view when displaying the third content, the zoom ratio of the third recycler view when displaying the fourth content, and the zoom ratio of the third recycler view when displaying the sixth content are all different.

15. The method according to any one of claims 1-14, characterized in that, The zoom factor of the third recycler view when displaying the third content, the zoom factor of the third recycler view when displaying the fourth content, and the zoom factor of the third recycler view when displaying the sixth content increase in sequence; Alternatively, the zoom factor of the third recycler view when displaying the third content, the zoom factor of the third recycler view when displaying the fourth content, and the zoom factor of the third recycler view when displaying the sixth content decrease in sequence.

16. The method according to any one of claims 1-15, characterized in that, The method further includes: After the first application is launched, create the first recycler view, create the second recycler view, create the third recycler view, and create the fourth recycler view.

17. An electronic device, characterized in that, Comprising a processor and a memory coupled to the processor; Wherein, instructions are stored in the memory, and the processor invokes the instructions to cause the electronic device to execute the image interface display method according to any one of claims 1 to 14.

18. A chip, characterized in that, The chip is coupled to the memory, and the chip is configured to read and execute the computer program stored in the memory to implement the image interface display method according to any one of claims 1 to 14.

19. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, and when the computer program runs on an electronic device, it causes the electronic device to execute the image interface display method according to any one of claims 1 to 14.

Images