ToolBar at the top of UIPIckerView in xcode? - iphone

Question

I need to add a toolbar with done button on the top of UIPickerView. I don't want to use actionSheet because I want the rest of the view to be active. I've gone for the following code:
- (BOOL)textFieldDidBeginEditing:(UITextField *)textField {
[txtstate resignFirstResponder];
pickerView = [[UIPickerView alloc]init] ;
pickerView.frame=CGRectMake(10, 75, 180,20);
pickerView.delegate = self;
pickerView.showsSelectionIndicator = YES;
UIToolbar* toolbar = [[UIToolbar alloc] init];
toolbar.frame=CGRectMake(0,75,180,10);
toolbar.barStyle = UIBarStyleBlackTranslucent;
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]];
textField.inputAccessoryView = toolbar;
[pickerView addSubview:toolbar];
[self.view addSubview:pickerView];
}
By using the above code my toolbar is added but it is hidden under UIPickerView and it is getting added in the middle. How can I make the toolbar come to the front (on the top of UIPickerView) ?

Answer 1

There is a simpler way
You can insert the picker as inputView of your text Field
and add the toolbar as inputAccessoryView to your textField
like:
textField.inputView = pickerView;
textField.inputAccessoryView = toolBar;

Answer 2

You can getPicker using this
-(void)getValuePicker
{
ViewForValuePicker = [[UIView alloc]initWithFrame:CGRectMake(0, 219, 320, 266)];
UIToolbar *toolBar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, 320, 44)];
toolBar.barStyle = UIBarStyleBlackOpaque;
UIBarButtonItem *btn = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:#selector(doneBtnPressToGetValue)];
[toolBar setItems:[NSArray arrayWithObject:btn]];
[ViewForValuePicker addSubview:toolBar];
valuePicker = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 44, 320, 216)];
valuePicker.delegate=self;
valuePicker.dataSource=self;
valuePicker.showsSelectionIndicator=YES;
[ViewForValuePicker addSubview:valuePicker];
[appDelegate.window addSubview:ViewForValuePicker];
}
And its Delegete Method
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
return 1;
}
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component;
{
return [pickerValueAry count];
}
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component;
{
NSMutableArray *ary = [[NSMutableArray alloc] initWithArray:pickerValueAry];
id str=[ary objectAtIndex:row];
return str;
}
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
NSLog(#"selectedRowInPicker >> %d",row);
}
You can follow my answer for more Link

Answer 3

in viewDidLoad just add this code and when textFieldBegin just change frame like bellow...
First Create global UIView For back View of Date Picker in .h file like bellow..
UIView *viewPicker;
UIPickerView * pickerView;
and then use it like bellow..
- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField {
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.3];
viewPicker.frame = CGRectMake(0, 112, 320, viewPicker.frame.size.height);
[UIView commitAnimations];
return YES;
}
add this bellow code...
viewPicker = [[UIView alloc]initWithFrame:CGRectMake(0, 480, 320, 258)];
UIToolbar* toolbar = [[UIToolbar alloc] init];
toolbar.frame=CGRectMake(0,0,320,44);
toolbar.barStyle = UIBarStyleBlackTranslucent;
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]];
pickerView = [[UIPickerView alloc]init] ;
pickerView.frame=CGRectMake(0, 44, 320,216);
pickerView.delegate = self;
pickerView.showsSelectionIndicator = YES;
[viewPicker addSubview:pickerView];
[viewPicker addSubview:toolbar];
[self.view addSubview:viewPicker];
and in Done button clicked just set again frame like this..
-(IBAction)doneClicked:(id)sender
{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.3];
viewPicker.frame = CGRectMake(0, 370, 320, 258);
[UIView commitAnimations];
}
i hope this help you...

Answer 4

You could try with this code:
- (BOOL)textFieldDidBeginEditing:(UITextField *)textField {
[textField resignFirstResponder];
UIView *view = [[UIView alloc]initWithFrame:CGRectMake(20, 100, 180, 260)];
pickerView = [[UIPickerView alloc]init] ;
pickerView.frame=CGRectMake(0, 44, 180,216);
pickerView.delegate = self;
pickerView.showsSelectionIndicator = YES;
UIToolbar* toolbar = [[UIToolbar alloc] init];
toolbar.frame=CGRectMake(0,0,180,44);
toolbar.barStyle = UIBarStyleBlackTranslucent;
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]];
textField.inputAccessoryView = toolbar;
[view addSubview:toolbar];
[view addSubview:pickerView];
[self.view addSubview:view];
return YES;
}

Answer 5

Ok... How about just creating a vertical stack view on the storyboard editor, adding the toolbar above and the pickerview below? They don't have to be really associated to each other, they just need to be displayed and hidden at the same time. Kinda like this below:
It is really easy to do and you don't have to do coding magic.
Yeah I know this question is 7 years old but there are still people looking for solutions to this question.

Answer 6

you can set your UIPickerView like this way:-
-(void)showPicker{
menu = [[UIActionSheet alloc] initWithTitle:#"Select Time"
delegate:self
cancelButtonTitle:nil
destructiveButtonTitle:nil
otherButtonTitles:nil];
pickerView=[[UIPickerView alloc] init];
pickerView.frame= CGRectMake(0.0, 44.0, 0.0, 0.0);
pickerView.delegate=self;
pickerView.dataSource=self;
pickerView.showsSelectionIndicator = YES;
txtopsbox.inputView=pickerView;
dateTool = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
dateTool.barStyle=UIBarStyleBlackOpaque;
[dateTool sizeToFit];
NSMutableArray *barItems = [[NSMutableArray alloc] init];
UIBarButtonItem *flexSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:#selector(DatePickerDoneClick)];
[barItems addObject:flexSpace];
UIBarButtonItem *cancel = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:#selector(cancelClicked:)];
[barItems addObject:cancel];
[dateTool setItems:barItems animated:YES];
[menu addSubview:dateTool];
[menu addSubview:pickerView];
[menu showInView:self.view];
[menu setBounds:CGRectMake(0,0,320, 464)];
[pickerView release];
}
UPDATE
You can also do like Another Way like:-
- (IBAction)showPicker
{
if(pickerVisible == NO)
{
// create the picker and add it to the view
if(self.datePicker == nil) self.datePicker = [[[UIDatePicker alloc] initWithFrame:CGRectMake(0, 460, 320, 216)] autorelease];
[self.datePicker setMaximumDate:[NSDate date]];
[self.datePicker setDatePickerMode:UIDatePickerModeDate];
[self.datePicker setHidden:NO];
[self.view addSubview:datePicker];
// the UIToolbar is referenced 'using self.datePickerToolbar'
[UIView beginAnimations:#"showDatepicker" context:nil];
// animate for 0.3 secs.
[UIView setAnimationDuration:0.3];
CGRect datepickerToolbarFrame = self.datePickerToolbar.frame;
datepickerToolbarFrame.origin.y -= (self.datePicker.frame.size.height + self.datePickerToolbar.frame.size.height);
self.datePickerToolbar.frame = datepickerToolbarFrame;
CGRect datepickerFrame = self.datePicker.frame;
datepickerFrame.origin.y -= (self.datePicker.frame.size.height + self.datePickerToolbar.frame.size.height);
self.datePicker.frame = datepickerFrame;
[UIView commitAnimations];
pickerVisible = YES;
}
}
- (IBAction)done
{
if(pickerVisible == YES)
{
[UIView beginAnimations:#"hideDatepicker" context:nil];
[UIView setAnimationDuration:0.3];
CGRect datepickerToolbarFrame = self.datePickerToolbar.frame;
datepickerToolbarFrame.origin.y += (self.datePicker.frame.size.height + self.datePickerToolbar.frame.size.height);
self.datePickerToolbar.frame = datepickerToolbarFrame;
CGRect datepickerFrame = self.datePicker.frame;
datepickerFrame.origin.y += (self.datePicker.frame.size.height + self.datePickerToolbar.frame.size.height);
self.datePicker.frame = datepickerFrame;
[UIView commitAnimations];
// remove the picker after the animation is finished
[self.datePicker performSelector:#selector(removeFromSuperview) withObject:nil afterDelay:0.3];
}
}