Display UIViewController as a popup on iPhone

Question

Since there is no complete definitive answer to this general recurring question, I will ask and answer it here.

Often we need to introduce a UIViewController so that it does not cover the entire screen, as shown in the figure below.

Apple provides several similar UIViewController like UIAlertView , Twitter or Facebook share view controller, etc.

How can we achieve this effect for a user controller?

Answer 1

NOTE. This solution is broken in iOS 8. I will publish a new solution as soon as possible.

I am going to answer here using a storyboard, but this is also possible without a storyboard.

• Init: Create two UIViewController in the storyboard.

  • lets say FirstViewController , which is normal, and SecondViewController , which will pop up.

• Modal Segue: Place the UIButton in the FirstViewController and create a segue on this UIButton before the SecondViewController as a modal segment.

• Make it transparent: Now select the UIView (the default UIViewController with the UIViewController ) SecondViewController and change its background color to clear the color.

• Make a background image Dim: Add a UIImageView to the SecondViewController , which covers the entire screen and sets its image to some kind of semi-dark translucent image. You can get a sample from here: UIAlertView Background Image

• Display Design: Now add a UIView and create any design you want to show. Here is a screenshot of my storyboard

  • Here I add a segue to the login button that opens the SecondViewController as a popup to ask for a username and password

• Important: Now this is the main step. We want SecondViewController not to completely hide FirstViewController. We set a clear color, but that’s not enough. By default, it adds black for the presentation of the model, so we need to add one line of code to the viewDidLoad FirstViewController . You can add it to another place, but it should work before the start.

  [self setModalPresentationStyle:UIModalPresentationCurrentContext];

• Reject:. When the deviation depends on your use case. This is a modal presentation, therefore, to reject, we do what we do for a modal presentation:

  [self dismissViewControllerAnimated:YES completion:Nil];

That's all.....

Any suggestions or comments are welcome.

Demo: You can get a demo project project from here: Pop-up demo

NEW Someone has done a very good job on this concept: MZFormSheetController
New one . I found another code to get such a function: KLCPopup

---

IOS 8 update . I used this method to work with both iOS 7 and iOS 8

 + (void)setPresentationStyleForSelfController:(UIViewController *)selfController presentingController:(UIViewController *)presentingController { if (iOSVersion >= 8.0) { presentingController.providesPresentationContextTransitionStyle = YES; presentingController.definesPresentationContext = YES; [presentingController setModalPresentationStyle:UIModalPresentationOverCurrentContext]; } else { [selfController setModalPresentationStyle:UIModalPresentationCurrentContext]; [selfController.navigationController setModalPresentationStyle:UIModalPresentationCurrentContext]; } } 

---

You can use this method inside prepareForSegue, how to do it

 - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { PopUpViewController *popup = segue.destinationViewController; [self setPresentationStyleForSelfController:self presentingController:popup] } 

Answer 2

Modal pop-ups in the interface builder (storyboards)

Step 1

On the ViewController that you want to use as your modal popup, make the background color of the root UIView clear. Tip. Do not use the root UIView as your popup. Add a new UIView that is smaller than your popup.

Step 2

Create a Segue in a ViewController that has a popup. Select Show For Real.

Two methods to create a popup from here

Method One - Using Segue

Select Segue and change the presentation to "Over Current Context":

Method Two - Using the View Controller

Select the ViewController scene, which is your popup. In the Attribute Inspector, under the "View Controller" section, set the "Presentation" to "Context by Current Content":

Any of these methods will work. That should do it!

Answer 3

This can be done in Interface Builder.

• For the view you want to present, set its background appearance to transparent.
• Control + click and drag from the host view controller to the modal view controller.
• Choose current modal
• Click on the newly created segment and in the Attribute Inspector (on the right) set "Presentation" to "Context for current content".

Answer 4

Feel free to use my MZFormSheetController form controller for iPhone, in the sample project there are many examples of how to present a modal presentation that will not cover a full window and has many presentation / transition styles.

You can also try the latest version of MZFormSheetController called MZFormSheetPresentationController and has many additional features.

Answer 5

You can use EzPopup ( https://github.com/huynguyencong/EzPopup ), it is a Swift module and it is very easy to use:

 // init YourViewController let contentVC = ... // Init popup view controller with content is your content view controller let popupVC = PopupViewController(contentController: contentVC, popupWidth: 100, popupHeight: 200) // show it by call present(_ , animated:) method from a current UIViewController present(popupVC, animated: true) 

Answer 6

You can do this to add any other gaps to the view controller. First set the status bar to None for the ViewController that you want to add as a subset so that you can resize to whatever you want. Then create a button in the Present View controller and a method to click the button. In the method:

 - (IBAction)btnLogin:(id)sender { SubView *sub = [[SubView alloc] initWithNibName:@"SubView" bundle:nil]; sub.view.frame = CGRectMake(20, 100, sub.view.frame.size.width, sub.view.frame.size.height); [self.view addSubview:sub.view]; } 

Hope this helps, feel free to ask if there are any questions ...

Answer 7

Imao putting a UIImageView in the background is not a good idea. In my case, I added two other types to the controller. The first view is [UIColor clearColor] in the background, the second is the color, which should be transparent (gray in my case). Please note that order is important. Then for the second view set alpha 0.5 (alpha> = 0 <= 1) .Added this for the rows in prepareForSegue

 infoVC.providesPresentationContextTransitionStyle = YES; infoVC.definesPresentationContext = YES; 

And that’s all.

Answer 8

Swift 4:

To add an overlay or popup view. You can also use the " Container" view , with which you get a free view controller (you get the "Container" view from the regular palette / library of objects).

Steps:

1. Have a view (ViewForContainer in the image) that contains this container view in order to darken it when displaying the contents of the container view. Plug the outlet inside the first View Controller

2. Hide this view when loading the 1st VK

3. Show when button is pressed

4. To darken this view when displaying the contents of the container view, set the background color to black and 30% for opacity.

You will get this effect when you press the button