CODEWITHSUNDEEP
iosuser-interfaceuiviewcontrolleruipopovercontrolleruistoryboardsegue
Felipe Lira
Felipe Lira

Reputation: 310

How to make a popup/dialog view in iOS in a separate ViewController?

I'm making an iOS game and I want to achieve this effect: pause popup 2 different controllers

I know how to do it using one view controller but my view controller class is already bloated with code and the storyboard of that screen is a mess (I actually have many more views that the image above, I just hid them for clarity reasons).

So my questions is: Is there a way to achieve this by using a separate view controller to manage this pause popover? I need a segue that will not dismiss the previous presented screen. I want to do that using storyboards. I tried "popover" segue but it appeared with a weird border that I don't want to.

Also I need that all controls that are not managed by pause view controller stop listening to events. I thought of using a black transparent view that covers the entire screen as BG for the pause view, and make it ignore events. Is there a better approach?

Thanks in advance.

Upvotes: 5

Views: 10043

Answers (4)

sqlexception
sqlexception

Reputation: 194

As a variation to the answer related to the UIStoryboardSegue subclass, you could also use a transparent 1x1 "blank.png" image. That way you'd only need to concern yourself with the alphas of the subviews of the popup's view controller, so that the popup in the middle could have full visibility if desired. 

    -(void)perform
    {
        UIViewController *dst = [self destinationViewController];
        UIViewController *src = [self sourceViewController];

        // add the view to the hierarchy and bring to front
        [src addChildViewController:dst];
        [src.view addSubview:dst.view];
        [src.view bringSubviewToFront:dst.view];

        // set the view frame
        CGRect frame;
        frame.size.height = src.view.frame.size.height;
        frame.size.width = src.view.frame.size.width;
        frame.origin.x = src.view.bounds.origin.x;
        frame.origin.y = src.view.bounds.origin.y;
        dst.view.frame = frame;
        dst.view.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"blank.png"]];

        [UIView animateWithDuration:0.3f animations:^{
            dst.view.alpha = 1;
        }];
    }

Upvotes: 0

Bharat Gulati
Bharat Gulati

Reputation: 796

Assuming you are not using cocos 2d's scene. In simple iOS, The best posiible solution is using container Controller.

  1. Go to your story board and drag a container controller to your main view controller ( just like you drag a UIlabel)
  2. Set the size of container. Another embedded view will pop out of the container controller of the same size. Give this view controller a new class name.
  3. make an outlet for container and show/ hide container as required.

If you are unable to do this, I will make a tutorial on this site. Just comment below if you want me to do that.

Upvotes: 0

LombaX
LombaX

Reputation: 17364

If you want to achieve it using storyboard, it's quite simple.

I attach example code

1 - Create your custom PauseViewController in Storyboard. Use a fullscreen view, black color, with Alpha 0 and a subview containing your pause controls. Create the coresponding .h and .m files

2 - add and link your controls (UIButtons). Add a dismiss method like this. This method will remove the view from the hierarchy and make it not visible changing the alpha on dismiss.

- (IBAction)dismiss:(id)sender {
    [UIView animateWithDuration:0.3f animations:^{
        self.view.alpha = 0.0f;
    } completion:^(BOOL finished) {
        [self.view removeFromSuperview];
        [self removeFromParentViewController];
    }];
}

3 - subclass UIStoryboardSegue creating your own segue class. Then, override the perform method with something like this. This simply takes the two controllers (source and destinations) and put the destination view over the source view with an animation.

-(void)perform{
    UIViewController *dst = [self destinationViewController];
    UIViewController *src = [self sourceViewController];

    // add the view to the hierarchy and bring to front
    [src addChildViewController:dst];
    [src.view addSubview:dst.view];
    [src.view bringSubviewToFront:dst.view];

    // set the view frame
    CGRect frame;
    frame.size.height = src.view.frame.size.height;
    frame.size.width = src.view.frame.size.width;
    frame.origin.x = src.view.bounds.origin.x;
    frame.origin.y = src.view.bounds.origin.y;
    dst.view.frame = frame;

    [UIView animateWithDuration:0.3f animations:^{ 
        dst.view.alpha = 0.5f;
    }];
}

4 - link your segue, choose custom and insert the custom segue class name.

Ta-daaaa!

If you need other details check the example code or add a comment.

Upvotes: 16

karlofk
karlofk

Reputation: 1215

You should look into childViewControllers. It looks like you want to achive something like this. 

PauseMenuViewController *pauseMenuVC = [[PauseMenuViewController alloc] init]; 
[self addChildViewController:pauseMenuVC];
if ([self isViewLoaded]){
    [self.view addSubview:pauseMenuVC.view];
}

You should be able to create your own animations of the menu entering the view and dimming the background.

Apple Docs

Upvotes: 2

Related Questions