Creating a Custom Alert or PopUp in iOS

By | November 16, 2014

Custom PopUp IOS

First we will write a class that extends UIView to create a Custom PopUp

Create a Cocoa file and name it CustomPopUp

You should get two files CustomPopUp.h and CustomPopUp.m

CustomPopUp.h

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
 
@protocol ClickDelegates;
 
@interface CustomPopUp : UIView{
     
      UIView *childPopUp;
      id<ClickDelegates> _click_delegate;
      UIViewController *_parent;
     
}
 
@property (nonatomic, retain) id<ClickDelegates> _click_delegate;
@property (nonatomic, retain) UIViewController *_parent;
 
-(void) initAlertwithParent : (UIViewController *) parent withDelegate : (id<ClickDelegates>) theDelegate;
 
-(IBAction)OnOKClick :(id) sender;
 
-(void) hide;
 
-(void) show;
 
@end
 
 
// Delegate
 
@protocol ClickDelegates<NSObject>
 
@optional
 
-(void) okClicked;
-(void) cancelClicked;
 
@end

CustomPopUp.m

#import "CustomPopUp.h"
#import "Util.h"
 
@implementation CustomPopUp{
     
    float popUpX;
    CGRect popUpRect;
}
 
@synthesize _click_delegate, _parent;
 
 
-(void) initAlertwithParent : (UIViewController *) parent withDelegate : (id<ClickDelegates>) theDelegate{
     
    self._click_delegate = theDelegate;
    self._parent = parent;
     
    CGRect screenRect = [[UIScreen mainScreen] bounds];
    CGFloat screenWidth = screenRect.size.width;
    CGFloat screenHeight = screenRect.size.height;
     
    CGRect rect = CGRectMake(0, 0, screenWidth, screenHeight);
    self.frame = rect;
    self.backgroundColor = [UIColor clearColor];
     
    childPopUp = [UIView new];
    float popUpHeight = screenHeight/3;
     
    popUpX = 20.0;
     
    popUpRect = CGRectMake(popUpX, (screenHeight - popUpHeight)/2, screenWidth - (popUpX * 2), popUpHeight);
    childPopUp.center = self.center;
    self.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.001, 0.001);
    [self setBorderOnly:childPopUp withBGColor:[UIColor orangeColor] withCornerRadius:5.0 andBorderWidth:0.0 andBorderColor:[UIColor greenColor] WithAlpha:1];
    childPopUp.frame = popUpRect;
    [self addSubview:childPopUp];
   
    [self addLabel];
     
    [self addButton];
     
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.2];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(bounce1AnimationStopped)];
    self.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1);
    [UIView commitAnimations];
     
}
 
-(void) show{
 
    [self._parent.view addSubview:self];
}
 
-(void) addLabel{
     
    // Add Label
    UILabel *lblForDisplay=[[UILabel alloc]initWithFrame:CGRectMake(popUpX, popUpX, popUpRect.size.width - popUpX, popUpX)];
    lblForDisplay.backgroundColor=[UIColor clearColor];
    lblForDisplay.textColor=[UIColor blackColor];
    lblForDisplay.text=@"This is a custom Alert";
    [childPopUp addSubview:lblForDisplay];
     
}
 
 
-(void) addButton{
     
    // Add Button
    UIButton *okBtn = [[UIButton alloc]initWithFrame:CGRectMake(popUpX, childPopUp.frame.size.height - 50, popUpRect.size.width - 40, 40)];
    okBtn.backgroundColor=[UIColor blueColor];
    [self setBorderOnly:okBtn  withBGColor:[UIColor greenColor] withCornerRadius:5.0 andBorderWidth:0.0 andBorderColor:[UIColor greenColor] WithAlpha:1];
    [okBtn setTitle:@"OK" forState:UIControlStateNormal];
    [okBtn addTarget:self action:@selector(OnOKClick:) forControlEvents:UIControlEventTouchDown];
    [childPopUp addSubview:okBtn];
     
}
 
-(IBAction)OnOKClick :(id) sender{
     
    [_click_delegate okClicked];
     
}
 
-(void) show : (UIViewController *) parent{
     
}
 
-(void) hide{
     
    [self removeFromSuperview];
     
}
 
- (void)bounce1AnimationStopped {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:.2];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(bounce2AnimationStopped)];
    self.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.9, 0.9);
    [UIView commitAnimations];
}
 
- (void)bounce2AnimationStopped {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:.2];
    self.transform = CGAffineTransformIdentity;
    [UIView commitAnimations];
}
 
 
-(void) setBorderOnly:(UIView *) theView withBGColor:(UIColor *) color withCornerRadius :(float) radius andBorderWidth :(float) borderWidth andBorderColor :(UIColor *) bgColor WithAlpha:(float) curAlpha
{
    theView.layer.borderWidth = borderWidth;
    theView.layer.cornerRadius = radius;
    theView.layer.borderColor = [color CGColor];
    UIColor *c = [color colorWithAlphaComponent:curAlpha];
    theView.layer.backgroundColor = [c CGColor];
}
 
@end

I have a sample interface like this.

Custom PopUp IOS

Now the ViewController.m

#import "ViewController.h"
 
@interface ViewController ()
 
@end
 
@implementation ViewController{
 
    CustomPopUp *mPopUp;
     
}
 
- (void)viewDidLoad {
    [super viewDidLoad];
     
    //create delegate   
    mPopUp = [CustomPopUp new];
    [mPopUp initAlertwithParent:self withDelegate:self];
     
     
}
 
-(void) okClicked{
 
    [mPopUp hide];
     
}
 
-(void) cancelClicked{
    NSLog(@"Cancel");
}
 
-(IBAction)showAlert :(id)sender{
    [mPopUp show];
}
 
-(IBAction)dummyClick :(id)sender{
     
    NSLog(@"Click Dummy");
}
 
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}
 
@end

MAKE SURE YOU HOOK UP THE BUTTONS TO THEIR CORRESPONDING FUNCTIONS.

You can download the complete source code from here.

Leave a Reply

Your email address will not be published. Required fields are marked *