How can I animate displaying UIPickerView after pressing button?

Question

I want to animate my UIPickerView after pressing the button. I already have coded my UIPickerView to be hidden on viewDidLoad and not hidden after pressing a button, but it doesn't animate like how a ModalViewController animates by default. I just want my UIPickerView to be animated just like a ModalViewController animates by default.

I've researched already on the site, and on the web, but I can't seem to do it properly.

Here's my code:

#pragma mark - Picker View 

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 1;
}

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    return 4;
}

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    timersArray = [[NSMutableArray alloc] init];
    [timersArray addObject:@"No timer"];
    [timersArray addObject:@"15 seconds"];
    [timersArray addObject:@"30 seconds"];
    [timersArray addObject:@"60 seconds"];

    return [timersArray objectAtIndex:row];
}

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    if ([[timersArray objectAtIndex:row] isEqual:@"No timer"])
    {
        timerIndication.text = @"No timer selected";
        timersPickerView.hidden = YES;
        // Animation code to dismiss picker should go here
    }
    else if ([[timersArray objectAtIndex:row] isEqual:@"15 seconds"])
    {
        timerIndication.text = @"15 seconds selected";
        timersPickerView.hidden = YES;
        // Animation code to dismiss picker should go here
    }
    else if ([[timersArray objectAtIndex:row] isEqual:@"30 seconds"])
    {
        timerIndication.text = @"30 seconds selected";
        timersPickerView.hidden = YES;
        // Animation code to dismiss picker should go here
    }
    else if ([[timersArray objectAtIndex:row] isEqual:@"60 seconds"])
    {
        timerIndication.text = @"60 seconds selected";
        timersPickerView.hidden = YES;
        // Animation code to dismiss picker should go here
    }
}

#pragma mark - Delay method

// This is where Send button should be enabled
- (IBAction)selectTimer
{
    timersPickerView.hidden = NO;
    // Animation code to present picker view should go here
}

Solution 1

You can use the following code for animating the picker view after pressing the button:

-(IBAction)button:(id)sender
{

   [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.6];
    CGAffineTransform transfrom = CGAffineTransformMakeTranslation(0, 200);
    PickerView.transform = transfrom;
    PickerView.alpha = PickerView.alpha * (-1) + 1;
    [UIView commitAnimations];

}

Don't forget to add the following code to your viewDidLoad method

PickerView.alpha = 0;    
[self.view addSubview:PickerView];

What it does is it makes the picker view fall from the top of the screen on 1st click and to make the picker view disappear,you can simply click the button again.From the next click the picker view just appears and vanishes..Hope it helps and works :)

Solution 2

You can create a viewcontroller and then add the UIPickerView inside the controller and then use:

[self presentModalViewController:viewControllerWithPickerView animated:YES];

or you can add your UIPickerView not hidden but with a y value bigger than the screen, like 480.0 or bigger and then use UIView animations to move the UIPickerView from that position to a position visible on the screen, that would emulate the ModalViewController animation.

Solution 3

You can use below function to perform animation of picker view.

-(void)hideShowPickerView {

if (!isPickerDisplay) {
    [UIView animateWithDuration:0.25 animations:^{
        CGRect temp = self.categoryPicker.frame;
        temp.origin.y = self.view.frame.size.height - self.categoryPicker.frame.size.height;
        self.categoryPicker.frame = temp;
    } completion:^(BOOL finished) {
        NSLog(@"picker displayed");
        isPickerDisplay = YES;
    }];
}else {
    [UIView animateWithDuration:0.25 animations:^{
        CGRect temp = self.categoryPicker.frame;
        temp.origin.y = self.view.frame.size.height;
        self.categoryPicker.frame = temp;
    } completion:^(BOOL finished) {
        NSLog(@"picker hide");
        isPickerDisplay = NO;
    }];
}

}

Define isPickerDisplay as BOOL and initialize this in to ViewDidLoad as given below -

isPickerDisplay = YES;
[self hideShowPickerView];

This will manage hide and show functionality for UIPickerView.

Solution 4

Swift 3 Solution

I agree with @EshwarChaitanya, the alpha property is animatable and this is an appropriate use.

override func viewDidLoad() {
    super.viewDidLoad()
    
    timersPickerView.alpha = 0
}

@IBAction func selectTimer() {
    UIView.animate(withDuration: 0.3, animations: {
        self.timersPickerView.alpha = 1
    })
}

I am not sure how you want to hide it so I will leave it up to you.

View more solutions

Comments

[jaytrixz]

Any workaround also for making the view dimmed when I load my modalviewcontroller with the pickerview in it?

[jaytrixz]

It's not the case. When I press the button, it just makes the PickerView appear since it is hidden by default in viewDidLoad. It hides again after selecting a row on the PickerView.

[Paul N]

You can use a hidden UIView with black background and an alpha of 0.5 and listen to your UIPickerView animation, when it finished then you show that UIView. This UIView should be placed above everything else but the UIPickerView.

[Eshwar Chaitanya]

@androniennn Glad my answer worked and thanks for your complement :)