Custom DropDown List

17 Feb 2011

The idea of using DropDown Lists in iOS (iPhone, iPad, iPod Touch) applications is not very popular because of the small screen size of the iPhone and iPod .That’s why the best way to implement the DropDown List in iPhone/iPod touch applications is to use UIPickerView .

But what about IPad? This device runs the same iOS as the iPhone and iPad but on a much bigger screen. As a result, having a DropDown List in a separate view doesn’t look great, and isn’t really necessary.

In desktop applications on most platforms, DropDown List is a very useful form of UI control as it can represent a lot of information in a small screen area.

A DropDown List control is a novelty for iOS. Cocoa framework does not support the standard DropDown List control. The aim of this article is to explain how we implemented the DropDownList control in iPad applications.

Our concept

First of all we need an instance of the UIButton class to create the button that will open and close the DropDownList. This button may have a label with an instruction like ‘Select...’ or ‘Select Item’ when the item is not selected. On the other hand, this button is to represent the already selected item as well.

Every DropDownList has a table that incorporates the possible list contents. That way, it’s clear where the idea to use UITableView comes from. Cells of the table will display the item information whether it is text, images or even a combination of the two. You can use different cell background images for normal and highlighted states to make the DropDownList look neat.

Finally, one can add some background that will be added under the open DropDownList. This will make it look even better.

Behaviour

It’s clear that a button will be used to open and close the DropDownList. In fact, the button only opens it and another feature is used to close it. Let us call this feature ‘Transparent overlay’. It is described below in the ‘Implementation’ section.

When the DropDownList is opened, the table represents the items. The user can scroll the table up and down to find and select the necessary item. When the DropDownList opens after the item has been selected, the table should represent this item in the top cell with a highlighted background.

The most interesting part of the DropDownList’s behaviour is closing the DropDownList by taping the screen anywhere outside the table with items. That means that we can tap the button or any other control located on the screen to close the DropDownList. This feature guarantees the standard DropDownList behaviour like in Windows based applications.

Implementation

The DropDownList’s constructor (init method) uses two images for active and inactive button states and the origin to locate the DropDownList in the desired view controller. You can add your DropDownList control to any view controller as well as add standard controllers from Cocoa library.

The ‘Transparent overlay’ is the transparent view that handles user’s touches Began action. This action removes the transparent view from its super view and closes the DropDownList. The transparent overlay should be added on the main window and have a frame that is equal to the application frame. Also, the table with its items and the table framing are added to this transparent overlay. Moreover, the order of adding is quite important. We add the table framing first, than we add the table with items.

The DropDownList remembers the previously selected item if it exists, has a property that sets how many items should be visible when the DropDownList is opened and holds the objects used for each item. Also, a set of CGFloat parameters is used to align the table and the table framing with regard to the button. It is important to note that we can add our DropDownList control to any desired view controller. Otherwise, the table with under-table background is added to the transparent overlay that occupies the whole device screen. This set of parameters solves this problem.

Delegation

The most important delegation method is dropDownListItemDidSelected. This is launched when the user taps on the item in the table. It has a DropDownList in which selection is set as a parameter. Also it has the number of selected cells.

The dropDownListDidShown delegation method can be useful and you can add your own delegation methods to catch different DropDownList’s actions.

How it works

In MainViewController (Private) we create the DropDownList in _initDropDownList method. Also, we generate data to fill the DropDownList’s items in _initDropDownListContent. In viewDidLoad of MainViewController we just call those two methods, set delegate, paste data to fill items and allow the user to interact with the DropDownList. That’s all.

Enjoy the code!

About Lemberg

Lemberg is a UK mobile and web development company with strong client base in the UK, Europe, and the USA.

Starting from 2007, Lemberg has been helping leading design and marketing agencies, start-ups, innovative businesses deliver brilliant digital solutions for a number of the world’s biggest brands.

We provide our clients with impeccable services, including mobile apps creation (iPhone, iPad, Android, Windows Phone), web development (Drupal, front-end, back-end and API development), and support services.

Our goal is to go beyond clients’ expectations: as a technology partner, we take the responsibility for implementing the most ambitious, creative and innovative ideas.