cobzarugabriel/recyclable-scroll-rect

Recyclable Scroll Rect reuses or recycles the least number of cells required to fill the viewport. As a result any number of items can be shown in the list without any performance hit.

Recyclable Scroll Rect

https://twitter.com/polyandcode
https://polyandcode.com || https://www.facebook.com/Polyandcode || https://www.instagram.com/polyandcode/

Summary

Using the default Scroll-Rect to create lists with huge number of items results in a laggy performance. Specially when creating a list with hundreds or thousands of items it becomes impossible to use the scroll rect with the default approach i.e instantiating that many items. Recyclable Scroll Rect reuses or recycles the least number of cells required to fill the viewport. As a result a huge number of items can be shown in the list without any performance hit. Currently only vertical single item list is supported. RoadMap (based on feedback):

1. Horizontal list
2. Gird view
3. Content size fitting.

Recycling	Comparison with Default approach

Quick start Guide :

Check the Demo scene for a complete example

The usage and struture is similar to Native iOS TableViewController. To summarize there are two main steps. One is to create a prototype cell and the other is to set a DataSource. A prototype cell is basically the cell's layout in the list and a Datasource is responsible for providing the List the list size and the configuration of cells as the list updates/recycles. Following are the steps to set up a Recyclable Scroll Rect :

1. Recyclable Scroll View
2. Prototype cell
3. Cell class
4. Datasource
5. Bindings

1. Recyclable Scroll View : You can create a Recyclable Scroll View by going to Create -> UI -> Recyclable Scroll View .

2. Prototype cell : As the name says, a Prototype cell is basically the cell layout for your list. A prototype cell can be in the heirarchy as the content's child or it can be a prefab. Don’t worry about disabling it If present in the heirarchy, it will not show up in play mode. The prototype cell must be assigned to the Recyclable Scroll Rect. When you create a Recyclable Scroll View from menu, a prototype cell will already be present in the content. You can delete it to create your own or modify it according to your requirements.

3. Cell class : Once you create your desired Prototype cell, assign it to the Recyclable Scroll Rect component. Now you will need to create a Cell script and add it to the Prototype Cell. This script must be a Monobehaviour inheriting from ICell. The purpose of a Cell script is to confugure the cell as the list is scrolled or updated. You must keep reference to the UI items that are required to be updated according to your data source. Check DemoCell class for reference

4. Datasource : The next step is to create a Datasource class. A Datasource is responsible for data related operations in the Recyclable scroll rect. These are the no of items in the list and how a cell should be configured according to the data. To create a Data source, extend your class with IRecyclableScrollRectDataSource and implement the GetItemCount and SetCell Methods.
• GetItemCount : This method is basically to tell the Recyclable ScrollRect the length of the List.
• SetCell : This method is responsible for configuring the cell UI according to your data. A cell is received as a parameter from which necessary UI configuration can be done. The recieved cell is of ICell type. Cast it to the inherited Cell type before using. Check RecyclableScrollRectDemo class for reference

5. Bindings : Once you are done with the creation of Cell and Datasource, the last step is to assign the datasource instance to the Recyclable Scroll Rect. The assignmnent must be done in Awake or before Recyclable Scroll Rect's start. Check Awake method in RecyclableScrollRectDemo class.

Others:
Self Initiaze : The Recyclable Scroll Rect initializes on its own in it's Start method. If you wish to initialize it yourself you can turn off component's self initialize property and call the Initialize method whenever required.