因为项目需求，自定义弹出视图的基础上加一些用户体验更佳的动画和友情文字以及图片提示等，就有了写了这篇博客，一为方便自己以后在其他项目中复用二为更多开发者拷贝使用，若有书写代码不足之处欢迎批评指正。
先看下我的Demo示例运行效果图如下：
弹框动画效果图.png
实现文件只有一个类：（QDImageAlertView.h 和 QDImageAlertView.m）
1.QDImageAlertView.h头文件代码如下：
#import
@interface QDImageAlertView : UIView
//初始化
+ (instancetype)alertWithFrame:(CGRect)frame imageName:(NSString *)imageName title:(NSString *)title message:(NSString *)message;
//弹窗
- (void)alert;
@property (nonatomic,copy) void(^confirmButtonBlock)();
@property (nonatomic,copy) void(^cancelButtonBlock)();
@end
2.QDImageAlertView.m实现文件代码如下：
#import "QDImageAlertView.h"
#import "Masonry.h"
const CGFloat imageAlertViewWidthRatio = 0.655; //宽度系数
const CGFloat imageAlertViewHeightRatio = 0.386; //高度系统
@interface QDImageAlertView ()
@property (nonatomic, weak) UIView *bgView;
@property (nonatomic, weak) UIImageView *bgImageView;
@property (nonatomic, weak) UIImageView *iconImageView;//顶部icon图
@property (nonatomic, weak) UILabel *titleLabel;//标题
@property (nonatomic, weak) UILabel *messageLabel;//消息内容
@property (nonatomic, weak) UIView *horizontalLineV;//水平线
@property (nonatomic, weak) UIView *verticalLineV;//垂直线
@property (nonatomic, weak) UIButton *confirmButton;//确认按钮
@property (nonatomic, weak) UIButton *cancleButton;//取消按钮
@property (nonatomic, copy) NSString *title;
@property (nonatomic, copy) NSString *message;
@property (nonatomic, copy) NSString *imageName;
@end
@implementation QDImageAlertView
+ (instancetype)alertWithFrame:(CGRect)frame imageName:(NSString *)imageName title:(NSString *)title message:(NSString *)message{
QDImageAlertView *alert = [[self alloc] initWithFrame:frame];
alert.imageName = imageName;
alert.title = title;
alert.message = message;
return alert;
}
- (void)alert{
[UIApplication.sharedApplication.keyWindow addSubview:self];
}
- (instancetype)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
[self setUpUI];
}
return self;
}
- (void)setUpUI{
//大背景视图
UIView *bgView = [[UIView alloc] initWithFrame:UIApplication.sharedApplication.keyWindow.bounds];
bgView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];
bgView.alpha =0;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(cancleButtonTapped)];
[bgView addGestureRecognizer:tap];
[self addSubview:bgView];
self.bgView = bgView;
//背景图片视图
UIImageView *bgImageView = [[UIImageView alloc] init];
bgImageView.backgroundColor = [UIColor greenColor];
[bgImageView setUserInteractionEnabled:YES];
bgImageView.layer.cornerRadius = 4;
[self addSubview:bgImageView];
self.bgImageView = bgImageView;
//顶部标题视图
UIImageView *iconImageView = [[UIImageView alloc] init];
iconImageView.backgroundColor = [UIColor clearColor];
[self.bgImageView addSubview:iconImageView];
self.iconImageView = iconImageView;
//标题
UILabel *titleL = [[UILabel alloc] init];
titleL.textAlignment = NSTextAlignmentCenter;
titleL.font = [UIFont systemFontOfSize:15];
titleL.textColor = [UIColor blackColor];
[self.bgImageView addSubview:titleL];
self.titleLabel = titleL;
//消息内容
UILabel *messageLabel = [[UILabel alloc] init];
messageLabel.textAlignment = NSTextAlignmentCenter;
messageLabel.font = [UIFont systemFontOfSize:13];
messageLabel.textColor = [UIColor blackColor];
messageLabel.numberOfLines = 2;
[self.bgImageView addSubview:messageLabel];
self.messageLabel = messageLabel;
//横线
UIView *horizontalLineV = [[UIView alloc]init];
horizontalLineV.backgroundColor = [UIColor grayColor];
horizontalLineV.alpha = 0.5;
[self.bgImageView addSubview:horizontalLineV];
self.horizontalLineV = horizontalLineV;
//竖线
UIView *verticalLineV = [[UIView alloc] init];
verticalLineV.backgroundColor = [UIColor grayColor];
verticalLineV.alpha = 0.5;
[self.bgImageView addSubview:verticalLineV];
self.verticalLineV = verticalLineV;
//确定按钮
UIButton *confirmButton = [UIButton buttonWithType:UIButtonTypeCustom];
[confirmButton setTitle:@"确定" forState:UIControlStateNormal];
[confirmButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[confirmButton setTitleColor:[UIColor grayColor] forState:UIControlStateHighlighted];
[confirmButton setBackgroundColor:[UIColor whiteColor]];
[confirmButton.titleLabel setFont:[UIFont systemFontOfSize:15]];
[confirmButton addTarget:self action:@selector(confirmButtonTapped) forControlEvents:UIControlEventTouchUpInside];
[self.bgImageView addSubview:confirmButton];
self.confirmButton = confirmButton;
//取消按钮
UIButton *cancleButton = [UIButton buttonWithType:UIButtonTypeCustom];
[cancleButton setTitle:@"取消" forState:UIControlStateNormal];
[cancleButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[cancleButton setTitleColor:[UIColor grayColor] forState:UIControlStateHighlighted];
[cancleButton setBackgroundColor:[UIColor whiteColor]];
[cancleButton setBackgroundColor:[UIColor whiteColor]];
[cancleButton.titleLabel setFont:[UIFont systemFontOfSize:15]];
[cancleButton addTarget:self action:@selector(cancleButtonTapped) forControlEvents:UIControlEventTouchUpInside];
self.cancleButton = cancleButton;
[self.bgImageView addSubview:cancleButton];
if (UIDevice.currentDevice.systemVersion.doubleValue < 9.0) {
[UIView animateWithDuration:0.2 animations:^{
self.bgView.alpha = 1;
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.fromValue = [NSNumber numberWithFloat:0.7] ;
scaleAnimation.toValue = [NSNumber numberWithFloat:1.0] ;
scaleAnimation.duration = 0.1;
scaleAnimation.autoreverses = NO;
[self.bgImageView.layer addAnimation:scaleAnimation forKey:@"transform.scale"];
}];
}else{
CASpringAnimation *scaleAnimation = [CASpringAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.damping = 5;
scaleAnimation.stiffness = 100;
scaleAnimation.mass = 0.35;
scaleAnimation.fromValue = [NSNumber numberWithFloat:0.7] ;
scaleAnimation.toValue = [NSNumber numberWithFloat:1.0] ;
scaleAnimation.duration = scaleAnimation.settlingDuration;
scaleAnimation.autoreverses = NO;
[self.bgImageView.layer addAnimation:scaleAnimation forKey:@"transform.scale"];
[UIView animateWithDuration:0.2 animations:^{
self.bgView.alpha = 1;
}];
}
}
- (void)layoutSubviews{
[super layoutSubviews];
//内容宽高
CGFloat contentW = [UIScreen mainScreen].bounds.size.width * imageAlertViewWidthRatio;
CGFloat contentH = [UIScreen mainScreen].bounds.size.height * imageAlertViewHeightRatio;
[self.bgImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(contentW, contentH));
make.center.equalTo(self);
}];
[self.iconImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(self.bgImageView);
make.centerY.equalTo(self.bgImageView.mas_top);
}];
[self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(self.bgImageView);
make.top.equalTo(self.iconImageView.mas_bottom).mas_offset(10);
}];
[self.messageLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(self.bgImageView);
make.top.mas_equalTo(self.titleLabel.mas_bottom).mas_offset(20);
make.left.mas_equalTo(self.bgImageView).mas_offset(20);
make.right.mas_equalTo(self.bgImageView.mas_right).mas_equalTo(-20);
}];
[self.horizontalLineV mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(0.5);
make.left.mas_equalTo(self.bgImageView);
make.right.mas_equalTo(self.bgImageView.mas_right);
make.bottom.equalTo(self.bgImageView.mas_bottom).mas_offset(-50);
}];
[self.verticalLineV mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(0.5, 50));
make.centerX.equalTo(self.bgImageView);
make.bottom.equalTo(self.bgImageView.mas_bottom);
}];
[self.confirmButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(self.bgImageView);
make.bottom.mas_equalTo(self.bgImageView.mas_bottom);
make.size.mas_equalTo(CGSizeMake(contentW/2 - 0.5, 49));
}];
[self.cancleButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.mas_equalTo(self.bgImageView.mas_right);
make.bottom.mas_equalTo(self.bgImageView.mas_bottom);
make.size.mas_equalTo(CGSizeMake(contentW/2 - 0.5, 49));
}];
}
#pragma mark -按钮点击事件-
- (void)confirmButtonTapped{
if (self.confirmButtonBlock) {
self.confirmButtonBlock();
}
[UIView animateWithDuration:0.15 animations:^{
self.bgView.alpha = 0;
[self.bgImageView.layer removeAllAnimations];
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0] ;
scaleAnimation.toValue = [NSNumber numberWithFloat:0.5] ;
scaleAnimation.duration = 0.15;
scaleAnimation.autoreverses = NO;
[self.bgImageView.layer addAnimation:scaleAnimation forKey:@"transform.scale"];
}];
[self performSelector:@selector(removeSelf) withObject:nil afterDelay:0.12];
}
- (void)cancleButtonTapped{
if (self.cancelButtonBlock) {
self.cancelButtonBlock();
}
[UIView animateWithDuration:0.15 animations:^{
self.bgView.alpha = 0;
[self.bgImageView.layer removeAllAnimations];
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0] ;
scaleAnimation.toValue = [NSNumber numberWithFloat:0.5] ;
scaleAnimation.duration = 0.15;
scaleAnimation.autoreverses = NO;
[self.bgImageView.layer addAnimation:scaleAnimation forKey:@"transform.scale"];
}];
[self performSelector:@selector(removeSelf) withObject:nil afterDelay:0.12];
}
- (void)removeSelf{
[self removeFromSuperview];
}
- (void)setImageName:(NSString *)imageName{
_imageName = imageName;
self.iconImageView.image = [UIImage imageNamed:imageName];
}
- (void)setTitle:(NSString *)title{
_title = title;
self.titleLabel.text = title;
}
- (void)setMessage:(NSString *)message{
_message = message;
self.messageLabel.text = message;
}
@end
3.调用方式:
QDImageAlertView *alertView = [QDImageAlertView alertWithFrame:self.view.frame imageName:@"trash" title:@"是否确定删除?" message:@"梵蒂冈的范德萨范德萨了发的发的是范德萨范德萨"];
[alertView setConfirmButtonBlock:^{
NSLog(@"正在删除，请稍后");
}];
[alertView alert];
如果您希望在你的项目中直接使用，那就直接拷贝就行
如果觉得还不够具体，后期考虑将代码上传github与分享源码，希望深层交流的童鞋加我qq:1107160410，我们一起探讨，感谢您看到这里，如方便的话点个赞，我会更加努力。
- 欢迎点击下篇博客链接
http://www.jianshu.com/p/a03ab31ffc88查看更加相关内容，可能会帮到您。