MBProgressHUD1.0.0源码解析

MBProgressHUD是一个显示提示窗口的三方库,常用于用户交互、后台耗时操作等的提示。通过显示一个提示框,通知用户操作或任务的执行状态;同时,利用动画效果,降低用户等待的焦虑心理,增强用户体验。

本篇文章从源码角度来看一下MBProgressHUD是如何实现的,所用的知识都是比较基础的,不过还是值得我们学习一下。详解如下:

1. 类介绍

  • MBProgressHUD
    这是MBProgressHUD的主要类,提供丰富的属性来调整视图的样式。
  • MBRoundProgressView
    这是提供Determinate视图显示的类,有非圆环和圆环视图两种方式。
  • MBBarProgressView
    这是提供进度条的视图类。
  • MBBackgroundView
    这是MBProgressHUD的背景视图类,利用UIVisualEffectView提供毛玻璃效果

2. MBProgressHUD类的显示模式

  • MBProgressHUDModeIndeterminate


Indeterminate

  • MBProgressHUDModeDeterminate


Determinate

  • MBProgressHUDModeDeterminateHorizontalBar


DeterminateHorizontalBar

  • MBProgressHUDModeAnnularDeterminate


AnnularDeterminate

  • MBProgressHUDModeCustomView

这是自定义视图

  • MBProgressHUDModeText


Text

3.动画模式

  • MBProgressHUDAnimationFade : 渐变模式
  • MBProgressHUDAnimationZoom : Zoom In & Zoom Out
  • MBProgressHUDAnimationZoomOut : 消失时带变小动画
  • MBProgressHUDAnimationZoomIn : 出现时带变大动画

4. 背景样式

  • MBProgressHUDBackgroundStyleSolidColor : 正常颜色
  • MBProgressHUDBackgroundStyleBlur : 毛玻璃效果

5. 视图内容

  • @property (strong, nonatomic, readonly) UILabel *label; : 标题
  • @property (strong, nonatomic, readonly) UILabel *detailsLabel; :详情
  • @property (strong, nonatomic, readonly) UIButton *button : 按钮(显示在标题下方)
  • @property (strong, nonatomic, nullable) UIView *customView; :用户自定义视图
  • @property (strong, nonatomic, readonly) MBBackgroundView *backgroundView; : 整个背景视图
  • @property (strong, nonatomic, readonly) MBBackgroundView *bezelView; :提示框背景视图
  • @property (strong, nonatomic, nullable) UIColor *contentColor UI_APPEARANCE_SELECTOR; : 提示框的内容颜色
  • @property (assign, nonatomic) CGPoint offset UI_APPEARANCE_SELECTOR; :提示框相对父视图中心点的偏移量
  • @property (assign, nonatomic) CGFloat margin UI_APPEARANCE_SELECTOR; :提示框内的内容视图的边距
  • @property (assign, nonatomic) CGSize minSize UI_APPEARANCE_SELECTOR; :提示框最小尺寸
  • @property (assign, nonatomic) BOOL removeFromSuperViewOnHide; :隐藏时从父视图中删除
  • @property (assign, nonatomic) NSTimeInterval graceTime; :延迟多久后显示提示框,避免快速执行的任务也显示提示框,给用户造成视觉干扰。
  • @property (assign, nonatomic) NSTimeInterval minShowTime; :提示框视图最少展示的时间

6. 创建和隐藏视图

  • 创建流程
    通过 + (instancetype)showHUDAddedTo:(UIView *)view animated:(BOOL)animated 类方法创建视图,也可以通过对象方法创建,不过建议用类方法,不仅创建方便,而且会自动的添加到父视图,然后进行显示。其中,创建过程如下:

我们可以发现,通过添加子空间后,根据视图模式调用updateIndicators方法来创建不同的视图,最后添加了一个状态栏的通知,用来在横竖屏时跳转视图。其中,在显示提示框时,会首先判断graceTime,如过不为0,那么就创建一个定时器倒计时,时间到之后再判断任务是否结束,如果finished 不为空,就开始显示提示框。

  • 隐藏视图 通过 + (BOOL)hideHUDForView:(UIView *)view animated:(BOOL)animated 隐藏视图,其中会根据minShowTime来判断是否立即隐藏提示框。如果,minShowTime 不为0,那么会创建一个定时器,并把定时器加入到common模式的runloop里,等时间到后再把提示框隐藏。

7. MBRoundProgressView 和 MBBarProgressView

这两个类,分别创建了 Determinate 和 进度条 的提示框视图,具体实现方法是在 - (void)drawRect:(CGRect)rect 方法里通过 UIBezierPath 或者 Quarts2D 画出,设计思想算是常规,请参考代码细读。

8. MBProgressHUD应用

对于三方框架,使用之前,最好先封装一层(继承或分类),方便以后的调试和新框架替换。封装时,尽量用类方法,使用时比较简洁。
* 添加提示框

  • 隐藏提示框 (改方法调用时,最好在主线程,异步线程可能会出现问题)


参考资料

https://github.com/jdg/MBProgressHUD

感觉不错,打个赏?
微信                                 支付宝
pay_weixin            pay_zhifubao
金额随意 快来“”我呀~
联系方式:kelvin@fishbay.cn

发表评论

电子邮件地址不会被公开。 必填项已用*标注