iOS提示框,自定义hud+模糊背景(DzProgressHUD)纯手工

城市有我奋斗的青春.jpg

这波怕是要来一波湿得了,今天2017年农历1月22。
恩,今天是我的生日。
还好周六,写了一个提示框分享一下。
本来只是想模仿QQ的提示框动画的,写着写着写了好多。
做iOS的时间说长不长说短也不短,今天这个框架全当生日礼物了,么么哒。
还是老套路看下效果图吧。

背景图还是要骚.png
展示两个,哦啦.png

先说下思路吧:
一开始我继承个UIView直接开怼,然而我还需要一个模糊背景这就比较蛋疼了。
扒了几下看到一个UIVisualEffectView,所以就用了。
很简单:就是画好控件全部加在 UIVisualEffectView 然后大家都懂提示框加在window。
实现外界可调用的接口:弹出提示框,清除提示框等等一些方法。
贴下代码:

1.懒加载把所有的控件都写好加在self(UIVisualEffectView)上

@interface DzProgressHUD ()

@property(strong,nonatomic)UIView      * backGViewForCenter;
@property(copy  ,nonatomic)NSString    * message;
@property(strong,nonatomic)UILabel     * messageLab;
@property(strong,nonatomic)UIImageView * successImg;
@property(strong,nonatomic)UIImageView * faildImg;
@property(weak,nonatomic)UIActivityIndicatorView * aivLoading;
@property(strong,nonatomic)UIImageView * gifImg;

// QQ提示框
@property(assign,nonatomic)BOOL          isQQPromatBox;
@property(strong,nonatomic)UIImageView * promatSuccessImg;
@property(strong,nonatomic)UIImageView * promatFaildImg;
@property(strong,nonatomic)UILabel     * titleLab;
@property(strong,nonatomic)UIView      * backGView;

@end

#pragma  mark --- 懒加载 ---

-(UIView *)backGViewForCenter
{
    if (_backGViewForCenter == nil) {
        UIView * view = [[UIView alloc]init];
        view.backgroundColor = [UIColor whiteColor];
        [self addSubview:view];
        _backGViewForCenter = view;
    }
    return _backGViewForCenter;
}

-(UIActivityIndicatorView *)aivLoading
{
    if (_aivLoading == nil) {
        UIActivityIndicatorView *aivLoading = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
        [aivLoading startAnimating];
        aivLoading.color = [UIColor whiteColor];
        [self addSubview:aivLoading];
        _aivLoading = aivLoading;
    }
    return _aivLoading;
}

-(UILabel *)messageLab
{
    if (_messageLab == nil) {
        UILabel * lab  = [[UILabel alloc]init];
        lab.textAlignment = NSTextAlignmentCenter;
        lab.font = [UIFont systemFontOfSize:14];
        lab.textColor = [UIColor whiteColor];
        lab.numberOfLines = 0;
        [self addSubview:lab];
        _messageLab = lab;
    }
    return _messageLab;
}
// 贴三个实现 ,都是一个套路

2.从layoutSubviews布局好每一个控件的位置

#pragma  mark --- 最后的布局 ---
-(void)layoutSubviews
{
    if (self.isQQPromatBox) {
        
        [self qqPromptBoxLayout];
    }else{
        [self dzPromptBoxLayout];
    }
}

-(void)dzPromptBoxLayout
{
    DzProgressHUD * hudForQQ = [DzProgressHUD promatBoxForQQ];
    [hudForQQ removeFromSuperview];
    CGFloat promatBoxWH;
    DzProgressHUD * hud = [DzProgressHUD promatBox];
    if (hud.gifImg.hidden == NO) {
        promatBoxWH = 200;
    }else promatBoxWH = 120;
    CGFloat promatBoxX = (WIDTH - promatBoxWH)*0.5;
    CGFloat promatBoxY = (HEIGHT- promatBoxWH)*0.5;
    
    self.frame = CGRectMake(promatBoxX, promatBoxY, promatBoxWH, promatBoxWH);
    self.backGViewForCenter.frame = CGRectMake(promatBoxX, promatBoxY, promatBoxWH, promatBoxWH);
    CGFloat promatBoxW = self.frame.size.width;
    CGFloat promatBoxH = self.frame.size.height;
    CGFloat imgW = 50;
    CGFloat imgX = (promatBoxW - imgW) * 0.5;
    CGFloat imgY = (promatBoxH - imgW) * 0.5;
    self.successImg.frame = CGRectMake(imgX, imgY, imgW, imgW);
    self.faildImg.frame   = CGRectMake(imgX, imgY, imgW, imgW);
    self.aivLoading.frame = CGRectMake(imgX, imgY, imgW, imgW);
    self.gifImg.frame    = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
    if (![@"" isEqualToString:self.message]) {
        UILabel * lab = [[UILabel alloc]init];
        lab.text = self.message;
        [lab sizeToFit];
        CGFloat w = lab.frame.size.width;
        CGFloat h = lab.frame.size.height;
        CGSize  size = CGSizeMake(w, h);
        // 略微调高
        CGFloat imgY = (self.frame.size.height - imgW) * 0.5 - 10;
        CGRect frame = self.aivLoading.frame;
        frame.origin.y= imgY;
        self.aivLoading.frame = frame;
        self.successImg.frame = frame;
        self.faildImg.frame = frame;
        CGFloat messageW = promatBoxW - 12 * 2;
        CGFloat messageH = size.height;
        CGFloat messageX = (promatBoxW - messageW) * 0.5;
        CGFloat messageY = CGRectGetMaxY(self.successImg.frame) + 12;
        self.messageLab.frame = CGRectMake(messageX,messageY, messageW, messageH);
        // 如果高度超过限定的高度50,增加自身高度
        if (size.height > 50) {
            CGRect frame = self.frame;
            frame.size.height = CGRectGetMaxY(self.messageLab.frame) + 12;
            frame.origin.x    = WIDTH - self.frame.size.width * 0.5;
            self.frame = frame;
            self.gifImg.frame = self.frame;
        }
    }
}
-(void)qqPromptBoxLayout
{
    self.layer.cornerRadius = 0;
    CGFloat bgViewH = 64;
    CGFloat bgViewX = 0;
    CGFloat bgViewY = 0;
    CGFloat bgViewW = WIDTH;
    self.frame           = CGRectMake(bgViewX, bgViewY, bgViewW, bgViewH);
    self.backGView.frame = CGRectMake(bgViewX, bgViewY, bgViewW, bgViewH);
    
    CGFloat imgWH   = 26;
    CGFloat imgX    = 10;
    CGFloat imgY    = (bgViewH - imgWH)* 0.5+12;
    self.promatFaildImg.frame = CGRectMake(imgX, imgY, imgWH, imgWH);
    self.promatSuccessImg.frame = CGRectMake(imgX, imgY, imgWH, imgWH);
    
    CGFloat labX    = CGRectGetMaxX(self.promatFaildImg.frame)+10;
    CGFloat labY    = imgY;
    CGFloat labW    = WIDTH - labX - 10;
    CGFloat labH    = imgWH;
    self.titleLab.frame = CGRectMake(labX, labY, labW, labH);
}

3.实现外界可调用的接口:我这里写的类方法,因为是提示框所以存在这么一个情况(网络请求->菊花转动,请求完成或失败后->清除提示框,所以在类中创建了单例可以理解为self来使用)

// 所有外界可调用的接口基本都是这么实现的,我利用hidden属性来控制的UI(可能比较low希望童鞋们有好的办法可以教我一下)
+ (void)showFaild:(NSString *)message intervalTime:(CGFloat)intervalTime
{
    // 添加视图
    UIWindow * window = [UIApplication sharedApplication].keyWindow;
    DzProgressHUD * hud = [self promatBox];
    hud.isQQPromatBox = NO;
    [hud ownSet];
    [window addSubview:hud];
    
    // 传递文字数据
    hud.message = message;
    hud.messageLab.text = hud.message;
    
    // 显示和隐藏的模块
    hud.backGView.hidden  = YES;
    hud.successImg.hidden = YES;
    hud.faildImg.hidden   = NO;
    hud.aivLoading.hidden = YES;
    hud.messageLab.hidden = NO;
    hud.gifImg.hidden     = YES;
    
    // 重新布局
    [hud layoutSubviews];
    
    // 动画
    hud.transform = CGAffineTransformScale(hud.transform, 0.1, 0.1);
    [UIView animateWithDuration:0.3 animations:^{
        hud.transform = CGAffineTransformIdentity;
    } completion:^(BOOL finished) {
    }];
    
    // 自动消失
    CGFloat time = intervalTime;
    dispatch_time_t delayTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(time/*延迟执行时间*/ * NSEC_PER_SEC));
    dispatch_after(delayTime, dispatch_get_main_queue(), ^{
        [DzProgressHUD  dismiss];
    });

}
#pragma  mark -- 模仿QQ提示框 ---
// 这里是模仿QQ提示框的实现部分(其实都一样)
+(void)showQQPromatBoxForGreenTitle:(NSString *)title
{
    UIWindow * window = [UIApplication sharedApplication].keyWindow;
    DzProgressHUD * hud = [DzProgressHUD promatBox];
    [window addSubview:hud];
    
    [hud hidsomeView];
    hud.isQQPromatBox = YES;
    
    hud.titleLab.text = title;
    
    hud.backGView.hidden         = NO;
    hud.promatFaildImg.hidden    = YES;
    hud.promatSuccessImg.hidden  = NO;
    hud.titleLab.hidden          = NO;
    
    [hud layoutSubviews];

    hud.transform = CGAffineTransformMakeTranslation(0, HEIGHT/2 - HEIGHT);
//    hud.transform = CGAffineTransformTranslate(hud.transform, 0, HEIGHT/2 - HEIGHT);
    [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.6 initialSpringVelocity:0.6 options:(UIViewAnimationOptionTransitionFlipFromTop) animations:^{
        hud.transform = CGAffineTransformIdentity;
    } completion:^(BOOL finished) {
        dispatch_time_t delayTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1/*延迟执行时间*/ * NSEC_PER_SEC));
        dispatch_after(delayTime, dispatch_get_main_queue(), ^{
        [self dismiss];
        });
    }];
    
}

好了,容我附上Demo下载地址:https://pan.baidu.com/s/1kUKrd35
demo中还有一个自己封装的网络请求类,所以有点乱名字也是网络请求的.

再bb点没用的:
今天是我的23岁生日,也是如此平常的一天。
早上在公交上走神还做过了站,很难受。迟到了(虽然我的内心是拒绝的)。
但是我带了几瓶奶和一些巧克力分享给同事(我们这个小团队很和谐),大家都很开心。
but,全公司就我一个单身汪(哇,好气。)。
另:
希望有可以用到我的东西的童鞋升职加薪,早日脱单,BUG滚蛋。
实在过意不去就给评论生日快乐助助兴 哈哈 。
无兄弟不撸码,兄弟们一块加油! GO GO GO 。
(下一篇可能会更新关于动画文章,谢谢大家)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容