Creating a list of a single type of data in EnhancedScroller is too easy if you have gone through the 1st demo the EnhancedScroller Plugin provides. Changing the size and UI of the same type of data is easy and faster with EnhancedScroller as you won't need to handle the list by yourself you will just need to provide the list of the data for the EnhancedScroller and it will handle them easily. The simple layout with EnhancedScroller is created using a single data list and it looks like the picture below.
But in this article will discuss creating a little bit hard way of listing two types of rows/items using EnhancedScroller. The image for this type of list is shown at the top of the image of this article. As you can see in the picture at the top of this article, we have two types of layouts in the list.
One is a simple layout style item with a header only.
And another item has multiple items which come under the same category represented by the header section above it.
The grid items continue until the items of the same section are available to be shown and then the next section will start with another category with the same style layout of a single header and then followed by its related items in a grid layout.
This way of representing items with header and items is done using two different lists in EnhancedScroller. One list will hold all the data (including the header) which will be displayed in the scroll list and another list will hold the references for each row of the item of the scroll list. With only theory, you may not understand properly so let's learn it with some examples as below.
The given below requirements should be fulfilled for a better understanding of this article.
First of all, we need to create scripts for the classes which will hold the data of each item on the list. For this project, we need 3 types of data classes. They are as follows:
1. Data: Base class which will be used for holding the list of items and will be used be extended class for other data classes such as header or footer.
2. HeaderData: Extension class of the base data that will hold the data for header items.
2. BodyData: Extension class of the base data that will represent the row section for grid items. This class will have 3 variables as shown in the picture below that manage the information for the multiple item data it will hold.
2. ItemData: Extension class of the base data that will hold the data for the item of the list.
2. EnhancedScroller controlling script
After the data classes are created we need a script to handle them using EnahancedScroller for our desired list view layout. Let's create a new script and name it CellViewListController. This script will have an interface of EnhancedScroller IEnhancedScrollerDelegate as all the EnhancedScroller controlling scripts must-have.
This CellViewListController in the above picture has many variables and they are:
_dataList -> Small list (provided list variant by EnhancedScroller) will be used to hold the data of the items that will be used to load the information to the list items.
_dataListRefHeaderAndRow ->Small list (provided list variant by EnhancedScroller) will hold the reference of the header and row(holding multiple items) data of the list. Its total count will be used for deciding the total number of rows the EnhancedScoller will control. We are using this reference list because the actual data holding list _dataList may have a dynamic number of items after header data. So to show the correct data for each row(holding multiple items) we have to use this reference data list.
scroller -> Reference of the EnhancedScroller which will be dragged and dropped from the editor. It is the scroller we will delegate the controller script CellViewListController for.
HeaderRowViewPrefab -> Prefab with an attached script of an extended class EnhancedCellView. It represents the prefab for the header row of the list.
BodyRowViewPrefab ->Prefab with an attached script of an extended class EnhancedCellView. It represents the prefab of a single row of the list with multiple items.
itemPrefab -> Prefab for each item on the list.
[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.
1.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 _dataListRefHeaderAndRow of SmallList as it will hold the references of the header and row we will need in total to show all the data we have loaded in the list _dataList.
2. Method for providing the size(generally height) of each item of the corresponding index from the list. 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. In our case, we will provide the individual size as shown in the picture below.
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 usually correspond with the data index of the list holding actual data instead of reference data. But in our case, the provided dataIndex in the parameter will correspond to the item of the reference list _dataListRefHeaderAndRow. It is because we have given the total number of the reference list _dataListRefHeaderAndRow when asked by EnhancedScroller for a total number of rows for our list in GetNumberOfCells method above. So we will provide the prefab as per the corresponding data of the references list _dataListRefHeaderAndRow.
As you can see from the picture above we are checking for the type of the data of reference list corresponding with the provided dataIndex in parameter. We can provide any prefab with the EnhancedScrollerCellView script attached to them but be careful we need to provide the appropriate prefab for each data type of the list row because we will need to get the proper item as we will update them after casting to the required class as given in line number 24 and 31 in the picture above.
This method will give you an error in lines 24 and 31 as there is the class name HeaderRowView and BodyRowView which we haven't created yet. They are the scripts for header and body (row with multiple items) items. They are responsible for updating the information and UI of their corresponding gameObject items. We will work on them later but first, let's finish loading the data in the controller script which is the most important function/method while using EnhancedScroller.
In the above picture, you can see that at first we initialize the list and assign the script as the delegate of the EnhancedScroller. After the initializations, we have loaded the dummy data to the list holding actual data and another reference data holding list.
We have used a list of listItems representing the list of items of each category. The reason for doing so is that it makes the loading of reference data list easier and we can get the required number of items for the list that is to be shown by EnhancedScroller.
After loading all the data and creating the required list of actual data and reference list of the row items we need to reload the data of the Enhanced Scroller so it manages the item of the list as per our given list of data. So we have called scroller.ReloadData() in at the last when all the data are populated to the list as shown in the picture above. Now your main controller script is ready so let's create the remaining scripts.
[ scroller.delegate=this (delegate assignment) must be done before you call Reload() in EnhancedScroller. If you don't do this then your EnhancedScroller will not know which script to use for loading items to the list.]
It is a class provided by the EnhancedScroller and it is used by it for handling thegameobject items generated in the list. This is an essential class for EnhancedScroller. Without it, the enhancedScroller won't work. So be sure to make the script of the list item has EnhancedScrollerCellView as its extension class.
So let's continue our project and create the scripts for Items on the lists.
1.RowSectionView -> The class that will be used as an extension class for each row representing the script of the list. We have declared selectedDelegate delegate which provides ItemView as parameter its parameter in this class. We can declare it in any class you want but we have declared it here. This delegate will be used to provide ItemView's details to the CellViewListController when clicked and we can carry out any function we want.
2.ItemView -> Script attached to the gameObject representing the items of the grid list. The data and UI is updated in this script using the SetData method this script given in the picture below.
3.HeaderRowView -> Script attached to the header gameObject and is an extension class of RowSectionView class. It represents the header section among the rowSection script/class. Its variables and methods are generally described in its summary in the picture.
3.BodyRowView-> Script attached to the section of the row holding the multiple items. There will be many instances of this item for presenting all the available items of the category it comes under. Each of these items has a limit of certain items. So until the items of the same category are not shown, its instance will be shown by EnhancedScroller with the items that can be visible for that item.
How data is updated in the header and body row section.
HeaderRowView and BodyRowView both scripts, when setting their data, will be provided with the list of the available item list, reference list of row section data, data starting index and the delegate to get the clicked item in return as given in the picture below.
The explanation may not be fully understood but basically what each script of the row section of the list does is that it updates the index of the items, it will show, from list item _dataList to its BodyData data when data is set and then replace the data of the BodyData with the given reference list of the BodyData to update the data of the reference list. And then after updating data of the items each row can show it updates the refListDataIndex with the last item index corresponding to the _dataList and this very refListDataIndex will be used by another row to update its item's data.
Create the required UI Items for the list
1. Create a panel for Enhanced Scroller and give it the size you want and attach EnhancedScroller to it as shown in the picture below.
2. Create a content placeholder and update it to the content reference of the ScrollRect as shown in the picture below. This content placeholder is only temporary. If you want you don't even need to create it as it will be removed by the EnhancedScroller when initiated. The purpose of this content is to create the items required to be shown in the content and create their prefab for updating the references of items in EnhancedScroller controlling script.
3. Create the header and body row items in the contentPlaceholder as shown in the picture below.
4. Add HeaderRowView script to the header item and update the references of the script. Drag and drop it to the asset and create its prefab so its references can be given to other scripts from the asset.
CellIdentifier of the script need to be populated with any name of your choice. If left empty it will give an error in playmode
5. Add BodyRowView script to the Row:Body item and populate its references in the inspector. Don't forget to give cell Identifier a name and drag and drop the items that will be shown in the body row item to the `Items` list.
6. Create an empty gameObject and add CellViewListController script to it and populate its references. The prefab references of header and body should be assigned from the asset folder, not from the gameObject of Hierarchy panel.
After doing all these things hit the play button in your unity editor and you will get the final form of a grid layout with a header for each section as shown in the first picture of this article.
There are many types of list layout that can be done using EnhancedScroller and hope you try them out and check how easy it is to use EnhancedScroller of handling the list of different types.
Thank you for reading upto last. Please leave comments if you've any queries.