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

TECHNICAL FIELD

[0001] The present application relates to the technical field of terminals, and in particular to a display method of a grid interface, a device, a chip system and a storage medium. BACKGROUND

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

[0003] At present, the electronic device supports displaying a fixed number of pictures in a grid form in a photo album page. In a related drawing scheme, the electronic device usually draws the images in each grid of the grid interface in turn. However, when the number of pictures included in a photo album page is large, the central processing unit (CPU) issues a large number of drawing instructions to the graphics processing unit (GPU), so that the GPU needs to draw a large number of pictures, which takes a long time, for example, 35 ms for drawing 2170 pictures, so that the grid interface appears to be stuck and dropped frame, affecting the user experience. SUMMARY

[0004] The present application provides a display method of a grid interface, a device, a chip system and a storage medium, which can solve the technical problem of long time consumption when a grid interface includes a large number of pictures.

[0005] To achieve the above-mentioned purpose, the present application adopts the following technical scheme:

[0006] In a first aspect, the present application provides a display method of a grid interface. The method can include:

[0007] In the case of displaying a first grid interface, receiving a first operation of a user on an electronic device, the first grid interface including a first number of grids;

[0008] In response to the first operation, according to the adaptive position value of the to-be-spliced picture, splicing every N to-be-spliced picture connected by the adaptive position value into a spliced picture; wherein the adaptive position value of the last to-be-spliced picture in the ith spliced picture and the adaptive position value of the first to-be-spliced picture in the (i+1)th spliced picture differ by 1, the index value of each spliced picture is sequentially increased according to the splicing order, N is an integer greater than or equal to 2, and i is a positive integer;

[0009] After receiving the first operation, continue to receive a second operation of a user on the electronic device;

[0010] In response to the second operation, a second grid interface is displayed, and N adjacent grids in the second grid interface display one stitched picture; the second grid interface includes a second number of grids, and the first number of grids is different from the second number of grids; in a case where one row in the second grid interface has one stitched picture, an index value of a last stitched picture in the jth row is different from an index value of a first stitched picture in the (j+1)th row by 1; or in a case where one row in the second grid interface has multiple stitched pictures, an index value of two adjacent stitched pictures in each row is different by 1, and an index value of a last stitched picture in the jth row is the same as or different from an index value of a first stitched picture in the (j+1)th row by 1, where j is a positive integer.

[0011] In the traditional grid interface drawing, if there are M pictures to be displayed, the number of pictures drawn by the electronic device is M, and the number of times of drawing pictures is M. In the above scheme provided in the present application, when the first operation is received, if there are M pictures to be displayed, by stitching every N pictures with adjacent fitting position values in the M pictures to be displayed into one stitched picture, the number of pictures drawn by the GPU can be reduced from M to M / N at most. In this way, when the first operation is received, the grid interface can be directly drawn based on the already obtained stitched pictures, the number of times of drawing pictures is reduced, and the processing speed of the GPU is improved, so that the display of the album interface is more smooth.

[0012] In a possible implementation, the stitched picture is a long strip-shaped stitched picture.

[0013] As an example, the height of one stitched picture is equal to the height of one picture to be stitched, and the width of one stitched picture is equal to the sum of the widths of N pictures to be stitched. In this case, one stitched picture is a long strip-shaped horizontal stitched picture, and the electronic device takes the top left corner of the first region as a starting point, draws one stitched picture every N grids in the drawing region in a row-by-row manner according to the index of the stitched picture in ascending order.

[0014] As another example, in a possible implementation, the height of one stitched picture is equal to the height of N pictures to be stitched, and the width of one stitched picture is equal to the sum of the widths of one picture to be stitched. In this case, one stitched picture is a long strip-shaped vertical stitched picture, and the electronic device takes the top left corner of the first region as a starting point, draws one stitched picture every N grids in the drawing region in a column-by-column manner according to the index of the stitched picture in ascending order.

[0015] In a possible implementation, the first operation is a zoom operation or a double-finger press operation, and the second operation is a zoom operation. From receiving 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 the day view of the 5th level is displayed, if a zoom operation or a double-finger press operation (that is, the first operation) is received, it indicates that there is a demand to switch from the day view of the 5th level to the month view of the 13th level. In order to facilitate subsequent picture splicing, the electronic device can splice every N pictures connected with the adaptive position value of the picture to be spliced into a spliced picture according to the adaptive position value of the picture to be spliced. In the case where the user's finger does not leave the screen of the electronic device, if the next zoom operation (that is, the second operation) of the user is received, and the condition of switching from the day view of the 5th level to the month view of the 13th level is met, the second grid interface can be drawn based on the spliced picture that has been obtained.

[0016] In a possible implementation, each grid in the first grid interface displays a picture to be spliced. Taking the day view of the 5th level as an example, the total number of grids included in the day view is small, and the effect of shortening the time consumption by using the picture splicing scheme is not obvious. In this case, the picture splicing scheme of the present application does not need to be used, and an original picture is directly drawn in each grid.

[0017] In a possible implementation, M adjacent grids in the first grid interface display a spliced picture, and M is an integer greater than or equal to 2. Taking the month view of the 13th level as an example, the total number of grids included in the month view is large, and although the process of splicing pictures increases a certain time consumption, the effect of shortening the time consumption in the process of drawing pictures by the GPU is very obvious, thereby significantly shortening the overall time consumption. In this case, the picture splicing scheme of the present application can be used.

[0018] In a possible implementation, after the second grid interface is displayed, the method can further include: receiving a third operation of the user on the electronic device; and in response to the third operation, displaying a third grid interface, the third grid interface including a third number of grids, the third number being different from the second number. In a case where there is one spliced picture in each row in the third grid interface, the index value of the last spliced picture in the jth row and the index value of the first spliced picture in the (j+1)th row differ by 1. Or, in a case where there are multiple spliced pictures in each row in the second grid interface, the index values of two adjacent spliced pictures in each row differ by 1, and the index value of the last spliced picture in the jth row and the index value of the first spliced picture in the (j+1)th row are the same or differ by 1.

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

[0020] An operation that triggers the electronic device to start or stop the split-screen function;

[0021] An operation that triggers the electronic device to start or stop the small window mode.

[0022] An operation of triggering the electronic device to switch from the portrait screen state to the landscape screen state or switch from the landscape screen state to the portrait screen state;

[0023] An operation of triggering the electronic device to switch from the large screen state to the small screen state or switch from the small screen state to the large screen state.

[0024] In the above scheme, no matter what state the screen is in, the electronic device can splice every N picture to be spliced according to the AP of each picture to be spliced, to form a spliced picture. When the state of the screen is switched, the previous spliced picture can be directly reused, and the spliced pictures are drawn to the screen in sequence, so that each grid of the grid interface is drawn with a picture, and the adaptive position value of the picture corresponding to each grid in the grid interface is sequentially increased in the order from left to right and from top to bottom, and no blank appears in part of the grids. In addition, by reusing the previous spliced picture, the power consumption of the CPU can be reduced.

[0025] In a possible implementation, before displaying the first grid interface, the method can 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 of each gear corresponding to the first view control, for example, the size of the first view control is 3100*7000 pixels, the monthly view corresponding to the first view control is 13 columns, and the yearly view corresponding to the first view control is 31 columns; initializing the size of the second view control and the number of columns of each gear corresponding to the second view control, for example, the size of the second view control is 2170*5642 pixels, and the daily view corresponding to the first view control is 3 columns 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 the embodiments of the present application are described by taking the low-density View including a daily view of two gears and the high-density View including a monthly view of one gear and a yearly view of one gear as an example. In actual implementation, the daily view can include one gear, three gears or more gears, and the monthly view and the yearly view can include two or more gears. In addition, the number of columns of each gear in the low-density View and the high-density View can also be adjusted according to the width of the display screen, the width of the window, and the like.

[0026] In a possible implementation, the first view control inherits from an Android view control, and the second view control inherits from a RecyclerView control. The size of the first view control and the size of the second view control are both greater than or equal to the size of the screen. The Android view control does not have an ItemView, and the RecyclerView control has an ItemView, which supports responding to a touch operation of a user. The ItemView of the RecyclerView control supports responding to a touch operation of a user on a single ItemView. For a low-level view (for example, a day view), a user generally has a touch demand on a grid, and therefore, the RecyclerView is used as a low-density view. The Android-based view control is a common view control, which can be regarded as a blank canvas and has the advantages of saving performance and memory overhead. However, the Android-based view control does not have the concept of an ItemView and does not support responding to a touch operation of a user on a single ItemView. For a high-level view (for example, a month view or a year view), the view is generally used for quickly viewing multiple photos, and in this case, a user generally does not have a touch demand on a grid. To save performance and memory overhead, the Android-based view control can be used as a high-density view.

[0027] In a possible implementation, the second grid interface is drawn based on the first view control, the size of the first view control is greater than the size of the screen, the distance from the lower edge of the screen to the lower edge of the first view control is a first distance, and the edge of the first view control is located outside the screen. After the second grid interface is displayed, the method can further include: receiving a sliding operation of a user sliding a second distance along a first direction on the screen, the first direction being a direction from the lower edge of the screen to the upper edge of the screen, and the second distance being greater than the first distance; in response to the sliding operation, moving the first view control along a second direction by a third distance, re-determining the adaptive position value of the to-be-displayed spliced picture, obtaining the corresponding spliced picture, drawing and displaying a fourth grid interface, and displaying one spliced picture in each of the N adjacent grids in the fourth grid interface; the second direction is opposite to the first direction, and the third distance is greater than or equal to the difference between the second distance and the first distance. The spliced pictures displayed in the second grid interface and the spliced pictures displayed in the fourth grid interface are not completely the same. In a case where there is one spliced picture in each row in the fourth grid interface, the index value of the last spliced picture in the jth row and the index value of the first spliced picture in the (j+1)th row differ by 1. In a case where there are multiple spliced pictures in each row in the fourth grid interface, the index values of two adjacent spliced pictures in each row differ by 1, and the index value of the last spliced picture in the jth row and the index value of the first spliced picture in the (j+1)th row are the same or differ by 1.

[0028] In the above scheme, in a case that the electronic device displays a month view or a year view, the user can slide a finger up or down in the display screen, and the sliding operation also triggers the grid interface drawing process based on the spliced pictures. Since one spliced picture occupies multiple grids, the number of picture data drawn by the GPU and the number of times of drawing pictures are reduced by orders of magnitude, the processing speed of the GPU is improved, and the display of the album interface is more smooth.

[0029] In a possible implementation, the above re-determining the adaptive position value of the to-be-displayed spliced picture can include: determining a number of moved rows of the first view control according to the third distance; and determining the adaptive position value of the to-be-displayed spliced picture according to the adaptive position values of the first grid and the last grid in the second grid interface, the number of moved rows of the first view control, the second direction, and the second number of columns. For example, the electronic device can update the AP value of each grid according to the relationship: AP + s*g. Wherein, s represents the number of rows finally moved by the first view control, g represents the gear (i.e. the number of grid columns) of the current first view control, and AP represents the AP value of the picture corresponding to the grid in the second grid interface.

[0030] In a possible implementation, after the fourth grid interface is drawn and displayed, the method can further include: obtaining the adaptive position value of the first grid and the adaptive position value of the last grid in the fourth grid interface; re-determining the adaptive position value of each to-be-spliced picture according to the adaptive position of the first grid in the fourth grid interface, the adaptive position value of the last grid in the fourth grid interface, and the total number of grids in the fourth grid interface; and caching the re-determined each to-be-spliced picture in the low-density data loader. It can be understood that in the sliding operation scenario, after the user performs the sliding operation, the AP value of the picture in the next frame of grid interface can be predicted based on the AP value of the picture in the current grid interface, and the spliced picture is prepared in advance, so that when the next frame of grid interface is drawn in response to the sliding operation, the grid interface can be drawn using the spliced picture.

[0031] In a possible implementation, if the first operation is a zoom operation or a double-finger pressing operation, and the first grid interface is drawn based on the second view control, then the step of splicing every N pictures to be spliced into one spliced picture according to the adaptive position value of the picture to be spliced can include: obtaining the adaptive position value of the first grid in the first grid interface and the adaptive position value of the last grid in the first grid interface; determining the adaptive position value of each picture to be spliced according to the adaptive position of the first grid in the first grid interface, the adaptive position value of the last grid in the first grid interface, the total number of columns of grids of the second grid interface, and the value N; splicing every N pictures to be spliced into one spliced picture according to the adaptive position value of each picture to be spliced, and adding an index value to each spliced picture according to a splicing order; and caching each spliced picture in the high-density bitmap loader. It can be understood that in the zoom operation scenario, if a zoom operation or a double-finger pressing operation is received, it indicates that there is a need to switch gears. In order to facilitate subsequent picture splicing, the electronic device can predict the AP value of the picture in the next frame of the grid interface based on the AP value of the grid in the current grid interface, the total number of grids of the next frame of the grid interface, and the like, and prepare the spliced picture in advance. In this way, when the next frame of the grid interface is drawn in response to the zoom operation, the grid interface can be drawn using the spliced picture.

[0032] In a possible implementation, if the second operation is a zoom operation, before the second grid interface is displayed, the method can further include: determining a zoom center according to the second operation; determining the drawing area of the second grid interface in the first view control; determining the adaptive position value of the first grid and the adaptive position value of the last grid in the drawing area according to the layout position value and the adaptive position value of the grid selected according to the zoom center, one adaptive position value corresponding to one picture to be spliced; obtaining the first spliced picture from the high-density bitmap loader according to the adaptive position value of the first grid and the adaptive position value of the last grid in the drawing area; and drawing the first spliced picture to the drawing area to obtain the second grid interface. It can be understood that in the zoom operation scenario, when the zoom operation of the user is received, the layout position value and the adaptive position value of the grid selected according to the zoom center can be used to determine the row and the column of the drawing area of the next gear in the first view control, and the AP value of the zoom center is kept unchanged, and the AP values of the grids before and after the zoom center are refreshed, so that the order of the images displayed on the screen is coherent.

[0033] In a possible implementation, one spliced picture is a long horizontal spliced picture, the second grid interface is drawn in the first area of the first view control, and the second grid interface includes a second number of grids. Before the second grid interface is displayed, the method can further include: taking the top-left corner of the first area as a starting point, and drawing one spliced picture every N grids in the first area in a row according to the index of the spliced picture in ascending order.

[0034] Exemplarily, before drawing the spliced pictures of each row, the origin of the canvas is horizontally offset from the top-left corner of each row by a first value of the width of the spliced pictures; the spliced picture of the first index is drawn on the canvas, and the top-left corner of the spliced picture of the first index coincides with the origin of the canvas; the number of columns of the images that have been drawn in the first region is obtained; in the case that the number of columns of the images that have been drawn is less than a second number of columns, the canvas is moved right by a distance of N times the width of the spliced pictures, and the spliced picture of a second index is drawn on the canvas, the top-left corner of the spliced picture of the second index coincides with the origin of the canvas, and the second index is equal to the first index plus 1.

[0035] In the case that the number of columns of the images that have been drawn is greater than or equal to the second number of columns, the following operations are sequentially performed: determining that the origin of the canvas is horizontally offset by the first value of the width of the spliced pictures when drawing the first spliced picture of the next row; resetting the number of columns of the images that have been drawn in the first region to 0; if the first value is equal to zero, increasing the index of the spliced picture by 1; if the first value is not equal to zero, keeping the index of the spliced picture unchanged; restoring the origin of the canvas to coincide with the top-left corner of each row; and moving the canvas vertically downward by a distance of the height of a spliced picture. The determination that the origin of the canvas is horizontally offset by the first value of the width of the spliced pictures when drawing the first spliced picture of the next row can include: subtracting the second number of columns from the number of columns of the images that have been drawn in the first region and then subtracting N to obtain the first value; and taking the first value as the horizontal offset of the origin of the canvas when drawing the first spliced picture of the next row.

[0036] In the above scheme, the electronic device can start the drawing process of the spliced pictures from the first row and the first column with the top-left corner of the month view or the year view as the starting point. After completing the drawing of all the spliced pictures in the first region, from the perspective of the grid interface effect, each grid corresponds to a to-be-spliced picture, and the AP values of the to-be-spliced pictures corresponding to the grids increase in turn in the order from left to right and from top to bottom.

[0037] In a possible implementation, starting from the top-left corner of the first region, a spliced picture is drawn in each N grids in the first region in the order of the indexes of the spliced pictures from small to large, and the scheme can further include: before starting the drawing of the first row of data in the first region, moving the origin of the canvas to the top-left corner of the first row in the first region; and after completing the drawing of the last row of data in the first region, moving the origin of the canvas to the top-left corner of the first row in the first region again. In the above scheme, after completing the drawing of all the grids in all the drawing regions, the state of the canvas coordinate system can be restored to the initial state, facilitating the drawing of the next frame of the grid interface.

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

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

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

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

[0042] The method described in the first aspect can be implemented by hardware, or by executing corresponding software by hardware. 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, and the like.

[0043] In a third aspect, the present application provides an electronic device, comprising: one or more processors, and a memory. The memory is coupled to the one or more processors, and the memory is configured to store computer program codes, the computer program codes comprising computer instructions, and the one or more processors are configured to invoke the computer instructions to cause the electronic device to perform the method provided in the first aspect and any possible implementation manner thereof.

[0044] In a fourth aspect, the present application provides a computer readable storage medium. The computer readable storage medium comprises computer instructions. When the computer instructions are run on an electronic device, the electronic device is caused to perform the method provided in the first aspect and any possible implementation manner thereof.

[0045] In a fifth aspect, the present application provides a computer program product. When the computer program product is run on a computer, the computer is caused to perform the method provided in the first aspect and any possible implementation manner thereof.

[0046] In a sixth aspect, the present application provides a chip system. The chip system is applied to an electronic device, and the chip system comprises one or more processors. The one or more processors are configured to invoke computer instructions to cause the electronic device to perform the method provided in the first aspect and any possible implementation manner thereof.

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

[0048] Figure 1 A scene schematic diagram of a mobile phone provided by the present application in a scenario of zooming display of images on a photo album page;

[0049] Figure 2 A scene schematic diagram of a mobile phone provided by the present application in a scenario of zooming display of images on a photo album page;

[0050] Figure 3 A scene schematic diagram of a mobile phone provided by the present application in a scenario of zooming display of images on a photo album page;

[0051] Figure 4The second illustration of a scenario where images are scrolling through a photo album page on a mobile phone, as provided in this application;

[0052] Figure 5 A schematic diagram of the View provided in this application for setting up an album page;

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

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

[0055] Figure 8A This is a schematic diagram illustrating the loading of images to be stitched in a high-density data loader, as provided in this application.

[0056] Figure 8B This is a schematic diagram illustrating the loading of stitched images in a high-density bitmap loader, as provided in this application.

[0057] Figure 9 This is a schematic diagram illustrating the stitching and drawing of images based on a high-density bitmap loader, as provided in this application.

[0058] Figure 10 A schematic diagram of the drawing scheme for the grid interface based on spliced ​​images provided in this application;

[0059] Figure 11 A software architecture diagram of an electronic device provided in this application;

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

[0061] Figure 13 A schematic diagram of another low-density view provided in this application;

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

[0063] Figure 15 A schematic diagram of another high-density view provided in this application;

[0064] Figure 16 A schematic diagram illustrating the switching between low-density and high-density views provided in this application;

[0065] Figure 17 A schematic diagram of LP and AP in a grid interface provided for this application;

[0066] Figure 18 A software architecture diagram of another electronic device provided in this application;

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

[0068] Figure 20 A flowchart illustrating the specific scheme for determining the AP range based on the scaling center provided in this application;

[0069] Figure 21 This application provides a flowchart of a method for triggering high-density View drawing in a scrolling scenario.

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

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

[0072] Figure 24 A schematic diagram illustrating some parameters involved in the process of drawing the lunar view provided in this application;

[0073] Figure 25 A flowchart illustrating the process of triggering the grid management class to draw a monthly or yearly view for the high-density View provided in this application;

[0074] Figure 26 A flowchart illustrating the specific method for drawing a lunar view based on stitched images provided in this application;

[0075] Figures 27A-27I A schematic diagram of a lunar view based on stitched images provided in this application;

[0076] Figure 28 A schematic diagram illustrating the grid interface drawn based on spliced ​​images when switching from portrait to landscape mode as provided in this application;

[0077] Figure 29 This is a schematic diagram illustrating the grid interface drawn based on spliced ​​images when switching from a small screen state to a large screen state, as provided in this application.

[0078] Figure 30 A schematic diagram illustrating the grid interface drawn based on spliced ​​images when switching from full-screen to half-screen mode as provided in this application;

[0079] Figure 31 A schematic diagram illustrating 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;

[0080] Figure 32 A schematic diagram illustrating the grid interface drawn based on stitched images when switching from a monthly view to a yearly view, as provided in this application.

[0081] Figure 33 A flowchart of a high-density View-based image scrolling method provided in the present application is shown in FIG. 1.

[0082] Figure 34 A hardware structure schematic diagram of an electronic device provided in the present application is shown in FIG. 2. DETAILED DESCRIPTION

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

[0084] In the embodiments of the present application, the gallery application supports displaying images. For example, the gallery application supports displaying images in the form of albums on an album page, where the album page can include albums of multiple types such as camera, video, photo, network disk, selfie, live photo, long exposure, slow motion, screenshot and moving picture.

[0085] For the album page, the electronic device is pre-configured with multiple gears. The "gear" can be understood as the number of image columns displayed on the display screen. For example, the electronic device is pre-configured with 3 gears, 5 gears, 13 gears and 31 gears for the album page. The 3 gears is the minimum gear for the album page, and the 31 gears is the maximum gear for the album page. When the gear is 3, the number of image columns displayed on the display screen is 3; when the gear is 5, the number of image columns displayed on the display screen is 5; when the gear is 13, the number of image columns displayed on the display screen is 13; and when the gear is 31, the number of image columns displayed on the display screen is 31.

[0086] The user can change the number of image columns of the album page displayed on the display screen through a two-finger zoom operation. As an example, the user can trigger the electronic device to increase the number of image columns of the album page displayed on the display screen by reducing the distance between the two fingers. As another example, the user can trigger the electronic device to decrease the number of image columns of the album page displayed on the display screen by increasing the distance between the two fingers. For example, if the user sets the album page to 3 gears through the zoom operation, the electronic device always displays 3 image columns before receiving the next two-finger operation.

[0087] The following takes a mobile phone as an example to illustrate the use scenario of the gallery application. Figures 1-4 The following takes a mobile phone as an example to illustrate the use scenario of the gallery application.

[0088] In some embodiments, the mobile phone supports zooming the displayed images on the album page in response to a two-finger operation.

[0089] Exemplarily, Figure 1 and Figure 2This illustration shows a scenario where a mobile phone zooms in to display images on a photo album page.

[0090] Figure 1 and Figure 2 The example provided uses 3, 5, 13, and 31 preset levels for the photo album page, which is not intended to limit this application. In actual implementation, the phone can arbitrarily set the levels for the photo album page. For example, based on the phone's screen size, 1, 3, 5, 13, 21, and 31 levels can be preset for the photo album page, with level 1 being the minimum and level 31 being the maximum. Users can switch between these six levels by using a two-finger zoom gesture.

[0091] like Figure 1 As shown in (a), the phone displays icons for applications such as the Gallery app on the home screen. 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... Figure 1 The card page is shown in (b). The card page comprises several areas: a status bar displaying battery and signal strength indicators, an action bar providing photos and a search box, and a foot bar showcasing photos, albums, memories, and creations. When an album in the foot bar is selected, the central area of ​​the card page displays album cards for the camera, all photos, and videos. These album cards, also known as photo album cards, each serve as an entry point to a specific album.

[0092] Users can select an album card from these album cards. For example, ... Figure 1 As shown in (b), the user can tap the "Camera" card 02. In response to the user's tap on the "Camera" card 02, the phone displays the following... Figure 1 The album page shown in (c) is an example. The album page comprises multiple square grids. Taking an album page with three 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 displays a single image, which can be a thumbnail of a photograph or a video clip. Additionally, when the album page has three grids, a time capsule 03, displayed in days with preset transparency, is shown in the upper left corner of the album page; at this point, the album page is called a day view. As an example, the time capsule provided in this embodiment is a control or prompt that floats above the grid interface, indicating the shooting date of the images in the grid interface. For example, time capsule 03 indicates the specific shooting date "2024.07.10," which could be the shooting date of all photos in the current album page. When a user wants to quickly browse more photos, the user can reduce the distance between two fingers to trigger the phone to increase the number of image columns displayed on the album page.

[0093] likeFigure 1 As shown in (d) of FIG. 13, the user can press the two fingers, and the distance between the two fingers is d1 at this moment. Figure 1 As shown in (e) of FIG. 13, the user can reduce the distance between the two fingers without moving the two fingers away from the display screen, and when the distance between the two fingers is reduced from d1 to d2, the album page is switched from the 3-column grid to a 5-column grid, and the length of each grid is h2, which is equal to the width of the display screen divided by 5. When the album page includes the 5-column grid, a time capsule 04 in days is displayed in the upper left corner of the album page with a preset transparency, for example, the specific shooting date indicated by the time capsule 04 is still “2024.07.10”, which can be the shooting date of all photos in the current album page. At this moment, the album page is still called day view.

[0094] As shown in (f) of FIG. 13, the user can continue to reduce the distance between the two fingers without moving the two fingers away from the display screen, and when the distance between the two fingers is reduced from d2 to d3, the album page is switched from the 5-column grid to a 13-column grid, and the length of each grid is h3, which is equal to the width of the display screen divided by 13. When the album page includes the 13-column grid, two time capsules 05 and 06 in months are displayed on the left side of the album page with a preset transparency. Among them, the shooting dates of the photos in the grids between the time capsule 05 and the time capsule 06 are “2024.07”, and the shooting dates of the photos in the grids below the row where the time capsule 06 is located are “2024.08”. At this moment, the album page is called month view. Figure 1 The user can continue to reduce the distance between the two fingers. For example, when the distance between the two fingers is reduced from d3 as shown in (f) of FIG. 13 to d4 as shown in (a) of FIG. 14, the album page is switched from the 13-column grid to a 31-column grid, and the length of each grid is h4, which is equal to the width of the display screen divided by 31. When the album page includes the 31-column grid, a time capsule 07 in years is displayed in the upper left corner of the album page with a preset transparency, for example, the specific shooting date indicated by the time capsule 07 is “2024”, which can be the shooting date of all photos in the current album page. At this moment, the album page is called year view.

[0095] Figure 1 As an example, after the album page is switched to the 31-column grid, if the user lifts the hand, the album page keeps displaying 31 images as shown in (b) of FIG. 14. Figure 2 As another example, after the album page is switched to the 31-column grid, if the user keeps the distance between the two fingers unchanged at d4, the album page keeps displaying 31 images as shown in (c) of FIG. 14.

[0096] Figure 2 As an example, after the album page is switched to the 31-column grid, if the user lifts the hand, the album page keeps displaying 31 images as shown in (b) of FIG. 14.

[0097] As another example, after the album page is switched to the 31-column grid, if the user keeps the distance between the two fingers unchanged at d4, the album page keeps displaying 31 images as shown in (c) of FIG. 14. Figure 2 As an example, after the album page is switched to the 31-column grid, if the user lifts the hand, the album page keeps displaying 31 images as shown in (b) of FIG. 14.​​

[0098] As another example, after switching the album page to a 31-column grid, such as Figure 2 As shown in (d), if the user increases the spacing between two fingers, for example, from d4 to d5, the album page switches from a 31-column grid to a 13-column grid. When the album page includes 13 columns, 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 Capsule 08 and Time Capsule 09 were taken on "July 2024," while the photos in the cells of Time Capsule 09 and the cells below it were taken on "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.

[0099] 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 a mobile phone enters a photo album page can be as follows: Figure 1 The three columns shown in (c) can also be as follows: Figure 1 The five columns shown in (e) are an example. For instance, the number of image columns when the phone enters the album page this time is the same as the number of image columns when it exits the album page last time.

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

[0101] For example, Figure 3 and Figure 4 This illustration shows a scenario where a mobile phone scrolls through images on a photo album page.

[0102] Users can swipe down to trigger the phone to display more images taken earlier. For example... Figure 3 As shown in (a), the album page includes two time capsules, 10 and 11, organized by 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. Figure 3 As shown in (b), if a single finger slides down a distance d6, in response to the user's swipe, the album page slides down a distance d6. If all photos on the current page were taken in July 2024, then the specific shooting date indicated by Time Capsule 12 is "July 2024". Figure 3As shown in (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.

[0103] Users can also swipe up to trigger the phone to display more images taken later. For example... Figure 4 As shown in (a), the specific shooting date indicated by Time Capsule 14 on the album page is "2024.02". Users can press and hold image 350 with a single finger and then slide the finger upwards. (As shown in the image). Figure 4 As shown in (b), if a single finger slides upwards a distance d8, in response to the user's sliding action, the album page slides upwards a distance d8. If all photos on the current page were taken in March 2024, then the specific shooting date indicated by Time Capsule 15 will be "March 2024". Figure 4 As shown in (c), the user can continue to press and hold image 350 and slide it upwards a distance d9. In response to the user's swipe, the album page slides upwards a distance d9. At this point, the current page includes two time capsules, 16 and 17, each representing a month. The photos in the cell between time capsules 16 and 17 were taken on "March 2024," while the photos in the cell containing time capsule 17 and the cells below it were taken on "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.

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

[0105] For example, Figure 5 This diagram illustrates the View control settings for a photo album page.

[0106] After the phone receives the click operation on the gallery icon, the phone starts running 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 the display screen size of 1300 pixels in width*2875 pixels in height as an example, the phone can divide the width 1300 pixels of the display screen by the minimum gear 3, so as to obtain the side length of each grid as 434 pixels. Then, the phone can divide the height 2875 pixels of the display screen by the side length 434 pixels of each grid, and add 1 to obtain the number of rows 8 of the drawing area. It should be noted that in the 3-gear mode, the phone can determine that a maximum of 7 rows are displayed, and the drawing area is set to 8 rows, so that the size of the drawing area sent to the display screen is greater than the size of the display screen, so that no blank is generated on the display screen, and the up and down scrolling of the View control is ensured. For the up and down scrolling of the View control, refer to the description of the following embodiments, which will not be described here.

[0107] As shown in Figure 5 In the 3-gear mode, the grid interface drawn in the drawing area of the View control is 3 columns*8 rows of grids. Each grid is used to display a picture. The picture can be a thumbnail of a photo or a thumbnail of a frame in a video. When a picture is a thumbnail of a photo, the user clicks the thumbnail, and the phone can display the photo in full screen. When a picture is a thumbnail of a frame in a video, the user clicks the thumbnail, and the phone can play the video in full screen.

[0108] In the drawing scheme of the grid interface based on the View control, the electronic device usually draws the image in each grid in sequence. Specifically, the CPU calls the drawing ondraw() method to issue a drawing instruction (also referred to as a drawing task) to the GPU.

[0109] For example, taking that the drawing area in the View control includes 13 columns*35 rows, a total of 455 grids as an example. As shown in Figure 6 The CPU can create a View control greater than the size of the display screen. When receiving the zoom operation triggered by the user to switch the electronic device from 5 columns to 13 columns, the CPU can issue the drawing task of 455 pictures to the GPU. The GPU reads pictures 1 to 455 from the data cache module, and draws the read pictures to the grids of the drawing area in sequence. Each picture is a bitmap of 100 pixels in width*100 pixels in height. For the 455 pictures, the GPU performs a total of 455 drawing processes. Experimental data shows that it takes about 6 milliseconds (ms) from the CPU issuing the drawing task to the GPU sending the drawing to the display screen.

[0110] For another example, taking that the drawing area in the View control includes 31 columns*70 rows, a total of 2170 grids as an example. As shown inFigure 7 As shown, 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 the read images sequentially into the respective grids 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.

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

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

[0113] In a traditional grid interface, if there are M pictures to be displayed, the GPU draws M pictures, and the number of times of drawing pictures is M. In the grid interface drawing scheme provided in the present application, if there are M pictures to be displayed, by splicing every N pictures numbered adjacently in the M pictures to be displayed into one spliced picture, the number of pictures drawn by the GPU can be reduced from M to M / N at most, and the number of times of drawing pictures is reduced accordingly, thereby improving the processing speed of the GPU. It can be understood that the larger the value of M, the more obvious the reduction effect of the number and times of drawing pictures, and the more significant the improvement effect of the processing speed of the GPU.

[0114] In the grid interface drawing scheme provided in the present application, one picture to be displayed is referred to as one picture to be spliced. The image attribute of the picture to be spliced and the spliced picture can be a bitmap.

[0115] Exemplarily, Figure 8A A schematic diagram of loading a picture to be spliced in a high-density data loader provided in the present application; Figure 8B A schematic diagram of loading a spliced picture in a high-density bitmap loader provided in the present application.

[0116] The electronic device can load pictures to be displayed (also referred to as pictures to be spliced) in advance in the high-density data loader according to the current application scenario. For example, when a photo album page is switched from a 5-column daily view to a 13-column monthly view, the electronic device can trigger the high-density data loader to load the pictures to be spliced according to the adapter position (AP) index value (referred to as AP value for short) of the pictures on the current screen. As shown in Figure 8A The AP values of the pictures to be spliced loaded in the high-density data loader are “1”, “2”, “3”, …, “460”, and the size of each picture to be spliced is 100*100 pixels in width and height. The smaller the AP value, the earlier the time at which the electronic device obtains the picture, and the larger the AP value, the later the time at which the electronic device obtains the picture. The “time at which the picture is obtained” refers to the time at which the original picture or video is stored in the photo album. The original picture or video is taken by a camera, downloaded from a network device, or obtained through a screenshot operation. The picture to be spliced refers to a thumbnail of the original picture or video.

[0117] After the high-density data loader completes the loading of the pictures to be spliced, as shown in Figure 8BAs shown, the CPU can stitch every N pictures adjacent / connected to each other according to the AP values in descending order, and each picture to be stitched only participates in the stitching of one stitched picture. Each stitched picture corresponds to an index value. In the process of stitching pictures, the index values of the pictures are sequentially incremented in the time order of stitching. Taking N = 10 as an example, the electronic device can stitch 10 pictures with AP values of (i-1)*10+1; (i-1)*10+2;....; (i-1)*10+10 into one stitched picture, where i is a positive integer. For example, the electronic device can stitch 10 pictures with AP values of "1", "2",..., "10" into one stitched picture, and add an index "Index1" to the stitched picture; stitch 10 pictures with AP values of "11", "12",..., "20" into one stitched picture, and add an index "Index2" to the stitched picture;...; stitch 10 pictures with AP values of "451", "452",..., "460" into one stitched picture, and add an index "Index46" to the stitched picture. The resolution of a stitched picture is 1000*100 pixels in width*height. In this way, the number of pictures drawn by the GPU is reduced from the original 455 to the current 46, that is, the number of pictures is reduced by about 10 times.

[0118] Exemplarily, Figure 9 A schematic diagram of stitching and drawing based on stitched pictures in a high-density bitmap loader is provided for the present application. After the GPU obtains the drawing instruction from the CPU, the GPU can read the stitched pictures from the high-density bitmap loader and draw the stitched pictures into the View control. As shown in FIG. 6, the GPU can draw the stitched pictures into the View control in the order of the index values of the stitched pictures. Figure 9As shown, the GPU can perform the following drawing operations in sequence in response to the drawing instruction, taking the top-left corner of the drawing area in the View control as the origin, taking horizontal right as positive and horizontal left as negative: draw the tiled picture with index "Index1" to column 1 to column 10 in row 1, draw the tiled picture with index "Index2" to column 11 to column 20 in row 1, draw the tiled picture with index "Index2" to column -3 to column 7 in row 2, draw the tiled picture with index "Index3" to column 8 to column 17 in row 2, draw the tiled picture with index "Index3" to column -6 to column 4 in row 3, draw the tiled picture with index "Index4" to column 5 to column 14 in row 3, draw the tiled picture with index "Index4" to column -9 to column 1 in row 4, draw the tiled picture with index "Index5" to column 2 to column 14 in row 4, and so on. In this way, the GPU can draw the tiled picture "Index46" to column 9 to column 18 in the last row. In this way, the number of times of drawing pictures is reduced from the original 455 times to the current 74 times, i.e., the number of times of drawing pictures is reduced by about 6 times.

[0119] It should be noted that, Figure 8B and Figure 9 are described by taking the example of tiling 10 pictures into one long strip-shaped tiled picture, which does not limit the present application. The number of pictures tiled each time can be adjusted according to the use requirement, for example, when the maximum gear of the grid interface is 31 columns, 30 pictures can be tiled into one tiled picture.

[0120] In order to more clearly compare the traditional drawing grid interface method with the drawing scheme of the grid interface based on tiled pictures provided by the present application, the following describes the case that the drawing area of the View control includes 31 columns * 70 rows, and a total of 2170 pictures.

[0121] As shown in FIG. 6, the CPU can create a View control. The CPU can perform the following drawing operations in sequence in response to the drawing instruction, taking the top-left corner of the drawing area in the View control as the origin, taking horizontal right as positive and horizontal left as negative: Figure 10 Figure 7 ​The pictures in the high-density data loader are spliced, for example, pictures 1 to 30 in the high-density data loader are spliced into a spliced picture with an index of "Index1" and stored in Buffer1 of the high-density bitmap loader, pictures 31 to 60 in the high-density data loader are spliced into a spliced picture with an index of "Index2" and stored in Buffer2 of the high-density bitmap loader, pictures 61 to 90 in the high-density data loader are spliced into a spliced picture with an index of "Index3" and stored in Buffer3 of the high-density bitmap loader,..., and pictures 2161 to 2170 in the high-density data loader are spliced into a spliced picture with an index of "Index73" and stored in Buffer73 of the high-density bitmap loader. When receiving a zoom operation triggered by a user to switch from 13 columns to 31 columns, the CPU can send a drawing task of the spliced pictures with the index of "Index1" to the index of "Index73" to the GPU. The GPU reads the spliced pictures with the index of "Index1" to the index of "Index73" from the high-density bitmap loader and draws the read pictures to the View control in sequence every 30 grids. Each picture is a bitmap with a width of 1000*height of 100 pixels. Experimental data shows that the time from sending the drawing task to the GPU to the GPU sending the display to the display screen is shortened from 35ms to 3ms, meeting the performance requirements of related data with a refresh frequency of 120Hz on the display and the load in the device.

[0122] The above-mentioned drawing scheme of the grid interface based on spliced pictures includes two processes: the first process is that the CPU is responsible for splicing the to-be-spliced pictures in sequence according to the AP values of the to-be-spliced pictures, splicing every N to-be-spliced pictures with adjacent AP values into a spliced picture, and storing the spliced picture in the high-density bitmap loader. Since the splicing process of the pictures is added, the time consumption is slightly increased compared with the traditional way of drawing the grid interface; the second process is that after the GPU obtains the drawing instruction from the CPU, the GPU can read the spliced picture from the cache and draw the spliced picture to the drawing area of the View control. By splicing the pictures, the number of drawing pictures is reduced, so the time consumption is shortened compared with the traditional way of drawing the grid interface.

[0123] For a drawing scene with a small number of to-be-displayed pictures, such as (c) in Figure 1 or Figure 1As shown in (e) of the daytime view, the number of images that the GPU needs to draw is relatively small. 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.

[0124] For drawing scenarios where a large number of images need to be displayed, such as Figure 1 The lunar view shown in (f) or as shown in the figure Figure 2 As shown in (a) of the year view, the GPU needs to draw a large number of images. Although the first process mentioned above increases the time consumption, 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 between the two processes.

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

[0126] In another possible use scenario, when the grid interface includes images in a smaller number of columns (3 columns or 5 columns), the user generally has a touch demand for the grid, such as displaying the original photo or video corresponding to the thumbnail by clicking a certain grid; when the grid interface includes images in a larger number of columns (13 columns or 31 columns), it is generally used for quickly browsing multiple photos, and in this case the user generally does not have a touch demand for the grid. Based on this, the drawing scheme of the grid interface based on the spliced picture provided in this application is only applied to the month view or the year view. For the day view, the traditional drawing scheme of the grid interface as shown in Figure 6 or Figure 7 is still used. In this case, as shown in Figure 11 , the View control is specifically divided into two types by the embodiments of this application: a low-density View (which can be referred to as a second view control) and a high-density View (which can be referred to as a first view control). The low-density View is implemented by customizing the RecyclerView control and is used for a low-gear view (such as the day view) and supports scrolling or zooming. The high-density View is implemented by the View control of Android and is used for a high-gear view (such as the month view or the year view) and supports scrolling or zooming.

[0127] According to the description in the above paragraph, the ItemView of the custom RecyclerView control supports responding to the touch operation of the user on a single ItemView. For a low-gear view (such as the day view), the user generally has a touch demand for the grid, and therefore the custom RecyclerView is used as the low-density View.

[0128] The difference between the custom RecyclerView and the View control of Android is that the View control of Android is a common View control and can be regarded as a blank canvas, and has the advantages of saving performance and memory overhead. However, the View control of Android does not have the concept of ItemView and does not support responding to the touch operation of the user on a single ItemView. For a high-gear view (such as the month view or the year view), it is generally used for quickly viewing multiple photos, and in this case the user generally does not have a touch demand for the grid. In order to save performance and memory overhead, the View control of Android can be used as the high-density View.

[0129] In some embodiments, as shown in Figure 11As shown, the embodiments of the present application provide three buffers: 1. a low-density data loader, used to store original pictures without splicing for low-density View preparation; 2. a high-density data loader (also referred to as an Item data buffer module), used to store pictures without splicing for high-density View preparation; and 3. a high-density bitmap loader, used to store spliced pictures for high-density View preparation, which are obtained by splicing pictures within the storage range of the high-density data loader.

[0130] For a drawing scenario in which the number of pictures to be displayed is small, the daily View drawing module can read a picture (which is a picture without splicing) from the low-density data loader and draw the picture to the low-density View, thereby obtaining a daily View as shown in (c) of FIG. 13 or (e) of FIG. 14. Figure 1 Figure 1 For a drawing scenario in which the number of pictures to be displayed is large, the annual View drawing module or the monthly View drawing module can first load pictures to be spliced in the high-density data loader, and then read a spliced picture from the high-density bitmap loader. The annual View drawing module or the monthly View drawing module draws the spliced picture to the high-density View, thereby obtaining a monthly View as shown in (f) of FIG. 13 or an annual View as shown in (a) of FIG. 14. Figure 1 Figure 2

[0131] To facilitate understanding, taking the size of the album window as an example, which is 1300*2875 pixels (at this moment, the album window is displayed full screen), the specific implementation modes of the low-density View and the high-density View are described below.

[0132] When the grid interface includes a small number of columns of images, such as 3 columns of images or 5 columns of images, the electronic device can draw relevant feature icons (also referred to as controls) on the thumbnails according to the business status of the photos and videos. For example, as shown in (a) of FIG. 15, the electronic device can draw a feature icon of a video on a thumbnail of a video. Figure 1 ​​​As shown in (c) in the figure, the cloud photo grid lower right corner includes a cloud control for indicating that the photo has been synchronized to the cloud; the favorite photo grid upper right corner includes a favorite control for indicating that the photo has been collected by the user. In some scenarios, the electronic device needs to support responding to user click operation on a certain control to implement the corresponding function. However, using the Android View control does not support touch operation on the control, and the corresponding function cannot be implemented. Based on this reason, the present application provides a grid interface display scheme based on a custom RecyclerView control (i.e. low-density View). The size of the custom RecyclerView control is greater than the size of the display screen. The custom RecyclerView is composed of multiple ItemView in the form of a grid, and each ItemView is used to display an image view, supporting responding to user touch operation on a single ItemView. Each ItemView supports two ways to draw controls: one way is to display multiple controls in a multi-view combination layout; the other way is to convert each view in the multi-view combination layout into a drawable object and put it into a drawable list, and trigger the drawing of each drawable respectively. No matter which way is used, the custom RecyclerView control can support touch operation on the controls in a single ItemView.

[0133] Exemplarily, Figure 12 and Figure 13 A schematic diagram of a low-density View (implemented based on a custom RecyclerView control) provided by the present application.

[0134] When the album window needs to display 3 columns of images or 5 columns of images, the number of pictures in the entire album window is small, and a low-density View can be shared. If the scaling factor of the low-density View is set to 1.0 when the album window displays 3 columns, the low-density View needs to be reduced by 3 / 5 = 0.6 times when the album window displays 5 columns. Based on this, the calculation method of the size of the low-density View is as follows: when the album window needs to display 3 columns of images, the width 1300 pixels of the album window is divided by 3 columns to obtain the width / height of each grid as 434 pixels; the height 2875 pixels of the album window is divided by the height 434 pixels of each grid to obtain 7 rows of images that need to be displayed by the album window. It should be noted that, in order to facilitate the execution of the View control scrolling scheme provided in the following embodiments when sliding up and down, no blank space will appear, and an additional row can be drawn, that is, 7 rows plus 1 row, and finally 8 rows are determined as the actual number of rows of the day view drawing area. Based on a similar reason, the actual number of rows of the drawing area of the month view and the year view described below is one more than the calculated number of rows; then, the width 434 pixels of each grid is multiplied by 5 columns to obtain the width of the low-density View as 2170 pixels; the width 2170 pixels of the low-density View is multiplied by the height 2875 pixels of the album window, and then divided by the width 1300 pixels of the album window, and then divided by the height 434 pixels of each grid to obtain the number of rows of the low-density View as 12+1 = 13 rows. In this way, the low-density View includes 5 columns * 13 rows of grids, and the size of each grid is width 434 * height 434 pixels. As shown in Figure 12 , when the scaling factor of the low-density View is set to 1.0, the day view drawing area (3 columns * 8 rows of grids) of the low-density View is sent to the display according to the scaling factor 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 grids) of the low-density View is sent to the display according to the scaling factor 0.6.

[0135] When the grid interface includes a large number of columns of images, such as 13 columns of images or 31 columns of images, the electronic device can not need to draw controls on the thumbnails, and at this moment the electronic device does not need to support responding to the clicking operation of a user on a certain control to implement the corresponding function. The View control of Android can fully meet the display function of the grid interface, and the implementation manner is simpler. Based on this reason, the application provides a grid interface display scheme based on the View control (that is, the high-density View) of Android. The high-density View is functionally extended on the basis of the View control of Android, supports scrolling or scaling, but does not have the concept of ItemView.

[0136] Exemplarily, Figure 14 and Figure 15A schematic diagram of a high-density View (implementation of an Android-based View control) provided for the present application.

[0137] When the photo album window needs to display 13 columns of images or 31 columns of images, the electronic device can create a high-density View with a size greater than or equal to the size of the photo album window. For example, the size of the photo album window is 1300*2875 pixels in width, and the size of the high-density View is 3100*7000 pixels in width. The high-density View can be regarded as a blank canvas. The electronic device can draw a grid interface in the high-density View according to 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 of grids) in the month view drawing area of the high-density View, and display the grid interface to the display screen according to a scaling factor of 1.0. As shown in Figure 15 , the electronic device can draw a grid interface (31 columns*70 rows of grids) in the year view drawing area of the high-density View, and display the grid interface to the display screen according to a scaling factor of 13 / 31=0.42.

[0138] During the display of the grid interface, the electronic device can switch between the low-density View and the high-density View in response to a zoom operation of the user to change the number of grid columns in the current grid interface.

[0139] Exemplarily, Figure 16 A schematic diagram of switching between a low-density View and a high-density View provided for the present application.

[0140] For example, the low-density View can be a low-density View as shown in Figure 12 and Figure 13 , and the high-density View can be a high-density View as shown in Figure 14 and Figure 15 . As shown in Figure 16 , when the user reduces the double-finger interval, the electronic device switches from the low-density View to the high-density View, and the high-density View adopts a drawing scheme of a grid interface of spliced pictures based on an Android-based View control. It can be understood that, since the number of pictures to be displayed is large in this scenario, the use of this scheme can significantly shorten the overall time consumption. When the user increases the double-finger interval, the electronic device switches from the high-density View to the low-density View, and the low-density View adopts a drawing scheme of a grid interface of non-spliced pictures based on a custom RecyclerView. It can be understood that, since the number of pictures to be displayed is small in this scenario, the time consumption of this scheme is also short, and since there is no need to splice pictures, the CPU power consumption can be reduced relative to the drawing scheme of the grid interface based on spliced pictures.

[0141] The above embodiments introduce two kinds of View: low-density View and high-density View. Both low-density View and high-density View involve two indexes: one index is an adapter position (AP), and the other index is a layout position (LP).

[0142] The AP is an index separately set for the content displayed in the display screen from the perspective of an adapter, and is used to represent the number of images displayed in the grid. The LP is an index established from the perspective of a LayoutManager, and is used to represent the position of the grid in the View control. In the native logic of the Android system, the LP cannot be customized, but in the embodiments of the present application, the electronic device can change the specific value of the LP according to the zooming multiple, the zooming center, and the scrolling operation. In the low-density View, the LP is consecutively numbered from the first row and the first column of the grid in the entire low-density View to the last row and the last column of the grid in the entire low-density View. In the high-density View, the LP is consecutively numbered from the first row and the first column of the grid in the drawing area of the high-density View to the last row and the last column of the grid in the drawing area of the high-density View.

[0143] Exemplarily, taking the low-density View as an example, Figure 17 a schematic diagram of the LP and the AP in a grid interface is shown.

[0144] For ease of understanding, it is assumed that the maximum gear of the low-density View is 5 gears, and the width and the height of each ItemView are equal to the width of the screen divided by 3, that is, the minimum gear is 3 gears. As shown in (a) of FIG. 13, Figure 17 Before receiving the double-finger zoom-in operation of the user, the actual low-density View displayed in the screen is zoomed out to be equal to the width of the screen, and the actual layout position index and the actual adapter position index of each ItemView are equal. For example, the ItemView in the first row and the first column in the upper left corner of the screen corresponds to the actual layout position index LP=0 and the actual adapter position index AP=0, and the ItemView in the last row and the last column in the lower right corner of the screen corresponds to the actual layout position index LP=49 and the actual adapter position index AP=49. When the user wants to view the zoomed-in image of the grid (that is, the ItemView) surrounded by the dashed box, the user can place the double fingers in the area surrounded by the dashed box and gradually increase the distance between the double fingers. In response to the double-finger distance zoom-in operation, the phone zooms in on the entire low-density View with the ItemView surrounded by the dashed box as the center. The ItemView displayed in the screen is updated to 3 columns.

[0145] As shown in (b) of FIG. 13, Figure 17As shown in (b), the 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 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 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 display as shown. Figure 10 Image (a) shows the relationship between the actual layout position index and the actual adaptation position index of an ItemView. When scaling a low-density View with the ItemView at layout position index LP = 6 as the scaling center, the actual adaptation position index of the ItemView on the screen is changed, but the actual layout position index of each ItemView remains unchanged. This scaling scheme ensures that the content at the center of the two fingers remains unchanged and maintains the continuity of the displayed image. As an example, users can also swipe their fingers up and down on the screen to trigger the phone to update LP and AP, thereby displaying a scrolling grid interface; this will not be elaborated upon here. It should be noted that... Figure 17 This explanation uses the LP and AP encoding method of a low-density view as an example. The encoding method of LP and AP for high-density views is similar and will not be repeated here.

[0146] For example, Figure 18 A software architecture diagram of an electronic device is shown.

[0147] like Figure 18 As shown, electronic devices can adopt a layered architecture, dividing the software into several layers, each with a clear role and function. 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, etc.

[0148] The application layer can include a series of application packages, such as a camera application and a gallery application. The camera application can invoke the camera to take photos and videos, and store the taken photos and videos in the gallery application. The gallery application can not only manage the taken photos and videos, but also manage screenshots and shared images, etc.

[0149] The gallery application can include a ScaleGestureDetector, a ReceiveTouchView control, a home page control module, a drawing management module, a grid master control module, a custom layout manager, a grid form layout manager, a View control, a low-density data loader, a high-density data loader, and a high-density bitmap loader, etc.

[0150] The ReceiveTouchView control is used to receive touch operations of a user.

[0151] If a single-finger touch operation 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 sliding direction. When the RecyclerView is scrolled to the top or the bottom, the View control moves the entire RecyclerView in the opposite direction of the single-finger sliding direction, and re-populates the RecyclerView with content.

[0152] If a double-finger touch operation is received, the ReceiveTouchView control passes the double-finger touch data to the ScaleGestureDetector. The ScaleGestureDetector performs the cross-gear zooming method of the grid interface provided by the present application according to the double-finger touch data. For details, refer to the specific description of the embodiments below, which will not be repeated here. As an example, the ScaleGestureDetector can be an interface of a custom RecyclerView or View.

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

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

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

[0156] The system library can include a plurality of functional modules, such as a surface manager, media libraries, a two-dimensional (2D) graphics engine (for example, SGL), a three-dimensional (3D) graphics processing library (for example, OpenGLES), and the like. In the system library, an Android Runtime includes a core library and a virtual machine. The Android Runtime is responsible for the scheduling and management of the Android system. The core library contains two parts: one part is a function function that the java language needs to call, and the other part is the core library of Android. The application program layer and the application framework layer run in the virtual machine.

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

[0158] It should be noted that although the embodiments of the present application are described taking the Android system as an example, the basic principles are also applicable to electronic devices based on iOS or Windows operating systems.

[0159] Based on the above Figure 18 The specific interaction process between the various functional modules in the process of implementing the drawing scheme of the grid interface based on the spliced picture will be specifically described below. Figures 19-26

[0160] In some embodiments, when the electronic device receives a user operation on a certain album card, the electronic device first initializes the low-density View and the high-density View, and displays the daily view of 3 grades based on the low-density View by default. The user can trigger the electronic device to display the daily view of 5 grades based on the low-density View through a zooming operation. Then, if the user continues to reduce the double-finger interval, the electronic device displays the monthly view of 13 grades based on the low-density View. After that, if the user continues to reduce the double-finger interval, the electronic device displays the annual view of 31 grades based on the low-density View.​

[0161] For example, Figure 19 The flowchart illustrates the method for switching from a low-density view to a high-density view in a zoomed-out scene.

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

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

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

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

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

[0167] For example, when a user wants to view pictures or videos in a gallery app, the user can click on such... Figure 1 The gallery icon 01 is shown in (a) above. The touch driver receives the user's click on the gallery icon 01 and passes the click operation to the application processor. The application processor launches the gallery application corresponding to the gallery icon 01. After launching the gallery application, the gallery application displays as shown below. Figure 1 The card page shown in (b) is an example. The card page provides album cards for the camera, all photos, and videos; therefore, it is also called an album card page. Each album card serves as an entry point to an album.

[0168] It should be noted that the gallery application typically displays album cards by default. If the user clicks on... Figure 1 If the photos, memories, or creations in the bottom bar shown in (b) are used, the homepage control module will switch to other pages.

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

[0170] S4, the grid master module loads a low-density View and a high-density View. The low-density View and the high-density View are initialized. The low-density View initialization includes: initializing the column number of the two-grade daily view, and initializing the size of the low-density View. The high-density View initialization includes: initializing the column number of the monthly view and the annual view, and initializing the size of the high-density View.

[0171] The low-density View is inherited from a RecyclerView control, and the high-density View is inherited from an Android-based View control. The RecyclerView control and the Android-based View control are two types of View controls. The RecyclerView control is a special View control composed of multiple ItemViews in the form of a grid, each ItemView is used to display an image view, and each ItemView supports responding to user touch operations on a single ItemView, and is suitable for a daily view. The Android-based View control is a common View control, which can be regarded as a blank canvas and does not have the concept of ItemView. Each grid in the Android View control is not a container and does not support responding to user touch operations on a single ItemView, but has the advantages of saving performance and memory overhead, and is suitable for a monthly view and an annual view.

[0172] The sizes of the initialized low-density View and the high-density View can be equal or not equal. Both the low-density View and the high-density View support scaling in different gears. For example, Figure 12 and Figure 13 As shown in the above two figures, the size of the album window is 1300*2875 pixels in width, the size of the low-density View is 2170*5642 pixels in width, and the size of the high-density View is 3100*7000 pixels in width. The low-density View is composed of multiple ItemViews in the form of a grid, while the high-density View is a blank canvas and does not have the concept of ItemView.

[0173] It should be noted that the embodiments of the present application are described by taking the low-density View including a daily view of two gears and the high-density View including a monthly view of one gear and an annual view of one gear as an example. In actual implementation, the daily view can include one gear, three gears or more gears, and the monthly view and the annual view can include two gears or more gears. In addition, the column number of each gear in the low-density View and the high-density View can also be adjusted according to the display screen width, window width, etc.

[0174] S5, the grid master module notifies the low-density View to initialize the daily view of the first gear (3 gears).

[0175] S4 initializes the column number of the low-density View in the first gear (3rd gear), such as setting it to 3 columns. Different from S4, the specific position of the day view drawing area in the low-density View needs to be specified in S5, such as the day view drawing area is located in the grid of the low-density View in the mth row and the nth column.

[0176] S6, the low-density View triggers the low-density data loader to load data according to the default setting (AP range 1).

[0177] Correspondingly, the low-density data loader loads the original picture according to the AP range 1, and updates the query window range to range1.

[0178] As an example, the default setting of the electronic device is that the AP range 1 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. Wherein, x1 is a preset value, and x1 is greater than or equal to the total number of grids in the grid interface in the 3rd gear.

[0179] As another example, the default setting of the electronic device is that the AP range 1 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. Wherein, y1-x1 is a preset value, and y1-x1 is greater than or equal to the total number of grids in the grid interface in the 3rd gear.

[0180] S7, the low-density View obtains the picture in the first AP range from the query window range range1 according to the default setting.

[0181] Wherein, the first AP range belongs to the query window range range1. For example, range1 is [1, x1], the first AP range is [1, x2], and x2≤x1. Taking the day view in the first gear including p rows and q columns as an example, x2 = p*q, that is, x2 is equal to the total number of grids in the day view in the first gear.

[0182] S8, the low-density View draws the day view in the first gear (3rd gear) in the day view drawing area based on the picture in the first AP range.

[0183] Exemplarily, as Figure 1As shown in (b) of FIG. 1, the user can click the "Camera" card 02. In response to the click operation of the "Camera" card 02 by the user, the grid master module loads the low-density View and the high-density View, and initializes the day view drawing area of the low-density View in the first gear (3rd gear). Then, the low-density View can call the ondraw() interface to draw the picture of the first AP range in the initialized day view drawing area, to obtain the grid interface, so that the mobile phone can display the grid interface as shown in Figure 1 As shown in (c) of FIG. 1, the album page.

[0184] S9, in the case of displaying the day view in the first gear, the touch driver receives the double-finger pressing operation of the user, and notifies the low-density View.

[0185] S10, the low-density View triggers the original picture loading according to the AP range 2 of the picture currently on the screen.

[0186] Correspondingly, the low-density data loader determines the AP range 3 according to the AP range 2, loads the original picture of the AP range 3, and updates the query window range to range2.

[0187] When the electronic device displays the day view in the first gear (3rd gear), as long as the touch driver receives the double-finger pressing operation of the user, it means that there may be a demand to switch from 3rd gear to 5th gear. The low-density View can trigger the original picture loading of the second gear (5th gear) according to the AP range 2 of the picture currently displayed on the screen, so as to facilitate directly reading the original picture already loaded from the low-density View when the electronic device switches from 3rd gear to 5th gear.

[0188] In the embodiment of the present application, the low-density View can update the range of the query window according to the AP of the first grid (which can be represented as startAP1) and the AP of the last grid (which can be represented as endAP1) when displaying the day view in the first gear (3rd gear).

[0189] As an example, the AP of the first picture of the updated query window is equal to startAP1 minus a value, and the AP of the last picture of the updated query window is equal to endAP1 plus a value. The value can be the number of grids included in the drawing area when displaying the day view in the second gear (5th gear).

[0190] Taking a daily view of the second gear (5 gears) with startAP = 100, endAP = 123 as an example, the first picture in the query window range is AP = 100-65 = 35, and the last picture is AP = 123+65 = 188, i.e., range2 = [35, 188]. It should be noted that if the AP of the first picture in the query window range calculated according to the above algorithm is negative, it is corrected to 0 or 1, which represents the first picture in the gallery.

[0191] S11, after double-finger pressing, the touch driver receives the user's operation of reducing the double-finger interval and notifies the low-density view.

[0192] S12, the low-density view determines whether the condition for switching from the first gear (3 gears) to the second gear (5 gears) (referred to as a daily view switching condition) is met based on the double-finger interval.

[0193] In some embodiments, the first gear (3 gears) corresponds to a first zooming multiple, and the second gear (5 gears) corresponds to a second zooming multiple, and the first zooming multiple is greater than the second zooming multiple. An average value between the first zooming multiple and the second zooming multiple is taken as a switching gear critical point. The zooming multiple Si is calculated according to the user's operation of reducing the double-finger interval. The zooming multiple Si is compared with the switching gear critical point. If Si is less than or equal to the switching gear critical point, the condition for switching from the first gear (3 gears) to the second gear (5 gears) is met; if the zooming multiple Si is greater than the switching gear critical point, the condition for switching from the first gear (3 gears) to the second gear (5 gears) is not met.

[0194] Exemplarily, the touch driver can first receive the user's double-finger pressing operation, and then receive the user's operation of reducing the double-finger interval.

[0195] When the touch driver receives the user's double-finger pressing operation, the touch driver can pass the coordinates (x11, y11) and the coordinates (x12, y12) when the double fingers are pressed to the zoom gesture detector (not shown). Figure 19 The zoom gesture detector calculates the double-finger center coordinates (mBeginFocusx, mBeginFocusy) and the double-finger interval d1 according to the coordinates (x11, y11) and the coordinates (x12, y12).

[0196] The double-finger center coordinates (mBeginFocusx, mBeginFocusy) can be obtained by the following relationship (1):

[0197]

[0198] The double-finger interval d1 can be obtained by the following relationship (2):

[0199]

[0200] For example, the coordinates (x11, y11) = (200, 200) and the coordinates (x12, y12) = (800, 1000) when the two fingers are pressed. After the zoom gesture detector calculates the distance d1 = 1000 pixels between the two fingers, it can be determined that the distance d1 = 1000 is greater than the threshold D = 540 pixels, and the current operation is determined to be valid, and the center coordinates (500, 600) of the two fingers and the distance d1 = 1000 pixels between the two fingers are recorded.

[0201] Then, the touch control driver receives the user's operation of reducing the distance between the two fingers, and transmits the coordinates (xi1, yi1) and the coordinates (xi2, yi2) after the two fingers are moved to the zoom gesture detector. i is an integer greater than or equal to 2. i represents the i-th time the two-finger operation is collected. The zoom gesture detector calculates the distance di between the two fingers according to the coordinates (xi1, yi1) and the coordinates (xi2, yi2).

[0202] The distance di between the two fingers can be obtained by the following relationship (3):

[0203]

[0204] For example, the coordinates (xi1, yi1) = (100, 100) and the coordinates (xi2, yi2) = (460, 580) after the two fingers are moved. After the zoom gesture detector calculates the distance d1 = 600 pixels between the two fingers, it can be determined that the distance di = 600 is greater than the threshold D = 540 pixels, and the current operation is determined to be valid, and the zoom factor Si is calculated according to the distance di between the two fingers and the distance d1 between the two fingers.

[0205] The zoom factor Si can be obtained by the following relationship (4):

[0206]

[0207] scale1 is the zoom factor when the two fingers are pressed. di is the distance between the two fingers corresponding to the i-th zoom operation, and d1 is the distance between the two fingers corresponding to the two-finger pressing 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 does not move the two fingers, then the zoom factor is equal to 1, and it is determined to be invalid, and it is not necessary 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 switching is.

[0208] As an example, a plurality of gears can be preset in the mobile phone, and a switching gear critical point is set between any two adjacent gears. Two adjacent gears refer to gears between which no other gears are set. If the scaling multiple of the small gear is denoted by a1, the scaling multiple of the large gear is denoted by a2, and the switching gear critical point is denoted by a3, the switching gear critical point a3 can be calculated by the following relationship (5):

[0209]

[0210] Taking the scaling multiple of the low-density View at gear 3 as 1.0 and the scaling multiple at gear 5 as 0.6 as an example, as shown in Table 1, the switching gear critical point between gear 3 and gear 5 can be calculated according to the above relationship (5) as 0.8.

[0211] Table 1

[0212] - Zoom factor 3rd gear 1.0 Switching gear critical point 0.8 5th gear 0.6

[0213] After the electronic device obtains the scaling multiple Si based on the relationship (4), the scaling multiple Si and the switching gear critical point 0.8 can be compared. If Si≤0.8, it can be determined that the day view switching condition is met, and the following S13 is executed. If Si>0.8, it can be determined that the day view switching condition is not met, and there is no need to switch the day view from the first gear (gear 3) to the second gear (gear 5).

[0214] S13, the low-density View determines the AP range 4 based on the scaling center.

[0215] For specific implementation of determining the AP range based on the scaling center, refer to the description of the following embodiment. Figure 20

[0216] S14, the low-density View obtains the picture of the AP range 4 from the query window range range2.

[0217] S15, the low-density View draws the day view of the second gear (gear 5) in the day view drawing area based on the picture of the AP range 4. Then, the low-density View displays the day view of the second gear (gear 5), so that the user can see the day view of the second gear (gear 5) as shown in (e) of FIG. 6. Figure 1

[0218] After the electronic device displays the day view of the second gear (gear 5), the user can continue to reduce the distance between the two fingers. Alternatively, the user can move the two fingers away from the screen and then press the two fingers again.

[0219] ​​S16, after displaying the day view of the second gear (which can be referred to as the first grid interface), the touch driver receives a user operation of continuously reducing the distance between the two fingers or a double-finger pressing operation (which can be referred to as a first operation), and notifies the low-density View.

[0220] S17, the low-density View triggers data loading according to the AP range 4 of the picture currently displayed on the screen.

[0221] Correspondingly, the high-density data loader determines the AP range 5 according to the AP range 4, loads the original pictures in the AP range 5, and updates the query window range to range 3.

[0222] The "AP range 4" above refers to the AP of the first grid to the AP of the last grid in the day view of the second gear (5th gear) displayed on the screen. The "query window range" refers to the AP of the first picture to be spliced to the AP of the last picture to be spliced in the high-density data loader.

[0223] When the electronic device displays the day view of the second gear (5th gear), as long as the touch driver receives a user operation of continuously reducing the distance between the two fingers or a double-finger pressing operation, it means that the electronic device may have a demand to switch from the day view to the month view. Since the number of pictures in the year view is greater than that in the day view and the month view, in order to facilitate subsequent picture splicing, the electronic device can trigger loading of the AP of the picture to be displayed corresponding to the year view in advance according to the AP range of the day view of the second gear (5th gear).

[0224] In an embodiment of the present application, the low-density View updates the range of the query window according to the AP of the first grid (which can be represented as startAP2) and the AP of the last grid (which can be represented as endAP2) in the day view of the second gear (5th gear, i.e., the first number of columns) currently displayed on the screen.

[0225] As an example, the AP of the first picture of the updated query window is equal to startAP2 minus a value, and the AP of the last picture of the updated query window is equal to endAP2 plus a value. The value is the number of grids included in the drawing area of the year view when the year view is displayed on the display screen.

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

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

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

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

[0230] 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:

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

[0232] endindex = (endAP2 + M * DrawInfo.mDrawColNuml) / perRowCount.

[0233] wherein M is a preset positive integer, startindex represents the index of the first tile picture in the bitmap window range after the update, endindex represents the index of the last tile picture in the bitmap window range after the update, startAP2 represents the AP of the first grid in the day view of the second gear (5th gear) currently displayed, endAP2 represents the AP of the last grid in the day view of the second gear (5th gear) currently displayed, perRowCount represents the number of small pictures tiled by each tile picture, and DrawInfo.mDrawColNuml represents the total number of columns of the month view.

[0234] For ease of understanding, take Figure 13 and Figure 14 for example. Assuming that startAP2 = 400, endAP2 = 464, DrawInfo.mDrawColNuml = 13, M = 30, and perRowCount = 10 at the 5th gear, then startindex = (400 - 30 * 13) / 10 = 100, endindex = (464 + 30 * 13) / 10 = 8540, i.e., range4 = [100, 8540].

[0235] S19, the low-density view determines whether the condition (referred to as a month view switching condition) for switching from the second gear (5th gear) to the third gear (13th gear) is met.

[0236] The above S16-S18 describes that after the day view of the second gear (5th gear) is displayed, 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 are away from the screen.

[0237] In one case, if the electronic device receives the operation of the user reducing the distance between the two fingers, the query window range rang3 and the bitmap window range range4 can be updated immediately, and then it is determined whether the operation meets the condition for switching from the second gear (5th gear) to the third gear (13th gear).

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

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

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

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

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

[0243] For a specific implementation method of determining the AP range based on the zoom center, please refer to the following embodiment. Figure 20 The description.

[0244] S21, the high-density View obtains the spliced picture corresponding to the AP range 7 from the bitmap window range range4.

[0245] Taking the index value of the spliced picture in the bitmap window range range4 as from "Index1" to "Index100", the AP value of the first grid as 105, and the AP value of the last grid as 500 as an example, the spliced picture corresponding to the AP range 7 is from "Index10" to "Index50". Wherein, "Index10" is calculated according to the AP value (startAP) of the first grid according to the formula index = startAP / perRowCount = 105 / 10 = 10, and "Index50" is calculated according to the AP value (endAP) of the last grid according to the formula index = endAP / perRowCount = 500 / 10 = 50.

[0246] S22, the high-density View draws the month view (which can be called the second grid interface) of the third gear (13 gears, i.e. the second column number) in the day view drawing area based on the spliced picture of the AP range 7. Then, the high-density View displays the month view, so that the user can see the month view as shown in (f) of FIG. 6. Figure 1

[0247] The specific implementation manner of the high-density View triggering the drawing of the month view can refer to the description of the following embodiment on Figures 23-26 , which will not be described here.

[0248] After displaying the month view, the user can continue to reduce the distance between the two fingers as described in the following S18 to S21; or the user can move the two fingers away from the screen, and then press the two fingers again.

[0249] S23, after displaying the month view of the third gear, the touch driving receives the operation of the user continuing to reduce the distance between the two fingers or the operation of pressing the two fingers, and notifies the high-density View.

[0250] S24, the high-density View triggers data loading according to the AP range 7 of the picture on the current screen.

[0251] Correspondingly, the high-density data loader determines the AP range 8 according to the AP range 7, loads the original picture of the AP range 8, and updates the query window range as range5.

[0252] The above-mentioned "AP range 7" is the AP of the first grid to the AP of the last grid in the month view of the third gear (13 gears) displayed in the screen. The above-mentioned "query window range" refers to the AP of the first to-be-spliced picture to the AP of the last to-be-spliced picture in the high-density data loader.​

[0253] In the embodiment of the present application, the high-density View updates the range of the query window according to the AP of the first grid and the AP of the last grid in the day view of the third gear (13th gear) currently displayed on the screen.

[0254] As an example, the AP of the first picture of the updated query window is equal to the AP of the first grid in the day view minus a value, and the AP of the last picture of the updated query window is equal to the AP of the last grid in the day view plus a value. The value is the number of grids included in the drawing area of the year view when the year view is displayed on the display screen.

[0255] S25, the high-density View triggers bitmap loading according to the AP range 7 of the picture currently on the screen.

[0256] Correspondingly, the high-density bitmap loader determines the AP range 8 according to the AP range 7, splices the original pictures in the range 5 corresponding to the AP range 7 to obtain spliced pictures, and updates the bitmap window range to the range 6.

[0257] When the month view is displayed, as long as the touch driver receives the operation of the user continuing to reduce the distance between the two fingers or the operation of the two fingers being pressed, it means that the electronic device may have the demand to switch from the month view to the year view. Referring to the description of S18 above, since the real intention of the user cannot be accurately predicted, in order to avoid the burden on the CPU caused by blindly loading a large number of spliced pictures, the high-density View can trigger the accurate loading of the bitmap window range according to the AP range of the month view in the following manner:

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

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

[0260] Wherein, startindex represents the index of the first spliced picture of the bitmap window range after updating, endindex represents the index of the last spliced picture of the bitmap window range after updating, startAP represents the AP of the first grid in the month view currently displayed, endAP represents the AP of the last grid in the month view currently displayed, perRowCount represents the number of small pictures spliced in each spliced picture, and DrawInfo.mDrawColNum2 represents the total number of columns of the year view.

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

[0262] The implementation of the year view switching condition is similar to that of the day view switching condition and the month view switching condition, and reference can be made to the specific description of the above embodiments.

[0263] If the year view switching condition is met, the following S27 can be performed. If the year view switching condition is not met, the user operation can be continuously detected, and it is determined whether the newly detected operation meets the year view switching condition.

[0264] S27, the high-density View determines the AP range 10 based on the zoom center.

[0265] For the specific implementation of determining the AP range based on the zoom center, reference can be made to the description of the following embodiment. Figure 20 .

[0266] S28, the high-density View acquires the stitched picture of the AP range 10 from the query window range range6.

[0267] S29, the high-density View draws the year view of the fourth gear (31st gear) in the day view drawing area based on the stitched picture of the AP range 10. Then, the high-density View displays the year view, so that the user can see the year view as shown in (a) of FIG. 13. Figure 2

[0268] For the specific implementation of the high-density View triggering the drawing of the year view, reference can be made to the description of the following embodiment. Figures 23-26 , and details are not repeated here.

[0269] In the above scheme, when the photo album is opened, the electronic device first displays the day view in the grid column with fewer columns, and then displays the month view and the year view in the grid column with more columns, which is more in line with the user's usage habits. When displaying the day view, the number of pictures to be displayed is small, and the number of pictures to be drawn by the GPU is small. If the picture stitching scheme is used, the effect of shortening the overall time consumption will not be obvious, or even the time consumption will not be shortened. Therefore, the grid interface drawing scheme based on the low-density View and the non-stitched picture is adopted. When displaying the month view and the year view, the number of pictures to be drawn by the GPU is large, and the grid interface drawing scheme based on the high-density stitched picture is adopted. By stitching multiple pictures, the number of picture data to be drawn by the GPU and the number of times of drawing pictures can be reduced by orders of magnitude, the processing speed of the GPU is improved, and the display of the photo album interface is more smooth.

[0270] ​It should be noted that when the day view is displayed, the user has a grid touch demand, the ItemView of the custom RecyclerView control supports responding to the touch operation of the user on the single ItemView, and therefore the custom RecyclerView is adopted as the low-density View. When the month view or the year view is displayed, the user does not have a grid touch demand, and the Android-based View control has the advantages of saving performance and memory overhead, and therefore the Android-based View control is adopted as the high-density View.

[0271] The specific scheme for determining the AP range of the high-density View based on the zoom center will be described below. Figure 20 The specific scheme for determining the AP range of the high-density View based on the zoom center will be described below.

[0272] As shown in the scheme, the scheme can include the following (1) to (8) Figure 20

[0273] (1) determining the zoom center (pointx, mBeginFocusy), the column number Index1 of the first column of the display area of the next gear in the high-density View, and the column number Index2 of the last column of the display area of the next gear in the high-density View.

[0274] Optionally, the high-density View can also determine the row number Line1 of the first row of the display area of the next gear in the high-density View and the row number Line2 of the last row of the display area of the next gear in the high-density View. Based on Index1, Index2, Line1, and Line2, the AP of the first grid and the AP of the last grid in the display area of the next gear can be determined.

[0275] ​The scaling center (pointx, mBeginFocusy) can be determined by determining a first distance screenRectF.left, a second distance X1, a third distance X2, and a first width screenRectF.width. The first distance screenRectF.left is a distance from a left edge of the display area of the first grid interface in the high-density view to a left edge of the high-density view. The second distance X1 is a distance from a 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 a distance from a right edge of the position 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 first width screenRectF.width is a width of the display area of the first grid interface in the high-density view. According to the first distance screenRectF.left, the second distance X1, the third distance X2, and the first width screenRectF.width, a first coordinate value centerX is determined, which represents a distance from the scaling center to the left edge of the high-density view. The first coordinate value is mapped to the screen to obtain a second coordinate value pointx, which represents a distance from the scaling center to a left edge of the screen. A position corresponding to the second coordinate value pointx and a third coordinate value mBeginFocusy is determined as a first position, and the third coordinate value mBeginFocusy represents a distance from the center of the double fingers to an upper edge of the screen.

[0276] (2) Determine the LP value (also referred to as selectLP) of the grid selected by the scaling center, and the AP value (also referred to as selectAP) of the grid selected by the scaling center.

[0277] The grid selected by the scaling center refers to the grid in which the coordinate of the scaling center is located.

[0278] The following steps can be performed for each grid in the high-density view:

[0279] (3) Determine the column number LineNum and the LP value of a grid in the high-density view.

[0280] The column number lineNum of the grid to be adjusted can be determined according to the following relationship:

[0281] LineNum=LP%maxShowSpan+1.

[0282] maxShowSpan represents the maximum gear (for example, 31 gears).

[0283] (4) determining whether Index1≤LineNum≤Index2 is satisfied.

[0284] If Index1≤LineNum≤Index2 is satisfied, (5) is performed.

[0285] If Index1≤LineNum≤Index2 is not satisfied, (8) is performed.

[0286] (5) determining whether LP≤selectLP is satisfied.

[0287] If LP≤selectLP is satisfied, (6) is performed.

[0288] If LP≤selectLP is not satisfied, (7) is performed.

[0289] (6) determining the AP value of the grid according to a first formula.

[0290] The first formula can be:

[0291]

[0292] In the formula, nextShowSpan represents the display column number of the next gear, maxShowSpan represents the maximum gear (for example, 31 gears), selectLP represents the LP value of the selected grid with the zoom center, and selectLineNum represents the selected line number.

[0293] (7) determining the AP value of the grid according to a second formula.

[0294] The second formula can be:

[0295]

[0296] (8) setting the AP value to -1.

[0297] In the formula, AP=-1 represents that the actual adaptation position value is invalid, and the grid can display a blank image at this moment.

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

[0299] The above embodiments introduce that when switching from a day view to a month view or a year view, the zoom operation can trigger the drawing of a high-density View. After switching to the month view or the year view, the user can also slide the finger up or down on the display screen, in which case the sliding operation will also trigger the drawing of the high-density View.

[0300] Exemplarily, Figure 21 A method flow chart for triggering high-density View drawing in a scrolling scenario is shown.

[0301] As Figure 21 shown, the method can include the following S30 to S35.

[0302] S30, in the case of displaying a month view or a year view (which can be referred to as a second grid interface) based on a high-density View, a touch driver receives a user's up or down sliding operation on the display screen and notifies the high-density View. The high-density View triggers drawing.

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

[0304] When the user slides the finger up or down on the screen, from the user's perspective, the pictures in the grid interface should slide up or down accordingly, thereby triggering AP refresh.

[0305] When the high-density View supports up and down scrolling, if when the user slides the finger up or down on the screen, the high-density View moves up and down relative to the display area of the display screen, the positions of each grid in the high-density View will move up and down relative to the display area of the display screen, in this case, the high-density View can calculate the AP of each grid in the next frame of grid interface. The AP range from the first grid to the last grid is represented as AP range x.

[0306] As an example, the high-density View can update the AP value of each grid according to the relationship: AP + s*g. Wherein, s represents the number of rows that the final high-density View moves, and g represents the gear of the current high-density View (i.e. the number of grid columns of the drawing area).

[0307] In order to facilitate understanding of the method for triggering high-density View drawing in a scrolling scenario, Figure 22 A scene diagram is shown in which the user slides a single finger up relative to the screen (also referred to as the first direction), the bottom of the View control slides up 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 the size limitation of the drawing, Figure 22 is explained by taking 3 gears as an example, in practice, the number of columns of the high-density View is 13 or 31.

[0308] As Figure 22As shown in (a), the phone displays a first grid interface based on a View control. The AP of the first image in the display area is 160, and the AP of the last image in the display area is 180. The user presses and holds the area corresponding to the actual adaptation position index 170 with a single finger, and continues to slide upwards for a distance of 300 pixels (also known as the second distance). At this moment, the distance from the bottom edge of the display to the bottom edge of the recycle bin view is the first distance. In the N+1th reporting cycle, the phone detects an upward slide distance of 300 pixels, i.e., dy = -300 pixels. In response to the user's single-finger upward slide operation (also known as the first operation), as follows... Figure 22 As shown in (b), the phone moves the View control upwards 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.

[0309] Then, the phone performs the following three judgment steps in sequence.

[0310] First judgment step:

[0311] The mobile phone retrieves the actual layout position index of the ItemView within the View control. For example... Figure 22 As shown in (b), the index of the first actual layout position in the first row and first column of the View control is LP1 = 246, and the index of the last actual layout position in the last row and last column of the View control is LP2 = 300. LP1 and LP2 can be calculated based on the actual AP value of the View control. Then, since the current scenario is a one-finger upward swipe, the View control swipes upward with the finger, so the phone only needs to determine the values ​​of LP2 = 300 and LPmax = 835. Since the actual LP2 < the actual LPmax, the phone can determine that the last row of the View control is not the last row of the album, and the View control has not yet displayed the last image of the album. If the user continues to swipe upward, the View control can still update the images corresponding to each ItemView, allowing the user to see other images with larger actual LP values ​​that have not yet been displayed in the album. Therefore, the phone does not need to perform the first position correction on the View control, and D1 = 0.

[0312] The second judgment step:

[0313] The mobile phone compares the size of 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 scrolled into the screen. 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 known as the second direction).

[0314] For example, the mobile phone can calculate the number of rows to move downward according to the relationship:

[0315]

[0316] Correspondingly, the downward movement distance of the View control (also known as the third distance) is: 400 pixels * 1 row = 400 pixels, that is, D2 = 400.

[0317] As Figure 22 shown in (c), after the View control moves downward by 400 pixels, the Y-axis coordinate at the bottom of the View control is updated to y2 = 2200 + 400 = 2600 pixels. In addition, the mobile phone updates the actual adaptation position index value of each ItemView according to the relationship actual AP + 1 row * 3 columns, that is, adds a value to the AP value corresponding to each table item view. For example, the actual AP values of the first row of the View control are updated from 148, 149, and 150 shown in (b) of Figure 22 to 151, 152, and 153 shown in (c) of Figure 22 ; the actual AP values of the second row of the View control are updated from 151, 152, and 153 shown in (b) of Figure 22 to 154, 154, and 156 shown in (c) of Figure 22 ;...; the actual AP values of the last row of the View control are updated from 178, 179, and 180 shown in (b) of Figure 22 to 181, 182, and 183 shown in (c) of Figure 22 .

[0318] It can be understood that in the second judgment step, the mobile phone first moves the View control downward by 1 row, and then adds 3 to the AP values corresponding to the ItemViews in the 2nd to 5th columns of the View control respectively, which is equivalent to not moving the ItemViews, so that the positions of the respective images seen by the user remain unchanged on the screen.

[0319] The third judgment step:

[0320] 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 increase 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, that is, D3 = 0.

[0321] After obtaining dy = -300, D1 = 0, and D3 = 0 through the above steps, the mobile phone can obtain the final moving 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.

[0322] 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 of the high-density View, reference can be made to the description of the following embodiments for Figure 33 .

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

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

[0325] 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 the following embodiments for Figures 23-26 , which will not be elaborated here.

[0326] After drawing the month view or the year view, the high-density view can also trigger an update to the high-density data loader and the high-density bitmap recorder, so that the spliced picture can be directly obtained from the high-density bitmap recorder next time the sliding operation is performed.

[0327] In S34, the high-density view triggers the high-density data loader to load the original pictures according to the AP of the first picture and the AP of the last picture on the current screen. Accordingly, the high-density data determines the AP range range-b according to the AP of the first picture and the AP of the last picture on the current screen, loads the original pictures corresponding to the AP range range-b, and updates the query window range to range7.

[0328] In S35, the high-density view triggers the high-density bitmap loader to load the bitmap according to the AP of the first picture and the AP of the last picture on the current screen. Accordingly, the high-density bitmap loader splices the original pictures in the range range7 to obtain a spliced picture, and updates the bitmap window range to range8.

[0329] The first picture refers to the picture of the first grid in the month view or the year view, and the last picture refers to the picture of the last grid in the month view or the year view. Since the APs of the grids are numbered in ascending order, and the number of grids included in the month view and the year view is known, if the AP of the first picture and the AP of the last picture on the current screen are obtained, the high-density data loader can be triggered to load data according to S17-S18 and S24-S25 in the above embodiment.

[0330] In the above scheme, when the electronic device displays the month view or the year view, the user can slide the finger up or down on the display screen, and the sliding operation can also trigger the grid interface drawing process based on the spliced picture. Since one spliced picture occupies multiple grids, the number of picture data drawn by the GPU and the number of times of drawing pictures can be reduced by orders of magnitude, the processing speed of the GPU is improved, and the display of the album interface is more smooth.

[0331] The specific implementation of triggering the drawing of the month view or the year view will be described below. Figures 23-26 The specific implementation of triggering the drawing of the month view or the year view will be described below.

[0332] Exemplarily, Figure 23 A schematic diagram of a grid management class is shown.

[0333] As Figure 23As shown, the grid management class can include: a multi-texture grid view (MultiTextureGridView), a multi-texture grid presentation management class (MultiTextureGridPresentation), a splicing drawable (SplicingDrawable), an image bar cache adapter bitmap cache proxy (ImageBarCacheAdapter bitmapCache), and the like.

[0334] The multi-texture grid view (MultiTextureGridView) is responsible for creating a view that carries an image, such as a month view or a year view. The multi-texture grid presentation management class (MultiTextureGridPresentation) is responsible for regulating the month view and the year view, such as drawing the month view at a time node and drawing the year view at a time node. The splicing drawable (SplicingDrawable) is responsible for splicing a picture to be displayed in the month view or the year view. The image bar cache adapter bitmap cache proxy (ImageBarCacheAdapter bitmapCache) includes two proxies: one is a data loader (HighDensityLoader item), and the other is a splicing cache (ImageBarbitmap). The data loader (HighDensityLoader item) is the high-density data loader in the above embodiment, and is used to query a window range according to an AP of a picture to be displayed. The splicing cache (ImageBarbitmap) is the high-density bitmap loader in the above embodiment, and is used to splice a picture according to the AP of the picture to be displayed. In the embodiment of the present application, the high-density view can call these function modules to draw the month view or the year view, and specific reference can be made to the related description of the following embodiments.

[0335] Exemplarily, Figure 24 A schematic diagram of some parameters involved in the process of drawing the month view is shown.

[0336] Taking a display screen size of 1300*2875 pixels in width and height as an example. The month view is composed of 13 columns*30 rows of grids, and the size of each grid is 100*100 pixels in width and height. When the month view is displayed on a mobile phone, if a user slides a single finger in the display screen by a distance of one grid, then the high-density view slides up by a distance of one grid, and triggers an update of the drawing area of the month view.

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

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

[0339] 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;

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

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

[0342] Current drawing information type: Moon view;

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

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

[0345] Canvas scaling factor: 1;

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

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

[0348] 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;

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

[0350] It should be noted that, Figure 24The month view is taken as an example for illustration. It is understood that the parameters involved in the year view are similar to those involved in the month view. The difference between the two lies in that the drawing information type of the month view and the bitmap cache type used by the month view are marked as month view, and the drawing information type of the year view and the bitmap cache type used by the month view are marked as year view. In addition, the number of columns of the drawing area of the year view is greater than that of the month view, and the number of rows of the drawing area of the year view is greater than that of the month view.

[0351] Exemplarily, Figure 25 The specific flowchart of the high-density View triggering the grid management class to draw the month view or the year view is shown.

[0352] In the zooming scene or the scrolling scene, the high-density View can call the invalidate() function to trigger the grid management class to draw the month view or the year view. Specifically, as shown in Figure 25 The specific flow of the grid management class drawing the month view or the year view can include the following S36 to S38.

[0353] S36, the high-density View calls the onDraw(canvas) function to trigger the MultiTextureGridView to draw the canvas.

[0354] Correspondingly, the MultiTextureGridView calls the draw(canvas) function to trigger the MultiTextureGridPresentation to draw the canvas.

[0355] It should be noted that the picture splicing is not supported in the onDraw() native process. The MultiTextureGridView is a self-defined interface based on onDraw() and is used to realize picture splicing.

[0356] If the current view is the month view and a single-finger sliding operation of the user is received, or if the current view is the year view and an operation of the user to increase the distance between double fingers is received, or if the current view is the day view and an operation of the user to decrease the distance between double fingers is received, the following S37 can be performed to draw the month view.

[0357] If the current view is the year view and a single-finger sliding operation of the user is received, or if the current view is the month view and an operation of the user to decrease the distance between double fingers is received, the following S38 can be performed to draw the year view.

[0358] S37, the MultiTextureGridView moves the origin of the canvas coordinate system to the top-left corner of the month view. The MultiTextureGridView calls the MonthDrawable.draw(canvas) function, which triggers the SplicingDrawable to draw the month view.

[0359] 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, which triggers the SplicingDrawable to draw the year view.

[0360] In the Android system, each activity has an independent canvas (referred to as a layer on the SurfaceFlinger side). No matter how complex the view structure arranged by an activity is, it is ultimately rendered on the canvas of the activity. After the high-density bitmap loader updates the bitmap window range, the spliced pictures are stored in the high-density bitmap loader. Then, the high-density view can trigger the MultiTextureGridPresentation to draw the canvas through the MultiTextureGridView. At the beginning of the drawing, the MultiTextureGridPresentation first moves the origin of the canvas coordinate system to the starting point of the left top corner of the month view / year view, so as to facilitate drawing the spliced pictures from the left top corner of the starting point row by row and column by column. The left top corner of the first region is taken as the starting point, and the spliced pictures are drawn in the first region row by row and every N grid. In the case of one spliced picture in a row, the index value of the last spliced picture in the jth row and the first spliced picture in the j+1th row differ by 1. In the case of multiple spliced pictures in a row, the index values of two adjacent spliced pictures in each row differ by 1, and the index value of the last spliced picture in the jth row and the first spliced picture in the j+1th row are the same or differ by 1. Specifically, the SplicingDrawable can call the image programming interface to command the GPU to draw the first spliced picture 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 command the GPU to draw the second spliced picture read from the high-density bitmap loader at the moved origin of the canvas. The same is true for the subsequent spliced pictures, until all the grids of the month view / year view are drawn. In this way, after all the spliced pictures in the first region are drawn, from the perspective of the grid interface effect, each grid corresponds to a to-be-spliced picture, and the AP values of the to-be-spliced pictures corresponding to the grids increase in turn from left to right and from top to bottom.

[0361] Exemplarily, Figure 26 A specific method flowchart for drawing a month view based on spliced pictures is shown.

[0362] Correspondingly, Figures 27A-27I A schematic diagram of a month view drawn based on spliced pictures is shown.

[0363] It should be noted that, in Figures 27A-27IThe grid content within the drawing area of ​​the moon view is the grid content that will be displayed on the screen. It can be understood that when displaying the moon 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. Additionally, Figure 26 , Figures 27A-27I The explanation uses a monthly view as an example. It can be understood that the specific scheme for drawing a yearly view based on a stitched image is similar to that for drawing a monthly view based on a stitched image. The specific scheme for drawing a yearly view based on a stitched image will not be described in detail here.

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

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

[0366] The state A of the canvas coordinate system described above represents the position of the canvas coordinate system within the moon view before the first stitched image is drawn, i.e., the relative position of the canvas and the moon view. For example... Figure 27A As shown, 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 X-axis are horizontally to the right relative to the display screen, while the positive y-axis and positive Y-axis are vertically downward relative to the display screen.

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

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

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

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

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

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

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

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

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

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

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

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

[0379] 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. For example... Figures 27A-27I As shown, perRowCount = 10.

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

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

[0382] For example, such as Figure 27A As shown, 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.

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

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

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

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

[0387] like Figures 27A-27IAs shown, the total number of drawing rows is 30. If the current number of drawing rows is less than or equal to the total number of drawing rows, it means that the drawing of the month view has not been completed, and the following S41 can be continued. If the current number of drawing rows is greater than the total number of drawing rows, it means that the drawing of the month view has been completed, and the following S47 can be executed.

[0388] S41, SplicingDrawable, can sequentially perform the following operations:

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

[0390] The "state B of the current canvas coordinate system" refers to the position of the canvas coordinate system XoY relative to the month view coordinate system xoy at the beginning of the current drawing. For example, as shown in Figure 27F , the origin of the canvas coordinate system XoY is moved downward by a distance of 1 bitmap height relative to the origin of the month view coordinate system xoy.

[0391] Before drawing the first spliced picture, the state B of the current canvas coordinate system is the state A in S30, that is, the origins of the month view coordinate system xoy and the canvas coordinate system XoY coincide. When drawing spliced pictures other than the first spliced picture, the state B of the current canvas coordinate system is different from the state A.

[0392] ② Horizontally offset the canvas coordinate system by a distance of offset (referred to as the first value) bitmaps.

[0393] Here, "horizontally offset the canvas coordinate system by a distance of offset bitmaps" means horizontally offsetting the canvas coordinate system by a distance of offset widths of unspliced pictures.

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

[0395] As shown in Figure 27G , if offset < 0, the canvas coordinate system is horizontally offset to the left by a distance of |offset| = 3 bitmap widths. By horizontally offsetting the canvas coordinate system to the left by a distance of |offset| bitmap widths, the |offset| + 1 picture from the left side in the spliced picture can be displayed in the first column of the month view.

[0396] It can be understood that, in Figures 27A-27IIn the embodiment, if the upper left corner of the month view is taken as the origin, the positive direction of the x-axis and the positive direction of the X-axis are the horizontal right direction relative to the display screen, and the positive direction of the y-axis and the positive direction of the Y-axis are the vertical downward direction relative to the display screen, the canvas coordinate system XoY and the month view coordinate system xoy are established. In order to make the spliced pictures fill the entire month view, offset≤0. If the lower right corner of the month view is taken as the origin, the positive direction of the x-axis and the positive direction of the X-axis are the horizontal left direction relative to the display screen, and the positive direction of the y-axis and the positive direction of the Y-axis are the vertical upward direction relative to the display screen, the canvas coordinate system XoY and the month view coordinate system xoy are established. In order to make the spliced pictures fill the entire month view, offset≥0.

[0397] ③Determine the current drawing column number drawColNum = offset.

[0398] The "current drawing column number" refers to the number of columns in which the pictures have been drawn in the month view.

[0399] Referring to the description of the above embodiment, in Figures 27A-27I , offset≤0, which makes the first spliced picture of each row occupy no more than perRowCount = 10 columns in the month view. In order to meet this requirement, the initial value of the drawing column number needs to be set as offset. As Figure 27G indicated, before drawing the first spliced picture of the second row, drawColNum = offset = -3, indicating that no picture has been drawn in the month view.

[0400] S42, SplicingDrawable, can sequentially perform the following operations:

[0401] ①Obtain the spliced picture of the index row from the high-density bitmap loader.

[0402] ②Draw the spliced picture on the canvas.

[0403] Specifically, the upper left corner of the spliced picture of the index row is coincided with the origin of the canvas coordinate system XoY, so that the left edge of the spliced picture is located on the Y-axis, and the upper edge of the spliced picture is located on the X-axis.

[0404] ③Determine the current drawing column number drawColNum = drawColNum + perRowCount.

[0405] That is, after the spliced picture of the index row is drawn on the canvas by ②, the number of columns in which the pictures have been drawn in the month view.

[0406] As Figure 27BAs shown, 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.

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

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

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

[0410] 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:

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

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

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

[0414] like Figure 27G As shown, 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.

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

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

[0417] ③Calculate whether to add 1 to the index of the spliced picture: index = index + (offset == 0? 1 : 0).

[0418] Wherein, index represents the index of the spliced picture drawn in the month view. offset == 0? 1 : 0 is used to indicate that whether the offset is equal to 0, if offset = 0, index + 1, if offset ≠ 0, index + 0.

[0419] It can be understood that when offset = 0, it means that the last small picture of the spliced picture is located in the last column of the i-th row during the drawing process of the i-th row, so during the drawing process of the i+1-th row, the next spliced picture can be directly drawn, and the index + 1.

[0420] When offset ≠ 0, it means that the last small picture of the spliced picture is located outside the month view during the drawing process of the i-th row, so during the drawing process of the i+1-th row, in order to ensure the continuity of the pictures in the month view, the drawing of the spliced picture needs to be continued. As shown in the following table, the last column of the first row is picture 13, and the first column of the second row is picture 14, and the two pictures use the same spliced picture. Figure 27G

[0421] S45, the splicing drawing (SplicingDrawable) restores the state of the canvas coordinate system to state B, and then moves the canvas coordinate system vertically downward by a distance of the height of a bitmap.

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

[0423] "Move the canvas coordinate system vertically downward by a distance of the height of a bitmap" means that the Y axis of the canvas coordinate system XoY is moved in the horizontal downward direction by a distance of the height of a bitmap.

[0424] S46, in the case where the current drawing column number is less than the total drawing column number, the splicing drawing (SplicingDrawable) shifts the canvas coordinate system horizontally by a distance of perRowCount bitmap width, and obtains the index of the next row data index = index + 1.

[0425] ​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.

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

[0427] The above steps S39-S47 complete the rendering of a single frame of the lunar view. The GPU can then send this frame of the lunar view to the display screen, allowing the user to see the updated image, such as from... Figure 1 The day view shown in (e) is updated as follows Figure 1 The lunar view shown in (f) in the figure, or from such Figure 2 The year view shown in (c) is updated as follows Figure 2 The lunar view shown in (d) in the image, or from such... Figure 3 The moon view shown in (a) is updated as follows: Figure 3 The lunar view shown in (b) is shown in the image.

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

[0429] The following is combined with Figures 27A-27I The process of creating a lunar view based on stitched images is explained.

[0430] like Figure 27AAs shown, 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 of the lunar view, starting at point o. 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, 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.

[0431] like Figure 27B As shown, first save the current canvas coordinate system XoY state B1. 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 drawing column number drawColNum = offset = 0, and draw the first stitched image (index = 0) in the first row of the moon view from column 1 to column 10.

[0432] like Figure 27C As shown, after drawing 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 all the grids in the first row have not yet been drawn, the canvas coordinate system XoY is horizontally offset to the right by a distance of perRowCount = 10 bitmap widths.

[0433] like Figure 27D As shown, the row number of the next row of data is obtained as index = index + 1 = 0 + 1 = 1, and the second stitched image (index = 1) is drawn in columns 11 to 20 of the first row of the moon view.

[0434] After finishing drawing the second spliced picture (index = 1), the following steps are performed: the number of drawing columns is re-determined as drawColNum = drawColNum + perRowCount = 10 + 10 = 20; the number of drawing columns drawColNum = 20 is greater than the total number of columns of the month view Drawlnfo.mDrawColNum = 13, so the following preparations can be made for drawing the next row of data: the offset of the next row of data is calculated as offset = drawColNum - Drawlnfo.mDrawColNum - perRowCount = 20 - 13 - 10 = -3; the current drawing column is re-set to 0: drawColNum = 0; since offset ≠ 0, index = 1; then, as shown in Figure 27E , the state of the canvas coordinate system XoY is restored to state B1.

[0435] As shown in Figure 27F , the canvas coordinate system XoY is moved vertically downward by a distance of the height of a bitmap. Since the current number of drawing rows is the second row, 30 rows have not been reached, so the state B2 of the current canvas coordinate system XoY is saved, and at this moment, the canvas coordinate system XoY is moved vertically downward by a distance of the height of a bitmap relative to the month view coordinate system.

[0436] As shown in Figure 27G , since offset = -3, the canvas coordinate system XoY is moved horizontally leftward by a distance of 3 bitmap widths, and the second spliced picture (index = 1) is drawn in the -3th column to the 7th column of the second row of the month view.

[0437] As shown in Figure 27H , the number of drawing columns is updated as drawColNum = drawColNum + perRowCoun = -3 + 10 = 7. Since the number of drawing columns drawColNum = 7 is less than the total number of columns of the month view Drawlnfo.mDrawColNum = 13, the canvas coordinate system XoY is moved horizontally rightward by a distance of perRowCount = 10 bitmap widths. Then, the number of rows of the next row of data is obtained as index = index + 1 = 1 + 1 = 2, and the third spliced picture (index = 2) is drawn in the 8th column to the 18th column of the second row of the month view.

[0438] 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; Since 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; Set the current number of columns to be drawn back to 0: drawColNum = 0; Since offset ≠ 0, drawBitmapIndex = 3; Then, as... Figure 27I As shown, restore the canvas coordinate system XoY to state B2.

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

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

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

[0442] The following example uses perRowCount = N = 10, where 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". Figures 26-30 Here are some application scenarios for creating grid-based interfaces based on stitched images:

[0443] Application Scenario 1:

[0444] Figure 28 This diagram illustrates a grid interface drawn based on stitched images when switching from portrait to landscape mode.

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

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

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

[0448] Application Scenario 2:

[0449] Figure 29 This diagram illustrates a grid interface drawn based on stitched images when switching from a small screen to a large screen.

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

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

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

[0453] Application Scenario 3:

[0454] Figure 30 This diagram illustrates a grid interface drawn based on stitched images when switching from full-screen to half-screen mode.

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

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

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

[0458] Application Scenario 4:

[0459] Figure 31 This diagram illustrates how a grid interface is drawn based on stitched images when switching from a large window (full-screen) state to a small window state.

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

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

[0462] It should be noted that, Figure 31 This explanation uses the example where the month view includes 13 columns in both the large window and small window modes. 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 differs before and after the display state changes, then the drawing method of the two month views will differ.

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

[0464] Application Scenario 5:

[0465] Figure 32 This diagram illustrates a grid interface drawn based on stitched images when switching from a month view to a year view.

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

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

[0468] It should be noted that, Figure 32 The example given is that the stitched images used in the monthly and yearly views are each composed of 10 smaller images, and this does not limit the scope of this application. As another example, the stitched images used in the monthly view are each composed of N1 smaller images, and the stitched images used in the yearly view are each composed of N2 smaller images, where N2 > N1, for example, N2 = 30 and N1 = 10.

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

[0470] Based on the above Figure 18The receiving touch event layer, the View, the grid form layout manager, and the custom layout manager are shown in the figure. The following describes the interaction between the functional modules in the process of implementing the View-based image scrolling method. The View can be the high-density View in the above embodiment, or the low-density View in the above embodiment.

[0471] Referring to the description of S31 in the above embodiment, if the high-density View supports up-down scrolling, when the user slides the finger upward or downward on the screen, the high-density View moves up or down relative to the display area of the display screen, and the positions of the grids in the high-density View move up or down relative to the display area of the display screen.

[0472] The following describes the image scrolling method based on the high-density View. Figure 33 It is to be noted that the image scrolling method is described based on the high-density View, which does not limit the present application. The low-density View also supports up-down scrolling, and the image scrolling method based on the low-density View is similar to the image scrolling method based on the high-density View, which is not described herein. Figure 33 As shown in the figure, the method can include the following S101 to S121.

[0473] Figure 33 S101, the touch driver samples the touch operation of the user according to the period T.

[0474] S102, the touch driver receives the click operation of the user on the icon of the gallery application, and starts running the gallery application.

[0475] S103, at time t1, the touch screen receives the single-finger click operation of the user on a certain album interface, and sends the coordinates (x1, y1) corresponding to the click 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).

[0476] It is to be noted that the size of the receiving touch event layer is consistent with the size of the display screen. In the zooming scenario, the ReceiveTouchView can directly pass the coordinates of the touch point to the zoom gesture detector without multiplying the coordinates by a zooming multiple less than 1.

[0477] It is to be noted that the size of the receiving touch event layer is consistent with the size of the display screen. In the zooming scenario, the ReceiveTouchView can directly pass the coordinates of the touch point to the zoom gesture detector without multiplying the coordinates by a zooming multiple less than 1.

[0478] ​S104, at time t1+T, the touch screen receives a single-finger moving operation of the user in the album interface, and sends the coordinates (x2, y2) corresponding to the single-finger moving operation 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).

[0479] If the upper left corner of the receiving touch event layer is taken as the origin, the X axis is horizontal to the right, and the Y axis is vertical downward, a coordinate system is established, then the coordinates (x1, y1) in S103 and the coordinates (x2, y2) in S104 are determined with reference to the coordinate system.

[0480] S105, the high-density View calculates the moving distance dy in the Y axis direction according to the coordinates (x2, y2) recorded in the current period and the coordinates (x1, y1) recorded in the previous period: dy=y2-y1.

[0481] S106, the high-density View transmits the moving distance dy to the grid form layout manager, the grid form layout manager transmits the moving distance dy to the custom layout manager, and the custom layout manager transmits the moving distance dy back to the high-density View.

[0482] The grid form layout manager is a native manager of the Android system, which is used to manage the position and size of the grid component in the high-density View. In the native process of the Android system, the high-density View needs to first send the moving distance dy to the grid form layout manager, but the grid form layout manager does not have the function of directly transmitting data back to the high-density View, so the custom layout manager is provided. The custom layout manager acts as a bridge between the grid form layout manager and the high-density View, and plays a role in data transmission. In the scheme of the application, the grid form layout manager can first transmit the moving distance dy to the custom layout manager, and the custom layout manager transmits the moving distance dy back to the high-density View.

[0483] It should be noted that the above S106 is an optional implementation manner, which does not limit the application, and in actual implementation, the following S107 can be directly executed after the above S105.

[0484] S107, the high-density View moves the distance dy.

[0485] When the user slides the single finger upward in the display screen, dy<0, and the high-density View moves upward by the distance-dy. For example, when the user slides the single finger upward by 300 pixels in the display screen, the high-density View moves upward by 300 pixels.

[0486] When the user swipes down in the display screen with a single finger, dy>0, the high-density View moves down by a distance dy. For example, when the user swipes down in the display screen with a single finger by 600 pixels, the high-density View moves down by 600 pixels.

[0487] S108, the high-density View obtains the layout position index value LP1 of the first grid and the layout position index value LP2 of the last grid.

[0488] After the high-density View moves by a distance dy, the top or bottom edge of the high-density View can move into the display screen, resulting in a blank area in the display screen. In order to avoid a blank area between the bottom of the high-density View and the bottom of the display screen, or a blank area between the top of the high-density View and the top of the display screen, S108-S114 need to be performed to determine whether the high-density View needs to be positionally corrected.

[0489] S109, the high-density View determines whether the layout position index value LP1 points to the first image of the album.

[0490] Exemplarily, the high-density View can determine the size of the layout position index value LP1 of the first grid and LPmin=0 to determine whether the layout position index value LP1 points to the first image of the album.

[0491] If LP1=LPmin, it can be determined that the layout position index value LP1 points to the first image of the album, has been swiped to the first row of the album, and the top grid of the high-density View cannot update more images with smaller actual AP values. When the high-density View is moved down, if the top of the high-density View moves into the display screen, a blank area can appear between the top of the high-density View and the top of the display screen. In order to avoid the blank area, the high-density View performs the following S110 to calculate the first positional correction distance D1.

[0492] If LP1>LPmin, it can be determined that the layout position index value LP1 has not yet pointed to the first image of the album, has not yet been swiped to the first row of the album, and the top grid of the high-density View can still update more images with smaller actual AP values. The high-density View performs the following S111.

[0493] S110, the high-density View determines the movement distance D1 according to the coordinate Y1 of the top of the display screen and the coordinate y1 of the top of the high-density View.

[0494] The "coordinate y1 of the top of the high-density View" in the above S110 refers to the coordinate of the top of the high-density View after the movement distance dy.

[0495] When the single finger is slid downward and the layout position index value LP1 points to the first image of the album, the high-density View can calculate the moving distance D1 according to the following relationship: D1=Y1-y1. Wherein Y1 represents the coordinate of the top of the display screen, and y1 represents the coordinate of the top of the high-density View.

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

[0497] Exemplarily, the high-density View can determine the size of the layout position index value LP2 and LPmax of the last grid to determine whether the layout position index value LP2 points to the last image of the album.

[0498] If LP2=LPmax, it can be determined that the layout position index value LP2 points to the last image of the album, and the bottom grid of the high-density View cannot update more images with larger actual AP values. When the high-density View is moved upward, if the bottom of the high-density View moves into the display screen, a blank area can appear between the bottom of the high-density View and the bottom of the display screen. In order to avoid the appearance of the blank area, the high-density View performs the following S112 to calculate the moving distance D1 of the first position correction.

[0499] If LP2<LPmax, it can be determined that the layout position index value LP2 has not pointed to the last image of the album, and the bottom grid of the high-density View can update more images with larger actual AP values. Therefore, the high-density View does not need to perform the first position correction, i.e., performs the following S113.

[0500] S112, the high-density View determines the moving distance D1 according to the coordinate Y2 of the bottom of the display screen and the coordinate y2 of the bottom of the high-density View.

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

[0502] When the single finger is slid upward and the layout position index value LP2 points to the last image of the album, the high-density View can calculate the moving distance D1 according to the following relationship: D1=Y2-y2. Wherein Y2 represents the coordinate of the bottom of the display screen, and y2 represents the coordinate of the bottom of the high-density View.

[0503] S113, the high-density View determines that the moving distance D1=0.

[0504] When the layout position index value LP1 does not point to the first image of the album, and the layout position index value LP2 does not point to the last image of the album, the high-density View does not need to move up or move down, and thus the high-density View determines that the moving distance D1 = 0.

[0505] It should be noted that the above embodiment is described by taking the example of performing S109 first and then performing S111, which does not limit the present application. As an example, S111 can be performed first and then S109 can be performed. As another example, if dy < 0, it indicates that the single-point upward sliding is performed, and it is possible to slide to the last image of the album, and thus it can be determined only whether the layout position index value LP2 points to the last image of the album; if dy > 0, it indicates that the single-point downward sliding is performed, and it is possible to slide to the first image of the album, and thus it can be determined only whether the layout position index value LP1 points to the first image of the album.

[0506] The above S110, S112, and S113 are executed alternatively. Based on S110, S112, or S113, the moving distance D1 can be calculated. After S110, S112, or S113, S114 can be further included.

[0507] S114, the high-density View moves by the moving distance D1.

[0508] It can be understood that if the moving distance D1 is obtained by S110, the current scenario is the single-point downward sliding scenario, D1 = Y1-y1 < 0, and the high-density View needs to be moved upward. If the moving distance D1 is obtained by S112, the current scenario is the single-point upward sliding scenario, D1 = Y2-y2 > 0, and the high-density View needs to be moved downward. If the moving distance D1 is obtained by S113, the high-density View is not subjected to the first position correction.

[0509] S115, the high-density View reacquires the coordinate y1' of the top of the high-density View and the coordinate y2' of the bottom of the high-density View.

[0510] It can be understood that if the moving distance D1 is obtained by S110 or S112, the coordinate y1' of the top of the high-density View and the coordinate y2' of the bottom of the high-density View are updated, such that y1' ≠ y1 and y2' ≠ y2. If the moving distance D1 is obtained by S113, the coordinate y1' of the top of the high-density View and the coordinate y2' of the bottom of the high-density View are not updated, such that y1' = y1 and y2' = y2.

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

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

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

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

[0515] 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:

[0516]

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

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

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

[0520]

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

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

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

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

[0525] Accordingly, the high-density view can be determined by the following movement distance: D2 = s' * m = min(s1', s2') * m. Here, 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.

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

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

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

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

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

[0531] For a single-finger upward swipe scenario, if y2' < Y2, then the high-density view can be moved down by the number of rows according to the following formula:

[0532]

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

[0534] The last row of the high-density View can be the middle row of the album, and when the user performs a single-finger upward swipe, the probability of swiping to the last row of the album is low, so that the row number s1 does not exceed the actual movable row number, and there is no need to correct the row number s1. The last row of the high-density View can be the penultimate row of the album, and when the user performs a single-finger upward swipe, the probability of swiping to the last row of the album is high, so that the row number s1 exceeds the actual movable row number, and the row number s1 can need to be corrected. The actual movable row number can be determined according to the total number of images of the album and the actual AP value of the high-density View, and refers to the number of rows of the grid that can be added at most at the bottom of the high-density View.

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

[0536]

[0537] Wherein, s2 represents the number of rows of the high-density View that can be moved downward at most, LP2 points to the last image of the album, LPmax is the last image pointed to by the high-density View, and gmax represents the maximum gear of the high-density View.

[0538] The high-density View can calculate the number of rows of the high-density View that are finally moved downward according to the relationship:

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

[0540] Wherein, s represents the number of rows of the high-density View that are finally moved downward, and min() is a minimum value function.

[0541] Correspondingly, the high-density View can determine the moving distance: D2 = s'*m = min (s1, s2)*m. Wherein, s represents the number of rows of the high-density View that are finally moved upward, and m represents the side length of a single grid in the high-density View.

[0542] In addition, the high-density View can update the adaptive position index value of each grid according to the relationship: AP + s*g. Wherein, s represents the number of rows of the high-density View that are finally moved downward, and g represents the gear of the current high-density View.

[0543] S120, the high-density View determines the moving distance D2 = 0.

[0544] The above S117, S119 and S120 are executed alternatively. Based on S117, S119 or S120, the moving distance D2 can be calculated. After S117, S119 or S120, the following S121 can also be included.

[0545] S121, the high-density View moves by the moving distance D2, and refreshes the actual AP and the actual LP of each grid in the high-density View according to the moving distance D2.

[0546] If the moving distance D2 is obtained through S117, the current scenario is a single-direction downward sliding scenario, the high-density View needs to be moved upward, and the calculation method of the moving distance D2 and the method of refreshing the actual AP and the actual LP can refer to the description of S117, which will not be repeated here.

[0547] If the moving distance D2 is obtained through S119, the current scenario is a single-direction upward sliding scenario, the high-density View needs to be moved downward, and the calculation method of the moving distance D2 and the method of refreshing the actual AP and the actual LP can refer to the description of S119, which will not be repeated here.

[0548] If the moving distance D2 is obtained through S120, the high-density View is not moved, and the actual AP and the actual LP of each grid in the high-density View are not refreshed.

[0549] S122, the high-density View re-obtains the layout position index value LP1' of the first grid and the layout position index value LP2' of the last grid.

[0550] If the phone moves the high-density View downward or upward in S115-S121, the images corresponding to each grid in the high-density View need to be refreshed to make the user visually see that the position of the image in the display screen does not change, which may cause the last row of the high-density View after refreshing to be the last row of the album, and further cause the upper edge or the lower edge of the high-density View to be located in the display screen. In order to avoid the appearance of a blank area between the bottom of the high-density View and the bottom of the display screen, S122-S128 need to be performed to determine whether the position of the high-density View needs to be corrected again.

[0551] S123, the high-density View determines whether the layout position index value LP1' points to the first image of the album.

[0552] If LP1' = LPmin, it can be determined that the layout position index value LP1' points to the first image of the album, and the high-density View performs the following S124 to calculate the moving distance D3 of the second position correction.

[0553] If LP1' > LPmin, it can be determined that the layout position index value LP1' has not pointed to the first image of the album, and the high-density View performs the following S125.

[0554] S124, the high-density View determines the moving distance D3 according to the coordinate Y1 of the top of the display screen and the coordinate y1" of the top of the high-density View.

[0555] The coordinate y1" of the top of the high-density View in the above S124 refers to the coordinate of the top of the high-density View after the moving distance D2.

[0556] When the single finger is slid downward and the layout position index value LP1' points to the first image of the album, the high-density View can calculate the moving distance D3 according to the following relationship: D3=Y1-y1". Wherein Y1 represents the coordinate of the top of the display screen and y1" represents the coordinate of the top of the high-density View.

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

[0558] If LP2'=LPmax, it is determined that the layout position index value LP2' points to the last image of the album, and the high-density View performs the following S126 to calculate the moving distance D3 of the second position correction.

[0559] If LP2'<LPmax, it is determined that the layout position index value LP2' has not pointed to the last image of the album, and the high-density View does not need to perform the second position correction, i.e., performs the following S127.

[0560] S126, the high-density View determines the moving distance D3 according to the coordinate Y2 of the bottom of the display screen and the coordinate y2" of the bottom of the high-density View.

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

[0562] When the single finger is slid upward and the layout position index value LP2' points to the last image of the album, the high-density View can calculate the moving distance D3 according to the following relationship: D3=Y2-y2". Wherein Y2 represents the coordinate of the bottom of the display screen and y2 represents the coordinate of the bottom of the high-density View.

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

[0564] 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 can also be included.

[0565] S128, the high-density View moves by the moving distance D3.

[0566] For the specific implementation of S122 to S128, refer to the related description of S108 to S114 above, which will not be repeated here.

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

[0568] It should be noted that S104 to S129 can be completed within one vertical synchronization (Vsync) signal cycle. Taking the display refresh rate of 120Hz as an example, the display driver sends a Vsync signal to the SurfaceFlinger every 8.3 milliseconds. When a Vsync signal arrives, if the movement, refreshing, rendering and synthesis of the high-density View have been completed through S104 to S129, the high-density View that has completed all movements and refreshing can be passed to the display driver, so that the display updates the picture content. If a Vsync signal arrives, the high-density View has not been moved and refreshed, the display continues to display the previous picture content.

[0569] S130, the high-density View returns the actual scrolling distance D collected within a cycle T to the custom layout manager. Wherein, D = dy + D1 + D3. The layout manager defines the actual scrolling distance D = dy + D1 + D3 collected within a cycle T to the grid form layout manager.

[0570] S131, the grid form layout manager determines whether the user operation is an inertia sliding operation or a follow-up sliding operation according to the actual scrolling distance collected within multiple cycles T.

[0571] As an example, the grid form layout manager can send the actual scrolling distance collected within multiple cycles T to the native high-density View. Then, the native high-density View determines whether the user operation is an inertia sliding operation or a follow-up sliding operation based on the actual scrolling distance collected within multiple cycles T.

[0572] If the actual scrolling distance collected within multiple cycles T is less than or equal to the preset scrolling distance, it means that the single-finger sliding speed is slow, and the user operation is a follow-up sliding operation, so that the scrolling display of a large number of images does not need to be triggered.

[0573] If the actual rolling distance collected in the plurality of periods T is greater than or equal to the preset rolling distance, it indicates that the single-finger sliding speed is fast, and the user operation is an inertial sliding operation, thereby triggering the rolling display of a large number of images. Specifically, the original high-density View can be rolled in the same direction of the single-finger sliding direction by a first distance, and the first distance is in a positive proportional relationship with the actual rolling distance collected in the plurality of periods T. In this way, after the user ends the single-finger inertial sliding operation, the album interface continues to roll downward by a distance as if there is inertia, thereby realizing the update of a large number of images.

[0574] In the above scheme, when the user single-finger slides up and down in the gallery, the high-density View also rolls in the same direction of the single-finger sliding direction. When rolling 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 single-finger sliding direction, and refills the content in the high-density View. In this way, only the content needs to be filled in the moved high-density View, without creating a new row of Item high-density View at the top or bottom of the high-density View, and without re-measuring the size and calculating the position of each Item high-density View of the high-density View, thereby optimizing the data processing flow, shortening the data processing time when the images in the gallery are rolled, and solving the frame drop problem.

[0575] Exemplarily, Figure 32 A hardware structure schematic diagram of an electronic device is provided for the embodiments of the present application.

[0576] As Figure 32 shown, the electronic device 100 can include a processor 110, an internal memory 120, a button 130, a sensor module 140, a display screen 150, an audio module 160, a speaker 160A, a receiver 160B, a microphone 160C, a headset interface 160D, and the like. Among them, the sensor module can include a touch sensor.

[0577] The processor 110 can be used to execute the rolling display method in the above embodiments. The processor 110 can include one or more processing units, for example, the processor 110 can include a central processing unit (CPU), a graphics processing unit (GPU), an application processor (AP), an image signal processor (ISP), and the like.

[0578] The internal memory 120 can be used to store computer executable program codes, the executable program codes including instructions. The processor 110 performs various function applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 120. The internal memory 120 can include a program storage area and a data storage area. The program storage area can store an operating system and at least one application program (APP) required by a function, such as a gallery application. The data storage area can store configuration files of various APPs and data created during use of the electronic device 100.

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

[0580] The touch sensor, also referred to as a touch panel. The touch sensor can be disposed on the display screen 150, and the touch sensor and the display screen 150 form a touch screen, also referred to as a touch screen. The touch sensor can be used to detect a touch operation acting on or near the touch sensor. The touch sensor can transmit the detected touch operation to the application processor to determine the touch event type and provide visual output related to the touch operation through the display screen 150. In other embodiments, the touch sensor can also be disposed on the surface of the electronic device 100, which is different from the position of the display screen 150.

[0581] The embodiments of the present application also provide a computer readable storage medium having computer instructions stored therein. When the computer readable storage medium is run on an electronic device, the electronic device executes the method shown in the above embodiments. The computer instructions can be stored in the computer readable storage medium or transmitted from one computer readable storage medium to another computer readable storage medium. The computer readable storage medium can be any available medium accessible by a computer or data storage device including one or more servers, data centers, etc. integrated with one or more media. The available medium can be a magnetic medium, an optical medium, or a semiconductor medium, etc.

[0582] The embodiments of the present application also provide a computer program product including computer program codes, when the computer program codes are run on an electronic device, the electronic device executes the method in the above embodiments.

[0583] The electronic device, the computer readable storage medium, and the computer program product provided by the embodiments of the present application are all used to execute the method provided by the above embodiments.

[0584] In the description of the present application, " / " means or, for example, A / B can mean A or B. In the description of the present application, "and / or" is only a description of the relationship between the associated objects, which means that there can be three relationships, for example, A and / or B, which can represent the three cases of A alone, A and B together, and B alone.

[0585] In the description and claims of the present application, the terms "first" and "second" and the like are used only to distinguish different objects, or to distinguish different treatments of the same object, and are not used to describe a specific order. For example, the first operation and the second operation are used to distinguish different operations, not to describe a specific order of the operations. In the embodiments of the present application, "a plurality of" means two or more.

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

[0587] The above is only a specific embodiment of the present application, but the protection scope of the present application is not limited thereto, any change or replacement within the technical scope disclosed in the present application should be covered in the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claims.

Claims

1. A method for displaying a grid interface, characterized in that, The method comprises: In a case where a first grid interface is displayed, receiving a first operation of a user on the electronic device, the first grid interface comprising a first number of columns of grids; In response to the first operation, according to an adaptation position value of a to-be-stitched picture, every N to-be-stitched pictures connected by adaptation position values are stitched into one stitched picture, wherein an adaptation position value of a last to-be-stitched picture in an ith stitched picture and an adaptation position value of a first to-be-stitched picture in an (i+1)th stitched picture are different by 1, index values of the stitched pictures are sequentially increased in a stitching order, N is an integer greater than or equal to 2, and i is a positive integer; After the first operation is received, a second operation of the user on the electronic device is continuously received; In response to the second operation, a second grid interface is displayed, and N adjacent grids in the second grid interface display one stitched picture, wherein the second grid interface comprises a second number of columns of grids, the first number of columns and the second number of columns are different, in a case where one row in the second grid interface has one stitched picture, an index value of a last stitched picture in a jth row and an index value of a first stitched picture in a (j+1)th row are different by 1, or in a case where one row in the second grid interface has multiple stitched pictures, index values of two adjacent stitched pictures in each row are different by 1, and an index value of a last stitched picture in a jth row and an index value of a first stitched picture in a (j+1)th row are the same or different by 1, and j is a positive integer.

2. The method of claim 1, wherein, A height of one stitched picture is equal to a height of one to-be-stitched picture, and a width of one stitched picture is equal to a sum of widths of N to-be-stitched pictures.

3. The method of claim 1, wherein, The first operation is a zoom operation or a double-finger press operation, the second operation is a zoom operation, and a user's finger does not leave a screen of the electronic device from when the first operation is received to when the second operation ends.

4. The method according to any one of claims 1 to 3, characterized in that, Each grid in the first grid interface displays one to-be-stitched picture.

5. The method according to any one of claims 1 to 3, characterized in that, M adjacent grids in the first grid interface display one stitched picture, and 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 the second grid interface is displayed, the method further comprises: Receiving a third operation of the user on the electronic device; In response to the third operation, a third grid interface is displayed, and the third grid interface comprises a third number of columns of grids, and the third number of columns is different from the second number of columns; In a case where one row in the third grid interface has one stitched picture, an index value of a last stitched picture in a jth row and an index value of a first stitched picture in a (j+1)th row are different by 1, or in a case where one row in the second grid interface has multiple stitched pictures, index values of two adjacent stitched pictures in each row are different by 1, and an index value of a last stitched picture in a jth row and an index value of a first stitched picture in a (j+1)th row are the same or different by 1.

7. The method of claim 6, wherein, The third operation is any one of the following: An operation triggering the electronic device to start or stop a split-screen function; An operation triggering the electronic device to start or stop a small window mode; An operation triggering the electronic device to switch from a vertical screen state to a horizontal screen state, or switch from a horizontal screen state to a vertical screen state; An operation triggering the electronic device to switch from a large screen state to a small screen state, or switch from a small screen state to a large screen state.

8. The method according to any one of claims 1 to 5, characterized in that, The second grid interface is drawn based on a first view control, a size of the first view control is greater than a size of the screen, a distance from a lower edge of the screen to a lower edge of the first view control is a first distance, and an edge of the first view control is located outside the screen; After displaying the second grid interface, the method further includes: receiving a sliding operation of a user sliding a second distance along a first direction on the screen, the first direction being a direction from a lower edge of the screen to an upper edge of the screen, and the second distance being greater than the first distance; in response to the sliding operation, moving the first view control by a third distance along a second direction, re-determining an adaptive position value of a to-be-displayed spliced picture, obtaining a corresponding spliced picture, and drawing and displaying a fourth grid interface, N adjacent grids in the fourth grid interface displaying one spliced picture; the second direction is opposite to the first direction, the third distance is greater than or equal to a difference between the second distance and the first distance, and the spliced pictures displayed in the second grid interface and the spliced pictures displayed in the fourth grid interface are not completely the same; wherein, in a case where one spliced picture is in one row in the fourth grid interface, an index value of a last spliced picture in a jth row and an index value of a first spliced picture in a (j+1)th row are different by 1; or, in a case where multiple spliced pictures are in one row in the fourth grid interface, an index value of two adjacent spliced pictures in each row is different by 1, and an index value of a last spliced picture in a jth row and an index value of a first spliced picture in a (j+1)th row are the same or different by 1.

9. The method of claim 8, wherein, The re-determining of the adaptive position value of the to-be-displayed spliced picture includes: determining a number of moved rows of the first view control according to the third distance; determining the adaptive position value of the to-be-displayed spliced picture according to the adaptive position values of a first grid and a last grid in the second grid interface, the number of moved rows of the first view control, the second direction, and the second column number.

10. The method of claim 8, wherein, After the drawing and displaying of the fourth grid interface, the method further includes: obtaining an adaptive position value of a first grid and an adaptive position value of a last grid in the fourth grid interface; re-determining adaptive position values of each to-be-spliced picture according to the adaptive position of the first grid in the fourth grid interface, the adaptive position value of the last grid in the fourth grid interface, and a total number of grids of the fourth grid interface; caching the re-determined each to-be-spliced picture 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: loading a first view control and a second view control; initializing a size of the first view control and a column number of each gear corresponding to the first view control; initializing a size of the second view control and a column number of each gear corresponding to the second view control; wherein, 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 of claim 11, wherein, The first view control inherits from an Android view control, the second view control inherits from a recycler view control, the first view control and the second view control have a size greater than or equal to a size of a screen, the Android view control does not have a table item view, the recycler view control has a table item view, and the table item view supports a touch operation of a user.

13. The method according to any one of claims 1 to 11, characterized in that, The first operation is a zoom operation or a double-finger pressing operation, and the first grid interface is drawn based on the second view control. The operation of splicing each N pictures according to the adaptive position values of the pictures includes: Obtaining an adaptive position value of a first grid and an adaptive position value of a last grid in the first grid interface; Determining the adaptive position values of the pictures according to the adaptive position of the first grid, the adaptive position value of the last grid, the total number of columns of the second grid interface, and the value N; Splicing each N pictures according to the adaptive position values of the pictures, and adding index values to the pictures according to a splicing order; Caching the pictures in a high-density bitmap loader.

14. The method of claim 13, wherein, The second operation is a zoom operation. Before displaying the second grid interface, the method further includes: Determining a zoom center according to the second operation; Determining a drawing area of the second grid interface in the first view control; Determining the adaptive position value of the first grid and the adaptive position value of the last grid in the drawing area according to the layout position value and the adaptive position value of the selected grid, one adaptive position value corresponding to one picture; Obtaining a first spliced picture from the high-density bitmap loader according to the adaptive position value of the first grid and the adaptive position value of the last grid in the drawing area; Drawing the first spliced picture to 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 a 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 area, drawing one spliced picture every N grids in the first area in a row according to the index of the spliced picture in ascending order.

16. The method of claim 15, wherein, Starting from the top left corner of the first area, drawing one spliced picture every N grids in the first area in a row according to the index of the spliced picture in ascending order includes: Before drawing each row of spliced pictures, horizontally offsetting the origin of a canvas from the top left corner of each row by a distance of the width of a first value of spliced pictures; Drawing a first index spliced picture on the canvas, the top left corner of the first index spliced picture coinciding with the origin of the canvas; Obtaining the number of columns of images that have been drawn in the first area; In a case where the number of columns of the drawn image is less than the second number of columns, the canvas is moved right by a distance of N widths of the stitched pictures, and a second indexed stitched picture is drawn on the canvas, a top-left corner of the second indexed stitched picture coincides with the origin of the canvas, and the second index is equal to the first index plus 1.

17. The method of claim 16, wherein, The method further includes: In a case where the number of columns of the drawn image is greater than or equal to the second number of columns, the following operations are sequentially performed: determining that the origin of the canvas is horizontally offset by a first value of widths of the stitched pictures when drawing a first stitched picture of a next row; resetting the number of columns of the drawn image in the first region to 0; restoring the origin of the canvas to coincide with a top-left corner of each row; moving the canvas vertically downward by a distance of a height of one stitched picture.

18. The method of claim 17, wherein, The determination that the origin of the canvas is horizontally offset by the first value of widths of the stitched pictures when drawing the first stitched picture of the next row includes: subtracting the second number of columns and N from the number of columns of the drawn image in the first region to obtain the first value; using the first value as the horizontal offset of the origin of the canvas when drawing the first stitched picture of the next row.

19. The method of claim 17, wherein, Before the 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, increasing the index of the stitched picture by 1; if the first value is not equal to zero, keeping the index of the stitched picture unchanged.

20. The method of any one of claims 16-19, wherein, The drawing of the stitched pictures in the first region in the order from small to large according to the indexes of the stitched pictures, starting from the top-left corner of the first region, further includes: before starting the drawing of the first row of data of the first region, moving 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 of the first region, moving the origin of the canvas to the top-left corner of the first row in the first region again.

21. The method of any one of claims 15-20, wherein, Before the starting the drawing of the first row of data of the first region, the method further includes: determining a first scaling multiple according to the size of the grid in the first region and the size of the to-be-stitched picture; setting the scaling multiple of the canvas to the first scaling multiple.

22. The method of any one of claims 15-20, wherein, Before the starting the drawing of the first row of data of the first region, the method further includes: determining the index of the first stitched picture drawn in the first row of the first region according to the adaptive position value of the grid in the first column of the first row in the first region; determining the horizontal offset of the origin of the canvas when drawing the first stitched picture of the first row according to the adaptive position value of the grid in the first column of the first row in the first region, the index of the first stitched picture drawn in the first row of the first region, and the value N.

23. The method of any one of claims 1 to 22, wherein, Before the receiving the first operation of the user on the electronic device, the method further includes: displaying a gallery interface, the gallery interface including a photo album card; receiving a fourth operation of the user on the photo album card; in response to the fourth operation, displaying the first grid interface.

24. An electronic device, comprising: The electronic device includes one or more processors, and a memory; The memory is coupled with the one or more processors, and the memory is configured to store computer program codes including computer instructions, and the one or more processors are configured to invoke the computer instructions to cause the electronic device to perform the method according to any one of claims 1-23.

25. A chip system, characterized by The chip system is applied to an electronic device, and the chip system includes one or more processors configured to invoke computer instructions to cause the electronic device to perform the method according to any one of claims 1-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 according to any one of claims 1-23.

Images