ToolBar at the top of UIPIckerView in xcode?

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) ?

Noll

Create a UIView, the frame of the UIView should be the high of UIPickerView plus the high of the toolbar, add as a subView the UiPIckerView and the toolbar inside the view and add the view to your self.view. – Susquehanna

chk my answer at #13524794 – Symposium

@GiuseppeiPichy can u please tell me how ?/ – Noll

check my upadated answer – Eunuchoidism

Answer 1

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

Symposium

@zeevblu's method is much simpler. I'd recommend going with that. Note, if you're using the keyboard, be sure and have the hardware keyboard toggled cmd-k – Fake

Answer 2

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;

Terrill

September 2019, this is still the simplest and most effective solution, thanks! – Messuage

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...

Jimerson

I had to add the toolbar to my picker view via addsubview. Thanks for the suggestion. Just doing inputAccessoryView wasn't enough. I disabled my textInput and only show the picker. – Christi

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;
}

Susquehanna

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.

Fluted

This is a valid solution if you need a very custom toolbar-esque view atop your picker. However, if that isn't the case, then you should always opt for the inputAccessoryView and the native UIToolbar so that you get System level UI changes/updates for free. – Amphiaster

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];
        }
    }

Eunuchoidism

But I dont want to use actionsheet.I need to make the whole view as active.So i have gone for without actionsheet – Noll

This could be a good answer but the author of the answer didn't read the question, the author of the post asked: I DON'T WANT TO USE ACTION SHEET – Susquehanna