DownPicker: A lightweight DropDownList / ComboBox for iOS written in Objective-C

Objective C: rimuovere da codice i vincoli impostati tramite Storyboard

Quick links: Project Page – GitHub – Pod

Eventually, while developing in iOS, you’re going to find yourself looking for a control allowing the user to pick an option from a drop-down, selectable list of items: any UI has something like that: drop down lists, combo boxes, expand & collapse views or anything that could resemble the behaviour of an HTML   element.

Problem is, iOS doesn’t feature anything like that. Except for the UIPickerView control, which often isn’t what we really need because of its excessive height and its heavy-impact look, which isn’t always as pretty as Apple designers thought it would be, at least in real-case scenarios. Conversely, we often need it to be simpler, taking less space and/or decently blending with other TextField elements.

 

UIPickerView in action: not always pretty.
UIPickerView in action: not always pretty.

With that thought in mind I pulled out DownPicker, an iOS control who can mimic the behaviour of a DropDownList/ComboBox using default iOS UI elements only: an UITextField to prompt the user to tap (and then show the selected item) and an UIPickerView to handle the selecting.

Custom Control or Control Wrapper

You can use it as a full-featured custom control (UIDownPicker) or as a control wrapper to “upgrade” any existing UITextField. The advantage in doing so is that you will be able to design, positioning and skin the UITextField like you always do, programmatically or inside a Storyboard UI, depending on how you are used to work.

How it looks like

Regardless of how you’ll use it – custom control or control wrapper – in the end it will look just like that:

UITextField.DownPicker

 

The control is lightweight and very simple to use: it only needs an array of data.

Installation

Starting Aug, 2015 you can install DownPicker using CocoaPods by following the instructions provided in this post.

If you’d like to perform a manual installation, download the latest version from this link, then unzip & drag-drop the /DownPicker/ folder inside your iOS project. You can do that directly within XCode, just be sure you have the copy items if needed and the create groups options checked.

Installing as Custom Control

Just instantiate the included UIDownPicker class programmatically and attach it to your view like any other legacy UI control:

You can then customize it using the inner DownPicker public property.

 

Installing as Control Wrapper (recommended)

Add (or choose) a UITextField you would like to transform to a DownPicker to your existing XCode project. You can use the Storyboard designer tool or do it programmatically; you can also set up constraints, custom placement/coords, font, colors and anything else you like. When you’re done, open your controller’s .h file and create a property for the DownPicker wrapper:

 

Then switch to the .m file and add these lines to your controller’s viewDidAppear method:

Download, Documentation & Support

If you like DownPicker you can also make a small donation using PayPal to support our work.

Happy coding!

 

 

 

RELATED POSTS

About Ryan

IT Project Manager, Web Interface Architect and Lead Developer for many high-traffic web sites & services hosted in Italy and Europe. Since 2010 it's also a lead designer for many App and games for Android, iOS and Windows Phone mobile devices for a number of italian companies.

View all posts by Ryan