Create Overlay view in iOS
/
0 Comments
First of all, welcome to my blog ;) . All your comments will help me a lots to improve myself and also my articles.
So, let's start with the first post :D. In this post I will show you how to open a popup view inside a view controller - something like this
The idea is based on TSAlertView (https://github.com/TomSwift/TSAlertView). Now we start ;)
1. At the begin of .m file of view controller:
2. At any place where you want to open a custom view in .m file of view controller:
@interface OverlayWindow : UIWindow
{
}
@property (nonatomic,retain) UIWindow* oldKeyWindow;
@end
@implementation OverlayWindow
@synthesize oldKeyWindow;
- (void) makeKeyAndVisible
{
self.oldKeyWindow = [[UIApplication sharedApplication] keyWindow];
self.windowLevel = UIWindowLevelAlert;
[super makeKeyAndVisible];
}
- (void) resignKeyWindow
{
[super resignKeyWindow];
[self.oldKeyWindow makeKeyWindow];
}
- (void) drawRect: (CGRect) rect
{
// render the radial gradient behind the alertview
CGFloat width = self.frame.size.width;
CGFloat height = self.frame.size.height;
CGFloat locations[3] = { 0.0, 0.5, 1.0 };
CGFloat components[12] = { 1, 1, 1, 0.5,
0, 0, 0, 0.5,
0, 0, 0, 0.7 };
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGGradientRef backgroundGradient = CGGradientCreateWithColorComponents(colorspace, components, locations, 3);
CGColorSpaceRelease(colorspace);
CGContextDrawRadialGradient(UIGraphicsGetCurrentContext(),
backgroundGradient,
CGPointMake(width/2, height/2), 0,
CGPointMake(width/2, height/2), width,
0);
CGGradientRelease(backgroundGradient);
}
- (void) dealloc
{
oldKeyWindow = nil;
[super dealloc];
}
@end
@interface OverlayViewController : UIViewController
{
}
@end
@implementation OverlayViewController
- (BOOL) shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation
{
return (toInterfaceOrientation == UIInterfaceOrientationLandscapeLeft || toInterfaceOrientation == UIInterfaceOrientationLandscapeRight);
}
- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation duration:(NSTimeInterval)duration
{
// resize the alertview if it wants to make use of any extra space (or needs to contract)
}
- (void) dealloc
{
[super dealloc];
}
@end
2. At any place where you want to open a custom view in .m file of view controller:
- (void) pulse
{
// pulse animation thanks to: http://delackner.com/blog/2009/12/mimicking-uialertviews-animated-transition/
downloadingProgressView.transform = CGAffineTransformMakeScale(0.6, 0.6);
[UIView animateWithDuration: 0.2
animations: ^{
downloadingProgressView.transform = CGAffineTransformMakeScale(1.1, 1.1);
}
completion: ^(BOOL finished){
[UIView animateWithDuration:1.0/15.0
animations: ^{
downloadingProgressView.transform = CGAffineTransformMakeScale(0.9, 0.9);
}
completion: ^(BOOL finished){
[UIView animateWithDuration:1.0/7.5
animations: ^{
downloadingProgressView.transform = CGAffineTransformIdentity;
}];
}];
}];
}
- (void)addDownloadView {
appDel.isDownloadingPopup = YES;
UIView *downloadingProgressView = [[[UIView alloc] init] autorelease];
[downloadingProgressView setBackgroundColor:[UIColor clearColor]];
OverlayViewController* avc = [[[OverlayViewController alloc] init] autorelease];
avc.view.backgroundColor = [UIColor clearColor];
// $important - the window is released only when the user clicks an alert view button
OverlayWindow *ow = [[OverlayWindow alloc] initWithFrame: [UIScreen mainScreen].bounds];
ow.alpha = 0.0;
ow.backgroundColor = [UIColor clearColor];
ow.rootViewController = avc;
[ow makeKeyAndVisible];
// fade in the window
[UIView animateWithDuration: 0.2 animations: ^{
ow.alpha = 1;
}];
[avc.view addSubview: downloadingProgressView];
downloadingProgressView.center = CGPointMake( CGRectGetMidX( avc.view.bounds ), CGRectGetMidY( avc.view.bounds ) );;
downloadingProgressView.frame = CGRectIntegral( CGRectMake(self.view.frame.size.width / 2 - 143, self.view.frame.size.height / 2 - 149, 286, 298) );
[self pulse];
/** Add your controls into downloadingProgressView here**/
}
