It is often the case that the controls provided by iOS for the iPhone or iPad don’t quite meet our needs. In this blog we’ll learn how to mimic a simple Drop – Down list using a label, some custom buttons, and a hidden view. So let’s get started!

Open Xcode, choose “Create a new Xcode project,” select the Single View Application template, and click Next. Name the project “DropDownDemo,” and choose options as shown here:

Click Next, choose a location to save the project, and click Create.

When the app template has been created, open the ViewController.zib file, and drag controls to the view as shown below:

The properties for these controls should be set in the following way:

 View: no properties set
◦ Label – Select A Color: Change the text to “Select A Color,” change the background to a light yellow color.
◦ Button: Change the text to “▼” by navigating to Edit | Special Characters in the menu, then selecting the down arrow character. Change the font to System Bold 10.0. Change the background to a light yellow color. The button type is set to Custom.
◦ View: align the left and right sides of the view to the left side of the label and the right side of the button above it. We will also hide this button by checking the “Hidden” checkbox, but not just yet.
▪ Button – Red: set the button type to Custom, the text to “Red,” align the top of the button with the top of its containing view, and the left and right sides of the button with the left and right sides of the view. Set the tag value to 1, and the height of the button to 36.
▪ Button – Blue: as above, but the text is “Blue”, and the tag value is 2
▪ Button – Green: as above, but the text is “Green”, and the tag value is 3

After making these changes, select the view that contains the three buttons (Red, Blue, and Green), and put a check mark in the Hidden property.

Open the ViewController.h file, and add the following properties and methods:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (nonatomic, strong) IBOutlet UILabel *ddText;
@property (nonatomic, strong) IBOutlet UIView *ddMenu;
@property (nonatomic, strong) IBOutlet UIButton *ddMenuShowButton;

- (IBAction)ddMenuShow:(UIButton *)sender;
- (IBAction)ddMenuSelectionMade:(UIButton *)sender;

@end

In the ViewController.zib file, wire up ddText to the UILabel, ddMenu to the hidden view, and ddMenuShowButton to the small custom button containing the “▼” character. The ddMenuShow method is also wired to this small custom button (Touch Up Inside), and each of the other custom buttons (Red, Blue, and Green) are wired to the ddMenuSelectionMade method, also on TouchUpInside.

Next, open the ViewController.h file, and make changes as shown below:

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

@synthesize ddMenu, ddText;
@synthesize ddMenuShowButton;

- (IBAction)ddMenuShow:(UIButton *)sender
{
    if (sender.tag == 0) {
        sender.tag = 1;
        self.ddMenu.hidden = NO;
        [sender setTitle:@"▲" forState:UIControlStateNormal];
    } else {
        sender.tag = 0;
        self.ddMenu.hidden = YES;
        [sender setTitle:@"▼" forState:UIControlStateNormal];
    }
}

- (IBAction)ddMenuSelectionMade:(UIButton *)sender
{
    self.ddText.text = sender.titleLabel.text;
    [self.ddMenuShowButton setTitle:@"▼" forState:UIControlStateNormal];
    self.ddMenuShowButton.tag = 0;
    self.ddMenu.hidden = YES;
    switch (sender.tag) {
        case 1:
            self.view.backgroundColor = [UIColor redColor];
            break;
        case 2:
            self.view.backgroundColor = [UIColor blueColor];
            break;
        case 3:
            self.view.backgroundColor = [UIColor greenColor];
            break;
           
        default:
            break;
    }
}

As always, we begin by synthesizing the properties. After this, we implement our two action methods. The ddMenuShow method shows or hides the menu depending on the current state of its tag. It also changes the direction of the arrow character using the setTitle: forState: method. NSStrings are Unicode strings, so it’s legal to use special characters directly in the string as we’ve done here.

The ddMenuSelectionMade method changes the color of the main view’s background depending on the tag value of the button pushed. It also makes changes to the ddMenuShowButton, and hides the ddMenu view.

Save and run the application.

In a production application, we would certainly want to create a custom UIControl and make the appearance of our drop down box conform to the Human Interface Guidelines. But this technique is a simple way to obtain functionality quickly for testing purposes during the development process.

Have Fun!