More on the GuitarToolkit Metronome Scroller

Now that the NDA is no more (hooray!), a little more about how the metronome beats per minute (BPM) scroller was created. Previous post about the topic.

The first attempt at a scroller was to explore using a UIPickerView turned sideways. This fell apart pretty quickly, as the UIPickerView doesn’t make realtime callbacks as the wheel scrolls. The implication is that there isn’t a way to update the BPM value as the wheel turns, thus we’d have to wait until the wheel comes to a rest before determining the position.

Next up was to hack together a UIScrollView, which does give realtime updates and is very configurable. This one worked well.

BPM scroller sketch

  • Create a UIScrollView with the dimensions of the visible wheel
  • Create a UIView as the scrollView’s content view. This one is the height of the visible wheel, but really wide
  • Add UIImageViews to the content view to represent the texture of the scroller. Note that images have a maximum dimension of 1024 on the device, which isn’t apparent in the simulator. Our workaround is to place several images end to end to get a wide enough background

Once these pieces are in place, all that remains is hooking up logic in the scrollViewDidScroll delegate method to compute position-to-value and tweaking the UIScrollView properties to specify content size and lock in directional scrolling.

The result of this effort is a view that is very flat looking. We can’t truly make it look 3D without resorting to OpenGL ES, but we can fake it pretty well. On top of the scrollView, we layered an image that heavily shades the edges of the wheel and tapers it a bit to give a sense of perspective. These edges are dark enough that you can’t see that the rubberized ridges don’t change perspective as they rotate. Adding a bottom shadow also adds to the feeling of depth.

BPM scroller sketch

The end result (before and after)

BPM scroller BPM scroller

Blog