In an iOS project I am currently working on, I was requested to create a pop-up window. Trying to figure out how to do it, I came up with a solution that is pretty easy to implement and very straight forward. All you need is a view controller with a transparent background and a subview (your popup window). After creating the popUpViewController, you can just call it from any other view controller.
Lets see the implementation in depth. First we create a new objective-c class with .xib file. In the header file (.h), add the following code (we need the QuarzCore framework in the project to style the window with rounded corners and shadows):
2
3
4
5
6
7
8
9
10
11
|
#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>
#import "AppDelegate.h"
@interface PopUpViewController : UIViewController
@property (weak, nonatomic) IBOutlet UIView *popUpView;
- (void)showInView:(UIView *)aView animated:(BOOL)animated;
@end
|
Now connect the popUpView outlet to the view in the .xib file (the view highlighted int he above image). Next, open the .m file of your class and add the following lines in your viewDidLoad method, so the background view of the window looks transparent:
3
4
5
6
7
8
9
|
- (void)viewDidLoad
{
self.view.backgroundColor=[[UIColor blackColor] colorWithAlphaComponent:.6];
self.popUpView.layer.cornerRadius = 5;
self.popUpView.layer.shadowOpacity = 0.8;
self.popUpView.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
}
|
Note that we set the backgroundColor alpha and not the view alpha because the popup window is a subview of the background view and we do not want it to look transparent too. In the viewDidLoad method we also set the shadow of the window and the cornerRadius (in order to get rounded corners).
Finally lets implement the code that does the trick with pop up fade in and fade out:
- (void)showAnimate
{
self.view.transform = CGAffineTransformMakeScale(1.3, 1.3);
self.view.alpha = 0;
[UIView animateWithDuration:.25 animations:^{
self.view.alpha = 1;
self.view.transform = CGAffineTransformMakeScale(1, 1);
}];
}
- (void)removeAnimate
{
[UIView animateWithDuration:.25 animations:^{
self.view.transform = CGAffineTransformMakeScale(1.3, 1.3);
self.view.alpha = 0.0;
} completion:^(BOOL finished) {
if (finished) {
[self.view removeFromSuperview];
}
}];
}
The showAnimate method scales the view to 1.3 (130%) of its current size, sets the alpha to 0 and then invokes an animation block with a duration of 0.25 sec that scales the view down to its original size and sets the alpha to 1. The removeAnimate method does exactly the opposite and implements also a completion handler for the animation block, so we know when to remove it from its superview.
Finally we need the IBAction for the close button, so the removeAnimate method is called and the implementation for the showInView method that we declared in our .h file in order to show our popup window on top of other views. The code here is self-explanatory:
- (IBAction)closePopup:(id)sender {
[self removeAnimate];
}
- (void)showInView:(UIView *)aView animated:(BOOL)animated
{
[aView addSubview:self.view];
if (animated) {
[self showAnimate];
}
}
0 comments:
Post a Comment