How to select (or deselect) a custom item renderer on tap or click (Starling version)
Custom item renderers should dispatch Event.CHANGE
when their isSelected
property changes. The list does not select an item renderer on tap or click because some item renderers might be selected with a different interaction, like a long press or a swipe. The item renderer needs to implement this behavior.
Using the TapToSelect
class, it's easy to change the isSelected
property on tap or click:
public class CustomItemRenderer extends LayoutGroupListItemRenderer
{
public function CustomItemRenderer()
{
super();
this._select = new TapToSelect(this);
}
private var _select:TapToSelect;
}
Deselect on Tap or Click
You may notice that the item renderer is selected on tap, but not deselected when you tap again. Generally, that's how you want a list to behave. The item renderer will be deselected when another item renderer is selected. However, sometimes the list supports multiple selection, and you want to deselect the item renderer on tap or click. Simply set the tapToDeselect
property of the TapToSelect
instance to true
:
this._select.tapToDeselect = true;
Set the allowMultipleSelection
property on the List
to true
to allow multiple item renderers to be selected.
Dispatch Event.TRIGGERED
when tapped or clicked
All item renderers should also dispatch Event.TRIGGERED
when tapped.
Similar to TapToSelect
, you can use TapToTrigger
to set this up automatically:
public class CustomItemRenderer extends LayoutGroupListItemRenderer
{
public function CustomItemRenderer()
{
super();
this._trigger = new TapToTrigger(this);
this._select = new TapToSelect(this);
}
private var _trigger:TapToTrigger;
private var _select:TapToSelect;
}
Always be sure to create the TapToTrigger
instance before the TapToSelect
instance so that the Event.TRIGGERED
and Event.CHANGE
events are dispatched in the correct order.