Display UIViewController as Popup in iPhone
IosIphoneUiviewcontrollerPopupUialertviewIos Problem Overview
Since there is no complete, definitive answer to this common recurring question, I'll ask and answer it here.
Often we need to present a UIViewController
such that it doesn't cover full screen, as in the picture below.
Apple provides several similar UIViewController
, such as UIAlertView
, Twitter or Facebook share view controller, etc..
How can we achieve this effect for a custom controller?
Ios Solutions
Solution 1 - Ios
NOTE : This solution is broken in iOS 8. I will post new solution ASAP.
I am going to answer here using storyboard but it is also possible without storyboard.
-
Init: Create two
UIViewController
in storyboard.- lets say
FirstViewController
which is normal andSecondViewController
which will be the popup.
- lets say
-
Modal Segue: Put
UIButton
in FirstViewController and create a segue on thisUIButton
toSecondViewController
as modal segue. -
Make Transparent: Now select
UIView
(UIView
Which is created by default withUIViewController
) ofSecondViewController
and change its background color to clear color. -
Make background Dim: Add an
UIImageView
inSecondViewController
which covers whole screen and sets its image to some dimmed semi transparent image. You can get a sample from here :UIAlertView
Background Image -
Display Design: Now add an
UIView
and make any kind of design you want to show. Here is a screenshot of my storyboard- Here I have add segue on login button which open
SecondViewController
as popup to ask username and password
- Here I have add segue on login button which open
-
Important: Now that main step. We want that
SecondViewController
doesn't hide FirstViewController completely. We have set clear color but this is not enough. By default it adds black behind model presentation so we have to add one line of code in viewDidLoad ofFirstViewController
. You can add it at another place also but it should run before segue.[self setModalPresentationStyle:UIModalPresentationCurrentContext];
-
Dismiss: When to dismiss depends on your use case. This is a modal presentation so to dismiss we do what we do for modal presentation:
[self dismissViewControllerAnimated:YES completion:Nil];
Thats all.....
Any kind of suggestion and comment are welcome.
Demo : You can get demo source project from Here : Popup Demo
NEW : Someone have done very nice job on this concept : MZFormSheetController
New : I found one more code to get this kind of function : KLCPopup
> iOS 8 Update : I made 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];
}
}
Can use this method inside prepareForSegue deligate like this
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
PopUpViewController *popup = segue.destinationViewController;
[self setPresentationStyleForSelfController:self presentingController:popup]
}
Solution 2 - Ios
Modal Popups in Interface Builder (Storyboards)
Step 1
On the ViewController you want 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 to be your popup.
Step 2
Create a Segue to the ViewController that has your popup. Select "Present Modally".
Two Methods To Create Popup From Here
Method One - Using the Segue
Select the Segue and change Presentation to "Over Current Context":
Method Two - Using the View Controller
Select the ViewController Scene that is your popup. In Attributes Inspector, under View Controller section, set Presentation to "Over Current Context":
Either method will work. That should do it!
Solution 3 - Ios
You can do this in Interface Builder.
- For the view you wish to present modally set its outermost view background to transparent
- Control + click and drag from the host view controller to the modal view controller
- Select present modally
- Click on the newly created segue and in the Attribute Inspector (on the right) set "Presentation" to "Over Current Context"
Solution 4 - Ios
Feel free to use my form sheet controller MZFormSheetControllerfor iPhone, in example project there are many examples on how to present modal view controller which will not cover full window and has many presentation/transition styles.
You can also try newest version of MZFormSheetController which is called MZFormSheetPresentationController and have a lot of more features.
Solution 5 - Ios
You can use EzPopup (https://github.com/huynguyencong/EzPopup), it is a Swift pod and 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)
Solution 6 - Ios
Imao put UIImageView on background is not the best idea . In my case i added on controller view other 2 views . First view has [UIColor clearColor]
on background, second - color which u want to be transparent (grey in my case).Note that order is important.Then for second view set alpha 0.5(alpha >=0 <=1).Added this to lines in prepareForSegue
infoVC.providesPresentationContextTransitionStyle = YES;
infoVC.definesPresentationContext = YES;
And thats all.
Solution 7 - Ios
Swift 4:
To add an overlay, or the popup view You can also use the Container View with which you get a free View Controller ( you get the Container View from the usual object palette/library)
Steps:
-
Have a View (ViewForContainer in the pic) that holds this Container View, to dim it when the contents of Container View are displayed. Connect the outlet inside the first View Controller
-
Hide this View when 1st VC loads
-
To dim this View when the Container View content is displayed, set the Views Background to Black and opacity to 30%
Solution 8 - Ios
You can do this to add any other subview to the view controller. First set the status bar to None for the ViewController which you want to add as subview so that you can resize to whatever you want. Then create a button in Present View controller and a method for button click. 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 any queries...