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

Abstract

The invention provides a grid interface display method and device, a chip system and a storage medium, and relates to the technical field of terminals. In the scheme of the invention, the electronic equipment can sequentially splice the to-be-spliced pictures according to the APs of the to-be-spliced pictures, splice every N to-be-spliced pictures adjacent to the APs into a strip-shaped to-be-spliced picture, and store the spliced to-be-spliced pictures in a cache, and N is an integer greater than or equal to 2. And after the GPU obtains a drawing instruction from the CPU, the GPU can read the spliced picture from the cache and draw the spliced picture into the View control. Compared with a traditional grid interface drawing mode in which one picture occupies one grid, in the grid interface drawing scheme based on the spliced pictures, one spliced picture occupies a plurality of grids, so that the number of the pictures drawn by a GPU and the number of times of drawing the pictures can be reduced in magnitude, and the drawing efficiency of the grid interface based on the spliced pictures is improved. And the overall processing speed of the electronic equipment is improved.

Description

Display methods, devices, chip systems, and storage media for grid-based interfaces

[0001] This application claims priority to Chinese Patent Application No. 202410947459.6, filed on July 12, 2024, entitled “Display Method, Device, Chip System and Storage Medium for Grid Interface”, the entire contents of which are incorporated herein by reference. Technical Field

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

[0003] With the rapid development of terminal technology, the storage space of mobile phones and other electronic devices is becoming increasingly larger. Gallery applications on electronic devices can store a large number of images. Gallery applications can set up multiple albums based on image type, such as camera albums, all photos albums, all videos albums, screenshot albums, and personal favorites albums.

[0004] Currently, electronic devices support displaying a fixed number of columns of images in a grid format within a photo album page. In related rendering schemes, electronic devices typically render the images in each grid sequentially. However, when an album page contains a large number of images, the central processing unit (CPU) issues a large number of rendering instructions to the graphics processing unit (GPU). This requires the GPU to render a large number of images, resulting in longer rendering times; for example, rendering 2170 images may take 35ms. Consequently, the grid interface may experience stuttering and frame drops, negatively impacting the user experience. Summary of the Invention

[0005] This application provides a method, device, chip system, and storage medium for displaying a grid interface, which can solve the technical problem that related solutions are time-consuming when a grid interface includes a large number of images.

[0006] To achieve the above objectives, this application adopts the following technical solution:

[0007] Firstly, embodiments of this application provide a method for displaying a grid interface. This method may include:

[0008] When the first grid interface is displayed, the user's first operation on the electronic device is received. The first grid interface includes a grid with a first column number.

[0009] In response to the first operation, according to the adaptation position values ​​of the images to be stitched, every N images with consecutive adaptation position values ​​are stitched into one stitched image; where the adaptation position value of the last image to be stitched in the i-th stitched image differs from the adaptation position value of the first image to be stitched in the (i+1)-th stitched image by 1, and the index values ​​of each stitched image are sequentially increased according to the stitching order, where N is an integer greater than or equal to 2, and i is a positive integer;

[0010] After receiving the first operation, it continues to receive the user's second operation on the electronic device;

[0011] In response to the second operation, a second grid interface is displayed, in which N adjacent grids display a stitched image; wherein the second grid interface includes grids with a second column number, and the first column number is different from the second column number; when there is one stitched image in a row in the second grid interface, the index value of the last stitched image in the j-th row differs from the index value of the first stitched image in the (j+1)-th row by 1; or, when there are multiple stitched images in a row in the second grid interface, the index values ​​of two adjacent stitched images in each row differ by 1, and the index values ​​of the last stitched image in the j-th row are the same as or differ by 1 from the index value of the first stitched image in the (j+1)-th row, where j is a positive integer.

[0012] In traditional grid-based image rendering, if there are M images to be displayed, the electronic device renders M images in M ​​steps. However, in the solution provided in this application, upon receiving the first operation, if there are M images to be displayed, the GPU can reduce the number of images rendered from M to M / N by stitching together every N images with adjacent adaptation position values ​​into a single stitched image. This allows the grid-based image rendering to be directly based on the already acquired stitched image upon receiving the first operation, reducing the number of image rendering steps and improving GPU processing speed, resulting in a smoother display of the photo album interface.

[0013] In one possible implementation, the above-mentioned stitched images are long strip-shaped stitched images.

[0014] As an example, the height of a stitched image is equal to the height of a single image to be stitched together, and the width of a stitched image is equal to the sum of the widths of the N images to be stitched together. In this case, a stitched image is a long, horizontally shaped image. The electronic device starts from the top left corner of the first area and draws one stitched image per row, in ascending order of the images' indices, within the drawing area, every N squares.

[0015] As another example, in one possible implementation, the height of a stitched image is equal to the height of N individual images to be stitched together, and the width of a stitched image is equal to the sum of the widths of the individual images to be stitched together. In this case, a stitched image is a long, vertically oriented image. The electronic device starts from the top left corner of the first area and draws one stitched image per column of N squares in the drawing area, according to the ascending index of the stitched images.

[0016] In one possible implementation, the first operation is a zoom operation or a two-finger press operation, and the second operation is a zoom operation. From the receipt of the first operation to the end of the second operation, the user's finger does not leave the screen of the electronic device. For example, when displaying a 5-level day view, if a zoom operation or a two-finger press operation (i.e., the first operation) is received, it indicates that there may be a need to switch from the 5-level day view to the 13-level moon view. To facilitate subsequent image stitching, the electronic device can stitch together every N images with connected adaptation position values ​​into a single stitched image, based on the adaptation position values ​​of the images to be stitched. If the user's next zoom operation (i.e., the second operation) is received while the user's finger is still on the screen of the electronic device, and the condition for switching from the 5-level day view to the 13-level moon view is met, a second grid interface can be drawn based on the already acquired stitched image.

[0017] In one possible implementation, each grid cell in the first grid interface displays one image to be stitched together. Taking a 5-level daily view as an example, the total number of grid cells in a daily view is relatively small, and the effect of using an image stitching scheme to shorten the processing time is not significant. In this case, there is no need to use the image stitching scheme of this application; instead, an original image is directly drawn for each grid cell.

[0018] In one possible implementation, a stitched image is displayed by M adjacent grids in the first grid interface, where M is an integer greater than or equal to 2. Taking a moon view with 13 grid levels in the first grid interface as an example, the moon view includes a large number of grids. Although the stitching process will increase the time consumption, the GPU's image rendering process significantly reduces the time consumption, thereby significantly shortening the overall time consumption. In this case, the image stitching scheme of this application can be adopted.

[0019] In one possible implementation, after displaying the second grid interface, the method may further include: receiving a third operation from the user on the electronic device; and, in response to the third operation, displaying a third grid interface, the third grid interface comprising a grid with a third number of columns, the third column number being different from the second column number. Specifically, if there is one stitched image per row in the third grid interface, the index value of the last stitched image in the j-th row differs from the index value of the first stitched image in the (j+1)-th row by 1; or, if there are multiple stitched images per row in the second grid interface, the index values ​​of two adjacent stitched images in each row differ by 1, and the index values ​​of the last stitched image in the j-th row are the same as or differ by 1 from the index value of the first stitched image in the (j+1)-th row.

[0020] For example, the third operation can be any of the following:

[0021] The operation that triggers the electronic device to turn split-screen function on or off;

[0022] Trigger the operation of opening or closing the pop-up mode on the electronic device;

[0023] Trigger the operation of switching the electronic device from portrait mode to landscape mode, or from landscape mode to portrait mode;

[0024] This triggers the electronic device to switch from a large screen to a small screen, or vice versa.

[0025] In the above scheme, regardless of the screen's state, the electronic device can stitch together every N images connected to each AP into a single stitched image. When the screen state changes, previously stitched images can be reused and drawn sequentially onto the screen, ensuring that each grid cell in the grid interface has an image. Furthermore, the adaptation position values ​​of the corresponding images in each grid cell increase sequentially from left to right and from top to bottom, preventing blank spaces in some cells. Additionally, reusing previously stitched images reduces CPU power consumption.

[0026] In one possible implementation, before displaying the first grid interface, the method may further include: loading a first view control (referred to as a high-density view) and a second view control (referred to as a low-density view); initializing the size of the first view control and the number of columns for each position corresponding to the first view control, for example, the size of the first view control is 3100*7000 pixels wide, the corresponding month view has 13 columns, and the corresponding year view has 31 columns; initializing the size of the second view control and the number of columns for each position corresponding to the second view control, for example, the size of the second view control is 2170*5642 pixels wide, and the corresponding day view has 3 and 5 columns. The first grid interface is drawn based on the second view control, and the second grid interface is drawn based on the first view control. It should be noted that this embodiment of the application uses an example where the low-density view includes two positions of day view, and the high-density view includes one position of month view and one position of year view. In practice, a day view can include one, three, or more increments, while a month view and a year view can include two or more increments. Furthermore, the number of columns per increment in low-density and high-density views can be adjusted based on screen width, window width, and other factors.

[0027] In one possible implementation, the first view control inherits from Android's view controls, and the second view control inherits from the RecyclerView control. Both the first and second view controls are larger than or equal to the screen size. Android's view controls do not have ItemViews, while the RecyclerView control does, and ItemViews support responding to user touch input. The RecyclerView control's ItemViews support responding to user touch input on individual ItemViews. For lower-density views (such as day views), where users typically require grid-based touch input, RecyclerView is used as a low-density view. Android-based view controls are ordinary view controls, which can be considered a blank canvas, offering advantages in performance and memory efficiency. However, Android-based view controls do not have the concept of ItemViews and do not support responding to user touch input on individual ItemViews. For higher-density views (such as month or year views), which are generally used for quickly viewing multiple photos, users typically do not require grid-based touch input. To save performance and memory, Android-based view controls can be used as high-density views.

[0028] In one possible implementation, the second grid interface is drawn based on a first view control, the size of which is larger than the screen size. The distance from the bottom edge of the screen to the bottom edge of the first view control is a first distance, and the edge of the first view control is located outside the screen. After displaying the second grid interface, the method may further include: receiving a sliding operation from the user on the screen by sliding a second distance along a first direction, the first direction being from the bottom edge of the screen to the top edge, and the second distance being greater than the first distance; responding to the sliding operation, moving the first view control along the second direction by a third distance, re-determining the adaptation position value of the stitched image to be displayed, obtaining the corresponding stitched image, drawing and displaying a fourth grid interface, in which N adjacent grids display one stitched image; the second direction is opposite to the first direction, the third distance is greater than or equal to the difference between the second distance and the first distance, and the stitched image displayed in the second grid interface is not exactly the same as the stitched image displayed in the fourth grid interface. Specifically, in the fourth grid interface, if there is one stitched image in a row, the index value of the last stitched image in row j differs from the index value of the first stitched image in row j+1 by 1; or, if there are multiple stitched images in a row in the fourth grid interface, the index values ​​of two adjacent stitched images in each row differ by 1, and the index values ​​of the last stitched image in row j and the first stitched image in row j+1 are the same or differ by 1.

[0029] In the above solution, when the electronic device displays a monthly or yearly view, the user can swipe their finger up or down on the screen. This swiping action triggers a grid-based interface rendering process based on stitched images. Since a stitched image occupies multiple grids, this significantly reduces the amount of image data and the number of times the GPU needs to render images, thereby improving GPU processing speed and making the album interface display smoother.

[0030] In one possible implementation, the aforementioned re-determining of the adaptation position value of the stitched image to be displayed may include: determining the number of rows moved by the first view control based on the third distance; and determining the adaptation position value of the stitched image to be displayed based on the adaptation position values ​​of the first and last grid cells in the second grid interface, the number of rows moved by the first view control, the second direction, and the number of columns. For example, the electronic device may update the AP value of each grid cell according to the formula: AP + s * g. Here, s represents the final number of rows moved by the first view control, g represents the current position of the first view control (i.e., the number of columns in the grid), and AP represents the AP value of the image corresponding to the grid cell in the second grid interface.

[0031] In one possible implementation, after drawing and displaying the fourth grid interface, the method may further include: obtaining the adaptation position values ​​of the first and last grid cells in the fourth grid interface; redetermining the adaptation position values ​​of each image to be stitched based on the adaptation position of the first and last grid cells in the fourth grid interface and the total number of grid cells in the fourth grid interface; and caching the redetermined images to be stitched in a low-density data loader. It can be understood that in a swiping scenario, after the user performs a swiping operation, the AP value of the image in the next frame of the grid interface can be predicted based on the AP value of the image in the current grid interface, and the stitched images can be prepared in advance. Thus, when drawing the next frame of the grid interface in response to the swiping operation, the stitched images can be used to draw the grid interface.

[0032] In one possible implementation, if the first operation is a zoom operation or a two-finger press operation, and the first grid interface is drawn based on the second view control, then stitching every N images with connected adaptation position values ​​into a single stitched image according to the adaptation position values ​​of the images to be stitched can include: obtaining the adaptation position values ​​of the first and last grids in the first grid interface; determining the adaptation position values ​​of each image to be stitched based on the adaptation position of the first grid, the adaptation position value of the last grid, the total number of columns in the second grid interface, and the value N; stitching every N images with connected adaptation position values ​​into a single stitched image according to the adaptation position values ​​of each image to be stitched, and adding index values ​​to each stitched image according to the stitching order; and caching each stitched image in a high-density bitmap loader. It is understandable that in zoom operation scenarios, if a zoom operation or a two-finger press operation is received, it indicates that there may be a need to switch gears. In order to facilitate subsequent image stitching, electronic devices can predict the AP value of the image in the next grid interface based on the AP value of the grid in the current grid interface and the total number of grids in the next grid interface, and prepare the stitched image in advance. In this way, when responding to the zoom operation and drawing the next grid interface, the stitched image can be used to draw the grid interface.

[0033] In one possible implementation, if the second operation is a zoom operation, the method may further include the following steps before displaying the second grid interface: determining the zoom center based on the second operation; determining the drawing area of ​​the second grid interface in the first view control; determining the adaptation position values ​​of the first and last grid cells in the drawing area based on the layout position and adaptation position values ​​of the selected grid cell at the zoom center, with each adaptation position value corresponding to one image to be stitched; obtaining the first stitched image from the high-density bitmap loader based on the adaptation position values ​​of the first and last grid cells in the drawing area; and drawing the first stitched image onto the drawing area to obtain the second grid interface. It can be understood that in a zoom operation scenario, when a user's zoom operation is received, the row and column of the drawing area for the next zoom level in the first view control can be determined based on the layout position and adaptation position values ​​of the selected grid cell at the zoom center, while keeping the AP value of the zoom center unchanged and refreshing the AP values ​​of each grid cell before and after the zoom center, ensuring a continuous order of images displayed on the screen.

[0034] In one possible implementation, a stitched image is a long, horizontally oriented image, and the second grid interface is drawn in the first area of ​​the first view control. The second grid interface includes a second column of grids. Before displaying the second grid interface, the method may further include: starting from the top left corner of the first area, drawing one stitched image row by row every N grids in the first area according to the ascending index of the stitched images.

[0035] For example, before drawing the stitched image for each row, the origin of the canvas is horizontally offset from the top left corner of each row by a distance equal to the width of a first number of stitched images; the stitched image with the first index is drawn on the canvas, with its top left corner coinciding with the origin of the canvas; the number of columns of images already drawn in the first region is obtained; if the number of columns of images already drawn is less than the number of columns of images, the canvas is moved to the right by a distance equal to the width of N stitched images, and the stitched image with the second index is drawn on the canvas, with its top left corner coinciding with the origin of the canvas, and the second index is equal to the first index plus 1.

[0036] If the number of columns of the drawn images is greater than or equal to the number of the second column, perform the following operations in sequence: determine the horizontal offset of the canvas origin by the width of the first value of the stitched images when drawing the first stitched image in the next row; reset the number of columns of the drawn images in the first region to 0; if the first value is equal to zero, increment the index of the stitched image by 1; if the first value is not equal to zero, keep the index of the stitched image unchanged; restore the origin of the canvas to coincide with the top left corner of each row; move the canvas vertically downward by the height of one stitched image. Determining the horizontal offset of the canvas origin by the width of the first value of the stitched images when drawing the first stitched image in the next row can include: subtracting the number of the second column and then subtracting N from the number of columns of the drawn images in the first region to obtain the first value; using the first value as the horizontal offset of the canvas origin when drawing the first stitched image in the next row.

[0037] In the above scheme, the electronic device can start from the top left corner of the monthly or yearly view and begin the process of drawing the stitched images from the first row and first column. After all the stitched images in the first area are drawn, from the grid interface effect, each grid corresponds to one image to be stitched, and the AP value of the images to be stitched in each grid increases sequentially from left to right and from top to bottom.

[0038] In one possible implementation, starting from the top left corner of the first region, a stitched image is drawn row by row, N grids in the first region, following the ascending order of the image indices. This can also include: before drawing the first row of data in the first region, moving the canvas origin to the top left corner of the first row; and after drawing the last row of data in the first region, moving the canvas origin back to the top left corner of the first row. In this scheme, after drawing all grids in all regions, the canvas coordinate system can be restored to its initial state, facilitating the drawing of the next frame's grid interface.

[0039] In one possible implementation, before starting to draw the first row of data in the first region, the method may further include: determining a first scaling factor based on the size of the grid in the first region and the size of the image to be stitched; and setting the canvas scaling factor to the first scaling factor. For example, assuming the grid size in the moon view is 100 pixels wide * 100 pixels high, the image size in the high-density data loader is 50 pixels wide * 50 pixels high, the scaling factor is scale = 2, and the number of images stitched together for each stitched image is N = 10. When drawing the stitched image (500 pixels wide * 50 pixels high) onto the canvas, by setting the canvas scaling factor to scale = 2, the stitched image can be adaptively enlarged by 2 times, thus ensuring that the size of the stitched image is adapted to the size of the grid in the moon view, avoiding the problem of the stitched image size being smaller than the grid size.

[0040] In one possible implementation, before starting to draw the first row of data in the first region, the method may further include: determining the index of the first stitched image to be drawn in the first row of the first region based on the adaptation position value of the grid in the first row and first column of the first region; and determining the horizontal offset of the canvas origin when drawing the first stitched image in the first row based on the adaptation position value of the grid in the first row and first column of the first region, the index of the first stitched image, and the numerical value N. In the above scheme, the horizontal offset of the canvas origin when drawing the first stitched image in the first row is the offset of the first row of data. If the left edge of the first stitched image is located to the left of the left edge of the drawing area of ​​the moon view, then the offset of the first row of data is negative. If the left edge of the first stitched image is located to the right of the left edge of the drawing area of ​​the moon view, then the offset of the first row of data is positive.

[0041] In one possible implementation, before receiving the user's first operation on the electronic device, the method may further include: displaying a gallery interface, which includes album cards; receiving a fourth operation from the user on an album card; and, in response to the fourth operation, displaying a first grid interface. For example, when a user wants to view pictures or videos in the gallery application, the user can click the gallery icon. In response to the user's click on the gallery icon, the gallery application is launched, and a card page is displayed. The card page provides album cards such as camera, all photos, and videos, with each album card serving as an entry point to an album. The user can trigger the electronic device to display the first grid interface of an album by clicking on a specific album card.

[0042] Secondly, this application provides an apparatus comprising units for performing the method described in the first aspect above. This apparatus is adapted to perform the method described in the first aspect above, and a description of the units within this apparatus is provided in the description of the first aspect above; for brevity, it will not be repeated here.

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

[0044] Thirdly, this application provides an electronic device comprising: one or more processors, and a memory. The memory is coupled to the one or more processors and is used to store computer program code, the computer program code including computer instructions, wherein the one or more processors invoke the computer instructions to cause the electronic device to perform the methods provided by the first aspect and any possible implementation thereof.

[0045] Fourthly, this application provides a computer-readable storage medium. The computer-readable storage medium includes computer instructions. When executed on an electronic device, the computer instructions cause the electronic device to perform the method provided by the first aspect and any possible implementation thereof.

[0046] Fifthly, this application provides a computer program product. When the computer program product is run on a computer, it causes the computer to perform the method provided by the first aspect and any possible implementation thereof.

[0047] In a sixth aspect, this application provides a chip system applied to an electronic device, the chip system including one or more processors, the one or more processors being configured to invoke computer instructions to cause the electronic device to perform the methods provided in the first aspect and any possible implementation thereof.

[0048] It is understood that the beneficial effects achieved by the apparatus of the second aspect, the electronic device of the third aspect, the computer-readable storage medium of the fourth aspect, the computer program product of the fifth aspect, and the chip system of the sixth aspect provided above can be referred to as the beneficial effects of the first aspect and any possible implementation thereof, which will not be repeated here. Attached Figure Description

[0049] Figure 1 is one of the schematic diagrams of a mobile phone zooming in and out to display images on the album page, as provided in this application;

[0050] Figure 2 is a second schematic diagram of a scenario where a mobile phone displays images in a zoomed-out format on a photo album page, as provided in this application.

[0051] Figure 3 is one of the schematic diagrams of a mobile phone scrolling through images on a photo album page according to this application;

[0052] Figure 4 is a second schematic diagram of a scenario where the mobile phone displays images scrolling on the album page according to this application;

[0053] Figure 5 is a schematic diagram of the View provided in this application for setting up a photo album page;

[0054] Figure 6 is a schematic diagram of a traditional grid-based interface drawing scheme provided in this application;

[0055] Figure 7 is a schematic diagram of another traditional grid-based interface drawing scheme provided in this application;

[0056] Figure 8A is a schematic diagram of loading images to be stitched in a high-density data loader provided in this application;

[0057] Figure 8B is a schematic diagram of loading stitched images in a high-density bitmap loader provided in this application;

[0058] Figure 9 is a schematic diagram of the stitching and drawing based on the stitched images in the high-density bitmap loader provided in this application;

[0059] Figure 10 is a schematic diagram of the drawing scheme of the grid interface based on spliced ​​images provided in this application;

[0060] Figure 11 is a software architecture diagram of an electronic device provided in this application;

[0061] Figure 12 is a schematic diagram of a low-density view provided in this application;

[0062] Figure 13 is a schematic diagram of another low-density view provided in this application;

[0063] Figure 14 is a schematic diagram of a high-density view provided in this application;

[0064] Figure 15 is a schematic diagram of another high-density view provided in this application;

[0065] Figure 16 is a schematic diagram of switching between low-density view and high-density view provided in this application;

[0066] Figure 17 is a schematic diagram of LP and AP in a grid interface provided in this application;

[0067] Figure 18 is a software architecture diagram of another electronic device provided in this application;

[0068] Figure 19 is a flowchart of the method for switching from a low-density view to a high-density view in a scaling scenario provided in this application;

[0069] Figure 20 is a flowchart of a specific scheme for determining the AP range based on the zoom center provided in this application;

[0070] Figure 21 is a flowchart of the method for triggering high-density View drawing in a scrolling scenario provided in this application;

[0071] Figure 22 is a schematic diagram of a scenario for an image scrolling scheme based on a View control provided in an embodiment of this application;

[0072] Figure 23 is a schematic diagram of a grid management system provided in this application;

[0073] Figure 24 is a schematic diagram of some parameters involved in the process of drawing the lunar view provided in this application;

[0074] Figure 25 is a flowchart of the process for drawing a monthly or yearly view using the high-density View trigger grid management class provided in this application.

[0075] Figure 26 is a flowchart of the specific method for drawing a lunar view based on stitched images provided in this application;

[0076] Figures 27A to 27I are schematic diagrams of lunar views drawn based on stitched images provided in this application;

[0077] Figure 28 is a schematic diagram of the grid interface drawn based on spliced ​​images when switching from portrait mode to landscape mode according to this application;

[0078] Figures 29A and 29B are schematic diagrams of the grid interface drawn based on spliced ​​images when switching from small screen state to large screen state provided by this application;

[0079] Figures 30A and 30B are schematic diagrams of the grid interface drawn based on spliced ​​images when switching from full-screen state to half-screen state according to this application.

[0080] Figures 31A and 31B are schematic diagrams of the grid interface drawn based on spliced ​​images when switching from a large window state to a small window state, as provided in this application.

[0081] Figures 32A and 32B are schematic diagrams of the grid interface drawn based on stitched images when switching from a monthly view to a yearly view, as provided in this application.

[0082] Figure 33 is a flowchart of the image scrolling method based on high-density View provided in this application;

[0083] Figure 34 is a schematic diagram of the hardware structure of an electronic device provided in this application. Detailed Implementation

[0084] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of this application.

[0085] In this embodiment of the application, the gallery application supports displaying images. For example, the gallery application supports displaying images in the form of albums on the album page, wherein the album page may include various types of albums such as camera, video, photo, cloud storage, selfie, live photo, long exposure, slow motion, screenshot and GIF.

[0086] For photo album pages, electronic devices have multiple preset levels. A "level" can be understood as the number of image columns displayed on the screen. For example, electronic devices may have preset levels of 3, 5, 13, and 31 for photo album pages. Level 3 is the minimum level, and level 31 is the maximum. At level 3, 3 images are displayed on the screen; at level 5, 5 images are displayed; at level 13, 13 images are displayed; and at level 31, 31 images are displayed.

[0087] Users can use a two-finger zoom gesture to change the number of image columns displayed on the screen for a photo album page. As an example, by decreasing the distance between two fingers, the user can trigger the electronic device to increase the number of image columns displayed on the screen for a photo album page. Conversely, by increasing the distance between two fingers, the user can trigger the electronic device to decrease the number of image columns displayed on the screen for a photo album page. For instance, if the user sets the photo album page to level 3 using a zoom gesture, the electronic device will maintain a display of 3 columns of images until the next two-finger gesture is received.

[0088] The following uses a mobile phone as an example and, together with Figures 1 to 4, illustrates the usage scenarios of the photo gallery application.

[0089] In some embodiments, the phone supports zooming in and out of images on the photo album page in response to two-finger gestures.

[0090] For example, Figures 1 and 2 illustrate a scenario where a mobile phone zooms in to display an image on a photo album page.

[0091] Figures 1 and 2 illustrate the preset levels of the photo album page as 3, 5, 13, and 31 levels respectively, but they do not limit the scope of this application. In actual implementation, the mobile phone can arbitrarily set the levels of the photo album page. For example, based on the size of the mobile phone screen, 1, 3, 5, 13, 21, and 31 levels can be preset for the photo album page, with level 1 being the minimum level and level 31 being the maximum level. Users can trigger the phone to switch between these six levels by using a two-finger zoom operation.

[0092] As shown in Figure 1(a), the phone displays icons for applications such as the Gallery app on the desktop. When a user wants to view images, they can tap the Gallery icon 01. In response to the user's tap on the Gallery icon 01, the phone displays a card page as shown in Figure 1(b). The card page includes several areas: a status bar providing battery and signal strength indicators, an action bar providing photos and a search box, and a foot bar providing photos, albums, memories, and creations. When an album is selected in the foot bar, the central area of ​​the card page displays album cards for the camera, all photos, and videos. These album cards, also called photo album cards, each serve as an entry point to an album.

[0093] Users can select an album card from these album cards. For example, as shown in Figure 1(b), the user can click on the "Camera" card 02. The phone responds to the user's click on the "Camera" card 02 and displays the album page as shown in Figure 1(c). The album page includes multiple square grids. Taking an album page with 3 columns of grids as an example, the side length h1 of each grid is equal to the width of the display screen divided by 3. Each grid is used to display one image, which is a thumbnail of a photograph or a video clip. Additionally, when the album page includes 3 columns of grids, a time capsule 03 in days is displayed in the upper left corner of the album page with preset transparency; at this time, the album page is called a day view. As an example, the time capsule provided in this embodiment is a control or prompt message floating above the grid interface, used to indicate the shooting date of the images in the grid interface. For example, time capsule 03 indicates the specific shooting date "2024.07.10", which can be the shooting date of all photos in the current album page. When users want to quickly browse more photos, they can reduce the distance between their two fingers to trigger the phone to increase the number of image columns displayed on the album page.

[0094] As shown in Figure 1(d), the user can press two fingers, with the distance between the fingers being d1. As shown in Figure 1(e), without lifting the fingers from the screen, the user can decrease the distance between the fingers. When the distance decreases from d1 to d2, the album page switches from a 3-column grid to a 5-column grid, with each grid having a side length of h2, which is equal to the width of the screen divided by 5. When the album page includes 5 columns, a time capsule 04, displayed in days, is shown in the upper left corner of the album page with preset transparency. For example, the specific shooting date indicated by time capsule 04 is still "2024.07.10", which can be the shooting date of all photos in the current album page. At this time, the album page is still called the day view.

[0095] As shown in Figure 1(f), without lifting two fingers from the screen, the user can continue to decrease the distance between their fingers. When the distance decreases from d2 to d3, the album page switches from a 5-column grid to a 13-column grid, with each grid having a side length of h3, which is equal to the width of the screen divided by 13. When the album page includes 13 columns, two time capsules, 05 and 06, are displayed on the left side of the album page with preset transparency, each representing a month. The photos in the grid between time capsules 05 and 06 are dated "July 2024," while the photos in the rows containing time capsule 06 and below are dated "August 2024." At this point, the album page is called the Month View.

[0096] Users can further reduce the distance between their two fingers. For example, when the distance between the two fingers decreases from d3 as shown in Figure 1(f) to d4 as shown in Figure 2(a), the album page switches from a 13-column grid to a 31-column grid, with each grid having a side length of h4, where h4 is equal to the width of the display divided by 31. When the album page includes 31 columns, a time capsule 07 in years is displayed in the upper left corner of the album page with preset transparency. For example, time capsule 07 indicates a specific shooting date of "2024," which could be the shooting date of all photos in the current album page. At this point, the album page is called the year view.

[0097] As an example, after the album page switches to a 31-column grid, as shown in Figure 2(b), if the user raises their hand, the album page continues to display 31 columns of images.

[0098] As another example, after the album page is switched to a 31-column grid, as shown in Figure 2(c), if the user keeps the two-finger spacing d4 unchanged, the album page will continue to display 31 columns of images.

[0099] As another example, after the album page switches to a 31-column grid, as shown in Figure 2(d), if the user increases the spacing between two fingers, for example, when the spacing between two fingers increases from d4 to d5, the album page switches from a 31-column grid to a 13-column grid. When the album page includes a 13-column grid, two time capsules, 08 and 09, are displayed on the left side of the album page with preset transparency, each representing a month. The photos in the cell between time capsules 08 and 09 have a shooting date of "July 2024," while the photos in the cells of the row containing time capsule 09 and the rows below it have a shooting date of "August 2024." It can be understood that the user can continue to increase the spacing between two fingers to trigger the phone to increase the number of columns in the grid. For example, if the user continues to increase the spacing between two fingers, the album page switches from a 13-column grid to a 5-column grid; subsequently, if the user continues to increase the spacing between two fingers, the album page switches from a 5-column grid to a 3-column grid.

[0100] It should be noted that this application does not limit the number of image columns displayed when a mobile phone enters a photo album page. For example, the number of image columns displayed each time the mobile phone enters a photo album page can be 3 columns as shown in Figure 1(c), or 5 columns as shown in Figure 1(e). Furthermore, the number of image columns displayed when the mobile phone enters a photo album page this time can be the same as the number of image columns displayed when the phone exits the photo album page last time.

[0101] In other embodiments, the phone also supports scrolling images in response to a single finger gesture on the photo album page.

[0102] For example, Figures 3 and 4 illustrate a scenario where a mobile phone scrolls through images on a photo album page.

[0103] Users can trigger the phone to display more images taken earlier by swiping down. As shown in Figure 3(a), the album page includes two time capsules, 10 and 11, each representing a month. Time capsule 10 indicates the specific shooting date as "July 2024," and time capsule 11 indicates the specific shooting date as "August 2024." Users can press and hold image 455 with a single finger and then swipe down. As shown in Figure 3(b), if a single finger swipes down a distance d6, the album page follows the user's swipe downwards by the same distance d6. If all photos on the current page were taken in July 2024, then time capsule 12 indicates the specific shooting date as "July 2024." As shown in Figure 3(c), the user can continue to press and hold image 455 and slide it down a distance d7. In response to the user's sliding action, the album page slides down a distance d7. If all photos on the current page were taken in June 2024, then the specific shooting date indicated by Time Capsule 13 is "2024.06". Typically, the sliding distance of the downward follow-up sliding action is equal to the distance the album page scrolls down. The longer the downward follow-up sliding action, the more content is displayed when the album page scrolls down.

[0104] Users can also trigger the phone to display more images taken later by swiping upwards. As shown in Figure 4(a), the specific shooting date indicated by Time Capsule 14 in the album page is "February 2024". Users can press and hold image 350 with one finger and start swiping upwards. As shown in Figure 4(b), if the single finger swipes upwards a distance d8, the album page will also swipe upwards a distance d8 in response to the user's swipe. If all photos on the current page were taken in March 2024, then Time Capsule 15 will indicate the specific shooting date as "March 2024". As shown in Figure 4(c), users can continue to press and hold image 350 and swipe upwards a distance d9. In response to the user's swipe, the album page will also swipe upwards a distance d9. At this point, the current page includes two Time Capsule 16 and Time Capsule 17, each representing a month. The photos in the grid between Time Capsule 16 and Time Capsule 17 were taken in March 2024, while the photos in the rows containing Time Capsule 17 and below were taken in April 2024. Typically, the upward swipe distance is equal to the distance the album page scrolls upwards. The longer the upward swipe distance, the more content is displayed when the album page scrolls upwards.

[0105] In the above embodiments, the album page includes multiple grids, each displaying one image. An image is also referred to as a texture image. It should be noted that, due to size limitations, this application embodiment only shows the texture image in a grid with three levels of resolution. It is understood that as the resolution increases, each grid may include a smaller texture image. To display multiple images on the album page, this application provides a drawing scheme for a grid interface based on a View control. The View control's size is greater than or equal to the screen size and can be considered a container for displaying images.

[0106] For example, Figure 5 shows a schematic diagram of a View control set up for an album page.

[0107] After the phone receives a click on the Gallery icon, it starts the Gallery application and initializes a View control. As shown in Figure 5, the size of the View control is greater than or equal to the size of the display screen / display window. Taking a display screen size of 1300 pixels wide * 2875 pixels high as an example, the phone can divide the width of the display screen (1300 pixels) by the minimum setting of 3, thus obtaining a side length of 434 pixels for each grid. Then, the phone can divide the height of the display screen (2875 pixels) by the side length of each grid (434 pixels), and add 1 to obtain the number of rows in the drawing area: 8 rows. It should be noted that at setting 3, the phone can determine that a maximum of 7 rows can be displayed. Setting the drawing area to 8 rows ensures that the size of the drawing area sent to the display screen is larger than the size of the display screen, thus preventing blank spaces on the display screen and ensuring the vertical scrolling of the View control. The vertical scrolling of the View control can be referred to the description of the following embodiment, which will not be repeated here.

[0108] As shown in Figure 5, at level 3, the grid interface drawn in the View control's drawing area is a 3-column * 8-row grid. Each grid displays one image. This image can be a thumbnail of a photograph or a thumbnail of a frame from a video. When an image is a thumbnail of a photograph, clicking the thumbnail will display the photograph in full screen on the phone. When an image is a thumbnail of a frame from a video, clicking the thumbnail will play the video in full screen on the phone.

[0109] In a grid-based interface rendering scheme based on View controls, electronic devices typically draw the image in each grid sequentially. Specifically, the CPU calls the ondraw() method to send drawing instructions (also known as drawing tasks) to the GPU.

[0110] For example, consider a View control with a drawing area comprising 13 columns * 35 rows, totaling 455 grids. As shown in Figure 6, the CPU can create a View control larger than the screen size. When the user triggers a zoom operation, switching the electronic device from 5 columns to 13 columns, the CPU can send the drawing task of 455 images to the GPU. The GPU reads images 1 through 455 from the data cache module and draws them sequentially into each grid of the drawing area. Each image is a bitmap with a width of 100 pixels and a height of 100 pixels. For 455 images, the GPU performs a total of 455 drawing processes. Experimental data shows that the time from the CPU sending the drawing task to the GPU to the GPU sending the image to the screen is approximately 6 milliseconds (ms).

[0111] For example, consider a View control with a drawing area comprising 31 columns * 70 rows, totaling 2170 grids. As shown in Figure 7, the CPU can create a View control larger than the screen size. When the user triggers a zoom operation to switch the electronic device from 13 columns to 31 columns, the CPU can send the drawing task of 2170 images to the GPU. The GPU reads images 1 to 2170 from the data cache module and draws them sequentially into each grid of the drawing area. Each image is a bitmap with a width of 100 pixels and a height of 100 pixels. For 2170 images, the GPU performs a total of 2170 drawing processes. Experimental data shows that the time from the CPU sending the drawing task to the GPU to the GPU sending the image to the screen is approximately 35ms.

[0112] Relevant data requires that when the display refresh rate is 120 Hz and the device is under load, the rendering time of the grid interface should be controlled within 5ms. Based on the description of the above embodiment, when there are many images to be displayed in the grid interface, the CPU will issue a large number of rendering instructions to the GPU. This requires the GPU to render a large number of images, resulting in a long rendering time. For example, rendering 2170 images takes 35ms, which far exceeds the required 5ms. This causes the grid interface to stutter and drop frames, affecting the user experience.

[0113] In view of the above problems, this application provides a drawing scheme for a grid interface based on image stitching. In this scheme, the electronic device can stitch together the images to be displayed in the grid interface sequentially according to their numbers, stitching together every N adjacent images into a long strip-shaped stitched image, and storing the stitched image in a high-density bitmap loader (also known as a bitmap data cache module). Specifically, the number of the last image to be stitched in the i-th stitched image differs from the number of the first image to be stitched in the (i+1)-th stitched image by 1. The height of a stitched image is equal to the height of one image to be displayed, and the width of a stitched image is equal to the sum of the widths of the N images to be displayed. i is a positive integer, and N is an integer greater than or equal to 2. After the GPU receives the drawing instructions from the CPU, the GPU can read the stitched images from the high-density bitmap loader and draw them sequentially onto the View control.

[0114] In traditional grid-based graphics rendering, if there are M images to be displayed, the GPU renders M images in M ​​steps. However, in the grid-based rendering scheme based on image stitching provided in this application, if there are M images to be displayed, by stitching together every N adjacent images into a single stitched image, the number of images rendered by the GPU can be reduced from M to a maximum of M / N images. This correspondingly reduces the number of times images are rendered, thereby improving the GPU's processing speed. It's understandable that the larger the value of M, the more significant the reduction in the number of images rendered and the more significant the improvement in GPU processing speed.

[0115] In the grid interface drawing scheme based on image stitching provided in this application, an image to be displayed is referred to as an image to be stitched. The image attributes of the image to be stitched and the stitched image can be bitmap.

[0116] For example, Figure 8A is a schematic diagram of loading images to be stitched in a high-density data loader provided by this application; Figure 8B is a schematic diagram of loading stitched images in a high-density bitmap loader provided by this application.

[0117] Electronic devices can preload images to be displayed (also known as images to be stitched together) into a high-density data loader based on the current application scenario. For example, when a photo album page switches from a 5-column daily view to a 13-column monthly view, the electronic device can trigger the high-density data loader to load images to be stitched together based on the adapter position (AP) index value (referred to as AP value) of the images on the current screen. As shown in Figure 8A, the AP values ​​of the images to be stitched together loaded in the high-density data loader are "1", "2", "3", ..., "460", and each image to be stitched together is 100 pixels wide * 100 pixels high. The smaller the AP value, the earlier the electronic device acquires the image; the larger the AP value, the later the electronic device acquires the image. "Image acquisition time" refers to the time when the original image or video is stored in the album. This original image or video may be taken with a camera, downloaded from a network device, or obtained through a screenshot. The image to be stitched together refers to a thumbnail of the original image or video.

[0118] After the high-density data loader completes loading the images to be stitched, as shown in Figure 8B, the CPU can stitch together every N images with adjacent / connected AP values ​​into one image, in descending order of AP value. Each image to be stitched participates in only one stitching process. Each stitched image corresponds to an index value. During the stitching process, the index values ​​of each stitched image increase sequentially according to the stitching time order. Taking N=10 as an example, the electronic device can stitch together 10 images with AP values ​​of (i-1)*10+1; (i-1)*10+2; ...; (i-1)*10+10 into one stitched image, where i is a positive integer. For example, an electronic device can stitch together 10 images with AP values ​​of "1", "2", ..., "10" into a single stitched image and add an index "Index1" to this stitched image; stitch together 10 images with AP values ​​of "11", "12", ..., "20" into a single stitched image and add an index "Index2" to this stitched image; ...; stitch together 10 images with AP values ​​of "451", "452", ..., "460" into a single stitched image and add an index "Index46" to this stitched image. The resolution of a stitched image is 1000 pixels wide and 100 pixels high. In this way, the number of images rendered by the GPU is reduced from 455 to 46, which is approximately a tenfold reduction.

[0119] For example, Figure 9 is a schematic diagram of stitching and drawing based on stitched images in a high-density bitmap loader provided in this application. After the GPU receives the drawing instruction from the CPU, the GPU can read the stitched image from the high-density bitmap loader and draw the stitched image onto the View control. As shown in Figure 9, the GPU can respond to the drawing instruction, taking the upper left corner of the drawing area in the View control as the origin, with positive horizontal direction to the right and negative horizontal direction to the left, and perform the following drawing operations in sequence: draw the stitched image with index "Index1" to columns 1 to 10 of row 1, draw the stitched image with index "Index2" to columns 11 to 20 of row 1, draw the stitched image with index "Index2" to columns -3 to 7 of row 2, and draw the stitched image with index "Index3" to... In the second row, columns 8 through 17, the stitched image with index "Index3" is drawn to columns -6 through 4 in the third row; the stitched image with index "Index4" is drawn to columns 5 through 14 in the third row; the stitched image with index "Index4" is drawn to columns -9 through 1 in the fourth row; the stitched image with index "Index5" is drawn to columns 2 through 14 in the fourth row, and so on. The GPU can draw the stitched image "Index46" to columns 9 through 18 in the last row. Thus, the number of times the GPU draws the image is reduced from 455 to 74, which is approximately a 6-fold reduction.

[0120] It should be noted that Figures 8B and 9 are illustrated using the example of stitching 10 images together to form a long strip shape. This does not limit the scope of this application. The number of images stitched together each time can be adjusted according to usage requirements. For example, when the maximum grid layout is 31 columns, 30 images can be stitched together to form a single image.

[0121] To more clearly compare the traditional method of drawing grid interfaces with the grid interface drawing scheme based on spliced ​​images provided in this application, the following explanation uses a View control drawing area that includes 31 columns * 70 rows, with a total of 2170 images as an example.

[0122] As shown in Figure 10, the CPU can create a View control. The CPU can stitch together images in the high-density data loader shown in Figure 7. For example, it can stitch images 1 to 30 in the high-density data loader into a stitched image with index "Index1" and store it in Buffer1 of the high-density bitmap loader; it can stitch images 31 to 60 in the high-density data loader into a stitched image with index "Index2" and store it in Buffer2 of the high-density bitmap loader; it can stitch images 61 to 90 in the high-density data loader into a stitched image with index "Index3" and store it in Buffer3 of the high-density bitmap loader; and so on, it can stitch images 2161 to 2170 in the high-density data loader into a stitched image with index "Index73" and store it in Buffer73 of the high-density bitmap loader. When the CPU receives a user-triggered zoom operation to switch the electronic device from 13 columns to 31 columns, it can send the drawing task from the stitched image at index "Index1" to the stitched image at index "Index73" to the GPU. The GPU reads the stitched image from index "Index1" to index "Index73" from the high-density bitmap loader and draws the read image sequentially into the View control at 30-grid intervals. Each image is a bitmap with a width of 1000 pixels and a height of 100 pixels. Experimental data shows that the time from the CPU sending the drawing task to the GPU to the GPU sending the image to the display has been reduced from approximately 35ms to 3ms, meeting the performance requirements of the relevant data when the display refresh rate is 120Hz and the device is under load.

[0123] The above-mentioned grid interface drawing scheme based on image stitching includes two processes: The first process is that the CPU is responsible for stitching the images to be stitched together sequentially according to their AP values, stitching together every N images with adjacent AP values ​​into a single stitched image, and storing this stitched image in a high-density bitmap loader. Due to the added image stitching process, this process is slightly more time-consuming than the traditional grid interface drawing method. The second process is that after the GPU receives the drawing instructions from the CPU, it can read the stitched image from the cache and draw the stitched image onto the drawing area of ​​the View control. By stitching the images, the number of times the images are drawn is reduced, thus shortening the time consumption compared to the traditional grid interface drawing method.

[0124] For rendering scenarios with a small number of images to be displayed, such as the daytime view shown in Figure 1(c) or Figure 1(e), the GPU needs to render a small number of images. The first process mentioned above increases the time consumption, while the second process mentioned above does not significantly reduce the time consumption. This results in the two processes not significantly reducing the overall time consumption.

[0125] For rendering scenarios with a large number of images to be displayed, such as the monthly view shown in Figure 1(f) or the yearly view shown in Figure 2(a), the GPU needs to render a large number of images. Although the first process mentioned above increases the time consumption to a certain extent, the second process mentioned above has a very obvious effect on shortening the time consumption, which leads to a significant reduction in the overall time consumption of the two processes.

[0126] In one possible use case, regardless of the number of columns of images in the grid interface, users have a need for touch interaction with the grid, such as selecting multiple original images by clicking on a grid and then combining the selected original images into a video. Based on this, the grid interface drawing scheme based on stitched images provided in this application can be applied to views at various levels, such as day, month, or year views. In this case, the aforementioned View control can be a custom RecyclerView control. The custom RecyclerView control inherits from the RecyclerView control. The RecyclerView control is a special type of View control composed of multiple item views in a grid format, each item view displaying an image view. Each item view supports responding to user touch operations on individual item views. The custom RecyclerView extends the functionality of the RecyclerView control, supporting scrolling and zooming. For example, when a user swipes their finger up or down on the screen, the custom RecyclerView scrolls accordingly, causing the grid interface to scroll up and down as well; or, when a user zooms in or out on the grid interface, the custom RecyclerView zooms in or out accordingly, causing the grid interface to zoom in or out as well. Each ItemView supports two ways of drawing controls: one is to display multiple controls in a multi-view layout; the other is to convert each view in the multi-view layout into a drawable object and place it in a drawable list, then trigger the drawing of each drawable individually.

[0127] In another possible use case, when the grid interface includes fewer columns (3 or 5 columns) of images, users typically have a need to touch the grid, such as triggering the display of the original photo or video corresponding to the thumbnail by clicking on a grid. When the grid interface includes more columns (13 or 31 columns) of images, it is generally used for quickly browsing multiple photos, and in this case, users generally do not have a need to touch the grid. Based on this, the grid interface drawing scheme based on stitched images provided in this application is only applied to the monthly or yearly view. For the daily view, the traditional grid interface drawing scheme shown in Figure 6 or Figure 7 is still used. In this case, as shown in Figure 11, the embodiments of this application specifically divide the above-mentioned View control into two types: low-density View (which can be called the second view control) and high-density View (which can be called the first view control). Among them, the low-density View is implemented through a custom RecyclerView control and is used for low-level views (such as the daily view), supporting scrolling or zooming; the high-density View is implemented through Android's View control and is used for high-level views (such as the monthly or yearly view), supporting scrolling or zooming.

[0128] Based on the description above, the custom RecyclerView control's ItemView supports responding to user touch operations on individual ItemViews. For low-density views (such as day views), users generally have a need for grid-based touch operation, so a custom RecyclerView is used as a low-density view.

[0129] Unlike a custom RecyclerView, the Android-based View control is a standard View control, which can be viewed as a blank canvas. This offers advantages in terms of performance and memory efficiency. However, the Android-based View control lacks the concept of ItemView and does not support responding to user touch input on individual ItemViews. For high-density views (such as monthly or yearly views), typically used for quickly viewing multiple photos, users generally do not require touch input on the grid. To save performance and memory, the Android-based View control can be used as a high-density View.

[0130] In some embodiments, as shown in FIG11, this application provides three types of caches: 1. a low-density data loader, used to store the original, unstitched image prepared for a low-density view; 2. a high-density data loader (also known as an Item data cache module), used to store the unstitched image prepared for a high-density view; 3. a high-density bitmap loader, used to store the stitched image prepared for a high-density view, which is obtained by stitching together the images within the storage range of the high-density data loader.

[0131] For scenarios where the number of images to be displayed is small, the daily view rendering module can read images (unstitched images) from the low-density data loader and render them onto the low-density view, resulting in the daily view as shown in Figure 1(c) or Figure 1(e). For scenarios where the number of images to be displayed is large, the year view rendering module or month view rendering module can first load the images to be stitched into the high-density data loader, then read the stitched image from the high-density bitmap loader, and render the stitched image onto the high-density view, resulting in the month view as shown in Figure 1(f) or the year view as shown in Figure 2(a).

[0132] To facilitate understanding, taking a photo album window with dimensions of 1300 pixels wide and 2875 pixels high (the photo album window is currently displayed in full screen) as an example, the following examples illustrate the specific implementation methods of low-density views and high-density views.

[0133] When the grid interface includes a limited number of images, such as 3 or 5 columns, the electronic device can draw relevant feature icons (also called controls) on the thumbnails based on the business status of the photos and videos. As shown in Figure 1(c), the bottom right corner of the cloud photo grid includes a cloud control to indicate that the photo has been synchronized to the cloud; the top right corner of the favorite photo grid includes a favorite control to indicate that the photo has been favorited by the user. In some scenarios, the electronic device needs to support responding to user clicks on a control to achieve the corresponding function. However, Android's View control does not support touch operations on controls and therefore cannot achieve the corresponding function. For this reason, this application provides a grid interface display scheme based on a custom RecyclerView control (i.e., a low-density View). The custom RecyclerView control is larger than the screen size. The custom RecyclerView consists of multiple ItemViews in a grid format, each ItemView displaying an image view and supporting user touch operations on individual ItemViews. Each ItemView supports two methods for drawing controls: one is to display multiple controls in a multi-view layout; the other is to convert each view in the multi-view layout into a drawable object and add it to a drawable list, then trigger the drawing of each drawable separately. Regardless of the method used, custom RecyclerView controls can support touch operations on controls within a single ItemView.

[0134] For example, Figures 12 and 13 are schematic diagrams of a low-density View (implemented based on a custom RecyclerView control) provided in this application.

[0135] When the album window needs to display 3 or 5 columns of images, the total number of images in the album window is relatively small, so a single low-density view can be used. If the scaling factor of the low-density view is set to 1.0 when the album window displays 3 columns, then when the album window displays 5 columns, the low-density view needs to be shrunk by 3 / 5 = 0.6 times. Based on this, the size of the low-density view is calculated as follows: When the album window needs to display 3 columns of images, divide the width of the album window (1300 pixels) by 3 columns to get the width / height of each grid cell as 434 pixels; divide the height of the album window (2875 pixels) by the height of each grid cell as 434 pixels to get the number of rows of images that the album window needs to display as 7 rows. It should be noted that, in order to facilitate the execution of the View control scrolling scheme provided in the following embodiments when scrolling up and down without leaving blank spaces, an extra row can be drawn, that is, 7 rows plus 1 row. Finally, 8 rows were determined as the actual number of rows in the daily view drawing area. For similar reasons, the actual number of rows in the drawing areas of the monthly and yearly views is one more than the calculated number. Then, the width of each grid (434 pixels) was multiplied by 5 columns, resulting in a low-density view width of 2170 pixels. The low-density view width (2170 pixels) was multiplied by the album window height (2875 pixels), then divided by the album window width (1300 pixels), and then divided by the height of each grid (434 pixels), resulting in a low-density view row count of 12 + 1 = 13 rows. Thus, the low-density view consists of 5 columns * 13 rows of grids, with each grid measuring 434 pixels wide * 434 pixels high. As shown in Figure 12, when the scaling factor of the low-density view is set to 1.0, the daily view drawing area (3 columns * 8 rows of grids) of the low-density view is displayed on the screen at a scaling factor of 1.0. As shown in Figure 13, when the scaling factor of the low-density view is set to 0.6, the day view drawing area (5 columns * 13 rows of grid) of the low-density view is sent to the display screen at a scaling factor of 0.6.

[0136] When a grid interface includes a large number of columns of images, such as 13 or 31 columns, the electronic device does not need to draw controls on the thumbnails. In this case, the electronic device does not need to support user clicks on any control to achieve the corresponding function. Android's View control can fully meet the display function of a grid interface, and the implementation is simpler. For this reason, this application provides a grid interface display solution based on Android's View control (i.e., high-density View). The high-density View extends the functionality of Android's View control, supporting scrolling and zooming, but it does not have the concept of ItemView.

[0137] For example, Figures 14 and 15 are schematic diagrams of a high-density View (Android-based View control implementation) provided in this application.

[0138] When the album window needs to display 13 or 31 columns of images, the electronic device can create a high-density view with a size greater than or equal to that of the album window. For example, if the album window is 1300*2875 pixels wide, the high-density view is 3100*7000 pixels wide. The high-density view can be considered a blank canvas. The electronic device can draw a grid interface in the high-density view based on the number of columns of images to be displayed. As shown in Figure 14, the electronic device can draw a grid interface (13 columns * 30 rows) in the month view drawing area of ​​the high-density view and send the grid interface to the display screen at a scaling factor of 1.0. As shown in Figure 15, the electronic device can draw a grid interface (31 columns * 70 rows) in the year view drawing area of ​​the high-density view and send the grid interface to the display screen at a scaling factor of 13 / 31 = 0.42.

[0139] During the display of the grid interface, the electronic device can respond to the user's zoom operation by switching between a low-density view and a high-density view to change the number of grid columns in the current grid interface.

[0140] For example, Figure 16 is a schematic diagram of switching between low-density view and high-density view provided in this application.

[0141] For example, a low-density view can be as shown in Figures 12 and 13, and a high-density view can be as shown in Figures 14 and 15. As shown in Figure 16, when the user reduces the distance between their two fingers, the electronic device switches from a low-density view to a high-density view. The high-density view uses a grid-based interface drawing scheme based on Android's View controls, which uses stitched images. This is understandable because the number of images to be displayed in this scenario is large, thus significantly reducing the overall processing time. When the user increases the distance between their two fingers, the electronic device switches from a high-density view to a low-density view. The low-density view uses a grid-based interface drawing scheme based on a custom RecyclerView, which uses non-stitched images. This is understandable because the number of images to be displayed in this scenario is small, thus reducing the processing time. Furthermore, since stitching images is not required, it does not increase CPU power consumption compared to a grid-based interface drawing scheme based on stitched images.

[0142] The above embodiments introduce two types of Views: low-density View and high-density View. Both low-density and high-density Views involve two indices: one for the adapter position (AP) and the other for the layout position (LP).

[0143] In this context, AP is an index specifically set by the adapter for the content displayed on the screen, representing the number of the image displayed in the grid. LP is an index created by the LayoutManager, representing the position of the grid within the View control. In the native logic of the Android system, LP cannot be customized, but in this embodiment, the electronic device can change the specific value of LP based on scaling factors, scaling center, and scrolling operations. In a low-density View, LP is consecutively numbered from the first row and first column of the entire low-density View to the last row and last column of the entire low-density View. In a high-density View, LP is consecutively numbered from the first row and first column of the high-density View's drawing area to the last row and last column of the high-density View's drawing area.

[0144] For example, taking a low-density view as an example, Figure 17 shows a schematic diagram of LP and AP in a grid interface.

[0145] For ease of understanding, let's take an example where the maximum low-density view level is 5, and the width and height of each ItemView are equal to the screen width divided by 3, meaning the minimum level is 3. As shown in Figure 17(a), before receiving the user's two-finger zoom operation, the low-density view actually displayed on the screen is shrunk to be equal to the screen width, and the actual layout position index and actual adaptation position index of each ItemView are equal. For example, the ItemView located in the first row and first column at the top left corner of the screen has an actual layout position index LP = 0 and an actual adaptation position index AP = 0, while the ItemView located in the last row and last column at the bottom right corner of the screen has an actual layout position index LP = 49 and an actual adaptation position index AP = 49. When the user wants to view the magnified image of the grid (i.e., ItemView) enclosed by the dashed frame, the user can place two fingers within the area enclosed by the dashed frame and gradually increase the distance between the two fingers. In response to the two-finger zoom operation, the phone zooms in on the entire low-density view centered on the ItemView enclosed by the dashed frame. The ItemView displayed on the screen is updated to 3 columns.

[0146] As shown in Figure 17(b), the mobile phone can renumber the actual adaptation position index values ​​corresponding to the ItemViews in columns 1 to 3 of the low-density View. The numbering rules for the actual adaptation position index values ​​corresponding to these 3 columns of ItemViews are as follows: the actual adaptation position index of the ItemView enclosed by the dashed box remains AP = 6; starting from the ItemView enclosed by the dashed box, the AP value of each ItemView before the ItemView enclosed by the dashed box is decremented by 1, and the AP value of each ItemView after the ItemView enclosed by the dashed box is incremented by 1. For the ItemViews in columns 4 to 5 of the low-density View, the mobile phone can assign an AP value of -1 to each ItemView. Here, AP = -1 means that the actual adaptation position value is invalid. At this time, an ItemView can display a blank image or maintain the image shown in Figure 10(a). It can be seen that there is a correspondence between the actual layout position index and the actual adaptation position index value of an ItemView. When scaling a low-density view with the ItemView whose layout position index is LP=6 as the scaling center, the actual adaptation position index value of the ItemView on the screen is changed, but the actual layout position index value of each ItemView remains unchanged. This scaling scheme ensures that the content centered on the two fingers remains unchanged and guarantees the continuity of the image displayed on the screen. As an example, users can also swipe their fingers up and down on the display to trigger the phone to update LP and AP, thereby displaying a scrolling grid interface; this will not be elaborated further here. It should be noted that Figure 17 illustrates the encoding method of LP and AP for a low-density view. The encoding method of LP and AP for a high-density view is similar and will not be elaborated further here.

[0147] For example, Figure 18 shows a software architecture diagram of an electronic device.

[0148] As shown in Figure 18, electronic devices can adopt a layered architecture, dividing the software into several layers, each with a clear role and division of labor. Layers communicate with each other through software interfaces. In some embodiments, the software layers of the software architecture are divided from top to bottom as follows: application (APP) layer, application framework (FWK) layer, system library, and kernel layer. This software architecture runs on top of the hardware layer, which may include GPUs, displays, and sensors, among other things.

[0149] The application layer can include a series of application packages, such as a camera app and a gallery app. The camera app can use the webcam to take photos and videos and store them in the gallery app. The gallery app can not only manage the photos and videos taken, but also manage screenshots and share images.

[0150] The gallery application may include a scale gesture detector, a receive touch event layer control, a homepage control module, a drawing management module, a grid main control module, a custom layout manager, a grid-style layout manager, a view control, a low-density data loader, a high-density data loader, and a high-density bitmap loader.

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

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

[0153] If a two-finger touch operation is received, the ReceiveTouchView control passes the two-finger touch data to the zoom gesture detector. Based on the two-finger touch data, the zoom gesture detector executes the grid interface zoom method provided in this application, as detailed in the following embodiments, which will not be repeated here. As an example, the zoom gesture detector can be a custom RecyclerView or an interface of a View.

[0154] For the specific functions of other functional modules of the gallery application, please refer to the description in the following embodiments, which will not be repeated here.

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

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

[0157] The system library can include multiple functional modules, such as the surface manager, media libraries, a 2D graphics engine (e.g., SGL), and a 3D graphics processing library (e.g., OpenGL ES). Within the system library, the Android Runtime includes the core libraries and the virtual machine. The Android Runtime is responsible for the scheduling and management of the Android system. The core libraries consist of two parts: one part contains the functionalities that the Java language needs to call, and the other part contains the core Android libraries. The application layer and application framework layer run in the virtual machine.

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

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

[0160] Based on the functional modules shown in Figure 18 above, the specific interaction process between the various functional modules will be explained in detail below with reference to Figures 19 to 26 during the implementation of the grid interface drawing scheme based on spliced ​​images.

[0161] In some embodiments, when the electronic device receives a user's operation on a photo album card, it first initializes the low-density view and the high-density view, and by default displays a 3-level daily view based on the low-density view. The user can trigger the electronic device to display a 5-level daily view based on the low-density view by zooming. Then, if the user continues to decrease the distance between their two fingers, the electronic device displays a 13-level monthly view based on both high and low density views. Subsequently, if the user continues to decrease the distance between their two fingers, the electronic device displays a 31-level yearly view based on both high and low density views.

[0162] For example, Figure 19 shows a flowchart of a method for switching from a low-density view to a high-density view in a zoomed scene.

[0163] As shown in Figure 19, the method may include the following S1 to S29.

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

[0165] The aforementioned cycle, also known as the deployment cycle or reporting cycle, is the cycle for the touch driver to collect user touch operations.

[0166] Taking a touch driver that collects data 240 times per second as an example, the period T = 1 / 240 = 4.16 ms, meaning the touch driver collects touch data once every 4.16 ms. If, during a certain period, the user presses the touchscreen with one or two fingers, the touch driver can determine the touch position of the single or two fingers on the display screen based on voltage changes, etc.

[0167] S2, the touch driver receives the user's click on the gallery application icon (which can be called the fourth operation) and launches the gallery application. The homepage control module displays the album card page.

[0168] For example, when a user wants to view pictures or videos in the Gallery app, the user can click the Gallery icon 01 as shown in Figure 1(a). The touch driver receives the user's click operation on the Gallery icon 01 and passes the click operation to the application processor. The application processor launches the Gallery app corresponding to the Gallery icon 01. After launching the Gallery app, the Gallery app displays a card page as shown in Figure 1(b). The card page provides album cards such as Camera, All Photos, and Videos; therefore, the card page is also called an album card page. Each album card is an entry point to an album.

[0169] It should be noted that the gallery application typically displays the album card page by default. If the user clicks on a photo, memory, or creation in the bottom bar as shown in Figure 1(b), the homepage control module will switch to another page.

[0170] S3, the touch driver receives the user's click on a card in the album card page and notifies the gallery application. The gallery application notifies the grid main control module to load the low-density view (i.e., the second view control) and the high-density view (i.e., the first view control).

[0171] S4, the grid control module loads the low-density view and the high-density view. The low-density view and the high-density view are initialized. Low-density view initialization includes: initializing the number of columns in the two daily view levels and initializing the size of the low-density view. High-density view initialization includes: initializing the number of columns in the monthly view and the yearly view, and initializing the size of the high-density view.

[0172] Low-density Views inherit from the RecyclerView control, while high-density Views inherit from Android-based View controls. RecyclerView and Android-based View controls are two different types of View controls. RecyclerView is a special type of View control, composed of multiple ItemViews arranged in a grid. Each ItemView displays an image view, and each ItemView supports user touch input on individual ItemViews, making it suitable for day views. Android-based View controls are ordinary View controls, which can be viewed as a blank canvas and do not have the concept of ItemViews. The individual grids in Android View controls are not containers and do not support user touch input on individual ItemViews, but they offer advantages in performance and memory efficiency, making them suitable for month and year views.

[0173] The initial sizes of the low-density view and the high-density view can be equal or unequal. Both low-density and high-density views support scaling at different levels. As shown in Figures 12 and 13, the album window is 1300*2875 pixels wide, the low-density view is 2170*5642 pixels wide, and the high-density view is 3100*7000 pixels wide. The low-density view consists of multiple ItemViews arranged in a grid, while the high-density view is a blank canvas and does not have the concept of ItemViews.

[0174] It should be noted that the embodiments in this application are illustrated using a low-density view comprising a daily view with two levels, and a high-density view comprising a monthly view with one level and a yearly view with one level. In actual implementation, the daily view may include one level, three levels, or more levels, and the monthly and yearly views may include two or more levels. Furthermore, the number of columns in each level of the low-density and high-density views can be adjusted according to the screen width, window width, etc.

[0175] S5, the grid main control module notifies the low-density View to initialize the first gear (gear 3) day view.

[0176] S4 above initializes the number of columns in the low-density view at the first level (level 3), for example, setting it to 3 columns. The difference from S4 is that S5 also requires specifying the specific location of the day view drawing area in the low-density view, such as which row and column of the grid the day view drawing area is located in.

[0177] S6, the low-density view triggers the low-density data loader to load data according to the default settings (AP range 1).

[0178] Accordingly, the low-density data loader loads the original image based on AP range 1 and updates the query window range to range 1.

[0179] As an example, the default AP range for electronic devices is [1, x1]. AP = 1 represents the thumbnail of the first picture or video in the album, and AP = x1 represents the thumbnail of the x1th picture or video in the album. Here, x1 is a preset value, which is the total number of grids in the grid interface when x1 is greater than or equal to 3.

[0180] As another example, the default AP range 1 for electronic devices is [x1, y1]. AP = y1 represents the thumbnail of the last picture or video in the album, and AP = x1 represents the thumbnail of the x1th picture or video in the album. Here, y1 - x1 is a preset value, representing the total number of grid cells in the grid interface when y1 - x1 is greater than or equal to level 3.

[0181] S7, Low-density View retrieves images from the first AP range from the query window range range1 according to the default settings.

[0182] The first AP range belongs to the query window range range1. For example, if range1 is [1, x1], the first AP range is [1, x2], and x2 ≤ x1. Taking the first-level daily view as including p rows * q columns as an example, then x2 = p * q, that is, x2 is equal to the total number of cells in the first-level daily view.

[0183] S8, the low-density view draws the first gear (3 gears) of the day view in the day view drawing area based on the image of the first AP range.

[0184] For example, as shown in Figure 1(b), the user can click on the "Camera" card 02. In response to the user's click on the "Camera" card 02, the grid control module loads the low-density view and the high-density view, and initializes the daytime view drawing area of ​​the low-density view in the first position (3rd position). Then, the low-density view can call the ondraw() interface to draw the image of the first AP range in the initialized daytime view drawing area, thus obtaining the grid interface, so that the mobile phone can display the album page as shown in Figure 1(c).

[0185] In the S9, when displaying the daytime view in the first position, the touch driver receives a two-finger press operation from the user and notifies the low-density view.

[0186] S10, the low-density view triggers the loading of the original image based on the AP range 2 of the image on the current screen.

[0187] Accordingly, the low-density data loader determines the AP range 3 based on AP range 2, loads the original image of AP range 3, and updates the query window range to range 2.

[0188] When an electronic device displays the first (level 3) daytime view, if the touch driver receives a two-finger press operation from the user, it indicates a potential need to switch from level 3 to level 5. The low-density view can trigger the loading of the original image for the second (level 5) view based on the AP range 2 of the image currently displayed on the screen. This allows the device to directly read the already loaded original image from the low-density view when switching from level 3 to level 5.

[0189] In this embodiment, the low-density view can update the range of the query window based on the AP of the first cell (which can be represented as startAP1) and the AP of the last cell (which can be represented as endAP1) when displaying the day view of the first level (level 3).

[0190] As an example, the AP of the first image in the updated query window is equal to startAP1 minus a value, and the AP of the last image in the updated query window is equal to endAP1 plus a value. This value represents the number of grids included in the drawing area when the second (5th) day view is displayed on the screen.

[0191] Taking a daily view with startAP = 100, endAP = 123, and the second tier (tier 5) comprising 5 columns * 13 rows = 65 grids as an example, the AP of the first image in the query window range is 100 - 65 = 35, and the AP of the last image is 123 + 65 = 188, i.e., range2 = [35, 188]. It should be noted that if the AP of the first image in the query window range calculated using the above algorithm is negative, it will be corrected to 0 or 1, where 0 or 1 represents the first image in the image library.

[0192] S11, after two fingers are pressed, the touch driver receives the user's operation of reducing the distance between the two fingers and notifies the low-density view.

[0193] S12, the low-density view determines whether the condition for switching from the first gear (gear 3) to the second gear (gear 5) is met based on the distance between two fingers (referred to as the daytime view switching condition).

[0194] In some embodiments, the first gear (gear 3) corresponds to a first scaling factor, and the second gear (gear 5) corresponds to a second scaling factor, where the first scaling factor is greater than the second scaling factor. The average of the first and second scaling factors is taken as the gear switching threshold. A scaling factor Si is calculated based on the user's action of reducing the distance between their two fingers. The scaling factor Si is compared to the gear switching threshold. If Si is less than or equal to the gear switching threshold, then the condition of switching from the first gear (gear 3) to the second gear (gear 5) is met; if the scaling factor Si is greater than the gear switching threshold, then the condition of switching from the first gear (gear 3) to the second gear (gear 5) is not met.

[0195] For example, the touch driver can first receive the user's two-finger press operation, and then receive the user's operation of reducing the distance between the two fingers.

[0196] When the touch driver receives a user's two-finger press operation, it can transmit the coordinates (x11, y11) and (x12, y12) of the two fingers when they are pressed to the zoom gesture detector (not shown in Figure 19). The zoom gesture detector calculates the center coordinates (mBeginFocusx, mBeginFocusy) ​​of the two fingers and the distance d1 between the two fingers based on the coordinates (x11, y11) and (x12, y12).

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

[0198] The distance d1 between the two fingers can be obtained by the following relationship (2):

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

[0200] Then, the touch drive receives the operation of the user to reduce the distance between the two fingers, and transmits the coordinates (xi1, yi1) and coordinates (xi2, yi2) after the two-finger movement operation to the pinch gesture detector. i is an integer greater than or equal to 2. i represents the i-th time of collecting the two-finger operation. The pinch gesture detector calculates the distance di between the two fingers according to the coordinates (xi1, yi1) and coordinates (xi2, yi2).

[0201] Among them, the distance di between the two fingers can be obtained through the following relational expression (3):

[0202] Take the coordinates (xi1, yi1) = (100, 100) and coordinates (xi2, yi2) = (460, 580) after the two-finger movement operation as an example. After the pinch gesture detector calculates that the distance di between the two fingers is 600 pixels, it can be determined that the distance di between the two fingers is greater than the threshold D = 540 pixels, determining that this operation is valid, and calculating the zoom factor Si according to the distance di between the two fingers and the distance d1 between the two fingers.

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

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

[0205] As an example, multiple gears can be preset in the mobile phone, and a switching gear critical point is set between any two adjacent gears. Two adjacent gears mean that no other gears are set between these two gears. If the zoom factor of the small gear is represented by a1, the zoom factor of the large gear is represented by a2, and the switching gear critical point is represented by a3, then the switching gear critical point a3 can be calculated through the following relational expression (5):

[0206] Taking the scaling factor of a low-density view at level 3 as 1.0 and at level 5 as 0.6 as an example, as shown in Table 1, according to the above relationship (5), the critical point for switching between levels 3 and 5 can be calculated to be 0.8.

[0207] Table 1

[0208] After the electronic device obtains the scaling factor Si based on the relation (4), it can compare the scaling factor Si with the switching gear threshold of 0.8. If Si ≤ 0.8, then it can be determined that the daytime view switching condition is met, and the following S13 is executed. If Si > 0.8, then it can be determined that the daytime view switching condition is not met, and it is not necessary to switch from the first gear (gear 3) daytime view to the second gear (gear 5) daytime view.

[0209] S13, Low-density View determines AP range 4 based on zoom center.

[0210] For a specific implementation of determining the AP range based on the scaling center, please refer to the following embodiment describing Figure 20.

[0211] S14, the low-density view retrieves the image of AP range 4 from the query window range range 2.

[0212] S15, the low-density view draws the second-level (5th level) day view in the day view drawing area based on the image of AP range 4. Then, the low-density view sends the second-level (5th level) day view to the display, so that the user can see the second-level (5th level) day view as shown in Figure 1(e).

[0213] After the electronic device displays the second (5th) level of the daytime view, the user can continue to reduce the distance between the two fingers. Alternatively, the user can remove two fingers from the screen and then press the two fingers again.

[0214] S16, after displaying the second-level day view (which can be called the first grid interface), the touch driver receives the user's operation of continuing to reduce the two-finger spacing or the two-finger pressing operation (which can be called the first operation), and notifies the low-density view.

[0215] S17, Low-density View triggers data loading based on the AP range 4 of the image on the current screen.

[0216] Accordingly, the high-density data loader determines the AP range 5 based on AP range 4, loads the original image of AP range 5, and updates the query window range to range 3.

[0217] The "AP range 4" mentioned above refers to the APs from the first cell to the last cell in the second (5th) level day view displayed on the screen. The "query window range" mentioned above refers to the APs from the first image to be stitched to the last image in the high-density data loader.

[0218] When the electronic device displays the second (level 5) day view, if the touch driver receives the user's continued action of reducing the two-finger spacing or pressing two fingers, it indicates that the electronic device may need to switch from the day view to the month view. Since the number of images in the year view is greater than the number of images in the day view and month view, in order to facilitate subsequent image stitching, the electronic device can pre-trigger the loading of the APs corresponding to the year view's images based on the AP range of the second (level 5) day view.

[0219] In this embodiment, the low-density view updates the range of the query window based on the AP (which can be represented as startAP2) of the first cell and the AP (which can be represented as endAP2) of the daily view of the second tier (5 tiers, i.e. the first column number) currently displayed on the screen.

[0220] As an example, the AP of the first image in the updated query window is equal to startAP2 minus a value, and the AP of the last image in the updated query window is equal to endAP2 plus a value. This value represents the number of grid cells included in the drawing area of ​​the year view when it is displayed on the screen.

[0221] Taking a year view with startAP = 3000, endAP = 3065, and 31 columns * 70 rows = 2170 grids as an example, the AP of the first image in the query window range is 3000 - 2170 = 830, and the AP of the last image is 3065 + 2170 = 5235. Therefore, the query window range range3 is [830, 5235]. It should be noted that if the AP of the first image in the query window range calculated using the above algorithm is negative, it should be corrected to 0 or 1, where 0 or 1 represents the first image in the image library.

[0222] S18, Low-density View triggers bitmap loading based on the AP range of the image on the current screen (4).

[0223] Accordingly, the high-density bitmap loader determines the AP range 6 based on the AP range 4, stitches the original images corresponding to the AP range 6 within the range 3 to obtain the stitched image, and updates the bitmap window range to range 4.

[0224] The aforementioned "bitmap window range" refers to the range from the index value of the first stitched image to the index value of the last stitched image in the high-density bitmap loader. The stitched images in the high-density bitmap loader are obtained by stitching the images to be stitched in the high-density data loader in ascending order of AP. It can be understood that after updating the query window range via S17, the electronic device also needs to update the bitmap window range corresponding to the query window range so that the electronic device can draw the moon view based on the updated stitched images.

[0225] When the electronic device displays the second (level 5) day view, receiving a user's action of reducing the two-finger spacing or pressing two fingers via S16 only indicates that the electronic device may be switching from the day view to the moon view. Before the shifting condition is met, the user may increase the two-finger spacing, causing the electronic device to display the first (level 3) day view; the user may also perform a single-finger swipe, causing the electronic device to scroll and display the second (level 5) day view. Since the user's true intention cannot be accurately predicted, to avoid blindly loading a large number of stitched images and burdening the CPU, the low-density view can trigger precise loading of the bitmap window range based on the AP range of the images on the current screen, as follows:

[0226] startindex=(startAP2-M*DrawInfo.mDrawColNum1) / perRowCount;

[0227] endindex=(endAP2+M*DrawInfo.mDrawColNum1) / perRowCount.

[0228] Where M is a preset positive integer, startindex represents the index of the first stitched image in the updated bitmap window range, endindex represents the index of the last stitched image in the updated bitmap window range, startAP2 represents the AP of the first cell in the currently displayed second-level (level 5) day view, endAP2 represents the AP of the last cell in the currently displayed second-level (level 5) day view, perRowCount represents the number of small images stitched together for each stitched image, and DrawInfo.mDrawColNum1 represents the total number of columns in the month view.

[0229] For ease of understanding, let's take Figures 13 and 14 as examples. Assume that in gear 5, startAP2 = 400, endAP2 = 464, DrawInfo.mDrawColNum1 = 13, M = 30, and perRowCount = 10. Then, startindex = (400 - 30 * 13) / 10 = 100, endindex = (464 + 30 * 13) / 10 = 8540, that is, range4 = [100, 8540].

[0230] S19, the low-density view determines whether the condition for switching from the second gear (5th gear) to the third gear (13th gear) is met (called the moon view switching condition).

[0231] The above S16-S18 describe that after displaying the second (5th) level of the day view, the user can continue to reduce the distance between the two fingers, or the user can press the two fingers again after the two fingers leave the screen.

[0232] In one scenario, if the electronic device receives a user's action of reducing the distance between two fingers, it can immediately update the query window range rang3 and the bitmap window range range4, and then determine whether the operation satisfies the condition of switching from the second level (level 5) to the third level (level 13).

[0233] Taking a low-level day view with 3 columns, a high-level day view with 5 columns, and a moon view with 13 columns as an example, and the scaling factor of the day view at level 5 is 0.6. Since the day view is based on a low-density view and the moon view is based on a high-density view, and the number of columns in the low-density view and the high-density view are different, when switching from the day view to the moon view, the moon view can be converted to a low-density view to obtain the scaling factor 3 / 13 = 0.23 corresponding to the moon view. According to the above relationship (5), the critical point for switching between levels 5 and 13 can be calculated as (0.6 + 0.23) / 2 = 0.42. If the scaling factor corresponding to the operation of reducing the two-finger spacing in S12 (which can be called the second operation) is less than or equal to 0.42, then it means that the moon view switching condition is met, and the following S20 can be executed. If the scaling factor corresponding to the operation of reducing the two-finger spacing in S12 is greater than 0.42, it means that the moon view switching condition is not met. The electronic device can continue to detect the user's operation of reducing the two-finger spacing and determine whether the newly detected operation meets the moon view switching condition. It should be noted that the scaling factor corresponding to the operation of reducing the two-finger spacing in S12 can be calculated by the above (1)-(4).

[0234] In one scenario, if the electronic device receives a user pressing two fingers again, it can immediately update the query window range rang3 and the bitmap window range range4. This operation will certainly not meet the condition for switching from the second (5th) level to the third (13th) level. When this condition is not met, the electronic device can continue to detect the user's action of reducing the distance between the two fingers and determine whether the newly detected action meets the moon view switching condition.

[0235] S20, the low-density view notifies the high-density view to switch to the moon view.

[0236] Accordingly, the high-density view determines the AP range 7 based on the zoom center.

[0237] As an example, a high-density view can determine the zoom center based on the zoom operation; then, based on the zoom center, it can determine the drawing area of ​​the grid interface to be drawn within the high-density view; subsequently, based on the LP and AP values ​​of the selected grid at the zoom center, it can determine the AP values ​​of the first and last grids in that drawing area, with each AP value corresponding to one image to be stitched. That is, the AP range from the AP value of the first grid to the AP value of the last grid is 7.

[0238] For a specific implementation of determining the AP range based on the scaling center, please refer to the following embodiment describing Figure 20.

[0239] S21, the high-density view obtains the stitched image corresponding to the AP range 7 from the bitmap window range 4.

[0240] Taking the image stitching within the bitmap window range 4 as an example, where the index values ​​are from "Index1" to "Index100", the AP value of the first cell is 105, and the AP value of the last cell is 500, the image stitching corresponding to AP range 7 is from "Index10" to "Index50". Here, "Index10" is calculated based on the AP value of the first cell (startAP) using the formula index = startAP / perRowCount = 105 / 10 = 10, and "Index50" is calculated based on the AP value of the last cell (endAP) using the formula index = endAP / perRowCount = 500 / 10 = 50.

[0241] S22, the high-density view, based on the stitched image of AP range 7, draws the third position (13th position, i.e., the second column number) of the monthly view (which can be called the second grid interface) in the daily view drawing area. Then, the high-density view displays the monthly view, so that the user can see the monthly view shown in Figure 1(f).

[0242] For the specific implementation of triggering the drawing of the moon view for high-density View, please refer to the description of Figures 23 to 26 in the following embodiments, which will not be repeated here.

[0243] After displaying the moon view, as described in S18 to S21 below, the user can continue to decrease the distance between the two fingers; or, the user can remove the two fingers from the screen and then press the two fingers again.

[0244] S23, after displaying the third-level moon view, the touch driver receives the user's operation of continuing to reduce the two-finger spacing or two-finger pressing operation, and notifies the high-density view.

[0245] S24, High-density View triggers data loading based on the AP range 7 of the image on the current screen.

[0246] Accordingly, the high-density data loader determines the AP range 8 based on AP range 7, loads the original image of AP range 8, and updates the query window range to range 5.

[0247] The "AP range 7" mentioned above refers to the APs from the first cell to the last cell in the third (13th) level of the monthly view displayed on the screen. The "query window range" mentioned above refers to the APs from the first image to be stitched to the last image in the high-density data loader.

[0248] In this embodiment, the high-density view updates the range of the query window based on the AP of the first and last cells in the day view of the third (13th) level currently displayed on the screen.

[0249] As an example, the AP of the first image in the updated query window is equal to the AP of the first cell in the day view minus a certain value, and the AP of the last image in the updated query window is equal to the AP of the last cell in the day view plus a certain value. This value represents the number of cells included in the drawing area of ​​the year view when it is displayed on the screen.

[0250] S25, High-density View triggers bitmap loading based on the AP range 7 of the image on the current screen.

[0251] Accordingly, the high-density bitmap loader determines the AP range 8 based on the AP range 7, stitches the original images corresponding to the AP range 7 within the range 5 to obtain the stitched image, and updates the bitmap window range to range 6.

[0252] When displaying the month view, if the touch driver receives the user's continued action of reducing the two-finger spacing or pressing two fingers, it indicates that the electronic device may need to switch from the month view to the year view. Referring to the description in S18 above, since the user's true intention cannot be accurately predicted, to avoid blindly loading a large number of stitched images and burdening the CPU, the high-density view can trigger precise loading of the bitmap window range based on the AP range of the month view in the following manner:

[0253] startindex=(startAP-M*DrawInfo.mDrawColNum2) / perRowCount;

[0254] endindex=(endAP+M*DrawInfo.mDrawColNum2) / perRowCount.

[0255] Here, startindex represents the index of the first stitched image within the updated bitmap window range, endindex represents the index of the last stitched image within the updated bitmap window range, startAP represents the AP of the first cell in the currently displayed month view, endAP represents the AP of the last cell in the currently displayed month view, perRowCount represents the number of small images stitched together for each stitched image, and DrawInfo.mDrawColNum2 represents the total number of columns in the year view.

[0256] S26, the high-density view determines whether the condition for switching from the third gear (13th gear) to the fourth gear (31st gear) is met.

[0257] The implementation of the "year view switching condition" is similar to that of the "day view switching condition" and "month view switching condition". Please refer to the specific description of the above embodiments, which will not be repeated here.

[0258] If the year view switching conditions are met, then S27 can be executed. If the year view switching conditions are not met, then user operations can continue to be detected, and it can be determined whether the newly detected operations meet the year view switching conditions.

[0259] S27, High-density View determines AP range 10 based on zoom center.

[0260] For a specific implementation of determining the AP range based on the scaling center, please refer to the following embodiment describing Figure 20.

[0261] S28, the high-density view retrieves a stitched image of AP range 10 from the query window range range 6.

[0262] S29, the high-density view draws the fourth position (31 positions) of the year view in the day view drawing area based on the stitched image of AP range 10. Then, the high-density view sends the year view to the display, so that the user can see the year view as shown in Figure 2(a).

[0263] For the specific implementation of triggering the drawing of the year view for high-density View, please refer to the description of Figures 23 to 26 in the following embodiments, which will not be repeated here.

[0264] In the above scheme, when the photo album is opened, the electronic device first displays the daily view with fewer grid columns, followed by the monthly and yearly views with more grid columns, which better suits user habits. When displaying the daily view, since the number of images to be displayed is small, the number of images the GPU needs to render is also small. Using an image stitching scheme would result in little or no reduction in overall processing time. Therefore, a grid interface rendering scheme based on low-density views and non-stitched images is adopted. When displaying the monthly and yearly views, the number of images the GPU needs to render is large. A high-density image stitching grid interface rendering scheme is adopted. By stitching multiple images, the amount of image data and the number of times the GPU renders images are reduced by an order of magnitude, improving the GPU's processing speed and making the photo album interface display smoother.

[0265] It should be noted that when displaying the daily view, users require grid-based touch interaction. The custom RecyclerView control's ItemViews support responding to user touch operations on individual ItemViews; therefore, a custom RecyclerView was used as a low-density view. When displaying the monthly or yearly view, users do not require grid-based touch interaction. Android-based view controls offer advantages in performance and memory efficiency; therefore, Android-based view controls were used as high-density views.

[0266] The following section, with reference to Figure 20, explains the specific scheme for determining the AP range based on the scaling center in a high-density view.

[0267] As shown in Figure 20, the scheme may include the following (1) to (8).

[0268] (1) Determine the scaling center (pointx, mBeginFocusy), the column number of the first column of the next level display area in the high-density view (Index1), and the column number of the last column of the next level display area in the high-density view (Index2).

[0269] Optionally, the high-density view can also determine the row number (Line1) of the first row of the display area of ​​the next tier in the high-density view, and the row number (Line2) of the last row of the display area of ​​the next tier in the high-density view. Based on Index1, Index2, Line1, and Line2, the AP of the first cell and the AP of the last cell in the display area of ​​the next tier can be determined.

[0270] The zoom center (pointx, mBeginFocusy) ​​can be determined as follows: Determine the first distance (screenRectF.left), the second distance (X1), the third distance (X2), and the first width (screenRectF.width). The first distance (screenRectF.left) is the distance from the left edge of the display area of ​​the first grid interface in the high-density view to the left edge of the high-density view; the second distance (X1) is the distance from the left edge of the display area corresponding to the second column number in the high-density view to the left edge of the high-density view; the third distance (X2) is the distance from the right edge of the display area corresponding to the second column number in the high-density view to the left edge of the high-density view; and the first width (screenRectF.width) is the width of the display area of ​​the first grid interface in the high-density view. Based on the first distance (screenRectF.left), the second distance (X1), the third distance (X2), and the first width (screenRectF.width), determine the first coordinate value (centerX), which represents the distance from the zoom center to the left edge of the high-density view. Map the first coordinate value onto the screen to obtain the second coordinate value, pointx. The second coordinate value, pointx, represents the distance from the zoom center to the left edge of the screen. The position corresponding to the second coordinate value, pointx, and the third coordinate value, mBeginFocusy, is determined as the first position. The third coordinate value, mBeginFocusy, represents the distance from the center of the two fingers to the top edge of the screen.

[0271] (2) Determine the LP value (also known as selectLP) of the selected cell at the zoom center, and the AP value (also known as selectAP) of the selected cell at the zoom center.

[0272] The selected grid cell for zoom center refers to the grid cell where the zoom center's coordinates are located.

[0273] The following steps can be performed on each cell in a high-density view:

[0274] (3) Determine the number of columns (LineNum) and LP value of a cell in a high-density view.

[0275] The column number lineNum of the cell to be adjusted can be determined according to the following formula:

[0276] LineNum=LP%maxShowSpan+1.

[0277] Among them, maxShowSpan represents the maximum gear (e.g., 31 gears).

[0278] (4) Determine whether the condition Index1≤LineNum≤Index2 is met.

[0279] If Index1≤LineNum≤Index2 is satisfied, then execute (5).

[0280] If Index1≤LineNum≤Index2 is not satisfied, then execute (8).

[0281] (5) Determine whether LP≤selectLP is satisfied.

[0282] If LP≤selectLP is satisfied, then execute (6).

[0283] If LP≤selectLP is not satisfied, then execute (7).

[0284] (6) Determine the AP value of this cell according to the first formula.

[0285] The first formula can be:

[0286] Among them, nextShowSpan represents the number of columns to display in the next level, maxShowSpan represents the maximum level (e.g., 31 levels), selectLP is the LP value of the selected grid cell with zoom in and out, and selectLineNum represents the number of rows selected.

[0287] (7) Determine the AP value of this cell according to the second formula.

[0288] The second formula can be:

[0289] (8) Set the AP value to -1.

[0290] In this case, AP = -1 means that the actual adaptation position value is invalid, and at this time, a grid can display a blank image.

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

[0292] The above embodiments illustrate that when switching from a day view to a month view or a year view, a zoom operation can trigger the rendering of a high-density view. After switching to a month view or a year view, the user can also swipe their finger up or down on the screen; in this case, the swipe operation will also trigger the rendering of a high-density view.

[0293] For example, Figure 21 shows a flowchart of a method for triggering high-density view drawing in a scrolling scenario.

[0294] As shown in Figure 21, the method may include the following steps S30 to S35.

[0295] S30, when displaying a monthly or yearly view based on a high-density view (which can be referred to as a second grid interface), the touch driver receives the user's up or down swipe operation on the display screen and notifies the high-density view. The high-density view then triggers drawing.

[0296] S31, High-density View determines the AP range x based on the sliding distance.

[0297] When a user swipes their finger up or down on the screen, from the user's perspective, the images in the grid interface should also swipe up or down, thus triggering an AP refresh.

[0298] When a high-density view supports vertical scrolling, if the user swipes their finger up or down on the screen, the high-density view moves vertically relative to the display area of ​​the screen. The positions of each grid cell within the high-density view will also move vertically relative to the display area. In this case, the high-density view can calculate the AP (Area of ​​Layout) of each grid cell in the next frame. The AP range from the first grid cell to the last grid cell is represented as AP range x.

[0299] As an example, a high-density view can update the AP value of each cell according to the formula: AP + s * g. Here, s represents the final number of rows the high-density view moves, and g represents the current high-density view's level (i.e., the number of cells / columns in the drawing area).

[0300] To facilitate understanding of how to trigger high-density View rendering in scrolling scenarios, Figure 22 illustrates a scenario where a user slides a single finger upwards relative to the screen (also known as the first direction), causing the bottom of the View control to slide upwards into the screen, and the last row of the View control is not the last row of the album. It should be noted that, due to size limitations, Figure 22 uses a 3-level example; in practice, a high-density View has 13 or 31 columns.

[0301] As shown in (a) of Figure 22, the mobile phone displays the first grid interface based on the View control. The AP of the first picture in the display area is 160, and the AP of the last picture in the display area is 180. The user presses and holds the area corresponding to the actual adaptation position index 170 without releasing, and continues to slide upward a distance of 300 pixels (also called the second distance). At this moment, the distance from the lower edge of the display screen to the lower edge of the recycler view is the first distance. In the (N + 1)th reporting cycle, the mobile phone detects an upward sliding distance of 300 pixels, that is, dy = -300 pixels. In response to the user's single-finger upward sliding operation (also called the first operation), as shown in (b) of Figure 22, the mobile phone moves the View control upward by 300 pixels. At this moment, the Y-axis coordinate of the top of the View control is updated to y1 = -1900 - 300 = -2200 pixels, and the Y-axis coordinate of the bottom of the View control is updated to y2 = 2500 - 300 = 2200 pixels.

[0302] Then, the mobile phone sequentially performs the following 3 judgment steps.

[0303] The first judgment step:

[0304] The mobile phone obtains the actual layout position index value of the ItemView of the View control. As shown in (b) of Figure 22, the first actual layout position index value located in the first row and the first column of the View control is LP1 = 246, and the last actual layout position index value located in the last row and the last column of the View control is LP2 = 300. Among them, LP1 and LP2 can be calculated according to the actual AP value of the View control. Then, since the current scenario is a single-finger upward sliding scenario and the View control slides upward with the single finger, the mobile phone only needs to judge the size of LP2 = 300 and LPmax = 835. Since the actual LP2 < actual LPmax, the mobile phone can determine that the last row of the View control is not the last row of the album, and the View control does not carry the last image of the album. If the user continues to slide the finger upward, the View control can still update the images corresponding to each ItemView, so that the user can see other images with larger actual LP values that have not been displayed in the album. Therefore, the mobile phone does not need to perform the first position correction on the View control, and D1 = 0.

[0305] The second judgment step:

[0306] The mobile phone compares the Y-axis coordinate y2 = 2200 pixels at the bottom of the View control with the Y-axis coordinate Y2 = 2400 pixels at the bottom of the screen. Since y2 < Y2, the bottom of the View control has been slid into the screen. In order to enable the View control to carry more images with larger actual LP values, the mobile phone needs to move the View control downward (also called the second direction).

[0307] For example, a mobile phone can calculate the number of rows to move down using a relational formula:

[0308] Accordingly, the View control moves down a distance (also known as the third distance) of 400 pixels * 1 row = 400 pixels, i.e., D2 = 400.

[0309] As shown in Figure 22(c), after the View control moves down 400 pixels, the Y-axis coordinate of the bottom of the View control is updated to y2 = 2200 + 400 = 2600 pixels. Additionally, the phone updates the actual adaptation position index value of each ItemView according to the relational formula: actual AP + 1 row * 3 columns; that is, it adds a numerical value to the AP value corresponding to each item view. For example, update the actual AP values ​​of the first row of the View control from 148, 149, and 150 as shown in Figure 22(b) to 151, 152, and 153 as shown in Figure 22(c); update the actual AP values ​​of the second row of the View control from 151, 152, and 153 as shown in Figure 22(b) to 154, 154, and 156 as shown in Figure 22(c); ...; update the actual AP values ​​of the last row of the View control from 178, 179, and 180 as shown in Figure 22(b) to 181, 182, and 183 as shown in Figure 22(c).

[0310] It is understandable that in the second judgment step, the phone first moves the View control down one row, and then adds 3 to the AP value of the ItemView corresponding to the 2nd to 5th columns of the View control. This is equivalent to not moving the ItemView, so that the user sees that the position of each image on the screen remains unchanged.

[0311] The third judgment step:

[0312] The mobile phone obtains the actual layout position index value of the last ItemView of the current View control again. In the second judgment step, the View control moves down one line, so the actual layout position index values of each ItemView in the View control are incremented by 5 (the number of columns of the View control). As shown in (d) of Figure 22, the first actual layout position index value of the current View control is updated to LP1 = 246 + 5 = 251, and the last actual layout position index value is updated to LP2 = 300 + 5 = 305. Then, compare the sizes of LP2 = 305 and LPmax = 835. Since LP2 < LPmax, the last line of the View control is not the last line of the photo album, and the View control has not carried the last image of the photo album. If the user continues to slide their finger upwards, the View control can still update the images corresponding to each ItemView, enabling the user to see other images with larger actual LP values that have not been displayed in the photo album. Therefore, the mobile phone does not need to perform a second position correction on the View control, i.e., D3 = 0.

[0313] After obtaining dy = -300, D1 = 0, and D3 = 0 through the above steps, the mobile phone can obtain the final movement distance dy + D1 + D3 = -300 and refresh the screen display content. In the refreshed display area, the AP of the first picture is updated to 163, and the AP of the last picture is updated to 183, that is, the AP range x is [163, 183]. From the user's perspective, the user sees the photo album interface directly updated from the one shown in (a) of Figure 22 to the one shown in (e) of Figure 22, that is, the photo album interface slides upwards following the user's finger by 300 pixels, and a new row of images is added at the bottom of the screen.

[0314] For the specific implementation method of the vertical movement of the high-density View relative to the display area of the display screen, and the method of calculating the AP range x based on the sliding distance by the high-density View, reference can be made to the description of Figure 33 in the following embodiments.

[0315] S32, The high-density View obtains the spliced picture with a fixed AP range x from the bitmap window range range-a.

[0316] S33, The high-density View draws a monthly view or an annual view (which can be called the fourth grid interface) based on the spliced picture with the AP range x.

[0317] For the specific implementation method of the high-density View triggering the drawing of the annual view, reference can be made to the description of Figures 23 to 26 in the following embodiments, which will not be elaborated here.

[0318] After drawing the monthly or yearly view, the high-density view can also trigger updates to the high-density data loader and the high-density bitmap recorder, so that the stitched image can be directly retrieved from it during the next swipe operation.

[0319] S34, the high-density view triggers the high-density data loader to load the original images based on the AP of the first and last images on the current screen. Correspondingly, the high-density data loader determines the AP range range-b based on the AP of the first and last images on the current screen, loads the original images corresponding to the AP range range-b, and updates the query window range to range7.

[0320] S35, the high-density view triggers the high-density data loader to load the bitmap based on the AP of the first image and the AP of the last image on the current screen. Accordingly, the high-density bitmap loader stitches together the original images within the range of range 7 to obtain a stitched image, and updates the bitmap window range to range 8.

[0321] The "first image" mentioned above refers to the image of the first cell in the monthly or yearly view, and the "last image" mentioned above refers to the image of the last cell in the monthly or yearly view. Since the APs of each cell are numbered in ascending order, and the number of cells included in the monthly and yearly views is known, if the APs of the first and last images on the current screen are obtained, the high-density data loader can be triggered to load data by referring to S17-S18 and S24-S25 of the above embodiment.

[0322] In the above solution, when the electronic device displays a monthly or yearly view, the user can swipe their finger up or down on the screen. This swiping action triggers a grid-based interface rendering process based on stitched images. Since a stitched image occupies multiple grids, this significantly reduces the amount of image data and the number of times the GPU needs to render images, thereby improving GPU processing speed and making the album interface display smoother.

[0323] The specific implementation of triggering the drawing of the monthly or yearly view is explained below using Figures 23 to 26.

[0324] For example, Figure 23 shows a schematic diagram of a grid management class.

[0325] As shown in Figure 23, the grid management class can include functional modules such as: MultiTextureGridView, MultiTextureGridPresentation, SplicingDrawable, and ImageBarCacheAdapter bitmapCache.

[0326] The MultiTextureGridView is responsible for creating the View that carries the images, such as a month view or a year view. The MultiTextureGridPresentation class manages the month and year views, controlling when to draw them. The SplicingDrawable class stitches the images to be displayed in the month or year view. The ImageBarCacheAdapter bitmapCache includes two proxies: a HighDensityLoader item and an ImageBarbitmap. The HighDensityLoader item is the high-density data loader described in the previous embodiment, used to update the query window range based on the AP of the image to be displayed. The ImageBarbitmap is the high-density bitmap loader described in the previous embodiment, used to stitch the images based on the AP of the image to be displayed. In this embodiment, the high-density View can call these functional modules to draw the month or year view, as described in the following embodiments.

[0327] For example, Figure 24 shows a schematic diagram of some parameters involved in the process of drawing a lunar view.

[0328] Taking a screen size of 1300 pixels wide and 2875 pixels high as an example, the Moon View consists of a grid of 13 columns and 30 rows, with each grid measuring 100 pixels wide and 100 pixels high. When the Moon View is displayed on a mobile phone, if the user swipes one grid upwards with a single finger on the screen, the high-density View will also swipe upwards by one grid, triggering an update to the Moon View's drawing area.

[0329] As shown in Figure 25, the following parameters are involved in the process of drawing the moon view:

[0330] The size of the grid in the drawing area of ​​the moon view is 1300 / 13 = 100 pixels;

[0331] The AP of the first cell (i.e., the cell in the first row and first column) of the moon view drawing area: startAP = 13, where startAP = 13 represents the 14th image that has not been stitched together;

[0332] Total number of columns in the drawing area: 13;

[0333] Total number of rows drawn in the drawing area: 30;

[0334] Current drawing information type: Moon view;

[0335] Currently using bitmap cache type: Moon View;

[0336] The starting row and column number of the drawing area of ​​the moon view: 4th row and 4th column. Here, the starting row and column number refers to the row and column of the first cell of the drawing area of ​​the moon view in the entire high-density view.

[0337] Canvas scaling factor: 1;

[0338] The drawing area of ​​the moon view is (0,0,13*100,30*100), where (0,0) represents the origin of the canvas, which is usually located at the upper left corner of the drawing area of ​​the moon view.

[0339] The number of smaller images stitched together by each stitched image, perRowCount: 10;

[0340] The row number of startAP in the first cell in the high-density bitmap loader: index = startAP / perRowCount = 1, where index starts from 0, index = 0 represents the 1st row, index = 1 represents the 2nd row, index = 2 represents the 3rd row;

[0341] The offset of the first row of data is calculated as offset = index * perRowCount - startAP = -3. Here, the offset of the first row of data refers to the offset of the left edge of the first stitched image relative to the left edge of the drawing area of ​​the moon view. If the left edge of the first stitched image is to the left of the left edge of the drawing area of ​​the moon view, the offset of the first row of data is negative. If the left edge of the first stitched image is to the right of the left edge of the drawing area of ​​the moon view, the offset of the first row of data is positive. If the left edge of the first stitched image coincides with the left edge of the drawing area of ​​the moon view, the offset of the first row of data is 0.

[0342] It should be noted that Figure 24 uses a monthly view as an example for illustration. It can be understood that the parameters involved in the yearly view are similar to those in the monthly view. The differences are: the drawing information type and bitmap caching type used in the monthly view are both labeled as monthly view, while the drawing information type and bitmap caching type used in the yearly view are both labeled as yearly view; additionally, the number of columns and rows in the drawing area of ​​the yearly view is greater than that of the monthly view.

[0343] For example, Figure 25 shows a flowchart of the specific process of a high-density View triggering the grid management class to draw a monthly or yearly view.

[0344] In zoomed or scrolled scenes, a high-density View can call the invalidate() function to trigger the grid management class to draw a monthly or yearly view. Specifically, as shown in Figure 25, the specific process of the grid management class drawing a monthly or yearly view can include the following steps S36 to S38.

[0345] S36, the high-density View calls the onDraw(canvas) function, triggering a large number of texture grid views (MultiTextureGridView) to draw the canvas.

[0346] Correspondingly, the MultiTextureGridView calls the draw(canvas) function, triggering the MultiTextureGridPresentation class to draw the canvas.

[0347] It should be noted that image stitching is not supported in the native onDraw() process. MultiTextureGridView is a custom interface built on top of onDraw(), used to implement image stitching.

[0348] If the current view is a month view and a single-finger swipe operation from the user is received; or if the current view is a year view and an operation from the user to increase the distance between two fingers is received; or if the current view is a day view and an operation from the user to decrease the distance between two fingers is received, then the following step S37 can be executed to draw the month view.

[0349] If the current view is a year view and a single-finger swipe operation from the user is received; or if the current view is a month view and a two-finger spacing operation from the user is received, then the following S38 can be executed to draw the year view.

[0350] S37, the MultiTextureGridView moves the origin of the canvas coordinate system to the top-left corner of the moon view. The MultiTextureGridView calls the MonthDrawable.draw(canvas) function, triggering the SplicingDrawable to draw the moon view.

[0351] S38, the MultiTextureGridView moves the origin of the canvas coordinate system to the top left corner of the year view. The MultiTextureGridView calls the YearDrawable.draw(canvas) function, triggering the SplicingDrawable to draw the year view.

[0352] In the Android system, each activity has its own independent canvas (called a layer in SurfaceFlinger). No matter how complex the view structure of an activity is, it is ultimately rendered on the canvas of its respective activity. After the high-density bitmap loader updates the bitmap window extent, the stitched image is stored in the high-density bitmap loader. Then, the high-density view can trigger the multi-texture grid display management class (MultiTextureGridPresentation) to draw the canvas through the multi-texture grid view (MultiTextureGridView). At the start of drawing, the multi-texture grid display management class (MultiTextureGridPresentation) first moves the origin of the canvas coordinate system to the top-left corner of the month / year view. This facilitates drawing the stitched image row by row and column by column from this top-left corner starting point. Starting from the top-left corner of the first area, the stitched image is drawn in ascending order of index, one stitched image per row every N cells in the first area. In this scenario, when there is only one stitched image in a row, the index value of the last stitched image in row j differs by 1 from the index value of the first stitched image in row (j+1). When there are multiple stitched images in a row, the index values ​​of any two adjacent stitched images in each row differ by 1, and the index values ​​of the last stitched image in row j are the same as or differ by 1 from the index value of the first stitched image in row (j+1). Specifically, the splicingDrawable can call the image programming interface to instruct the GPU to draw the first stitched image read from the high-density bitmap loader at the origin of the canvas. Then, the origin of the canvas coordinate system is moved, and the image programming interface is called again to instruct the GPU to draw the second stitched image read from the high-density bitmap loader at the moved origin, and so on, until all grids of the month / year view are drawn. Thus, after all stitched images in the first area are drawn, from the grid interface perspective, each grid corresponds to a stitched image, and the AP value of the stitched images for each grid increases sequentially from left to right and from top to bottom.

[0353] For example, Figure 26 shows a flowchart of a specific method for drawing a lunar view based on stitched images.

[0354] Accordingly, Figures 27A-27I show schematic diagrams of lunar views drawn based on stitched images.

[0355] It should be noted that the grid content in the drawing area of ​​the lunar view in Figures 27A-27I is the grid content that will be displayed on the screen. It can be understood that when displaying the lunar view, some grids of the high-density view do not need to be displayed on the screen, therefore, there is no need to draw images of these grids, thus reducing the amount of image data drawn by the GPU. Furthermore, Figures 26 and 27A-27I are illustrated using a lunar view as an example. It can be understood that the specific scheme for drawing a yearly view based on stitched images is similar to the specific scheme for drawing a lunar view based on stitched images; therefore, the specific scheme for drawing a yearly view based on stitched images will not be elaborated further.

[0356] S39, at the initial moment of starting to draw on the canvas, SplicingDrawable performs the following operations:

[0357] ① Save the state A of the canvas coordinate system.

[0358] The state A of the canvas coordinate system described above represents the position of the canvas coordinate system within the lunar view before the first stitched image is drawn, i.e., the relative position of the canvas and the lunar view. As shown in Figure 27A, at the initial moment, the origins of the lunar view coordinate system xoy and the canvas coordinate system XoY coincide, both located at the upper left corner of the lunar view. The positive x-axis and positive Y-axis directions are horizontally to the right relative to the display screen, while the positive y-axis and positive Y-axis directions are vertically downward relative to the display screen.

[0359] ② Calculate the scaling factor (called the first scaling factor) based on the grid size and the image size in the high-density data loader.

[0360] The images in the high-density data loader mentioned above are the original, unstitched images (which can be referred to as images to be stitched).

[0361] The scaling factor (scale) is equal to the size of the grid in the moon view divided by the size of the image in the high-density data loader.

[0362] As an example, if the grid size in the moon view is 100 pixels wide and 100 pixels high, and the image size in the high-density data loader is also 100 pixels wide and 100 pixels high, then the scaling factor is 100 / 100 = 1. It's understandable that for some high-end devices with larger memory, there's no need to reduce the image size in the high-density data loader to save memory. This ensures that the device can implement the method of drawing a moon view based on stitched images, while also improving the clarity of each image displayed in the final grid interface.

[0363] As another example, if the grid size in the moon view is 100 pixels wide and 100 pixels high, and the image size in the high-density data loader is 50 pixels wide and 50 pixels high, then the scaling factor is 100 / 50 = 2. It's understandable that for some low-end devices with limited memory, appropriately reducing the image size in the high-density data loader can reduce memory usage while ensuring the device can still implement the method of drawing a moon view based on stitched images.

[0364] ③ Set the canvas scaling factor to scale (i.e., the first scaling factor).

[0365] Taking a lunar view grid with dimensions of 100 pixels wide and 100 pixels high, an image in the high-density data loader with dimensions of 50 pixels wide and 50 pixels high, a scaling factor of scale=2, and a perRowCount of 10 images per stitched image as an example: When drawing the stitched image (500 pixels wide and 50 pixels high) onto the canvas, setting the canvas scaling factor to scale=2 allows the stitched image to be adaptively enlarged by 2 times. This ensures that the size of the stitched image matches the size of the lunar view grid, avoiding the problem of the stitched image being smaller than the grid size.

[0366] ④ Obtain the index of the first row of data to be drawn (startAP) in the high-density bitmap loader (index).

[0367] The first row of data to be drawn, `startAP`, refers to the AP in the first cell of the first row and first column of the moon view. The index of `startAP` in the high-density bitmap loader is: `index = startAP / perRowCount`. In this embodiment, `startAP = i` represents the (i+1)th image; for example, `startAP = 0` represents the first image, `startAP = 1` represents the second image, and `startAP = 2` represents the third image. Furthermore, the index starts from 0, with `index = 0` representing the first row, `index = 1` representing the second row, and `index = 2` representing the third row.

[0368] As shown in Figures 27A-27I, startAP = 0, perRowCount = 10, and index = startAP / perRowCount = 0, indicating that the first row of data to be drawn, startAP, is in the first row of the high-density bitmap loader.

[0369] ⑤ Get the number of small images perRowCount that each stitched image is stitched together in the high-density bitmap loader.

[0370] The small images mentioned above refer to the original, unstitched images in the high-density data loader.

[0371] The perRowCount value mentioned above is a preset value stored in the electronic device, which can usually be set according to the screen width, grid size, etc. As shown in Figures 27A-27I, perRowCount = 10.

[0372] ⑥ Calculate the offset of the first row of data: offset = index * perRowCount - startAP.

[0373] Referring to the description of the above embodiments, the offset of the first row of data refers to the offset of the left edge of the first stitched image relative to the left edge of the drawing area of ​​the moon view. If the left edge of the first stitched image is to the left of the left edge of the drawing area of ​​the moon view, then the offset of the first row of data is a negative value. If the left edge of the first stitched image is to the right of the left edge of the drawing area of ​​the moon view, then the offset of the first row of data is a positive value.

[0374] For example, as shown in Figure 27A, at the initial moment, offset = index * perRowCount - startAP = 0 * 10 - 0 = 0. Here, startAP = 0 represents the first image. offset = 0 means that the left edge of the first stitched image coincides with the left edge of the drawing area of ​​the moon view.

[0375] It is understandable that the state A of the canvas coordinate system, the scaling factor (scale), and the number of images perRowCount stitched by each stitched image in the high-density bitmap loader are all preset by the electronic device. The specific values ​​of AP and offset of the first row of data to be drawn may change depending on the usage scenario.

[0376] After completing the above settings in S39, the electronic device can start the process of drawing the stitched image from the top left corner of the lunar view, beginning with the first row and first column. Each stitched image drawing process can be implemented through the following steps S40 to S47.

[0377] S40, SplicingDrawable: Determines whether the current number of rows to be drawn is less than or equal to the total number of rows to be drawn.

[0378] "Current drawing row number" refers to the row number in the moon view where the stitched image is placed during this drawing process.

[0379] As shown in Figures 27A-27I, the total number of rows to be drawn is 30. If the current number of rows drawn is less than or equal to the total number of rows to be drawn, it means that the drawing of the lunar view has not yet been completed, and you can continue to S41 below. If the current number of rows drawn is greater than the total number of rows to be drawn, it means that the drawing of the lunar view has been completed, and you can execute S47 below.

[0380] S41, SplicingDrawable can perform the following operations in sequence:

[0381] ① Save the current canvas coordinate system state B.

[0382] "Current Canvas Coordinate System State B" refers to the position of the canvas coordinate system XoY relative to the moon view coordinate system xoy at the start of this drawing. For example, as shown in Figure 27F, the origin of the canvas coordinate system XoY has moved down by a distance of 1 bitmap height relative to the origin of the moon view coordinate system xoy.

[0383] Before drawing the first stitched image, the current canvas coordinate system state B is the same as state A in S30, meaning the origins of the lunar view coordinate system xoy and the canvas coordinate system XoY coincide. When drawing other stitched images besides the first one, the current canvas coordinate system state B differs from state A.

[0384] ② Horizontally offset the canvas coordinate system by offset (called the first value) bits.

[0385] The phrase "horizontally offset the canvas coordinate system by offset bits of the bitmap" refers to horizontally offsetting the canvas coordinate system by offset bits of the width of the unstitched image.

[0386] As shown in Figure 27B, if offset = 0, the canvas coordinate system will not be horizontally offset.

[0387] As shown in Figure 27G, if offset < 0, the canvas coordinate system is horizontally shifted to the left by a distance of |offset| = 3 bitmap widths. By shifting the canvas coordinate system horizontally to the left by a distance of |offset| bitmap widths, the |offset|+1th image from the left in the stitched image can be displayed in the first column of the moon view.

[0388] It is understandable that, in Figures 27A-27I, if the top left corner of the moon view is taken as the origin, with the positive x-axis and positive X-axis directions relative to the right of the display screen, and the positive y-axis and positive Y-axis directions relative to the downward direction of the display screen, establishing a canvas coordinate system XoY and a moon view coordinate system xoy, then in order for the stitched image to fill the entire moon view, offset ≤ 0. If the bottom right corner of the moon view is taken as the origin, with the positive x-axis and positive X-axis directions relative to the left of the display screen, and the positive y-axis and positive Y-axis directions relative to the upward direction of the display screen, establishing a canvas coordinate system XoY and a moon view coordinate system xoy, then in order for the stitched image to fill the entire moon view, offset ≥ 0.

[0389] ③ Determine the current number of columns to draw: drawColNum = offset.

[0390] "Currently drawn column number" refers to the number of columns in the image that has been drawn in the Moon View.

[0391] Referring to the description of the above embodiments, in Figures 27A-27I, offset ≤ 0, which ensures that the first stitched image in each row occupies no more than perRowCount = 10 columns in the moon view. To meet this requirement, the initial value of the number of columns to be drawn needs to be set to offset. As shown in Figure 27G, before drawing the first stitched image in the second row, drawColNum = offset = -3, indicating that no image has been drawn in the moon view yet.

[0392] S42, SplicingDrawable can perform the following operations in sequence:

[0393] ① Obtain the stitched image of the index row from the high-density bitmap loader.

[0394] ② Draw the spliced ​​image on the canvas.

[0395] Specifically, the top left corner of the stitched image in the index row is aligned with the origin of the canvas coordinate system XoY, so that the left edge of the stitched image is located on the Y-axis and the top edge of the stitched image is located on the X-axis.

[0396] ③ Determine the current number of columns to draw: drawColNum = drawColNum + perRowCount.

[0397] That is, after drawing the stitched image of the index row onto the canvas via ②, the number of columns of images drawn in the moon view.

[0398] As shown in Figure 27B, before drawing the first stitched image, drawColNum = offset = 0. After drawing the first stitched image, drawColNum = drawColNum + perRowCount = 0 + 10 = 10, indicating that 10 columns of data have been drawn in the moon view.

[0399] S43, SplicingDrawable determines whether the current number of columns to be drawn is less than the total number of columns to be drawn (referred to as the second column number).

[0400] After each stitched image is drawn, it can be determined whether the current number of columns drawn is less than the total number of columns drawn.

[0401] If the current number of columns to be drawn is less than the total number of columns to be drawn, it means that the drawing of all columns in the current row has not yet been completed, and execute S46 below. If the current number of columns to be drawn is greater than or equal to the total number of columns to be drawn, it means that the drawing of all columns in the current row has been completed, and execute S44 and S45 below.

[0402] S44, when the current number of columns to be drawn is greater than or equal to the total number of columns to be drawn, the SplicingDrawable can perform the following operations in sequence:

[0403] ① Calculate the offset of the next row of data:

[0404] offset=drawColNum-DrawInfo.mDrawColNum-perRowCount.

[0405] Here, `drawColNum` represents the current column number being drawn, `DrawInfo.mDrawColNum` represents the total number of columns in the month / year view, and `perRowCount` represents the number of smaller images stitched together for each stitched image. It can be understood that when `drawColNum ≤ 0`, it means that no images have been drawn in the month / year view.

[0406] As shown in Figure 27G, after completing the second stitching of the first row, drawColNum = 10 + 10 = 20, DrawInfo.mDrawColNum = 13, perRowCount = 10, then the offset of the next row of data is offset = 20 - 13 - 10 = -3.

[0407] ② Reset the current number of columns to 0: drawColNum = 0.

[0408] It's understandable that resetting the current number of columns to 0 would facilitate the calculations for the next row's drawing process.

[0409] ③ Calculate whether to increment the index of the stitched image by 1: index = index + (offset == 0? 1: 0).

[0410] Here, `index` represents the index of the stitched image drawn in the moon view. `offset == 0 ? 1 : 0` indicates that the offset is checked to see if it is equal to 0. If `offset = 0`, then `index + 1`; if `offset ≠ 0`, then `index + 0`.

[0411] It is understandable that when offset = 0, it means that during the drawing process of the i-th row, the last small image of the stitched image is located in the last column of the i-th row. Therefore, during the drawing process of the (i+1)-th row, the next stitched image can be drawn directly, and the index is incremented by 1.

[0412] When offset ≠ 0, it means that during the drawing process of row i, the last small image of the stitched image is located outside the moon view. Therefore, during the drawing process of row i+1, in order to ensure the continuity of the images in the moon view, it is necessary to continue drawing the stitched image. As shown in Figure 27G, the last column of the first row is image 13, and the first column of the second row is image 14. These two images use the same stitched image.

[0413] S45, SplicingDrawable first restores the canvas coordinate system to state B, then moves the canvas coordinate system vertically downwards by the height of one bitmap.

[0414] "Restore the canvas coordinate system to state B" means that after completing the drawing of the current row, the canvas coordinate system XoY is shifted to the left along the horizontal axis, so that the upper left corner of the canvas coordinate system XoY coincides with the upper left corner of the current row again, that is, it is restored to the initial state in S41.

[0415] "Move the canvas coordinate system vertically downwards by the height of one bitmap" refers to moving the Y-axis of the XoY canvas coordinate system horizontally downwards by the height of one bitmap.

[0416] S46, if the current number of columns to be drawn is less than the total number of columns to be drawn, SplicingDrawable will horizontally offset the canvas coordinate system by the width of perRowCount bits and obtain the index of the next row of data: index = index + 1.

[0417] If the current number of columns to be drawn is less than the total number of columns to be drawn, it means that the drawing of all columns in the current row has not yet been completed, and therefore the drawing of the current row must continue. Referring to the description of the above embodiment, since the top-left corner of the stitched image in the index row coincides with the origin of the canvas coordinate system XoY during each drawing, the canvas coordinate system needs to be horizontally offset by a distance of perRowCount bitmap widths before drawing the next stitched image. After S46, we can return to continue executing S42.

[0418] S47, SplicingDrawable restores the canvas coordinate system to state A.

[0419] The above steps S39-S47 complete the drawing of a frame of lunar view. Then the GPU can send this frame of lunar view to the display screen, so that the user can see the screen update. For example, the day view shown in Figure 1(e) is updated to the lunar view shown in Figure 1(f), or the year view shown in Figure 2(c) is updated to the lunar view shown in Figure 2(d), or the lunar view shown in Figure 3(a) is updated to the lunar view shown in Figure 3(b).

[0420] In the above scheme, a spliced ​​image occupies multiple grids. This allows the splicingDrawable to instruct the GPU to draw the spliced ​​image onto the monthly or yearly view, thereby reducing the amount of image data drawn by the GPU and the number of times the image is drawn by a factor of magnitude, improving the GPU's processing speed and avoiding screen stuttering and frame drops.

[0421] The process of drawing a lunar view based on stitched images will be explained below with reference to Figures 27A-27I.

[0422] As shown in Figure 27A, at the initial moment of canvas drawing, the origins of the lunar view coordinate system xoy and the canvas coordinate system XoY coincide, both located at the upper left corner o of the lunar view. The positive x-axis is horizontally to the right relative to the display screen, and the positive y-axis is vertically downward relative to the display screen. The first row of data to be drawn, startAP = 0, is in the row number index = startAP / perRowCount = 0 in the high-density bitmap loader. The offset of the first row of data, offset = index * perRowCount - startAP = 0 * 10 - 0 = 0. Here, startAP = 0 represents the first image, index = 0 represents the first row of this image in the high-density bitmap loader, perRowCount = 10 represents the number of small images stitched together by each stitched image is 10, and offset = 0 represents the left edge of the first stitched image coinciding with the left edge of the drawing area of ​​the lunar view.

[0423] As shown in Figure 27B, first save the current state B1 of the canvas coordinate system XoY. At this moment, the origin of the canvas coordinate system XoY coincides with the origin of the moon view coordinate system xoy. Then, determine the current number of columns to be drawn, drawColNum = offset = 0, and draw the first stitched image (index = 0) in the first row of the moon view, from the first column to the tenth column.

[0424] As shown in Figure 27C, after completing the drawing of the first stitched image, the number of columns to be drawn is updated to drawColNum = drawColNum + perRowCount = 0 + 10 = 10. Since the number of columns to be drawn, drawColNum = 10, is less than the total number of columns in the moon view, DrawInfo.mDrawColNum = 13, and the drawing of all the grids in the first row has not yet been completed, the canvas coordinate system XoY is horizontally offset to the right by a distance of perRowCount = 10 bitmap widths.

[0425] As shown in Figure 27D, obtain the row number of the next row of data: index = index + 1 = 0 + 1 = 1. Draw the second stitched image (index = 1) in columns 11 to 20 of the first row of the moon view.

[0426] After completing the drawing of the second stitched image (index=1), perform the following steps: redetermine the number of columns to be drawn: drawColNum = drawColNum + perRowCount = 10 + 10 = 20; the number of columns to be drawn, drawColNum = 20, is greater than the total number of columns in the moon view, DrawInfo.mDrawColNum = 13, so the following preparations can be made for drawing the next row of data: calculate the offset of the next row of data, offset = drawColNum - DrawInfo.mDrawColNum - perRowCount = 20 - 13 - 10 = -3; reset the current drawing column to 0: drawColNum = 0; since offset ≠ 0, index = 1; then, as shown in Figure 27E, restore the canvas coordinate system XoY to state B1.

[0427] As shown in Figure 27F, the canvas coordinate system XoY is vertically shifted downwards by a distance equal to the height of one bitmap. Since the current drawing row is the 2nd row, and has not yet reached row 30, the current state B2 of the canvas coordinate system XoY is saved. At this moment, the canvas coordinate system XoY has been vertically shifted downwards relative to the moon view coordinate system by a distance equal to the height of one bitmap.

[0428] As shown in Figure 27G, since offset = -3, the canvas coordinate system XoY is horizontally shifted to the left by a distance of 3 bitmap widths, and the second stitched image (Index = 1) is drawn in the -3rd to 7th columns of the 2nd row of the moon view.

[0429] As shown in Figure 27H, the number of columns to be drawn is updated to drawColNum = drawColNum + perRowCoun = -3 + 10 = 7. Since the number of columns to be drawn, drawColNum = 7, is less than the total number of columns in the moon view, DrawInfo.mDrawColNum = 13, the canvas coordinate system is horizontally offset to the right by a distance of perRowCount = 10 bits of bitmap width. Then, the row number of the next row of data is obtained, index = index + 1 = 1 + 1 = 2, and the third stitched image (index = 2) is drawn in columns 8 to 18 of the 2nd row of the moon view.

[0430] After completing the drawing of the third stitched image (index=2), perform the following steps: redetermine the number of columns to be drawn: drawColNum = drawColNum + perRowCount = 7 + 10 = 17; the number of columns to be drawn is greater than the total number of columns in the moon view, calculate the offset of the next row of data: offset = drawColNum - DrawInfo.mDrawColNum - perRowCount = 17 - 13 - 10 = -6; reset the current number of columns to be drawn: drawColNum = 0; since offset ≠ 0, drawBitmapIndex = 3; then, as shown in Figure 27I, restore the canvas coordinate system XoY to state B2.

[0431] Then, the above stitching steps can be repeated until the content of all the grids in the entire lunar view is drawn. Then, the canvas coordinate system is restored to state A, and the GPU can send this frame of lunar view to the display screen so that the user can see the screen update.

[0432] The above embodiment introduces an important parameter, perRowCount, which represents the number of smaller images stitched together for each stitched image. The perRowCount parameter is a fixed value preset by the electronic device. For example, perRowCount = N.

[0433] In some embodiments, regardless of the display's state, the electronic device can stitch together every N images connected to each AP into a single stitched image, according to the APs of the individual images to be stitched. The height of a stitched image is equal to the height of the individual images to be stitched. The width of a stitched image is equal to the sum of the widths of the N individual images to be stitched.

[0434] The following examples illustrate several application scenarios for drawing grid interfaces based on stitched images, using perRowCount = N = 10 as an example. The stitched image with index "Index1" is composed of 10 images with AP values ​​of "1", "2", ..., "10"; the stitched image with index "Index2" is composed of 10 images with AP values ​​of "11", "12", ..., "20"; and so on, with index "Indexi" composed of 10 images with AP values ​​of "10i-9", "10i-8", ..., "10i". These examples, along with Figures 28 to 32B, demonstrate the following:

[0435] Application Scenario 1:

[0436] Figure 28 shows a schematic diagram of a grid interface drawn based on spliced ​​images when switching from portrait to landscape mode.

[0437] Initially, the display is in portrait mode, and the moon view consists of a 13-column grid. The electronic device uses the top-left corner of the moon view as the origin, with positive horizontal movement to the right and negative horizontal movement to the left, and performs the following drawing operations sequentially: The image with index "Index1" is drawn to columns 1 through 10 of row 1; the image with index "Index2" is drawn to columns 11 through 20 of row 1; the image with index "Index2" is drawn to columns -3 through 7 of row 2; and the image with index "Index3" is drawn to... In the second row, columns 8 through 17, the stitched image with index "Index3" is plotted in the third row, columns -6 through 4; the stitched image with index "Index4" is plotted in the third row, columns 5 through 14; the stitched image with index "Index4" is plotted in the fourth row, columns -9 through 1; the stitched image with index "Index5" is plotted in the fourth row, columns 2 through 14... until the image is plotted in all the cells of the moon view.

[0438] After the electronic device receives a user-triggered switch from portrait to landscape mode (referred to as the third operation), the display is in landscape mode, and the moon view consists of a 29-column grid. The electronic device uses the top-left corner of the moon view as the origin, with positive horizontal movement to the right and negative horizontal movement to the left, and performs the following drawing operations sequentially: The image with index "Index1" is drawn to columns 1-10 of row 1; the image with index "Index2" is drawn to columns 11-20 of row 1; the image with index "Index3" is drawn to columns 31-30 of row 1; and the image with index "Index3" is drawn to the... From column -9 to column 1 in row 2, plot the stitched image with index "Index4" in columns 2 to 11 in row 2, plot the stitched image with index "Index5" in columns 12 to 21 in row 2, plot the stitched image with index "Index6" in columns 22 to 32 in row 2, plot the stitched image with index "Index6" in columns -8 to 2 in row 3, and so on, until the image is plotted in all the cells of the moon view.

[0439] In the above solution, since the stitched image is a single-line, elongated image, when the display switches from portrait to landscape mode or vice versa, the solution of this application ensures that each grid cell in the grid interface is filled with an image. Furthermore, the access points (APs) corresponding to each grid cell increase sequentially from left to right and from top to bottom, preventing blank areas in some cells. Additionally, when the display state changes, the stitched image from the previous state can be reused, reducing CPU power consumption.

[0440] Application Scenario 2:

[0441] Figures 29A and 29B illustrate a schematic diagram of drawing a grid interface based on spliced ​​images when switching from a small screen state to a large screen state.

[0442] Initially, the display screen is in portrait mode, and the lunar view consists of 13 columns. The electronic device uses the top-left corner of the lunar view as the origin, with positive horizontal movement to the right and negative horizontal movement to the left, and performs the following drawing operations sequentially: The stitched image with index "Index1" is drawn to columns 1 through 10 of row 1; the stitched image with index "Index2" is drawn to columns 11 through 20 of row 1; the stitched image with index "Index2" is drawn to columns -3 through 7 of row 2; the stitched image with index "Index3" is drawn to columns 8 through 17 of row 2, and so on, until images have been drawn in all the columns of the lunar view.

[0443] After the electronic device receives a user-triggered switch from small screen to large screen mode (referred to as the third operation), the display is in large screen mode, and the monthly view consists of 37 columns. The electronic device uses the top-left corner of the monthly view as the origin, with positive horizontal movement to the right and negative horizontal movement to the left, and performs the following drawing operations sequentially: The image with index "Index1" is drawn to columns 1 through 10 of row 1; the image with index "Index2" is drawn to columns 11 through 20 of row 1; the image with index "Index3" is drawn to columns 21 through 30 of row 1; the image with index "Index4" is drawn to columns 31 through 40 of row 1; the image with index "Index4" is drawn to columns -7 through 3 of row 1… until images are drawn in all the columns of the monthly view.

[0444] In the above solution, since the stitched image is a single-line, elongated image, when the display switches between small and large screen states, the solution of this application ensures that each grid cell in the grid interface is filled with an image. Furthermore, the access points (APs) corresponding to each grid cell increase sequentially from left to right and top to bottom, preventing blank areas in some cells. Additionally, when the display state changes, the stitched image from the previous state can be reused, reducing CPU power consumption.

[0445] Application Scenario 3:

[0446] Figures 30A and 30B illustrate schematic diagrams of drawing a grid interface based on spliced ​​images when switching from full-screen to half-screen mode.

[0447] Initially, the display is in full-screen mode, and the lunar view consists of 37 columns. The electronic device, using the top-left corner of the lunar view as the origin and horizontal direction to the right as positive and horizontal direction to the left as negative, performs the following drawing operations sequentially: The stitched image with index "Index1" is drawn to columns 1 through 10 of row 1; the stitched image with index "Index2" is drawn to columns 11 through 20 of row 1; the stitched image with index "Index3" is drawn to columns 21 through 30 of row 1; the stitched image with index "Index4" is drawn to columns 31 through 40 of row 1; the stitched image with index "Index4" is drawn to columns -7 through 3 of row 1… until images have been drawn in all the columns of the lunar view.

[0448] After the electronic device receives the user's instruction to activate the split-screen function (which can be referred to as the third operation), the display screen is in a half-screen state, and the moon view consists of 18 columns. The electronic device uses the top-left corner of the moon view as the origin, with positive horizontal movement to the right and negative horizontal movement to the left, and performs the following drawing operations in sequence: The stitched image with index "Index1" is drawn to columns 1 to 10 in row 1; the stitched image with index "Index2" is drawn to columns 11 to 20 in row 1; the stitched image with index "Index2" is drawn to columns -8 to 2 in row 2; the stitched image with index "Index3" is drawn to columns 3 to 12 in row 2; the stitched image with index "Index4" is drawn to columns 13 to 22 in row 2, and so on, until images are drawn in all the columns of the moon view.

[0449] In the above solution, since the stitched image is a single-line, long strip, the solution of this application ensures that each grid cell in the grid interface is filled with an image when the split-screen function is enabled or disabled. Furthermore, the access points (APs) corresponding to each grid cell increase sequentially from left to right and from top to bottom, preventing blank areas in some cells. Additionally, when the display state changes, the stitched image from the previous state can be reused, reducing CPU power consumption.

[0450] Application Scenario 4:

[0451] Figures 31A and 31B illustrate the grid interface drawn based on spliced ​​images when switching from a large window (full screen) state to a small window state.

[0452] Initially, the display screen is in portrait mode, and the lunar view consists of 13 columns. The electronic device uses the top-left corner of the lunar view as the origin, with positive horizontal movement to the right and negative horizontal movement to the left, and performs the following drawing operations sequentially: The stitched image with index "Index1" is drawn to columns 1 through 10 of row 1; the stitched image with index "Index2" is drawn to columns 11 through 20 of row 1; the stitched image with index "Index2" is drawn to columns -3 through 7 of row 2; the stitched image with index "Index3" is drawn to columns 8 through 17 of row 2, and so on, until images have been drawn in all the columns of the lunar view.

[0453] After the electronic device receives the user's instruction to open the pop-up window (which can be referred to as the third operation), the display screen is in pop-up window mode, and the moon view consists of 13 columns. The electronic device uses the top-left corner of the moon view as the origin, with positive horizontal movement to the right and negative horizontal movement to the left, and performs the following drawing operations in sequence: The stitched image with index "Index1" is drawn to columns 1 to 10 in row 1; the stitched image with index "Index2" is drawn to columns 11 to 20 in row 1; the stitched image with index "Index2" is drawn to columns -3 to 7 in row 2; the stitched image with index "Index3" is drawn to columns 8 to 17 in row 2, and so on, until images are drawn in all the columns of the moon view.

[0454] It should be noted that Figures 31A and 31B are illustrated using the example of a month view consisting of 13 columns in both the large window and small window states. Therefore, the drawing method of the two month views remains consistent before and after the display state changes. As another example, if the number of columns in the two month views is different before and after the display state changes, then the drawing method of the two month views will differ.

[0455] In the above solution, since the stitched image is a single-line, elongated image, when the small window function is turned on or off, the solution of this application ensures that each grid cell in the grid interface is filled with an image, and the APs corresponding to each grid cell increase sequentially from left to right and from top to bottom, without any blank areas in some cells. Furthermore, when the display state changes, the stitched image from the previous state can be reused, reducing CPU power consumption.

[0456] Application Scenario 5:

[0457] Figures 32A and 32B illustrate schematic diagrams of a grid interface drawn based on stitched images when switching from a month view to a year view.

[0458] Initially, the display shows a lunar view, which consists of 27 columns. The electronic device, with the top-left corner of the lunar view as the origin and rightward horizontal direction as positive and leftward horizontal direction as negative, performs the following drawing operations sequentially: The image with index "Index1" is drawn to columns 1 through 10 of row 1; the image with index "Index2" is drawn to columns 11 through 20 of row 1; the image with index "Index3" is drawn to columns 21 through 30 of row 1; the image with index "Index3" is drawn to columns -7 through 3 of row 2; the image with index "Index4" is drawn to columns 4 through 13 of row 2… until images have been drawn in all the columns of the lunar view.

[0459] After the electronic device receives a user-triggered switch from month view to year view (which can be referred to as the third operation), the electronic device uses the top left corner of the year view as the origin, with positive horizontal movement to the right and negative horizontal movement to the left, and performs the following drawing operations in sequence: draw the mosaic image with index "Index1" to columns 1 to 10 in row 1, draw the mosaic image with index "Index2" to columns 11 to 20 in row 1, draw the mosaic image with index "Index3" to columns 21 to 30 in row 1, draw the mosaic image with index "Index4" to columns 31 to 40 in row 1, draw the mosaic image with index "Index4" to columns -7 to 3 in row 1, and so on, until the image is drawn in all the cells of the year view.

[0460] It should be noted that Figures 32A and 32B are illustrated using examples where the stitched images used in the monthly and yearly views are each composed of 10 small images, and they do not limit the scope of this application. As another example, the stitched images used in the monthly view are each composed of N1 small images, and the stitched images used in the yearly view are each composed of N2 small images, where N2 > N1, for example, N2 = 30 and N1 = 10.

[0461] In the above solution, since the stitched image is a single-line, elongated image, when the display switches from a month view to a year view, or vice versa, the solution of this application ensures that each grid cell in the grid interface is filled with an image. Furthermore, the APs corresponding to each grid cell increase sequentially from left to right and from top to bottom, preventing blank spaces in some cells. Additionally, when the display state changes, the stitched image from the previous state can be reused, reducing CPU power consumption.

[0462] Based on the touch event receiving layer, View, grid layout manager, and custom layout manager shown in Figure 18 above, the specific interaction process between various functional modules in implementing the View-based image scrolling method is described below. The View can be a high-density View or a low-density View as described in the above embodiments.

[0463] Referring to the description of S31 in the above embodiment, if the high-density view supports vertical scrolling, then when the user slides their finger up or down on the screen, the high-density view will move up and down relative to the display area of ​​the display screen, and the position of each grid in the high-density view will move up and down relative to the display area of ​​the display screen.

[0464] The image scrolling method based on a high-density view is illustrated below with reference to Figure 33. It should be noted that Figure 33 illustrates the image scrolling method using a high-density view as an example, and it does not limit the scope of this application. Low-density views also support vertical scrolling; the image scrolling method based on a low-density view is similar to that based on a high-density view, and will not be elaborated upon here.

[0465] As shown in Figure 33, the method may include the following steps S101 to S121.

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

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

[0468] S103, at time t1, the touchscreen receives a single-finger tap operation from the user on a certain album interface and sends the coordinates (x1, y1) corresponding to the tap operation to the receiving touch event layer. The receiving touch event layer forwards the coordinates (x1, y1) to the high-density view. The high-density view records the coordinates (x1, y1).

[0469] It should be noted that the size of the layer receiving touch events is the same as the size of the display screen. In zoomed scenarios, ReceiveTouchView can directly pass the coordinates of the touch point to the zoom gesture detector without multiplying the coordinates by a zoom factor less than 1.

[0470] S104, at time t1+T, the touchscreen receives a single-finger movement operation from the user on the album interface and sends the corresponding coordinates (x2, y2) to the receiving touch event layer. The receiving touch event layer forwards the coordinates (x2, y2) to the high-density view. The high-density view records the coordinates (x2, y2).

[0471] If a coordinate system is established with the top left corner of the layer receiving touch events as the origin, the X-axis pointing horizontally to the right, and the Y-axis pointing vertically downward, then the coordinates (x1, y1) of S103 and the coordinates (x2, y2) of S104 are both determined with reference to this coordinate system.

[0472] S105, the high-density view calculates the distance moved in the Y-axis direction based on the coordinates (x2, y2) recorded in this cycle and the coordinates (x1, y1) recorded in the previous cycle: dy = y2 - y1.

[0473] S106, the high-density view passes the movement distance dy to the grid layout manager, the grid layout manager passes the movement distance dy to the custom layout manager, and the custom layout manager then passes the movement distance dy back to the high-density view.

[0474] The grid layout manager is a native manager in the Android system used to manage the position and size of grid components within a high-density view. In the native Android workflow, the high-density view needs to send its movement distance (dy) to the grid layout manager first. However, the grid layout manager does not have the function of directly sending data back to the high-density view. Therefore, this application provides a custom layout manager. The custom layout manager acts as a bridge between the grid layout manager and the high-density view, playing a role in data feedback. In the solution of this application, the grid layout manager can first pass the movement distance (dy) to the custom layout manager, and the custom layout manager then sends the movement distance (dy) back to the high-density view.

[0475] It should be noted that the above S106 is an optional implementation method and does not limit this application. In actual implementation, the following S107 may be executed directly after the above S105.

[0476] S107, High-density View movement distance dy.

[0477] When a user swipes upwards on the screen with a single finger, dy < 0, and the high-density view moves upwards by a distance - dy. For example, when a user swipes upwards 300 pixels on the screen with a single finger, the high-density view moves upwards by 300 pixels.

[0478] When a user swipes down on the screen with a single finger, dy > 0, and the high-density view moves down a distance dy. For example, when a user swipes down 600 pixels on the screen with a single finger, the high-density view moves down 600 pixels.

[0479] S108, the high-density view obtains the layout position index value LP1 of the first cell and the layout position index value LP2 of the last cell.

[0480] After the high-density view moves a distance dy, its top or bottom edge may move into the display screen, resulting in a blank area within the display screen. To avoid a blank area between the bottom of the high-density view and the bottom of the display screen, or between the top of the high-density view and the top of the display screen, steps S108-S114 need to be executed to determine whether the high-density view needs to be repositioned.

[0481] S109, High-density View determines whether the layout position index value LP1 points to the first image in the album.

[0482] For example, a high-density view can determine the size of the layout position index values ​​LP1 and LPmin=0 of the first cell to determine whether the layout position index value LP1 points to the first image in the album.

[0483] If LP1 = LPmin, then it can be determined that the layout position index value LP1 points to the first image in the album, and the album has been scrolled to the first row. The top grid of the high-density view can no longer update more images with smaller actual AP values. When moving the high-density view downwards, if the top of the high-density view moves into the display screen, a blank area may appear between the top of the high-density view and the top of the display screen. To avoid the appearance of a blank area, the high-density view performs the following S110 to calculate the movement distance D1 for the first position correction.

[0484] If LP1 > LPmin, then it can be determined that the layout position index value LP1 has not yet pointed to the first image in the album, and has not yet scrolled to the first row of the album. The top grid of the high-density view can also update more images with smaller actual AP values. The high-density view executes the following S111.

[0485] S110, the high-density view determines the movement distance D1 based on the coordinates Y1 at the top of the display screen and the coordinates y1 at the top of the high-density view.

[0486] The "coordinate y1 of the top of the high-density view" in S110 above refers to the coordinate of the top of the high-density view after moving a distance dy.

[0487] When a single finger swipes down and the layout position index value LP1 points to the first image in the album, the high-density view can calculate the movement distance using the following formula: D1 = Y1 - y1. Here, Y1 represents the coordinates of the top of the display screen, and y1 represents the coordinates of the top of the high-density view.

[0488] S111, the high-density view determines whether the layout position index value LP2 points to the last image in the album.

[0489] For example, a high-density view can determine the size of the layout position index values ​​LP2 and LPmax of the last cell to determine whether the layout position index value LP2 points to the last image in the album.

[0490] If LP2 = LPmax, then it can be determined that the layout position index value LP2 points to the last image in the album, and the album has been scrolled to the last row. The bottom grid of the high-density view can no longer update more images with larger actual AP values. When moving the high-density view upwards, if the bottom of the high-density view moves into the display screen, a blank area may appear between the bottom of the high-density view and the bottom of the display screen. To avoid the appearance of a blank area, the high-density view performs the following S112 to calculate the movement distance D1 for the first position correction.

[0491] If LP2 < LPmax, then it can be determined that the layout position index value LP2 has not yet pointed to the last image in the album, and has not yet scrolled to the last row of the album. The bottom grid of the high-density view can still update more images with larger actual AP values. Therefore, the high-density view does not need to perform the first position correction, i.e., execute S113 as described below.

[0492] S112, the high-density view determines the movement distance D1 based on the coordinates Y2 at the bottom of the display screen and the coordinates y2 at the bottom of the high-density view.

[0493] The "coordinate y1 of the bottom of the high-density view" in S110 above refers to the coordinate of the bottom of the high-density view after moving a distance dy.

[0494] When a single finger swipes upwards and the layout position index value LP2 points to the last image in the album, the high-density view can calculate the movement distance using the following formula: D1 = Y2 - y2. Here, Y2 represents the coordinates of the bottom of the display screen, and y2 represents the coordinates of the bottom of the high-density view.

[0495] S113, High-density View determines the moving distance D1 = 0.

[0496] If the layout position index value LP1 does not point to the first image in the album and the layout position index value LP2 does not point to the last image in the album, then the high-density view does not need to move up or down. Therefore, the high-density view determines a movement distance D1 = 0.

[0497] It should be noted that the above embodiment is illustrated by executing S109 first and then S111, and it does not limit the scope of this application. As an example, S111 can also be executed first and then S109. As another example, if dy < 0, it means that it is a single-finger upward swipe, which may slide to the last image in the album. Therefore, it is only necessary to determine whether the layout position index value LP2 points to the last image in the album. If dy > 0, it means that it is a single-finger downward swipe, which may slide to the first image in the album. Therefore, it is only necessary to determine whether the layout position index value LP1 points to the first image in the album.

[0498] S110, S112, and S113 can be performed in one of the following steps. Based on S110, S112, or S113, the travel distance D1 can be calculated. S114 can also be included after S110, S112, or S113.

[0499] S114, High-density View moves according to the moving distance D1, moving the moving distance D1.

[0500] It's understandable that if the movement distance D1 is obtained through S110, the current scene is a single-finger downward swipe scene, D1 = Y1 - y1 < 0, requiring the high-density view to be moved upwards. If the movement distance D1 is obtained through S112, the current scene is a single-finger upward swipe scene, D1 = Y2 - y2 > 0, requiring the high-density view to be moved downwards. If the movement distance D1 is obtained through S113, it's equivalent to not performing the first position correction for the high-density view.

[0501] S115, the high-density view re-acquires the coordinates y1' of the top of the high-density view and y2' of the bottom of the high-density view.

[0502] It is understandable that if the movement distance D1 is obtained through S110 or S112, then the coordinates y1' at the top of the high-density view and y2' at the bottom of the high-density view are updated, making y1'≠y1 and y2'≠y2. If the movement distance D1 is obtained through S113, then the coordinates y1' at the top of the high-density view and y2' at the bottom of the high-density view are not updated, making y1'=y1 and y2'=y2.

[0503] S116, the high-density view determines whether the coordinate y1' of the top of the high-density view is greater than the coordinate Y1 of the top of the display screen.

[0504] If y1'>Y1, it means that the top of the high-density view has been slid into the display screen. In order for the high-density view to be able to carry more images with smaller actual LP values, the high-density view needs to be moved upward, and the following S117 is executed.

[0505] If y1'≤Y1, it means that the top of the high-density view has not yet been slid into the display screen, so there is no need to move the high-density view upwards, and the following S118 is executed.

[0506] S117, the high-density view determines the movement distance D2 based on the coordinates y1' of the top of the high-density view and the coordinates Y1 of the top of the display screen.

[0507] For a single-finger downward swipe scenario, if y1' > Y1, then the high-density view can be moved upward by the number of rows according to the following formula:

[0508] Where s1' represents the number of rows to move the high-density view upwards, m represents the side length of a single cell in the high-density view, Y1 represents the coordinates of the top of the display screen, and y1' represents the coordinates of the top of the high-density view.

[0509] The first row of a high-density view might be the middle row of the album. When a user swipes down with a single finger, the probability of swiping to the first row is low, ensuring that the row number s1' will not exceed the actual number of movable rows, thus requiring no correction for s1'. Conversely, the first row of a high-density view might be the second-to-last or third-to-last row of the album. When a user swipes up with a single finger, the probability of swiping to the first row is high, causing the row number s1' to exceed the actual number of movable rows, potentially requiring correction for s1'. The actual number of movable rows can be determined based on the total number of images in the album and the actual AP value of the high-density view; it refers to the maximum number of rows in the top grid that can be added to the high-density view.

[0510] In view of the above problems, this application embodiment also provides a scheme for correcting the row number s1':

[0511] Where s2' represents the maximum number of rows that the high-density view can move upwards, LPmin points to the first image in the album (for example, LPmin = 0), LP1 is the first image that the high-density view points to, and gmax represents the maximum level of the high-density view.

[0512] The number of rows that a high-density view will ultimately move upwards can be calculated using a formula:

[0513] s' = min(s1', s2').

[0514] Here, s' represents the number of rows that the high-density view will eventually move upwards, and min() is the function to take the minimum value.

[0515] Accordingly, the high-density view can be determined by the following movement distance: D2 = s' * m = min(s1', s2') * m. Where s' represents the number of rows the high-density view moves upwards, and m represents the side length of a single cell in the high-density view.

[0516] Additionally, the high-density view can update the adaptation position index value of each cell according to the formula: AP - s' * g. Here, AP represents the adaptation position index value of a cell, s' represents the number of rows the high-density view ultimately moves upwards, and g represents the level of the high-density view.

[0517] S118, the high-density view determines whether the coordinate y2' of the bottom of the high-density view is less than the coordinate Y2 of the bottom of the display screen.

[0518] If y2' < Y2, it means that the bottom of the high-density view has been slid into the display screen. In order for the high-density view to be able to carry more images with larger actual LP values, the high-density view needs to be moved down, and the following S119 is executed.

[0519] If y2'≥Y2, it means that the bottom of the high-density view has not yet been slid into the display screen, so there is no need to move the high-density view down, and the following S20 is executed.

[0520] S119, the high-density view determines the movement distance D2 based on the coordinates y2' at the bottom of the high-density view and the coordinates Y2 at the bottom of the display screen.

[0521] For scenarios where a single finger slides upwards, if y2' < Y2, then the high-density view can be moved down by the number of rows according to the following formula:

[0522] Where s1 represents the number of rows to be moved down in the high-density view, m represents the side length of a single cell in the high-density view, Y2 represents the coordinates of the bottom of the display screen, and y2 represents the coordinates of the bottom of the high-density view.

[0523] The last row of a high-density view might be the middle row of the album. When a user swipes up with a single finger, the probability of reaching the last row is low, ensuring that the row number s1 will not exceed the actual number of movable rows, thus requiring no correction. Conversely, the last row of a high-density view might be the second-to-last row of the album. When a user swipes up with a single finger, the probability of reaching the last row is high, causing the row number s1 to exceed the actual number of movable rows, potentially requiring correction. The actual number of movable rows can be determined based on the total number of images in the album and the actual AP value of the high-density view; it refers to the maximum number of rows in the grid that can be added to the bottom of the high-density view.

[0524] In view of the above problems, this application also provides a scheme for correcting the number of rows s1:

[0525] Where s2 represents the maximum number of rows that the high-density view can move down, LP2 points to the last image in the album, LPmax is the last image that the high-density view points to, and gmax represents the maximum level of the high-density view.

[0526] The number of rows that a high-density view will eventually move down can be calculated using a formula:

[0527] s = min(s1, s2).

[0528] Where s represents the number of rows that the high-density view will eventually move down, and min() is the function to find the minimum value.

[0529] Accordingly, the high-density view can be determined by the movement distance: D2 = s' * m = min(s1, s2) * m. Where s represents the number of rows the high-density view moves upwards, and m represents the side length of a single cell in the high-density view.

[0530] Additionally, the high-density view can update the adaptation position index value of each cell according to the formula: AP + s * g. Here, s represents the final number of rows the high-density view moves downwards, and g represents the current tier of the high-density view.

[0531] S120, High-density View determines the moving distance D2 = 0.

[0532] S117, S119, and S120 can be performed in one of the following steps. Based on S117, S119, or S120, the travel distance D2 can be calculated. S121 can also be included after S117, S119, or S120.

[0533] S121, the high-density view moves by a distance D2, and refreshes the actual AP and actual LP of each cell in the high-density view.

[0534] If the movement distance D2 is obtained through S117, then the current scene is a single-point downward sliding scene, and the high-density view needs to be moved upward. The calculation method of movement distance D2 and the method of refreshing the actual AP and actual LP can be referred to the description of S117 above, and will not be repeated here.

[0535] If the movement distance D2 is obtained through S119, then the current scene is a single-finger upward swipe scene, and the high-density view needs to be moved downward. The calculation method of movement distance D2 and the method of refreshing the actual AP and actual LP can be referred to the description of S119 above, and will not be repeated here.

[0536] If the movement distance D2 is obtained through S120, it is equivalent to not moving the high-density view and not refreshing the actual AP and actual LP of each cell in the high-density view.

[0537] S122, the high-density view re-acquires the layout position index value LP1' of the first cell and the layout position index value LP2' of the last cell.

[0538] If the phone moves the high-density view up or down during steps S115-S121, the images corresponding to each grid cell in the high-density view need to be refreshed to ensure that the image's position on the display remains unchanged for the user's visual perception. This may cause the last row of the refreshed high-density view to become the last row of the photo album, resulting in the top or bottom edge of the high-density view being within the display screen. To avoid a blank area between the bottom of the high-density view and the bottom of the display screen, steps S122-S128 need to be executed to determine whether the high-density view needs to be repositioned.

[0539] S123, High-density View determines whether the layout position index value LP1' points to the first image in the album.

[0540] If LP1' = LPmin, then the layout position index value LP1' can be determined to point to the first image in the album. The high-density view executes the following S124 to calculate the movement distance D3 for the second position correction.

[0541] If LP1' > LPmin, then it can be determined that the layout position index value LP1' has not yet pointed to the first image in the album, and the high-density view executes the following S125.

[0542] S124, the high-density view determines the movement distance D3 based on the coordinates Y1 at the top of the display screen and the coordinates y1” at the top of the high-density view.

[0543] The coordinate y1 of the top of the high-density view in S124 above refers to the coordinate of the top of the high-density view after moving a distance D2.

[0544] When a single finger slides downwards and the layout position index value LP1’ points to the first image of the album, the high-density View can calculate the moving distance using the following relationship: D3 = Y1 - y1”. Here, Y1 represents the coordinate of the top of the display screen, and y1” represents the coordinate of the top of the high-density View.

[0545] S125, the high-density View determines whether the layout position index value LP2’ points to the last image of the album.

[0546] If LP2’ = LPmax, it can be determined that the layout position index value LP2’ points to the last image of the album, and the high-density View executes the following S126 to calculate the moving distance D3 for the second position correction.

[0547] If LP2’ < LPmax, it can be determined that the layout position index value LP2’ does not point to the last image of the album, and the high-density View does not need to perform the second position correction, that is, it executes the following S127.

[0548] S126, the high-density View determines the moving distance D3 based on the coordinate Y2 of the bottom of the display screen and the coordinate y2” of the bottom of the high-density View.

[0549] The coordinate y1” of the bottom of the high-density View in S126 above refers to the coordinate of the bottom of the high-density View after the moving distance D2.

[0550] When a single finger slides upwards and the layout position index value LP2’ points to the last image of the album, the high-density View can calculate the moving distance using the following relationship: D3 = Y2 - y2”. Here, Y2 represents the coordinate of the bottom of the display screen, and y2 represents the coordinate of the bottom of the high-density View.

[0551] S127, the high-density View determines that the moving distance D3 = 0.

[0552] The above S124, S126, and S127 are executed alternatively. Based on S124, S126, or S127, the moving distance D3 can be calculated. After S124, S126, or S127, the following S128 may also be included.

[0553] S128, the high-density View moves by the moving distance D3 according to the moving distance D3.

[0554] For the specific implementation methods of S122 to S128, reference can be made to the relevant descriptions of S108 to S114 above, which will not be elaborated here.

[0555] S129, the high-density View notifies SurfaceFlinger to update the photo album interface, and then SurfaceFlinger sends the display to the screen.

[0556] It should be noted that steps S104 to S129 can be completed within one vertical synchronization (Vsync) signal cycle. Taking a 120Hz display refresh rate as an example, the display driver sends a Vsync signal to SurfaceFlinger every 8.3 milliseconds. When a Vsync signal arrives, if the high-density view has already been moved, refreshed, and rendered using steps S104 to S129, the high-density view that has completed all movement and refresh can be passed to the display driver, thus updating the display content. If a Vsync signal arrives before the high-density view has been moved and refreshed, the display continues to show the previous content.

[0557] S130, the high-density view returns the actual scroll distance D collected within one period T to the custom layout manager. Where D = dy + D1 + D3. The layout manager is defined to forward the actual scroll distance D = dy + D1 + D3 collected within one period T to the grid-style layout manager.

[0558] S131, the grid layout manager determines whether the user operation is an inertial swipe or a responsive swipe based on the actual scroll distance collected over multiple cycles T.

[0559] As an example, a grid-based layout manager can send the actual scroll distance collected over multiple periods T to the native high-density view. The native high-density view then determines whether the user action is an inertial swipe or a responsive swipe based on the actual scroll distance collected over multiple periods T.

[0560] If the actual scrolling distance collected within multiple periods T is less than or equal to the preset scrolling distance, it indicates that the single-finger swipe speed is slow and the user's operation is a swipe operation, thus avoiding the need to trigger scrolling to display a large number of images.

[0561] If the actual scrolling distance collected over multiple periods T is greater than or equal to the preset scrolling distance, it indicates that the single-finger swipe speed is relatively fast, and the user's operation is an inertial swipe, thus requiring the display of a large number of images. Specifically, the native high-density View can scroll a first distance in the same direction as the single-finger swipe, and this first distance is directly proportional to the actual scrolling distance collected over multiple periods T. In this way, after the user ends the single-finger inertial swipe operation, the album interface will continue to scroll downwards for a distance as if it still has inertia, thereby achieving a large number of image updates.

[0562] In the above solution, when a user swipes up or down in the gallery with a single finger, the high-density view scrolls in the same direction as the finger swipe. When scrolling to the top or bottom of the high-density view, the electronic device moves the entire high-density view in the opposite direction of the finger swipe and refills it with content. In this way, content only needs to be filled into the moved high-density view, without creating a new row of item high-density views at the top or bottom, and without re-measuring the size and recalculating the position of each item high-density view. This optimizes the data processing flow, shortens the data processing time when scrolling images in the gallery, and thus solves the frame drop problem.

[0563] For example, Figure 34 is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of this application.

[0564] As shown in Figure 34, the electronic device 100 may include a processor 110, internal memory 120, buttons 130, sensor module 140, display screen 150, audio module 160, speaker 160A, receiver 160B, microphone 160C, headphone jack 160D, etc. The sensor module may include a touch sensor.

[0565] The processor 110 can be used to execute the scrolling display method in the above embodiments. The processor 110 may include one or more processing units, such as a central processing unit (CPU), a graphics processing unit (GPU), an application processor (AP), an image signal processor (ISP), etc.

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

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

[0568] A touch sensor, also known as a "touch panel," can be located on the display screen 150. The touch sensor and the display screen 150 together form a touchscreen, also called a "touch display." The touch sensor can detect touch operations applied to or near it. The touch sensor can transmit the detected touch operation to the application processor to determine the type of touch event and provide visual output related to the touch operation through the display screen 150. In some embodiments, the touch sensor may also be located on the surface of the electronic device 100, in a different position than the display screen 150.

[0569] This application also provides a computer-readable storage medium storing computer instructions. When the computer-readable storage medium is operated on an electronic device, it causes the electronic device to perform the methods shown in the above embodiments. The computer instructions can be stored in the computer-readable storage medium or transferred from one computer-readable storage medium to another. The computer-readable storage medium can be any usable medium that a computer can access, or it can include one or more data storage devices such as servers or data centers that can be integrated with the medium. The usable medium can be a magnetic medium, an optical medium, or a semiconductor medium, etc.

[0570] This application also provides a computer program product, which includes computer program code. When the computer program code is run on an electronic device, it causes the electronic device to perform the methods described in the above embodiments.

[0571] The electronic devices, computer-readable storage media, and computer program products provided in the embodiments of this application are all used to execute the methods provided in the above embodiments.

[0572] In the description of this application, " / " means "or". For example, A / B can mean A or B. In the description of this application, "and / or" is merely a way of describing the relationship between related objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists alone, A and B exist simultaneously, and B exists alone.

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

[0574] Through the above description of the embodiments, those skilled in the art will clearly understand that, for the sake of convenience and brevity, only the division of the above functional modules is used as an example. In practical applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above. Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0575] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any changes or substitutions within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A method for displaying a grid interface, characterized in that, The method includes: When the first grid interface is displayed, the user's first operation on the electronic device is received, wherein the first grid interface includes a grid with a first column number. In response to the first operation, according to the adaptation position values ​​of the images to be stitched, every N images with connected adaptation position values ​​are stitched into one stitched image; wherein, the adaptation position value of the last image to be stitched in the i-th stitched image differs by 1 from the adaptation position value of the first image to be stitched in the (i+1)-th stitched image, and the index values ​​of each stitched image are sequentially increased according to the stitching order, where N is an integer greater than or equal to 2 and i is a positive integer; After receiving the first operation, the system continues to receive a second operation from the user on the electronic device. In response to the second operation, a second grid interface is displayed, in which a stitched image is displayed in N adjacent grids; wherein, the second grid interface includes grids with a second number of columns, and the first number of columns is different from the second number of columns; when there is one stitched image in a row in the second grid interface, the index value of the last stitched image in the j-th row differs from the index value of the first stitched image in the (j+1)-th row by 1; or, when there are multiple stitched images in a row in the second grid interface, the index values ​​of two adjacent stitched images in each row differ by 1, and the index values ​​of the last stitched image in the j-th row are the same as or differ by 1 from the index value of the first stitched image in the (j+1)-th row, where j is a positive integer.

2. The method according to claim 1, characterized in that, The height of a stitched image is equal to the height of the individual images to be stitched together, and the width of a stitched image is equal to the sum of the widths of the N individual images to be stitched together.

3. The method according to claim 1, characterized in that, The first operation is a zoom operation or a two-finger press operation, and the second operation is a zoom operation. From the time the first operation is received until the second operation ends, the user's finger does not leave the screen of the electronic device.

4. The method according to any one of claims 1 to 3, characterized in that, In the first grid interface, each grid displays one image to be stitched together.

5. The method according to any one of claims 1 to 3, characterized in that, In the first grid interface, a stitched image is displayed by M adjacent grids, where M is an integer greater than or equal to 2.

6. The method according to any one of claims 1 to 5, characterized in that, After displaying the second grid interface, the method further includes: Receive a third operation from the user on the electronic device; In response to the third operation, a third grid interface is displayed, the third grid interface including a grid with a third column number, the third column number being different from the second column number; Specifically, in the third grid interface where there is one stitched image per row, the index value of the last stitched image in row j differs from the index value of the first stitched image in row j+1 by 1; or, in the second grid interface where there are multiple stitched images per row, the index values ​​of two adjacent stitched images in each row differ by 1, and the index values ​​of the last stitched image in row j and the first stitched image in row j+1 are the same or differ by 1.

7. The method according to claim 6, characterized in that, The third operation is any one of the following: The operation that triggers the electronic device to enable or disable the split-screen function; Trigger the operation of opening or closing the small window mode on the electronic device; The operation of triggering the electronic device to switch from portrait mode to landscape mode, or from landscape mode to portrait mode; This triggers the electronic device to switch from a large screen state to a small screen state, or vice versa.

8. The method according to any one of claims 1 to 5, characterized in that, The second grid interface is drawn based on the first view control. The size of the first view control is larger than the size of the screen. The distance from the bottom edge of the screen to the bottom edge of the first view control is a first distance. The edge of the first view control is located outside the screen. After displaying the second grid interface, the method further includes: The system receives a swipe operation from a user on the screen, where the user swipes a second distance along a first direction, the first direction being from the bottom edge of the screen to the top edge of the screen, and the second distance is greater than the first distance. In response to the sliding operation, the first view control is moved a third distance along the second direction, the adaptation position value of the stitched image to be displayed is re-determined, the corresponding stitched image is obtained, and a fourth grid interface is drawn and displayed. In the fourth grid interface, N adjacent grids display one stitched image. The second direction is opposite to the first direction, the third distance is greater than or equal to the difference between the second distance and the first distance, and the stitched image displayed in the second grid interface is not exactly the same as the stitched image displayed in the fourth grid interface. Specifically, when there is one stitched image in a row in the fourth grid interface, the index value of the last stitched image in row j differs from the index value of the first stitched image in row j+1 by 1; or, when there are multiple stitched images in a row in the fourth grid interface, the index values ​​of two adjacent stitched images in each row differ by 1, and the index values ​​of the last stitched image in row j and the first stitched image in row j+1 are the same or differ by 1.

9. The method according to claim 8, characterized in that, The process of re-determining the adaptation position value of the stitched image to be displayed includes: The number of rows the first view control moves is determined based on the third distance; The adaptation position value of the spliced ​​image to be displayed is determined based on the adaptation position values ​​of the first and last grids in the second grid interface, the number of rows moved by the first view control, the second direction, and the second column number.

10. The method according to claim 8, characterized in that, After drawing and displaying the fourth grid interface, the method further includes: Obtain the adaptation position value of the first grid and the adaptation position value of the last grid in the fourth grid interface; Based on the adaptation position of the first grid in the fourth grid interface, the adaptation position value of the last grid in the fourth grid interface, and the total number of grids in the fourth grid interface, the adaptation position value of each image to be stitched is re-determined. The newly identified images to be stitched are cached in a low-density data loader.

11. The method according to any one of claims 1 to 10, characterized in that, Before displaying the first grid interface, the method further includes: Load the first view control and the second view control; Initialize the size of the first view control and the number of columns for each gear corresponding to the first view control; Initialize the size of the second view control and the number of columns for each position corresponding to the second view control; The first grid interface is drawn based on the second view control, and the second grid interface is drawn based on the first view control.

12. The method according to claim 11, characterized in that, The first view control inherits from the Android view control, and the second view control inherits from the recycle bin view control. The size of both the first view control and the second view control is greater than or equal to the screen size. The Android view control does not have a table view, while the recycle bin view control does have a table view, and the table view supports responding to user touch operations.

13. The method according to any one of claims 1 to 11, characterized in that, The first operation is a zoom operation or a two-finger press operation, and the first grid interface is drawn based on the second view control; The step of stitching together every N images with consecutive adaptation position values ​​into a single stitched image according to the adaptation position values ​​of the images to be stitched includes: Obtain the adaptation position value of the first grid cell and the adaptation position value of the last grid cell in the first grid interface; Based on the adaptation position of the first grid in the first grid interface, the adaptation position value of the last grid in the first grid interface, the total number of columns in the second grid interface, and the value N, determine the adaptation position value of each image to be stitched. Based on the adaptation position values ​​of each image to be stitched, stitch together every N images with consecutive adaptation position values ​​into a single stitched image, and add index values ​​to each stitched image according to the stitching order. Each of the stitched images is cached in a high-density bitmap loader.

14. The method according to claim 13, characterized in that, The second operation is a scaling operation; Before displaying the second grid interface, the method further includes: The scaling center is determined based on the second operation; Determine the drawing area of ​​the second grid interface within the first view control; Based on the layout position value and adaptation position value of the selected grid at the zoom center, determine the adaptation position value of the first grid and the adaptation position value of the last grid in the drawing area. Each adaptation position value corresponds to one image to be stitched together. The first stitched image is obtained from the high-density bitmap loader based on the adaptation position values ​​of the first and last grid cells in the drawing area. The first stitched image is drawn onto the drawing area to obtain the second grid interface.

15. The method according to any one of claims 1 to 14, characterized in that, The second grid interface is drawn in the first area of ​​the first view control; Before displaying the second grid interface, the method further includes: Starting from the top left corner of the first region, draw a stitched image in the first region row by row, N grids in order of the index of the stitched images from smallest to largest.

16. The method according to claim 15, characterized in that, Starting from the top left corner of the first region, and following the ascending order of the image indices, a stitched image is drawn row by row, every N squares, within the first region. This includes: Before drawing the stitched image for each row, shift the origin of the canvas horizontally from the top left corner of each row by the width of the first stitched image. The stitched image of the first index is drawn on the canvas, and the upper left corner of the stitched image of the first index coincides with the origin of the canvas. Obtain the number of columns of the image that has been drawn in the first region; If the number of columns of the drawn image is less than the number of columns of the second image, the canvas is moved to the right by a distance equal to the width of the stitched image, and the stitched image with the second index is drawn on the canvas. The upper left corner of the stitched image with the second index coincides with the origin of the canvas, and the second index is equal to the first index plus 1.

17. The method according to claim 16, characterized in that, The method further includes: If the number of columns in the drawn image is greater than or equal to the number of columns in the second image, the following operations are performed sequentially: Determine the distance by which the origin of the canvas is horizontally offset by the width of the first stitched image when drawing the first stitched image in the next row; The number of columns of the image already drawn in the first region will be reset to 0; Restore the origin of the canvas to coincide with the top left corner of each row; Move the canvas vertically downwards by a distance equal to the height of the stitched image.

18. The method according to claim 17, characterized in that, The step of determining the horizontal offset of the canvas origin by the width of a first number of stitched images when drawing the first stitched image in the next row includes: The first value is obtained by subtracting the number of the second column from the number of columns of the image already drawn in the first region, and then subtracting N. Use the first value as the horizontal offset of the canvas origin when drawing the first stitched image in the next row.

19. The method according to claim 17, characterized in that, Before restoring the origin of the canvas to coincide with the top left corner of each row, the method further includes: If the first value is equal to zero, then increment the index of the stitched image by 1; If the first value is not equal to zero, the index of the stitched image remains unchanged.

20. The method according to any one of claims 16 to 19, characterized in that, The step of drawing a stitched image in the first region, starting from the top left corner and following the ascending order of the image index, row by row, every N squares in the first region, also includes: Before starting to draw the first row of data in the first region, move the origin of the canvas to the top left corner of the first row in the first region; After completing the drawing of the last row of data in the first region, the origin of the canvas is moved again to the upper left corner of the first row in the first region.

21. The method according to any one of claims 15 to 20, characterized in that, Before starting to draw the first row of data in the first region, the method further includes: The first scaling factor is determined based on the size of the grid in the first region and the size of the image to be stitched together; Set the scaling factor of the canvas to the first scaling factor.

22. The method according to any one of claims 15 to 20, characterized in that, Before starting to draw the first row of data in the first region, the method further includes: Based on the adaptation position value of the grid in the first row and first column of the first region, determine the index of the first stitched image drawn in the first row of the first region; Based on the adaptation position value of the grid in the first row and first column of the first region, the index of the first stitched image drawn in the first row of the first region, and the value N, determine the horizontal offset of the origin of the canvas when drawing the first stitched image in the first row.

23. The method according to any one of claims 1 to 22, characterized in that, Before receiving the user's first operation on the electronic device, the method further includes: The gallery interface is displayed, which includes album cards; Receive the user's fourth operation on the album card; In response to the fourth operation, the first grid interface is displayed.

24. An electronic device, characterized in that, The electronic device includes: one or more processors, and memory; The memory is coupled to the one or more processors, the memory being used to store computer program code, the computer program code including computer instructions, the one or more processors invoking the computer instructions to cause the electronic device to perform the method as described in any one of claims 1 to 23.

25. A chip system, characterized in that, The chip system is applied to an electronic device, the chip system including one or more processors, the one or more processors being used to invoke computer instructions to cause the electronic device to perform the method as described in any one of claims 1 to 23.

26. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes instructions that, when executed on an electronic device, cause the electronic device to perform the method as described in any one of claims 1 to 23.

Images