Putting a modal view over a view and making the background grey

Question

I have been trying to accomplish this for the last 3 hours and I could not figure out how to do this. Could anyone PLEASE help?

So this is what I am trying to do. When I press a button, say, a Sign In button, I want a modal view to pop up that make the view behind it grey and untappable. And on this modal view, I want several button and static labels.

I've read and tried to understand several resources already such as: Present modal view controller in half size parent controller, http://makeapppie.com/2014/08/30/the-swift-swift-tutorials-adding-modal-views-and-popovers/, How to use modal views in swift?, and several others. However, I have such a hard time understanding the code.

So far I have this code which is supposed to make the modal view be on top of the view behind it:

@IBAction func signIn(sender: AnyObject) {
    self.modalTransitionStyle = UIModalTransitionStyle.CoverVertical
    // Cover Vertical is necessary for CurrentContext
    self.modalPresentationStyle = .CurrentContext
    // Display on top of    current UIView
    self.presentViewController(SignInViewController(), animated: true, completion: nil)
}

But this isn't producing the effect that I want. Anybody please help?

Answer 1

First, create your gray empty view

func makeGrayView() -> UIView {
    var view = UIView(frame:UIScreen.mainScreen().applicationFrame)
    self.view.backgroundColor = UIColor.greyColor()
    return view
}

Second, set the view you just created as a background of your overlay

var backView = self.makeGrayView()
self.view.addSubview(backView)

Answer 2

You have to use Cusotm UIViewControllerAnimation class to achieve this.Use the above code .CreateTransparentTransition.h and .m File

#import <Foundation/Foundation.h>

@interface TransparentTransition :NSObject<UIViewControllerAnimatedTransitioning,UIViewControllerTransitioningDelegate>{   
BOOL isPresenting;
}
@end

//TransparentTransition.m

#import "TransparentTransition.h"

@implementation TransparentTransition
- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext{
return 0.8f;
}

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{

UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIView *toView = toVC.view;
UIView *fromView = fromVC.view;

UIView* containerView = [transitionContext containerView];


// Position the presented view off the top of the container view

if(isPresenting){
   [containerView addSubview:toView];
    toView.frame = CGRectMake(0, -toView.frame.size.height, toView.frame.size.width, toView.frame.size.height);
    [UIView animateWithDuration:[self transitionDuration:transitionContext]
                          delay:0
         usingSpringWithDamping:.8
          initialSpringVelocity:6.0
                        options:0
                     animations:^{
                          toView.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageNamed:@"black_patch.png"]];
                         CGAffineTransform scaleTrans  = CGAffineTransformMakeScale(1.0f, 1.0f);
                         CGAffineTransform lefttorightTrans  = CGAffineTransformMakeTranslation(0.f,+toView.frame.size.height);
                         toView.transform = CGAffineTransformConcat(scaleTrans, lefttorightTrans);


                     }
                     completion:^(BOOL finished){
                         [transitionContext completeTransition:YES];

                     }];

}
else{

    [UIView animateWithDuration:[self transitionDuration:transitionContext]
                          delay:0
                        options:0
                     animations:^{
                         //                              toView.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageNamed:@"black_patch.png"]];
                         CGAffineTransform scaleTrans  = CGAffineTransformMakeScale(1.0f, 1.0f);
                         CGAffineTransform lefttorightTrans  = CGAffineTransformMakeTranslation(0,-fromView.frame.size.height);
                         fromView.transform = CGAffineTransformConcat(scaleTrans, lefttorightTrans);


                     }
                     completion:^(BOOL finished){
                         [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
                     }];


    }

   }



- (id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{

isPresenting=YES;
return self;
}

- (id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{
isPresenting=NO;
return self;
}

- (UIDynamicAnimator*)animateForTransitionContext:(id<UIViewControllerContextTransitioning>)transitionContext {
// Has to be implemented by subclasses
return nil;
}

//Usage of Above Animation

var transitionManager:TransparentTransition
@IBAction func signIn(sender: AnyObject) {

let detail = self.storyboard?.instantiateViewControllerWithIdentifier("detail") as! DetailViewController
    detail.modalPresentationStyle = UIModalPresentationStyle.Custom;
    detail.transitioningDelegate = transitionManager;
self.presentViewControllerdetail, animated: true, completion: nil)
}

Also here is nice tutorial which explains how to make such cool animation http://www.appcoda.com/custom-view-controller-transitions-tutorial/

Answer 3

You can do this using the storyboard. First drag a button onto your first UIViewController.

Then connect the button to an action like so

@IBAction func presentForm() {
    self.view.backgroundColor = UIColor.lightGrayColor()
}

Ok secondly, drag another UIViewController onto the storyboard and Ctrl drag the button to this controller to create a segue. Use the same settings I have below. Present modally & over Full screen.

Ok Next is to create your form sheet on the second ViewController. I have added a simple one below. Next step is to select the view on the second view controller. This is to change the background view color to Clear color. The image shows you the view in the hierarchy and the backgound color selected as Clear.

Then drag another view on top of this where your form elements will be. Like the label and textfields I have. When you build and run your project you'll have the following screens.

Note you'll have to add your own auto layout constraints but they are simple. You can also play about with the code. Like changing the Opaque value of the first Viewcontroller on the button press etc. This should be enough to get you started.