Selection for items in a list

[skjalg]

Hi,

I am struggling with implementing selection in a list which uses the Selectable class/interface which is a built in component that deals with selection direction in a canvas.

So let's say you have a Canvas with a few buttons and a list, all of which is displayed in a vertical layout. Then when you connect a controller the first element is highlighted, and you press down on the dead or left stick and you move down to the next button. Then when you press down again you get to the list and the first item in the list is selected. And then if you press down again the next item in the list is selected and so on until you reach the end of the list and the button underneath the list should be selected.

How do I make this work?

Without pooling its as simple as looping through all the list elements, using GetComponent<Selectable> and retrieving the navigation and setting the selectOnDown to the next element and selectOnUp to the previous element as well as having a selection listener that will snap to the element when it is selected.

[echo17]

The EnhancedScroller is an MVC (Model-View-Controller) solution that is data-driven. What this means is that you do not need to modify the scroller or its items directly, instead interacting with the underlying data and then telling the scroller to reload.

For your example, you could have a data class for your list that includes a boolean selected field. Something like:

public class MyData
{
   public string someText;
   public bool selected;
}

In your controller, you will keep track of the list and the selected index, so you might have something like:

private List<MyData> _myList;
private int _selectedIndex;

public EnhancedScroller scroller;


So whenever you want to select an item, you could have a function like:

private void SelectIndex(int index)
{
   _selectedIndex = index;
   for (var i = 0; i < _myList.Count(); i++)
   {
       _myList[i].selected = i == _selectedIndex;
   }

   // reloading with the current position of the scroller keeps it from jumping back to the top of the list
   scroller.ReloadData(scroller.NormalizedScrollPosition);
}

Then, in your cell view, when you set its data, you can use the selected member to determine how to display that data. Something like:

public void SetData(MyData data)
{
   myPanel.color = data.selected ? onColor : offColor;
}

Now when you move down on the left stick, you can just increment or decrement the _selectedIndex of the controller, then call SelectIndex. That will update the underlying data and then refresh the scroller.