Methods, devices, chip systems, and media for drawing controls based on grid interfaces

Abstract

This application provides a method, device, chip system, and medium for drawing controls based on a grid-based interface, relating to the field of terminal technology. In this application's solution, a Drawable list is constructed, converting each view in the previous multi-view layout into a drawing object and placing it in the Drawable list. During drawing, the drawing of each Drawable is triggered separately, and each Drawable has its own specific drawing area. This process is equivalent to drawing each control as an overlay of a single ItemView. Compared to drawing a single ItemView using a multi-view layout, the scheme of using multiple layers based on Fresco to draw a single ItemView can shorten the inflate time of a single ItemView, thereby shortening the layout time of the entire grid interface and enabling the grid interface to be drawn quickly.

Description

Technical Field

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

[0002] With the rapid development of terminal technology, mobile phone storage space is becoming increasingly larger. Mobile phone gallery apps can store a large number of images. Gallery apps can set up multiple albums based on image type, such as camera album, all photos album, all videos album, screenshot album, and personal favorites album, etc.

[0003] Currently, mobile phones support displaying a fixed number of columns of images in a grid format within each album's interface. Each grid may include multiple controls. These controls are typically implemented using a multi-view layout. This method has a significant drawback: if all controls in each grid of an interface are drawn in this way, it can lead to severe rendering delays for the entire interface. Summary of the Invention

[0004] This application provides a method, device, chip system, and medium for drawing controls based on a grid interface, which can solve the problem of long time consumption when drawing controls in each grid through multi-view combination layout.

[0005] To achieve the above objectives, the embodiments of this application adopt the following technical solutions:

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

[0007] Receive the user's first action on the album card. In response to the first action, draw the layer for each item view according to the layer drawing parameters corresponding to each item view in the first area of ​​the RecyclerView, and display the first grid interface based on the drawn content of the first area. The layer drawing parameters may include the layer index of the layer to be drawn and the drawable of the layer to be drawn. Each drawable represents a control, and the grids of the first grid interface may include controls.

[0008] In the above scheme, for each grid cell in the grid interface, each control can be drawn as a layer of a single grid cell. Compared with drawing a single grid cell using a multi-view layout, the scheme of drawing a single ItemView using multiple layers can shorten the time for inflating a single ItemView, thereby shortening the layout time of the entire grid interface and allowing the grid interface to be drawn quickly.

[0009] In one possible implementation, each ItemView is drawn using layers according to the layer drawing parameters corresponding to each ItemView in the first area of ​​the RecyclerView. This can include: drawing layers for each ItemView based on a list of drawing objects (creating a Drawable list), according to the layer drawing parameters corresponding to each ItemView in the first area of ​​the RecyclerView. The Drawable list can include N layers and initialization parameters corresponding to the N layers. The initialization parameters for each of the N layers can include the layer index, the drawing object, and the drawing area, where N is an integer greater than or equal to 2.

[0010] For example, N layers, arranged from bottom to top, are: thumbnail layer, background animation layer, feature layer, selection layer, import layer, checkbox layer, and recycle layer. The thumbnail layer draws thumbnails of photos or videos; the background animation layer draws background animations; the feature layer draws feature icons corresponding to the business status of the photos or videos; the selection layer draws selection controls; the import layer draws import controls; the checkbox layer draws checkbox controls; and the recycle layer draws time controls.

[0011] In one possible implementation, before drawing each ItemView layer according to the layer drawing parameters corresponding to each ItemView in the first area of ​​the RecyclerView based on the Drawable list, the method may further include: creating a Drawable list and setting initialization parameters for each layer of the Drawable list.

[0012] In the above scheme, by constructing a list of Drawables, each view in the previous multi-view layout can be converted into a drawing object and placed in the list of Drawables. In this way, when drawing, the drawing of each Drawable can be triggered separately, and each Drawable has its own specific drawing area.

[0013] In one possible implementation, creating the Drawable list can include: creating the Drawable list through a custom granted object view (DraweeView), which inherits from the Fresco image library. Correspondingly, based on the Drawable list, drawing layers for each ItemView according to the layer drawing parameters corresponding to each ItemView in the first area of ​​the RecyclerView can include: based on the Drawable list, calling a custom drawing object (Drawable) from the Fresco image library, and drawing each layer of each ItemView according to the layer drawing parameters corresponding to each ItemView in the first area of ​​the RecyclerView.

[0014] In the above solution, the custom DraweeView inherits from Fresco's SimpleDraweeview, converting each control into a Drawable object, constructing a list of Drawables, and then placing the list of Drawables into Drawee's overlay. Using Drawee's existing drawing process, the controls are drawn as individual layers. This process is equivalent to drawing each control as a separate overlay for a single ItemView.

[0015] In one possible implementation, creating the Drawable list can include: creating the Drawable list through a custom item hierarchy, where the custom DrawableView inherits from an Android View. Correspondingly, based on the Drawable list, drawing layers for each ItemView according to the layer drawing parameters corresponding to each ItemView in the first area of ​​the RecyclerView can include: based on the Drawable list, calling the custom Drawable through the custom item hierarchy, and drawing each layer of each ItemView according to the layer drawing parameters corresponding to each ItemView in the first area of ​​the RecyclerView.

[0016] The above approach does not utilize Fresco's mechanism; it directly inherits from Android View as the ItemView of a custom RecyclerView. This embodiment uses a custom ItemHierarchy class. Within the custom ItemHierarchy, a list of Drawables is constructed, with each control added as a Drawable. During drawing, each Drawable control is drawn individually. This process is equivalent to drawing each control as an overlay of a single ItemView.

[0017] In one possible implementation, the layer coverage order and drawing area of ​​each layer in an ItemView are different. After displaying the first grid interface based on the drawing content of the first area, the method may further include: receiving a second operation by the user on the first grid in the first grid interface; in response to the second operation, determining the touched layer in the first grid based on the touch coordinates of the second operation, and performing a processing operation corresponding to the drawing object of the touched layer.

[0018] Specifically, determining the touched layer based on the touch coordinates of the second operation can include: traversing the N layers corresponding to the first grid in order from top to bottom; if the layer drawn in the first grid can include the first layer, and the touch coordinates of the second operation are within the drawing area of ​​the first layer, then the first layer is determined as the touched layer, and the traversal of the layers ends. For example, set variable i = 6. Start executing the first loop from Layer(6), call the custom Drawable to determine whether the recycled layer is in the display state, and whether the touch coordinates (posx,posy) are within the drawing area of ​​the recycled layer. If the recycled layer is in the display state, and the touch coordinates (posx,posy) are within the drawing area of ​​the recycled layer, then the custom Drawable returns "yes (YES)" to the custom ItemHierarchy, the custom ItemHierarchy ends the entire LOOP loop, and reports the touch event to the custom DraweeView. If the recycled layer is not in the display state, or the touch coordinates (posx,posy) are not within the drawing area of ​​the recycled layer, then the custom Drawable returns "NO" to the custom ItemHierarchy, and the custom ItemHierarchy decrements the variable i by 1, i.e., i = 5. The second loop is executed starting from Layer(5), and the custom Drawable is called to repeat the above steps. It can be understood that in the process of traversing each layer in the order of the layers from top to bottom: if any layer is in the display state and the touch coordinates (posx,posy) are within the drawing area of ​​this layer, then the entire LOOP loop can be exited, and the touch event is reported to the custom DraweeView; if the previous layer is not in the display state, or the touch coordinates (posx,posy) are not within the drawing area of ​​the recycled layer, then the variable i is decremented by 1, and the next loop continues until the entire LOOP loop ends.

[0019] In one possible implementation, performing the processing operation corresponding to the drawing object of the touched layer may include: if the first layer is a check layer, changing the display format of the check control in the check layer; or, if the first layer is a selection layer, displaying the original image or video corresponding to the thumbnail of the first grid.

[0020] In one possible implementation, after displaying the first grid interface based on the drawing content of the first region, the method may further include: receiving a third operation from the user on the first grid interface, the third operation being a swipe operation or a zoom operation; responding to the third operation, drawing layers for each ItemView according to the layer drawing parameters corresponding to each ItemView in the second region of the RecyclerView, and displaying the second grid interface based on the drawing content of the second region. Here, the ItemViews contained in the first region and the second region are different, and the content of the first grid interface and the second grid interface are different. It is understood that after displaying the first grid interface of the album, the user can still perform single-finger swipe operations and two-finger zoom operations on the grid interface. In these cases, the electronic device may need to redraw the grid interface to update the album's grid interface.

[0021] In one possible implementation, before drawing the layers for each ItemView according to the layer drawing parameters corresponding to each ItemView in the first area of ​​the RecyclerView, the method may further include: initializing the RecyclerView, which may include ItemViews with p rows and q columns, and whose size is greater than or equal to the screen size. p and q are both positive integers. Each ItemView is used to display a texture image, and each ItemView is called a grid. This texture image may be a thumbnail of an image, or it may include a thumbnail and one or more controls added to the thumbnail. The image may be a photograph or a frame from a video. The RecyclerView can be considered a container for displaying images. When the user swipes up or down on the screen, the RecyclerView scrolls up and down accordingly, and the album page scrolls up and down accordingly; or, when the user zooms in or out on the album page, the RecyclerView zooms in or out accordingly, and the album page zooms in or out accordingly. This solves the problem of long processing times caused by remeasuring the size and position of each grid when swiping up or down or zooming.

[0022] In one possible implementation, layer drawing parameters can also include the transparency of the layer to be drawn. For example, electronic devices can set the transparency of layers using alpha values. Alpha values ​​represent the degree of transparency of a layer. Typically, alpha values ​​range from 0 to 255. If a layer with an alpha value of 0 is drawn onto a View, it has no effect because the layer is completely transparent and invisible to the user. If a layer with an alpha value of 255 is drawn onto a View, it will cover other layers below it, making those other layers invisible. It can be understood that by setting the alpha value of each layer, some layers can be hidden, while others can be made visible to the user.

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

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

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

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

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

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

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

[0030] Figure 1 One of the schematic diagrams illustrating a scenario where a mobile phone displays images in a zoomed-out format on a photo album page, as provided in this application;

[0031] Figure 2 The second illustration of a scenario where a mobile phone displays images in a zoomed-out format on a photo album page, as provided in this application;

[0032] Figure 3 One of the schematic diagrams illustrating a scenario where a mobile phone displays images scrolling through a photo album page, as provided in this application;

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

[0034] Figure 5 A schematic diagram of the custom RecyclerView for the album page settings provided in this application;

[0035] Figure 6 A schematic diagram of an ItemView drawn based on a multi-view composition layout method provided in this application;

[0036] Figure 7 A schematic diagram of the layers of a single ItemView provided in this application;

[0037] Figure 8 A schematic diagram illustrating the relative positional relationship between the drawing area of ​​the ItemView provided in this application and a layer;

[0038] Figures 9A to 9G A schematic diagram of the seven layers provided in this application;

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

[0040] Figure 11 Class diagram of the Fresco control provided in this application;

[0041] Figure 12 A schematic diagram of the layers of the Fresco DraweeView provided in this application;

[0042] Figure 13A schematic diagram of the N overlay layers provided in this application;

[0043] Figure 14 A flowchart illustrating the Fresco-based drawing scheme for a single ItemView with multiple layers provided in this application;

[0044] Figure 15 Class diagram of Android View provided in this application;

[0045] Figure 16 A flowchart illustrating the drawing scheme for a single ItemView based on multiple layers of Android View provided in this application;

[0046] Figure 17 A flowchart illustrating how the electronic device provided in this application processes touch events on a control;

[0047] Figure 18 A schematic diagram illustrating the scene of selecting multiple photos in selection mode provided in this application;

[0048] Figure 19 This is a schematic diagram illustrating a scenario where a user jumps to a larger image in selection mode, as provided in this application.

[0049] Figure 20 This is a schematic diagram illustrating a scenario where the user jumps to a large image in normal mode, as provided in this application.

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

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

[0052] In this embodiment of the application, the gallery application supports multiple image display methods. For example, such as... Figures 1 to 4 As shown, the gallery app supports categorizing and displaying images in album format on the album page. The album page can include various types of albums such as camera, video, photo, cloud storage, selfie, live photo, long exposure, slow motion, screenshot, and GIF.

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

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

[0055] The following example uses a mobile phone as an electronic device, combined with... Figures 1 to 4 This section provides examples illustrating the use cases of image library applications.

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

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

[0058] 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 number of levels for the photo album page. For example, based on the phone 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.

[0059] 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 1The 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.

[0060] 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 consists of multiple square grids. For example, with a 3-column album page, the side length h1 of each grid is equal to the screen width 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 3 columns, a time capsule 03, displayed in days with preset transparency, is shown in the upper left corner of the page; in this case, the album page is called a day view. Time capsule 03 indicates the specific shooting date "2024.07.10," which can be the shooting date of all photos in the current album page. When a user wants to quickly browse more photos, they can increase the number of image columns displayed on the screen by decreasing the distance between two fingers.

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

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

[0063] like Figure 2 As shown in (a), without lifting two fingers from the screen, the user can continue to decrease the distance between their fingers. When the distance decreases from d3 to d4, the album page changes from a 13-column grid to a 31-column grid, with each grid having a side length of h4, which is equal to the screen width divided by 31. When the album page includes 31 columns, a time capsule 07, displayed in the upper left corner with preset transparency, indicates a yearly unit. For example, time capsule 07 might indicate a specific shooting date of "2024," which could be the shooting date of all photos in the current album page. At this point, the album page is called the year view.

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

[0065] As another example, after switching the album page to a 31-column grid, such as Figure 2 As shown in (c), if the user keeps the distance between their two fingers constant at d4, the album page will continue to display 31 columns of images.

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

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

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

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

[0070] 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 3 As 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.

[0071] Users can 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 4As 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 grid between time capsules 16 and 17 were taken on "March 2024," while the photos in the grids of time capsule 17 (both in the row and below) 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.

[0072] In the above embodiments, the album page includes multiple grids, each grid displaying a texture image. It should be noted that, due to interface size limitations, the embodiments in this application only show texture images in a grid at level 3. It is understood that as the level increases, each grid should include a smaller texture image.

[0073] To display multiple images on a photo page, this application provides a drawing scheme for a grid interface based on a custom RecyclerView control. The custom RecyclerView control is larger than the screen size. The custom RecyclerView consists of multiple ItemViews in a grid format, each ItemView displaying a textured image; each ItemView is called a grid. This textured image can be a thumbnail of an image, or it can include a thumbnail and one or more controls added to the thumbnail. The image can be a photograph or a frame from a video. The custom RecyclerView can be considered a container for displaying images. When the user swipes up or down on the screen, the custom RecyclerView scrolls accordingly, causing the photo album page to scroll up and down as well; or, when the user zooms in or out on the photo album page, the custom RecyclerView zooms in or out accordingly, causing the photo album page to zoom in or out as well. This solves the problem of time-consuming re-measuring of the size and position of each grid during swiping or zooming.

[0074] For example, Figure 5 This diagram illustrates a custom RecyclerView set up for a photo album page.

[0075] Taking a photo album with 3 or 5 levels, and a screen size of 1200 pixels wide * 2600 pixels high as an example. After the phone receives a click on the gallery icon, the phone starts running the gallery application and initializes a custom RecyclerView. For example... Figure 5 As shown, the initialized custom RecyclerView can include 5 columns * 12 rows = 60 ItemViews, and each ItemView has a width and height of 400 pixels. The calculation methods for the number of columns, rows, and the side length of each ItemView in the initialized custom RecyclerView are as follows: The phone can divide the screen width of 1200 pixels by the minimum tier of 3, resulting in a side length of 400 pixels for each ItemView in the initialized custom RecyclerView. Then, the phone can multiply the minimum tier of 3 by the side length of 400 pixels for each ItemView in the initialized custom RecyclerView, and then divide by the maximum tier of 5, calculating a side length of 240 pixels for each ItemView on the screen at the maximum tier (5). Finally, the phone can divide the screen height of 2600 pixels by the side length of 240 pixels for each ItemView on the screen at the maximum tier (5), and add 1 to obtain the number of rows in the initialized custom RecyclerView: 12. It should be noted that at level 5, the phone can divide the screen height by the side length of each ItemView on the screen, which is 240 pixels, at the maximum level (level 5), to determine that a maximum of 11 rows of pixels can be displayed. The custom RecyclerView is at least one row larger than the screen. This ensures that the size of the custom RecyclerView sent to the screen is larger than the screen size, so that there is no blank space on the screen and the custom RecyclerView can scroll up and down.

[0076] like Figure 5 As shown, at level 3, the custom RecyclerView displays 3 rows * 8 columns of ItemViews on the screen. Each ItemView displays a texture image. This texture image can be a thumbnail of a picture, or one or more controls can be added to the thumbnail (such as...). Figure 5 (Shown the duration control, cloud control, and favorites control, etc.). This image can be a photograph or a frame from a video. When the texture image is a thumbnail of a photograph, clicking the thumbnail will display the photograph in full screen on the phone. When the texture image is a thumbnail of a frame from a video, clicking the thumbnail will play the video in full screen on the phone.

[0077] It should be noted that, Figure 5This example uses a custom RecyclerView with a minimum of 3 tiers and a maximum of 5 tiers as an illustration, and does not limit the scope of this application. In actual implementation, the maximum tier of a custom RecyclerView can include more tiers, such as 1, 13, or 31 tiers. It can be understood that as the maximum tier of a custom RecyclerView increases, the number of ItemViews included in the custom RecyclerView will also increase.

[0078] in addition, Figure 5 The relative position of the display area and the custom RecyclerView shown here is for illustrative purposes only. In actual implementation, users can change the relative position and size of the display area by swiping up and down and zooming. For example, when a user swipes up on the screen, the custom RecyclerView slides upward relative to the screen, displaying photos taken later; when a user swipes down on the screen, the custom RecyclerView slides downward relative to the screen, displaying photos taken earlier. As another example, when a user decreases the distance between two fingers, the display area in the custom RecyclerView enlarges, sending the enlarged area to the screen, resulting in more images of smaller size displayed; conversely, when the distance increases, the display area shrinks, sending the smaller area to the screen, resulting in fewer images of larger size displayed.

[0079] When a grid interface includes a limited number of images, such as 3 or 5 columns, electronic devices can display relevant feature icons (also known as controls) on the thumbnails based on the business status of the photos and videos. Figure 5 As shown, the bottom right corner of the cloud photo grid includes a cloud control to indicate that the photo has been synced to the cloud; the top right corner of the favorite photo grid includes a favorite control to indicate that the photo has been favorited by the user; the bottom left corner of the video grid includes a duration control to indicate the duration of the video; and the top left corner of the select image thumbnail grid includes a selection control to indicate that the image has been selected by the user.

[0080] Currently, when a grid contains multiple controls, these controls are usually implemented through a multi-view layout.

[0081] For example, Figure 6 This diagram illustrates an ItemView drawn using a multi-view composition layout. Figure 6As shown, the electronic device displays six controls within the display area of ​​an ItemView: a FrescoDrawee control, an image control, a button control, a text control, a checkbox control, and a custom view control. Fresco is an image library from Facebook used to display images in Android applications, and Fresco Drawee is a component provided by Fresco responsible for image rendering. The image control displays a simple image, such as a cloud control or a favorites control. The button control provides a button for a specific function, such as a checkbox to indicate whether an image is selected. The text control displays text, such as the duration of a video. The checkbox indicates whether a thumbnail of an ItemView is selected. The custom view control allows users to customize other functional controls according to their needs. The electronic device can set the size of these controls and their specific positions within the ItemView. For example, the Fresco Drawee control is the same size as an ItemView and can fill the entire ItemView; the image control, button control, text control, selection control, and custom view control are smaller than the size of an ItemView and are set in different positions or areas of the ItemView.

[0082] Experimental data shows that for a grid interface with a certain number of columns, if a single ItemView is drawn using a multi-view layout, the inflation time of a single ItemView is approximately 15 milliseconds (ms), and the layout time of the entire grid interface is approximately 2 seconds (s). Here, inflation time refers to the time required to convert the relevant layout file to the single ItemView; layout time refers to the time required to complete the grid measurement and drawing of the custom RecyclerView before drawing the grid interface. It can be seen that drawing a single ItemView using a multi-view layout has a significant time consumption issue. If controls in multiple grids of an interface are drawn using this method, it may lead to severe rendering delays for the entire interface, and even blank areas or frame drops may appear.

[0083] In view of the above problems, this application provides a drawing scheme for a single ItemView based on multiple layers. In this scheme, a list of drawable objects is constructed, converting each view in the previous multi-view layout into a drawable object and placing it in the Drawable list. During drawing, the drawing of each Drawable is triggered separately, and each Drawable has its own specific drawing area. This process is equivalent to drawing each control as an overlay layer of a single ItemView. Experimental data shows that for a grid interface with the same number of columns, when changing from a multi-view layout-based approach to a multi-layer approach for implementing a single ItemView, the inflate time of a single ItemView can be reduced from 15ms to 3ms, and the layout time of the entire grid interface can be reduced from 2s to 800ms. Compared with drawing a single ItemView using a multi-view layout-based approach, the multi-layer approach significantly reduces drawing time and improves screen smoothness. Drawable represents an abstract concept that can be drawn on a canvas. For example, ShapeDrawable is used to draw basic physical shapes, ColorDrawable is used to draw specific colors, and BitmapDrawable is used to draw specific bitmaps.

[0084] To facilitate understanding, the following will be combined with... Figure 7 , Figure 8 , Figures 9A to 9G This application provides a brief explanation of the basic principles of the drawing scheme for a single ItemView based on multiple layers.

[0085] For example, Figure 7 This diagram illustrates the individual layers of a single ItemView.

[0086] like Figure 7 As shown, the layers are covered sequentially from bottom to top:

[0087] Layer(0): Thumbnail layer;

[0088] Layer(1): Background animation layer;

[0089] Layer(2): Feature layer;

[0090] Layer(3): Select the layer;

[0091] Layer(4): Import layer;

[0092] Layer(5): Multiple selection layer;

[0093] Layer(6): Recycled layer.

[0094] In this embodiment, within the drawing area of ​​an ItemView, each layer has a specific drawing position and its own transparency. As an example, an electronic device can set the transparency of layers using alpha values. Alpha values ​​represent the degree of transparency of a layer. Typically, alpha values ​​range from 0 to 255. Drawing a layer with an alpha value of 0 onto a View has no effect because this layer is completely transparent and invisible to the user. Drawing a layer with an alpha value of 255 onto a View will cover other layers below it, making those other layers invisible. By setting the alpha value of each layer, some layers can be hidden, while others can be made visible to the user.

[0095] For example, Figure 8 This shows the relative position of the drawing area of ​​the ItemView to a layer.

[0096] like Figure 8 As shown, the drawing area of ​​an ItemView is 400 pixels wide and 400 pixels high. A coordinate system is established with the top-left corner of the ItemView's drawing area as the origin o, the horizontal direction to the right as the x-axis, and the vertical direction downwards as the y-axis. Each position in the drawing area can be represented by coordinates (x, y), where x represents the column and y represents the row. These coordinates (x, y) are called absolute coordinates. The boundary lines of a layer can be represented by coordinates in this coordinate system. For example, a layer's boundary parameters might be (x1, y1, x2, y2), where (x1, y1) is the coordinate of the top-left corner of the layer, x2 is the width of the window, and y2 is the height of the window. It can be understood that if (x1, y1) = (0, 0), then the top-left corner of the layer coincides with the top-left corner of the ItemView's drawing area. When a user's finger touches a touch point on the layer containing the control, the absolute coordinates of the touch point can be obtained using the `getRawX()` and `getRawY()` methods, while the relative coordinates can be obtained using the `getX()` and `getY()` methods. The absolute coordinates are the coordinates of the touch point relative to the drawing area of ​​the ItemView, while the relative coordinates are the coordinates of the touch point relative to the layer.

[0097] For thumbnail layers:

[0098] The layer index of the thumbnail layer is: OVERLAY_INDEX_ACTUAL_BITMAP = 0.

[0099] The Drawable object for the thumbnail layer is: HolderAndActualBitmapDrawable.

[0100] The purpose of a thumbnail layer is to display thumbnails of photos or videos.

[0101] For example, Figure 9A A schematic diagram of thumbnail layers is shown. (For example...) Figure 9A As shown, the thumbnail layer is located at the bottom layer, following the order of layers from bottom to top. If an ItemView does not require drawing controls, then no other layers need to be drawn above the thumbnail layer. If the bounds parameter of the thumbnail layer is (0, 0, 400, 400), then the thumbnail layer will completely fill the entire ItemView. It should be noted that the thumbnail layer is always drawn within the drawing area of ​​each ItemView, while other layers will selectively overlap the thumbnail layer.

[0102] For the background animation layer:

[0103] The layer index for the background animation layer is: OVERLAY_INDEX_ANIMATIONBG = 1.

[0104] The Drawable object for the background animation layer is: AnimationBgDWrapper.

[0105] The purpose of the background animation layer is to cover the background animation as the thumbnail gradually transitions from a blurry image to a clear image.

[0106] For example, Figure 9B A schematic diagram of the background animation layer is shown. (For example...) Figure 9B As shown, following the layer order from bottom to top, the thumbnail layer is located on the second layer, covering the thumbnail layer. If the boundary parameters of the background animation layer are (0, 0, 400, 400), it means that the background animation layer exactly fills the entire ItemView.

[0107] For the feature layer:

[0108] The layer index of the feature layer is: OVERLAY_INDEX_ALL_SPECIAL_FEATURE_ICONS = 2.

[0109] The Drawable object for the feature layer is: SpecialFeatureLayerDWrapper.

[0110] The purpose of the feature layer is to draw relevant feature icons (i.e. controls) based on the various business states of photos and videos, such as feature icons corresponding to cloud photos, favorite photos, videos, and magazines.

[0111] In some embodiments, the feature layer may include one or more controls.

[0112] For example, Figure 9C A schematic diagram of the feature layer is shown. For example... Figure 9C As shown, following the layer order from bottom to top, the Features layer is the third layer, overlaying the thumbnail layer. For example, the Features layer can include three controls: a Favorites control, an Artificial Intelligence (AI) control, and a Cloud control. The Favorites control indicates that the photo / video has been favorited by the user, with boundary parameters (360, 0, 40, 40). The AI ​​control indicates that the photo / video is an AI photo / video, with boundary parameters (0, 360, 40, 40). The Cloud control indicates that the photo / video has been synced to the cloud, with boundary parameters (360, 360, 40, 40). It can be understood that when a layer has multiple controls, drawing these controls in different areas of this layer makes it easier for users to identify and operate each control.

[0113] For selection layers:

[0114] The layer index for selecting the layer is: OVERLAY_INDEX_SELECT_LAYER = 3.

[0115] The Drawable object for the selection layer is: SelectLayerDWrapper.

[0116] The purpose of the selection layer is to draw the selection layer after the user long-presses on the area of ​​a grid.

[0117] For example, Figure 9D A schematic diagram of the selection layer is shown. (For example...) Figure 9D As shown, following the layer order from bottom to top, the selection layer is located on the 4th layer, overlaying the thumbnail layer. The selection layer can include a selection control. The selection control includes a background color and a preview icon, indicating that the grid is in selection mode or preview mode. If the selection layer's boundary parameters are (0, 0, x2, y2), then the selection control is located at the top left corner of the grid. It can be understood that, depending on the usage requirements, electronic devices can also draw selection layers in other positions or areas of the grid.

[0118] For the import layer:

[0119] The layer index of the imported layer is: OVERLAY_INDEX_IMPORTED_TEXTVIEW = 4.

[0120] The Drawable object imported into the layer is: DrawableWrapper.

[0121] The purpose of the import layer is to indicate that images / videos have been imported into the album.

[0122] For example, Figure 9E A schematic diagram of the import layer is shown. (See diagram below.) Figure 9E As shown, following the layer order from bottom to top, the import layer is located at layer 5, overlaying the thumbnail layer. The import layer can include an import control. The import control includes a background color and text indicating that the image / video has been imported into the album. For example, the import layer's boundary parameters are (125, 175, 150, 50), indicating that the import control is located in the center of the grid. It's understandable that, depending on usage requirements, the electronic device can also draw the import layer in other locations.

[0123] For the multiple selection layer:

[0124] The layer index for the multiplexed layer is: OVERLAY_INDEX_CHECK_BOX = 5.

[0125] The Drawable object for the checkbox layer is: CheckBoxLayerDWrapper.

[0126] The purpose of the checkbox layer is to indicate whether the image / video has been checked in the selection mode.

[0127] For example, Figure 9F A schematic diagram of the multi-selection layer is shown. (See diagram below.) Figure 9F As shown, following the layer order from bottom to top, the checkbox layer is located on layer 6, overlaying the thumbnail layer. The import layer can include two types of controls: controls representing the unchecked state and controls representing the checked state. For example, the boundary parameters of both the unchecked and checked controls are (340, 340, x2, y2). When the user touches the control representing the unchecked state, it switches to representing the checked state. When the user touches the control representing the checked state, it switches back to representing the unchecked state. That is, the controls representing the unchecked and checked states can switch between each other to indicate the current checkbox status to the user.

[0128] For the recycling layer:

[0129] The layer index of the recycling layer is: OVERLAY_INDEX_RECYCLE_TIME_HINT = 6.

[0130] The Drawable object in the recycling layer is: DrawableWrapper.

[0131] The purpose of the recycle bin is to indicate the remaining days of images / videos in the recycle bin.

[0132] For example, Figure 9G A schematic diagram of the recycling layer is shown. (For example...) Figure 9G As shown, following the layer order from bottom to top, the recycle layer is at the top, overlaying the thumbnail layer. Selecting a layer can include a time control. This time control represents the remaining days the image / video will be in the recycle bin. For example, the time information "3 days" means the image / video will be deleted in 3 days. If the recycle layer's boundary parameters are (0, 0, 80, 40), then the time control is located in the top left corner of the grid. It's understandable that, depending on usage requirements, the electronic device can also draw the recycle layer in other locations.

[0133] The above embodiment illustrates the process by showing the layers arranged from bottom to top, sequentially covering the thumbnail layer, background animation layer, feature layer, selection layer, import layer, checkbox layer, and recycling layer. This does not limit the scope of this application. In actual implementation, the number of layers can be increased or decreased, the layer coverage order can be changed, the layer type can be changed, and the type, quantity, position, and transparency of controls included in each layer can be adjusted as needed.

[0134] After explaining the basic principle of the drawing scheme for a single ItemView based on multiple layers through the above embodiments, the following will combine... Figures 10 to 16 This section explains the specific implementation process of the drawing scheme from the perspective of functional modules.

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

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

[0137] The application layer can include a series of application packages, such as a camera app, a gallery app, a custom RecyclerView, a custom DraweeView, custom Drawables, and a custom ItemHierarchy. The camera app can use the camera to capture photos and videos and store them in the gallery app. The gallery app can manage captured photos and videos, as well as screen captures and shared images. A custom RecyclerView consists of multiple ItemViews arranged in a grid, each displaying a textured image. The custom RecyclerView can be viewed as a container for displaying images. When the user swipes up or down on the screen, the custom RecyclerView scrolls accordingly; similarly, it zooms in or out when the user zooms in or out on the photo album page. Custom Drawables are used to draw the various layers.

[0138] In one possible implementation, a custom DraweeView inherits from Fresco's SimpleDraweeview, converting each control into a Drawable object, constructing a list of Drawables, and then placing the list of Drawables into Drawee's overlay. Using Drawee's existing drawing process, the controls are drawn as individual layers.

[0139] One possible implementation avoids using Fresco's mechanism and directly inherits from AndroidView as the ItemView of the custom RecyclerView. A custom ItemHierarchy class is created, which constructs a list of Drawables, adding each control as a Drawable to the list. During drawing, each Drawable control is drawn individually.

[0140] For the specific functions of custom RecyclerView, custom DraweeView, custom Drawable, and custom ItemHierarchy, please refer to the description in the following embodiments, which will not be repeated here.

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

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

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

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

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

[0146] Based on the above Figure 10 The functional modules shown are illustrated below. Two drawing schemes based on multiple layers are provided through Embodiment 1 and Embodiment 2.

[0147] Example 1:

[0148] In Example 1, the custom DraweeView inherits from Fresco's SimpleDraweeview, converts each control into a Drawable object, constructs a list of Drawables, and then puts the list of Drawables into Drawee's overlay. Using Drawee's existing drawing process, the controls are drawn as individual layers.

[0149] Fresco designed a Drawee module responsible for image rendering. The Drawee module consists of three elements: the granted object view (DraweeView), which inherits from View and is responsible for displaying the image; the granted object hierarchy (DraweeHierarchy), which organizes and maintains the Drawable objects that are ultimately drawn and rendered; and the granted object controller (DraweeController), which is responsible for interacting with the image pipeline and provides more control over the images to be displayed.

[0150] For example, Figure 11 The class diagram of the Fresco control is shown. (For example...) Figure 11 As shown, Fresco includes the following classes: DraweeView, DraweeHolder, GalleryDraweeHierarchy, GenericDraweeHierarchy, and FadeDrawable. The specific functions of each class can be found in the related technologies described in the following embodiments, and will not be elaborated upon here.

[0151] like Figure 12 As shown, Fresco DraweeView currently includes 6 layers, from bottom to top: a background layer for displaying the background image, a placeholder layer for displaying the placeholder image, a real layer for displaying the actual image, a progress layer for displaying the progress image, a retry layer for displaying the retry image, and a failure layer for displaying the failure image.

[0152] In addition, Fresco DraweeView provides an overlay layer for extensions, also known as an extension layer.

[0153] Based on the aforementioned functionality of Fresco DraweeView, this application provides a custom DraweeView. The custom DraweeView inherits from Fresco DraweeView. The custom DraweeView is responsible for converting each view in the previous multi-view layout into a drawable object and placing it in a Drawable list, then drawing each drawable object as an overlay of DraweeView. For example... Figure 13 As shown, the custom DraweeView extends N overlays onto the background layer, placeholder layer, real layer, progress layer, retry layer, and failure layer, where N is a positive integer. Each overlay is used to draw at least one control, and different types of controls can be drawn on each overlay. The method for drawing controls on each overlay can be referenced in the above embodiment. Figures 9A to 9G The description will not be repeated here.

[0154] In some embodiments, the electronic device may set a specific drawing area for each overlay, or may control whether each overlay is drawn or not individually, or may control the transparency of each overlay individually.

[0155] based on Figure 10 and Figure 11 The functional modules shown below, in conjunction with Figure 14 This section details the specific interactions between various functional modules during the implementation of a Fresco-based scheme for drawing a single ItemView across multiple layers. The Fresco Drawee controls include: a FadeDrawable, a custom grant object view (DraweeView), a GenericDraweeHierarchy, and a grant object holder (DraweeHolder).

[0156] like Figure 14 As shown, the scheme may include the following S1 to S10.

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

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

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

[0160] S2, the touch driver receives the user's click operation on the gallery application icon and launches the gallery application via WMS.

[0161] After the Gallery app is launched, the Gallery app displays the album card page.

[0162] 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 via WMS. 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 1The card page shown in (b) is an example. Card pages provide album cards for the camera, all photos, and videos, hence they are also called album card pages.

[0163] 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 displayed, the gallery app will switch to another page.

[0164] S3, the touch driver receives the user's action of clicking on a card in the album card page, and notifies the gallery application via WMS.

[0165] S4, the gallery application initializes a custom RecyclerView.

[0166] Custom RecyclerView initialization may include initializing the layout manager and data adapter. The layout manager controls the number of columns in each tier and the size of the custom RecyclerView; the data adapter controls the loading of image data.

[0167] After the custom RecyclerView has completed initialization, the custom RecyclerView can execute S5 and S9 as follows.

[0168] S5, a custom RecyclerView notification is used to initialize a custom granted object view (DraweeView).

[0169] S6, during the initialization of the custom granted object view (DraweeView), the custom granted object view (DraweeView) constructs a list of Drawables.

[0170] The custom grant view (DraweeView) constructs a list of Drawables, which can specifically include: creating thumbnail layers, background animation layers, property layers, selection layers, import layers, checkbox layers, and recycling layers. When creating these layers, you can set the layer index, the Drawable object for each layer, and the drawing area for each layer. Refer to the above examples for a detailed description of these layers; it will not be repeated here.

[0171] It should be noted that the aforementioned thumbnail layer is one of the six layers supported by Fresco DraweeView, or it can be a composite layer of multiple layers from the six layers. The aforementioned background animation layer, feature layer, selection layer, import layer, check layer, and collect layer are the overlay layers supported by Fresco DraweeView. The above embodiment is illustrated using an electronic device with six overlay layers as an example, and it does not limit this application. In actual implementation, the number of overlay layers can be increased or decreased.

[0172] In S7, the custom grant object view (DraweeView) sends an instruction message to the generic grant object hierarchy (GenericDraweeHierarchy) to add a list of Drawables to the overlay.

[0173] For example, a custom granted object view (DraweeView) can call the setOverlays() method to instruct a list of Drawables to be added to the overlay.

[0174] After the GenericDraweeHierarchy adds the list of Drawables to the overlay, it returns a response message to the custom DraweeView indicating that the list of Drawables has been added to the overlay.

[0175] S8, Customize the grant object view (DraweeView) to notify the grant object holder (DraweeHolder) to set the hierarchy (setHierarchy).

[0176] S9, a custom RecyclerView calls the onDraw() method to draw the ItemView.

[0177] A custom RecyclerView consists of p rows and q columns of ItemViews. The layer drawing parameters for each ItemView may differ. These parameters may include: the layer index of the layer to be drawn, and the drawing object of the layer. They may also include: the transparency of the layer to be drawn, etc. It should be noted that, as described in the above embodiment regarding S6, when constructing the Drawable list composed of multiple layers, the layer index, the Drawable object of each layer, and the drawing area of ​​each layer are set. Therefore, when executing the drawing method in S9, it is not necessary to repeat the parameter settings of S6.

[0178] The above embodiment constructs a Drawable list consisting of multiple layers through S6. Depending on the application scenario, the layers drawn in different ItemViews may differ; that is, only some layers from the Drawable list need to be drawn in a single ItemView. For example, in a grid interface, some grids only draw thumbnail layers to display thumbnails of photos or videos; while other grids draw both thumbnail layers and feature layers, thereby overlaying feature icons corresponding to cloud photos, favorite photos, videos, and / or magazines onto the thumbnails. As another example, after receiving a user's click on an album card, the electronic device defaults to displaying only 3 columns of images. Therefore, the layer drawing parameters for the ItemView in the first area of ​​the custom RecyclerView can be set only. The first area includes 3 columns of images, and the content drawn in the first area is the content of the grid interface to be displayed.

[0179] Depending on the application scenario, the same layer may be drawn in different ItemViews, but the objects drawn in the same layer may differ. For example, in a grid interface, all grids may have a checkbox layer drawn, but in some grids, the checkbox layer may have a control representing the unchecked state, while in other grids, the checkbox layer may have a control representing the checked state.

[0180] S10, the FadeDrawable responds to the call of the custom RecyclerView and draws the layers of the ItemView according to the layer drawing parameters corresponding to each ItemView.

[0181] The list of Drawables includes, for example, Figure 14 Taking the seven layers shown as an example, the FadeDrawable object can call the LOOP loop instruction to iterate and draw each layer. Set the variable i = 0. Start the first loop from Layer(0), and determine whether the layer drawing parameters include the layer index of Layer(0). If the layer index of Layer(0) is included, then call the custom Drawable to draw the thumbnail layer, and then increment the variable i by 1, i.e., i = 1; if the layer index of Layer(0) is not included, then directly increment the variable i by 1, i.e., i = 1. Then, start the second loop from Layer(1)... until the seventh loop is completed, and the LOOP loop ends. Thus, the layer drawing of an ItemView is completed.

[0182] For example, the specific method by which the FadeDrawable calls the custom Drawable to draw a layer is as follows: The FadeDrawable can pass the layer index of the layer to be drawn, the drawing object of the layer to be drawn, the transparency of the layer to be drawn, the drawing position of the layer to be drawn, and the area size of the layer to be drawn to the custom Drawable. The custom Drawable completes the drawing of the layer according to these parameters.

[0183] For each ItemView in a custom RecyclerView, the LOOP method described above can be used to complete the layer drawing of each ItemView. After completing the layer drawing of all ItemViews in the custom RecyclerView, it is equivalent to completing the drawing of a grid interface. Electronic devices can display this grid interface, allowing the user to see, for example,... Figure 1 The grid interface shown in (c) is shown in the image.

[0184] It should be noted that, Figure 14 This explanation uses the scenario of displaying the first grid of the album in response to a user's click on an album card as an example, and does not limit the scope of this application. It is understood that after displaying the first grid of the album, the user can perform single-finger swipes, two-finger zooms, or perform any possible operations such as deleting, sharing, selecting, or previewing certain thumbnails in the grid. In these cases, the electronic device may need to redraw the grid to update the album's grid interface. The specific implementation of the electronic device redrawing the grid can be found in embodiments S9 to S10 above, and will not be repeated here.

[0185] In the above solution, the custom DraweeView inherits from Fresco's SimpleDraweeview. Each control is converted into a Drawable object, a list of Drawables is constructed, and then this list is placed into Drawee's overlay. Leveraging Drawee's existing drawing process, the controls are drawn as individual layers. This process is equivalent to drawing each control as a separate overlay for a single ItemView. Experimental data shows that compared to drawing a single ItemView using a multi-view layout, using Fresco's multi-layer approach for drawing a single ItemView can shorten the inflate time of a single ItemView, thereby reducing the overall layout time of the grid interface and allowing for faster drawing of the grid interface.

[0186] Example 2:

[0187] In Example 2, without using Fresco's mechanism, the Android View is directly inherited as the ItemView of the custom RecyclerView. This example uses a custom ItemHierarchy class, which constructs a list of Drawables, placing each control as a Drawable in the list. During drawing, each Drawable control is drawn individually.

[0188] Android View is the base class for all controls in Android. It's an abstraction of UI controls, representing a single control. For example... Figure 8 The "control" shown is a typical Android View. An Android View is a hierarchical structure consisting of layers, where a parent View can contain child Views, and a child View can contain child Views.

[0189] For example, Figure 15 This shows a class diagram of an Android View. (Example:) Figure 15 As shown, DraweeView inherits from Android View, Drawble inherits from DraweeView, ItemHierarchy inherits from Drawble, and the background animation layer (AnimationBgDWrapper), feature layer (SpecialFeatureLayerDWrapper), selection layer (SelectLayerDWrapper), and checkbox layer (CheckBoxLayerDWrapper) inherit from ItemHierarchy. The specific functions of each class can be found in the related technologies of the following embodiments, and will not be elaborated upon here.

[0190] based on Figure 10 The functional modules shown below, in conjunction with Figure 16 This section provides a detailed explanation of the specific interactions between various functional modules during the implementation of a scheme that uses multiple layers of Android View to draw a single ItemView.

[0191] like Figure 16 As shown, the scheme may include the following steps S11 to S19.

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

[0193] S12, the touch driver receives the user's click operation on the gallery application icon and launches the gallery application via WMS.

[0194] After the Gallery app is launched, the Gallery app displays the album card page.

[0195] S13, the touch driver receives the user's action of clicking on a card in the album card page, and notifies the gallery application via WMS.

[0196] S14, the gallery application initializes a custom RecyclerView.

[0197] Custom RecyclerView initialization may include initializing the layout manager and data adapter. The layout manager controls the number of columns in each tier and the size of the custom RecyclerView, while the data adapter controls the loading of image data.

[0198] For the specific implementation of S11 to S14, please refer to the description of S1 to S4 in the above embodiments, which will not be repeated here.

[0199] After initialization is complete, a custom RecyclerView can execute steps S15, S16, and S17 as follows.

[0200] S15, Custom RecyclerView Notification: Custom DraweeView Initialization.

[0201] Custom DraweeView initialization can specifically include: initialization listener callback methods. These listener callback methods are used to monitor whether a user touches a specific layer, such as a long press or a tap.

[0202] S16, Custom RecyclerView notification for custom ItemHierarchy initialization.

[0203] During the initialization of a custom ItemHierarchy, the custom ItemHierarchy constructs a list of Drawables.

[0204] The custom ItemHierarchy for constructing a Drawable list can specifically include: creating thumbnail layers, background animation layers, property layers, selection layers, import layers, checkbox layers, and recycling layers. When creating these layers, you can set the layer index, the Drawable object for each layer, and the drawing area for each layer. Refer to the above examples for a detailed description of these layers; it will not be repeated here.

[0205] Thus, the custom ItemHierarchy contains a list of controls that exist in the form of multiple Drawables.

[0206] It should be noted that this application does not impose specific restrictions on the execution order of S15 and S16. For example, they can be executed simultaneously, or S15 can be executed first and then S16, or S16 can be executed first and then S15.

[0207] S17, Custom RecyclerView notification, Custom DraweeView drawing layers.

[0208] S18, the custom DraweeView calls the onDraw() method to draw the ItemView.

[0209] A custom RecyclerView consists of p rows and q columns of ItemViews. The layer drawing parameters for each ItemView may differ. These parameters may include: the layer index of the layer to be drawn, and the drawing object of the layer. They may also include: the transparency of the layer to be drawn, etc. It should be noted that, as described in the above embodiment regarding S16, when constructing a list of Drawables consisting of multiple layers, the layer index, the Drawable object of each layer, the drawing position of each layer, and the area size of each layer are set. Therefore, when executing the drawing method in S18, it is not necessary to repeat the parameter settings of S16.

[0210] The above embodiment constructs a Drawable list consisting of multiple layers through S16. Depending on the application scenario, the layers drawn in different ItemViews may differ; that is, only some layers from the Drawable list need to be drawn in a single ItemView. For example, in a grid interface, some grids only draw thumbnail layers to display thumbnails of photos or videos; while other grids draw both thumbnail layers and feature layers, thereby overlaying feature icons corresponding to cloud photos, favorite photos, videos, and / or magazines onto the thumbnails. Depending on the application scenario, the same layers may be drawn in different ItemViews, but the objects drawn within those same layers may differ. In this case, the drawing objects for the layers to be drawn need to be specified in the layer drawing parameters. For example, in a grid interface, all grids draw checkboxes, but the drawing objects for the checkboxes of some grids represent controls in an unchecked state, while the drawing objects for the checkboxes of other grids represent controls in a checked state.

[0211] S19, the custom ItemHierarchy responds to the call of the custom DraweeView, and draws the layers of the ItemView according to the layer drawing parameters corresponding to each ItemView based on the already constructed list of Drawables.

[0212] For the specific implementation of S19, please refer to the description of S10 in the above embodiment, which will not be repeated here.

[0213] After drawing all the item views of the custom RecyclerView, a grid view frame is essentially complete. Electronic devices can then display this grid view, allowing the user to see, for example,... Figure 1 The grid interface shown in (c) is shown in the image.

[0214] It should be noted that, Figure 16 This explanation uses the scenario of displaying the first grid of the album in response to a user's click on an album card as an example, and does not limit the scope of this application. It is understood that after displaying the first grid of the album, the user can perform single-finger swipes, two-finger zooms, or perform any possible operations such as deleting, sharing, selecting, or previewing certain thumbnails in the grid. In these cases, the electronic device may need to redraw the grid to update the album's grid. The specific implementation of the electronic device redrawing the grid can be found in the descriptions of embodiments S17 to S19 above, and will not be repeated here.

[0215] In the above solution, Fresco's mechanism is not used; instead, Android View is directly inherited as the ItemView of the custom RecyclerView. This embodiment uses a custom ItemHierarchy class. Within the custom ItemHierarchy, a list of Drawables is constructed, and each control is added to the list as a Drawable. During drawing, each Drawable control is drawn separately. This process is equivalent to drawing each control as an overlay of a single ItemView. Experimental data shows that compared to drawing a single ItemView using a multi-view layout, using multiple layers of AndroidView to draw a single ItemView can shorten the inflate time of a single ItemView, thereby shortening the layout time of the entire grid interface and allowing the grid interface to be drawn quickly.

[0216] The above embodiments one and two describe two drawing schemes for a single ItemView based on multiple layers. After displaying the grid interface including controls, the user can also perform touch operations on the controls.

[0217] The following example uses an electronic device to implement a single ItemView drawing scheme based on multiple layers of Android View, combined with... Figure 17This document provides an example illustrating the specific process by which an electronic device handles touch events on controls.

[0218] like Figure 17 As shown, after S11 to S19 above, the scheme may also include S20 to S27 below.

[0219] S20, the touch driver continues to sample the user's touch operations according to period T.

[0220] S21, the touch driver receives the user's touch operation on a single ItemView in the grid interface and notifies the custom RecyclerView via WMS.

[0221] S22, the custom RecyclerView calls the onTouchEvent() method to notify the custom DraweeView of touch events.

[0222] The onTouchEvent() method carries the touch coordinates (posx,posy).

[0223] S23, Customize DraweeView to store touch coordinates (posx,posy).

[0224] S24, Custom DraweeView method to trigger touch events.

[0225] S25, Custom DraweeView trigger listener callback method.

[0226] Based on the description of S15 in the above embodiments, before the user enters the grid interface through clicking on an album card, the custom DraweeView first initializes its listener callback method. Taking a click event as an example, after the user touches a single ItemView in the grid interface, a DraweeView method is defined to trigger the click event. This method calls and executes the click event performClick(), which triggers the listener callback method. This listener callback method is used to listen for whether a user touch event occurs on a certain layer, such as a long press or a click.

[0227] S26, the custom ItemHierarchy responds to the call of the custom DraweeView, and determines which layer is touched based on the touch coordinates (posx,posy).

[0228] A custom RecyclerView consists of p rows and q columns of ItemViews. The location of each ItemView within the custom RecyclerView may differ. It is listed as a Drawable list, such as... Figure 16Taking the seven layers shown as an example, a custom ItemHierarchy can first determine which ItemView's area the touch coordinates (posx,posy) are located in, i.e., determine which grid the user has interacted with, and then call the LOOP instruction to iterate through the seven layers corresponding to that ItemView in sequence.

[0229] Generally, touch responses from upper-level layers have higher priority than those from lower-level layers. Therefore, a custom ItemHierarchy can iterate through each layer corresponding to the ItemView in descending order. If the touch coordinates fall within the drawing area of ​​a certain layer, the entire loop ends, and the touch event is reported to the custom DraweeView.

[0230] As one implementation method, set the variable i = 6. Start executing the first loop from Layer(6), call the custom Drawable to determine whether the recycled layer is in the display state and whether the touch coordinates (posx,posy) are within the drawing area of ​​the recycled layer.

[0231] If the recycling layer is in the display state and the touch coordinates (posx,posy) are within the drawing area of ​​the recycling layer, then the custom Drawable returns "YES" to the custom ItemHierarchy, the custom ItemHierarchy ends the entire LOOP loop, and reports the touch event to the custom DraweeView.

[0232] If the recycled layer is not in the display state, or the touch coordinates (posx,posy) are not within the drawing area of ​​the recycled layer, then the custom Drawable returns "NO" to the custom ItemHierarchy, and the custom ItemHierarchy decrements the variable i by 1, i.e., i = 5. The second loop is executed starting from Layer(5), and the custom Drawable is called to repeat the above steps.

[0233] It's understandable that during the process of traversing each layer from top to bottom: if any layer is in the display state and the touch coordinates (posx,posy) are within the drawing area of ​​this layer, then the entire LOOP loop can be exited, and the touch event can be reported to the custom DraweeView; if the previous layer is not in the display state, or the touch coordinates (posx,posy) are not within the drawing area of ​​the recycled layer, then the variable i is decremented by 1, and the next loop continues until the entire LOOP loop ends.

[0234] It's important to note that "in display state" as mentioned above means that the electronic device not only created a layer but also drew that layer in the current grid interface. If the electronic device creates a layer but doesn't draw it in the current grid interface, it can be understood as "not in display state." It's understandable that if a layer is "not in display state," then that layer will inevitably be unable to respond to user touch operations.

[0235] S27, a custom DraweeView performs the corresponding handling operation for the touch event.

[0236] Although the seven layers include various controls, some controls only provide informational notifications and do not respond to user actions. For example, the "Favorites" control in the Properties layer only notifies the user that a photo / video has been favorited; the "Import" control in the Import layer only notifies the user that an image / video has been imported into the album; and the "Time" control in the Recycle Bin layer only indicates the number of days remaining for the image / video in the Recycle Bin. On the other hand, other controls not only provide informational notifications but also respond to user actions. For instance, the "Selection" control in the Selection layer allows users to jump to a larger image, and the "Checkbox" control in the Checkbox layer allows users to check or decheck photos / videos.

[0237] Based on this, the custom DraweeView's handling operations corresponding to touch events can be divided into three types:

[0238] ① If the touch event is an operation on a checkbox layer of a grid in selection mode, then in selection mode, change the display form of the checkbox control in the checkbox layer to indicate that photos / videos are checked, or to deselect photos / videos.

[0239] For example, Figure 18 This diagram illustrates a scenario where multiple photos are selected in selection mode.

[0240] like Figure 18 As shown in (a), the grid interface is in normal mode. The electronic device can draw relevant feature icons / controls based on the various business statuses of photos and videos. For example, a favorites control is drawn in the upper right corner of the grid in the second row and second column, a cloud control is drawn in the lower right corner of the grid in the second row and second column, and a video duration control is drawn in the lower right corner of the grid in the third row and first column. Users can long-press on a grid, such as long-pressing grid 18 in the fifth row and third column.

[0241] In response to the user's long press on grid 18 in the fifth row and third column, the grid interface switches from normal mode to selection mode. For example... Figure 18As shown in (b), in selection mode, a selection control 19 is drawn in the upper left corner of each cell to indicate that the image is selectable; a checkbox is drawn in the lower right corner of each cell. The checkboxes include two types: a control 20 representing an unselected state and a control 21 representing a selected state. For example, the lower right corner of cell 18 in the fifth row and third column is drawn with a control 21 representing a selected state.

[0242] When a user touches control 20, which represents the unselected state, control 20 switches to control 21, which represents the selected state. Conversely, when a user touches control 21, which represents the selected state, control 21 switches back to control 20, which represents the unselected state. In other words, control 20 (representing the unselected state) and control 21 (representing the selected state) can switch between each other to indicate the current selection status to the user. For example, ... Figure 18 As shown in (c), the user can click control 20 in the second row, first column, which represents the unselected state. Figure 18 As shown in (d) in the diagram, control 20, representing the unselected state, in the second row and first column, is switched to control 21, representing the selected state. This allows users to select multiple images / videos in selection mode and perform unified operations on these images, such as deletion or one-click streaming.

[0243] It's understandable, from such Figure 18 The grid interface shown in (a) is as follows: Figure 18 As shown in (d) above, whenever a user touches the grid interface, the electronic device will trigger the corresponding processing operation for the touch event, such as updating the control type in the grid interface.

[0244] ② If the touch event is an operation on the selection layer of a certain grid in selection mode, then the large image corresponding to the thumbnail of this grid will be displayed in selection mode, that is, the original image or video that has not been compressed.

[0245] For example, Figure 19 This diagram illustrates a scenario where a larger image is displayed in selection mode.

[0246] like Figure 19 As shown in (a), the grid interface is in normal mode. The electronic device can draw relevant feature icons / controls according to the various business statuses of photos and videos. Users can long-press on a grid, such as long-pressing on grid 18 in the fifth row and third column.

[0247] In response to the user's long press on grid 18 in the fifth row and third column, the grid interface switches from normal mode to selection mode. For example... Figure 19As shown in (b), in selection mode, a selection control 19 is drawn in the upper left corner of each cell to indicate that the image is selectable; a checkbox is drawn in the lower right corner of each cell. The checkboxes include two types: a control 20 representing an unselected state and a control 21 representing a selected state. For example, the lower right corner of cell 18 in the fifth row and third column is drawn with a control 21 representing a selected state.

[0248] In selection mode, users can manipulate the selection controls of a specific grid. For example... Figure 19 As shown in (c), the user can click the selection control 19 in the second row and first column. Figure 19 As shown in (d) above, in selection mode, the electronic device jumps from the grid interface to a large image page. The large image page displays the original image or video corresponding to the thumbnail in the second row, first column.

[0249] It's understandable, from such Figure 19 The grid interface shown in (a) is as follows: Figure 19 As shown in (d) above, whenever a user touches the grid interface, the electronic device will trigger the corresponding processing operation for the touch event, such as updating the control type in the grid interface or jumping to the larger image.

[0250] ③ If the touch event is an operation on a grid cell excluding the check and selection layers in normal mode, then the large image corresponding to the thumbnail of that grid cell will be displayed in normal mode, i.e., the original image or video that has not been compressed.

[0251] For example, Figure 20 This diagram illustrates a scenario where the view jumps to a larger image in normal mode.

[0252] like Figure 20 As shown in (a), the grid interface is in normal mode. The electronic device can draw relevant feature icons / controls based on the various business states of photos and videos. In normal mode, the user can long-press a grid, such as long-pressing grid 22 in the second row and first column. In response to this long-press operation, as shown... Figure 20 As shown in (b), in normal mode, the electronic device jumps from the grid interface to a large image page. The large image page displays the original image or video corresponding to the thumbnail in the second row, first column.

[0253] Understandably, in normal mode, since no checkboxes or selection layers are drawn in each grid, when a user taps or long-presses a grid, the electronic device will automatically resize the image. Of course, resizing the image is one possible implementation; the electronic device could also respond to other actions and execute other types of default operations.

[0254] It should be noted that the above Figure 17 This paper uses an electronic device employing a multi-layered Android View-based approach to render a single ItemView as an example to illustrate the specific process of handling touch events on controls. It does not limit the scope of this application. It can be understood that when an electronic device uses a multi-layered Fresco-based approach to render a single ItemView, the electronic device can... Figure 17 The functional modules in [the text] have been changed to [the text]. Figure 14 Functional modules, and based on Figure 14 and Figure 12 For handling touch events of controls, please refer to the relevant descriptions in the above embodiments, which will not be repeated here.

[0255] In the above scheme, after the electronic device displays a grid interface including controls, if the user touches a control, the electronic device can determine whether the user has touched the layer based on whether a layer is in the display state and whether the touch coordinates (posx,posy) are within the drawing area of ​​the layer, and thus determine how to respond to the touch event.

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

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

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

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

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

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

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

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

[0264] The electronic devices, computer-readable storage media, and computer program products provided in the embodiments of this application are all used to execute the methods provided in the above embodiments. Therefore, the beneficial effects they can achieve can be referred to the beneficial effects corresponding to the methods provided above, and will not be repeated here.

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

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

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

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

Claims

1. A method for drawing controls based on a grid interface, characterized in that, The method includes: Receive the user's first action on the album card; In response to the first operation, based on the list of drawing objects, each layer to be drawn in each table view is drawn according to the layer drawing parameters corresponding to each table view in the first area of ​​the recycler view, and the first grid interface is displayed based on the drawing content of the first area. Receive the user's second operation on the first grid in the first grid interface; In response to the second operation, based on the touch coordinates of the second operation, the layer that was touched in the first grid is determined, and the processing operation corresponding to the drawing object of the touched layer is executed; The drawing object list includes N layers that are sequentially covered, as well as the layer index, drawing object, and drawing area of ​​each of the N layers; the layer to be drawn in a table view is one of the N layers; the layer drawing parameters include the layer index and drawing object of each layer to be drawn, each drawing object represents a control, and the grid of the first grid interface includes controls; N is an integer greater than or equal to 2.

2. The method according to claim 1, characterized in that, Before drawing each layer to be drawn for each table entry view according to the layer drawing parameters corresponding to each table entry view in the first region of the recycler view based on the list of drawing objects, the method further includes: Create the list of drawing objects and set initialization parameters for each layer in the list of drawing objects. The initialization parameters include the layer index, the drawing object, and the drawing area.

3. The method according to claim 2, characterized in that, Creating the list of drawing objects includes: The list of drawing objects can be created by a custom grant object view that inherits from the Fresco image library; or, the list of drawing objects can be created by a custom project hierarchy that inherits from an Android view.

4. The method according to claim 1, characterized in that, The N layers, arranged from bottom to top, are, in order: thumbnail layer, background animation layer, feature layer, selection layer, import layer, check layer, and recycling layer. The thumbnail layer is drawn as a thumbnail of a photo or video; the background animation layer is drawn as a background animation; the feature layer is drawn as a feature icon corresponding to the business status of the photo or video; the selection layer is drawn as a selection control; the import layer is drawn as an import control; the checkbox layer is drawn as a checkbox control; and the recycle layer is drawn as a time control.

5. The method according to claim 1, characterized in that, The step of drawing each layer to be drawn for each table entry view based on the list of drawing objects, according to the layer drawing parameters corresponding to each table entry view in the first area of ​​the recycler view, includes: Based on the list of drawing objects, a custom drawing object is called through the Fresco image library, and each layer to be drawn in each table entry view is drawn according to the layer drawing parameters corresponding to each table entry view in the first area of ​​the recycler view; or... Based on the list of drawing objects, a custom drawing object is called through a custom project hierarchy, and each layer to be drawn in each table item view is drawn according to the layer drawing parameters corresponding to each table item view in the first area of ​​the recycler view.

6. The method according to any one of claims 1 to 5, characterized in that, The determination of the touched layer in the first grid based on the touch coordinates of the second operation includes: The N layers corresponding to the first grid are traversed sequentially from top to bottom. If the layer drawn in the first grid includes the first layer, and the touch coordinates of the second operation are within the drawing area of ​​the first layer, then the first layer is determined as the touched layer, and the traversal of the layers ends.

7. The method according to claim 6, characterized in that, The processing operation corresponding to the drawing object of the touched layer includes: If the first layer is a checkbox layer, then change the display format of the checkbox controls in the checkbox layer; or, If the first layer is a selected layer, the original image or video corresponding to the thumbnail of the first grid is displayed.

8. The method according to any one of claims 1 to 5, characterized in that, After displaying the first grid interface based on the drawing content of the first region, the method further includes: Receive a third operation from the user on the first grid interface, wherein the third operation is a swipe operation or a zoom operation; In response to the third operation, each table view is drawn according to the layer drawing parameters corresponding to each table view in the second region of the recycler view, and a second grid interface is displayed based on the drawing content of the second region, wherein the table views contained in the first region and the second region are different, and the content of the first grid interface and the second grid interface are different.

9. The method according to any one of claims 1 to 5, characterized in that, Before drawing layers for each table entry view according to the layer drawing parameters corresponding to each table entry view in the first region of the recycler view, the method further includes: The recycle bin view is initialized, which includes a table view with p rows and q columns, and the size of the recycle bin view is greater than or equal to the size of the display screen.

10. The method according to any one of claims 1 to 5, characterized in that, The layer drawing parameters also include the transparency of the layer to be drawn.

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

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

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

Images