Create Overlay view in iOS

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:

 @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**/  
 }  




You may also like

No comments:

Member of Mroom Software. Powered by Blogger.