前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >MBProgressHUD && SVProgressHUD 在实际开发中运用

MBProgressHUD && SVProgressHUD 在实际开发中运用

作者头像
小蠢驴打代码
发布2018-05-24 13:04:40
1.9K0
发布2018-05-24 13:04:40
举报
文章被收录于专栏:小蠢驴iOS专题

iOS开发中-使用提示框的场景有不少,现在最常用的两种提示框 - MBProgressHUD && SVProgressHUD ,具体什么场景使用哪个各有各的经验,我以实际项目需求,简单讲解一下 两种提示框 -- 基本属性的配置设置

made in 小蠢驴的配图

MBProgress

SVProgress


项目需求效果如下:

需求效果如上

需求说明:

a. 提示框仅显示文字,不显示图片 b. 2.5s后消失(1.5s停留,1s渐变效果 -->一定要有逐渐消失效果) c. 添加点击效果,如果点击,取消b去求的2.5s停留效果,0.5s后消失


区别 - SVProgress 都是用类方法 - [SVProgress showXXX]

        - MBProgress 都是对象方法 -> alloc init ,在对对象进行操作!

--使用MBProgress 

1.创建对象 - MBprogress

创建对象 - MBprogress

2.设置标题内容 ->  对象方法 - 不像SVProgress 是类方法!

设置展示内容

3.  设置显示模式 - - >例如目前项目需求 - 仅设置文字,不设置图片的显示(枚举类型,可以根据需求设置不同的显示模式!)

 显示模式:只显示文字

compare - SVProgress:

SVProgress 我们常用的几种状态都是带图片的

常用SVProgress 方法

为了满足项目需求->不带图片,使用showImage方法,然后图片置空!

compare - SVProgress

4.设置标题颜色

MBProgress 设置标题颜色

小tips:设置标题颜色,除了直接设置label.textColor,还有一种设置方式:setContentColor,一样可以达到效果

设置内容颜色

compare :SVProgress -- 设置颜色

这里得注意,SVProgress 都是用的类方法,没有setTextColor之类的方法,通过 官方说明文档 + 一个一个测试,得知设置 标题颜色 = setForegroudColor

SVProgress 设置 内容 + 背景色

5.MBProgess - 设置背景色

MBprogress倒是有 直接set backgroundColor的方法,但是切记,这里可以自己手动测试一下,并不是改变HUD的背景色!而是整个View的颜色都变了!

模拟:直接setBackgroudColor

效果图如下:

直接设置Progress的backgroundColor -效果图

如上图,我们发现实际的效果并不是我们想要的仅仅改变HUB背景色的效果!


解决办法:

方法一:hud是有alpha属性的,直接设置透明度!

设置hud的透明度

方法二:正规的设置方法! set bezelView 属性上的 backgroundColor!

正规设置MBprogress中 - HUD的背景色

6.项目需求的渐变消失效果 - 模糊消失

MBProgress: 设置1.0s 渐变 (alpha设置为0时消失)

动画效果实现MBProgress渐变消失

compare - SVProgress:

离场动画效果

SVProgress 是没有alpha属性的,除非我们 使用 alloc + init,创建出实例对象,所以alpha设置在这里行不通! --> 但是,经过我探究发现,虽然没有alpha属性,但是有其他方法可以达到类似效果--->就是上图的setFadeAnimation 方法!

进场/离场动画

离场动画效果展示

7. 项目需求- 点击控制HUD直接消失(如果点击提示框->0.5s后 让 提示框消失!)

分析:MBProgress 本质是UIView,所以不能addtarget ,但是可以添加手势-实现点按效果!

为MBProgress添加点按手势

然后再点按手势触发的方法中 - 调用MBProgress 消失的方法,达到效果!

compare - SVProgress

SVProgress - 同理创建实例变量  

SVProgressHUD的本质也是UIView,如果将其alloc init,同样可以做到和MBProgress一样,为其添加手势!

问题!不触发方法!没进断点

SVProgress - 本质也是 UIView,但是我们都是用类方法创建 + 设置其属性的,add 手势方法,应该是 对象方法,不是类方法! 如果我们alloc init 出来一个 SVProgress, --> 和我们设置属性的 SVProgress 不是同一个

-->解决办法!直接调用self.View 的 touch begin方法!

使用touch begin 触发SVProgress消失的方法

最终的展示效果和事例的需求效果一致!

小结:现在的提示框,用MBProgress也很多,用SVProgress的也很多,两者都有其各自的优势才能同时存在这么久,我个人是比较习惯用SVProgress框架,因为类方法直接写比较快,但是我在探究上面需求的时候,先是用MBProgress实现出需求的效果之后,再进行对比探究!因为设置属性的时候,MBProgress的优势就体现出来了~ 

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.05.27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • --使用MBProgress 
    • 1.创建对象 - MBprogress
      • 2.设置标题内容 ->  对象方法 - 不像SVProgress 是类方法!
        • 3.  设置显示模式 - - >例如目前项目需求 - 仅设置文字,不设置图片的显示(枚举类型,可以根据需求设置不同的显示模式!)
        • compare - SVProgress:
          • 4.设置标题颜色
            • compare :SVProgress -- 设置颜色
              • 5.MBProgess - 设置背景色
                • 6.项目需求的渐变消失效果 - 模糊消失
                  • 7. 项目需求- 点击控制HUD直接消失(如果点击提示框->0.5s后 让 提示框消失!)
                    • compare - SVProgress
                    领券
                    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档