Posted By Our Mentors
Amreen Khan
Android Developer
animesh bansal
iphone App Developer
Devendra chouksey
Android Developer
Dilip Saket
IOS apps developer
Hemraj Jhariya
iOS Developer
Jaihind singh Rajput
Smart Phone App Dev
Mujahid khan
Android developer
Narendra Yadav
android developer
Narinder Gupta
Mobile App Architect
Pradeep singh Thakur
Mobile App Architect
Sanjay Sharma
Andriod Developer
Shakti Rajpal
IT Architect
Soniya Vishwakarma
iPhone App Developer
Sunil Raghuwanshi
iPhone App Developer
Supriya Kapse
Senior developer
Creating DropDown in iphone using picker Iphone/iPad
This tutorial shows how we can create our dropdown for iphone app.
Posted By: Soniya Vishwakarma Date: 29 Aug 2011 View: 1653
      Rate This !!




While designing an iphone app we always need to atlas one dropdown. But iphone interface builder not provide such control, instead of this they provide a UIPicker which we utilize as dropdown. But how to make it looks same as we find in other language.

So for this purpose we can create our own dropdown or you can say a customize dropdown.


So now lets start.


Step 1:  Launch Xcode(I have Xcode 3.2.6 version), which is located in /Developer/Applications. and select create a new XCode Project. or Create a new project by selecting New Project... from the File menu, or by pressing Shift+Window+N, which will bring up the New Project assistant 


Step 2: This window has number of project template that can be used as a starting point for your iPhone applications. The View-based Application is simplest one which we use here.



Step 3: Once you’ve selected your project template, you’ll be asked to save your new project using the standard save sheet . Type CustomizeDropDown for the project name, and save it wherever you want it stored.


Step 4: Create a group in Resource Folder with name "Images" and add a image in it which show image of dropdown.(You can find it in project I uploaded.)


HOW TO ADD IMAGES IN PROJECT: 


METHOD 1:

                       Right Click on Images Folder and Add-->Existing Files… select your images and Add them.


METHOD 2:

  Go to Project Menu then Add To Project and select your images and Add them.



Note: Please ensure Checkbox with title "Copy to Destination Folder" must be check. otherwise your images wont  find if project moved to new place or some other computer or when get released. 



Step 5: Double Click on CustomizeDropDownViewController.xib file in Resource Folder. 

(If Designer View is not seen then double click on "View" in Nib file)


Step 6: Drag and Drop a Label from Library Palette from Tools-->Library or by pressing Shift+Window+L. Scroll through the list of objects in the library until you find one called Label or you can search from the search bar below the Library window.




Double Click The Label and edit the text to "Select Your Hobby".


To format a Label select Label and then from Tools-->Inspector or by pressing Window+1 and Go ahead and change the label’s appearance to your heart’s delight.


Step 7: Add  custom Button  and set its background image which we added.


Step 8: Write these lines of codes:


#import <UIKit/UIKit.h>


@interface CustomizeDropDownViewController : UIViewController<UIPickerViewDelegate,UIPickerViewDataSource> {

    UIButton *hobby; // used as dropdown

UIPickerView *picker; // used for picker

NSArray *pickerData; // Array to keep items of dropdown

UIActionSheet *actionSheet; // in which we open picker dynamically

UIToolbar *toolbar; // to close actionsheet

}

@property (nonatomic,retain) IBOutlet UIButton *hobby;

@property(nonatomic,retain) IBOutlet UIPickerView *picker;

@property(nonatomic,retain)  NSArray *pickerData;

@property (nonatomic,retain) IBOutlet UIActionSheet *actionSheet;

@property (nonatomic,retain) IBOutlet UIToolbar *toolbar;


-(IBAction)pickerselected:(id)sender;

- (void)DoneClick:(id)sender;


@end



#import "CustomizeDropDownViewController.h"


@implementation CustomizeDropDownViewController


@synthesize hobby;

@synthesize picker;

@synthesize pickerData;

@synthesize actionSheet;

@synthesize toolbar;



-(IBAction) pickerselected:(id)sender // calls when dropdown get pressed

{

NSArray *array=nil;

int val=0;

array= [[NSArray alloc] initWithObjects:@"Drawing", @"Gardening", @"Stamp Collection",nil];

val= [array indexOfObject:hobby.currentTitle];

self.pickerData = array;

[array release];

[picker reloadAllComponents];

actionSheet = [[UIActionSheet alloc] initWithTitle:nil delegate:nil cancelButtonTitle:nil destructiveButtonTitle:nil otherButtonTitles:nil];

[actionSheet setActionSheetStyle:UIActionSheetStyleBlackTranslucent];

CGRect pickerFrame = CGRectMake(0, 40, 0, 0);

UIPickerView *pickerView = [[UIPickerView alloc] initWithFrame:pickerFrame];

pickerView.showsSelectionIndicator = YES;

pickerView.dataSource = self;

pickerView.delegate = self;

[pickerView selectRow:val inComponent:0 animated:NO]; 

[actionSheet addSubview:pickerView];

[pickerView release];

[actionSheet addSubview:toolbar];

[actionSheet showInView:self.view];

[actionSheet setBounds:CGRectMake(0, 0, 320, 485)];

}


- (void)DoneClick:(id)sender // calls when done button in toolbar get pressed

{

[actionSheet dismissWithClickedButtonIndex:0 animated:YES];

}


- (void)viewDidLoad {

if(toolbar==nil) // to create instance of toolbar and add a button for closing actionsheet

{

toolbar=[[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 44)];

toolbar.barStyle = UIBarStyleBlackOpaque;

UIBarButtonItem *doneBtn=[[UIBarButtonItem alloc] initWithTitle:@"Done" style:UIBarButtonItemStyleBordered target:self action:@selector(DoneClick:)];

doneBtn.width=60.0f;

[toolbar setItems:[[[NSArray alloc] initWithObjects:doneBtn,nil] autorelease]];

toolbar.barStyle = UIBarStyleBlackOpaque;

[toolbar sizeToFit];

[doneBtn release];

}

    [super viewDidLoad];

}



- (void)pickerView:(UIPickerView *)thePickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component //calls when any item gets select in picker

{

[hobby setTitle:[pickerData objectAtIndex:row] forState:UIControlStateNormal];

}





- (void)dealloc {

[hobby release];

[picker release];

[pickerData release];

[actionSheet release];

[toolbar release];

    [super dealloc];

}


#pragma mark -

#pragma mark Picker Data Source Methods


- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {

return 1;

}


- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component { 

return [pickerData count];

#pragma mark Picker Delegate Methods


-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component 

{

return [pickerData objectAtIndex:row];

}





@end



Step 9: Add outlet  by Control and drag hobby outlet to custom UIbutton and Add action pickerselected: to Touch Up Inside Event.

             To give classy look select font color of hobby button black and remove bold if needed, set "Content Edge Inset" Left=10 and Content to Horizantal Alignment left.



Step 10: Save All the files and you have created your own checkbox in iphone app and it is ready to run.So here we go, In Xcode,  Select Project-->Set Active Executable-->CustomizeDropDown Iphone Simulator 4.3.

Select Build ? Build and Run (or press Window+R). Xcode will compile our application and launch it in the iPhone simulator




So now you have created your checkbox for iphone App. Easy and Simple

So All the best

Hope you like it









Posted Queries
Posted By: Sam Elkholy Reply:Creating DropDown in iphone using picker
14 May 2014
Where is the project source?