Autoscroll Dropdowns in Unity

Events and UI in Unity

In version 4.6 Unity introduced its new event system, which also powered the UI framework ever since. While this certainly was a step in the right direction, the system is still[1] far from being perfect, and one should not expect the finesse usually found in “real” event systems, for instance those of the bigger frameworks for web development. Further, official documentation is sparse to say the least, but fortunately many developers have shared their insights in the Unity forums and the web by now, so with a little bit of research the new event system’s challenges can be overcome.

The Problem with Dropdowns

Unity Dropdown Scroll FailA problem that is more related to the UI framework itself, but also touches the event system is the following: The expanding part of a dropdown will not scroll to the currently highlighted item automatically. It seems the developers only had mouse- and touch-inputs in mind when designing the widget, but utilising the event system, we can fix this in a single handler method.

A Solution – the Self-Scrolling Dropdown

Put this script on the Template GameObject that is child to the Dropdown. This GameObject should already hold a Scroll Rect component. Please note that your InputModule must call ExecuteEvents.ExecuteHierarchy() for UpdateSelected events (not just ExecuteEvents.Execute()), so that they bubble up from the dropdown’s items to the ScrollRect!

Remarks

  • The code above of course is kept extra-verbose to make things clear. Naturally, there is potential for optimisation!
  • Speaking of optimisation: The method will be executed every tick of the UI system, which might be unnecessary in most cases. However, it doesn’t really hurt to call it that often and it should not be an issue regarding performance. If it is, you might listen for move/submit events rather than UpdateSelected.
  • If you want to go for a slightly neater class layout, you may consider to extend the Dropdown behaviour itself and have the events bubble up one more level. For this, change the code in Awake() accordingly and also check the selectedObject is not the Dropdown itself in OnUpdateSelected(). And of course the eternal classic: don’t forget to call the base class’ method.
  • This is not an animating solution, but that can easily be achieved with a little bit of Lerp magic. Just don’t forget to stop and/or update your target position if there is new input by the user.


[1] Unity’s current version at the time of writing is 5.3.2

Leave a Reply

Your email address will not be published. Required fields are marked *

Hello!

Portrait of Paul Alexandrow I am a freelance IT consultant, software developer and commercial pilot from Vienna, Austria.

In this Blog I sporadically make notes about findings and solutions to technical issues that I encounter during my daily - or sometimes nightly - work.

more about me

Topics

AR AVR C# Cg/HLSL Embedded Development Events Microcontrollers Unity3d VR