How to add a slide-in view effect?

Question

How can I create this simple slide-in from the bottom view effect?

*

I have an action sheet method and i want to create this view controller effect that when i tap on one of the action sheet buttons i will have this view sliding in from the bottom of the screen, i dont need for you to explain to me how to add the date picker, only the effect of the view that sliding in and the background is darker when it slides and get liter when its dismissed

Please help me do that :))

this is my action sheet method where i want to perform this(instead of the modal):

- (void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex {

    if (buttonIndex == 0) {
        NSLog(@"first button was pressed");
    } else if (buttonIndex == 1) {
        MyViewController *myViewController = [[MyViewController alloc]initWithNibName:@"MyViewController" bundle:nil];
        UINavigationController *navigationController = [[UINavigationController alloc]initWithRootViewController:myViewController];
        [self.navigationController presentViewController:navigationController animated:YES completion:nil];
    }
}

Answer 1

Here's an autolayout approach:

1. Create a "cover view" with a dark transparent background and constrain it to fill the window. Insert it above all other views.
2. Create the view containing the date picker and add it to the window above the cover view with a top constraint to the bottom of the window.
3. Call layoutIfNeeded() on the date picker view to trigger auto layout. Now the view is positioned "below" the screen and not yet visible to the user.
4. Remove the top constraint and add a bottom constraint to the bottom of the window.
5. Call layoutIfNeeded() again inside an animation block and the view will slide up from the bottom of the screen to its final position. You can also fade in the cover view within the animation block.

Here's a quick example. I haven't tested this exact code, but I've done this kind of thing many times and you should be able to get something from this approach I hope! Please note this assumes the MyActionSheet has a valid intrinsicContentSize.

// Create cover view
coverView = [UIView new];
coverView.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.4];
coverView.alpha = 0.0;

// Add to window
[window addSubview:coverView];
[window bringSubviewToFront:coverView];

// Pin to edges
[window addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[coverView]|" options:kNilOptions metrics:nil views:NSDictionaryOfVariableBindings(coverView)]];
[window addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[coverView]|" options:kNilOptions metrics:nil views:NSDictionaryOfVariableBindings(coverView)]];

// Create action sheet
MyActionSheet *sheet = [MyActionSheet new];
[window insertSubview:sheet aboveSubview:coverView];

// Add horizontal constraints
[window addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[sheet]|" options:kNilOptions metrics:nil views:NSDictionaryOfVariableBindings(sheet)]];

// Pin to starting position
NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:sheet attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:window attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0];
[window addConstraint:topConstraint];

// Layout to start
[sheet layoutIfNeeded];

// Pin to final position
[window removeConstraint:topConstraint];
NSLayoutConstraint *bottomConstraint = [NSLayoutConstraint constraintWithItem:sheet attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:window attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0];
[window addConstraint:bottomConstraint];

// Animate to final position
[UIView animateWithDuration:0.3 animations:^{
    coverView.alpha = 1.0;
    [sheet layoutIfNeeded];
}];

If you don't want to use auto layout for some reason, you can manually adjust the frames of the views provided you can calculate the height of the action sheet.