Scroll display method and device, chip system and storage medium

Abstract

The embodiment of the invention provides a scrolling display method and device, a chip system and a storage medium, and relates to the technical field of terminals. In the application, when the finger of the user slides up and down in the picture library, the Recycler View also rolls in the same direction as the single-finger sliding direction. And when the electronic device rolls to the top or the bottom of the Recycler View, the electronic device moves the whole Recycler View in the direction opposite to the single-finger sliding direction, and the Recycler View is filled with the content again. Thus, the electronic device only needs to fill the moved Recycler View with content, and does not need to re-measure the size and calculate the position of each ItemView of the Recycler View, so that the data processing flow is optimized, the data processing time when the image rolls in the image library is shortened, and the problem of frame dropping when the image library rolls up and down is solved.

Description

Technical Field

[0001] This application relates to the field of terminal technologies, and in particular, to a scrolling display method, device, chip system, and storage medium. Background Art

[0002] With the rapid development of terminal technologies, the storage space of mobile phones is getting larger and larger. Users can use their mobile phones to take a large number of photos and videos and store them in the phone's photo gallery. When there are a large number of photos and videos in the photo gallery, the phone's screen may not be able to display all of them at the same time.

[0003] Related technologies have proposed an image scrolling solution based on the RecyclerView. When the user swipes up and down in the photo gallery, the RecyclerView also scrolls up and down accordingly. When scrolling to the top or bottom of the RecyclerView, it is necessary to re-measure the size and calculate the position of each item view of the RecyclerView. This process is generally time-consuming, resulting in frame drops when the image scrolls. Summary of the Invention

[0004] This application provides a scrolling display method, device, chip system, and storage medium, which are used to solve the problem of frame drops when images scroll in the photo gallery.

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

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

[0007] Display first content based on the RecyclerView within the display screen. The size of the RecyclerView is greater than the size of the display screen. The distance from the lower edge of the display screen to the lower edge of the RecyclerView is a first distance, and the edge of the RecyclerView is located outside the display screen. Receive a first operation in which the user slides a second distance along a first direction on the display screen. The first direction is the direction from the lower edge of the display screen to the upper edge of the display screen, and the second distance is greater than the first distance. In response to the first operation, move the RecyclerView along a second direction by a third distance, and display second content based on the RecyclerView within the display screen. 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.

[0008] In the above solution, when the user's finger slides upward by a second distance on the display screen, if the RecyclerView is moved by the second distance in the single-finger sliding direction, since the second distance is greater than the distance between the lower edge of the display screen and the lower edge of the RecyclerView, the lower edge of the RecyclerView will move into the display screen. By scrolling the RecyclerView in the direction opposite to the single-finger sliding direction, it is possible to avoid a blank display area between the lower edge of the RecyclerView and the lower edge of the display screen. Since this process does not require re-measuring the size and position of each item view in the RecyclerView, the data processing time is shortened, and the frame drop problem is solved.

[0009] In a possible implementation, the above RecyclerView is a custom RecyclerView. The custom RecyclerView is composed of multiple item views (ItemView) in a grid form, each ItemView corresponding 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 performs a zoom operation in the gallery interface, the custom RecyclerView will be enlarged or reduced accordingly. As another example, when the user slides a finger up and down, the custom RecyclerView control can control the custom RecyclerView to scroll in the same direction as the single-finger sliding direction. When scrolling to the top or bottom of the custom RecyclerView, the custom RecyclerView control moves the entire custom RecyclerView in the direction opposite to the single-finger sliding direction and repopulates the content in the custom RecyclerView.

[0010] Exemplarily, the custom RecyclerView involves two sizes:

[0011] One is the original size of the custom RecyclerView, that is, the initialized size. Regardless of how many columns of images the display area of the custom RecyclerView includes, the original size of the custom RecyclerView always remains unchanged. For example, when the display screen size is 1200 pixels wide * 2800 pixels high, the original size of the custom RecyclerView is 8400 pixels wide * 20000 pixels high, and the original size of each ItemView in the custom RecyclerView is 400 pixels wide * 400 pixels high.

[0012] Another is to customize the actual display size of the RecyclerView. Since the number of columns of the ItemView displayed on the display screen is different when the display area of the customized RecyclerView includes different numbers of columns, it is necessary to multiply a scaling factor (the scaling factor is less than or equal to 1.0) on the basis of the original size of the customized RecyclerView to obtain a reduced display size, and then send the reduced customized RecyclerView to the display screen for display. For example, when the current gear is N and the minimum gear is M, and the original size of the customized RecyclerView is (x, y), then the display size of the customized RecyclerView in the current gear is (x * M / N, y * M / N). Wherein, x represents the original width of the customized RecyclerView, y represents the original height of the customized RecyclerView, and M / N represents the scaling factor.

[0013] In a possible implementation, the customized RecyclerView has two indexes: one is the actual layout position index, which is used to represent the position of the grid in the customized RecyclerView; the other is the actual adaptation position index, which is used to represent the number of the image displayed in the grid of the customized RecyclerView. Different from the fact that the layout position index in the native logic of the Android system cannot customize the value, the customized RecyclerView can change the actual layout position index value and the actual adaptation position index value according to the scaling factor, the scaling center, the scrolling operation, etc. During the scaling process, the actual adaptation position index corresponding to the center of the two fingers of the ItemView remains unchanged, but the actual adaptation position indexes of other ItemViews may be renumbered, resulting in the actual adaptation position indexes of the entire customized RecyclerView not necessarily being continuous.

[0014] In a possible implementation, the RecyclerView can include ItemViews with M rows and N columns. Each ItemView includes an ImageView, and each ImageView is used to display an image or a table. Correspondingly, the first content is the first grid interface, the second content is the second grid interface, and the number of image columns of the first grid interface and the second grid interface is the same; or, the first content is the first list, the second content is the second list, and the number of table columns of the first list and the second list is the same.

[0015] In a possible implementation, the ItemView of the recycler view is used to display images in the photo album. Before moving the RecyclerView in the second direction by a third distance, the method may further include: determining the third distance according to the lower edge of the RecyclerView, the lower edge of the display screen, the second distance, and the side length of the item view in the RecyclerView.

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

[0017] In the above solution, the electronic device first moves the custom RecyclerView downward, and then adds the first difference to the actual adaptation position index corresponding to the ItemView of the custom RecyclerView respectively, so that the user visually sees that the positions of the respective images in the display screen remain unchanged.

[0018] In a possible implementation, the distance from the lower edge of the display screen to the lower edge of the RecyclerView is the fourth distance, and the edge of the RecyclerView is outside the display screen. The method may further include: receiving a second operation in which the user slides a fifth distance along the first direction on the display screen, the fifth distance being 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, the sixth distance being equal to the difference between the second distance and the first distance, and the distance from the lower edge of the display screen to the lower edge of the RecyclerView being 0. Among them, 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 of the photo album.

[0019] In the above solution, the last row of the custom RecyclerView is the last row of the photo album. When the user's finger slides upward by a fifth distance on the display screen, if the lower edge of the RecyclerView moves into the display screen, the RecyclerView can be scrolled downward so that the lower edge of the RecyclerView aligns with the lower edge of the display screen to ensure that the last few images of the photo album can be fully displayed.

[0020] In a possible implementation, the distance from the lower edge of the display screen to the lower edge of the RecyclerView is a seventh distance, and the edge of the RecyclerView is outside the display screen. The method may further include: receiving a third operation in which the user slides an eighth distance along a first direction on the display screen, 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 a 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 lower edge of the display screen to the lower edge of the RecyclerView being 0. Among them, before moving the RecyclerView in response to the third operation, the last row of images of the RecyclerView may not include the last image of the photo album; after moving the RecyclerView in response to the third operation, the last row of images of the RecyclerView may include the last image of the photo album.

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

[0022] In the above solution, the last row of the custom RecyclerView is several rows from the bottom of the photo album (excluding the last row). When the user's finger quickly slides upward on the display screen, if the lower edge of the RecyclerView moves into the display screen, the RecyclerView can be scrolled downward so that the lower edge of the RecyclerView aligns with the lower edge of the display screen. Additionally, the last row of images of the RecyclerView is refreshed to the last few images of the photo album.

[0023] In a possible implementation, the distance from the upper edge of the display screen to the upper edge of the RecyclerView is the tenth distance, and the edge of the RecyclerView is located outside the display screen. The method may further include: receiving a fourth operation in which the user slides an eleventh distance along a 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 a first direction by a twelfth distance, and displaying 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. Among them, 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 of the RecyclerView may not include the first image of the photo album.

[0024] Exemplarily, before moving the RecyclerView along the first direction by the twelfth distance, the method may further include: determining the twelfth distance according to the upper edge of the RecyclerView, the upper edge of the display screen, the eleventh distance, and the side length of the item view in the RecyclerView.

[0025] In the above solution, when the user's finger slides down on the display screen, if the RecyclerView is moved in the single-finger sliding direction, the upper edge of the RecyclerView may move into the display screen. By scrolling the RecyclerView in the direction opposite to the single-finger sliding direction, it is possible to avoid a blank display area between the upper edge of the RecyclerView and the upper edge of the display screen. Since this process does not require re-measuring the size and position of each item view in the RecyclerView, the data processing time is shortened, and the frame drop problem is solved.

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

[0027] In the above solution, the electronic device first moves the custom RecyclerView upward, and then subtracts the second difference from the actual adaptation position indexes corresponding to the ItemViews of the custom RecyclerView respectively, so that the positions of the respective images visually seen by the user remain unchanged on the display screen.

[0028] In a possible implementation, the distance from the upper edge of the display screen to the upper 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 a fourteenth distance along a second direction on the display screen, 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 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 upper edge of the display screen to the upper edge of the RecyclerView being 0. Wherein, 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 of the RecyclerView may include the first image of the photo album.

[0029] In the above solution, the first row of the custom RecyclerView is the first row of the photo album. When the user's finger slides down on the display screen, if the upper edge of the RecyclerView moves into the display screen, the RecyclerView can be scrolled upward so that the upper edge of the RecyclerView is aligned with the upper edge of the display screen to ensure that the first row of images of the photo album can be completely displayed.

[0030] In a possible implementation, the distance from the upper edge of the display screen to the upper 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 a seventeenth distance along a second direction on the display screen, 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 seventh content based on the RecyclerView within the display screen, the eighteenth distance being less than the difference between the seventeenth distance and the sixteenth distance, and the distance from the upper edge of the display screen to the upper edge of the RecyclerView being 0. Wherein, before moving the RecyclerView in response to the sixth operation, the first row of images of the RecyclerView may not include the first image of the photo album; after moving the RecyclerView in response to the sixth operation, the first row of images of the RecyclerView may include the first image of the photo album.

[0031] Exemplarily, before moving the RecyclerView by an eighteenth distance along the second direction, the method may further include: determining the eighteenth distance according to the actual layout position LP value of the first table item view of the RecyclerView, the LP value of the first image in the photo 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 represent the position of the table item view in the RecyclerView.

[0032] In the above solution, the first row of the custom RecyclerView is the first few rows (excluding the first row) of the photo album. When the user's finger quickly swipes down on the display screen, if the upper edge of the RecyclerView moves into the display screen, the RecyclerView can be scrolled upward so that the upper edge of the RecyclerView aligns with the upper edge of the display screen, and in addition, the first row of images of the RecyclerView is refreshed to the first row of images of the photo album.

[0033] In a 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 LPmin = 0 of the actual layout position index to determine whether the actual layout position index value LP1 points to the first image of the photo 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 photo album and has not yet scrolled to the first row of the photo album. The top ItemView of the custom RecyclerView can also update 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 screen.

[0034] In a 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 in which the user swipes a twentieth distance along a third direction on the display screen, the third direction being the direction from the left edge of the display screen to the right edge of the display screen, and the twentieth distance being 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 an eighth content based on the RecyclerView within the display screen, the fourth direction being opposite to the third direction, and the twenty - first distance being greater than or equal to the difference between the twentieth distance and the nineteenth distance.

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

[0036] In a possible implementation, when the single-finger swipe operation is a single-finger down swipe operation, if the actual layout position index of the first table item view does not point to the first image of the album, the moving distance of the custom RecyclerView can be calculated by the following relational expression:

[0037]

[0038] represents the estimated number of rows to move;

[0039] represents the actual movable number of rows, that is, the maximum number of ItemView rows that can be added to the top of the custom RecyclerView.

[0040] where min() is the minimum value function, y1 represents the upper edge coordinate after moving the custom RecyclerView 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 in 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.

[0041] In a possible implementation, when the single-finger swipe operation is a single-finger up swipe operation, if the actual layout position index of the last table item view does not point to the last image of the album, the moving distance of the custom RecyclerView can be calculated by the following relational expression:

[0042]

[0043] represents the estimated number of rows to move;

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

[0045] Among them, min() is the function to take the minimum value, 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 item view in the RecyclerView, LP2 is the actual layout position index of the last image in the RecyclerView, LPmax is the actual layout position index of the last image in the album, and gmax represents the maximum gear of the RecyclerView.

[0046] In a 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 corner ItemView (the first ItemView) of the custom RecyclerView is equal to 0, it means that it has reached the first row of the album and cannot be scrolled up anymore. When the actual LP value of the lower right corner ItemView (the last ItemView) of the custom RecyclerView is equal to the maximum value LPmax of the actual layout position index, it means that it has reached the last row of the album and cannot be scrolled down anymore.

[0047] For example, LPmax can be obtained through any of the following relationships:

[0048]

[0049]

[0050] 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 (i.e., the number of columns of ItemView displayed on the display screen), and gmax represents the maximum gear of the custom RecyclerView (i.e., the total number of columns of ItemView).

[0051] In a second aspect, the present application provides a device, which includes units for executing the methods in the first aspect above. The device can correspond to executing the scrolling display method described in the first aspect above. For the relevant descriptions of the units in the device, please refer to the descriptions in the first aspect above. For the sake of brevity, they will not be repeated here.

[0052] Among them, the methods 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.

[0053] In a third aspect, the present application provides an electronic device, which 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. The computer program code includes computer instructions, and the one or more processors call the computer instructions to cause the electronic device to execute the scrolling display method provided in the first aspect and any possible implementation manner thereof.

[0054] 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 run on an electronic device, the electronic device is caused to execute the scrolling display method provided in the first aspect and any possible implementation manner thereof.

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

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

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

[0058] Figure 1 It is a software architecture diagram of an electronic device provided by an embodiment of the present application;

[0059] Figure 2 It is a flowchart of an image scrolling solution based on the native RecyclerView provided by an embodiment of the present application;

[0060] Figure 3 It is a schematic interface diagram corresponding to the image scrolling solution based on the native RecyclerView provided by an embodiment of the present application;

[0061] Figure 4 It is a software architecture diagram of an improved electronic device provided by an embodiment of the present application;

[0062] Figure 5Schematic diagram of the relationship between the custom RecyclerView, ItemView, and ImageView provided by the embodiments of this application;

[0063] Figure 6 Schematic diagram of the operation of shrinking the custom RecyclerView provided by the embodiments of this application;

[0064] Figure 7 Schematic diagram of the actual layout position index and the actual adaptation position index in the scrolling scenario provided by the embodiments of this application;

[0065] Figure 8 Schematic diagram of an application scenario of a picture gallery based on the custom RecyclerView provided by the embodiments of this application;

[0066] Figure 9 Schematic diagram of another application scenario of a picture gallery based on the custom RecyclerView provided by the embodiments of this application;

[0067] Figure 10 Schematic diagram of another application scenario of a picture gallery based on the custom RecyclerView provided by the embodiments of this application;

[0068] Figure 11 Schematic diagram of another application scenario of a picture gallery based on the custom RecyclerView provided by the embodiments of this application;

[0069] Figure 12 Schematic diagram of an image scrolling scheme based on the custom RecyclerView provided by the embodiments of this application;

[0070] Figure 13 Schematic diagram of an image scrolling scheme based on the custom RecyclerView provided by the embodiments of this application;

[0071] Figure 14 Schematic diagram of an image scrolling scheme based on the custom RecyclerView provided by the embodiments of this application;

[0072] Figure 15 Schematic diagram of an image scrolling scheme based on the custom RecyclerView provided by the embodiments of this application;

[0073] Figure 16 Schematic diagram of an image scrolling scheme based on the custom RecyclerView provided by the embodiments of this application;

[0074] Figure 17Schematic diagram of an image scrolling solution based on a custom RecyclerView provided by an embodiment of the present application;

[0075] Figure 18 Schematic diagram of an image scrolling solution based on a custom RecyclerView provided by an embodiment of the present application;

[0076] Figure 19 Schematic diagram of an image scrolling solution based on a custom RecyclerView provided by an embodiment of the present application;

[0077] Figure 20 Flowchart of an image scrolling method based on a custom RecyclerView provided by an embodiment of the present application;

[0078] Figure 21 Schematic diagram of the hardware structure of an electronic device provided by an embodiment of the present application. Detailed implementation manners

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

[0080] Currently, the gallery application of a mobile phone can create multiple albums, such as camera, video, photo, network disk, self - portrait, live photo, long exposure, slow motion, screenshot, animated picture, personal collection, etc. Generally, the screen size of a mobile phone is limited. When there are many photos and videos in a certain album, the mobile phone may not be able to display all the images of this album on the screen at the same time. In this case, when the user slides their finger up and down on the screen, the mobile phone can scroll and display each image of the album on the screen.

[0081] The following will be combined with Figures 1 to 3 Provide an image scrolling solution based on a native recycler view (RecyclerView).

[0082] Exemplarily, Figure 1 Show a software architecture diagram of an electronic device.

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

[0084] The application layer may include a series of application packages, such as a camera application, a gallery application, a grid-form layout manager, a native RecyclerView, and a scale gesture detector interface (ScaleGestureDetector), etc. These applications can be native applications of the Android system. Among them, the camera application can call the camera to take photos and videos, and store the taken photos and videos in the gallery application. The gallery application can not only manage photos and videos, but also manage screenshots and shared images, etc. The native RecyclerView is responsible for calculating the moving distance and moving direction according to the received sliding data, and passing the scroll event to the grid-form layout manager. The grid-form layout manager is responsible for creating one or more new ItemViews at the top or bottom of the native RecyclerView when scrolling to the top or bottom of the native RecyclerView, and starting from the first row of the native RecyclerView, re-measuring the size, filling the content, and calculating the position of each ItemView until the last row. The ScaleGestureDetector is responsible for handling zoom operations. As an example, the ScaleGestureDetector can be a native interface of the native RecyclerView. When these application packages are run, they can access various service modules provided by the application framework layer through the application programming interface (API), and execute corresponding intelligent services.

[0085] It should be noted that in the native logic of the Android system, the native RecyclerView has two indexes: one is the layout position (LP) index, which is an index established from the perspective of the LayoutManager and is used to represent the position of the grid in the native RecyclerView; the other is the realadapter position (AP) index, which is used to represent the number of the image displayed in the grid of the native RecyclerView. In the native logic of the Android system, the layout position index cannot be customized, and the adapter position index is always continuously numbered.

[0086] The application framework layer provides APIs and programming frameworks for applications. The application framework layer includes some predefined functions. For example, the application framework layer can include the window manager service (WMS), the activity manager service (AMS), video codecs (such as MediaCodec), SurfaceFlinger, screen management services, asset managers, etc.

[0087] The system library can include multiple functional modules, such as the surface manager, media libraries, image processing libraries, two-dimensional (2D) graphics engines (e.g., SGL), three-dimensional (3D) graphics processing libraries (e.g., OpenGL ES), etc. In the system library, the Android Runtime includes core libraries and virtual machines. The Android Runtime is responsible for the scheduling and management of the Android system. The core libraries consist of two parts: one is the functional functions that need to be called by the Java language, and the other is the core libraries of Android. The application layer and the application framework layer run in the virtual machine.

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

[0089] Exemplarily, Figure 2 A flowchart of an image scrolling solution based on the native RecyclerView is shown.

[0090] As Figure 2As shown, the touch drive can sample touch operations according to a period T. Taking the example that the touch drive samples 240 times per second. The period T = 1 / 240 = 4.16 ms, that is, the touch drive samples touch data every 4.16 ms. The touch drive can determine the touch position based on the voltage change etc. collected in each period, and this touch position is also called the touch point or touch position etc. When the user slides a finger on the touch screen, the touch screen can transfer the coordinates of the collected touch position to the native RecyclerView. The native RecyclerView calculates the moving distance and moving direction according to the coordinates. Then, based on the moving distance and moving direction, the native RecyclerView determines whether the upper edge and the lower edge of the native RecyclerView are within the screen, that is, determines whether the native RecyclerView has scrolled to the top or bottom of the screen. If it has scrolled to the top or bottom of the screen and cannot scroll further, the native RecyclerView notifies the gallery application that it cannot scroll further. If it has not scrolled to the top or bottom, the native RecyclerView sends scrolling parameters, such as the scrolling distance and moving direction etc., to the grid - form layout manager. The grid - form layout manager creates a new row of item views at the top (corresponding to scrolling down) or bottom (corresponding to scrolling up) of the native RecyclerView, and starting from the first row of the native RecyclerView, re - measures the size, fills the content, and calculates the position of each item view until the last row. Then, the grid - form layout manager calculates the actual scrolling distance of the native RecyclerView and returns the actual scrolling distance to the recycler view control. The recycler view control returns the scrolling distance and moving direction etc. to the gallery application.

[0091] Exemplarily, Figure 3 An interface schematic diagram corresponding to the image scrolling scheme based on the native RecyclerView is provided.

[0092] As Figure 3As shown, at the initial moment, the AP values of the ItemViews in the last row of the original RecyclerView are 479, 480, 481, 482, and 483 in sequence. The user can perform a single-finger upward swipe operation on the touch screen. The original RecyclerView slides upward. As long as the lower edge of the original RecyclerView slides into the screen, that is, there is an empty position at the bottom of the original RecyclerView, a new row of views needs to be loaded. The AP values of a new row of views are 484, 485, 486, 487, and 488 in sequence. To implement the loading of a new row of views, the electronic device needs to start from the first row of the original RecyclerView, re-measure the position and size of each ItemView, and set the corresponding ImageView for each ItemView, that is, fill images in each grid. As Figure 3 shown by the dashed box in, the redrawn RecyclerView has 5 rows and 12 columns, a total of 60 ItemViews. The position of each of these 60 ItemViews needs to be re-measured, and the AP value of the ImageView corresponding to each ItemView needs to be reset. This process takes a relatively long time overall. Experimental data shows that the time consumption of the above image scrolling scheme based on the original RecyclerView reaches hundreds of milliseconds, thus prone to frame dropping phenomenon.

[0093] Based on the characteristics that in the up-and-down sliding scenario, the positions and sizes of each ItemView basically remain unchanged, and the alignment methods of each ItemView also remain unchanged, the present application provides an image scrolling solution based on a custom RecyclerView. In the solution of the present application, the size of the custom RecyclerView is larger than the size of the screen. At the initial moment, the edges of the custom RecyclerView are located outside the screen. When the user slides up and down with a single finger in the photo gallery, the custom RecyclerView will scroll in the same direction as the single-finger sliding direction. 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 single-finger sliding direction and repopulates the content in the custom RecyclerView. In this way, on the premise of keeping the positions and sizes of each ItemView in the custom RecyclerView unchanged, the electronic device only needs to update the AP values of the ImageView corresponding to each ItemView, that is, repopulate the content in the moved custom RecyclerView, without having to re-measure the size and calculate the position of each ItemView of the custom RecyclerView. Experimental data shows that taking the screen refresh rate of 120Hz as an example, the time consumption of 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 photo gallery, and solves the frame dropping problem existing in the image scrolling solution of the native RecyclerView.

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

[0095] For the album page, the electronic device has preset multiple gears respectively. Among them, the "gear" can be understood as the number of image columns displayed on the screen. The electronic device has preset for the album page: 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 corresponding number of image columns displayed on the screen is 3 columns; when the gear is 5 gears, the corresponding number of image columns displayed on the screen is 5 columns; when the gear is 15 gears, the corresponding number of image columns displayed on the screen is 15 columns; when the gear is 21 gears, the corresponding number of image columns displayed on the screen is 21 columns.

[0096] Users can change the number of image columns on the album page displayed on the screen through a two-finger zoom operation. As an example, users can trigger the electronic device to increase the number of image columns on the album page displayed on the screen by reducing the distance between the two fingers. As another example, users can trigger the electronic device to reduce the number of image columns on the album page displayed on the screen by increasing the distance between the two fingers. If the user sets the album page to 21 columns through a zoom operation, then before receiving the next two-finger operation, the electronic device always keeps displaying 21 columns of images. As yet another example, the electronic device supports "cross-gear zoom" of the album page. When the user presses the two fingers and before the two fingers leave the screen, when the user increases or decreases the distance between the two fingers on the screen, the electronic device can switch from the current gear through the next gear to a non-adjacent gear of the current gear, that is, one gesture can switch multiple gears. Taking the number of image columns displayed on the screen before the user presses the two fingers as 5 columns as an example, after the user presses the two fingers and reduces the distance between the two fingers, before the two fingers leave the screen, as the distance between the two fingers decreases, the number of image columns displayed on the screen can switch from 5 columns to 15 columns, and after switching to 15 columns, as the distance between the two fingers decreases, the number of image columns displayed on the screen can switch from 15 columns to 21 columns.

[0097] Exemplarily, Figure 4 shows a software architecture diagram of an improved electronic device.

[0098] Compared with Figure 1 the software architecture diagram shown, Figure 4 the software architecture diagram shown newly adds a Receive Touch Event Layer (ReceiveTouchView) control, a custom layout manager, and a custom RecyclerView in the application layer.

[0099] The ReceiveTouchView control is used to receive the two-finger operation of the user in a zoom scenario. The size of the ReceiveTouchView is the same as the screen size and does not reposition the current two-finger position, solving the functional problems and scalability problems of the native custom RecyclerView control directly receiving click events.

[0100] The custom layout manager can serve as a bridge between the grid-style layout manager and the custom RecyclerView, playing the role of data backhaul. Specifically, the grid-style layout manager is a native manager of the Android system, used to manage the position and size of ItemView components in the custom RecyclerView. However, 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 backhaul the moving distance of the user's single-finger operation to the custom RecyclerView. And the grid-style layout manager does not have the function of directly backhauling data to the custom layout manager. Therefore, the custom layout manager can transparently transmit data between the grid-style layout manager and the custom RecyclerView control.

[0101] The custom RecyclerView consists of multiple ItemView in the form of a grid. Each ItemView corresponds to an 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 performs a zoom operation in the gallery interface, the custom RecyclerView will zoom in or out accordingly. As another example, when the user swipes up and down with a single finger, the custom RecyclerView control can control the custom RecyclerView to scroll in the same direction as the single-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 single-finger swipe direction and repopulates the content in the custom RecyclerView.

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

[0103] Exemplarily, Figure 5 shows a schematic diagram of the relationship between the custom RecyclerView, ItemView, and ImageView.

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

[0105] As Figure 5 shown, at 3 gears, the display area of the custom RecyclerView on the screen is 3 rows * 7 columns of ItemViews. Each ItemView includes an ImageView, and each ImageView is used to display an image. Among them, the image displayed by an ImageView can be a thumbnail of a photo or a thumbnail of a certain frame in a video. When the image displayed by an ImageView is a thumbnail of a photo, when the user clicks on the thumbnail, the mobile phone can display this photo full screen. When the image displayed by an ImageView is a thumbnail of a certain frame in a video, when the user clicks on the thumbnail, the mobile phone can play this video full screen.

[0106] It should be noted that Figure 5 the example is given with the width and height of the ItemView being equal, which does not form a limitation on this application. As another example, the width and height of the ItemView are not equal.

[0107] In addition, Figure 5The relative positional relationship between the display area and the custom RecyclerView shown is only for illustrative purposes. In actual implementation, the user can change the relative positional relationship between the screen and the custom RecyclerView, as well as the size of the display area seen by the user, through up and down sliding operations and zoom operations. For example, when the user performs an up sliding operation on the screen, the custom RecyclerView slides up relative to the screen, so as to display photos taken at a later time on the screen; when the user performs a down sliding operation on the screen, the custom RecyclerView slides down relative to the screen, so as to display photos taken at an earlier time on the screen. For another example, when the user reduces the distance between the two fingers, the display area in the custom RecyclerView enlarges, so that after sending the enlarged display area to the screen, the screen displays a larger number of smaller-sized images; when the user increases the distance between the two fingers, the display area in the custom RecyclerView reduces, so that after sending the reduced display area to the screen, the screen displays a smaller number of larger-sized images.

[0108] Exemplarily, Figure 6 The schematic diagram showing the reduction operation on the custom RecyclerView is shown.

[0109] The custom RecyclerView includes 21 columns * 50 rows = 1050 ItemViews. As Figure 6 shown in (a) of [], 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 a larger number of photos, the user can press two fingers on the screen and gradually reduce the distance between the two fingers. As Figure 6 shown in (b) of [], in response to the user's operation of reducing the distance between the two fingers, the custom RecyclerView reduces, and at this moment, 15 columns and 35 rows, a total of 525 ItemViews, are displayed in the display area corresponding to the screen.

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

[0111] The custom RecyclerView of the present application involves two sizes:

[0112] One is to customize the original size of the RecyclerView, that is, the initialized size. Regardless of the number of columns of images included in the display area of the customized RecyclerView, the original size of the customized RecyclerView always remains unchanged. For example, when the screen size is 1200 pixels wide * 2800 pixels high, and the minimum number of columns displayed on the screen is 3 columns, the original size of each ItemView in the customized RecyclerView is 400 pixels wide * 400 pixels high. Since the maximum number of columns of the customized RecyclerView is 21, and the number of rows in the case of 21 columns is 50, the original size of the customized RecyclerView is 8400 pixels wide * 20000 pixels high.

[0113] The other is to customize the actual display size of the RecyclerView. Since the number of columns of ItemView displayed on the screen is different when the number of columns included in the display area of the customized RecyclerView is different, it is necessary to multiply a scaling factor (the scaling factor is less than or equal to 1.0) on the basis of the original size of the customized RecyclerView to obtain a reduced display size, and then send the reduced customized RecyclerView to the screen for display. For example, when the current gear is N and the minimum gear is M, and the original size of the customized RecyclerView is (x, y), the display size of the customized RecyclerView in the current gear is (x * M / N, y * M / N). Among them, x represents the original width of the customized RecyclerView, y represents the original height of the customized RecyclerView, and M / N represents the scaling factor.

[0114] In the embodiment of the present application, the electronic device can change the actual layout position index value according to the scaling factor, the scaling center, and the scrolling operation, etc. In a customized RecyclerView, the actual layout position index is continuously numbered from the ItemView in the first row and the first column to the ItemView in the last row and the last column. In addition, during the scaling 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 indexes of the entire customized RecyclerView not necessarily being continuous. That is to say, in the scaling scenario, the actual adaptation position index and the layout position index may not be equal.

[0115] Exemplarily, Figure 7 A schematic diagram showing the actual layout position index and the actual adaptation position index in the scrolling scenario is shown.

[0116] Assume that a custom RecyclerView has 5 columns (i.e., the maximum number of columns) of ItemViews, and the width and height of each ItemView are equal to the screen width divided by 5 (i.e., the minimum number of columns). In Figure 7 , at the initial moment, the gear of the custom RecyclerView is 5 gears. A grid represents an ItemView, and an ItemView includes an ImageView. The custom RecyclerView encodes each ItemView using the actual layout position index; and encodes each ImageView using the actual adaptation position index. Since when the custom RecyclerView is at the minimum gear, the grids of the ItemViews in each column are all displayed on the screen, the actual layout position index and the actual adaptation position index corresponding to a grid are the same. As shown in (a) of Figure 7 , the actual layout position index LP = 0 and the actual adaptation position index AP = 0 corresponding to the grid in the first row and first column in the upper left corner of the screen. 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 Figure 7 , when the user triggers the custom RecyclerView to slide up 400 pixels by a single-finger upward swipe operation, 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.

[0117] When scaling or scrolling up and down the custom RecyclerView, the actual layout position index of the custom RecyclerView may also change. When the actual LP of the upper left corner ItemView (the first ItemView) of the custom RecyclerView is equal to 0, it means that it has reached the first row of the photo album and cannot be swiped up anymore. When the actual LP value of the lower right corner ItemView (the last ItemView) of the custom RecyclerView is equal to the maximum value LPmax of the actual layout position index, it means that it has reached the last row of the photo album and cannot be swiped down anymore.

[0118] As an example, taking the case of not retaining the first row of ItemViews, LPmax can be obtained through the following relational expression (1):

[0119]

[0120] As another example, taking the case of retaining the first row of ItemViews, LPmax can be obtained through the following relational expression (2):

[0121]

[0122] 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 at which the custom RecyclerView is currently located (i.e., the number of columns of ItemView displayed on the screen), and gmax represents the maximum gear of the custom RecyclerView (i.e., the total number of columns of ItemView).

[0123] 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. Therefore, referring to the above relational formula (1) or relational formula (2), the actual adaptation position index value and the actual layout position index corresponding to any image in the album can also be obtained, which will not be elaborated here.

[0124] The following combines Figures 8 to 11 to give an example and explanation of the application scenario of the picture gallery based on the custom RecyclerView.

[0125] Exemplarily, Figure 8 and Figure 9 show a schematic diagram of the scenario of scrolling and displaying images based on the custom RecyclerView.

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

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

[0128] Taking the camera album interface shown in (c) as an example, which shows multiple recently taken images, the user can trigger the phone to update the camera album interface by swiping down with a single finger to display images taken at an earlier time. Figure 8 Taking the camera album interface shown in (c) as an example, which shows multiple recently taken images, the user can trigger the phone to update the camera album interface by swiping down with a single finger to display images taken at an earlier time.

[0129] As an example, the single-finger swipe-down operation on the camera album interface is a follow-up swipe operation. The characteristic of the follow-up swipe operation is that the single-finger swipe speed is slow and the single finger does not leave the screen for a long time. As Figure 8 shown in (d), the user can press and hold image 455 with a single finger without releasing it and swipe down a distance d1. In response to the user's swipe operation, as Figure 8 shown in (e), the camera album interface follows and swipes down a distance d1. Then, without releasing the single finger, the user can continue to press and hold image 455 and swipe down a distance d2. In response to the user's swipe operation, as Figure 8 shown in (f), the camera album interface follows and swipes down a distance d2. Generally, the swipe distance of the follow-up swipe operation is equal to the distance that the camera album interface scrolls down. The longer the swipe distance of the follow-up swipe operation, the more content the camera album interface scrolls down to display.

[0130] As another example, the single-finger swipe-down operation on the camera album interface is an inertial swipe operation. The characteristic of the inertial swipe operation is that the single-finger swipe speed is relatively fast and the single finger leaves the screen after quickly swiping a certain distance. An inertial swipe operation can trigger the phone to scroll and display a large number of images. As Figure 9 shown in (a), the user can press and hold image 455 with a single finger and quickly swipe 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 swipe operation, the phone plays the animation effect of the inertial scroll interface, such as first showing the camera album interface shown in Figure 9 (b), and then showing the camera album interface shown in Figure 9 (c). Generally, the swipe distance of the inertial swipe operation is less than the distance that the camera album interface scrolls down. After the inertial swipe operation ends, the camera album interface will still continue to scroll down a certain distance as if there is inertia.

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

[0132] It should be noted that Figure 8 and Figure 9 take the camera album interface including 5 columns of images as an example for illustration, which does not limit the present application. As an example, the user can also perform a zoom operation on 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.

[0133] Exemplarily, Figure 10 and Figure 11 show a schematic diagram of the scene of zooming and displaying images in the gallery.

[0134] As an example, as Figure 10 shown in (a) therein, at the initial moment, the camera album interface includes 5 columns of images. The user presses two fingers near a certain image and gradually reduces the distance between the two fingers. In response to the user's operation of reducing the distance between the two fingers, the mobile phone displays the camera album interface as shown in Figure 10 (b) therein. At this moment, the camera album interface includes 15 columns of images. Without the two fingers leaving the screen, the user continues to reduce the distance between the two fingers. In response to the user's operation of reducing the distance between the two fingers, the mobile phone displays the camera album interface as shown in Figure 10 (c) therein. At this moment, the camera album interface includes 21 columns of images.

[0135] As another example, as Figure 11 shown in (a) therein, at the initial moment, the camera album interface includes 5 columns of images. The user presses two fingers near a certain image and gradually increases the distance between the two fingers. In response to the user's operation of increasing the distance between the two fingers, the mobile phone displays the camera album interface as shown in Figure 11 (b) therein. At this moment, the camera album interface includes 3 columns of images.

[0136] Combined with the description of Figures 4 to 11 in the above embodiments, the original size of the custom RecyclerView is larger than the size of the screen. The user can directly trigger the up and down scrolling of the image by the up and down sliding operation; or, the user can change the number of image columns in the screen through the zoom operation, and then trigger the up and down scrolling of the image by the up and down sliding operation.

[0137] Taking the electronic device as a mobile phone as an example, combined with Figures 12 to 19 , the image scrolling solution based on the custom RecyclerView provided by this application will be described through 8 examples.

[0138] It should be noted that, in order to more clearly show the scrolling process of the images in the album, in the following 8 examples, the screen size is 1200 in width * 2400 in height pixels. The custom RecyclerView consists of a total of 55 grids in 5 rows and 11 columns. The custom RecyclerView includes two gears: gear 3 and gear 5. The size of the custom RecyclerView is 2000 in width * 4400 in height pixels. Among them, for the calculation method of the size of the custom RecyclerView, reference can be made to the description of the calculation method of the size of the custom RecyclerView in the above-mentioned embodiment for Figure 5 , which will not be elaborated here.

[0139] In addition, Figures 12 to 19 The middle three columns of numbers represent the actual adaptation position index coordinates of the ItemView. Taking the album including 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 that the minimum value of the actual layout position index LPmin = 0. Substituting g = 3, p = 501, and gmax = 5 into the above-mentioned relational formula (1) for reference, when the custom RecyclerView is in gear 3, the maximum value of the actual layout position index can be obtained: 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.

[0140] 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 requirements such as the screen resolution and user operations. For example, referring to Figure 5 , the initialized resolution of the custom RecyclerView can be 8400 in width * 2000 in height pixels, 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.

[0141] To facilitate the description of the relative positional relationship between the screen and the custom RecyclerView, in Figures 12 to 19 the size of the layer that receives touch events is equal to the size of the screen, and the upper left corner of the layer that receives touch events coincides with the upper left corner of the screen. Taking the upper left corner of the screen (equivalent to the upper left corner of the touch event receiving layer) as the origin, the X-axis extends horizontally to the right, and the Y-axis extends vertically downward to establish a coordinate system. It should be understood that in actual implementation, other methods can also be used to establish the coordinate system. For example, taking the upper left corner of the custom RecyclerView as the origin, the X-axis extends horizontally to the right, and the Y-axis extends vertically downward to establish a coordinate system. Or, taking the lower left corner of the touch event receiving layer as the origin, the X-axis extends horizontally to the right, and the Y-axis extends vertically upward to establish a coordinate system. The specific method of establishing the coordinate system is not limited in this application.

[0142] Example 1

[0143] Figure 12 shows a schematic diagram of a scenario where the user slides a single finger upward relative to the screen (also known as 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.

[0144] As Figure 12 shown in (a) of, at the initial moment, the mobile phone displays a grid interface based on the 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 screen. The user can use a single finger to press on the area corresponding to the actual adaptation position index 170 and slide upward by a distance of 300 pixels. In the Nth reporting cycle, the mobile phone detects that the upward sliding distance is 300 pixels, that is, dy = -300 pixels. In response to the user's single-finger upward sliding operation, as Figure 12 shown in (b) of, the mobile phone moves the custom RecyclerView upward by 300 pixels. At this moment, 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.

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

[0146] The first judgment step:

[0147] The mobile phone obtains the actual layout position index value of the custom RecyclerView. As Figure 12As shown in (b) of , the index value of the first actual layout position in the first row and the first column of the custom RecyclerView is LP1 = 246, and the index value of the last actual layout position 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 relational 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 size 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 in 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.

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

[0149] The second judgment step:

[0150] The mobile phone compares the Y-axis coordinate y2 = 2500 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 is located outside the screen, and the bottom of the custom RecyclerView has not been slid into the screen. Therefore, as Figure 12As shown in (c) thereof, the mobile phone does not need to move the custom RecyclerView downward to load new images, that is, keep the position of the custom RecyclerView unchanged, D2 = 0.

[0151] The third judgment step:

[0152] If in the second judgment step, the mobile phone moves the custom RecyclerView downward, then 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 may cause the last row of the refreshed custom RecyclerView to become the last row of the photo 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, a second position correction of the custom RecyclerView is required. Since the custom RecyclerView does not move downward and remains in the same position in the second judgment step, the phenomenon that the last row of the custom RecyclerView becomes the last row of the photo album will not occur. Therefore, as Figure 12 shown in (d) thereof, the mobile phone does not need to perform a second position correction on the custom RecyclerView, D3 = 0.

[0153] After obtaining dy = -300, D1 = 0, and D3 = 0 through the above steps, the mobile phone can obtain the final moving distance D = 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 photo album interface shown in Figure 12 (a) thereof to the one shown in Figure 12 (e) thereof, that is, the photo album interface slides up 300 pixels following the user's hand movement.

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

[0155] Example 2

[0156] Figure 13It shows a schematic diagram of a scenario where the user slides a single finger upward (also known as the first direction) relative to the screen, and 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 photo album.

[0157] 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 and holds the area corresponding to the actual adaptation position index 170 with a single finger without releasing, and continues to slide upward a distance of 300 pixels (also known as the second distance). At this moment, the distance from the lower edge of the display screen to the lower edge of the recycler view is the first distance. In the (N + 1)-th reporting point 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 first operation), as shown in (b) in Figure 13 the mobile phone moves the custom RecyclerView upward by 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.

[0158] Then, the mobile phone sequentially executes the following 3 judgment steps.

[0159] The first judgment step:

[0160] The mobile phone obtains the actual layout position index value of the ItemView of the custom RecyclerView. As shown in (a) in Figure 13As shown in (b) of , the index value of the first actual layout position in the first row and first column of the custom RecyclerView is LP1 = 246, and the index value of the last actual layout position in the last row and last column of the custom RecyclerView is LP2 = 300. Here, LP1 and LP2 can be calculated based on the actual AP value of the custom RecyclerView and the above relation (1), which will not be elaborated here. Then, since the current scenario is a single-finger upward sliding scenario, as the custom RecyclerView slides upward with a single finger, the mobile phone only needs to judge the magnitudes of LP2 = 300 and LPmax = 835. Since the actual LP2 < 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 does not carry 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.

[0161] The second judgment step:

[0162] 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. 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 known as the second direction).

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

[0164]

[0165] Correspondingly, the distance by which the custom RecyclerView moves downward (also known as the third distance) is: 400 pixels * 1 row = 400 pixels, that is, D2 = 400.

[0166] Such as Figure 13As shown in (c), after the custom RecyclerView moves down 400 pixels, the Y-axis coordinate at the bottom of the custom RecyclerView is updated to y2 = 2200 + 400 = 2600 pixels. In addition, the mobile phone updates the actual adaptation position index value of each ItemView according to the relationship of the actual AP + 1 row * 3 columns, that is, adds the first value to the AP value corresponding to each table item view. 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 .

[0167] It can be understood that in the second judgment step, the mobile phone first moves the custom RecyclerView down one row, and then adds 3 to the AP values corresponding to the ItemViews in the 2nd to 5th columns of the custom RecyclerView, which is equivalent to not moving the ItemViews, so that the user visually sees that the positions of the images on the screen remain unchanged.

[0168] The third judgment step:

[0169] The mobile phone obtains the actual layout position index value of the last ItemView of the current custom RecyclerView again. In the second judgment step, the custom RecyclerView moves down one row, so the actual layout position index values of all ItemViews in the custom RecyclerView are increased by 5 (the number of columns of the custom RecyclerView). As shown in Figure 13As shown in (d) therein, the index value of the first actual layout position of the current custom RecyclerView is updated to LP1 = 246 + 5 = 251, and the index value of the last actual layout position is updated to LP2 = 300 + 5 = 305. Then, the sizes of LP2 = 305 and LPmax = 835 are judged. Since LP2 < LPmax, 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 their finger upwards, 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 in the photo album that have not been displayed yet. Therefore, the phone does not need to perform a second position correction on the custom RecyclerView, that is, D3 = 0.

[0170] After obtaining dy = -300, D1 = 0, and D3 = 0 through the above steps, the 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 as shown in (a) therein is directly updated to as shown in (e) therein, that is, the photo album interface slides upwards following the finger by 300 pixels, and a new row of images is added at the bottom of the screen. Figure 13 As shown in (a) Figure 13 As shown in (e) therein, that is, the photo album interface slides upwards following the finger by 300 pixels, and a new row of images is added at the bottom of the screen.

[0171] Example 3

[0172] Figure 14 Shows a schematic diagram of the scenario where the user slides a single finger upwards relative to the screen, the bottom of the custom RecyclerView slides upwards into the screen, and the last row of the custom RecyclerView is the second-to-last row of the photo album.

[0173] As shown in Figure 14 (a) therein, 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 upwards a distance of 1000 pixels (also known as the eighth distance). In the M1th reporting cycle, the phone detects an upward sliding distance of 1000 pixels, that is, dy = -1000 pixels. In response to the user's single-finger upward sliding operation (also known as the third operation), as shown in Figure 14As shown in (b), the mobile phone moves the custom RecyclerView upward by 1000 pixels. At this moment, the Y-axis coordinate at the top of the custom RecyclerView is updated to y1 = -1900 - 1000 = -2900 pixels, and the Y-axis coordinate at the bottom of the custom RecyclerView is updated to y2 = 2500 - 1000 = 1500 pixels.

[0174] Then, the mobile phone sequentially executes the following 3 judgment steps.

[0175] The first judgment step:

[0176] The mobile phone obtains the actual layout position index value of the ItemView of the custom RecyclerView. As Figure 14 shown in (b), 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. Among them, 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 size 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 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. As Figure 14 shown in (c), the mobile phone does not need to perform the first position correction on the custom RecyclerView, and D1 = 0.

[0177] The second judgment step:

[0178] The mobile phone compares 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 and 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.

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

[0180]

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

[0182] Correspondingly, the distance by which the custom RecyclerView is moved down is: 400 pixels * 1 row = 400 pixels, that is, D2 = 400.

[0183] As shown in Figure 14 In (d), after the custom RecyclerView is moved down by a distance of 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 mobile 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 as shown in Figure 14 In (c) to 469, 470, and 471 as shown in Figure 14 In (d);...; the actual AP values of the last row of the custom RecyclerView are updated from 496, 497 as shown in Figure 14 In (c) to 499, 500 as shown in Figure 14 In (d). 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 mobile 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.

[0184] It can be understood that in the second judgment step, the mobile phone first moves the custom RecyclerView down by 1 row, and then adds 3 to the AP values corresponding to the ItemViews in the 2nd to 5th columns of the custom RecyclerView, which is equivalent to not moving the ItemViews, so that the user visually sees that the positions of the individual images on the screen remain unchanged.

[0185] The third judgment step:

[0186] The mobile phone obtains the actual layout position index value of the last ItemView of the current custom RecyclerView again. As shown in Figure 14As shown in (d) therein, the index value of the first actual layout position of the current custom RecyclerView is LP1 = 776 + 5 = 781, and the index value of the last actual layout position is LP2 = 830 + 5 = 835. Then, the sizes of LP2 = 835 and LPmax = 835 are judged. Since LP2 = LPmax, the last row of the current custom RecyclerView is the last row of the photo album. To avoid a blank area between the bottom of the custom RecyclerView and the bottom of the screen, the mobile phone needs to perform a second position correction on the custom RecyclerView. As Figure 14 shown in (e) therein, the mobile phone can move the custom RecyclerView downward by (2400 - 1900) = 500 pixels, that is, D3 = 500. At this moment, 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.

[0187] After obtaining dy = -1000, D1 = 0, D2 = 400, and D3 = 500 through the above steps, the mobile phone can obtain the final moving distance dy + D1 + D3 = -500 and refresh the screen display content. From the user's perspective, the user sees the photo album interface directly updated from the one shown in (a) therein to the one shown in (f) therein, that is, the photo album interface slides up 500 pixels following the finger and a new row of images is added at the bottom of the screen. Figure 14 As shown in (a) therein Figure 14 to the one shown in (f) therein, that is, the photo album interface slides up 500 pixels following the finger and a new row of images is added at the bottom of the screen.

[0188] Example 4

[0189] Figure 15 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 row of the custom RecyclerView is the last row of the photo album.

[0190] As Figure 15 shown in (a) therein, 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 lower edge of the display screen to the lower edge of the recycler view is the fourth distance. The user can use a single finger to press on the area corresponding to the actual adaptation position index 491 and slide upward by a distance of 300 pixels. In the M2th reporting cycle, the mobile phone detects that the upward sliding distance is 300 pixels, that is, dy = -300 pixels. In response to the user's single-finger upward sliding operation (also called the second operation), as Figure 15As shown in (b) thereof, 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.

[0191] Then, the mobile phone sequentially executes the following 3 judgment steps.

[0192] The first judgment step:

[0193] The mobile phone obtains the actual layout position index value of the ItemView of the custom RecyclerView. As Figure 15 shown in (b) thereof, the first actual layout position index value in the first row and the first column of the custom RecyclerView is LP1 = 781, and the last actual layout position index value in the last row and the last column of the custom RecyclerView is LP2 = 835. Among them, LP1 and LP2 can be calculated according to the actual AP value of the custom RecyclerView and the above relationship formula (1). Then, the mobile phone judges the magnitudes of LP2 = 837 and LPmax = 835. Since LP2 = LPmax, the last row of the custom RecyclerView is the last row of the photo 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 photo album, it indicates that the custom RecyclerView cannot update more images with larger actual AP values. 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 Figure 15 shown in (c) thereof, the mobile phone can move the custom RecyclerView downward by (2400 - 2200) = 200 pixels, that is, D1 = 200, and D1 is also known as the sixth distance. At this moment, 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.

[0194] The second judgment step:

[0195] The mobile phone compares the Y-axis coordinate y2 = 2400 pixels of the bottom of the custom RecyclerView with the Y-axis coordinate Y2 = 2400 pixels of the bottom of the screen. Since y2 = Y2 and the bottom of the custom RecyclerView has not been scrolled into the screen yet, soFigure 15 As shown in (d) in [reference], the mobile phone does not need to move the custom RecyclerView downward, and D2 = 0.

[0196] The third judgment step:

[0197] 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, the distance between the bottom of the custom RecyclerView and the bottom of the screen is still 0, and the phenomenon that the last row of the custom RecyclerView becomes the last row of the photo album will not occur. As Figure 15 shown in (e) in [reference], the mobile phone does not need to perform a second position correction on the custom RecyclerView, and D3 = 0.

[0198] After obtaining dy = -300, D1 = 200, and D3 = 0 through the above steps, the mobile phone can obtain the final moving distance dy + D1 + D3 = -100 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) in [reference] to the one shown in (f) in [reference], that is, the photo album interface slides up and follows the finger by 100 pixels, and no new row or multiple rows of images are added at the bottom of the screen. Figure 15 As shown in (a) in [reference] Figure 15 to the one shown in (f) in [reference],

[0199] Example 5

[0200] Figure 16 shows a schematic diagram of a scenario where the user slides a single finger downward relative to the screen, the top of the custom RecyclerView slides downward into the screen accordingly, and the first row of the custom RecyclerView is not the first row of the photo album.

[0201] As Figure 16 shown in (a) in [reference], 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 on the area corresponding to the actual adaptation position index 60 and slide downward by a distance of 600 pixels. At this moment, the distance from the lower edge of the display screen to the lower edge of the recycler view is the tenth distance. In the M3th reporting cycle, the mobile phone detects that the downward sliding distance is 600 pixels, that is, dy = 600 pixels, which is also called the eleventh distance. In response to the user's single-finger downward sliding operation (also called the fourth operation), as Figure 16As shown in (b) therein, the mobile phone moves the custom RecyclerView downward by 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.

[0202] Then, the mobile phone sequentially executes the following 3 judgment steps.

[0203] The first judgment step:

[0204] The mobile phone obtains the actual layout position index value of the ItemView of the custom RecyclerView. As Figure 16 shown in (b) therein, the first actual layout position index value in the first row and the first column of the custom RecyclerView is the actual LP1 = 81, and the last actual layout position index value in the last row and the last column of the custom RecyclerView is the actual LP2 = 135. Among them, 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 LP1 = 81 and LPmin = 0 to determine whether the first row of the custom RecyclerView is the first row of the photo album. When the first row of the custom RecyclerView is the first row of the photo album, it means that no more images with smaller actual AP values can be updated for the top ItemView of the custom RecyclerView. 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 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 top of the custom RecyclerView with the top of the screen.

[0205] Since LP1 > LPmin, the first row of the custom RecyclerView is not the first row of the photo album. The custom RecyclerView does not carry the first image of the photo album. If the user continues to slide the finger downward, 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 been displayed in the photo album. Therefore, as Figure 16 shown in (c) therein, the mobile phone does not need to perform the first position correction on the custom RecyclerView, and D1 = 0.

[0206] The second judgment step:

[0207] The mobile phone compares the Y-axis coordinate y1 = 500 pixels at the top of the custom RecyclerView with the Y-axis coordinate Y1 = 0 pixels at the top of the screen. Since y1 > Y1, the top of the custom RecyclerView has been scrolled into the screen. To enable the custom RecyclerView to accommodate more images with smaller actual LP values, the mobile phone needs to move the custom RecyclerView upward.

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

[0209]

[0210] Correspondingly, the upward movement distance of the custom RecyclerView is: 400 pixels * 2 rows = 800 pixels, that is, D2 = -800, which is also called the twelfth distance.

[0211] As Figure 16 shown in (d), after the custom RecyclerView moves upward by 800 pixels, the Y-axis coordinate at 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 values of the first row of the custom RecyclerView are updated from 50, 51, and 52 as shown in (c) to 44, 45, and 46 as shown in (d),..., and the actual AP values of the last row of the custom RecyclerView are updated from 80, 81, and 82 as shown in (c) to 74, 75, and 76 as shown in (d). Figure 16 shown in (c) to Figure 16 shown in (d),..., and the actual AP values of the last row of the custom RecyclerView are updated from Figure 16 shown in (c) to Figure 16 shown in (d).

[0212] It can be understood that in the second judgment step, the mobile phone first moves the custom RecyclerView upward by 2 rows, and then subtracts 6 from the AP values corresponding to the ItemViews in the 2nd to 5th columns of the custom RecyclerView, which is equivalent to not moving the ItemViews, so that the positions of the respective images seen by the user visually remain unchanged on the screen.

[0213] The third judgment step:

[0214] The mobile phone obtains the actual layout position index value of the first ItemView of the custom RecyclerView again. In the second judgment step, the custom RecyclerView moves up 2 rows, so the actual layout position index values of each ItemView in the custom RecyclerView are subtracted by 10. As Figure 16 shown in (e) of, the actual layout position index value of the first ItemView of the custom RecyclerView is the actual LP1 = 81 - 10 = 71, and the actual layout position index value of the last ItemView is the actual LP2 = 135 - 10 = 125. Then, the mobile phone judges the magnitudes of LP1 = 71 and LPmin = 0. Since LP1 > LPmin, the first row of the custom RecyclerView is not the first row of the photo album, and the custom RecyclerView has not carried the first image of the photo album. If the user continues to slide the finger downwards, 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 been displayed in the photo album. Therefore, the mobile phone does not need to perform a second position correction on the custom RecyclerView, and D3 = 0.

[0215] After obtaining dy = 600, D1 = 0, and D3 = 0 through the above steps, the mobile phone can obtain the final moving distance D = dy + D1 + D3 = 600 and refresh the screen display content. From the user's perspective, the user sees the photo album interface directly updated from the one shown in (a) of Figure 16 to the one shown in (f) of Figure 16 , that is, the photo album interface slides down 600 pixels following the finger and two new rows of images are added at the top of the screen.

[0216] Example 6

[0217] Figure 17 shows a schematic diagram of the scenario where the user slides a single finger downwards relative to the screen, and the top of the custom RecyclerView slides downwards (also known as the second direction) into the screen, and the first row of the custom RecyclerView is the first row of the photo album.

[0218] As Figure 17As shown in (a) therein, 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 on 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 lower edge of the display screen to the lower edge of the recycler view is the thirteenth distance. In the M4th reporting cycle, the mobile phone detects a downward slide distance of 600 pixels, that is, dy = 600 pixels, which is also called the fourteenth distance. In response to the user's single-finger downward slide operation (also called the fifth operation), as Figure 17 shown in (b) therein, the mobile phone moves the custom RecyclerView down by 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.

[0219] Then, the mobile phone sequentially executes the following 3 judgment steps.

[0220] The first judgment step:

[0221] The mobile phone obtains the actual layout position index value of the ItemView of the custom RecyclerView. As Figure 17 shown in (b) therein, the first actual layout position index value in the first row and first column of the custom RecyclerView is LP1 = 0, and the last actual layout position index value in the last row and last column of the custom RecyclerView is LP2 = 54. Among them, LP1 and LP2 can be calculated according to the actual AP value of the custom RecyclerView and the above relationship formula (1), which will not be elaborated here. Then, the mobile phone judges the magnitudes of LP1 = 0 and LPmin = 0 to determine whether the first row of the custom RecyclerView is the first row of the photo album. Since LP1 = LPmin, the first row of the custom RecyclerView is the first row of the photo album, indicating that no more images with smaller actual AP values can be updated in the top ItemView of the custom RecyclerView. 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 first position correction of the custom RecyclerView is required. As Figure 17As shown in (c), the mobile 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 at 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.

[0222] The second judgment step:

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

[0224] The third judgment step:

[0225] Since the custom RecyclerView was not moved 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, so as Figure 17 shown in (e), there is no need to perform a second position correction on the custom RecyclerView, D3 = 0.

[0226] After obtaining dy = 600, D1 = -500, and D3 = 0 through the above steps, the mobile phone can obtain the final moving distance D = dy + D1 + D3 = 100 and refresh the screen display content. From the user's perspective, the user sees the album interface directly updated from the one shown in Figure 17 (a) to the one shown in Figure 17 (f), that is, the album interface slides downward following the finger by 100 pixels, and no new row or rows of images are added at the top of the screen.

[0227] Example 7

[0228] Figure 18 shows a schematic diagram of the scenario where the user slides a single finger downward 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.

[0229] As Figure 18As shown in (a) therein, 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 on 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 lower edge of the display screen to the lower 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, which is also called the seventeenth distance. In response to the user's single-finger downward sliding operation (also called the sixth operation), as Figure 18 shown in (b) therein, the mobile phone moves the custom RecyclerView downward by 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.

[0230] Then, the mobile phone sequentially executes the following 3 judgment steps.

[0231] The first judgment step:

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

[0233] The second judgment step:

[0234] Compare the size of the Y-axis coordinate y1 = 500 pixels at the top of the custom RecyclerView with the Y-axis coordinate Y1 = 0 pixels at the top of the screen. Since y1 > Y1, the top of the custom RecyclerView has been scrolled into the screen. To enable the custom RecyclerView to hold more images with smaller actual LP values, the phone needs to move the custom RecyclerView upward.

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

[0236]

[0237] The current scenario is a single-finger downward scroll, and the Y-axis coordinate y1 = 500 > 0 at the top of the custom RecyclerView. In theory, the custom RecyclerView needs to be moved upward by 2 rows. However, since the first row of the custom RecyclerView is the second row of the album, in fact, the custom RecyclerView can only be moved upward by 1 row.

[0238] Correspondingly, the upward movement distance of the custom RecyclerView is: 400 pixels * 1 row = 400 pixels, that is, D2 = -400.

[0239] As Figure 18 shown in (d), after the custom RecyclerView is moved upward by 400 pixels, the Y-axis coordinate at the top of the custom RecyclerView is updated to y2 = 500 - 400 = 100 pixels. In addition, the 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 values of the first row of the custom RecyclerView are updated from 3, 4, and 5 as shown in (c) to 0, 1, and 2 as shown in (d),..., and the actual AP values of the last row of the custom RecyclerView are updated from 33, 34, 35 as shown in (c) to 30, 31, 32 as shown in (d). Figure 18 shown in (c) to Figure 18 shown in (d),..., and the actual AP values of the last row of the custom RecyclerView are updated from Figure 18 shown in (c) to Figure 18 shown in (d).

[0240] It can be understood that in the second judgment step, the phone first moves the custom RecyclerView upward by 1 row, and then subtracts 3 from the AP values corresponding to the ItemViews in the 2nd to 5th columns of the custom RecyclerView, which is equivalent to not moving the ItemViews, so that the user visually sees that the positions of the images on the screen remain unchanged.

[0241] The third judgment step:

[0242] The mobile phone obtains the index value of the first actual layout position of the custom RecyclerView again. In the second judgment step, the custom RecyclerView moves up one row, so the index value of the actual layout position of each ItemView in the custom RecyclerView decreases by 5 (the number of columns of the custom RecyclerView). As shown in (d) of Figure 18 , the index value of the first actual layout position of the custom RecyclerView is LP1 = 5 - 5 = 0, and the index value of the last actual layout position is LP2 = 59 - 5 = 54. Then, compare the sizes of LP1 = 0 and LPmin = 0. 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 update more images with smaller actual AP values. When the custom RecyclerView is moved down, 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, a second position correction of the custom RecyclerView is required. As shown in (e) of Figure 18 , the mobile phone can move the custom RecyclerView up by (100 - 0) = 100 pixels, that is, D3 = -100. At this moment, 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 distances.

[0243] After obtaining dy = 600, D1 = 0, and D3 = -100 through the above steps, the mobile phone can obtain the final moving distance D = dy + D1 + D3 = 500, and refresh the screen display content. From the user's perspective, the user sees the album interface directly updated from the album interface shown in (a) of Figure 18 to the album interface shown in (f) of Figure 18 , that is, the album interface slides down 500 pixels following the finger, and a new row of images is added at the top of the screen.

[0244] Example 8

[0245] Figure 19 shows a schematic diagram of the scenario where the user slides down with a single finger relative to the screen, the top of the custom RecyclerView slides down into the screen, and the first row of the custom RecyclerView is the third row of the album.

[0246] As Figure 19 shown in (a) below, 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 on the area corresponding to the actual adaptation position index 16 and slide down by a distance of 1600 pixels. At this moment, the distance from the lower edge of the display screen to the lower 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, which is also called the seventeenth distance. In response to the user's single-finger downward sliding operation (also called the sixth operation), as Figure 19 shown in (b) below, the mobile phone moves the custom RecyclerView downward by 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.

[0247] Then, the mobile phone sequentially executes the following 3 judgment steps.

[0248] The 1st judgment step:

[0249] The mobile phone obtains the actual layout position index value of the ItemView of the custom RecyclerView. As Figure 19 shown in (b) below, the first actual layout position index value in the first row and first column of the custom RecyclerView is LP1 = 10, and the last actual layout position index value in the last row and last column of the custom RecyclerView is LP2 = 64. Among them, 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, compare the sizes of LP1 = 10 and LPmin = 0 to determine whether the first row of the custom RecyclerView is the first row of the photo album. Since LP1 > LPmin, therefore, the first row of the custom RecyclerView is not the first row of the photo album. The custom RecyclerView has not carried the first image of the photo album. If the user continues to slide the finger downward, 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 been displayed in the photo album. Therefore, as Figure 19 shown in (c) below, the mobile phone does not need to perform the first position correction on the custom RecyclerView, and D1 = 0.

[0250] The 2nd judgment step:

[0251] The mobile phone compares the size of the Y-axis coordinate y1 = 1500 pixels at the top of the custom RecyclerView with the Y-axis coordinate Y1 = 0 pixels at the top of the screen. Since y1 > Y1, the top of the custom RecyclerView has been scrolled into the screen. To enable the custom RecyclerView to carry more images with smaller actual LP values, the mobile phone needs to move the custom RecyclerView upward.

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

[0253]

[0254] The current scenario is a downward scroll, and the Y-axis coordinate y1 = 1500 > 0 at the top of the custom RecyclerView. In theory, the custom RecyclerView needs to be moved upward by 4 rows. However, since the first row of the custom RecyclerView is the third row of the photo album, in fact, the custom RecyclerView can only be moved upward by two rows.

[0255] Correspondingly, the upward movement distance of the custom RecyclerView is: 400 pixels * 2 rows = 800 pixels, that is, D2 = -800.

[0256] As Figure 19 shown in (d), after the custom RecyclerView is moved upward by 800 pixels, the Y-axis coordinate at 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) to 0, 1, and 2 as shown in (d),..., and the actual AP values of the last row of the custom RecyclerView are updated from 36, 37, 38 as shown in (c) to 30, 31, 32 as shown in (d). Figure 19 shown in (c) to Figure 19 shown in (d), Figure 19 shown in (c) to Figure 19 shown in (d).

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

[0258] The third judgment step:

[0259] The mobile phone obtains the actual layout position index value of the first ItemView of the custom RecyclerView again. As shown in (d) of Figure 19 , the actual layout position index value of the first ItemView of the custom RecyclerView is LP1 = 10 - 5 * 2 = 0, and the actual layout position index value of the last ItemView is LP2 = 64 - 5 * 2 = 54. Then, compare the sizes 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 more images with smaller actual AP values cannot be updated from the top ItemView of the custom RecyclerView. When the custom RecyclerView is moved down, if the top of the custom RecyclerView moves into the screen, to avoid a blank area between the top of the custom RecyclerView and the top of the screen, the mobile phone needs to correct the position of the custom RecyclerView, that is, perform a second position correction on the custom RecyclerView. As shown in (e) of Figure 19 , the mobile phone can move the custom RecyclerView up by (700 - 0) = 700 pixels, that is, D3 = -700. At this time, 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 distances.

[0260] After obtaining dy = 1600, D1 = 0, and D3 = -700 through the above steps, the mobile phone can obtain the final moving distance D = dy + D1 + D3 = 900, and refresh the screen display content. From the user's perspective, the user sees that the album interface as shown in (a) of Figure 19 is directly updated to the album interface as shown in (f) of Figure 19 , that is, the album interface follows the finger and slides down by 900 pixels, and two new rows of images are added at the top of the screen.

[0261] It should be noted that the above 8 examples take the custom RecyclerView in the third gear as an example and list some relatively common image scrolling scenarios, which do not limit this application. It should be understood that in actual implementation, the user can trigger the mobile phone to change the gear of the custom RecyclerView through the zoom operation on the screen, change the number of image columns displayed on the screen, and thus change the actual adaptation position index value in the custom RecyclerView.

[0262] In addition, the above 8 examples are illustrated by taking the scrolling images displayed based on the custom RecyclerView as an example. In actual implementation, a scrolling list can also be displayed based on the custom RecyclerView with reference to the above examples. 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 to the left. When it scrolls to the right edge of the RecyclerView, the electronic device moves the entire RecyclerView to the right and repopulates the content in the RecyclerView. Another example is that in response to the user's right swipe operation, the custom RecyclerView scrolls to the right. When it scrolls to the left edge of the RecyclerView, the electronic device moves the entire RecyclerView to the left and repopulates the content in the RecyclerView.

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

[0264] Based on the above Figure 4 shown receiving touch event layer, custom RecyclerView, grid form layout manager, custom layout manager, the specific interaction process between each functional module in the process of implementing the image scrolling method based on the custom RecyclerView will be specifically described below.

[0265] Exemplarily, Figure 20 shows a flowchart of the image scrolling method based on the custom RecyclerView. As Figure 20 shown, the method may include the following S1 to S21.

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

[0267] The above period, also known as the control period and reporting period, is the period for the touch driver to collect the user's touch operation.

[0268] Taking the example of collecting 240 times per second by touch drive. The period T = 1 / 240 = 4.16ms, that is, the touch drive collects touch data every 4.16ms. If in a certain period, the user presses the touch screen with a single finger or two fingers, then the touch drive can determine the touch position of the single finger or two fingers according to voltage changes, etc.

[0269] S2. The touch drive receives the click operation of the user on the icon of the gallery application and starts to run the gallery application.

[0270] Exemplarily, when the user wants to view an image, the user can click on the gallery icon as shown in (a) of Figure 8 . The touch drive receives the click operation of the user on the gallery icon and transmits the click operation to the application processor. The application processor runs the gallery application. Then, the gallery application initializes the received touch event layer, the custom RecyclerView, the grid form layout manager, and the custom layout manager. After completing the creation and initialization, the mobile phone displays the gallery interface as shown in (b) of Figure 8 . Then, the user can select an album card from these album cards. For example, as shown in (b) of 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) of Figure 8 .

[0271] S3. At time t1, the touch screen receives the single-finger click operation of the user on a certain album interface and sends the coordinates (x1, y1) corresponding to the click operation to the received touch event layer. The received touch event layer forwards the coordinates (x1, y1) to the custom RecyclerView. The recycler view control records the coordinates (x1, y1).

[0272] It should be noted that the size of the received touch event layer is the same as the size of the screen. In the zooming scenario, the ReceiveTouchView can directly pass the coordinates of the touch point to the zoom gesture detector without multiplying the coordinates by a scaling factor less than 1.

[0273] S4. At time t1+T, the touch screen receives the single-finger moving operation of the user on the album interface and sends the coordinates (x2, y2) corresponding to the single-finger moving operation to the received touch event layer. The received touch event layer forwards the coordinates (x2, y2) to the custom RecyclerView. The recycler view control records the coordinates (x2, y2).

[0274] Combined with the descriptions of the above Examples 1 to 8, 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.

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

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

[0277] The grid layout manager is a native manager of the Android system, used to manage the position and size of the ItemView components 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 layout manager, but the grid layout manager does not have the function of directly passing data back to the custom RecyclerView. Therefore, this application provides a custom layout manager. The custom layout manager serves as a bridge between the grid layout manager and the custom RecyclerView, playing the role of data passing back. In the solution of this application, the grid layout manager can first pass 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.

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

[0279] S7, the custom RecyclerView moves the distance dy.

[0280] Among them, the custom RecyclerView in the above S7 is a grid list created during initialization, such as Figure 5 the number of grid columns shown. This grid list can be used to display images in the photo album.

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

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

[0283] For 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.

[0284] Referring to the descriptions of the above embodiments, after the custom RecyclerView moves a distance of dy, it may cause the upper edge or the lower edge of the custom RecyclerView to move into the screen, resulting in a blank area appearing on the screen. 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, it is necessary to execute S8 - S14 to determine whether position correction of the custom RecyclerView is required.

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

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

[0287] If LP1 = LPmin, it can be determined that the actual layout position index value LP1 points to the first image of the photo album, and it has scrolled to the first row of the photo album. The top ItemView of the custom RecyclerView cannot update more images with smaller actual AP values. When the custom RecyclerView is moved downwards, 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 appearance of the blank area, the custom RecyclerView executes the following S10 to calculate the moving distance D1 for the first position correction.

[0288] If LP1 > LPmin, it can be determined that the actual layout position index value LP1 has not pointed to the first image of the photo album, and it has not scrolled to the first row of the photo album. The top ItemView of the custom RecyclerView can still update more images with smaller actual AP values. The custom RecyclerView executes the following S11.

[0289] S10. The custom RecyclerView determines the moving distance D1 based on the coordinate Y1 of the top of the screen and the coordinate y1 of the top of the custom RecyclerView.

[0290] 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 the moving distance dy.

[0291] When single-finger swiping 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: D1 = 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.

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

[0293] S11. The custom RecyclerView determines whether the actual layout position index value LP2 points to the last image of the photo album.

[0294] Exemplarily, the custom RecyclerView can determine the size relationship between the actual layout position index value LP2 of the last ItemView and LPmax to determine whether the actual layout position index value LP2 points to the last image in the album.

[0295] If LP2 = LPmax, it can be determined that the actual layout position index value LP2 points to the last image in the album, and it has scrolled to the last row of the album. The bottom ItemView of the custom RecyclerView cannot 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 appearance of the blank area, the custom RecyclerView executes the following S12 to calculate the moving distance D1 for the first position correction.

[0296] If LP2 < LPmax, it can be determined that the actual layout position index value LP2 has not pointed to the last image in the album and has not scrolled 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, it executes the following S13.

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

[0298] The "coordinate y1 at the bottom of the custom RecyclerView" in the above S10 refers to the coordinate at the bottom of the custom RecyclerView after the moving distance dy.

[0299] When 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 moving distance using the following relationship: D1 = Y2 - y2. Here, Y2 represents the coordinate at the bottom of the screen, and y2 represents the coordinate at the bottom of the custom RecyclerView.

[0300] Exemplarily, Figure 14For example, the coordinate Y2 at the bottom of the screen is 2400, the coordinate y2 at the bottom of the custom RecyclerView is 2200, and D1 = 200. Then, move the custom RecyclerView downward by a distance of 200, and re-obtain the updated coordinate at the bottom of the custom RecyclerView as y2' = 2200 + 200 = 2400.

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

[0302] 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, then the custom RecyclerView does not need to move upward or downward. Therefore, the custom RecyclerView determines that the moving distance D1 = 0.

[0303] It should be noted that the above embodiments are described by taking S9 executed first and then S11 as an example, which does not limit the present application. As an example, S11 can also be executed first and then S9. As another example, if dy < 0, it means a single-finger upward swipe, and it may swipe to the last image of the album. Therefore, it can only be judged whether the actual layout position index value LP2 points to the last image of the album; if dy > 0, it means a single-finger downward swipe, and it may swipe to the first image of the album. Therefore, it can only be judged whether the actual layout position index value LP1 points to the first image of the album.

[0304] One of the above S10, S12, and S13 is 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.

[0305] S14, the custom RecyclerView moves by the moving distance D1 according to the moving distance D1.

[0306] It can be understood that if the moving distance D1 is obtained through S10, the current scenario is a single-finger downward swipe scenario, D1 = Y1 - y1 < 0, and the custom RecyclerView needs to be moved upward. If the moving distance D1 is obtained through S12, the current scenario is a single-finger upward swipe scenario, D1 = Y2 - y2 > 0, and the custom RecyclerView needs to be moved downward. If the moving distance D1 is obtained through S13, it is equivalent to not performing the first position correction on the custom RecyclerView.

[0307] S15. The custom RecyclerView re-obtains the coordinate y1' at the top of the custom RecyclerView and the coordinate y2' at the bottom of the custom RecyclerView.

[0308] 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, such that y1' ≠ y1 and 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, such that y1' = y1 and y2' = y2.

[0309] S16. The custom RecyclerView determines whether the coordinate y1' at the top of the custom RecyclerView is greater than the coordinate Y1 at the top of the screen.

[0310] If y1' > Y1, it means that the top of the custom RecyclerView has been scrolled into the screen. 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.

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

[0312] S17. The custom RecyclerView determines the moving distance D2 based on the coordinate y1' at the top of the custom RecyclerView and the coordinate Y1 at the top of the screen.

[0313] For the single-finger downward scrolling scenario, if y1' > Y1, then the custom RecyclerView can calculate the number of rows to move the custom RecyclerView upward according to the following relationship:

[0314]

[0315] where s1' represents the planned number of rows to move the custom RecyclerView upward, m represents the side length of a single ItemView in the custom RecyclerView, Y1 represents the coordinate at the top of the screen, and y1' represents the coordinate at the top of the custom RecyclerView.

[0316] Refer to Figure 16Regarding the description, the first row of the custom RecyclerView may be the middle row of the photo album. When the user swipes down with a single finger, the probability of swiping to the first row of the photo album is relatively low, so that the number of rows s1' will not exceed the actual movable number of rows, and there is no need to correct the number of rows s1'. Referring to the description for Figure 18 and Figure 19 Regarding the description, the first row of the custom RecyclerView may be the second-to-last row or the third-to-last row of the photo album. When the user swipes up with a single finger, the probability of swiping to the first row of the photo album is relatively high, so that the number of rows s1' exceeds the actual movable number of rows, and it may be necessary to correct the number of rows s1'. Among them, the actual movable number of rows can be determined according to the total number of images in the photo album and the actual AP value of the custom RecyclerView, which refers to the maximum number of ItemView rows that can be added at the top of the custom RecyclerView.

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

[0318]

[0319] Among them, s2' represents the maximum number of rows that the custom RecyclerView is allowed to move up. LPmin points to the first image of the photo 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.

[0320] The custom RecyclerView can calculate the final number of rows to move up the custom RecyclerView according to the relational expression:

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

[0322] Among them, s' represents the final number of rows to move up the custom RecyclerView, and min() is the minimum value function.

[0323] Correspondingly, the custom RecyclerView can determine the moving distance: D2 = s' * m = min(s1', s2') * m. Among them, s' represents the final number of rows to move up the custom RecyclerView, and m represents the side length of a single ItemView in the custom RecyclerView.

[0324] In addition, the custom RecyclerView can update the actual adaptation position index value of each ItemView according to the relationship: AP - s' * g. Here, AP represents the actual adaptation position index value of an ItemView, s' represents the number of rows by which the custom RecyclerView is finally moved upward, and g represents the gear of the custom RecyclerView.

[0325] For example, as Figure 16 shown, y1 = 500 > Y1 = 0, s' = min(s1', s2') = min(2, 17) = 2. Correspondingly, the upward movement distance of the custom RecyclerView is: 400 pixels * 2 rows = 800 pixels, that is, D2 = -800. In addition, the actual adaptation position index value of each ItemView can be updated according to the actual AP - 6. For example, the actual adaptation position index values 50, 51, and 52 of the first row of the custom RecyclerView are updated to 44, 45, and 46 respectively.

[0326] For another example, as Figure 18 shown, y1 = 500 > Y1 = 0, s' = min(s1', s2') min(2, 1) = 1. Correspondingly, the upward movement distance of the custom RecyclerView 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.

[0327] For another example, as Figure 19 shown, y1 = 1500 > Y1 = 0, s' = min(s1', s2') = min(4, 2) = 2. Correspondingly, the upward movement distance of the custom RecyclerView is: 400 pixels * 2 rows = 800 pixels, that is, D2 = -800. In addition, the actual adaptation position index value of each ItemView can be updated according to the actual AP - 6. For example, the actual adaptation position index values 6, 7, and 9 of the first row of the custom RecyclerView are updated to 0, 1, and 2 respectively.

[0328] In S18, the custom RecyclerView determines whether the coordinate y2' at the bottom of the custom RecyclerView is less than the coordinate Y2 at the bottom of the screen.

[0329] If y2' < Y2, it indicates that the bottom of the custom RecyclerView has been scrolled into the screen. To enable the custom RecyclerView to accommodate more images with larger actual LP values, the custom RecyclerView needs to be moved downward, and the following S19 is executed.

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

[0331] S19. The custom RecyclerView determines the moving distance D2 based on the coordinate y2' of the bottom of the custom RecyclerView and the coordinate Y2 of the bottom of the screen.

[0332] For the single-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 following relationship:

[0333]

[0334] where s1 represents the planned number of rows to move the custom RecyclerView downward, m represents the side length of a single ItemView in the custom RecyclerView, Y2 represents the coordinate of the bottom of the screen, and y2 represents the coordinate of the bottom of the custom RecyclerView.

[0335] Referring to the description of Figure 13 The last row of the custom RecyclerView may be the middle row of the photo album. When the user slides upward with a single finger, the probability of sliding to the last row of the photo album is relatively low, so that the number of rows s1 will not exceed the actual movable number of rows, and there is no need to correct the number of rows s1. Referring to the description of Figure 16 The last row of the custom RecyclerView may be the second-to-last row of the photo album. When the user slides upward with a single finger, the probability of sliding to the last row of the photo album is relatively high, so that the number of rows s1 exceeds the actual movable number of rows, and it may be necessary to correct the number of rows s1. Among them, the actual movable number of rows can be determined according to the total number of images in the photo album and the actual AP value of the custom RecyclerView, and it refers to the maximum number of ItemViews that can be added at the bottom of the custom RecyclerView.

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

[0337]

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

[0339] The custom RecyclerView can calculate the final number of rows to move the custom RecyclerView downward according to the relationship:

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

[0341] Among them, s represents the final number of rows to move the custom RecyclerView downward, and min() is the function to take the minimum value.

[0342] Correspondingly, the custom RecyclerView can determine the moving distance: D2 = s' * m = min(s1, s2) * m. Among them, s represents the final number of rows to move the custom RecyclerView upward, and m represents the side length of a single ItemView in the custom RecyclerView.

[0343] 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 final number of rows to move the custom RecyclerView downward, and g represents the current gear of the custom RecyclerView.

[0344] For example, as Figure 13 shown, y2 = 2200 < Y2 = 2400, s = min(s1, s2) min(1, 106) = 1. Correspondingly, the downward moving distance of the custom RecyclerView 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 148, 149, and 150 of the first row of the custom RecyclerView are updated to 151, 152, and 153 respectively.

[0345] Another example, as Figure 15 shown, y2 = 2200 < Y2 = 2400, s = min(s1, s2). min(3, 1) = 1. Accordingly, the downward movement distance of the custom RecyclerView is: 400 pixels * 1 row = 400 pixels, i.e., D2 = 400. Additionally, 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.

[0346] S20, the custom RecyclerView determines that the movement distance D2 = 0.

[0347] One of the above S17, S19, and S20 is executed. Based on S17, S19, or S20, the movement distance D2 can be calculated. After S17, S19, or S20, the following S21 may also be included.

[0348] S21, the custom RecyclerView moves by the movement distance D2 according to the movement distance D2, and refreshes the actual AP and actual LP of each ItemView in the custom RecyclerView.

[0349] If the movement distance D2 is obtained through S17, the current scenario is a single-finger downward sliding scenario, and the custom RecyclerView needs to be moved upward. For the calculation method of the movement distance D2 and the method of refreshing the actual AP and actual LP, reference can be made to the description of S17 above, which will not be elaborated here.

[0350] If the movement distance D2 is obtained through S19, the current scenario is a single-finger upward sliding scenario, and the custom RecyclerView needs to be moved downward. For the calculation method of the movement distance D2 and the method of refreshing the actual AP and actual LP, reference can be made to the description of S19 above, which will not be elaborated here.

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

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

[0353] Referring to the description of the above embodiments, if the mobile phone moves the custom RecyclerView down or up in S15 - S21, it is necessary 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 may cause the last row of the refreshed custom RecyclerView to become the last row of the photo album, and further cause the upper or lower edge of the custom RecyclerView to be within the screen. 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 it is necessary to correct the position of the custom RecyclerView again.

[0354] In S23, the custom RecyclerView determines whether the actual layout position index value LP1' points to the first image of the photo album.

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

[0356] If LP1’ > LPmin, it can be determined that the actual layout position index value LP1’ has not pointed to the first image of the photo album, and the custom RecyclerView executes the following S25.

[0357] In S24, the custom RecyclerView determines the moving distance D3 based on the coordinate Y1 at the top of the screen and the coordinate y1” at the top of the custom RecyclerView.

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

[0359] When single - finger swipes down 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 at the top of the screen, and y1” represents the coordinate at the top of the custom RecyclerView.

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

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

[0362] 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, execute the following S27.

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

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

[0365] When single-finger swipes up 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 at the bottom of the screen, and y2 represents the coordinate at the bottom of the custom RecyclerView.

[0366] S27. The custom RecyclerView determines that the moving distance D3 = 0.

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

[0368] S28. The custom RecyclerView moves by the moving distance D3 according to the moving distance D3.

[0369] For the specific implementation methods of S22 to S28, reference can be made to the relevant descriptions of the above S8 to S14, which will not be elaborated here.

[0370] S29. The custom RecyclerView notifies the SurfaceFlinger to update the photo album interface, and then the SurfaceFlinger sends the display to the display screen.

[0371] It should be noted that S4 to S29 can be completed within one vertical synchronization (Vsync) signal period. 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 composition of the recycler view have been completed through S4 to S29, the recycler view that has completed all movements and refreshes (i.e., a frame of image to be displayed) can be passed to the display driver, so that the display updates the screen content. If a Vsync signal arrives and the recycler view has not been moved and refreshed, the display continues to show the previous screen content.

[0372] S30, the custom RecyclerView returns the actual scrolling distance D collected within one period T to the custom layout manager. Where D = dy + D1 + D3. The defined layout manager forwards the actual scrolling distance D = dy + D1 + D3 collected within one period T to the grid-style layout manager.

[0373] S31, the grid-style layout manager determines whether the user operation is an inertial scrolling operation or a follow-touch scrolling operation based on the actual scrolling distances collected in multiple periods T.

[0374] As an example, the grid-style layout manager can send the actual scrolling distances collected in multiple periods T to the native recycler view control. Then, the native recycler view control determines whether the user operation is an inertial scrolling operation or a follow-touch scrolling operation based on the actual scrolling distances collected in multiple periods T.

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

[0376] If the actual scrolling distance collected in multiple periods 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 scrolling operation, so it is necessary to trigger the scrolling to display 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 in a proportional relationship with the actual scrolling distance collected in multiple periods T. In this way, after the user ends the single-finger inertial scrolling operation, the album interface will continue to scroll downward for a certain distance as if there is inertia, so as to achieve a large number of image updates.

[0377] In the above solution, when the user swipes up and down in the photo gallery with a single finger, the custom RecyclerView also scrolls in the same direction as the single-finger swipe direction. 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 direction and repopulates the content in the custom RecyclerView. In this way, it is only necessary to populate the content in the custom RecyclerView after the movement, without creating a new row of ItemView at the top or bottom of the custom RecyclerView, nor re-measuring the size and calculating the position of each ItemView of the custom RecyclerView. Therefore, the data processing flow is optimized, and the data processing time during image scrolling in the photo gallery is shortened, thus solving the frame drop problem.

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

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

[0380] The processor 110 may be used 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.

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

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

[0383] A touch sensor, also known as a "touch panel". The touch sensor can be disposed on the display screen 150, and the touch sensor and the display screen 150 form a touch screen, also known as a "touch display screen". The touch sensor can be used to detect touch operations acting thereon or nearby. The touch sensor can transmit the detected touch operations to the application processor to determine the type of touch event and provide visual output related to the touch operation through the display screen 150. In some other embodiments, the touch sensor can also be disposed on the surface of the electronic device 100, at a different position from the display screen 150.

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

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

[0386] The electronic device, computer-readable storage medium, and computer program product provided by the embodiment of the present application are all used to execute the method provided by the above embodiment. Therefore, the beneficial effects that can be achieved can refer to the beneficial effects corresponding to the method provided above, and will not be elaborated here.

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

[0388] The terms "first", "second", etc. in the description and claims of this application are used to distinguish different objects or different treatments of the same object, rather than to describe a specific order of the objects. For example, the first operation, the second operation, etc. are used to distinguish different operations, rather than to describe a specific order of the operations. In the embodiments of this application, "a plurality of" means two or more.

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

[0390] The above content is only the specific implementation manner of this application, but the protection scope of this application is not limited thereto. Any changes or substitutions within the technical scope disclosed in this application should be covered by the protection scope of this application. Therefore, the protection scope of this application should be subject to the protection scope of the claims.

Claims

1. A scrolling display method, characterized in that, Applied to an electronic device with a display screen, the method includes: Displaying first content based on a recycler view within the display screen, where the size of the recycler view is larger than the size of the display screen, the distance from the lower edge of the display screen to the lower edge of the recycler view is a first distance, and the edges of the recycler view are located outside the display screen; Receiving a first operation by the user to slide a second distance along a first direction on the display screen, where the first direction is from the lower edge of the display screen pointing to the upper edge of the display screen, and the second distance is greater than the first distance; In response to the first operation, moving the recycler view along a second direction by a third distance and displaying second content based on the recycler view within 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.

2. The method according to claim 1, characterized in that, The recycler view includes table item views arranged in M rows and N columns, and each table item view 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 number of image columns of the first grid interface and the second grid interface is the same; or, the first content is a first list, the second content is a second list, and the number of table columns of the first list and the second list is the same.

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

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

5. The method according to any one of claims 1 to 4, characterized in that, The first content is a first grid interface; Before displaying the second content based on the recycler view within the display screen, the method further includes: Adding a first value to the adaptation position index AP value corresponding to each table item view in the recycler view; Wherein, the AP value is used to represent the number of the image displayed in the table item view, and the first value is determined according to the lower edge of the recycler view, the lower edge of the display screen, the second distance, the side length of the table item views 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 The distance from the lower edge of the display screen to the lower edge of the recycler view is a fourth distance, and the edges of the recycler view are located outside the display screen; The method further includes: Receiving a second operation by the user to slide 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, move the recycler view along the first direction by a sixth distance, and display third content based on the recycler view 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 lower edge of the display screen to the lower edge of the recycler view is 0; Wherein, before moving the recycler view in response to the second operation and after moving the recycler view in response to the second operation, the last row of images of 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, The distance from the lower edge of the display screen to the lower edge of the recycler view is a seventh distance, and the edge of the recycler view is located outside the display screen; The method further includes: Receiving a third operation in which the user slides an eighth distance along the first direction on the display screen, where the eighth distance is greater than the seventh distance; In response to the third operation, move the recycler view along the first direction by a ninth distance, and display fourth content based on the recycler view within the display screen, where the ninth distance is less than the difference between the eighth distance and the seventh distance, and the distance from the lower edge of the display screen to the lower edge of the recycler view is 0; Wherein, before moving the recycler view in response to the third operation, the last row of images of the recycler view does not include the last image of the album; after moving the recycler view in response to the third operation, the last row of images of the recycler view includes the last image of the album.

8. The method according to claim 7, wherein Before moving the recycler view along the first direction by the sixth distance, the method further includes: Determine the sixth distance according to the actual layout position LP value of the last entry view of the recycler view, the LP value of the last image in the album, the side length of the entry view in the recycler view, and the number of columns of the recycler view; Wherein, the LP value is used to represent the position of the entry 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 a tenth distance, and the edge of the recycler view is located outside the display screen; The method further includes: Receiving a fourth operation in which the user slides an eleventh distance along the second direction on the display screen, where the eleventh distance is greater than the tenth distance; In response to the fourth operation, move the recycler view along the first direction by a twelfth distance, and display fifth content based on the recycler view within the display screen, where the twelfth distance is greater than or equal to the difference between the eleventh distance and the tenth distance; Wherein, before moving the recycler view in response to the fourth operation and after moving the recycler view in response to the fourth operation, the first row of images of the recycler view does not include the first image of the album.

10. The method according to claim 9, wherein Before moving the recycler view along the first direction by the twelfth distance, the method further includes: Determine the twelfth distance according to the upper edge of the recycler view, the upper edge of the display screen, the eleventh distance, and the side length of the table item view in the recycler view.

11. The method according to claim 9, wherein, The fifth content is the third grid interface; Before displaying the second content based on the recycler view within the display screen, the method further includes: Subtract a second value from the adaptation position index AP value corresponding to each table item view in the recycler view; Wherein, the AP value is used to represent the number of the image displayed in the table item view, and the second value is determined according to 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, The distance from the upper edge of the display screen to the upper edge of the recycler view is the thirteenth distance, and the edge of the recycler view is located outside the display screen; The method further includes: Receive a fifth operation in which the user slides a fourteenth distance along the second direction on the display screen, and the fourteenth distance is greater than the thirteenth distance; In response to the fifth operation, move the recycler view along the second direction by a fifteenth distance, and display sixth content based on the recycler view within the display screen. The fifteenth distance is equal to the difference between the fourteenth distance and the thirteenth distance, and the distance from the upper edge of the display screen to the upper edge of the recycler view is 0; Wherein, before moving the recycler view in response to the fifth operation and after moving the recycler view in response to the fifth operation, the first row of images in the recycler view includes the first image of the photo album.

13. The method according to any one of claims 1 to 6, characterized in that, The distance from the upper edge of the display screen to the upper edge of the recycler view is the sixteenth distance, and the edge of the recycler view is located outside the display screen; The method further includes: Receive a sixth operation in which the user slides a seventeenth distance along the second direction on the display screen, and the seventeenth distance is greater than the sixteenth distance; In response to the sixth operation, move the recycler view along the second direction by an eighteenth distance, and display seventh content based on the recycler view within the display screen. The eighteenth distance is less than the difference between the seventeenth distance and the sixteenth distance, and the distance from the upper edge of the display screen to the upper edge of the recycler view is 0; Wherein, before moving the recycler view in response to the sixth operation, the first row of images in the recycler view does not include the first image of the photo album; after moving the recycler view in response to the sixth operation, the first row of images in the recycler view includes the first image of the photo album.

14. The method according to claim 13, wherein Before moving the recycler view along the second direction by the eighteenth distance, the method further includes: Determine the eighteenth distance according to the actual layout position LP value of the first table item view in the recycler view, the LP value of the first image in the photo 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 represent 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, the computer program code includes computer instructions, and the one or more processors call the computer instructions to cause 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, the chip system includes one or more processors, and the one or more processors are used to call computer instructions to cause the electronic device to execute the method according to any one of claims 1 to 14.

17. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes instructions, and when the instructions run on an electronic device, the instructions cause the electronic device to execute the method according to any one of claims 1 to 14.

Images