Scrolling display method, device, chip system, and storage medium

Abstract

The embodiments of the present application relate to the technical field of terminals. Provided are a scrolling display method, a device, a chip system, and a storage medium. In the present application, when a user's finger swipes up and down in an image gallery, RecyclerView may also scroll in the same direction as the swipe direction of the single finger. When the RecyclerView scrolls to the top or bottom, an electronic device moves the entire RecyclerView in the opposite direction to the swipe direction of the single finger, and the RecyclerView is re-filled with content. In this way, an electronic device only needs to fill the moved RecyclerView with content, and does not need to re-measure the size of each ItemView of RecyclerView or re-calculate the position thereof, such that a data processing flow is optimized, so as to shorten the data processing time when images are scrolling in an image gallery, thereby solving the frame-drop problem that occurs when the image gallery is scrolled up and down.

Description

Scrolling display method, device, chip system and storage medium

[0001] This application claims priority to the Chinese patent application filed with the State Intellectual Property Office on December 29, 2023, with application number 202311873935.6 and application name “Scrolling display method, device, chip system and storage medium”, the entire contents of which are incorporated by reference into this application. Technical Field

[0002] The present application relates to the field of terminal technology, and in particular to a scrolling display method, device, chip system and storage medium. Background Art

[0003] With the rapid development of terminal technology, mobile phone storage space is increasing. Users can use their phones to take large numbers of photos and videos and store them in the phone's gallery. When the gallery is full of photos and videos, the phone screen may not be able to display all of them at the same time.

[0004] Related technologies have proposed an image scrolling solution based on a RecyclerView. When the user scrolls up or down in the gallery, the RecyclerView also scrolls up and down. When scrolling to the top or bottom of the RecyclerView, the size and position of each item view in the RecyclerView must be remeasured. This process is time-consuming and can cause frame drops when scrolling.

[0005] Summary of the Invention

[0006] The present application provides a scrolling display method, device, chip system and storage medium for solving the problem of frame drop when scrolling images in a gallery.

[0007] To achieve the above objectives, this application adopts the following technical solutions:

[0008] In a first aspect, an embodiment of the present application provides a scrolling display method. The method is applied to an electronic device having a display screen, and the method includes:

[0009] Displaying first content based on RecyclerView on a display screen, where the size of RecyclerView is larger than the size of the display screen, the distance from the bottom edge of the display screen to the bottom edge of RecyclerView is a first distance, and the edge of RecyclerView is outside the display screen. Receive a first operation of a user sliding a second distance along a first direction on the display screen, where the first direction is from the bottom edge of the display screen to the top edge of the display screen, and the second distance is greater than the first distance. In response to the first operation, move RecyclerView along the second direction by a third distance, and display second content based on RecyclerView on the display screen, where the second direction is opposite to the first direction, and the third distance is greater than or equal to the difference between the second distance and the first distance.

[0010] In the above solution, when the user's finger slides upward on the display screen for a second distance, if the RecyclerView is moved in the direction of the single-finger sliding by the second distance, then because the second distance is greater than the distance between the bottom edge of the display screen and the bottom edge of the RecyclerView, the bottom edge of the RecyclerView will move into the display screen. By scrolling the RecyclerView in the opposite direction of the single-finger sliding direction, a blank display area between the bottom edge of the RecyclerView and the bottom edge of the display screen can be avoided. Since this process does not require re-measuring the size and position of each table item view in the RecyclerView, it shortens data processing time and solves the frame drop problem.

[0011] In one possible implementation, the above-mentioned RecyclerView is a custom RecyclerView. The custom RecyclerView consists of multiple item views (ItemView) in a grid format, each ItemView corresponds to an image view (ImageView), and each ImageView is used to display an image. The custom RecyclerView can be regarded as a container for displaying images. As an example, when the user zooms in or out in the gallery interface, the custom RecyclerView will zoom in or out accordingly. As another example, when the user swipes up or down with one finger, the custom RecyclerView control can control the custom RecyclerView to scroll in the same direction as the one-finger swipe direction. When scrolling to the top or bottom of the custom RecyclerView, the custom RecyclerView control moves the entire custom RecyclerView in the opposite direction of the one-finger swipe direction and refills the content in the custom RecyclerView.

[0012] For example, a custom RecyclerView involves two sizes:

[0013] One is the original size of the custom RecyclerView, which is the initial size. Regardless of how many columns of images the custom RecyclerView's display area contains, the original size of the custom RecyclerView remains unchanged. For example, when the display size is 1200 pixels wide by 2800 pixels high, the original size of the custom RecyclerView is 8400 pixels wide by 20000 pixels high, and the original size of each ItemView in the custom RecyclerView is 400 pixels wide by 400 pixels high.

[0014] The other is the actual display size of the custom RecyclerView. Since the number of ItemView columns displayed on the display screen is different when the display area of ​​the custom RecyclerView includes different numbers of columns, it is necessary to multiply the original size of the custom RecyclerView by a zoom factor (zoom factor is less than or equal to 1.0) to obtain a reduced display size, and then send the reduced custom RecyclerView to the display screen. For example, the current gear is N, the minimum gear is M, and the original size of the custom RecyclerView is (x, y), then the display size of the custom RecyclerView at the current gear is (x*M / N, y*M / N). Among them, x represents the original width of the custom RecyclerView, y represents the original height of the custom RecyclerView, and M / N represents the zoom factor.

[0015] In one possible implementation, a custom RecyclerView has two indexes: one is the actual layout position index, which indicates the position of the grid in the custom RecyclerView; the other is the actual adaptation position index, which indicates the number of the image displayed in the grid of the custom RecyclerView. Unlike the native logic of the Android system, where the layout position index cannot be customized, a custom RecyclerView can change the actual layout position index and the actual adaptation position index based on the zoom magnification, zoom center, and scrolling operations. During the zooming process, the actual adaptation position index of the ItemView corresponding to the center of the two fingers remains unchanged, but the actual adaptation position indexes of other ItemViews may be renumbered, resulting in the actual adaptation position index of the entire custom RecyclerView not necessarily being continuous.

[0016] In one possible implementation, a RecyclerView may include M rows and N columns of ItemViews, each of which includes an ImageView, and each ImageView is used to display an image or a table. Accordingly, the first content is a first grid interface, the second content is a second grid interface, and the first and second grid interfaces have the same number of image columns; or, the first content is a first list interface, the second content is a second list interface, and the first and second lists have the same number of table columns.

[0017] In one possible implementation, an ItemView of the recycler view is used to display images in an album. Before moving the RecyclerView along the second direction by a third distance, the method may further include: determining the third distance based on a bottom edge of the RecyclerView, a bottom edge of the display screen, the second distance, and a side length of an item view in the RecyclerView.

[0018] In one possible implementation, before the RecyclerView is moved in response to the first operation, and after the RecyclerView is moved in response to the first operation, the last row of images in the RecyclerView cannot include the last image in the album. Taking the first content as the first grid interface as an example, before displaying the second content based on the RecyclerView on the display screen, the method may further include: subtracting the first value from the actual adaptation position index AP value corresponding to each table item view in the RecyclerView. The AP value is used to represent the number of images displayed in the table item view, and the first value is determined based on the bottom edge of the RecyclerView, the bottom edge of the display screen, the second distance, the side length of the table item view in the RecyclerView, and the number of columns of the first grid interface.

[0019] In the above solution, the electronic device first moves the custom RecyclerView downward, and then adds the first difference value to the actual adaptation position index corresponding to the ItemView of the custom RecyclerView, so that the user visually sees that the position of each image on the display screen remains unchanged.

[0020] In one possible implementation, the distance from the bottom edge of the display screen to the bottom edge of the RecyclerView is a fourth distance, and the edge of the RecyclerView is outside the display screen. The method may further include: receiving a second operation of the user sliding a fifth distance along the first direction on the display screen, where the fifth distance is greater than the fourth distance; in response to the second operation, moving the RecyclerView along the first direction by a sixth distance, and displaying third content based on the RecyclerView within the display screen, where the sixth distance is equal to the difference between the second distance and the first distance, and the distance from the bottom edge of the display screen to the bottom edge of the RecyclerView is 0. Before moving the RecyclerView in response to the second operation, and after moving the RecyclerView in response to the second operation, the last row of images in the RecyclerView may include the last image in the album.

[0021] In the above solution, the last row of the custom RecyclerView is the last row of the album. When the user slides the finger upward on the display screen for the fifth distance, if the bottom edge of the RecyclerView moves into the display screen, the RecyclerView can be scrolled down to align the bottom edge of the RecyclerView with the bottom edge of the display screen to ensure that the last few images in the album can be fully displayed.

[0022] In one possible implementation, the distance from the bottom edge of the display screen to the bottom edge of the RecyclerView is the seventh distance, and the edge of the RecyclerView is outside the display screen. The method may further include: receiving a third operation of the user sliding the display screen along the first direction by an eighth distance, the eighth distance being greater than the seventh distance; in response to the third operation, moving the RecyclerView along the first direction by a ninth distance, and displaying fourth content based on the RecyclerView within the display screen, the ninth distance being less than the difference between the eighth distance and the seventh distance, and the distance from the bottom edge of the display screen to the bottom edge of the RecyclerView being 0. Before moving the RecyclerView in response to the third operation, the last row of images in the RecyclerView cannot include the last image in the album; after moving the RecyclerView in response to the third operation, the last row of images in the RecyclerView may include the last image in the album.

[0023] Illustratively, before moving the RecyclerView along the first direction by a sixth distance, the method may further include: determining the sixth distance based on the LP value of the last item view in the RecyclerView, the LP value of the last image in the album, the side length of the item view in the RecyclerView, and the number of columns in the RecyclerView. The LP value is used to indicate the position of the item view in the RecyclerView.

[0024] In the above solution, the last row of the custom RecyclerView is the last few rows of the album (excluding the last row). When the user quickly slides their finger upward on the display screen, if the bottom edge of the RecyclerView moves into the display screen, the RecyclerView can be scrolled down to align the bottom edge of the RecyclerView with the bottom edge of the display screen, and the last row of images in the RecyclerView is refreshed to the last few images in the album.

[0025] In one possible implementation, the distance from the top edge of the display screen to the top edge of the RecyclerView is the tenth distance, and the edge of the RecyclerView is outside the display screen. The method may further include: receiving a fourth operation of the user sliding the eleventh distance along the second direction on the display screen, the eleventh distance being greater than the tenth distance; in response to the fourth operation, moving the RecyclerView along the first direction by a twelfth distance, and displaying the fifth content based on the RecyclerView within the display screen, the twelfth distance being greater than or equal to the difference between the eleventh distance and the tenth distance. Before moving the RecyclerView in response to the fourth operation, and after moving the RecyclerView in response to the fourth operation, the first row of images in the RecyclerView cannot include the first image of the album.

[0026] Exemplarily, before moving the RecyclerView along the first direction by a twelfth distance, the method may further include: determining a twelfth distance based on the top edge of the RecyclerView, the top edge of the display screen, the eleventh distance, and the side length of the item view in the RecyclerView.

[0027] In the above solution, when the user swipes downward on the display, if the RecyclerView is moved in the direction of the single-finger swipe, the top edge of the RecyclerView may move into the display. By scrolling the RecyclerView in the opposite direction of the single-finger swipe, the display area between the top edge of the RecyclerView and the top edge of the display can be avoided. Because this process does not require re-measuring the size and position of each item view in the RecyclerView, it shortens data processing time and solves the frame drop problem.

[0028] In one possible implementation, the fifth content is a third grid interface. Before displaying the second content based on RecyclerView on the display screen, the method may further include: subtracting a second value from the actual adaptation position index AP value corresponding to each table item view in RecyclerView. The AP value is used to represent the number of the image displayed in the table item view, and the second value is determined based on the top edge of RecyclerView, the top edge of the display screen, the eleventh distance, the side length of the table item view in RecyclerView, and the number of columns of the third grid interface.

[0029] In the above solution, the electronic device first moves the custom RecyclerView upward, and then subtracts the second difference value from the actual adaptation position index corresponding to the ItemView of the custom RecyclerView, so that the user visually sees that the position of each image on the display remains unchanged.

[0030] In one possible implementation, the distance from the top edge of the display screen to the top edge of the RecyclerView is the thirteenth distance, and the edge of the RecyclerView is outside the display screen. The method may further include: receiving a fifth operation in which the user slides the display screen along the second direction by a fourteenth distance, the fourteenth distance being greater than the thirteenth distance; in response to the fifth operation, moving the RecyclerView along the second direction by a fifteenth distance, and displaying the sixth content based on the RecyclerView within the display screen, the fifteenth distance being equal to the difference between the fourteenth distance and the thirteenth distance, and the distance from the top edge of the display screen to the top edge of the RecyclerView is 0. Before moving the RecyclerView in response to the fifth operation, and after moving the RecyclerView in response to the fifth operation, the first row of images in the RecyclerView may include the first image in the album.

[0031] In the above solution, the first row of the custom RecyclerView is the first row of the album. When the user slides down on the display, if the top edge of the RecyclerView moves into the display, the RecyclerView can be scrolled up to align the top edge of the RecyclerView with the top edge of the display, ensuring that the first row of images in the album can be fully displayed.

[0032] In one possible implementation, the distance from the top edge of the display screen to the top edge of the RecyclerView is the sixteenth distance, and the edge of the RecyclerView is outside the display screen. The method may further include: receiving a sixth operation in which the user slides the display screen along the second direction by a seventeenth distance, the seventeenth distance being greater than the sixteenth distance; in response to the sixth operation, moving the RecyclerView along the second direction by an eighteenth distance, and displaying the seventh content based on the RecyclerView on the display screen, the eighteenth distance being less than the difference between the seventeenth distance and the sixteenth distance, and the distance from the top edge of the display screen to the top edge of the RecyclerView is 0. Before moving the RecyclerView in response to the sixth operation, the first row of images in the RecyclerView cannot include the first image in the album; after moving the RecyclerView in response to the sixth operation, the first row of images in the RecyclerView may include the first image in the album.

[0033] Exemplarily, before moving the RecyclerView the eighteenth distance along the second direction, the method may further include: determining the eighteenth distance based on the actual layout position LP value of the first table item view of the RecyclerView, the LP value of the first image in the album, the side length of the table item view in the RecyclerView, and the number of columns of the RecyclerView; wherein the LP value is used to indicate the position of the table item view in the RecyclerView.

[0034] In the above solution, the first row of the custom RecyclerView is the first few rows of the album (excluding the first row). When the user quickly slides their finger downward on the display screen, if the top edge of the RecyclerView moves into the display screen, the RecyclerView can be scrolled up to align the top edge of the RecyclerView with the top edge of the display screen, and the first row of images in the RecyclerView is refreshed to the first row of images in the album.

[0035] In one possible implementation, the custom RecyclerView can determine the size of the actual layout position index value LP1 of the first ItemView and the minimum value of the actual layout position index LPmin=0 to determine whether the actual layout position index value LP1 points to the first image of the album. If LP1>LPmin, it can be determined that the actual layout position index value LP1 has not yet pointed to the first image of the album and has not yet slid to the first row of the album. The top ItemView of the custom RecyclerView can also be updated with more images with smaller actual AP values, so there is no need to align the top of the custom RecyclerView with the top of the display.

[0036] In one possible implementation, the distance from the left edge of the display screen to the left edge of the recycler view is a nineteenth distance, and the edge of the recycler view is outside the display screen. The method further includes: receiving a seventh operation of the user sliding on the display screen by a twentieth distance along a third direction, where the third direction is a direction from the left edge of the display screen to the right edge of the display screen, and the twentieth distance is greater than the nineteenth distance; in response to the seventh operation, moving the RecyclerView by a twenty-first distance along a fourth direction, and displaying eighth content based on the RecyclerView on the display screen, where the fourth direction is opposite to the third direction, and the twenty-first distance is greater than or equal to the difference between the twentieth distance and the nineteenth distance.

[0037] In one possible implementation, a distance from a left edge of the display screen to a left edge of the recycler view is a twenty-second distance, and the edge of the recycler view is located outside the display screen. The method further includes: receiving a seventh operation of a user sliding a twenty-third distance along a fourth direction on the display screen, the twenty-third distance being greater than the twenty-second distance; and in response to an eighth operation, moving the RecyclerView along a third direction by a twenty-fourth distance and displaying ninth content based on the RecyclerView on the display screen, the twenty-fourth distance being greater than or equal to the difference between the twenty-third distance and the twentieth distance.

[0038] In one possible implementation, when the single-finger sliding operation is a single-finger swipe down operation, if the actual layout position index of the first item view does not point to the first image in the album, the moving distance of the custom RecyclerView can be calculated using the following relationship:

[0039] Indicates the estimated number of rows to be moved;

[0040] Indicates the actual number of movable rows, that is, the maximum number of ItemView rows allowed to be added at the top of the custom RecyclerView.

[0041] Among them, min() is the minimum function, y1 represents the upper edge coordinate after the custom RecyclerView is moved along the second direction, Y1 represents the upper edge coordinate of the display screen, m represents the width or height of a single table item view in the custom RecyclerView, LP1 is the actual layout position index of the first image of the custom RecyclerView, LPmin is the actual layout position index of the first image of the album, and gmax represents the maximum gear of the custom RecyclerView.

[0042] In one possible implementation, when the single-finger sliding operation is a single-finger upward sliding operation, if the actual layout position index of the last item view does not point to the last image in the album, the moving distance of the custom RecyclerView can be calculated by the following relationship:

[0043] Indicates the estimated number of rows to be moved;

[0044] Indicates the actual number of movable rows, that is, the maximum number of ItemView rows allowed to be added at the bottom of the custom RecyclerView.

[0045] Among them, min() is the minimum function, y2 represents the lower edge coordinate of the custom RecyclerView after moving along the first direction, Y2 represents the lower edge coordinate of the display screen, m represents the width or height of a single table item view in the RecyclerView, LP2 is the actual layout position index of the last image of the RecyclerView, LPmax is the actual layout position index of the last image of the album, and gmax represents the maximum gear of the RecyclerView.

[0046] In one possible implementation, when the custom RecyclerView is scaled or scrolled up and down, the actual layout position index of the custom RecyclerView may also change. When the actual LP of the upper left ItemView (the first ItemView) of the custom RecyclerView is equal to 0, it means that it is already in the first row of the album and cannot be slid up any further. When the actual LP value of the lower right ItemView (the last ItemView) of the custom RecyclerView is equal to the maximum value of the actual layout position index, LPmax, it means that it is already in the last row of the album and cannot be slid down any further.

[0047] For example, LPmax can be obtained by any of the following relations:

[0048] Among them, LPmax represents the maximum value of the actual layout position index, p represents the total number of images in an album, g represents the current gear of the custom RecyclerView (that is, the number of ItemView columns displayed on the display), and gmax represents the maximum gear of the custom RecyclerView (that is, the total number of ItemView columns).

[0049] In a second aspect, the present application provides a device comprising a unit for executing the method of the first aspect. The device may be configured to execute the scrolling display method described in the first aspect. For a description of the units in the device, please refer to the description of the first aspect above and will not be repeated here for the sake of brevity.

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

[0051] In a third aspect, the present application provides an electronic device comprising: one or more processors; and a memory. The memory is coupled to the one or more processors, and is configured to store computer program code, the computer program code comprising computer instructions, and the one or more processors invoke the computer instructions to cause the electronic device to execute the scrolling display method provided in the first aspect and any possible implementation thereof.

[0052] In a fourth aspect, the present application provides a computer-readable storage medium. The computer-readable storage medium includes computer instructions. When the computer instructions are executed on an electronic device, the electronic device executes the scrolling display method provided in the first aspect and any possible implementation thereof.

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

[0054] In a sixth aspect, the present application provides a chip system, which is applied to an electronic device. The chip system includes one or more processors, and the one or more processors are used to call computer instructions to enable the electronic device to execute the scrolling display method provided in the first aspect and any possible implementation thereof.

[0055] It can be understood that the beneficial effects that can be achieved by the above-mentioned device 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 can be referred to as the beneficial effects in the first aspect and any possible implementation thereof, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0056] FIG1 is a software architecture diagram of an electronic device provided in an embodiment of the present application;

[0057] FIG2 is a flowchart of an image scrolling solution based on native RecyclerView provided in an embodiment of the present application;

[0058] FIG3 is a schematic diagram of an interface corresponding to an image scrolling solution based on a native RecyclerView provided in an embodiment of the present application;

[0059] FIG4 is a software architecture diagram of an improved electronic device provided in an embodiment of the present application;

[0060] FIG5 is a schematic diagram showing the relationship between the custom RecyclerView, ItemView, and ImageView provided in an embodiment of the present application;

[0061] FIG6 is a schematic diagram of performing a zoom-out operation on a custom RecyclerView according to an embodiment of the present application;

[0062] FIG7 is a schematic diagram of an actual layout position index and an actual adaptation position index in a scrolling scene provided by an embodiment of the present application;

[0063] FIG8 is a schematic diagram of an application scenario of a picture library based on a custom RecyclerView provided in an embodiment of the present application;

[0064] FIG9 is a schematic diagram of another application scenario of a picture library based on a custom RecyclerView provided in an embodiment of the present application;

[0065] FIG10 is a schematic diagram of another application scenario of a picture library based on a custom RecyclerView provided in an embodiment of the present application;

[0066] FIG11 is a schematic diagram of another application scenario of a picture library based on a custom RecyclerView provided in an embodiment of the present application;

[0067] FIG12 is a schematic diagram of an image scrolling solution based on a custom RecyclerView provided in an embodiment of the present application;

[0068] FIG13 is a schematic diagram of an image scrolling solution based on a custom RecyclerView provided in an embodiment of the present application;

[0069] FIG14 is a schematic diagram of an image scrolling solution based on a custom RecyclerView provided in an embodiment of the present application;

[0070] FIG15 is a schematic diagram of an image scrolling solution based on a custom RecyclerView provided in an embodiment of the present application;

[0071] FIG16 is a schematic diagram of an image scrolling solution based on a custom RecyclerView provided in an embodiment of the present application;

[0072] FIG17 is a schematic diagram of an image scrolling solution based on a custom RecyclerView provided in an embodiment of the present application;

[0073] FIG18 is a schematic diagram of an image scrolling solution based on a custom RecyclerView provided in an embodiment of the present application;

[0074] FIG19 is a schematic diagram of an image scrolling solution based on a custom RecyclerView provided in an embodiment of the present application;

[0075] FIG20 is a flowchart of an image scrolling method based on a custom RecyclerView provided in an embodiment of the present application;

[0076] FIG21 is a schematic diagram of the hardware structure of the electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0077] In order to make the purpose, technical solutions and advantages of the embodiments of the present application more clear, the technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments.

[0078] Currently, mobile phone gallery apps can create multiple albums, such as Camera, Videos, Photos, Cloud Drive, Selfies, Live Photos, Long Exposure, Slow Motion, Screenshots, Gifs, and Favorites. Due to the limited screen size of mobile phones, if an album contains many photos and videos, the phone may not be able to display all images in the album simultaneously. In this case, the user can slide their finger up and down on the screen to scroll through the images in the album.

[0079] The following provides an image scrolling solution based on the native recycler view (RecyclerView) in combination with Figures 1 to 3.

[0080] Exemplarily, FIG1 shows a software architecture diagram of an electronic device.

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

[0082] The application layer can include a series of application packages, such as the camera app, gallery app, grid layout manager, native RecyclerView, and scale gesture detection interface (ScaleGestureDetector). These applications can be native Android applications. The camera app can use the camera to capture photos and videos, which are then stored in the gallery app. The gallery app manages not only photos and videos, but also screenshots and shared images. The native RecyclerView is responsible for calculating the movement distance and direction based on received scroll data and passing scroll events to the grid layout manager. The grid layout manager is responsible for creating one or more new rows of ItemViews at the top or bottom of the native RecyclerView when scrolling reaches the top or bottom of the native RecyclerView. Starting from the first row of the native RecyclerView, the size, padding, and position of each ItemView are re-measured, re-filled, and re-positioned until the last row. The ScaleGestureDetector is responsible for handling scale operations. As an example, ScaleGestureDetector can be a native interface of the native RecyclerView. When these application packages are running, they can access various service modules provided by the application framework layer through the application programming interface (API) and execute corresponding intelligent services.

[0083] It's important to note that in the native Android logic, the native RecyclerView has two indexes: the layout position (LP) index, established from the perspective of the LayoutManager and used to indicate the position of the grid in the native RecyclerView; and the real adapter position (AP) index, used to indicate the number of images displayed in the grid of the native RecyclerView. In the native Android logic, the layout position index cannot be customized, and the adapter position index is always numbered consecutively.

[0084] The application framework layer provides an API and programming framework for applications. It includes predefined functions. For example, the application framework layer may include the window manager service (WMS), activity manager service (AMS), video codecs (such as MediaCodec), SurfaceFlinger, screen management service, and asset management manager.

[0085] The system library includes multiple functional modules, such as the surface manager, media libraries, image processing libraries, a two-dimensional (2D) graphics engine (e.g., SGL), and a three-dimensional (3D) graphics library (e.g., OpenGL ES). Within the system library, the Android Runtime comprises a core library and a virtual machine. The Android Runtime is responsible for scheduling and managing the Android system. The core library consists of two parts: one containing the functional functions required by the Java language and the other the Android core library. The application layer and application framework layer run in the virtual machine.

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

[0087] For example, FIG2 shows a flowchart of an image scrolling solution based on native RecyclerView.

[0088] As shown in Figure 2, the touch driver can sample touch operations at a period T. For example, the touch driver samples touch data 240 times per second. The period T = 1 / 240 = 4.16 ms, meaning the touch driver collects touch data every 4.16 ms. The touch driver can determine the touch location based on the voltage changes collected during each period. This touch location is also called the touch point or touch position. When the user slides their finger across the touchscreen, the touchscreen transmits the coordinates of the collected touch location to the native RecyclerView. Based on these coordinates, the native RecyclerView calculates the distance and direction of movement. Based on the distance and direction of movement, the native RecyclerView then determines whether the top and bottom edges of the native RecyclerView are within the screen, that is, whether the native RecyclerView has scrolled to the top or bottom of the screen. If the native RecyclerView has reached the top or bottom of the screen and cannot scroll further, the native RecyclerView notifies the gallery app that scrolling is not possible. If it has not scrolled to the top or bottom, the native RecyclerView sends scroll parameters, such as scroll distance and movement direction, to the grid layout manager. The grid layout manager creates a new row of table item views at the top (corresponding to scrolling down) or bottom (corresponding to scrolling up) of the native RecyclerView, and starts from the first row of the native RecyclerView, re-measures the size, fills the content, and calculates the position of each table item view until the last row. Then, the grid layout manager calculates the actual scroll distance of the native RecyclerView and returns the actual scroll distance to the recycler view control. The recycler view control returns the scroll distance, movement direction, etc. to the gallery application.

[0089] For example, FIG3 provides a schematic diagram of an interface corresponding to an image scrolling solution based on a native RecyclerView.

[0090] As shown in Figure 3, at the initial moment, the AP values ​​of the ItemViews in the last row of the native RecyclerView are 479, 480, 481, 482, and 483, respectively. The user can swipe up on the touchscreen with one finger. The native RecyclerView slides upward. As soon as the bottom edge of the native RecyclerView slides into the screen, creating space at the bottom of the native RecyclerView, a new row of views must be loaded. The AP values ​​of this new row of views are 484, 485, 486, 487, and 488, respectively. To load this new row of views, the device must remeasure the position and size of each ItemView, starting from the first row of the native RecyclerView, and assign a corresponding ImageView to each ItemView, essentially filling each grid with an image. As shown in the dashed box in Figure 3, the redrawn RecyclerView has 5 rows and 12 columns, for a total of 60 ItemViews. The position of each of these 60 ItemViews must be remeasured, and the AP value of each corresponding ImageView must be reconfigured. This process is quite time-consuming. Experimental data shows that the above-mentioned image scrolling solution based on the native RecyclerView takes hundreds of milliseconds, which makes it easy to drop frames.

[0091] Based on the characteristic that the position and size of each ItemView remain essentially unchanged during up-and-down swiping, as does the alignment of each ItemView, this application provides an image scrolling solution based on a custom RecyclerView. In this solution, the size of the custom RecyclerView is larger than the screen size. Initially, the edges of the custom RecyclerView are off-screen. When the user swipes up or down in the gallery with a single finger, the custom RecyclerView scrolls in the same direction as the swipe. When the top or bottom of the custom RecyclerView moves into the screen, the electronic device moves the entire custom RecyclerView in the opposite direction of the swipe and repopulates the custom RecyclerView with content. In this way, while maintaining the position and size of each ItemView in the custom RecyclerView, the electronic device only needs to update the AP value of the ImageView corresponding to each ItemView, namely, repopulate the content in the moved custom RecyclerView, without having to resize and recalculate the position of each ItemView in the custom RecyclerView. Experimental data shows that, taking a screen refresh rate of 120Hz as an example, the image scrolling solution based on the custom RecyclerView can be shortened from hundreds of milliseconds to 8.3 milliseconds. This solution optimizes the data processing flow, shortens the data processing time when scrolling images in the gallery, and solves the frame drop problem existing in the native RecyclerView image scrolling solution.

[0092] The electronic device is also referred to as a terminal or user equipment (UE). For example, the electronic device may be a personal computer (PC), a mobile phone, a smart screen, a smart TV, a tablet computer (Pad), a wearable device, a computer with wireless transceiver capabilities, a virtual reality (VR) device, an augmented reality (AR) device, a wireless terminal in industrial control, a wireless terminal in self-driving, a wireless terminal in remote medical surgery, a wireless terminal in a smart grid, a wireless terminal in transportation safety, a wireless terminal in a smart city, or a wireless terminal in a smart home, etc., or may be other devices or apparatuses with a gallery function.

[0093] For album pages, electronic devices are pre-set with multiple gears. Among them, "gear" can be understood as the number of image columns displayed on the screen. Electronic devices are pre-set for album pages: 3 gears, 5 gears, 15 gears and 21 gears. Among them, 3 gears is the minimum gear of the album page, and 21 gears is the maximum gear of the album page. When the gear is 3 gears, the number of image columns displayed on the corresponding screen is 3 columns; when the gear is 5 gears, the number of image columns displayed on the corresponding screen is 5 columns; when the gear is 15 gears, the number of image columns displayed on the corresponding screen is 15 columns; when the gear is 21 gears, the number of image columns displayed on the corresponding screen is 21 columns.

[0094] The user can change the number of image columns of the album page displayed on the screen by using a two-finger zoom operation. As an example, the user can trigger the electronic device to increase the number of image columns of the album page displayed on the screen by reducing the distance between the two fingers. As another example, the user can trigger the electronic device to reduce the number of image columns of the album page displayed on the screen by increasing the distance between the two fingers. If the user sets the album page to 21 levels through a zoom operation, the electronic device will always display 21 columns of images until the next two-finger operation is received. As another example, the electronic device supports "cross-level zooming" of the album page. After the user presses two fingers and before the two fingers leave the screen, when the user increases or decreases the distance between the two fingers on the screen, the electronic device can switch from the current level to a non-adjacent level of the current level via the next level, that is, one gesture can switch multiple levels. Taking the example where the number of image columns displayed on the screen is 5 before the user presses two fingers, after the user presses two fingers, the distance between the two fingers is reduced. Before the two fingers leave the screen, as the distance between the two fingers decreases, the number of image columns displayed on the screen can switch from 5 columns to 15 columns. After switching to 15 columns, as the distance between the two fingers is reduced, the number of image columns displayed on the screen can switch from 15 columns to 21 columns.

[0095] Exemplarily, FIG4 shows a software architecture diagram of an improved electronic device.

[0096] Different from the software architecture diagram shown in FIG1 , the software architecture diagram shown in FIG4 newly adds a touch event receiving layer (ReceiveTouchView) control, a custom layout manager, and a custom RecyclerView in the application layer.

[0097] The ReceiveTouchView control is used to receive two-finger clicks in zoom scenarios. The ReceiveTouchView control's size matches the screen size and does not reposition the current two-finger position. This solves the functional and scalability issues of the native custom RecyclerView control that directly receives click events.

[0098] The custom layout manager can serve as a bridge between the grid-style layout manager and the custom RecyclerView, playing the role of data feedback. Specifically, the grid-style layout manager is a native manager of the Android system, which is used to manage the position and size of the ItemView component in the custom RecyclerView, but the grid-style layout manager does not have the ability to execute the image scrolling method based on the custom RecyclerView provided in this application. Therefore, the grid-style layout manager needs to return the moving distance of the user's single-finger operation to the custom RecyclerView. The grid-style layout manager does not have the function of directly returning data to the custom layout manager, so the custom layout manager can transparently transmit data between the grid-style layout manager and the custom RecyclerView control.

[0099] A custom RecyclerView consists of multiple item views (ItemView) in a grid format. Each ItemView corresponds to an image view (ImageView), and each ImageView is used to display an image. A custom RecyclerView can be considered a container for displaying images. As an example, when the user zooms in or out in the gallery interface, the custom RecyclerView will zoom in or out accordingly. As another example, when the user swipes up or down with one finger, the custom RecyclerView control can control the custom RecyclerView to scroll in the same direction as the single-finger swipe. When scrolling to the top or bottom of the custom RecyclerView, the custom RecyclerView control moves the entire custom RecyclerView in the opposite direction of the single-finger swipe and refills the content in the custom RecyclerView.

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

[0101] Exemplarily, FIG5 shows a schematic diagram of the relationship among custom RecyclerView, ItemView, and ImageView.

[0102] After the phone receives a click on the gallery icon, it starts running the gallery app and initializes a custom RecyclerView. As shown in Figure 5, the custom RecyclerView can include 21 columns * 50 rows = 1050 ItemViews, and the width and height of each ItemView are both 400 pixels. The number of columns, rows, and side length of each ItemView in the custom RecyclerView are calculated as follows: Taking a screen size of 1200 pixels wide and 2800 pixels high, and the preset gears are 3, 5, 15, and 21, the phone can divide the screen width of 1200 pixels by the minimum gear 3 to obtain a side length of 400 pixels for each ItemView in the custom RecyclerView. Then, the phone can multiply the minimum gear 3 by the side length of 400 pixels for each ItemView in the initial custom RecyclerView, and then divide it by the maximum gear 21. The calculated side length of each ItemView on the screen at the maximum gear (21) is 57 pixels. Then, the phone can divide the height of the screen, 2800 pixels, by the side length of each ItemView on the screen at the maximum gear (21), 57 pixels, and add 1 to get the number of rows of the custom RecyclerView, 50 rows. It should be noted that at gear 21, the phone can divide the height of the screen by the side length of each ItemView on the screen at the maximum gear (21), 57 pixels, to determine that a maximum of 49 rows of pixels are displayed. The custom RecyclerView is at least one row more than the screen, so that the size of the custom RecyclerView displayed on the screen can be larger than the size of the screen, so that there will be no blank space on the screen, ensuring that the custom RecyclerView can scroll up and down.

[0103] As shown in Figure 5, in gear 3, the custom RecyclerView's display area on the screen is 3 rows and 7 columns of ItemView. Each ItemView includes an ImageView, and each ImageView is used to display an image. The image displayed by an ImageView can be a thumbnail of a photo or a thumbnail of a frame from a video. When an ImageView displays a photo thumbnail, the user clicks the thumbnail and the phone displays the photo in full screen. When an ImageView displays a thumbnail of a frame from a video, the user clicks the thumbnail and the phone plays the video in full screen.

[0104] It should be noted that FIG5 is an example of an ItemView having equal width and height, which does not limit the present application. As another example, the width and height of the ItemView are not equal.

[0105] In addition, the relative positional relationship between the display area and the custom RecyclerView in Figure 5 is only an example. In actual implementation, the user can change the relative positional relationship between the screen and the custom RecyclerView, as well as the size of the display area seen by the user, by sliding up and down and zooming. For example, when the user slides up on the screen, the custom RecyclerView slides up relative to the screen, thereby displaying photos taken at a later time; when the user slides down on the screen, the custom RecyclerView slides down relative to the screen, thereby displaying photos taken at an earlier time. For another example, when the user reduces the distance between the two fingers, the display area in the custom RecyclerView is enlarged, and after the enlarged display area is sent to the screen, the screen displays more images of smaller size; when the user increases the distance between the two fingers, the display area in the custom RecyclerView is reduced, and after the reduced display area is sent to the screen, the screen displays fewer images of larger size.

[0106] Exemplarily, FIG6 shows a schematic diagram of performing a zoom-out operation on a custom RecyclerView.

[0107] The custom RecyclerView includes 21 columns * 50 rows = 1050 ItemViews. As shown in (a) in Figure 6, at the initial moment, the display area corresponding to the screen consists of 5 columns * 12 rows = 60 ItemViews. When the user wants to view more photos, the user can press two fingers on the screen and gradually reduce the distance between the two fingers. As shown in (b) in Figure 6, in response to the user's two-finger distance reduction operation, the custom RecyclerView shrinks, and at this moment, 15 columns and 35 rows, a total of 525 ItemViews, are displayed in the display area corresponding to the screen.

[0108] As another example, the user may also increase the distance between two fingers to trigger the phone to zoom in on the custom RecyclerView, reduce the number of ItemViews displayed on the screen, and increase the size of the image corresponding to each ItemView.

[0109] This application's custom RecyclerView involves two sizes:

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

[0111] The other is the actual display size of the custom RecyclerView. Since the number of ItemView columns displayed on the screen is different when the display area of ​​the custom RecyclerView includes different numbers of columns, it is necessary to multiply the original size of the custom RecyclerView by a zoom factor (zoom factor is less than or equal to 1.0) to obtain a reduced display size, and then display the reduced custom RecyclerView on the screen. For example, the current gear is N, the minimum gear is M, and the original size of the custom RecyclerView is (x, y), then the display size of the custom RecyclerView at the current gear is (x*M / N, y*M / N). Among them, x represents the original width of the custom RecyclerView, y represents the original height of the custom RecyclerView, and M / N represents the zoom factor.

[0112] In an embodiment of the present application, the electronic device can change the actual layout position index value according to the zoom magnification, zoom center, and scrolling operation. In a custom RecyclerView, the actual layout position index is numbered consecutively from the ItemView in the first row and first column to the ItemView in the last row and last column. In addition, during the zooming process, the actual adaptation position index of the ItemView corresponding to the center of the two fingers remains unchanged, but the actual adaptation position indexes of other ItemViews may be renumbered, resulting in the actual adaptation position index of the entire custom RecyclerView not necessarily being continuous. In other words, in a zooming scenario, the actual adaptation position index and the layout position index may not be equal.

[0113] Exemplarily, FIG7 shows a schematic diagram of an actual layout position index and an actual adaptation position index in a scrolling scenario.

[0114] Assume that a custom RecyclerView has five columns (the maximum number of columns) of ItemViews, and the width and height of each ItemView are equal to the screen width divided by 5 (the minimum number of columns). In Figure 7, at the initial moment, the custom RecyclerView is in level 5, with each grid representing an ItemView, and each ItemView containing an ImageView. The custom RecyclerView encodes each ItemView using the actual layout position index and each ImageView using the actual adaptation position index. Since the grids of each column of ItemViews are displayed on the screen when the custom RecyclerView is in the minimum level, the actual layout position index and actual adaptation position index corresponding to a grid are the same. As shown in (a) of Figure 7, the grid in the first row and first column located in the upper left corner of the screen has an actual layout position index LP = 0 and an actual adaptation position index AP = 0. When the user slides their finger up and down on the screen, the actual LP and actual AP of each grid are updated synchronously. As shown in (b) of FIG7 , when the user triggers the custom RecyclerView to slide up 400 pixels by swiping up with one finger, the grid in the first row and first column in the upper left corner of the screen is updated to LP=5 and actual AP=5.

[0115] When you scale or scroll a custom RecyclerView, the actual layout position index of the custom RecyclerView may also change. When the actual LP of the top-left ItemView (the first ItemView) of the custom RecyclerView is equal to 0, it means that it is already in the first row of the album and cannot be slid up any further. When the actual LP value of the bottom-right ItemView (the last ItemView) of the custom RecyclerView is equal to the maximum value of the actual layout position index, LPmax, it means that it is already in the last row of the album and cannot be slid down any further.

[0116] As an example, taking the case where the first row of ItemView is not retained, LPmax can be obtained by the following relation (1):

[0117] As another example, taking the first row of ItemView as an example, LPmax can be obtained by the following relationship (2):

[0118] Among them, LPmax represents the maximum value of the actual layout position index, p represents the total number of images in an album, g represents the current gear of the custom RecyclerView (that is, the number of ItemView columns displayed on the screen), and gmax represents the maximum gear of the custom RecyclerView (that is, the total number of ItemView columns).

[0119] It should be understood that since the actual layout position index and the actual adaptation position index value of an ItemView are in a corresponding relationship, the actual adaptation position index value and the actual layout position index corresponding to any image in the album can also be obtained by referring to the above relationship (1) or relationship (2), which will not be repeated here.

[0120] The following examples illustrate the application scenarios of the image gallery based on the custom RecyclerView with reference to Figures 8 to 11.

[0121] Exemplarily, FIG8 and FIG9 show schematic diagrams of scenes in which images are scrolled and displayed based on a custom RecyclerView.

[0122] As shown in (a) of Figure 8 , the mobile phone displays icons of applications such as the gallery on the desktop. When the user wants to view an image, the user can click on the gallery icon. In response to the user clicking on the gallery icon, the mobile phone displays the album interface as shown in (b) of Figure 8 . The album interface includes multiple areas: the status bar provides battery and signal strength indicators, the action bar provides photos and a search box, the footer provides photos, albums, memories, and creations, and other areas outside these areas provide album cards such as camera, all photos, and videos. Among them, the album card is also called the album card, and each album card is the entrance to an album.

[0123] The user can select an album card from these album cards. For example, as shown in (b) in Figure 8, the user can click on the "Camera" card. In response to the user's click operation on the "Camera" card, the mobile phone displays the camera album interface as shown in (c) in Figure 8, which is generated based on the custom RecyclerView. The camera album interface displays multiple photos and videos that the user has pre-taken using the camera application in the form of a grid. It should be noted that, for a clearer understanding, (c) in Figure 8 is explained as an example in which a grid represents an image. As an example, the camera album interface shown in (c) in Figure 8 displays multiple images that were recently taken. As another example, the camera album interface shown in (c) in Figure 8 is the last interface displayed when the user last opened the camera album.

[0124] Taking the camera album interface as shown in (c) of FIG8 , which displays multiple recently captured images, as an example, the user can trigger the phone to update the camera album interface by sliding down with one finger to display images captured at an earlier time.

[0125] As an example, a user's single-finger swiping operation on the camera album interface is a follow-up sliding operation. The characteristics of the follow-up sliding operation are that the single-finger sliding speed is slow, and the single finger does not leave the screen for a long time. As shown in (d) in Figure 8, the user can press and hold the image 455 with a single finger and slide it downward by a distance d1. In response to the user's sliding operation, as shown in (e) in Figure 8, the camera album interface slides downward by a distance d1. Then, without releasing the single finger, the user can continue to press and hold the image 455 and slide it downward by a distance d2. In response to the user's sliding operation, as shown in (f) in Figure 8, the camera album interface slides downward by a distance d2. Generally, the sliding distance of the follow-up sliding operation is equal to the distance the camera album interface scrolls downward. The longer the sliding distance of the follow-up sliding operation, the more content is displayed when the camera album interface scrolls downward.

[0126] As another example, a user's single-finger swiping operation on the camera album interface is an inertial sliding operation. The characteristics of the inertial sliding operation are that the single-finger sliding speed is relatively fast, and the single finger leaves the screen after quickly sliding a certain distance. An inertial sliding operation can trigger the mobile phone to scroll and display a large number of images. As shown in (a) in Figure 9, the user can press the image 455 with one finger and quickly slide down a distance d3 (distance d3 is greater than distance d1 and distance d2), and then the user's finger leaves the screen. In response to the user's inertial sliding operation, the mobile phone plays the animation effect of the inertial scrolling interface, such as first displaying the camera album interface shown in (b) in Figure 9, and then displaying the camera album interface shown in (c) in Figure 9. Generally, the sliding distance of the inertial sliding operation is less than the distance the camera album interface scrolls downward. After the inertial sliding operation ends, the camera album interface will continue to scroll downward for a certain distance as if there is inertia.

[0127] The above embodiment introduces that the user can trigger the mobile phone to update the camera album interface by sliding down. In actual implementation, the user can also trigger the mobile phone to update the camera album interface by sliding up. For example, as shown in (d) in Figure 9, the user can press and hold the image 350 with a single finger and slide upward a distance d4. In response to the user's sliding operation, as shown in (e) in Figure 9, the camera album interface slides upward with the hand by a distance d4. Then, without releasing the single finger, the user can continue to press and hold the image 350 and slide upward a distance d5. In response to the user's sliding operation, as shown in (f) in Figure 9, the camera album interface slides upward with the hand by a distance d5.

[0128] It should be noted that Figures 8 and 9 illustrate an example of a camera album interface with five columns of images, and do not limit this application. As an example, users can also zoom in and out in the camera album interface to adjust the number of image columns in the camera interface, change the actual display size of the custom RecyclerView, and thus change the size of each image in the camera album interface.

[0129] For example, FIG10 and FIG11 are schematic diagrams showing scenes of zooming and displaying images in a gallery.

[0130] As an example, as shown in (a) of Figure 10, at the initial moment, the camera album interface includes 5 columns of images. The user presses two fingers near an image and gradually reduces the distance between the two fingers. In response to the user's two-finger distance reduction operation, the phone displays the camera album interface shown in (b) of Figure 10, which now includes 15 columns of images. Without removing the two fingers from the screen, the user continues to reduce the distance between the two fingers. In response to the user's two-finger distance reduction operation, the phone displays the camera album interface shown in (c) of Figure 10, which now includes 21 columns of images.

[0131] As another example, as shown in Figure 11 (a), the camera album interface initially includes five columns of images. The user presses two fingers near an image and gradually increases the distance between them. In response to the user's two-finger distance zoom operation, the phone displays the camera album interface shown in Figure 11 (b), which now includes three columns of images.

[0132] In conjunction with the description of Figures 4 to 11 in the above embodiment, the original size of the custom RecyclerView is larger than the screen size. The user can directly trigger the image scrolling by swiping up and down; or the user can change the number of image columns on the screen by zooming, and then trigger the image scrolling by swiping up and down.

[0133] The following takes a mobile phone as an example, and combines Figures 12 to 19 to illustrate the image scrolling solution based on the custom RecyclerView provided by this application through 8 examples.

[0134] It should be noted that in order to more clearly demonstrate the scrolling process of images in the album, in the following 8 examples, the screen size is 1200 pixels wide and 2400 pixels high. The custom RecyclerView consists of 5 rows and 11 columns, a total of 55 grids. The custom RecyclerView includes two gears: 3 and 5. The size of the custom RecyclerView is 2000 pixels wide and 4400 pixels high. Among them, the size calculation method of the custom RecyclerView can refer to the description of the size calculation method of the custom RecyclerView in Figure 5 in the above embodiment, which will not be repeated here.

[0135] In addition, the three middle columns of numbers in Figures 12 to 19 represent the actual adaptation position index coordinates of ItemView. Taking an album containing 501 photos as an example, the actual AP equals 0 to point to the first photo in the album, and the actual AP equals 500 to point to the last photo in the album. The mobile phone can determine the minimum value of the actual layout position index LPmin = 0. The mobile phone substitutes g = 3, p = 501 and gmax = 5 into the above relationship (1) to obtain the maximum value of the actual layout position index when the custom RecyclerView is in gear 3: LPmax = 835. Among them, LPmax represents the maximum value of the actual layout position index, p represents the total number of images in an album, g represents the gear that the custom RecyclerView is currently in, and gmax represents the maximum gear of the custom RecyclerView.

[0136] It should be understood that in actual implementation, the resolution of the custom RecyclerView, the gear of the custom RecyclerView, the number of rows and columns of the custom RecyclerView, the actual adaptation position index value, the actual layout position index value, etc. can all be adjusted according to actual needs such as screen resolution and user operations. For example, referring to Figure 5, the resolution of the initialized custom RecyclerView can be 8400 pixels wide and 2000 pixels high, the minimum gear of the custom RecyclerView is 3 columns, the middle gear is 5 columns, and the maximum gear is 21 columns. When the custom RecyclerView is in different gears, the display resolution of the custom RecyclerView will also be different.

[0137] In order to facilitate the description of the relative position relationship between the screen and the custom RecyclerView, in Figures 12 to 19, the size of the touch event receiving layer is equal to the size of the screen, and the upper left corner of the touch event receiving layer coincides with the upper left corner of the screen. A coordinate system is established with the upper left corner of the screen (equivalent to the upper left corner of the touch event layer) as the origin, the X axis horizontally to the right, and the Y axis vertically downward. It should be understood that in actual implementation, other methods can also be used to establish a coordinate system, such as using the upper left corner of the custom RecyclerView as the origin, the X axis horizontally to the right, and the Y axis vertically downward to establish a coordinate system, or using the lower left corner of the touch event layer as the origin, the X axis horizontally to the right, and the Y axis vertically upward to establish a coordinate system. This application does not limit the specific method of establishing the coordinate system.

[0138] Example 1

[0139] Figure 12 shows a schematic diagram of a scenario in which a user slides one finger upward relative to the screen (also called the first direction, which is the direction from the lower edge of the display screen to the upper edge of the display screen), and the custom RecyclerView slides upward accordingly, but the bottom of the custom RecyclerView has not yet slid into the screen.

[0140] As shown in Figure 12 (a), at the initial moment, the phone displays a grid interface based on a custom RecyclerView. The Y-axis coordinate of the top of the custom RecyclerView is y1 = -1600 pixels, and the Y-axis coordinate of the bottom of the custom RecyclerView is y2 = 2800 pixels, that is, the edge of the custom RecyclerView is outside the display. The user can use a single finger to press the area corresponding to the actual adaptation position index 170 and slide upward a distance of 300 pixels. In the Nth reporting cycle, the phone detects an upward slide distance of 300 pixels, that is, dy = -300 pixels. In response to the user's single-finger upward slide operation, as shown in Figure 12 (b), the phone moves the custom RecyclerView upward by 300 pixels. At this point, the Y-axis coordinate of the top of the custom RecyclerView is updated to y1 = -1600 - 300 = -1900 pixels, and the Y-axis coordinate of the bottom of the custom RecyclerView is updated to y2 = 2800 - 300 = 2500 pixels.

[0141] Then, the mobile phone executes the following three judgment steps in sequence.

[0142] The first judgment step:

[0143] The mobile phone obtains the actual layout position index value of the custom RecyclerView. As shown in (b) of Figure 12, the first actual layout position index value in the first row and the first column of the custom RecyclerView is LP1 = 246, and the last actual layout position index value in the last row and the last column of the custom RecyclerView is LP2 = 300. Here, LP1 and LP2 can be calculated according to the actual AP value of the custom RecyclerView and the above formula (1), which will not be elaborated here. Since the current scenario is a single-finger upward sliding scenario, and the custom RecyclerView slides upward with a single finger, the mobile phone only needs to judge the sizes of the actual LP2 = 300 and the actual LPmax = 835 to determine whether the last row of the custom RecyclerView is the last row of the photo album. When the last row of the custom RecyclerView is the last row of the photo album, it means that more images with larger actual AP values cannot be updated from the bottom ItemView of the custom RecyclerView. When the custom RecyclerView is moved upward, if the bottom of the custom RecyclerView moves into the screen, in order to avoid a blank area between the bottom of the custom RecyclerView and the bottom of the screen, the mobile phone needs to correct the position of the custom RecyclerView, that is, perform the first position correction on the custom RecyclerView to align the bottom of the custom RecyclerView with the bottom of the screen.

[0144] Since LP2 < LPmax, the mobile phone can determine that the last row of the custom RecyclerView is not the last row of the photo album, and the custom RecyclerView has not carried the last image of the photo album. If the user continues to slide the finger upward, the custom RecyclerView can still update the images corresponding to each ItemView, so that the user can see other images with larger actual LP values that have not been displayed in the photo album. Therefore, the mobile phone does not need to perform the first position correction on the custom RecyclerView, and D1 = 0.

[0145] The second judgment step:

[0146] The phone compares the Y-axis coordinate of the bottom of the custom RecyclerView, y2 = 2500 pixels, and the Y-axis coordinate of the bottom of the screen, y2 = 2400 pixels. Because y2 > Y2, the bottom of the custom RecyclerView is outside the screen and has not yet been slid into the screen. Therefore, as shown in (c) in Figure 12, the phone does not need to move the custom RecyclerView downward to load the new image. That is, the position of the custom RecyclerView remains unchanged, and D2 = 0.

[0147] The third judgment step:

[0148] If the phone moves the custom RecyclerView downward in the second judgment step, the phone also needs to refresh the images corresponding to each ItemView in the custom RecyclerView so that the user can visually see that the position of the image on the screen remains unchanged. This may cause the last row of the refreshed custom RecyclerView to become the last row of the album. Referring to the description of the first judgment step, in order to avoid a blank area between the bottom of the custom RecyclerView and the bottom of the screen, the custom RecyclerView needs to be corrected for the second time. However, since the custom RecyclerView did not move downward in the second judgment step and maintained its position unchanged, the phenomenon of the last row of the custom RecyclerView becoming the last row of the album will not occur. Therefore, as shown in (d) in Figure 12, the phone does not need to perform a second position correction on the custom RecyclerView, and D3 = 0.

[0149] After obtaining dy = -300, D1 = 0, and D3 = 0 through the above steps, the phone can calculate the final movement distance D = dy + D1 + D3 = -300 and refresh the screen display. From the user's perspective, the user sees the album interface directly updated from Figure 12 (a) to Figure 12 (e), indicating that the album interface has slid upward 300 pixels.

[0150] It should be noted that in the second judgment step of Examples 1 to 8, if the mobile phone moves the custom RecyclerView downward, the mobile phone also needs to refresh the images corresponding to each ItemView in the custom RecyclerView so that the user visually sees that the position of the image on the screen remains unchanged. This is equivalent to not moving the ItemView in the second judgment step. Therefore, when the mobile phone determines the final moving distance D, D2 is not involved.

[0151] Example 2

[0152] Figure 13 shows a schematic diagram of a scenario in which a user slides upward (also called a first direction) relative to the screen with one finger, the bottom of the custom RecyclerView slides upward into the screen, and the last row of the custom RecyclerView is not the last row of the album.

[0153] Based on (e) in Figure 12, as shown in (a) in Figure 13, the mobile phone displays the first grid interface based on the custom RecyclerView. The user presses the area corresponding to the actual adaptation position index 170 with one finger and does not let go, and continues to slide upward for a distance of 300 pixels (also called the second distance). At this moment, the distance from the bottom edge of the display to the bottom edge of the recycler view is the first distance. In the N+1th reporting cycle, the mobile phone detects an upward sliding distance of 300 pixels, that is, dy = -300 pixels. In response to the user's single-finger upward sliding operation (also called the first operation), as shown in (b) in Figure 13, the mobile phone moves the custom RecyclerView up 300 pixels. At this moment, the Y-axis coordinate of the top of the custom RecyclerView is updated to y1 = -1900-300 = -2200 pixels, and the Y-axis coordinate of the bottom of the custom RecyclerView is updated to y2 = 2500-300 = 2200 pixels.

[0154] Then, the mobile phone executes the following three judgment steps in sequence.

[0155] The first judgment step:

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

[0157] The second judgment step:

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

[0159] For example, the mobile phone can calculate the number of rows to move downward according to the relation formula:

[0160] Correspondingly, the distance that the custom RecyclerView moves downward (also called the third distance) is: 400 pixels * 1 row = 400 pixels, that is, D2 = 400.

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

[0162] It can be understood that in the second judgment step, the mobile phone first moves the custom RecyclerView down by one row, and then adds 3 to the AP values ​​corresponding to the ItemViews in the second to fifth columns of the custom RecyclerView, which is equivalent to not moving the ItemView, so that the user visually sees that the positions of each image on the screen remain unchanged.

[0163] The third judgment step:

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

[0165] After obtaining dy = -300, D1 = 0, and D3 = 0 through the above steps, the mobile phone can obtain the final moving distance dy + D1 + D3 = -300 and refresh the screen display content. From the user's perspective, the user sees that the photo album interface directly updates from the one shown in (a) of FIG. 13 to the one shown in (e) of FIG. 13, that is, the photo album interface slides upward following the user's finger by 300 pixels, and a new row of images is added at the bottom of the screen.

[0166] Example 3

[0167] FIG. 14 shows a schematic diagram of a scenario where the user slides a single finger upward relative to the screen, the bottom of the custom RecyclerView slides upward into the screen, and the last line of the custom RecyclerView is the second-to-last line of the photo album.

[0168] As shown in (a) of FIG. 14, at the initial moment, the Y-axis coordinate of the top of the custom RecyclerView is y1 = -1900 pixels, and the Y-axis coordinate of the bottom of the custom RecyclerView is y2 = 2500 pixels. At this moment, the distance from the lower edge of the display screen to the lower edge of the recycler view is the seventh distance. The user can use a single finger to press on the area corresponding to the actual adaptation position index 488 and slide up a distance of 1000 pixels (also referred to as the eighth distance). In the M1th reporting cycle, the mobile phone detects a slide-up distance of 1000 pixels, that is, dy = -1000 pixels. In response to the user's single-finger slide-up operation (also referred to as the third operation), as shown in (b) of FIG. 14, the mobile phone moves the custom RecyclerView up by 1000 pixels. At this moment, the Y-axis coordinate of the top of the custom RecyclerView is updated to y1 = -1900 - 1000 = -2900 pixels, and the Y-axis coordinate of the bottom of the custom RecyclerView is updated to y2 = 2500 - 1000 = 1500 pixels.

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

[0170] The first judgment step:

[0171] The mobile phone obtains the actual layout position index value of the ItemView of the custom RecyclerView. As shown in (b) of FIG. 14, the first actual layout position index value in the first row and the first column of the custom RecyclerView is LP1 = 776, and the last actual layout position index value in the last row and the last column of the custom RecyclerView is LP2 = 830. Here, LP1 and LP2 can be calculated according to the actual AP value of the custom RecyclerView and the above formula (1), which will not be elaborated here. Then, the mobile phone judges the magnitudes of LP2 = 830 and LPmax = 835. Since LP2 < LPmax, the mobile phone can determine that the last row of the custom RecyclerView is not the last row of the album, and the custom RecyclerView has not carried the last image of the album. If the user continues to slide the finger up, the custom RecyclerView can still update the images corresponding to each ItemView, so that the user can see other images with larger actual LP values that have not been displayed in the album. As shown in (c) of FIG. 14, the mobile phone does not need to perform the first position correction on the custom RecyclerView, and D1 = 0.

[0172] The second judgment step:

[0173] Compare the size of the Y-axis coordinate y2 = 1500 pixels at the bottom of the custom RecyclerView with the Y-axis coordinate Y2 = 2400 pixels at the bottom of the screen. Since y2 < Y2, the bottom of the custom RecyclerView has been scrolled into the screen. To enable the custom RecyclerView to hold more images with larger actual LP values, the phone needs to move the custom RecyclerView downward.

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

[0175] The current scenario is a single-finger upward swipe, and the Y-axis coordinate y2 = 1500 < 2400 at the bottom of the custom RecyclerView. In theory, the custom RecyclerView needs to be moved downward by 3 rows. However, since the last row of the custom RecyclerView is the second-to-last row of the album, in practice, the custom RecyclerView can only be moved downward by 1 row.

[0176] Correspondingly, the distance the custom RecyclerView moves downward is: 400 pixels * 1 row = 400 pixels, that is, D2 = 400.

[0177] As shown in (d) of Figure 14, after the custom RecyclerView moves downward by 400 pixels, the Y-axis coordinate at the bottom of the custom RecyclerView is updated to y2 = 1500 + 400 = 1900 pixels. As an example, the phone updates the actual adaptation position index value of each ItemView according to the relationship: actual AP + 1 row * 3 columns. For example, the actual AP values of the first row of the custom RecyclerView are updated from 466, 467, and 468 shown in (c) of Figure 14 to 469, 470, and 471 shown in (d) of Figure 14;...; the actual AP values of the last row of the custom RecyclerView are updated from 496, 497 shown in (c) of Figure 14 to 499, 500 shown in (d) of Figure 14. Since the photo pointed to by 500 is the last picture in the album, the original 498 can be updated to 500 or left blank. As another example, the phone updates the actual adaptation position index value of each ItemView according to the relationship actual AP + 1 row * 3 columns + 1, so that the last ItemView will not be blank.

[0178] It can be understood that in the second judgment step, the mobile phone first moves the custom RecyclerView down by one row, and then adds 3 to the AP values ​​corresponding to the ItemViews in the second to fifth columns of the custom RecyclerView, which is equivalent to not moving the ItemView, so that the user visually sees that the positions of each image on the screen remain unchanged.

[0179] The third judgment step:

[0180] The phone again obtains the actual layout position index value of the last ItemView of the current custom RecyclerView. As shown in (d) in Figure 14, the first actual layout position index value of the current custom RecyclerView is LP1 = 776 + 5 = 781, and the last actual layout position index value is LP2 = 830 + 5 = 835. Then, the difference between LP2 = 835 and LPmax = 835 is determined. Since LP2 = LPmax, the last row of the current custom RecyclerView is the last row of the album. To avoid a blank area between the bottom of the custom RecyclerView and the bottom of the screen, the phone needs to perform a second position correction on the custom RecyclerView. As shown in (e) in Figure 14, the phone can move the custom RecyclerView down by (2400 - 1900) = 500 pixels, that is, D3 = 500. At this point, the Y-axis coordinate of the bottom of the custom RecyclerView is updated to y2 = 2400 pixels, and the bottom of the custom RecyclerView is aligned with the bottom of the screen. Among them, D2 and D3 are called the ninth distance.

[0181] After obtaining dy = -1000, D1 = 0, D2 = 400, and D3 = 500 through the above steps, the phone can calculate the final movement distance dy + D1 + D3 = -500 and refresh the screen display. From the user's perspective, the user sees the album interface directly updated from Figure 14 (a) to Figure 14 (f), indicating that the album interface has slid upward 500 pixels and a new row of images has been added at the bottom of the screen.

[0182] Example 4

[0183] FIG15 is a schematic diagram showing a scenario in which a user slides upward with one finger relative to the screen, the bottom of the custom RecyclerView slides upward into the screen, and the last row of the custom RecyclerView is the last row of the album.

[0184] As shown in (a) of Figure 15, at a certain moment, the Y-axis coordinate of the top of the custom RecyclerView is y1 = -1900 pixels, and the Y-axis coordinate of the bottom of the custom RecyclerView is y2 = 2500 pixels. At this moment, the distance from the bottom edge of the display to the bottom edge of the recycler view is the fourth distance. The user can use a single finger to press the area corresponding to the actual adaptation position index 491 and slide upward a distance of 300 pixels. In the M2th reporting cycle, the mobile phone detects an upward sliding distance of 300 pixels, that is, dy = -300 pixels. In response to the user's single-finger upward sliding operation (also known as the second operation), as shown in (b) of Figure 15, the mobile phone moves the custom RecyclerView upward by 300 pixels (also known as the fifth distance). At this moment, the Y-axis coordinate of the top of the custom RecyclerView is updated to y1 = -1900-300 = -2200 pixels, and the Y-axis coordinate of the bottom of the custom RecyclerView is updated to y2 = 2500-300 = 2200 pixels.

[0185] Then, the mobile phone executes the following three judgment steps in sequence.

[0186] The first judgment step:

[0187] The mobile phone obtains the actual layout position index value of the ItemView of the custom RecyclerView. As shown in (b) of Figure 15, the first actual layout position index value of the first row and first column of the custom RecyclerView is LP1=781, and the last actual layout position index value of the last row and last column of the custom RecyclerView is LP2=835. Among them, LP1 and LP2 can be calculated based on the actual AP value of the custom RecyclerView and the above relationship (1). Then, the mobile phone determines the size of LP2=837 and LPmax=835. Since LP2=LPmax, the last row of the custom RecyclerView is the last row of the album. Referring to the description of Example 1 in the above embodiment, when the last row of the custom RecyclerView is the last row of the album, it means that the custom RecyclerView can no longer update more images with larger actual AP values. In order to avoid a blank area between the bottom of the custom RecyclerView and the bottom of the screen, the mobile phone needs to correct the position of the custom RecyclerView, that is, perform the first position correction on the custom RecyclerView. As shown in (c) of Figure 15 , the phone can move the custom RecyclerView downward by (2400-2200)=200 pixels, that is, D1=200, which is also called the sixth distance. At this point, the Y-axis coordinate of the bottom of the custom RecyclerView is updated to y2=2400 pixels, and the bottom of the custom RecyclerView is aligned with the bottom of the screen.

[0188] The second judgment step:

[0189] The phone compares the Y-axis coordinate of the bottom of the custom RecyclerView, y2 = 2400 pixels, and the Y-axis coordinate of the bottom of the screen, which is Y2 = 2400 pixels. Since y2 = Y2, the bottom of the custom RecyclerView has not yet slid into the screen. Therefore, as shown in (d) in Figure 15, the phone does not need to move the custom RecyclerView downward, and D2 = 0.

[0190] The third judgment step:

[0191] Referring to the description of Example 1 in the above embodiment, since the custom RecyclerView does not move downward in the second judgment step, that is, the position of the custom RecyclerView remains unchanged, and the distance between the bottom of the custom RecyclerView and the bottom of the screen remains 0, the phenomenon of the last row of the custom RecyclerView becoming the last row of the album will not occur. As shown in (e) of Figure 15, the phone does not need to perform a second position correction on the custom RecyclerView, and D3 = 0.

[0192] After obtaining dy = -300, D1 = 200, and D3 = 0 through the above steps, the phone can calculate the final movement distance dy + D1 + D3 = -100 and refresh the screen display. From the user's perspective, the user sees the album interface directly updated from Figure 15 (a) to Figure 15 (f), indicating that the album interface has slid upward 100 pixels, without adding one or more rows of images to the bottom of the screen.

[0193] Example 5

[0194] FIG16 is a schematic diagram showing a scenario in which a user slides downward with one finger relative to the screen, the top of the custom RecyclerView slides downward into the screen, and the first row of the custom RecyclerView is not the first row of the album.

[0195] As shown in (a) of Figure 16, at the initial moment, the Y-axis coordinate of the top of the custom RecyclerView is y1 = -100 pixels, and the Y-axis coordinate of the bottom of the custom RecyclerView is y2 = 4300 pixels. The user can use a single finger to press the area corresponding to the actual adaptation position index 60 and slide down a distance of 600 pixels. At this moment, the distance from the bottom edge of the display to the bottom edge of the recycler view is the tenth distance. In the M3th reporting cycle, the mobile phone detects a downward sliding distance of 600 pixels, that is, dy = 600 pixels, also known as the eleventh distance. In response to the user's single-finger downward sliding operation (also known as the fourth operation), as shown in (b) of Figure 16, the mobile phone moves the custom RecyclerView down 600 pixels. At this moment, the Y-axis coordinate of the top of the custom RecyclerView is updated to y1 = -100 + 600 = 500 pixels, and the Y-axis coordinate of the bottom of the custom RecyclerView is updated to y2 = 4300 + 600 = 4900 pixels.

[0196] Then, the mobile phone executes the following three judgment steps in sequence.

[0197] The first judgment step:

[0198] The mobile phone obtains the actual layout position index value of the ItemView of the custom RecyclerView. As shown in (b) in Figure 16, the first actual layout position index value located in the first row and first column of the custom RecyclerView is actually LP1=81, and the last actual layout position index value located in the last row and last column of the custom RecyclerView is actually LP2=135. Among them, LP1 and LP2 can be calculated based on the actual AP value of the custom RecyclerView and the above relationship (1), which will not be repeated here. Then, the mobile phone judges the size of LP1=81 and LPmin=0 to determine whether the first row of the custom RecyclerView is the first row of the album. When the first row of the custom RecyclerView is the first row of the album, it means that the top ItemView of the custom RecyclerView can no longer update more images with smaller actual AP values. When moving the custom RecyclerView downward, if the top of the custom RecyclerView moves into the screen, in order to avoid a blank area between the top of the custom RecyclerView and the top of the screen, the phone needs to correct the position of the custom RecyclerView, that is, perform the first position correction on the custom RecyclerView to align the top of the custom RecyclerView with the top of the screen.

[0199] Because LP1 > LPmin, the first row of the custom RecyclerView is not the first row of the album. The custom RecyclerView does not yet contain the first image in the album. If the user continues to swipe down, the custom RecyclerView can still update the images corresponding to each ItemView, allowing the user to see other images in the album with smaller actual LP values ​​that are not yet displayed. Therefore, the phone does not need to perform the first position correction on the custom RecyclerView, as shown in Figure 16 (c). D1 = 0.

[0200] The second judgment step:

[0201] The phone compares the Y-axis coordinate y1 = 500 pixels at the top of the custom RecyclerView and the Y-axis coordinate y1 = 0 pixels at the top of the screen. Because y1 > y1, the top of the custom RecyclerView has slid into the screen. To allow the custom RecyclerView to carry more images with smaller actual LP values, the phone needs to move the custom RecyclerView upward.

[0202] For example, the phone can calculate the number of rows to move up according to the relationship:

[0203] Accordingly, the custom RecyclerView moves upward by a distance of 400 pixels * 2 rows = 800 pixels, that is, D2 = -800, also known as the twelfth distance.

[0204] As shown in (d) in Figure 16, after the custom RecyclerView moves upward by a distance of 800 pixels, the Y-axis coordinate of the top of the custom RecyclerView is updated to y1 = 500-800 = -300 pixels. In addition, the mobile phone can update the actual adaptation position index value of each ItemView according to the relationship: actual AP-2 rows * 3 columns, that is, subtract the second value from the AP value corresponding to each table item view. For example, the actual AP value of the first row of the custom RecyclerView is updated from 50, 51 and 52 as shown in (c) in Figure 16 to 44, 45 and 46 as shown in (d) in Figure 16, ..., and the actual AP value of the last row of the custom RecyclerView is updated from 80, 81 and 82 as shown in (c) in Figure 16 to 74, 75 and 76 as shown in (d) in Figure 16.

[0205] It can be understood that in the second judgment step, the mobile phone first moves the custom RecyclerView upward by 2 rows, and then reduces the AP values ​​corresponding to the ItemViews in the 2nd to 5th columns of the custom RecyclerView by 6 respectively, which is equivalent to not moving the ItemView, so that the user visually sees that the positions of each image on the screen remain unchanged.

[0206] The third judgment step:

[0207] The phone again obtains the actual layout position index value of the first ItemView of the custom RecyclerView. In the second judgment step, the custom RecyclerView moves up two rows, so the actual layout position index values ​​of each ItemView in the custom RecyclerView are reduced by 10. As shown in (e) of Figure 16, the first actual layout position index value of the custom RecyclerView is actual LP1 = 81 - 10 = 71, and the last actual layout position index value is actual LP2 = 135 - 10 = 125. The phone then determines the size of LP1 = 71 and LPmin = 0. Since LP1 > LPmin, the first row of the custom RecyclerView is not the first row of the album, and the custom RecyclerView does not yet contain the first image in the album. If the user continues to swipe down, the custom RecyclerView can still update the images corresponding to each ItemView, allowing the user to see other images in the album with smaller actual LP values ​​that are not yet displayed. Therefore, the phone does not need to perform a second position correction on the custom RecyclerView, and D3 = 0.

[0208] After obtaining dy = 600, D1 = 0, and D3 = 0 through the above steps, the phone can calculate the final movement distance D = dy + D1 + D3 = 600 and refresh the screen display. From the user's perspective, the user sees the album interface directly updated from Figure 16 (a) to Figure 16 (f), indicating that the album interface has slid down 600 pixels and two new rows of images have been added to the top of the screen.

[0209] Example 6

[0210] Figure 17 shows a schematic diagram of a scenario in which a user slides downward with one finger relative to the screen, the top of the custom RecyclerView slides downward (also called the second direction) into the screen, and the first row of the custom RecyclerView is the first row of the album.

[0211] As shown in (a) of Figure 17, at the initial moment, the Y-axis coordinate of the top of the custom RecyclerView is y1 = -100 pixels, and the Y-axis coordinate of the top of the custom RecyclerView is y2 = 4300 pixels. The user can use a single finger to press the area corresponding to the actual adaptation position index 10 and slide down a distance of 600 pixels. At this moment, the distance from the bottom edge of the display to the bottom edge of the recycler view is the thirteenth distance. In the M4th reporting cycle, the mobile phone detects a downward sliding distance of 600 pixels, that is, dy = 600 pixels, also known as the fourteenth distance. In response to the user's single-finger downward sliding operation (also known as the fifth operation), as shown in (b) of Figure 17, the mobile phone moves the custom RecyclerView down 600 pixels. At this moment, the Y-axis coordinate of the top of the custom RecyclerView is updated to y1 = -100 + 600 = 500 pixels, and the Y-axis coordinate of the bottom of the custom RecyclerView is updated to y2 = 4300 + 600 = 4900 pixels.

[0212] Then, the mobile phone executes the following three judgment steps in sequence.

[0213] The first judgment step:

[0214] The mobile phone obtains the actual layout position index value of the ItemView of the custom RecyclerView. As shown in (b) of Figure 17, the first actual layout position index value of the first row and first column of the custom RecyclerView is LP1=0, and the last actual layout position index value of the last row and last column of the custom RecyclerView is LP2=54. Among them, LP1 and LP2 can be calculated based on the actual AP value of the custom RecyclerView and the above relationship (1), which will not be repeated here. Then, the mobile phone judges the size of LP1=0 and LPmin=0 to determine whether the first row of the custom RecyclerView is the first row of the album. Since LP1=LPmin, the first row of the custom RecyclerView is the first row of the album, which means that the top ItemView of the custom RecyclerView cannot update more images with smaller actual AP values. When the custom RecyclerView is moved downward, if the top of the custom RecyclerView moves into the screen, in order to avoid a blank area between the top of the custom RecyclerView and the top of the screen, the custom RecyclerView needs to be corrected for the first time. As shown in (c) of Figure 17 , the phone can move the custom RecyclerView upward by (500-0)=500 pixels (also known as the fifteenth distance), that is, D1=-500. The Y-axis coordinate of the top of the custom RecyclerView is updated to y1=0 pixels. The top of the custom RecyclerView is aligned with the top of the screen.

[0215] The second judgment step:

[0216] The phone compares the Y-axis coordinate y1 of the top of the custom RecyclerView to 0 pixels and the Y-axis coordinate of the top of the screen to Y1 = 0 pixels. Since y1 = Y1, the top of the custom RecyclerView has not yet slid into the screen. Therefore, as shown in (d) in Figure 17, there is no need to move the custom RecyclerView upward to load the new image. That is, the position of the custom RecyclerView remains unchanged, and D2 = 0.

[0217] The third judgment step:

[0218] Since the custom RecyclerView does not move upward in the second judgment step, that is, the position of the custom RecyclerView remains unchanged, and there is no blank area between the top of the custom RecyclerView and the top of the screen, as shown in (e) in Figure 17, there is no need to perform a second position correction on the custom RecyclerView, and D3 = 0.

[0219] After obtaining dy = 600, D1 = -500, and D3 = 0 through the above steps, the phone can calculate the final movement distance D = dy + D1 + D3 = 100 and refresh the screen display. From the user's perspective, the user sees the album interface directly updated from Figure 17 (a) to Figure 17 (f), indicating that the album interface has slid downward 100 pixels, without adding one or more rows of images to the top of the screen.

[0220] Example 7

[0221] FIG18 is a schematic diagram showing a scenario in which a user slides downward with one finger relative to the screen, the top of the custom RecyclerView slides downward into the screen, and the first row of the custom RecyclerView is the second row of the album.

[0222] As shown in (a) of Figure 18, at the initial moment, the Y-axis coordinate of the top of the custom RecyclerView is y1 = -100 pixels, and the Y-axis coordinate of the bottom of the custom RecyclerView is y2 = 4300 pixels. The user can use a single finger to press the area corresponding to the actual adaptation position index 13 and slide down a distance of 600 pixels. At this moment, the distance from the bottom edge of the display to the bottom edge of the recycler view is the sixteenth distance. In the M5th reporting cycle, the mobile phone detects a downward sliding distance of 600 pixels, that is, dy = 600 pixels, also known as the seventeenth distance. In response to the user's single-finger downward sliding operation (also known as the sixth operation), as shown in (b) of Figure 18, the mobile phone moves the custom RecyclerView down 600 pixels. At this moment, the Y-axis coordinate of the top of the custom RecyclerView is updated to y1 = -100 + 600 = 500 pixels, and the Y-axis coordinate of the bottom of the custom RecyclerView is updated to y2 = 4300 + 600 = 4900 pixels.

[0223] Then, the mobile phone executes the following three judgment steps in sequence.

[0224] The first judgment step:

[0225] The phone obtains the actual layout position index value of the ItemView of the custom RecyclerView. As shown in (b) in Figure 18, the first actual layout position index value of the first row and first column of the custom RecyclerView is LP1=5, and the last actual layout position index value of the last row and last column of the custom RecyclerView is LP2=59. Then, the size of LP1=5 and LPmin=0 is judged to determine whether the first row of the custom RecyclerView is the first row of the album. Since LP1>LPmin, the first row of the custom RecyclerView is not the first row of the album, and the top ItemView of the custom RecyclerView can also update more images with smaller actual AP values. Therefore, as shown in (c) in Figure 18, there is no need to perform the first position correction on the custom RecyclerView, and D1=0.

[0226] The second judgment step:

[0227] The phone compares the Y-axis coordinate y1 = 500 pixels at the top of the custom RecyclerView and the Y-axis coordinate y1 = 0 pixels at the top of the screen. Because y1 > y1, the top of the custom RecyclerView has slid into the screen. To allow the custom RecyclerView to carry more images with smaller actual LP values, the phone needs to move the custom RecyclerView upward.

[0228] For example, the phone can calculate the number of rows to move up according to the relationship:

[0229] The current scenario is a single-finger downward swipe, and the Y-axis coordinate y1=500>0 of the top of the custom RecyclerView. In theory, the custom RecyclerView needs to be moved up 2 rows, but because the first row of the custom RecyclerView is the second row of the album, the custom RecyclerView can actually only move up 1 row.

[0230] Accordingly, the custom RecyclerView moves upward by: 400 pixels * 1 row = 400 pixels, that is, D2 = -400.

[0231] As shown in (d) in Figure 18, after the custom RecyclerView moves upward by a distance of 400 pixels, the Y-axis coordinate of the top of the custom RecyclerView is updated to y2 = 500-400 = 100 pixels. In addition, the mobile phone can update the actual adaptation position index value of each ItemView according to the relationship: actual AP-1 row * 3 columns. For example, the actual AP value of the first row of the custom RecyclerView is updated from 3, 4 and 5 as shown in (c) in Figure 18 to 0, 1 and 2 as shown in (d) in Figure 18, ..., and the actual AP value of the last row of the custom RecyclerView is updated from 33, 34, 35 as shown in (c) in Figure 18 to 30, 31, 32 as shown in (d) in Figure 18.

[0232] It can be understood that in the second judgment step, the mobile phone first moves the custom RecyclerView upward by one row, and then reduces the AP values ​​corresponding to the ItemViews in the second to fifth columns of the custom RecyclerView by 3 respectively, which is equivalent to not moving the ItemView, so that the user visually sees that the positions of each image on the screen remain unchanged.

[0233] The third judgment step:

[0234] The phone again obtains the first actual layout position index value of the custom RecyclerView. In the second judgment step, the custom RecyclerView moves up by one row, so the actual layout position index value of each ItemView in the custom RecyclerView is reduced by 5 (the number of columns in the custom RecyclerView). As shown in (d) in Figure 18, the first actual layout position index value of the custom RecyclerView is LP1=5-5=0, and the last actual layout position index value is LP2=59-5=54. Then, the size of LP1=0 and LPmin=0 is determined. Since LP1=LPmin, the first row of the custom RecyclerView is the first row of the album, and the top ItemView of the custom RecyclerView cannot be updated with more images with smaller actual AP values. When the custom RecyclerView is moved downward, if the top of the custom RecyclerView moves into the screen, in order to avoid a blank area between the top of the custom RecyclerView and the top of the screen, the custom RecyclerView needs to be corrected for the second time. As shown in (e) of Figure 18, the phone can move the custom RecyclerView upward by (100-0) = 100 pixels, that is, D3 = -100. At this point, the Y-axis coordinate of the top of the custom RecyclerView is updated to y1 = 0 pixels, and the top of the custom RecyclerView is aligned with the top of the screen. Among them, D2 and D3 are called the eighteenth distance.

[0235] After obtaining dy = 600, D1 = 0, and D3 = -100 through the above steps, the phone can calculate the final movement distance D = dy + D1 + D3 = 500 and refresh the screen display. From the user's perspective, the user sees the album interface shown in Figure 18 (a) directly updated to the album interface shown in Figure 18 (f). That is, the album interface has slid down 500 pixels and a new row of images has been added to the top of the screen.

[0236] Example 8

[0237] FIG19 is a schematic diagram showing a scenario in which a user slides downward with one finger relative to the screen, the top of the custom RecyclerView slides downward into the screen, and the first row of the custom RecyclerView is the third row of the album.

[0238] As shown in (a) of Figure 19, at the initial moment, the Y-axis coordinate of the top of the custom RecyclerView is y1 = -100 pixels, and the Y-axis coordinate of the bottom of the custom RecyclerView is y2 = 4300 pixels. The user can use a single finger to press the area corresponding to the actual adaptation position index 16 and slide down a distance of 1600 pixels. At this moment, the distance from the bottom edge of the display to the bottom edge of the recycler view is the sixteenth distance. In the M6th reporting cycle, the mobile phone detects a downward sliding distance of 1600 pixels, that is, dy = 1600 pixels, also known as the seventeenth distance. In response to the user's single-finger downward sliding operation (also known as the sixth operation), as shown in (b) of Figure 19, the mobile phone moves the custom RecyclerView down 1600 pixels. At this moment, the Y-axis coordinate of the top of the custom RecyclerView is updated to y1 = -100 + 1600 = 1500 pixels, and the Y-axis coordinate of the bottom of the custom RecyclerView is updated to y2 = 4300 + 1600 = 5900 pixels.

[0239] Then, the mobile phone executes the following three judgment steps in sequence.

[0240] The first judgment step:

[0241] The mobile phone obtains the actual layout position index value of the ItemView of the custom RecyclerView. As shown in (b) of Figure 19, the first actual layout position index value of the first row and first column of the custom RecyclerView is LP1=10, and the last actual layout position index value of the last row and last column of the custom RecyclerView is LP2=64. Among them, LP1 and LP2 can be calculated based on the actual AP value of the custom RecyclerView and the above relationship (1), which will not be repeated here. Then, the size of LP1=10 and LPmin=0 is judged to determine whether the first row of the custom RecyclerView is the first row of the album. Since LP1>LPmin, the first row of the custom RecyclerView is not the first row of the album. The custom RecyclerView has not yet carried the first image of the album. If the user continues to slide his finger down, the custom RecyclerView can still update the images corresponding to each ItemView, so that the user can see other images with smaller actual LP values ​​that have not yet been displayed in the album. Therefore, as shown in (c) of Figure 19, the mobile phone does not need to perform the first position correction on the custom RecyclerView, and D1=0.

[0242] The second judgment step:

[0243] The phone compares the Y-axis coordinate y1 of the top of the custom RecyclerView to 1500 pixels and the Y-axis coordinate of the top of the screen to y1 = 0 pixels. Because y1 > y1, the top of the custom RecyclerView has slid into the screen. To allow the custom RecyclerView to carry more images with smaller actual LP values, the phone needs to move the custom RecyclerView upward.

[0244] For example, the phone can calculate the number of rows to move up according to the relationship:

[0245] The current scene is sliding downward, and the Y-axis coordinate y1=1500>0 of the top of the custom RecyclerView. In theory, the custom RecyclerView needs to be moved up 4 rows, but because the first row of the custom RecyclerView is the third row of the album, the custom RecyclerView can actually only move up two rows.

[0246] Accordingly, the custom RecyclerView moves upward by 400 pixels * 2 rows = 800 pixels, that is, D2 = -800.

[0247] As shown in (d) in Figure 19, after the custom RecyclerView moves upward by a distance of 800 pixels, the Y-axis coordinate of the top of the custom RecyclerView is updated to y1 = 1500-800 = 700 pixels. In addition, the mobile phone can update the actual adaptation position index value of each ItemView according to the relationship: actual AP-2 rows * 3 columns. For example, the actual AP values ​​of the first row of the custom RecyclerView are updated from 6, 7, and 9 as shown in (c) in Figure 19 to 0, 1, and 2 as shown in (d) in Figure 19, respectively, and the actual AP values ​​of the last row of the custom RecyclerView are updated from 36, 37, and 38 as shown in (c) in Figure 19 to 30, 31, and 32 as shown in (d) in Figure 19.

[0248] It can be understood that in the second judgment step, the mobile phone first moves the custom RecyclerView upward by 2 rows, and then reduces the AP values ​​corresponding to the ItemViews in the 2nd to 5th columns of the custom RecyclerView by 6 respectively, which is equivalent to not moving the ItemView, so that the user visually sees that the positions of each image on the screen remain unchanged.

[0249] The third judgment step:

[0250] The phone again obtains the actual layout position index value of the first ItemView of the custom RecyclerView. As shown in Figure 19 (d), the first actual layout position index value of the custom RecyclerView is LP1 = 10 - 5 * 2 = 0, and the last actual layout position index value is LP2 = 64 - 5 * 2 = 54. The phone then determines the size of LP1 = 0 and LPmin = 0. Since LP1 = LPmin, the first row of the custom RecyclerView is the first row of the album, indicating that the top ItemView of the custom RecyclerView cannot update more images with smaller actual AP values. When the custom RecyclerView is moved downward, if the top of the custom RecyclerView moves into the screen, the phone needs to correct the position of the custom RecyclerView to avoid a blank area between the top of the custom RecyclerView and the top of the screen. This involves performing a second position correction on the custom RecyclerView. As shown in Figure 19 (e), the phone can move the custom RecyclerView upward by (700 - 0) = 700 pixels, i.e., D3 = -700. At this point, the Y-axis coordinate of the top of the custom RecyclerView is updated to y1 = 0 pixels, and the top of the custom RecyclerView is aligned with the top of the screen. Among them, D2 and D3 are called the eighteenth distance.

[0251] After obtaining dy = 1600, D1 = 0, and D3 = -700 through the above steps, the phone can calculate the final movement distance D = dy + D1 + D3 = 900 and refresh the screen display. From the user's perspective, the user sees the album interface shown in Figure 19 (a) directly updated to the album interface shown in Figure 19 (f). That is, the album interface has slid down 900 pixels, and two new rows of images have been added to the top of the screen.

[0252] It should be noted that the above eight examples are based on the custom RecyclerView in gear 3, and list some common image scrolling scenarios, which do not limit this application. It should be understood that in actual implementation, the user can trigger the phone to change the gear of the custom RecyclerView by zooming in and out on the screen, changing the number of image columns displayed on the screen, thereby changing the actual adaptation position index value in the custom RecyclerView.

[0253] In addition, the above 8 examples are illustrated by taking the example of displaying a scrolling image based on a custom RecyclerView as an example. In actual implementation, you can also refer to the above examples to display a scrolling list based on a custom RecyclerView. In addition, this application does not specifically limit the scrolling direction of the custom RecyclerView. For example, in response to the user's left swipe operation, the custom RecyclerView scrolls in the left direction. When it scrolls to the right edge of the RecyclerView, the electronic device moves the entire RecyclerView to the right and refills the content in the RecyclerView. For another example, in response to the user's right swipe operation, the custom RecyclerView scrolls in the right direction. When it scrolls to the left edge of the RecyclerView, the electronic device moves the entire RecyclerView to the left and refills the content in the RecyclerView.

[0254] Based on the above 8 examples, this application also provides a software architecture diagram of an improved electronic device and a general flow chart corresponding to the image scrolling solution based on a custom RecyclerView.

[0255] Based on the touch event receiving layer, custom RecyclerView, grid layout manager, and custom layout manager shown in FIG4 , the specific interaction process between the various functional modules in the process of implementing the image scrolling method based on the custom RecyclerView is described in detail below.

[0256] For example, a flow chart of an image scrolling method based on a custom RecyclerView is shown in Figure 20. As shown in Figure 20, the method may include the following S1 to S21.

[0257] S1: The touch driver samples the user's touch operation according to a period T.

[0258] The above cycle, also called the control cycle or the reporting cycle, is the cycle in which the touch driver collects the user's touch operations.

[0259] For example, the touch driver collects touch data 240 times per second. The period T = 1 / 240 = 4.16ms, meaning the touch driver collects touch data every 4.16ms. If the user presses the touchscreen with one or two fingers during this period, the touch driver can determine the touch location based on voltage changes and other factors.

[0260] S2: The touch driver receives a click operation on the icon of the gallery application from the user and starts running the gallery application.

[0261] Exemplarily, when a user wants to view an image, the user can click on the gallery icon as shown in (a) in Figure 8. The touch driver receives the user's click operation on the gallery icon and passes the click operation to the application processor. The application processor runs the gallery application. The gallery application then initializes the touch event receiving layer, custom RecyclerView, grid layout manager, and custom layout manager. After the creation and initialization are completed, the mobile phone displays the gallery interface as shown in (b) in Figure 8. The user can then select an album card from these album cards. For example, as shown in (b) in Figure 8, the user can click on the "Camera" card. In response to the user's click operation on the "Camera" card, the mobile phone displays the camera album interface as shown in (c) in Figure 8.

[0262] At time t1, the touch screen receives a single-finger tap on an album interface and sends the coordinates (x1, y1) corresponding to the tap to the touch event receiving layer. The touch event receiving layer forwards the coordinates (x1, y1) to the custom RecyclerView. The recycler view records the coordinates (x1, y1).

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

[0264] At time t1+T, the touchscreen receives a single-finger move on the photo album screen and sends the coordinates (x2, y2) corresponding to the single-finger move to the touch event receiving layer. The touch event receiving layer forwards the coordinates (x2, y2) to the custom RecyclerView. The recycler view control records the coordinates (x2, y2).

[0265] In combination with the descriptions of Examples 1 to 8 above, if a coordinate system is established with the upper left corner of the layer receiving the touch event as the origin, the X-axis horizontally to the right, and the Y-axis vertically downward, then the coordinates (x1, y1) of the above S3 and the coordinates (x2, y2) of the above S4 are both determined with reference to this coordinate system.

[0266] S5, the custom RecyclerView calculates the moving distance in the Y-axis direction according to the coordinates (x2, y2) recorded in this cycle and the coordinates (x1, y1) recorded in the previous cycle: dy = y2-y1.

[0267] S6, the custom RecyclerView passes the moving distance dy to the grid layout manager, the grid layout manager passes the moving distance dy to the custom layout manager, and the custom layout manager then passes the moving distance dy back to the custom RecyclerView.

[0268] The grid-style layout manager is a native manager of the Android system, which is used to manage the position and size of the ItemView component in the custom RecyclerView. In the native process of the Android system, the custom RecyclerView needs to first send the moving distance dy to the grid-style layout manager, but the grid-style layout manager does not have the function of directly returning data to the custom RecyclerView, so this application provides a custom layout manager. The custom layout manager serves as a bridge between the grid-style layout manager and the custom RecyclerView, and plays the role of data return. In the solution of this application, the grid-style layout manager can first pass the moving distance dy to the custom layout manager, and the custom layout manager then returns the moving distance dy to the custom RecyclerView.

[0269] It should be noted that the above S6 is an optional implementation method, which does not limit the present application. In actual implementation, the following S7 may also be executed directly after the above S5.

[0270] S7, custom RecyclerView moves distance dy.

[0271] The custom RecyclerView in S7 is a grid list created during initialization, such as the grid columns shown in FIG5 . This grid list can be used to display images in an album.

[0272] Referring to the descriptions of Examples 1 to 4 above, when the user swipes up on the screen with one finger, and dy < 0, the custom RecyclerView moves up by a distance of -dy. For example, when the user swipes up 300 pixels with one finger, the custom RecyclerView moves up by 300 pixels.

[0273] Referring to the descriptions in Examples 5 to 8 above, when the user swipes down on the screen with one finger and dy > 0, the custom RecyclerView moves down by a distance dy. For example, when the user swipes down 600 pixels with one finger on the screen, the custom RecyclerView moves down by 600 pixels.

[0274] S8, the custom RecyclerView obtains the actual layout position index value LP1 of the first ItemView and the actual layout position index value LP2 of the last ItemView.

[0275] Referring to the description of the above embodiment, after the custom RecyclerView moves a distance dy, the upper or lower edge of the custom RecyclerView may move into the screen, resulting in a blank area on the screen. In order to avoid a blank area between the bottom of the custom RecyclerView and the bottom of the screen, or between the top of the custom RecyclerView and the top of the screen, S8-S14 need to be executed to determine whether the custom RecyclerView needs to be corrected.

[0276] S9, the custom RecyclerView determines whether the actual layout position index value LP1 points to the first image in the album.

[0277] Exemplarily, the custom RecyclerView may judge the actual layout position index value LP1 of the first ItemView and the size of LPmin=0 to determine whether the actual layout position index value LP1 points to the first image in the album.

[0278] If LP1 = LPmin, then it can be determined that the actual layout position index value LP1 points to the first image in the album and has slid to the first row of the album. The top ItemView of the custom RecyclerView cannot update more images with smaller actual AP values. When the custom RecyclerView is moved downward, if the top of the custom RecyclerView moves into the screen, a blank area may appear between the top of the custom RecyclerView and the top of the screen. To avoid the blank area, the custom RecyclerView executes the following S10 to calculate the moving distance D1 for the first position correction.

[0279] If LP1 > LPmin, then it can be determined that the actual layout position index value LP1 does not yet point to the first image in the album and has not yet slid to the first row of the album. The top ItemView of the custom RecyclerView can still be updated with more images with smaller actual AP values. The custom RecyclerView executes the following S11.

[0280] S10, the custom RecyclerView determines the moving distance D1 according to the coordinate Y1 of the top of the screen and the coordinate y1 of the top of the custom RecyclerView.

[0281] The “coordinate y1 of the top of the custom RecyclerView” in the above S10 refers to the coordinate of the top of the custom RecyclerView after moving the distance dy.

[0282] When a single finger swipes downward and the actual layout position index value LP1 points to the first image in the album, the custom RecyclerView can calculate the movement distance using the following relationship: D1 = Y1 - y1. Where Y1 represents the coordinate of the top of the screen, and y1 represents the coordinate of the top of the custom RecyclerView.

[0283] For example, taking Figure 17 as an example, the coordinate Y1 of the top of the screen is 0, the coordinate y1 of the top of the custom RecyclerView is 500, and D1 is -500. Then, the custom RecyclerView is moved upward by a distance of 500, and the coordinate of the top of the custom RecyclerView is updated to y1'=500-500=0.

[0284] S11, the custom RecyclerView determines whether the actual layout position index value LP2 points to the last image in the album.

[0285] For example, the custom RecyclerView may determine the size of the actual layout position index value LP2 and LPmax of the last ItemView to determine whether the actual layout position index value LP2 points to the last image in the album.

[0286] If LP2 = LPmax, then it can be determined that the actual layout position index value LP2 points to the last image in the album, and has slid to the last row of the album. The ItemView at the bottom of the custom RecyclerView can no longer update more images with larger actual AP values. When the custom RecyclerView is moved upward, if the bottom of the custom RecyclerView moves into the screen, a blank area may appear between the bottom of the custom RecyclerView and the bottom of the screen. To avoid the blank area, the custom RecyclerView executes the following S12 to calculate the moving distance D1 for the first position correction.

[0287] If LP2 < LPmax, then it can be determined that the actual layout position index value LP2 does not yet point to the last image in the album, and has not yet slid to the last row of the album. The bottom ItemView of the custom RecyclerView can still update more images with larger actual AP values. Therefore, the custom RecyclerView does not need to perform the first position correction, that is, execute the following S13.

[0288] S12, the custom RecyclerView determines the moving distance D1 according to the coordinate Y2 of the bottom of the screen and the coordinate y2 of the bottom of the custom RecyclerView.

[0289] The “coordinate y1 of the bottom of the custom RecyclerView” in the above S10 refers to the coordinate of the bottom of the custom RecyclerView after moving the distance dy.

[0290] When a single finger swipes upward and the actual layout position index value LP2 points to the last image in the album, the custom RecyclerView can calculate the movement distance using the following relationship: D1 = Y2 - y2. Where Y2 represents the coordinates of the bottom of the screen, and y2 represents the coordinates of the bottom of the custom RecyclerView.

[0291] For example, taking Figure 14 as an example, the coordinate Y2 of the bottom of the screen is 2400, the coordinate y2 of the bottom of the custom RecyclerView is 2200, and D1 is 200. Then, the custom RecyclerView is moved downward by a distance of 200, and the coordinate of the bottom of the custom RecyclerView is updated to y2'=2200+200=2400.

[0292] S13, the custom RecyclerView determines the moving distance D1 = 0.

[0293] When the actual layout position index value LP1 does not point to the first image of the album, and the actual layout position index value LP2 does not point to the last image of the album, the custom RecyclerView does not need to move up or down, so the custom RecyclerView determines that the moving distance D1 = 0.

[0294] It should be noted that the above embodiment is described by taking the example of executing S9 first and then executing S11, which does not limit the present application. As an example, S11 may be executed first and then S9. As another example, if dy<0, it means that a single finger is swiping upwards, and it is possible to slide to the last image in the album, so it is only necessary to determine whether the actual layout position index value LP2 points to the last image in the album; if dy>0, it means that a single finger is swiping downwards, and it is possible to slide to the first image in the album, so it is only necessary to determine whether the actual layout position index value LP1 points to the first image in the album.

[0295] The above S10, S12 and S13 are selectively executed. Based on S10, S12 or S13, the moving distance D1 can be calculated. After S10, S12 or S13, the following S14 can also be included.

[0296] S14, customizing RecyclerView to move the distance D1 according to the moving distance D1.

[0297] It can be understood that if the moving distance D1 is obtained through S10, the current scene is a one-finger downward sliding scene, D1 = Y1-y1 < 0, and the custom RecyclerView needs to be moved upward. If the moving distance D1 is obtained through S12, the current scene is a one-finger upward sliding scene, D1 = Y2-y2 > 0, and the custom RecyclerView needs to be moved downward. If the moving distance D1 is obtained through S13, the first position correction of the custom RecyclerView is not performed.

[0298] S15, the custom RecyclerView re-obtains the coordinate y1' of the top of the custom RecyclerView and the coordinate y2' of the bottom of the custom RecyclerView.

[0299] It can be understood that if the moving distance D1 is obtained through S10 or S12, the coordinate y1' at the top of the custom RecyclerView and the coordinate y2' at the bottom of the custom RecyclerView are updated, so that y1'≠y1, y2'≠y2. If the moving distance D1 is obtained through S13, the coordinate y1' at the top of the custom RecyclerView and the coordinate y2' at the bottom of the custom RecyclerView are not updated, so that y1'=y1, y2'=y2.

[0300] S16, the custom RecyclerView determines whether the coordinate y1' of the top of the custom RecyclerView is greater than the coordinate Y1 of the top of the screen.

[0301] If y1'>Y1, it means that the top of the custom RecyclerView has been slid into the screen. In order to enable the custom RecyclerView to carry more images with smaller actual LP values, the custom RecyclerView needs to be moved upward and the following S17 is executed.

[0302] If y1'≤Y1, it means that the top of the custom RecyclerView has not been slid into the screen, so there is no need to move the custom RecyclerView upward, and the following S18 is executed.

[0303] S17 , the custom RecyclerView determines a moving distance D2 based on the coordinate y1 ′ of the top of the custom RecyclerView and the coordinate Y1 of the top of the screen.

[0304] For a one-finger downward swipe scenario, if y1'>y1, then the custom RecyclerView can calculate the number of rows to move up according to the relationship:

[0305] Among them, s1' represents the number of rows of the custom RecyclerView planned to move up, m represents the side length of a single ItemView in the custom RecyclerView, Y1 represents the coordinate of the top of the screen, and y1' represents the coordinate of the top of the custom RecyclerView.

[0306] Referring to the description of Figure 16, the first row of the custom RecyclerView may be the middle row of the album. When the user swipes downward with one finger, the probability of sliding to the first row of the album is low, so that the number of rows s1' will not exceed the actual number of movable rows, and there is no need to correct the number of rows s1'. Referring to the description of Figures 18 and 19, the first row of the custom RecyclerView may be the second to last row or the third to last row of the album. When the user swipes upward with one finger, the probability of sliding to the first row of the album is high, so that the number of rows s1' exceeds the actual number of movable rows, and the number of rows s1' may need to be corrected. Among them, the actual number of movable rows can be determined based on the total number of images in the album and the actual AP value of the custom RecyclerView, which refers to the maximum number of rows of ItemView allowed to be added at the top of the custom RecyclerView.

[0307] In view of the above problems, the embodiment of the present application further provides a solution for correcting the number of rows s1':

[0308] Among them, s2' represents the maximum number of rows that the custom RecyclerView is allowed to move upward, LPmin points to the first image of the album (for example, LPmin=0), LP1 is the first image pointed to by the custom RecyclerView, and gmax represents the maximum gear of the custom RecyclerView.

[0309] The custom RecyclerView can calculate the number of rows that are ultimately moved upwards according to the relationship: s′=min(s1′, s2′).

[0310] Among them, s' represents the number of rows that the custom RecyclerView will eventually move upward, and min() is the minimum value function.

[0311] Accordingly, the custom RecyclerView can determine the moving distance: D2 = s'*m = min(s1', s2')*m. Where s' represents the number of rows that the custom RecyclerView will eventually move upward, and m represents the side length of a single ItemView in the custom RecyclerView.

[0312] In addition, the custom RecyclerView can update the actual adaptation position index value of each ItemView according to the relationship: AP-s'*g. Among them, AP represents the actual adaptation position index value of an ItemView, s' represents the number of rows that the custom RecyclerView will eventually move up, and g represents the gear position of the custom RecyclerView.

[0313] For example, as shown in Figure 16, y1=500>Y1=0, s′ = min(s1′, s2′) = min(2, 17) = 2. Accordingly, the custom RecyclerView moves upward by 400 pixels * 2 rows = 800 pixels, or D2 = -800. Additionally, the actual fit position index value of each ItemView can be updated based on the actual AP-6. For example, the actual fit position index values ​​50, 51, and 52 of the first row of the custom RecyclerView can be updated to 44, 45, and 46, respectively.

[0314] For another example, as shown in FIG18, y1=500>Y1=0, s′=min(s1′, s2′)=min(2, 1)=1. Accordingly, the distance the custom RecyclerView moves upward is: 400 pixels * 1 row = 400 pixels, that is, D2=-400. In addition, the actual adaptation position index value of each ItemView can be updated according to the actual AP-3. For example, the actual adaptation position index values ​​3, 4, and 5 of the first row of the custom RecyclerView are updated to 0, 1, and 2 respectively.

[0315] For another example, as shown in FIG19, y1=1500>Y1=0, s′ = min(s1′, s2′) = min(4, 2) = 2. Accordingly, the custom RecyclerView moves upward by 400 pixels * 2 rows = 800 pixels, or D2 = -800. Additionally, the actual fit position index value of each ItemView can be updated based on the actual AP minus 6. For example, the actual fit position index values ​​6, 7, and 9 of the first row of the custom RecyclerView can be updated to 0, 1, and 2, respectively.

[0316] S18, the custom RecyclerView determines whether the coordinate y2' of the bottom of the custom RecyclerView is smaller than the coordinate Y2 of the bottom of the screen.

[0317] If y2'<Y2, it means that the bottom of the custom RecyclerView has been slid into the screen. In order to enable the custom RecyclerView to carry more images with larger actual LP values, the custom RecyclerView needs to be moved downward and the following S19 is executed.

[0318] If y2' ≥ Y2, it indicates that the bottom of the custom RecyclerView has not yet been slid into the screen, so there is no need to move the custom RecyclerView downward, and the following S20 is executed.

[0319] S19, the custom RecyclerView determines a moving distance D2 according to the coordinate y2' of the bottom of the custom RecyclerView and the coordinate Y2 of the bottom of the screen.

[0320] For the one-finger upward sliding scenario, if y2'<Y2, then the custom RecyclerView can calculate the number of rows to move the custom RecyclerView downward according to the relationship:

[0321] Among them, s1 represents the number of rows of the custom RecyclerView planned to move down, m represents the side length of a single ItemView in the custom RecyclerView, Y2 represents the coordinates of the bottom of the screen, and y2 represents the coordinates of the bottom of the custom RecyclerView.

[0322] Referring to the description for Figure 13, the last row of the custom RecyclerView may be the middle row of the album. When the user swipes upward with one finger, the probability of sliding to the last row of the album is low, so that the number of rows s1 will not exceed the actual number of movable rows, and there is no need to correct the number of rows s1. Referring to the description for Figure 16, the last row of the custom RecyclerView may be the second to last row of the album. When the user swipes upward with one finger, the probability of sliding to the last row of the album is high, so that the number of rows s1 exceeds the actual number of movable rows, and the number of rows s1 may need to be corrected. Among them, the actual number of movable rows can be determined based on the total number of images in the album and the actual AP value of the custom RecyclerView, which refers to the maximum number of ItemView rows allowed to be added at the bottom of the custom RecyclerView.

[0323] In view of the above problems, the embodiment of the present application further provides a solution for correcting the number of rows s1:

[0324] Among them, s2 indicates the maximum number of rows that the custom RecyclerView is allowed to move down, LP2 points to the last image in the album, LPmax is the last image pointed to by the custom RecyclerView, and gmax indicates the maximum gear of the custom RecyclerView.

[0325] The custom RecyclerView can calculate the number of rows that are ultimately moved downward according to the relationship: s=min(s1, s2).

[0326] Among them, s represents the number of rows of the custom RecyclerView that are finally moved downward, and min() is the minimum value function.

[0327] Accordingly, the custom RecyclerView can determine the moving distance: D2 = s'*m = min(s1, s2)*m. Where s represents the number of rows that the custom RecyclerView will eventually move upward, and m represents the side length of a single ItemView in the custom RecyclerView.

[0328] In addition, the custom RecyclerView can update the actual adaptation position index value of each ItemView according to the relationship: AP + s * g. Among them, s represents the number of rows that the custom RecyclerView will eventually move down, and g represents the current gear of the custom RecyclerView.

[0329] For example, as shown in Figure 13, y2 = 2200 <Y2=2400, s = min(s1, s2) = min(1, 106) = 1. Accordingly, the custom RecyclerView moves downward by a distance of 400 pixels * 1 row = 400 pixels, i.e., D2 = 400. In addition, the actual adaptation position index value of each ItemView can be updated according to the actual AP + 3. For example, the actual adaptation position index values ​​148, 149, and 150 of the first row of the custom RecyclerView are updated to 151, 152, and 153 respectively.

[0330] For example, as shown in Figure 15, y2 = 2200 <Y2=2400, s = min(s1, s2) = min(3, 1) = 1. Accordingly, the custom RecyclerView moves downward by a distance of 400 pixels * 1 row = 400 pixels, i.e., D2 = 400. In addition, the actual adaptation position index value of each ItemView can be updated according to the actual AP + 3. For example, the actual adaptation position index values ​​466, 467, and 468 of the first row of the custom RecyclerView are updated to 469, 470, and 471 respectively.

[0331] S20, the custom RecyclerView determines that the moving distance D2 = 0.

[0332] The above S17, S19 and S20 are selectively executed. Based on S17, S19 or S20, the moving distance D2 can be calculated. After S17, S19 or S20, the following S21 can also be included.

[0333] S21, the custom RecyclerView moves a distance D2 according to the moving distance D2, and refreshes the actual AP and actual LP of each ItemView in the custom RecyclerView.

[0334] If the moving distance D2 is obtained through S17, the current scene is a one-finger downward sliding scene, and the custom RecyclerView needs to be moved upward. For the calculation method of the moving distance D2 and the method of refreshing the actual AP and the actual LP, please refer to the description of S17 above, which will not be repeated here.

[0335] If the moving distance D2 is obtained through S19, the current scene is a one-finger upward sliding scene, and the custom RecyclerView needs to be moved downward. For the calculation method of the moving distance D2 and the method of refreshing the actual AP and the actual LP, please refer to the description of S19 above, which will not be repeated here.

[0336] If the moving distance D2 is obtained through S20, the actual AP and actual LP of each ItemView in the custom RecyclerView are not refreshed, compared to not moving the custom RecyclerView.

[0337] S22, the custom RecyclerView re-obtains the actual layout position index value LP1' of the first ItemView and the actual layout position index value LP2' of the last ItemView.

[0338] Referring to the description of the above embodiment, if the mobile phone moves the custom RecyclerView downward or upward in S15-S21, it is necessary to refresh the images corresponding to each ItemView in the custom RecyclerView so that the user can visually see that the position of the image on the screen remains unchanged. This may cause the last row of the refreshed custom RecyclerView to become the last row of the album, thereby causing the upper or lower edge of the custom RecyclerView to be located within the screen. In order to avoid a blank area between the bottom of the custom RecyclerView and the bottom of the screen, it is necessary to execute S22-S28 to determine whether the custom RecyclerView needs to be repositioned again.

[0339] S23, the custom RecyclerView determines whether the actual layout position index value LP1' points to the first image in the album.

[0340] If LP1′=LPmin, it can be determined that the actual layout position index value LP1′ points to the first image in the album, and the customized RecyclerView executes the following S24 to calculate the moving distance D3 for the second position correction.

[0341] If LP1′>LPmin, it can be determined that the actual layout position index value LP1′ does not point to the first image in the album, and the customized RecyclerView executes the following S25.

[0342] S24, the custom RecyclerView determines the movement distance D3 according to the coordinate Y1 of the top of the screen and the coordinate y1' of the top of the custom RecyclerView.

[0343] The coordinate y1" of the top of the custom RecyclerView in S24 above refers to the top coordinate of the custom RecyclerView after moving the distance D2.

[0344] When a single finger slides downwards and the actual layout position index value LP1’ points to the first image of the photo album, the custom RecyclerView can calculate the moving distance using the following relational expression: D3 = Y1 - y1”. Here, Y1 represents the coordinate of the top of the screen, and y1” represents the coordinate of the top of the custom RecyclerView.

[0345] S25, the custom RecyclerView determines whether the actual layout position index value LP2’ points to the last image of the photo album.

[0346] If LP2’ = LPmax, it can be determined that the actual layout position index value LP2’ points to the last image of the photo album, and the custom RecyclerView executes the following S26 to calculate the moving distance D3 for the second position correction.

[0347] If LP2’ < LPmax, it can be determined that the actual layout position index value LP2’ has not pointed to the last image of the photo album, and the custom RecyclerView does not need to perform the second position correction, that is, it executes the following S27.

[0348] S26, the custom RecyclerView determines the moving distance D3 based on the coordinate Y2 of the bottom of the screen and the coordinate y2” of the bottom of the custom RecyclerView.

[0349] The coordinate y1” of the bottom of the custom RecyclerView in the above S26 refers to the coordinate of the bottom of the custom RecyclerView after the moving distance D2.

[0350] When a single finger slides upwards and the actual layout position index value LP2’ points to the last image of the photo album, the custom RecyclerView can calculate the moving distance using the following relational expression: D3 = Y2 - y2”. Here, Y2 represents the coordinate of the bottom of the screen, and y2 represents the coordinate of the bottom of the custom RecyclerView.

[0351] S27, the custom RecyclerView determines that the moving distance D3 = 0.

[0352] The above S24, S26, and S27 are executed alternatively. Based on S24, S26, or S27, the moving distance D3 can be calculated. After S24, S26, or S27, the following S28 may also be included.

[0353] S28, the custom RecyclerView moves by the moving distance D3 according to the moving distance D3.

[0354] For the specific implementation of S22 to S28, please refer to the relevant description of S8 to S14 above, which will not be repeated here.

[0355] S29, the custom RecyclerView notifies SurfaceFlinger to update the album interface, and then SurfaceFlinger sends it to the display.

[0356] It should be noted that S4 to S29 can be completed within a vertical synchronization (Vsync) signal cycle. Taking the screen refresh rate of 120Hz as an example, the display driver sends a Vsync signal to SurfaceFlinger every 8.3 milliseconds. When a Vsync signal arrives, if the movement, refresh, and rendering synthesis of the recycler view have been completed through S4 to S29, the recycler view that has completed all movements and refreshes (that is, a frame of image to be displayed) can be passed to the display driver, so that the display updates the screen content. If the recycler view has not been moved and refreshed when a Vsync signal arrives, the display continues to display the previous screen content.

[0357] S30: The custom RecyclerView returns the actual scroll distance D collected within a period T to the custom layout manager. Where D = dy + D1 + D3. The layout manager is defined to forward the actual scroll distance D = dy + D1 + D3 collected within a period T to the grid layout manager.

[0358] S31: The grid layout manager determines, based on actual scrolling distances collected within multiple cycles T, whether the user operation is an inertial sliding operation or a hand-following sliding operation.

[0359] As an example, the grid layout manager can send the actual scroll distance collected within multiple periods T to the native recycler view control. Then, the native recycler view control determines whether the user operation is an inertial sliding operation or a hand-following sliding operation based on the actual scroll distance collected within multiple periods T.

[0360] If the actual scrolling distance collected within multiple cycles T is less than or equal to the preset scrolling distance, it means that the single-finger sliding speed is slow and the user operation is a hand-following sliding operation, so there is no need to trigger scrolling to display a large number of images.

[0361] If the actual scrolling distance collected within multiple cycles T is greater than or equal to the preset scrolling distance, it means that the single-finger sliding speed is fast and the user operation is an inertial sliding operation, which requires triggering the scrolling display of a large number of images. Specifically, the native recycler view control can scroll the custom RecyclerView in the same direction as the single-finger sliding direction by a first distance, and the first distance is directly proportional to the actual scrolling distance collected within multiple cycles T. In this way, after the user ends the single-finger inertial sliding operation, the album interface will continue to scroll down for a distance as if there is inertia, thereby achieving a large number of image updates.

[0362] In the above solution, when the user swipes up or down in the gallery with a single finger, the custom RecyclerView will also scroll in the same direction as the single-finger swipe. When scrolling to the top or bottom of the custom RecyclerView, the electronic device moves the entire custom RecyclerView in the opposite direction of the single-finger swipe and refills the custom RecyclerView with content. In this way, only the moved custom RecyclerView needs to be filled with content, without creating a new row of ItemViews at the top or bottom of the custom RecyclerView, nor does it need to remeasure the size and calculate the position of each ItemView in the custom RecyclerView. This optimizes the data processing process and shortens the data processing time when scrolling images in the gallery, thus solving the frame drop problem.

[0363] For example, FIG21 is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present application.

[0364] As shown in FIG21 , the electronic device 100 may include a processor 110, an internal memory 120, a button 130, a sensor module 140, a display 150, an audio module 160, a speaker 160A, a receiver 160B, a microphone 160C, an earphone jack 160D, etc. The sensor module may include a touch sensor.

[0365] The processor 110 may be configured to execute the scrolling display method in the above embodiment. The processor 110 may include one or more processing units, for example, the processor 110 may include a central processing unit (CPU), a graphics processing unit (GPU), an application processor (AP), an image signal processor (ISP), etc.

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

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

[0368] A touch sensor, also known as a "touch panel," can be provided on the display screen 150. The touch sensor and the display screen 150 form a touch screen, also known as a "touch screen." The touch sensor can be used to detect touch operations applied to or near the touch sensor. 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 other embodiments, the touch sensor can also be provided on the surface of the electronic device 100, at a location different from that of the display screen 150.

[0369] The present application also provides a computer-readable storage medium having computer instructions stored therein. When the computer-readable storage medium is run on an electronic device, the electronic device executes the method described in the above embodiment. The computer instructions can be stored in a computer-readable storage medium or transferred from one computer-readable storage medium to another computer-readable storage medium. The computer-readable storage medium can be any available medium that can be accessed by a computer or a data storage device such as a server or data center that can be integrated with one or more media. The available medium can be a magnetic medium, an optical medium, or a semiconductor medium, etc.

[0370] An embodiment of the present application further provides a computer program product, which includes a computer program code. When the computer program code runs on an electronic device, the electronic device executes the methods in the above embodiments.

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

[0372] 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 simply a way to describe the association relationship between related objects, indicating that three relationships can exist. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone.

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

[0374] Through the description of the above implementation methods, those skilled in the art can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional modules is used as an example. In actual applications, the above-mentioned functions can be distributed and completed by 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. In addition, the functional units in the various embodiments of the present 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 above-mentioned integrated units can be implemented in the form of hardware or in the form of software functional units.

[0375] The above content is only a specific embodiment of this application, but the scope of protection of this application is not limited to this. Any changes or replacements within the technical scope disclosed in this application should be included in the scope of protection of this application. Therefore, the scope of protection of this application should be based on the scope of protection of the claims.

Claims

1. A scrolling display method, characterized in that: Applied to an electronic device having a display screen, the method includes: Displaying first content based on a recycler view in the display screen, where a size of the recycler view is larger than a size of the display screen, a distance from a lower edge of the display screen to a lower edge of the recycler view is a first distance, and an edge of the recycler view is located outside the display screen; receiving a first operation of a user sliding on the display screen along a first direction for a second distance, where the first direction is a direction from a lower edge of the display screen to an upper edge of the display screen, and the second distance is greater than the first distance; In response to the first operation, the recycler view is moved a third distance along a second direction, and second content based on the recycler view is displayed on the display screen, wherein the second direction is opposite to the first direction, and the third distance is greater than or equal to the difference between the second distance and the first distance.

2. The method according to claim 1, characterized in that The recycler view includes M rows and N columns of table item views, each of which is used to display an image or a table; The first content is a first grid interface, the second content is a second grid interface, and the first grid interface and the second grid interface have the same number of image columns; or, the first content is a first list, the second content is a second list, and the first list and the second list have the same number of table columns.

3. The method according to claim 2, characterized in that The item view of the recycler view is used to display images in an album; before the recycler view is moved in response to the first operation, and after the recycler view is moved in response to the first operation, the last row of images in the recycler view does not include the last image of the album.

4. The method according to claim 1, wherein Before moving the recycler view along the second direction by a third distance, the method further includes: The third distance is determined according to a lower edge of the recycler view, a lower edge of the display screen, the second distance, and a side length of the item view in the recycler view.

5. The method according to any one of claims 1 to 4, characterized in that The first content is the first grid interface; Before displaying the second content based on the recycler view in the display screen, the method further includes: Add the first value to the adaptation position index AP value corresponding to each item view in the recycler view; Among them, the AP value is used to represent the number of the image displayed in the table item view, and the first numerical value is determined based on the bottom edge of the recycler view, the bottom edge of the display screen, the second distance, the side length of the table item view in the recycler view and the number of columns of the first grid interface.

6. The method according to any one of claims 1 to 5, characterized in that A distance from a lower edge of the display screen to a lower edge of the recycler view is a fourth distance, and an edge of the recycler view is located outside the display screen; The method further comprises: receiving a second operation of a user sliding on the display screen along the first direction for a fifth distance, the fifth distance being greater than the fourth distance; In response to the second operation, moving the recycler view along the first direction by a sixth distance and displaying third content based on the recycler view on the display screen, wherein the sixth distance is equal to the difference between the second distance and the first distance, and a distance from a bottom edge of the display screen to a bottom edge of the recycler view is 0; Before the recycler view is moved in response to the second operation, and after the recycler view is moved in response to the second operation, the last row of images in the recycler view includes the last image of the album.

7. The method according to any one of claims 1 to 5, characterized in that A distance from a lower edge of the display screen to a lower edge of the recycler view is a seventh distance, and an edge of the recycler view is outside the display screen; The method further comprises: receiving a third operation of a user sliding on the display screen along the first direction by an eighth distance, the eighth distance being greater than the seventh distance; In response to the third operation, moving the recycler view along the first direction by a ninth distance and displaying fourth content based on the recycler view on the display screen, wherein the ninth distance is less than a difference between the eighth distance and the seventh distance, and a distance from a bottom edge of the display screen to a bottom edge of the recycler view is zero; Before the recycler view is moved in response to the third operation, the last row of images in the recycler view does not include the last image of the album; after the recycler view is moved in response to the third operation, the last row of images in the recycler view includes the last image of the album.

8. The method according to claim 7, characterized in that Before moving the recycler view along the first direction by a sixth distance, the method further includes: Determining the sixth distance according to the actual layout position LP value of the last item view of the recycler view, the LP value of the last image in the album, the side length of the item view in the recycler view, and the number of columns of the recycler view; The LP value is used to indicate the position of the item view in the recycler view.

9. The method according to any one of claims 1 to 5, characterized in that The distance from the upper edge of the display screen to the upper edge of the recycler view is the tenth distance, and the edge of the recycler view is located outside the display screen; The method further comprises: receiving a fourth operation of the user sliding on the display screen along the second direction by an eleventh distance, the eleventh distance being greater than the tenth distance; In response to the fourth operation, moving the recycler view along the first direction by a twelfth distance and displaying fifth content based on the recycler view on the display screen, the twelfth distance being greater than or equal to a difference between the eleventh distance and the tenth distance; Before the recycler view is moved in response to the fourth operation, and after the recycler view is moved in response to the fourth operation, the first row of images in the recycler view does not include the first image of the album.

10. The method according to claim 9, characterized in that Before moving the recycler view a twelfth distance along the first direction, the method further includes: The twelfth distance is determined according to the top edge of the recycler view, the top edge of the display screen, the eleventh distance, and the side length of the item view in the recycler view.

11. The method according to claim 9, characterized in that The fifth content is the third grid interface; Before displaying the second content based on the recycler view in the display screen, the method further includes: Subtract a second value from the adaptation position index AP value corresponding to each item view in the recycler view; Among them, the AP value is used to represent the number of the image displayed in the table item view, and the second numerical value is determined based on the upper edge of the recycler view, the upper edge of the display screen, the eleventh distance, the side length of the table item view in the recycler view and the number of columns of the third grid interface.

12. The method according to any one of claims 1 to 6, characterized in that A distance from the upper edge of the display screen to the upper edge of the recycler view is a thirteenth distance, and the edge of the recycler view is outside the display screen; The method further comprises: receiving a fifth operation of the user sliding on the display screen along the second direction by a fourteenth distance, the fourteenth distance being greater than the thirteenth distance; In response to the fifth operation, moving the recycler view along the second direction by a fifteenth distance and displaying sixth content based on the recycler view on the display screen, the fifteenth distance being equal to a difference between the fourteenth distance and the thirteenth distance, and a distance from a top edge of the display screen to a top edge of the recycler view being zero; Before the recycler view is moved in response to the fifth operation, and after the recycler view is moved in response to the fifth operation, the first row of images in the recycler view includes the first image of the album.

13. The method according to any one of claims 1 to 6, characterized in that A distance from the upper edge of the display screen to the upper edge of the recycler view is a sixteenth distance, and the edge of the recycler view is outside the display screen; The method further comprises: receiving a sixth operation of the user sliding on the display screen along the second direction by a seventeenth distance, the seventeenth distance being greater than the sixteenth distance; In response to the sixth operation, moving the recycler view along the second direction by an eighteenth distance and displaying seventh content based on the recycler view on the display screen, the eighteenth distance being less than a difference between the seventeenth distance and the sixteenth distance, and a distance from a top edge of the display screen to a top edge of the recycler view being zero; Before the recycler view is moved in response to the sixth operation, the first row of images of the recycler view does not include the first image of the album; after the recycler view is moved in response to the sixth operation, the first row of images of the recycler view includes the first image of the album.

14. The method according to claim 13, characterized in that Before moving the recycler view an eighteenth distance along the second direction, the method further includes: The eighteenth distance is determined according to the actual layout position LP value of the first table item view of the recycler view, the LP value of the first image in the album, the side length of the table item view in the recycler view, and the number of columns of the recycler view; wherein the LP value is used to indicate the position of the table item view in the recycler view.

15. An electronic device, characterized in that: The electronic device includes: one or more processors, and a memory; The memory is coupled to the one or more processors, and the memory is used to store computer program code, where the computer program code includes computer instructions. The one or more processors call the computer instructions to enable the electronic device to execute the method according to any one of claims 1 to 14.

16. A chip system, characterized in that: The chip system is applied to an electronic device, and the chip system includes one or more processors, and the one or more processors are used to call computer instructions to enable the electronic device to execute the method as described in any one of claims 1 to 14.

17. A computer-readable storage medium, characterized in that The computer-readable storage medium comprises instructions, which, when executed on an electronic device, cause the electronic device to perform the method according to any one of claims 1 to 14.

Images