What is EnhancedScroller?
In simple terms advanced form of ScrollerView and extension plugin for the Unity UI's ScrollRect with additional features. The most notable and winning feature is the Recycling of gameObject avoiding garbage collection for better memory and processor performance. There are many other added features like snapping, looping and so on. You can learn better about it and its features in EnhancedScroller in Asset Store.
Why use EnhancedScroller?
Because it is easy to use. It is dynamic data-driven allowing us to build demo design without preparing any data. It doesn't concern itself about the UI of the item listed in the list and we can use different types of items in a single list without any difficulty. so you can show a list of different item designs in a single list for your prototype using EnhnacedScroller before selecting one from them. EnhancedScroller allows the use of different sizes of items as well. So you are able to give any size to any item that you desire without any problem.
There are many features added to EnhanceScroller as shown in the picture below. You can add the required features to your list using these features from the editor. You can create an infinite loop of the list using
Loop features and snap the items using
Snapping. All these features are explained in detail in the Manual of the EnhancedScroller Plugin on the official site.
How to use EnhancedScroller?
For using EnhancedScroller in your project you will need to buy its plugin from the AssetStore. If you are considering if it is worth buying them I will say it is worth it. Because it will reduce your workload when working with a list for ScrollView. Now enough of the price taking, let's start by knowing how we to actually use the EnhancedScroller in your project.
First of all, you will need a base data class to hold the data of each item for the list. If you need many types of data to be shown in the list then you need to extend them from this base data class. By doing so we can use the list of this base data class and cast them to the required data class and use different data when required.
Secondly, you will need a script to control the enhancedScroller for your list. Let's create a script
IEnhancedScrollerDelegate as its extension class and add the required references and variables as given below.
As you can see in the picture above we have the required following things:
_data-> Small List which is provided by the EnhancedScroller. You can replace it with an ordinary list as well. It is used for storing the data with which the list to be shown by EnhancedScroller will be updated.
scroller-> EnhancedScroller reference which will be dragged and dropped from the editor. It is the scroller we will delegate the controller script
cellViewPrefab-> Prefab for each item on the list. This prefab is attached with a script to update the item and is extended from
EnhancedScrollerCellView must to included as an extension class for the scripts that will be used as a prefab for the item of the list. The reason is that EnhancedScroller uses
EnhancedScrollerCellView for handling the items of the list in the scene, not the script we create.
This script must be giving errors as we haven't included 3 mandatory methods for the interface class
IEnhancedScrollerDelegate. Let's add them.
- Method for providing the total number of items the list of the EnhanceScroller will handle.
The total items to be shown will be the same number as per our `_data` of SmallList as it will hold the data we need to show in the list.
2. Method for providing the size(generally height) of each index.
The EnhancedScroller ask for the size of the item while providing the index of item from the list. So if the items are all of the same sizes then provide a size of an item else provide the size of the corresponding item's size as per the given index by the EnhancedScroller.
Here we are providing 2 different sizes (alternating between odd and event data index ) to the item without checking for the data type as we will be only providing one type of data in the list. You can provide only one size as well.
3. Method to provide prefab for each data.
The EnhancedScroller ask for the prefab to be used in the list by providing the dataIndex which correspond with the data index of the list of data
_data we have. Hereby comparing the type of the dataType from our reference list we can provide different types of prefab for the item. But we are using a single itemPrefab so will provide just that.
Note: The update of the items in each item is done here as shown in line number 22 in the above picture. You can customize it to your preferences as currently, we are only providing only the data to the item which correspond to the index of the dataList.
These three are the main methods that are provided by EnhanceScroller for getting the information it requires for controlling the list items. Now let's do another main thing we need to do for this controlling script to start working.
First, we need to provide the controller script `ListViewContrller` as the delegate of the EnhanceScroller `scroller` so the EnahncedScroller use the correct script to control the listItem.
After updating the delegate of the EnahancedScroller load the data to be loaded to the list reference `_data` and Reload the EnhanceScroller method as shown in the picture below.
The control script is completed so let's create a script `CellView` for the prefab item for the list as shown below.
CellView is the script that will be attached to the prefab gameObject and used as
Note: Be sure that the script used in the prefab for the list is extended from
EnhancedScrollerCellView. if you forget this then enhance scroller will not identify that script and its gameObject.
The scripting work is finished so let's work on the scene.
- Create an empty gameObject to hold the Controller script ListViewController as shown in the picture below.
2. Create a gameObject below the panel created and attach the
EnhanceScroller script to it. Add image to it and mask and the most important thing is to give the size for this panel as per your requirement.
3. Create a temporary content gameobject
Content: PlaceHolder like in the picture below. The reason for saying temporary is because the `EnhancedScroller` will create its own content gameobject when initiated.
4. Create an item that will be used as a prefab for the list items. In our case, we just created an image and gave it some height and width and created a text gameobject inside it. In Inspector as you can see in the picture below we have added
CellView script and updated the reference which is only Text for now.
CellIdentifier is used by the EnhancedScroller so b sure to add any word or character. Do not leave
CellIdentifier empty. If left empty EnhancedScroller will give an error when loading.
5. Return to EnhanceScroller attached panel and provide the temporary content
Content: PlaceHolder to Content of
ScrollRect in the inspector. This is done so that EnhancedScroller remove the temporary content when it is creating new content.
6. The prefab for an item must be used as a prefab so drag and drop the item to the asset folder.
7. Give the reference of the item prefab from the asset not from the hierarchy.
Now you are ready to play the scene and use the enhanced Scroller. If you need to add space and padding among the items then give it as the given picture below.
Now you should get the result as shown in the picture given below.
This is all for the simple form of listing items in a list using EnhancedScroller. I hope this article will be helpful for others.