首先放两张旧版app用的提示框截图，之前这个是直接用MBProgressHUD做的，效果是有点丑。
旧版提示框截图1.png
旧版提示框截图2.png
然后再看看我们boss做的安卓版本的提示框：
安卓新版提示框截图1.png
安卓新版提示框截图2.png
不管是从用户体验还是界面美观角度来看，iOS都比不过Android。本来我也不想计较这么多的，毕竟我不是那么小心眼的人(呃，刚开始我是真不会)。可是老板他就要求你做，而且做出来的效果要和安卓的一模一样。刚开始我是这么跟老板说的：“这个对我来说确实有难度，我可能做不出这种效果。”,然后老板说了一句“你要是做不出来，我请你来干嘛？难道还需要我请一个外包来做这个吗？”，这句话很伤，真的伤；我只好要求给我点时间，一定要做出来，不能让老板怀疑我的能力，接着大概花了两天的时间，上网找各种弹出框、提示框资料，最后还是弄出来了。
在这里，首先要特别感谢一下贡献这个demo地址的前辈，
https://github.com/MacKaSL/HMPopUp
这是前辈的效果图：
HMPopUp效果.png
真的谢谢你，是这个demo给了我设计XLPopView弹出框的思路。
接着，来看看最后的效果：
新版效果.gif
下面说说实现思路：
一、创建XLPopView
1、首先想着外面要怎么调用这个弹出框方法？由于我这里一共有四种类型的弹出框样式，分别写了四个类方法供外面调用，其实归根结底调的还是里面的私有方法(这个思路就是从上面提供demo的前辈那里得来的，因为我的需求，我改了他很多东西)，下面简单介绍一下第一种弹出框样式，这里只是提供一种思路。
/**
* 第一种弹出框:固定提示title、右上角关闭按钮、下面确定按钮；中间提示文字可自定义
*
* @param tipStr 中间提示文字
*
* @return 弹出框
*/
+ (XLPopView *)popViewWithTipStr:(NSString *)tipStr;
2、类方法里面写什么？这里其实调用的是它自己的私有方法，私有方法里面的话我是自己写了，关键就在于承载容器的视图，承载器搞定了，接着就是往承载器里加东西，想加什么就加什么，比如，文本框、按钮、图片等等根据你的需求随意添加；如果需要添加什么点击事件可能就需要打开用户交互活着设置代理什么的，具体看个人需求。
+ (XLPopView *)popViewWithTipStr:(NSString *)tipStr {
return [[self alloc] initWithTipStr:tipStr];
}
- (XLPopView *)initWithTipStr:(NSString *)tipStr {
self = [super initWithFrame:[UIScreen mainScreen].bounds];
if (self) {
// 弹出框后面的背景视图
UIView *shawdowView = [[UIView alloc] initWithFrame:self.bounds];
shawdowView.backgroundColor = [UIColor blackColor];
shawdowView.alpha = 0.6;
[self addSubview:shawdowView];
// 承载容器的视图
UIImageView *containerView = [[UIImageView alloc] initWithFrame:CGRectMake(20, SCREEN_HEIGHT*0.36, SCREEN_WIDTH-40, SCREEN_HEIGHT*0.28)];
// 一定要打开用户交互下面的关闭按钮添加手势才有效果
containerView.userInteractionEnabled = YES;
containerView.layer.cornerRadius = 5.0f;
containerView.clipsToBounds = YES;
containerView.image = [UIImage imageNamed:@"XLPopView"];
[self addSubview:containerView];
_containerView = containerView;
CGFloat cHeight = containerView.height;
// 顶部label
UILabel *topL = [UILabel new];
topL.text = @"提示";
topL.textColor = [UIColor whiteColor];
topL.font = [UIFont fontWithName:@"HelveticaNeue-Bold" size:17.0];
topL.textAlignment = NSTextAlignmentCenter;
topL.frame = CGRectMake(_containerView.width/4, 10, _containerView.width/2, 30);
[_containerView addSubview:topL];
// 右上角删除按钮
UIButton *closeBtn = [UIButton new];
closeBtn.frame = CGRectMake(_containerView.width-45, 0, 50, 50);
[closeBtn setBackgroundImage:[UIImage imageNamed:@"closeBtn"] forState:UIControlStateNormal];
[closeBtn setBackgroundImage:[UIImage imageNamed:@"closeBtn"] forState:UIControlStateHighlighted];
[closeBtn addTarget:self action:@selector(clickCloseBtn) forControlEvents:UIControlEventTouchUpInside];
[_containerView addSubview:closeBtn];
// topTitle与middleTitle 分割线
UIView *topSeperateLine = [UIView new];
topSeperateLine.frame = CGRectMake(0, cHeight/3+6, _containerView.width, 1);
topSeperateLine.backgroundColor = [UIColor colorWithWhite:0.8 alpha:0.5];
[_containerView addSubview:topSeperateLine];
// 中间label
UILabel *middleL = [UILabel new];
middleL.text = tipStr;
middleL.textColor = [UIColor whiteColor];
middleL.numberOfLines = 0;
middleL.font = [UIFont systemFontOfSize:14.0];
middleL.textAlignment = NSTextAlignmentCenter;
middleL.lineBreakMode = NSLineBreakByTruncatingMiddle;
middleL.frame = CGRectMake(10, CGRectGetMaxY(topSeperateLine.frame), _containerView.width-20, cHeight*0.3);
[_containerView addSubview:middleL];
// 确认按钮
UIButton *confirmBtn = [UIButton new];
confirmBtn.frame = CGRectMake((_containerView.width-160)/2, CGRectGetMaxY(middleL.frame), 160, 40);
confirmBtn.backgroundColor = [UIColor whiteColor];
confirmBtn.titleLabel.font = [UIFont systemFontOfSize:14.0];
confirmBtn.layer.cornerRadius = 5.0f;
[confirmBtn setTitle:@"确 定" forState:UIControlStateNormal];
[confirmBtn setTitleColor:[UIColor colorWithRed:36/255.0 green:160/255.0 blue:241/255.0 alpha:1.0] forState:UIControlStateNormal];
[_containerView addSubview:confirmBtn];
[confirmBtn addTarget:self action:@selector(clickCloseBtn) forControlEvents:UIControlEventTouchUpInside];
}
return self;
}
3、弹出框已经创建好了，要怎么显示出来？显示在哪里？这里写了一个方法放在.h文件，方便外面调用(注意：一般是放在self.view上，有时候self.view并不是最上面的窗口,有时候需要切换横竖屏，这个得根据情况做判断)。
/**
* 展示在哪个视图上
*/
- (void)showInView:(UIView *)view {
_containerView.alpha = 0;
[view addSubview:self];
_containerView.transform = CGAffineTransformMakeScale(0, 0);
[UIView animateWithDuration:PRESENTATION_ANIMATION_DURATION
delay:0
usingSpringWithDamping:1.0
initialSpringVelocity:1
options:UIViewAnimationOptionBeginFromCurrentState
animations:^{
_containerView.alpha = 1.0f;
_containerView.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished) {
}];
}
4、有显示就有消失，消失方法是放在私有方法里面的，不让外面调用，当点击右上角删除(关闭)按钮或取消按钮弹出框消失。显示和消失这里用的动画我只写了一种符合自己需求的，如果有需要可以自己设置一个枚举类型的弹出和消失方式。
- (void)dismiss {
[UIView animateWithDuration:DISMISS_ANIMATION_DURATION
delay:0
options:UIViewAnimationOptionBeginFromCurrentState
animations:^{
_containerView.alpha = 0.0;
self.alpha = 0.0;
}
completion:^(BOOL finished) {
[self removeFromSuperview];
}];
}
二、使用XLPopView
创建完了就应该知道怎么使用它了。
NSLog(@"第一种弹出框:固定提示title、右上角关闭按钮、下面确定按钮；中间提示文字可自定义。");
XLPopView *popView = [XLPopView popViewWithTipStr:@"这里可以自定义提示文字。"];
[popView showInView:[UIApplication sharedApplication].keyWindow];
两句代码创建显示完毕。其中第四种样式点击确定有一个代理方法，实现代理方法可以根据需求跳转到指定页面，具体详情可查看完整demo。
模拟效果.gif
说明：XLPopView是根据公司项目需求来写的，本想把一些相关的属性封装的更好一点，但后面想想又没这个必要，只是提供一种思路，这种提示框的东西无法做到用的人就能满足其需求，有些人需要的背景、字体、字体颜色大小、按钮...都可能不一样，所以就没有写了。
网友评论