iOS自定义弹出窗口

先看示例

最终效果图.gif

首先搭建好基础界面

- (void)viewDidLoad {
    [super viewDidLoad];
    //设置背景色
    self.view.backgroundColor = [UIColor yellowColor];
    //弹出按钮
    UIButton *alertBt = [UIButton buttonWithType:UIButtonTypeSystem];
    alertBt.frame = CGRectMake(100, 100, 100, 100);
    [alertBt setTitle:@"弹出" forState:UIControlStateNormal];
    [alertBt addTarget:self action:@selector(alertAction) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:alertBt];
    
}
//弹出按钮点击事件
- (void)alertAction{
//这里我创建了一个AlertViewController  继承UIViewController  这是我们最基本的弹出方式,效果你们也可以想象,我就不放图了.
    [self presentViewController:[AlertViewController new] animated:YES completion:nil];

}

然后我们就要在AlertViewController里面做事情了

ps:大部分是布局代码,看看前面几句就可以跳过看下一步

- (void)viewDidLoad {
    [super viewDidLoad];
    //为了弹出框效果,我们当然要把背景透明
    self.view.backgroundColor = [UIColor clearColor];
    //这里开始都是布局代码  可以根据界面效果阅读,不读也没什么影响  我这里定义了两个宏一个bigWid 一个bigHei 分别是屏幕的宽和高
    UIView *myView = [UIView new];
    myView.frame = CGRectMake(15, bigHei-175, bigWid-30, 160);
    myView.backgroundColor = [UIColor whiteColor];
    myView.layer.cornerRadius = 5;
    [self.view addSubview:myView];
    
    //分享微信 和朋友圈按钮
    UIButton *bt1 = [UIButton buttonWithType:UIButtonTypeSystem];
    [bt1 setBackgroundImage:[UIImage imageNamed:@"weChat"] forState:UIControlStateNormal];
    [bt1 setTitle:@"分享给好友" forState:UIControlStateNormal];
    bt1.titleLabel.font = [UIFont systemFontOfSize:10];
    [bt1 setTitleEdgeInsets:UIEdgeInsetsMake(40, 0, -40, 0)];
    bt1.tintColor = [UIColor grayColor];
    bt1.frame = CGRectMake(40, 30, 50, 50);
    [bt1 sizeToFit];
    [myView addSubview:bt1];
    
    UIButton *bt2 = [UIButton buttonWithType:UIButtonTypeSystem];
    [bt2 setBackgroundImage:[UIImage imageNamed:@"share"] forState:UIControlStateNormal];
    [bt2 setTitle:@"朋友圈分享" forState:UIControlStateNormal];
    bt2.titleLabel.font = [UIFont systemFontOfSize:10];
    [bt2 setTitleEdgeInsets:UIEdgeInsetsMake(40, 0, -40, 0)];
    bt2.tintColor = [UIColor grayColor];
    bt2.frame = CGRectMake(bigWid/2-35, 30, 50, 50);
    [bt2 sizeToFit];
    [myView addSubview:bt2];
    
    
    
    UIButton *bt3 = [UIButton buttonWithType:UIButtonTypeSystem];
    [bt3 setBackgroundImage:[UIImage imageNamed:@"box"] forState:UIControlStateNormal];

    [bt3 setTitle:@"收藏" forState:UIControlStateNormal];
    
    bt3.titleLabel.font = [UIFont systemFontOfSize:10];
    [bt3 setTitleEdgeInsets:UIEdgeInsetsMake(40, 0, -40, 0)];
    bt3.tintColor = [UIColor grayColor];
    bt3.frame = CGRectMake(bigWid - 110, 30, 50, 50);
    [myView addSubview:bt3];
   
    
    
    //分割线
    UIView *deView = [[UIView alloc]initWithFrame:CGRectMake(0, 120, bigWid - 30, 1)];
    deView.backgroundColor = [UIColor colorWithRed:225/255.0 green:225/255.0 blue:225/255.0 alpha:1.0];
    [myView addSubview:deView];
    
    //取消按钮
    UIButton *cancellBt = [UIButton buttonWithType:UIButtonTypeSystem];
    [cancellBt setTitle:@"取消" forState:UIControlStateNormal];
    cancellBt.frame = CGRectMake(15, 120, bigWid - 60, 40);
    [myView addSubview:cancellBt];
    [cancellBt addTarget:self action:@selector(backAction) forControlEvents:UIControlEventTouchUpInside];
    
}
//返回按钮
- (void)backAction{
    [self dismissViewControllerAnimated:YES completion:nil];
}

然后效果嘛,当然是

gif.gif

因为默认的present效果并不是覆盖,是切换.显示的黑色背景是Window的背景颜色.

所以下一步我们就要修改modalPresentStyle

先回到ViewController

//在弹出方法中设置跳转模式
- (void)alertAction{
    AlertViewController *vc = [AlertViewController new];
    //这里设置目的视图控制器的模式 不是self  
    vc.modalPresentationStyle = UIModalPresentationOverCurrentContext;
    [self presentViewController:vc animated:YES completion:nil];
}

//为了逼真,再加一层阴影

//这个可以写在viewDidLoad里面
self.shadowView = [[UIView alloc] initWithFrame:self.view.bounds];
    self.shadowView.backgroundColor = [UIColor blackColor];
    [self.view addSubview:self.shadowView];
---------
//在present的之前,先
self.shadowView .alpha = 0.5;
//然后再返回时再讲它的alpha设回0,这里不能用在viewWillApear里面设置,因为他的视图一直可见,所以回来不会触发这个方法.这里可以用block或者代理来实现返回时shadowVIew.alpha = 0;

最终效果图

![Uploading 最终效果图_165272.gif . . .]