iu
故事背景：
这是自动签到成功后的弹窗（既像弹窗又像hud），图片是后台返回的，点击兑换按钮会跳转到兑换页面，点击X按钮或单击半透明view后hud会消失。UI如下：
UI
思路：
等网络图片加载完成后再创建UI。
控件添加到keyWindow上。
想要达到的效果：
1.希望能和SVProgressHUD一样通过简单调用一个类方法就弹出弹窗。
2.使用block处理按钮点击事件。
最终达到的效果如下：
[CQPointHUD showAlertWithImageURL:@"http://ohbxuuf5q.bkt.clouddn.com/%E6%B3%B0%E5%A6%8D.png" ButtonClickedBlock:^{
NSLog(@"弹窗兑换按钮点击");
}];
最终效果
代码：
/**
带网络图片与block回调的弹窗
@param imageURL 图片URL
@param buttonClickedBlock 兑换按钮点击时的回调
*/
+ (void)showAlertWithImageURL:(NSString *)imageURL ButtonClickedBlock:(void (^)())buttonClickedBlock{
// 先获取网络图片
UIImageView *goodsImageView = [[UIImageView alloc]init];
[goodsImageView sd_setImageWithURL:[NSURL URLWithString:imageURL] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
// 获取图片成功后再搭建UI
// 大背景
UIView *bgView = [[UIView alloc]init];
[[UIApplication sharedApplication].keyWindow addSubview:bgView];
bgView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.7];
[bgView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.mas_equalTo(UIEdgeInsetsMake(0, 0, 0, 0));
}];
// 网络图片
[bgView addSubview:goodsImageView];
[goodsImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.mas_equalTo(bgView);
make.centerY.mas_equalTo(bgView).mas_offset(-60);
make.size.mas_equalTo(CGSizeMake(225, 205));
}];
// 签到label
UILabel *signLabel = [[UILabel alloc]init];
[bgView addSubview:signLabel];
signLabel.text = @"今日签到获得+10积分";
signLabel.textAlignment = NSTextAlignmentCenter;
signLabel.font = [UIFont systemFontOfSize:15];
signLabel.textColor = [UIColor whiteColor];
[signLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(16);
make.centerX.mas_equalTo(bgView).mas_offset(-9);
make.top.mas_equalTo(goodsImageView.mas_bottom).mas_offset(8);
}];
// 签到成功图片
UIImageView *signImageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"sign_success"]];
[bgView addSubview:signImageView];
[signImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.mas_equalTo(signLabel);
make.left.mas_equalTo(signLabel.mas_right).mas_offset(3);
make.size.mas_equalTo(CGSizeMake(14, 14));
}];
// 持有积分
UILabel *scoreLabel = [[UILabel alloc]init];
[bgView addSubview:scoreLabel];
scoreLabel.textColor = [UIColor whiteColor];
scoreLabel.text = @"小主~您的积分已达到500";
scoreLabel.adjustsFontSizeToFitWidth = YES; // 避免尴尬情况
scoreLabel.font = [UIFont systemFontOfSize:15];
scoreLabel.textAlignment = NSTextAlignmentCenter;
[scoreLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(signLabel.mas_bottom).mas_offset(7);
make.height.mas_equalTo(16);
make.left.right.mas_equalTo(goodsImageView);
}];
// 兑换按钮
UIButton *conversionButton = [[UIButton alloc]init];
[bgView addSubview:conversionButton];
conversionButton.backgroundColor = [UIColor colorWithHexString:@"e83421"];
[conversionButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[conversionButton.titleLabel setFont:[UIFont systemFontOfSize:15]];
[conversionButton setTitle:@"前去兑换" forState:UIControlStateNormal];
conversionButton.layer.cornerRadius = 6;
conversionButton.titleEdgeInsets = UIEdgeInsetsMake(0, -5, 0, 12);
[conversionButton setImage:[UIImage imageNamed:@"sign_exchange"] forState:UIControlStateNormal];
[conversionButton setImage:[UIImage imageNamed:@"sign_exchange"] forState:UIControlStateHighlighted];
conversionButton.imageEdgeInsets = UIEdgeInsetsMake(0, 71, 0, 0);
[[conversionButton rac_signalForControlEvents:UIControlEventTouchUpInside] subscribeNext:^(id x) {
buttonClickedBlock(); // 回调block
[bgView removeFromSuperview];
}];
[conversionButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.mas_equalTo(bgView);
make.top.mas_equalTo(scoreLabel.mas_bottom).mas_offset(9);
make.size.mas_equalTo(CGSizeMake(84, 29));
}];
// 取消按钮
UIButton *cancelButton = [[UIButton alloc]init];
[bgView addSubview:cancelButton];
[cancelButton setBackgroundImage:[UIImage imageNamed:@"sign_out"] forState:UIControlStateNormal];
[[cancelButton rac_signalForControlEvents:UIControlEventTouchUpInside] subscribeNext:^(id x) {
[bgView removeFromSuperview];
}];
[cancelButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.mas_equalTo(goodsImageView);
make.bottom.mas_equalTo(goodsImageView.mas_top).mas_offset(-22);
make.size.mas_equalTo(CGSizeMake(30, 30));
}];
// 添加单击取消手势
UITapGestureRecognizer *cancelGesture = [[UITapGestureRecognizer alloc] init];
[[cancelGesture rac_gestureSignal] subscribeNext:^(id x) {
[bgView removeFromSuperview];
}];
[bgView addGestureRecognizer:cancelGesture];
}];
}
细节&注意事项
1.一位大佬曾说：“如果点击事件里需要传值的话，protocol比block好；block在没有参数的时候比较好。”所以我这里使用block处理按钮点击事件。
2.掌握常用的几个RAC信号将有助于你的开发。
demo
弹窗和hud的各种demo