iOS Rotary Slider Controls – AKA Knobs

We’re now 4 versions into iOS, and Apple still hasn’t brought UISlider up to speed with NSSlider. OS X gets horizontal, vertical, and rotary sliders while iOS is stuck with only horizontal.  There’s probably some UI guideline which states that rotary sliders are no good for touch interfaces but honestly, it is really hard to make an attractive layout with a lot of controls using only horizontal sliders.  Music apps tend to need a lot of controls, and making EQ adjustments using a slider reminds me of the bad old days of generic AudioUnit interfaces.

After a cursory Google search, I couldn’t find any code out there for rotary sliders so I wrote my own UIControl subclass. I tried to stick as closely as possible to the UISlider interface so that it won’t be too hard to switch when Apple gets around to making a standard control. There is a precision property that changes how quickly the knob rotates, this lets you make very accurate adjustments.

XCode Project

Advertisements

7 thoughts on “iOS Rotary Slider Controls – AKA Knobs

  1. Love the knobs! Thanks for sharing. Any luck with vertical sliders? I’m wondering if it will work to create a UIView with sliders in it and then applying a 90 degree rotation transform to the whole view before adding it to the main view. Just started googling for “vertical sliders” and ended up here, so I haven’t had a chance to try it yet. Seems like it should work in theory, but who knows what kind of wonkiness might ensue 🙂

    • I think I tried rotating briefly to bad effect. I ended up making my own vertical slider class, similar to this one, but with one ‘knob’ UIView that slides inside the main view.

  2. Hi the link to the xcode project has expired, can you upload again and relink? Would love to see the framework you are using to subclass UIControl and create custom properties like precision

    Many thanks

  3. any chance of getting a working link to the x-code project. The link posted seems to be broken

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s