This week, when working on a country selection list, I’ve decided to have some fun trying to implement a recyclable list view in Unity 3d (something inspired in Android’s ListView recycling mechanism).
The main advantage of using a recycling mechanism is that, instead of instantiating a new row for each list item, a minimum number of rows is instantiated and when necessary, each existing row is updated to represent a new list item. In this way, the number of rows becomes independent of the list length.
Recyclable List View Breakdown
- The List.cs is the main list controller that handles the list behaviour and the recycling mechanism;
- The ListItemBase.cs is the base item to extend when implementing your own list item component;
- The List.cs requires a prefab with a ListItemBase.cs (or subclass) assigned;
How to use it
- Drag the List prefab to a Canvas gameObject; IMAGE1
- Implement your own ListItem component – extend the ListItemBase.cs – and assign it to the List component (use the ListItem prefab and replace the component); IMAGE2
- Create a controller with a reference to the List component and the ListItem prefab – check the example below; IMAGE3
// Tomaz Saraiva <firstname.lastname@example.org>
// Copyright (c) 2017 Tomaz Saraiva
public class ListControllerTest : MonoBehaviour
private int _selectedIndex;
private ListItemCountry _selectedItem;
private List<KeyValuePair<string, Country>> _countries;
_countries = Countries.Dictionary.ToList ();
_list.onItemLoaded = HandleOnItemLoadedHandler; // called when an item is recycled
void HandleOnItemSelectedHandler (ListItemBase item) // reference to the selected list item
if(_selectedItem != null)
_selectedItem = (ListItemCountry)item;
_selectedIndex = _selectedItem.Index;
#if UNITY_EDITOR || DEVELOPMENT_BUILD
Debug.Log("Selected Country | " + _countries[item.Index].Value.Name);
void HandleOnItemLoadedHandler (ListItemBase item) // reference to the loaded list item
if(item == (ListItemCountry)_selectedItem)
_selectedItem.Select (_selectedIndex == _selectedItem.Index);
ListItemCountry countryItem = (ListItemCountry)item; // cast to your own ListItem
This week goal was to implement a Photo Gallery controller with Fullscreen and Page Control Dots on top of my List controller. But unfortunately, the List changes took more time than I was expecting. So wait for it on a next update.
This week, I was able to add the following features to my recyclable list view project:
Check the Gallery.scene examples to see a Horizontal List with Fit Item to Viewport and Center on Item features enabled.
Happy Coding 🙂