Apple iOS Drop Down Menu control
Download from GitHub.
The UIDropDownMenu control is an iOS class designed to replicate the drop down menus found on other platforms and websites. The control was designed to be easy to use and customizable and will adapt its layout depending on the device and position. It can be attached to any UITextField or UIButton control.
An example of how to use the drop down menu with the various options can be found in:
net_addimage_dropdownmenuViewController.h and
net_addimage_dropdownmenuViewController.m
Adding the UIDropDownMenu to your project.
Start by downloading the demo application from GitHub and extract it to your computer. Copy UIDropDownMenu.h and UIDropDownMenu.m into your project and import the class into the header file where you want to use the menu. The following code shows how to use the drop down menu.
#import <UIKit/UIKit.h>
#import "UIDropDownMenu.h"
@interface net_addimage_dropdownmenuViewController : UIViewController<UIDropDownMenuDelegate>{
IBOutlet UITextField *textfield1;
IBOutlet UILabel *selectedLabel;
UIDropDownMenu *textmenu1;
}
@property (strong, nonatomic) IBOutlet UITextField *textfield1;
@property (strong, nonatomic) UIDropDownMenu *textmenu1;
@property (strong, nonatomic) UILabel *selectedLabel;
@end
Create a UIDropDownMenu object for each menu you want to display in your application. You will need to add the UIDropDownMenuDelegate to the @interface in order for the menu to return the selected items.
#import "net_addimage_dropdownmenuViewController.h"
#import <QuartzCore/QuartzCore.h>
@interface net_addimage_dropdownmenuViewController ()
@end
@implementation net_addimage_dropdownmenuViewController
@synthesize textfield1, selectedLabel, textmenu1;
- (void)viewDidLoad
{
[super viewDidLoad];
textmenu1 = [[UIDropDownMenu alloc] initWithIdentifier:@"textmenu1"];
NSMutableArray *arrayNames = [[NSMutableArray alloc] initWithObjects:
@"Erik Vanderwal",
@"Max Town",
@"Darryl Totman",
@"Avis Villalon",
@"Hugh Salvia",
@"Allie Maland",
nil];
textmenu1.ScaleToFitParent = TRUE;
textmenu1.titleArray = arrayNames;
textmenu1.valueArray = arrayNames;
[textmenu1 makeMenu:textfield1 targetView:self.view];
textmenu1.delegate = self;
}
- (void) DropDownMenuDidChange:(NSString *)identifier :(NSString *)ReturnValue{
if (identifier == @"textmenu1"){
selectedLabel.text = ReturnValue;
}
}
- (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
return YES;
}
@end
First synthesize your drop down menu object and allocate it within viewDidLoad. Give the menu a unique identifier name.
textmenu1 = [[UIDropDownMenu alloc] initWithIdentifier:@"textmenu1"];
UIDropDownMenu takes two arrays, one for the titles and one for the return values. These are both NSMutableArray type and are assigned using:
textmenu1.titleArray = arrayNames;
textmenu1.valueArray = arrayNames;
Create the menu with the following method:
[textmenu1 makeMenu:textfield1 targetView:self.view];
makeMenu takes in two objects, the first object is the UITextField or UIButton that you want to assign the menu to. The targetView object should be assigned to the view in which your text field or button resides.
Set the drop down menu delegate to the current view with:
textmenu1.delegate = self;
The menu is now initialized and ready to respond when the user touches the assigned text field or button. To find out what value the user selected you need the following method.
- (void) DropDownMenuDidChange:(NSString *)identifier :(NSString *)ReturnValue{
if (identifier == @"textmenu1"){
selectedLabel.text = ReturnValue;
}
}
DropDownMenuDidChange returns two parameters, the identifier which was specified when the menu was initialized and the return value that the user selected.
You can have as many instances of the UIDropDown menu in your view as you like and each one will trigger the same DropDownMenuDidChange method when they are selected. By giving each instance a different identifier name you can then use a simple if or switch statement to see which menu was selected.
There are several additional properties that can be used to style the menu.
ScaleToFitParent
The ScaleToFitParent property is used to make the menu scale to the same width as the target textfield or button. This works well on textfields but when assigning the menu to a button it is often best to set ScaleToFitParent to false and use the menuWidth property to set the menu width.
rowHeight
The rowHeight property is used to set the height of each individual row within the menu.
backgroundColor, borderColor, textColor
These properties sets the background, border and text color for the menu. They use a UIColor object, for example [UIColor blueColor]. You will need to import <QuartzCore/QuartzCore.h> into your header in order to use UIColor in your view.
If you want to customize the menu further then you will need to edit the menu properties within the UIDropDownMenu.m class. The menu is based around a tableView called dropdownTable so you can customize it in the same way as you would with any other tableview.