Click here to Skip to main content
Click here to Skip to main content

iPhone ComboBox

By , 12 Mar 2012
 
iphonecombobox/iPhoneComboBox.png

Introduction

I was working on a project that required porting an Android application with many combo boxes into a native iPhone application. The requirements were to maintain the ported application look and feel; unfortunately iOS does not include a combobox control. The solution I came up with is a UITextField that uses a UIPickerView for input instead of the keyboard, similar to the Safari implementation of an HTML select field.

Implementation

I’ve created a UIViewController subclass that contains a UITextField and an arrow image to make it look like a combo box.

When a user touches the UITextField, the following action is invoked:

- (IBAction)showPicker:(id)sender 
{    
    pickerView = [[UIPickerView alloc] init];
    pickerView.showsSelectionIndicator = YES;
    pickerView.dataSource = self;
    pickerView.delegate = self;

    UIToolbar* toolbar = [[UIToolbar alloc] init];
    toolbar.barStyle = UIBarStyleBlackTranslucent;
    [toolbar sizeToFit];
    
    //to make the done button aligned to the right
    UIBarButtonItem *flexibleSpaceLeft = [[UIBarButtonItem alloc]  
    initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
       
    UIBarButtonItem* doneButton = [[UIBarButtonItem alloc] initWithTitle:@"Done"
                                   style:UIBarButtonItemStyleDone target:self
                                   action:@selector(doneClicked:)];
                                                                  
    [toolbar setItems:[NSArray arrayWithObjects:flexibleSpaceLeft, doneButton, nil]];

    //custom input view
    textField.inputView = pickerView;
    textField.inputAccessoryView = toolbar;  
}

-(void)doneClicked:(id)sender
{
    [textField resignFirstResponder]; //hides the pickerView
}

Attached Source Code

  • iPhoneComboBox_src.zip contains the subclassed ControllerView for easy integration with an existing project.
  • iPhoneComboBox_demo.zip contains the source code of a demo application that uses ComboBox ControllerView.

Using the Code

  • Open Xcode and create a "Single View Application", name it ComboBoxTest.
    Make sure that "Use Automatic Reference Counting" is checked.
  • Download and unzip iPhoneComboBox_src.zip to a folder named ComboBox (double click on the zip file).
  • Drag and drop the ComboBox folder to the project in Xcode.
    Make sure that "Copy items into destination groups's folder" is checked.
    Make sure that "Create groups for any added folders" is checked.
  • Edit ViewController.h: Add #import "ComboBox.h", declare ComboBox* combo1;
    The header file should look like this:
    #import <uikit>
    #import "ComboBox.h"
    
    @interface ViewController : UIViewController
    {
        ComboBox* combo1;     
    }
    @end
  • Edit ViewController.m, add the following to viewDidLoad:
    NSMutableArray* fruitsArray = [[NSMutableArray alloc] init];
    [fruitsArray addObject:@"Apple"];
    [fruitsArray addObject:@"Banana"];
    [fruitsArray addObject:@"Orange"];
        
    combo1 = [[ComboBox alloc] init];
    [combo1 setComboData:fruitsArray];          //Assign the array to ComboBox
    [self.view addSubview:combo1.view];
    combo1.view.frame = CGRectMake(110, 69, 120, 31);      //ComboBox location and 
                            //size (x,y,width,height)
  • Build and run, that's it.

History

  • 17th December, 2011: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Dor Alon
Software Developer Dor Alon Software Solutions
Israel Israel
Member
Freelance Software Developer
 
http://doralon.net

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
BugFirst element of pickerview cannot get data when click done.memberJack Corleone24 Jan '13 - 22:17 
when click in textfield and pickerview show up,first element ("Apple") is selected,but when click done,nothing happens.I click in Banana and click Apple again and it works.
GeneralRe: First element of pickerview cannot get data when click done.memberlgautier11 Feb '13 - 4:22 
You can add an empty string as first element in the list of choices.
It reflects the fact that you start with an empty string in the UITextField, so empty string is a valid choice.
 
The other solution would be to select the first element of the list as default choice instead of empty string.
This requires tho change the coding.
GeneralMy vote of 5memberHatem Mostafa23 Jan '13 - 1:06 
Excellent work
GeneralMy vote of 5memberMember 977545421 Jan '13 - 20:07 
The code is simple that is why it is easy to understand. .Thanks a lot!
QuestionTrigger event when selection is done?memberassilem198610 Jan '13 - 3:37 
Hi Smile | :)
Really easy to use the combobox, i like it.
 
Im new in Objective C, how can i trigger an event (for change the view, for example) when the user press done in the uipicker?
QuestionLandscape picker didn't displaymemberFolus Wen16 Oct '12 - 23:15 
Hello,When I use demo project , combobox in landscape mode , picker won't display
 
how to solve this problem?......please help me....thank you
Generalcan't click on tabview controller in xcode 4.3 simulateor ipone 5.1memberwjcroom1 Aug '12 - 0:34 
in the xcode 4.1 and iphone4.3 simulator tabview a tabpage .it work fine .
 
the same code.
in xcode 4.3 you sample code is working fine.
but when I use tabview controle .
can't click .
and it's location downer a little then in xcode 4.1.
 

please help me. thanks
QuestionCannot use this ComboBoxmemberMember 924936713 Jul '12 - 0:50 
Hi,
 
I am trying to use this combo box functionality. But apparently even after following all the steps in this tutorial, I cannot create the combo box properly in my code.
 
When I run the app on my iPhone, I see a text box and an arrow image, but they are distorted (image is slightly above the text field) and when you click on it nothing happens
 
Please help me with this issue
QuestionThis doesn't work for iPadmemberPhamer5522 May '12 - 12:53 
I'm having a real hard time getting this to work on an iPad. For some reason, the width gets all screwed up and it is very wide. I've tried adjusting the width in
 
myComboBox.view.frame = CGRectMake(65, yAxis, 100, 45);
 
by changing "100" to various values but to now avail. I also tried using a different XIB file (converting the existing one to iPad sized one), but that didn't work either.
 
Can you you help? How can I change the width of the text field when using it on an iPad?
Questionreloading the combo box contentmemberjanwos6 Mar '12 - 10:40 
Hi Dor Alon,
 
Great working combo box. I got one question. I tried to change/reload the content of the second combo box after i made a selection in the first but it's not working and i can't figure out how to do it.
Do you have a suggestion?
 
Greetings,
Jan-Willem
QuestionClick not working on sub views [modified]memberMember 77644341 Mar '12 - 20:52 
Hi,
I tried this code it is Working fine when we add combo as sub view in main view ([self.view addSubview:mycombo.view]) i'm having scroll page so i had added the combo in as ( [self.scrollview addSubview:mycombo.view]) it is click is not working it working as normal textfield can you help me

modified 5 Mar '12 - 0:49.

AnswerRe: Click not working on sub viewsmemberBamBamBeano2 Mar '12 - 6:11 
I am having the same issue. I have a form that is long and requires a scroll view, the combo boxes are in the scroll view and the text box displays just fine (and scrolls) but when tapped on, it displays the normal keyboard and not the UIPicker. Any help would be much appreciated.
AnswerRe: Click not working on sub viewsmemberBamBamBeano2 Mar '12 - 8:03 
got an answer here
http://stackoverflow.com/questions/9537153/combobox-doesnt-work-when-in-a-uiscrollview[^]
GeneralRe: Click not working on sub viewsmemberMember 77644344 Mar '12 - 18:48 
Thanks BamBamBeano
GeneralRe: Click not working on sub viewsmemberDor Alon12 Mar '12 - 1:32 
Nice catch !
 
I've updated the article source code
 
Thanks
BugClick not workingmemberqaelbdj22 Dec '11 - 8:50 
When I use it in another view (added the view controller view to as a subview) the click event sometimes it work and sometimes don´t. If I replicate the same code in another subview (including the textfield and image, not the view directly) everything works.
What is wrong?
AnswerRe: Click not workingmemberDor Alon22 Dec '11 - 20:04 
That's weird, do you experience the same problems using the demo application ?
 
Please copy and paste your code here.
GeneralA good SharememberArif_Madi20 Dec '11 - 6:26 
Thanx Dor, it was just what i was looking for , i expect more write up like this
GeneralMy vote of 5memberForestHymn19 Dec '11 - 13:33 
Awesome! This UI element is missing from Interface Builder and I've been wondering how to solve it. Nice to see a post on iPhone as well.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Permalink | Advertise | Privacy | Mobile
Web04 | 2.6.130523.1 | Last Updated 12 Mar 2012
Article Copyright 2011 by Dor Alon
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid